www.webdeveloper.com
Results 1 to 13 of 13

Thread: Hopefully easy Img toggle js

  1. #1
    Join Date
    Oct 2009
    Posts
    10

    Exclamation Hopefully easy Img toggle js

    Hey,
    Basically I want a right and down arrow to appear depending on whether a div appears.
    If the header div is clicked, the subdiv's display toggles block or none.
    At the same time id like the arror img to change accordingly.

    This is my current function, it works fine

    function toggle_visibility(cat'.$categoryId.') {
    var e'.$categoryId.' = document.getElementById(cat'.$categoryId.');
    if(e'.$categoryId.'.style.display == \'block\' || e'.$categoryId.'.style.display == \'\')
    e'.$categoryId.'.style.display = \'none\';
    else
    e'.$categoryId.'.style.display = \'block\';


    I've tried many times to add a script that'll change the src but no luck at all ..

    The image name is simply arror$categoryId...
    By the way, the reason for the '. .' etc is because this is printed via php .

    This should be easy.. but I've never done it before and the posts ive found so far on the web haven't been helpful.


    Thanks for any help guys!!!
    Ben

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    PHP Code:
    function toggle_visibility(cat'.$categoryId.') {
    var 
    e'.$categoryId.' document.getElementById(cat'.$categoryId.');
    var 
    img'.$categoryId.' document.getElementById(arror'.$categoryId.');
    if(
    e'.$categoryId.'.style.display == \'block\' || e'.$categoryId.'.style.display == \'\') {
    e'
    .$categoryId.'.style.display = \'none\';
    img'
    .$categoryId.'.src = \'down.gif\';
    }
    else {
    e'
    .$categoryId.'.style.display = \'block\';
    img'
    .$categoryId.'.src = \'up.gif\';

    This hardcodes the id, so can only be used for a specific case
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Oct 2009
    Posts
    10
    Cheers for the reply dude, but that is what I've been trying and just no luck :/.
    the image: <img src="style/arrorRight.gif" width="12" id="arrImg'.$categoryId.'">

    JS----
    function toggle_visibility(cat'.$categoryId.') {
    var e'.$categoryId.' = document.getElementById(cat'.$categoryId.');
    var img'.$categoryId.' = document.getElementById(arrImg'.$categoryId.');
    if(e'.$categoryId.'.style.display == \'block\' || e'.$categoryId.'.style.display == \'\')
    e'.$categoryId.'.style.display = \'none\',
    img'.$categoryId.'.src = \'arrorDown.gif\';
    else
    e'.$categoryId.'.style.display = \'block\',
    img'.$categoryId.'.src = \'arrorDown.gif\';
    }

    I assume at the end of each task in a if, if there is another task to follow, you end it with , instead of ; as whenever the first task ends in ; neither tasks proceed.

    Any clues??
    Cheers,
    Ben.

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Error in the if statement and you removed the brackets around the if...else contents
    PHP Code:
    if(e'.$categoryId.'.style.display == \'block\') {
    e'
    .$categoryId.'.style.display = \'none\';
    img'
    .$categoryId.'.src = \'arrorDown.gif\';
    {
    else {
    e'
    .$categoryId.'.style.display = \'block\';
    img'
    .$categoryId.'.src = \'arrorDown.gif\';

    if there is another task to follow, you end it with , instead of ;
    With a semi-colon, never a comma
    At least 98% of internet users' DNA is identical to that of chimpanzees

  5. #5
    Join Date
    Oct 2009
    Posts
    10
    Yeh I realised the brackets after I posted this, but the src still does not change..
    Mate, I really don't get it, this should be simple right??

    Code:
    <script type="text/javascript">
     <!--
    function toggle_visibility(cat'.$categoryId.') {
    	var e'.$categoryId.' = document.getElementById(cat'.$categoryId.');
    	var img'.$categoryId.' = document.getElementById(arrImg'.$categoryId.');
    		if(e'.$categoryId.'.style.display == \'block\' || e'.$categoryId.'.style.display == \'\'){
    			e'.$categoryId.'.style.display = \'none\';
    			img'.$categoryId.'.src = \'style/arrorDown.gif\';
    		}else{
    			e'.$categoryId.'.style.display = \'block\';
    			img'.$categoryId.'.src = \'style/arrorDown.gif\';
    		}
    }//-->
    </script>
    I really appreciate you trying to help me bud.

  6. #6
    Join Date
    Mar 2010
    Posts
    2,803
    just some food for thought if you haven't already tried it.

    Your javaacript function code is being generated in PHP. No problem there.

    I assume the function is being written by php into the <head> of your php page.

    If so, then when you open the web page in your browser, if you right click the page and View->Source, you should see the outputed javascript code.

    It should be easier to see any syntax and/or logic errors in the outputed js code than in the php code that generates the js. You can then fix the the php code accordingly.

    Maybe post the outputed js code.
    Last edited by tirna; 08-19-2010 at 09:45 PM. Reason: typo

  7. #7
    Join Date
    Oct 2009
    Posts
    10
    Hey Tirna

    Well this is what prints

    PHP Code:
    <script type="text/javascript">

    function 
    toggle_visibility(cat1) {
        var 
    e1 document.getElementById(cat1);
        var 
    img1 document.getElementById(arrImg1);
            if(
    e1.style.display == 'block' || e1.style.display == ''){
                
    e1.style.display 'none';
                
    img1.src 'style/arrorDown.gif';
            }else{
                
    e1.style.display 'block';
                
    img1.src 'style/arrorDown.gif';
            }
    }


    function 
    toggle_visibility(cat2) {
        var 
    e2 document.getElementById(cat2);
        var 
    img2 document.getElementById(arrImg2);
            if(
    e2.style.display == 'block' || e2.style.display == ''){
                
    e2.style.display 'none';
                
    img2.src 'style/arrorDown.gif';
            }else{
                
    e2.style.display 'block';
                
    img2.src 'style/arrorDown.gif';
            }
    }


    function 
    toggle_visibility(cat3) {
        var 
    e3 document.getElementById(cat3);
        var 
    img3 document.getElementById(arrImg3);
            if(
    e3.style.display == 'block' || e3.style.display == ''){
                
    e3.style.display 'none';
                
    img3.src 'style/arrorDown.gif';
            }else{
                
    e3.style.display 'block';
                
    img3.src 'style/arrorDown.gif';
            }
    }


    function 
    toggle_visibility(cat4) {
        var 
    e4 document.getElementById(cat4);
        var 
    img4 document.getElementById(arrImg4);
            if(
    e4.style.display == 'block' || e4.style.display == ''){
                
    e4.style.display 'none';
                
    img4.src 'style/arrorDown.gif';
            }else{
                
    e4.style.display 'block';
                
    img4.src 'style/arrorDown.gif';
            }
    }


    function 
    toggle_visibility(cat5) {
        var 
    e5 document.getElementById(cat5);
        var 
    img5 document.getElementById(arrImg5);
            if(
    e5.style.display == 'block' || e5.style.display == ''){
                
    e5.style.display 'none';
                
    img5.src 'style/arrorDown.gif';
            }else{
                
    e5.style.display 'block';
                
    img5.src 'style/arrorDown.gif';
            }
    }

    </script> 
    This is copied from firefox, however, not even the div display changes.


    In chrome I get error
    Uncaught TypeError: Cannot set property 'src' of null
    But only on the last of the array img5, but the divs display toggles.

    I have never seen this before.

  8. #8
    Join Date
    Oct 2009
    Posts
    10
    Quick update, I've changed the single quotation to double, this seems to have more luck (not in firefox).

    But only changes the last of the array no matter which id is selected.
    Maybe I should just drop this img thing, but it shouldn't be this complicated right??

    I've ftped it up to the web if you wanna look,
    http://bensbox.co.uk/trilube/products.php

  9. #9
    Join Date
    Aug 2010
    Location
    Ohio
    Posts
    32
    1. All images say arrowDown.gif.
    2. Condense into one function.

    PHP Code:
    <script>
        function 
    toggle_visibility(catId) {
            if(
    IsNumeric(catId) == false || catId || catId 1){return;}
            
            var 
    ele document.getElementById("cat"+catId);
            
            var 
    img document.getElementById("arrImg"+catId);
            
            if(
    ele.style.display == 'block' || ele.style.display == ''){
                    
    ele.style.display 'none'
                
    img.src 'style/arrorDown.gif'
            }else{ 
                
    ele.style.display 'block'
                
    img.src 'style/arrorUp.gif'
            } 
        }
    function 
    IsNumeric(num){
        return 
    typeof num === 'number' && isFinite(num);    
    }
    </script> 
    HTML Code:
    <div>
    	<div id="cat1">Testing</div>
    	<div>
    		<img src="style/arrowUp.gif" id="arrImg1" onclick="toggle_visibility(1)"/>
    	</div>
    </div>
    See the Linked Example.

    Hope this helps.
    Last edited by drudeken; 08-19-2010 at 10:41 PM.

  10. #10
    Join Date
    Mar 2010
    Posts
    2,803
    Quote Originally Posted by ben_johnson1991 View Post
    Hey Tirna

    Well this is what prints

    PHP Code:
    <script type="text/javascript">
     
    function 
    toggle_visibility(cat1) {
        var 
    e1 document.getElementById(cat1);
        var 
    img1 document.getElementById(arrImg1);
            if(
    e1.style.display == 'block' || e1.style.display == ''){
                
    e1.style.display 'none';
                
    img1.src 'style/arrorDown.gif';
            }else{
                
    e1.style.display 'block';
                
    img1.src 'style/arrorDown.gif';
            }
    }
    .
    .

    </script> 
    This is copied from firefox, however, not even the div display changes.


    In chrome I get error
    Uncaught TypeError: Cannot set property 'src' of null
    But only on the last of the array img5, but the divs display toggles.

    I have never seen this before.
    I would try changing your php code to generate js code something like this for your IF block

    Code:
    if(e1.style.display == 'block'){ 
                e1.style.display = 'none'; 
                img1.src = 'style/arrorRight.gif'; 
    }else{ 
                e1.style.display = 'block'; 
                img1.src = 'style/arrorDown.gif'; 
    }

  11. #11
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    This error was corrected in post #4, but not updated by OP
    if(e1.style.display == 'block' || e1.style.display == ''){
    At least 98% of internet users' DNA is identical to that of chimpanzees

  12. #12
    Join Date
    Mar 2010
    Posts
    2,803
    There'e no harm in reminding them then

  13. #13
    Join Date
    Oct 2007
    Location
    Western Massachusetts, USA
    Posts
    387
    All of the functions have the exact same name, possibly causing a reassignment of the function code block. The underlined "arrImgX" variables I do not see in exclusively this peice of code, are they variables or strings? I just skimmed this thread reading here and there.

    Quote Originally Posted by ben_johnson1991 View Post
    Well this is what prints
    PHP Code:
    <script type="text/javascript">

    function 
    toggle_visibility(cat1) {
        var 
    e1 document.getElementById(cat1);
        var 
    img1 document.getElementById([U]arrImg1[/U]);
            if(
    e1.style.display == 'block' || e1.style.display == ''){
                
    e1.style.display 'none';
                
    img1.src 'style/arrorDown.gif';
            }else{
                
    e1.style.display 'block';
                
    img1.src 'style/arrorDown.gif';
            }
    }


    function 
    toggle_visibility(cat2) {
        var 
    e2 document.getElementById(cat2);
        var 
    img2 document.getElementById([U]arrImg2[/U]);
            if(
    e2.style.display == 'block' || e2.style.display == ''){
                
    e2.style.display 'none';
                
    img2.src 'style/arrorDown.gif';
            }else{
                
    e2.style.display 'block';
                
    img2.src 'style/arrorDown.gif';
            }
    }


    function 
    toggle_visibility(cat3) {
        var 
    e3 document.getElementById(cat3);
        var 
    img3 document.getElementById([U]arrImg3[/U]);
            if(
    e3.style.display == 'block' || e3.style.display == ''){
                
    e3.style.display 'none';
                
    img3.src 'style/arrorDown.gif';
            }else{
                
    e3.style.display 'block';
                
    img3.src 'style/arrorDown.gif';
            }
    }


    function 
    toggle_visibility(cat4) {
        var 
    e4 document.getElementById(cat4);
        var 
    img4 document.getElementById([U]arrImg4[/U]);
            if(
    e4.style.display == 'block' || e4.style.display == ''){
                
    e4.style.display 'none';
                
    img4.src 'style/arrorDown.gif';
            }else{
                
    e4.style.display 'block';
                
    img4.src 'style/arrorDown.gif';
            }
    }


    function 
    toggle_visibility(cat5) {
        var 
    e5 document.getElementById(cat5);
        var 
    img5 document.getElementById([U]arrImg5[/U]);
            if(
    e5.style.display == 'block' || e5.style.display == ''){
                
    e5.style.display 'none';
                
    img5.src 'style/arrorDown.gif';
            }else{
                
    e5.style.display 'block';
                
    img5.src 'style/arrorDown.gif';
            }
    }

    </script> 
    This is copied from firefox, however, not even the div display changes.
    Computer programmer / web developer.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles