Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Senior Member medlington's Avatar
    Join Date
    Nov 2005
    Location
    Sheffield, UK
    Posts
    377
    Member #
    11968
    Liked
    4 times
    Hi,

    Im a complete javascript noob so hopefully this is simple for someone.

    I have a script for a menu that expands when the user clicks on it and I need it to swap the CSS value of another element at the same time. At the moment it just changes the size of a div but I want it to swap a graphic too to create a little arrow that is pointing down when the menu is open.

    Here is my script:

    Code:
    function switchMenu(obj) {
        var el = document.getElementById(obj);
        if ( el.style.height != "0px" ) {
            el.style.height = '0px';
        }
        else {
            el.style.height = 'auto';
        }
    }
    and this is triggered by this link:

    Code:
    <a onclick="switchMenu('myvar');" title="Switch the Menu" class="blank_bg">Special Offers</a>
    I tried changing it to something like this but it didnt seem to work:

    Code:
    function switchMenu(obj,obj2) {
         var el = document.getElementById(obj);
       var el2 = document.getElementById(obj2);
         if ( el.style.height != "0px" ) {
             el.style.height = '0px';
            el2.style.background-image:url(image1.gif);
         }
         else {
             el.style.height = 'auto';
            el2.style.background-image:url(image2.gif);     }
     }
    triggered by:

    Code:
    <a onclick="switchMenu('myvar', 'myvar2');" title="Switch the Menu" class="blank_bg">Special Offers</a>
    Can anyone help?

  2.  

  3. #2
    Member
    Join Date
    May 2011
    Location
    Baltimore, MD
    Posts
    60
    Member #
    27796
    Liked
    11 times
    JavaScript uses camel casing, rather than the normal CSS dashes.

    So CSS: background-image is JavaScript: backgroundImage. Also, the colons are going to through a hissy fit.
    Code:
    Object.style.backgroundImage="url('URL')|none|inherit"


    You can also use:
    Code:
    Object.style.cssText=""


    Also, instead of changing height to 0px, why not use
    Code:
    Object.style.visibility="hidden"


    and test your conditionals on that as well. It's much more clean, cross-browser, because you won't have to second guess "is it a px, or an em, or none at all?" "did my browser automatically change on me for no reason at all?"

    Let me know if this helps.
    /phillihp/
    Check out my blog @ http://www.phillihp.com
    ~Web~Mobile~Hacking~Tech~Gadgets~More~

  4. #3
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    There used to be a really good page devoted to the CSS properties and their Javascript equivalents over at codepunk.hardwar.org.uk. However, it appears to have been hacked by malware and I can't link to it right at the moment.

    But like phillihp said, most CSS properties can be easily enough converted to Javascript by using camel casing and removing dashes. However, the better way to do it (since it allows for caching) is to use classes and define the classes in your CSS.

    Code:
    function switchMenu(obj,obj2) {
    var el = document.getElementById(obj);
    var el2 = document.getElementById(obj2);
    if ( el.className == 'off') ) { el.className = 'on';
    el2.className = 'image-1-background'
    } else {
    el.className = 'off';
    el2.className = 'image-2-background';
    }
    }
    This probably won't format properly...TinyMCE is making a hollow mockery out of my code.
    phillihp likes this.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  5. #4
    Member
    Join Date
    May 2011
    Location
    Baltimore, MD
    Posts
    60
    Member #
    27796
    Liked
    11 times
    Quote Originally Posted by TheGAME1264, post: 206786
    use classes
    Agreed!!
    /phillihp/
    Check out my blog @ http://www.phillihp.com
    ~Web~Mobile~Hacking~Tech~Gadgets~More~


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 11:01 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com