Jquery probleem...
Ik heb een probleem met Jquery:
Ik gebruik het scriptje van http://css-tricks.com/examples/MovingBoxes/ en het scriptje van http://andylangton.co.uk/articles/javascript/jquery-show-hide-multiple-elements/ op één pagina. Maar het wil niet werken...
Het lijkt wel alsof je niet twee keer jquery kunt gebruiken op één pagina.
Weten jullie de oplossing?
Joep
Code (php)
1
2
3
2
3
<script src="js/jquery-1.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/slider.js" type="text/javascript" charset="utf-8"></script>
<script src="js/hideshow.js" type="text/javascript"></script>
<script src="js/slider.js" type="text/javascript" charset="utf-8"></script>
<script src="js/hideshow.js" type="text/javascript"></script>
In de body het is om het hideshow scriptje te testen het volgende gezet:
Code (php)
1
<h3>Test 1</h3><p class="toggle">Uitleg bij test 1</p>
Ook include ik met php de html-pagina met het MovingBoxes script.
2: toon dat moving boxes script eens, dus gewoon de hele pagina, waar je include, en de include zelf.
Ik heb een lay-out met twee kolommen. Ik haal de tekst op uit de database en als de portfolio-pagina opgevraagd wordt, moet er geen tekst worden opgevraagd, maar moeten de kolommen vervangen worden door één vak. In dat vak wordt vervolgens portfolio.html geïnclude met de volgende inhoud:
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
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
<div id="wrapper">
<div id="slider">
<img class="scrollButtons left" src="pimages/leftarrow.png">
<div style="overflow: hidden;" class="scroll">
<div class="scrollContainer">
<div class="panel" id="panel_1">
<div class="inside">
<a href="*****" target="_blank"><img src="pimages/1.png" alt="picture" /></a>
<h2>*****</h2>
<p>Enkel een layout</p>
</div>
</div>
<div class="panel" id="panel_2">
<div class="inside">
<a href="*****" target="_blank"><img src="pimages/2.png" alt="picture" /></a>
<h2>*****</h2>
<p>Complete website</p>
</div>
</div>
<div class="panel" id="panel_3">
<div class="inside">
<a href="*****" target="_blank"><img src="pimages/3.png" alt="picture" /></a>
<h2>*****</h2>
<p>Complete website incl. CMS</p>
</div>
</div>
<div class="panel" id="panel_4">
<div class="inside">
<a href="*****" target="_blank"><img src="pimages/4.png" alt="picture" /></a>
<h2>*****</h2>
<p>Complete website incl. CMS</p>
</div>
</div>
<div class="panel" id="panel_5">
<div class="inside">
<a href="*****" target="_blank"><img src="pimages/5.png" alt="picture" /></a>
<h2>*****</h2>
<p>Complete website incl. CMS</p>
</div>
</div>
</div>
<div id="left-shadow"></div>
<div id="right-shadow"></div>
</div>
<img class="scrollButtons right" src="pimages/rightarrow.png">
</div>
</div>
<div id="slider">
<img class="scrollButtons left" src="pimages/leftarrow.png">
<div style="overflow: hidden;" class="scroll">
<div class="scrollContainer">
<div class="panel" id="panel_1">
<div class="inside">
<a href="*****" target="_blank"><img src="pimages/1.png" alt="picture" /></a>
<h2>*****</h2>
<p>Enkel een layout</p>
</div>
</div>
<div class="panel" id="panel_2">
<div class="inside">
<a href="*****" target="_blank"><img src="pimages/2.png" alt="picture" /></a>
<h2>*****</h2>
<p>Complete website</p>
</div>
</div>
<div class="panel" id="panel_3">
<div class="inside">
<a href="*****" target="_blank"><img src="pimages/3.png" alt="picture" /></a>
<h2>*****</h2>
<p>Complete website incl. CMS</p>
</div>
</div>
<div class="panel" id="panel_4">
<div class="inside">
<a href="*****" target="_blank"><img src="pimages/4.png" alt="picture" /></a>
<h2>*****</h2>
<p>Complete website incl. CMS</p>
</div>
</div>
<div class="panel" id="panel_5">
<div class="inside">
<a href="*****" target="_blank"><img src="pimages/5.png" alt="picture" /></a>
<h2>*****</h2>
<p>Complete website incl. CMS</p>
</div>
</div>
</div>
<div id="left-shadow"></div>
<div id="right-shadow"></div>
</div>
<img class="scrollButtons right" src="pimages/rightarrow.png">
</div>
</div>
heb je geen live voorbeeld waar ik naar kan kijken? wat is je error.
Ik zal wel even een voorbeeld online zetten.
http://j-webdesign.nl/newlay/
Als je naar http://j-webdesign.nl/newlay/portfolio gaat, veranderen de twee kolommen in één vak waarin de moving boxes staan (worden geïnclude).
Homepage:
Foutdetails webpagina
Tijdstempel: Wed, 8 Jul 2009 11:12:47 UTC
Bericht: '0.offsetWidth' is leeg of geen object
Regel: 24
Teken: 2
Code: 0
URI: http://j-webdesign.nl/newlay/js/slider.js
Gewijzigd op 01/01/1970 01:00:00 door wesley Overdijk
Het werkt hier gewoon?
baai teh wey, het is mooi, die website, alleen denk aan de safe size.
Wat bedoel je met "heb je nou wel een js script gedownload of w/e, en dan moet je dat aanpassen"?
Welk vakje onder de img en welke href?
En hoezo denk aan de safe size?
Deze size is toch safe?
En als ik op ene afbeelding klik, in je portfolio, opent zich de website. als je dat nou vervangt door een actie, die je 'omschrijving' eronder zet, met ik neem aan de link naar de website.
Dus je bedoelt dat de boxes dan gewoon moeten verschuiven naar de site, zodat je de link en omschrijving kunt zien? Of begrijp ik dat verkeerd?
Wat is de resolutie van je scherm?:)
en ja klopt er staat text onder :$ maar, dat wil je daar pas hebben als die website vooraan staat, juist?
Nee hoor, op deze manier vind ik het goed. Alle titels en bijbehorende teksten zijn altijd te zien, maar als de site vooraan staat worden de titel en het tekstje bij die site vergroot.
Maarja, weer even over het probleem.
Ik heb het op de volgende manier opgelost:
Code (php)
De oplossing is dus niet echt optimaal, aangezien ik waarschijnlijk nog meer javascriptjes wil gaan gebruiken.
Heeft er echt niemand een goede oplossing???
EDIT: het hideshow script is te vinden onder "diensten"
Gewijzigd op 01/01/1970 01:00:00 door Joep Bogaers