...

View Full Version : Resolved why does this not work



roelof
01-06-2012, 01:03 PM
hello,

I found this script : http://roshanbh.com.np/2008/06/accordion-menu-using-jquery.html

I implemted this into my website http://test.tamarawobben.nl
but as you can see it don't work.

Can anyone help me figure out why the script does not work.

Roelof

Amphiluke
01-06-2012, 01:37 PM
Place your code into a function and pass it as a parameter of the .ready() method.

<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#firstpane p.menu_head").click(function(){ $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow"); $(this).siblings().css({backgroundImage:"url(left.png)"});});
});
</script>

roelof
01-06-2012, 01:59 PM
Thanks,

Now I hope to find out why the images are not shown up.
They disappear when the script is running.

Roelof

roelof
01-07-2012, 09:20 AM
Nobody who can help me with this annoying problem ?

Roelof

Amphiluke
01-07-2012, 09:40 AM
Try to provide the path to the background image relative to the root of the site:

$(document).ready(function() {
$("#firstpane p.menu_head").click(function(){ $(this).css({backgroundImage:"url('/workspace/assets/img/down.png')"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow"); $(this).siblings().css({backgroundImage:"url('/workspace/assets/img/left.png')"});});
});

roelof
01-07-2012, 10:03 AM
Oke, That worked. But if yoou close the menu the down image are still shown.
Maybe because there now only one item.

Roelof

Amphiluke
01-07-2012, 11:00 AM
Maybe because there now only one item.
This bug initially presented in that script (http://roshanbh.com.np/2008/06/accordion-menu-using-jquery.html).

Here is a possible fix:

$(document).ready(function() {
$("#firstpane p.menu_head").click(function(){
var menu_body = $(this).next("div.menu_body");
$(this).css({backgroundImage:"url('/workspace/assets/img/" +
(menu_body.is(":visible") ? "left.png')" : "down.png')")});
menu_body.slideToggle(300)
.siblings("div.menu_body")
.slideUp("slow");
$(this).siblings().css({backgroundImage:"url('/workspace/assets/img/left.png')"});
});
});


But it would be much better to transfer all styles (background in this case) into CSS file and then just toggle class names via JavaScript. JavaScript-hardcoded background image paths is not a good programming technique.

roelof
01-07-2012, 12:04 PM
Oke, Im totally not a javascript person so Im happy with this solution.
Everyone thanks for the help



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum