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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    Regular Coder riptide's Avatar
    Join Date
    Jan 2007
    Posts
    143
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Unhappy Why won't my script work

    Okay I'm trying to make a script where if I click on a link a div pops up. And if I click on another link another div pop ups up and the old div is closed. The script calls the function from the link in the html and sends an ID. I am confused as to why this doesn't work.
    Code:
    function controls(vtiles){/*ID of requested div*/
    
    vtiles.style.ClassName='switchOn'; //change it's classname to something that's displayed
    
    var cap=document.getElementsByTagName('div');// get every div element
    
    for(i=0;i<cap.length;i++) // make some kina loop with the number of divs
    {
    	var store=cap[i].ClassName;
    	
    	if(store=='switchOn' && cap.[i].id);
    	{ /*look for div's that are on (switchOn) and check to see if they have and ID*/
         
    	 var check = cap.[i].id //store their IDs
    	 
    	 if(check!=vtiles){//check to see if the id is the one stored in Vtiles
    	 
    	 store=='switchP'//change the classname to switchP(off)
    	 }
    	}
    }
    
    }
    Code:
    <div class="content"><a class="Atiles" href="#" onclick="controls(document.getElementById('Ankara'))">Ankara</a></div>
    
    <div  id="Ankara" class="switchP">
    Code:
    .switchP{
    position:absolute;
    display:none;
    z-index:-1;
    left: 20px;
    top:40px;
    }
    
    .switchOn{
    position:absolute;
    display:block;
    z-index:100;
    left: 20px;
    top:40px;
    width:200px;
    height:200px;
    }


    hey I'm a bit confused, I really am looking for some javascript tutorials so I don't have to keep asking for help.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,567
    Thanks
    78
    Thanked 4,385 Times in 4,350 Posts
    The problem is that you have lied to yourself.

    Your code says
    Code:
    function controls(vtiles){/*ID of requested div*/
    and yet when you invoke this function you do it via
    Code:
    onclick="controls(document.getElementById('Ankara'))">
    meaing that you are *NOT* calling with the ID of the requested div. You are calling with an actual reference to the div.

    So then, later in your code, you do
    Code:
        if(check!=vtiles){
    but vtiles is *NOT* an ID, and so it will never equal check (which is).

    But there are many other errors in that code:
    (a) ClassName and className are *NOT* the same thing. There is no such builtin property as ClassName.
    (b) store=='switchP'//change the classname to switchP(off)
    is wrong on two levels: You used == instead of = so all you are doing is COMPARING the two strings. Even if you had done store = 'switchP' all that would have done would be to change the string. You are *NOT* affecting the className of the div in question.

    There are several ways to fix this, but the easiest is thie:
    Code:
    function controls(vtiles)/* div to "select" */
    {
        var cap=document.getElementsByTagName('div');// get every div element
        for(i=0;i<cap.length;i++) // make some kina loop with the number of divs
        {
    	var div = cap[i];
    	if( div.className =='switchOn' && div.id != null )
            {
                div.className = "switchP";
            }
        }
        vtiles.style.className='switchOn'; // and now turn on the desired div
    
    }
    In other words, change *ALL* the <div>s to "off" and THEN change only the one you wanted to to "on".
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Regular Coder riptide's Avatar
    Join Date
    Jan 2007
    Posts
    143
    Thanks
    1
    Thanked 0 Times in 0 Posts
    The are all already off but I guess it never hurts to make sure they are off before each time the code is called. I understand your script.

    I don't understand why is vtiles not and ID in my script
    and why can't [store = 'switchP'] change the classname is it because I can't change the classnames when is put cap[i].ClassName in a variable?

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,567
    Thanks
    78
    Thanked 4,385 Times in 4,350 Posts
    Quote Originally Posted by riptide View Post
    I don't understand why is vtiles not and ID in my script
    Because you ALREADY converted it from an ID to a reference when you did this:
    Code:
    onclick="controls(document.getElementById('Ankara'))">
    If you wanted to pass JUST the ID, then you should have just coded
    Code:
    onclick="controls('Ankara')">
    But that would have meant changing some other code.

    and why can't [store = 'switchP'] change the classname is it because I can't change the classnames when is put cap[i].ClassName in a variable?
    Because the variable store is ONLY a STRING. It is *NOT* an object reference to a className.

    And I say again: You can *NOT* use cap[i].ClassName

    You must use cap[i].className

    JavaScript is case sensitive. C and c are not the same, so className and ClassName are not the same.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Regular Coder riptide's Avatar
    Join Date
    Jan 2007
    Posts
    143
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Because you ALREADY converted it from an ID to a reference when you did this:
    Code:
    onclick="controls(document.getElementById('Ankara'))">
    If you wanted to pass JUST the ID, then you should have just coded
    Code:
    onclick="controls('Ankara')">
    But that would have meant changing some other code.



    Because the variable store is ONLY a STRING. It is *NOT* an object reference to a className.

    And I say again: You can *NOT* use cap[i].ClassName

    You must use cap[i].className

    JavaScript is case sensitive. C and c are not the same, so className and ClassName are not the same.
    aggh I feel stupid for forgetting that controls('Ankara') was the correct way to pass the ID to the function. I fixed the issue with className anyway.
    Why is the variable store a string? What is it actually holding?

    also your script isn't quite working when I call it with onclick="controls('Ankara')">Ankara</a></div>
    Last edited by riptide; 01-23-2012 at 07:12 AM.

  • #6
    New Coder
    Join Date
    Oct 2011
    Location
    New york
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Thumbs up

    When the div alert is shown only then the buttons on the browser should not be clicked, just like Javascript Codes alert box does not allow us to clik on the browser until we do some action to the alert box. Since we cannot bring focus on the div, then we will just fake it by using a simple button to handle our focus event, then apply appropriate function. The div won't leave your sight unless you click the OK button.

    - Jackie
    Last edited by JackieBolinsky; 01-23-2012 at 10:43 AM.

  • #7
    Regular Coder riptide's Avatar
    Join Date
    Jan 2007
    Posts
    143
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hu? I'm not building and alert box.

    I'm getting the error vtiles.style.className='switchOn'; isn't defined.

  • #8
    Regular Coder riptide's Avatar
    Join Date
    Jan 2007
    Posts
    143
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I hate to bump this but I have another question. I've got a great effects script
    but it didn't have anything added to stop event bubbling.
    I have an event stopping script that I've used before but I can't seem to attach it to this script I'm using. I don't know why it's not working it looks like it should work.


    Code:
    onclick="transition(event,document.getElementById('select3'),1,900,20)"
    I added the event.

    Code:
    function transition(e,ele,dirflag) {
    
      /*if(!e) var e = window.event;
        e.cancelBubble = true;
        if(e.stopPropagation) e.stopPropagation();
    */
    
     if (!e) e = window.event;
          var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
           while (reltg.tagName != 'BODY'){
          if (reltg.id == this.id){return;}
           reltg = reltg.parentNode;
    	   }
         
      
      if((ele.dirflag == dirflag) && ele.intrans) return; // stops function being called multiple times
      var totDur = arguments[2] || 1000; // third argument, or one seconds
      var numSteps = arguments[3] || 30; // fourth argument, or thirty steps (video quality, 30fps)
      var intrval = totDur/numSteps; // renamed so it can't conflict
      ele.sopac = 0; // we start at 0
      ele.shght = 50; // we start at 50px
      ele.eopac = 1; // we end at 1
      ele.ehght = 140; // we end at 140px
      ele.iopac = (ele.eopac-ele.sopac)/numSteps; // how much to increment opac
      ele.ihght = (ele.ehght-ele.shght)/numSteps; // how much to increment hght
      ele.copac = parseFloat(ele.copac,10) || ele.style.opacity || ele.sopac; // a val for current
      ele.chght = ele.chght || parseInt(ele.style.height,10) || ele.shght; // a val for current
      ele.dirflag = dirflag; // changed name to dirflag, stored for reference
      if(ele.intrans) clearInterval(ele.intrans); // clear timeout if already running...
      if(dirflag) { // 1 or true = increment
    	// alter visibility here to make an invisible item visible before starting
    	ele.style.display='block';
    	ele.intrans= setInterval(function() {
    	  if(ele.copac<ele.eopac ) { // if mods needed
    		ele.copac=parseFloat(ele.copac,10)+parseFloat(ele.iopac,10); // increment
    		if(ele.copac>ele.eopac) ele.copac=ele.eopac; // error correction
    		ele.chght=parseFloat(ele.chght,10)+parseFloat(ele.ihght,10); // increment
    		if(ele.chght>ele.ehght) ele.chght=ele.ehght; // error correction
    		// set styles accordingly
    		ele.style.opacity = ele.copac;
    		ele.style.filter = 'alpha(opacity='+parseInt(ele.copac*100,10)+')';
    		ele.style.height = ele.chght+'px';
    	  } else {
    		clearInterval(ele.intrans); // we're done -- clear timeout
    	  }
    	},intrval); // do it on intrval timeline
      } else { // 0 or false = decrement
    	ele.intrans= setInterval(function() {
    	  if(ele.copac>ele.sopac || ele.chght>ele.shght) { // if mods needed
    		ele.copac=parseFloat(ele.copac,10)-parseFloat(ele.iopac,10); // decrement
    		if(ele.copac<ele.sopac) ele.copac=ele.sopac; // error correction
    		ele.chght=parseFloat(ele.chght,10)-parseFloat(ele.ihght,10); // decrement
    		if(ele.chght<ele.shght) ele.chght=ele.shght; // error correction
    		// set styles accordingly
    		ele.style.opacity = ele.copac;
    		ele.style.MozOpacity = ele.copac;
            ele.style.KhtmlOpacity = ele.copac;
    		ele.style.filter = 'alpha(opacity='+parseInt(ele.copac*100,10)+')';
    		ele.style.height = ele.chght+'px';
    	  } else {
    		clearInterval(ele.intrans); // we're done -- clear timeout
    		// and make the item disappear here since it's done transitioning.
    		ele.style.display='none';
    	  }
    	},intrval); // do it on intrval timeline
      }
    } // all done!
    when I use the code that's commented out the function slows down but doesn't stop the bubbling. I'm wondering if the event is being passed to the function transition.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,567
    Thanks
    78
    Thanked 4,385 Times in 4,350 Posts
    Quote Originally Posted by riptide View Post
    also your script isn't quite working when I call it with onclick="controls('Ankara')">Ankara</a></div>
    Yes, because now you must do the getElementById() in the controls function.

    You must do it one place or the other.

    If you had left your onclick code alone, I think my code would have worked.

    But if you want to pass the ID then in my code, just change
    Code:
        vtiles.style.className='switchOn'; // and now turn on the desired div
    to
    Code:
        document.getElementById(vtiles).style.className='switchOn';
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    Regular Coder riptide's Avatar
    Join Date
    Jan 2007
    Posts
    143
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I actually had

    <div class="content"><p class="Atiles" onclick="controls('Ankara')">Ankara</p></div>
    <div class="content"><p class="Atiles" onclick="controls(document.getElementById('Apple'))">apple</p></div>


    so one of them should have worked with your code.
    onclick="controls(document.getElementById('Apple'))" Doesn't throw and error
    but doesn't work either. When I just changed you code the reverse happens. It could just be something in the class I'm switching to but I had already tested that class.

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,567
    Thanks
    78
    Thanked 4,385 Times in 4,350 Posts
    Can you show the page live? Give a URL to look at?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #12
    Regular Coder riptide's Avatar
    Join Date
    Jan 2007
    Posts
    143
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I don't have the page live(it's not my site) but I can either give all the code so you can copy and paste or you can wait for me to attach it to my website for testing.

    what would you rather me do?

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,567
    Thanks
    78
    Thanked 4,385 Times in 4,350 Posts
    let's wait until it's live. Unless you are desperate.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #14
    Regular Coder riptide's Avatar
    Join Date
    Jan 2007
    Posts
    143
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Here is the address. the images aren't on the site.
    http://resourcehouse.atspace.com/tes...0Template.html

    I have the javascript linked to the page as DivSwitch.js

  • #15
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,567
    Thanks
    78
    Thanked 4,385 Times in 4,350 Posts
    NO NO NO!!!

    You have
    Code:
        document.getElementById(vtiles).style.className='switchOn'
    WRONG!

    It must be just
    Code:
        document.getElementById(vtiles).className='switchOn'
    OH MAN! I did that to you! SO SORRY! That was a HUGE typo on my part. Too much copy and paste and not enough edit. Mea maxima culpa.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    riptide (01-25-2012)


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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