SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Hybrid View

  1. #1
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cant make my toggle div function work

    hi,

    Im new to javascript so please go easy on me if ive made a really dumb mistake ok!

    I have a div that i want to show and hide with a push of a button.....so the user can toggle it on and off. I had quite a successful first attempt with my cursory knowlege of javascript and was quite happy with it but i can only either get the div to show and then not hide or vice versa....depending on which way round i put the logic!

    So here it is...first the function then how im calling it further down:

    PHP Code:
        function show_chat() {
              var 
    chat document.getElementById('chat');
              if(
    chat.style.display 'block') {
                  
    chat.style.display 'none';
              }
              else if(
    chat.style.display 'none') {
                  
    chat.style.display 'block';
              }

          } 
    PHP Code:
    <button onclick="show_chat(); return false;">show chat</button>
            <
    div id="chat_div"
    Now what i want it to do is toggel on and off....what i'd really like to do is for the text of the button to change from show chat to hide chat. I have an idea how to do that and i know it involves getting to the text node and changing it from there.....please if anyone feels like enlightening me i'd be v.grateful!

    As ive said in its current state it only turns the chat off and then i cant toggle it back on!

    Any ideas?

    Thanks

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your problem is that "=" is an assignment operator. Inside the conditionals you want the equality operator "==".

    I recommend that you use 2 to 4 space indentation instead of 8-space-width tab characters. Many programming editors have an option that allows you to make it insert a certain number of spaces with the tab key.

    To get the text, which is in the first child node of the <a>, you can use
    Code:
    chat.firstChild.nodeValue
    To learn more about the Document Object Model (DOM) check these out:
    Rough Guide to the DOM
    JavaScript tutorial - W3C DOM introduction
    http://www.quirksmode.org/js/contents.html#dom
    http://www.brainjar.com/
    http://developer.apple.com/internet/...ent/dom2i.html
    http://developer.mozilla.org/en/docs/DOM:document
    http://developer.mozilla.org/en/docs..._DOM_Reference
    http://digital-web.com/articles/form...d_the_w3c_dom/
    http://www.w3.org/DOM/
    Mozilla JavaScript and DOM Reference
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HI Kravvitz,

    thats great, thanks for the reply and the links

    I'll check them out today as its about time i learn javascript.

  4. #4
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    arrghh...no that doesnt seem to work either....it only toggles from on to off and not back on:

    PHP Code:
    function show_chat() {
              var 
    chat document.getElementById('chat');
              if(
    chat.style.display == 'block') {
                  
    chat.style.display == 'none';
              }
              else if(
    chat.style.display == 'none') {
                  
    chat.style.display == 'block';
              }



    Ive tried it round all ways but it doesnt work! Any ideas?

    Also, so to get to my text i would do chat.firstChild.showChat ?

  5. #5
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,629
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    == as conditional operators ... = as assignments

    Code:
    function show_chat() {
              var chat = document.getElementById('chat_div'); // It is NOT 'chat' - your div is called 'chat_div'!!
              if(chat.style.display == 'block') {
                  chat.style.display = 'none';
              }
              else if(chat.style.display == 'none') {
                  chat.style.display = 'block';
              }
    }
    You can also make this more reusable ...

    Code:
    var ie = (document.all) ? true : false;
    var moz = (document.getElementById) ? true : false;
    
    function toggleDiv (divID) {
    	if (ie) {
    		document.all[divID].style.display = (document.all[divID].style.display == "block") ? "none" : "block";
    	}
    	if (moz) {
    		document.getElementById(divID).style.display = (document.getElementById(divID).style.display == "block") ? "none" : "block";
    	}
    }
    Code:
    <button onclick="toggleDiv ('chat_div'); return false;">show chat</button>
            <div id="chat_div">
    Last edited by siteguru; Apr 17, 2007 at 05:38.
    Ian Anderson
    www.siteguru.co.uk

  6. #6
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ian,

    thanks for the reply Right got you now about those operators....i didnt read what kravittz posted closely enough!

    Right your updated version of my original.....however the re-usable code you posted does! I'd love to know why mine doesnt work! I cant see why...it still just toggles from on to off but then not back on. The div i want to turn on and off is called chat and not chat_div...i kinda didnt post enough of the code earlier, sorry!

    Also i understand that you've included the extra code because a certain version of IE doesnt like the getElementById. Which version did IE start supporting it?

  7. #7
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    182
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you code doesn't work b/c the div's initial style.display equals nothing. if you throw an alert(chat.style.display) at the beginning of your function you'll see that it equals "". You would have to do:
    Code:
              if (chat.style.display != 'block') {
                  chat.style.display = 'block';
              }else{
                  chat.style.display = 'none';
              }
    The div attributes accessed by javascript aren't inherited from CSS. If that makes sense

  8. #8
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Right right thanks funkydaddy! I dont know to access the text node now...ive tried chat.firstChild.showChat but that doesnt seem to work...i want to change it from show chat to hide chat

  9. #9
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    *chuckles* "nodeValue" is the name of the property. I did not mean that you should change the string to that format.

    IE5+ supports document.getElementById.

    Really, it would be best for you to create the button with JavaScript.
    Here's the function to toggle the text and the display property of the <div>. Give the button an ID, e.g. "chatButton".
    Code:
    if(!document.getElementById && document.all) { //IE4 support
      document.getElementById = function(id) { return document.all[id]; }
    }
    function show_chat() {
      var chat = document.getElementById('chat');
      var chatButton = document.getElementById('chatButton');
      if(chat.style.display == 'none') {
        chat.style.display = 'block';
        chatButton.firstChild.nodeValue = 'Hide Chat';
      } else {
        chat.style.display = 'none';
        chatButton.firstChild.nodeValue = 'Show Chat';
      }
    }
    Quote Originally Posted by siteguru View Post
    You can also make this more reusable ...

    Code:
    var ie = (document.all) ? true : false;
    var moz = (document.getElementById) ? true : false;
    Doing it like that is very silly. IE is not the only browser to support document.all and all modern browsers with JavaScript support also support DOM1 including document.getElementById.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  10. #10
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes chuckle away Mr Kravvitz.......I do, however feel like a bit of an idiot as i read a few chapters of Dom scripting today and it made all this alot more clear.

    Anyways it works a treat now. Thanks for all your help

  11. #11
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,629
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    @Kravvitz -> I just butchered some old code from the days of Netscrape 4 for speed.
    Ian Anderson
    www.siteguru.co.uk


Bookmarks

Posting Permissions

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