2 verschillende codes die met elkaar botsen
Ik heb totaal geen verstand van javascript maar vond JQuery UI erg mooi, en heb dat op mn site toegepast. Nou zag ik later een stukje JQuery met een hover, wanneer je over een item in een tabel gaat, krijgt deze een kleur... Deze botst alleen met het JQuery Collapse gebeuren. Heeft iemand een idee hoe dit komt?
Groeten Donny
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<script type="text/javascript" src="include/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="include/js/jquery-ui-1.8.18.custom.min.js"></script>
<script>
$(function() {
$( "#accordion" ).accordion({collapsible: true, active: false});
});
</script>
<script type="text/javascript" src="wp-content/jquery/jquery-1.2.1.pack.js"></script>
<script type="text/javascript" src="wp-content/jquery/chili/chili.js"></script>
<script type="text/javascript" src="jquery.tablehover.js"></script>
<script type="text/javascript">
<!--
ChiliBook.recipeFolder = "wp-content/jquery/chili/";
ChiliBook.stylesheetFolder = "wp-content/jquery/chili/";
$(document).ready(function()
{
$('#tableone').tableHover();
});
-->
</script>
<script type="text/javascript" src="include/js/jquery-ui-1.8.18.custom.min.js"></script>
<script>
$(function() {
$( "#accordion" ).accordion({collapsible: true, active: false});
});
</script>
<script type="text/javascript" src="wp-content/jquery/jquery-1.2.1.pack.js"></script>
<script type="text/javascript" src="wp-content/jquery/chili/chili.js"></script>
<script type="text/javascript" src="jquery.tablehover.js"></script>
<script type="text/javascript">
<!--
ChiliBook.recipeFolder = "wp-content/jquery/chili/";
ChiliBook.stylesheetFolder = "wp-content/jquery/chili/";
$(document).ready(function()
{
$('#tableone').tableHover();
});
-->
</script>
Heb je het over deze tableHover?
http://p.sohei.org/stuff/jquery/tablehover/demo/demo.html
En heb je ergens een online voorbeeld (eventueel van andere sites) van dat accordion/collapse effect?
Voor de accordion heb ik de officiele site van JQuery gebruikt.
Donny van Grondelle op 07/08/2012 15:48:03:
Voor de accordion heb ik de officiele site van JQuery gebruikt.
Ja, okay, maar dat daar staat geen voorbeeld met <table>.
Een eigenschap van een tabel is dat alle cellen van de zelfde rij de zelfde hoogte zullen hebben, alsook alle cellen van een kolom de zelfde breedte hebben.
Wat verwacht je dat er gebeurt?
Dan mag dat inderdaad geen probleem geven.
Voorbeeldje:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://p.sohei.org/stuff/jquery/tablehover/demo/jquery.tablehover.js"></script>
<link rel="stylesheet" type="text/css" href="http://p.sohei.org/stuff/jquery/tablehover/demo/style.css" />
<script>
$(document).ready(function($) {
$("#accordion").accordion({collapsible: true, active: false});
$('#tableone').tableHover();
});
</script>
<script type="text/javascript" src="wp-content/jquery/chili/chili.js"></script>
<script type="text/javascript">
<!--
//ChiliBook.recipeFolder = "wp-content/jquery/chili/";
//ChiliBook.stylesheetFolder = "wp-content/jquery/chili/";
-->
</script>
<style type="text/css">
table { width: 400px; } td.click, th.click { background-color: #bbb; } td.hover, tr.hover { background-color: #69f; } th.hover, tfoot td.hover { background-color: ivory; } td.hovercell, th.hovercell { background-color: #abc; } td.hoverrow, th.hoverrow { background-color: #6df; }
#accordion {width: 400px;} #accordion h2 {cursor: pointer;}
</style>
</head>
<body>
<div id="accordion">
<h2>Click for content 1</h2>
<div class="content">
<p>test</p>
</div>
<h2>Click for content 2</h2>
<div class="content">
<p>test</p>
</div>
<h2>Click for content 3</h2>
<div class="content">
<p>test</p>
</div>
</div>
<table id="tableone">
<thead>
<tr><th colspan="2">A</th><th colspan="2">B</th><th colspan="2">C</th><th colspan="2">D</th></tr>
<tr><th>A+</th><th>A-</th><th>B+</th><th>B-</th><th>C+</th><th>C-</th><th>D+</th><th>D-</th></tr>
</thead>
<tfoot>
<tr><td>11</td><td>4</td><td>9</td><td>8</td><td>2</td><td>2</td><td>1</td><td>4</td></tr>
</tfoot>
<tbody>
<tr><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td><a href="#">X</a></td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
<tr><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td><a href="#">X</a></td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
<tr><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
<tr><td>-</td><td>-</td><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td></tr>
<tr><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td><a href="#">X</a></td><td>-</td><td>-</td><td>-</td><td><a href="#">X</a></td></tr>
<tr><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td><a href="#">X</a></td><td>-</td><td>-</td><td>-</td><td><a href="#">X</a></td></tr>
<tr><td><a href="#">X</a></td><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td></tr>
<tr><td><a href="#">X</a></td><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
<tr><td><a href="#">X</a></td><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td>-</td><td>-</td><td><a href="#">X</a></td><td>-</td></tr>
<tr><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td>-</td><td>-</td><td>-</td></tr>
<tr><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td><a href="#">X</a></td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
<tr><td><a href="#">X</a></td><td><a href="#">X</a></td><td><a href="#">X</a></td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
</tbody>
</table>
</body>
</html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://p.sohei.org/stuff/jquery/tablehover/demo/jquery.tablehover.js"></script>
<link rel="stylesheet" type="text/css" href="http://p.sohei.org/stuff/jquery/tablehover/demo/style.css" />
<script>
$(document).ready(function($) {
$("#accordion").accordion({collapsible: true, active: false});
$('#tableone').tableHover();
});
</script>
<script type="text/javascript" src="wp-content/jquery/chili/chili.js"></script>
<script type="text/javascript">
<!--
//ChiliBook.recipeFolder = "wp-content/jquery/chili/";
//ChiliBook.stylesheetFolder = "wp-content/jquery/chili/";
-->
</script>
<style type="text/css">
table { width: 400px; } td.click, th.click { background-color: #bbb; } td.hover, tr.hover { background-color: #69f; } th.hover, tfoot td.hover { background-color: ivory; } td.hovercell, th.hovercell { background-color: #abc; } td.hoverrow, th.hoverrow { background-color: #6df; }
#accordion {width: 400px;} #accordion h2 {cursor: pointer;}
</style>
</head>
<body>
<div id="accordion">
<h2>Click for content 1</h2>
<div class="content">
<p>test</p>
</div>
<h2>Click for content 2</h2>
<div class="content">
<p>test</p>
</div>
<h2>Click for content 3</h2>
<div class="content">
<p>test</p>
</div>
</div>
<table id="tableone">
<thead>
<tr><th colspan="2">A</th><th colspan="2">B</th><th colspan="2">C</th><th colspan="2">D</th></tr>
<tr><th>A+</th><th>A-</th><th>B+</th><th>B-</th><th>C+</th><th>C-</th><th>D+</th><th>D-</th></tr>
</thead>
<tfoot>
<tr><td>11</td><td>4</td><td>9</td><td>8</td><td>2</td><td>2</td><td>1</td><td>4</td></tr>
</tfoot>
<tbody>
<tr><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td><a href="#">X</a></td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
<tr><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td><a href="#">X</a></td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
<tr><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
<tr><td>-</td><td>-</td><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td></tr>
<tr><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td><a href="#">X</a></td><td>-</td><td>-</td><td>-</td><td><a href="#">X</a></td></tr>
<tr><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td><a href="#">X</a></td><td>-</td><td>-</td><td>-</td><td><a href="#">X</a></td></tr>
<tr><td><a href="#">X</a></td><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td></tr>
<tr><td><a href="#">X</a></td><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
<tr><td><a href="#">X</a></td><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td>-</td><td>-</td><td><a href="#">X</a></td><td>-</td></tr>
<tr><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td>-</td><td>-</td><td>-</td></tr>
<tr><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td><a href="#">X</a></td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
<tr><td><a href="#">X</a></td><td><a href="#">X</a></td><td><a href="#">X</a></td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
</tbody>
</table>
</body>
</html>
Ik heb geen idee wat die Chili is of doet; die heb ik maar in commentaar gezet