Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Dec 2011
    Posts
    34
    Thanks
    7
    Thanked 0 Times in 0 Posts

    why does this not work

    hello,

    I found this script : http://roshanbh.com.np/2008/06/accor...ng-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
    Last edited by roelof; 01-07-2012 at 01:05 PM.

  • #2
    Regular Coder Amphiluke's Avatar
    Join Date
    Jul 2009
    Posts
    312
    Thanks
    3
    Thanked 89 Times in 89 Posts
    Place your code into a function and pass it as a parameter of the .ready() method.
    Code:
    <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>
    I am still learning English

  • Users who have thanked Amphiluke for this post:

    roelof (01-06-2012)

  • #3
    New Coder
    Join Date
    Dec 2011
    Posts
    34
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thanks,

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

    Roelof

  • #4
    New Coder
    Join Date
    Dec 2011
    Posts
    34
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Nobody who can help me with this annoying problem ?

    Roelof

  • #5
    Regular Coder Amphiluke's Avatar
    Join Date
    Jul 2009
    Posts
    312
    Thanks
    3
    Thanked 89 Times in 89 Posts
    Try to provide the path to the background image relative to the root of the site:
    Code:
    $(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')"});});
    });
    I am still learning English

  • #6
    New Coder
    Join Date
    Dec 2011
    Posts
    34
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Oke, That worked. But if yoou close the menu the down image are still shown.
    Maybe because there now only one item.

    Roelof

  • #7
    Regular Coder Amphiluke's Avatar
    Join Date
    Jul 2009
    Posts
    312
    Thanks
    3
    Thanked 89 Times in 89 Posts
    Quote Originally Posted by roelof
    Maybe because there now only one item.
    This bug initially presented in that script.

    Here is a possible fix:
    Code:
    $(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.
    Last edited by Amphiluke; 01-07-2012 at 12:03 PM. Reason: typo
    I am still learning English

  • #8
    New Coder
    Join Date
    Dec 2011
    Posts
    34
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Oke, Im totally not a javascript person so Im happy with this solution.
    Everyone thanks for the help


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •