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 7 of 7
  1. #1
    New Coder
    Join Date
    Feb 2012
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Tricky onClick div swap and button change with toggle!

    Hello guys, first post so please be kind.

    Usually try and find a solution and edit to work for me but this time its a little trickier.

    I need a script and code that can toggle the contents of a div, while changing the button appearance but !! the button images and content have to be external to the script as the content and images will be loaded from a database on the page and duplicated on page.

    ideally what I want is say 3 buttons.

    button1img button2img button3img <// that when clicked control

    <div id=target><this target content is now set to 2></div> //and toggle between options

    and only one at a time can be on.

    The button images and content have to be set outside of the initial script (reason it will be duplicated several times on page) and it cant be a call page 'content1.html' either as it needs to be created from a db on the page.

    if anyone can help it will be MUCH appreciated, as im pulling my hair out trying to combine 3 different scripts that are all written differently.

    i understand this is a little trickier, im hoping it is possible.

    cheers
    steve

  • #2
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    943
    Thanks
    0
    Thanked 129 Times in 128 Posts
    If you at the top of the page creates some arrays or variables.
    e.g.
    Code:
    var OnImage=[ url to image1on from database , url to image2on from database , url to image3on from database ];
    var OffImage=[ url to image1off from database , url to image2off from database , url to image3off from database ];
    or
    Code:
    var OnImage1=url to image1on from database;
    var OnImage2=url to image2on from database;
    etc..
    where url to...from database selfsaid is the method used to get the information.

    then you can refer to these instead of contacing the database each time you need a url.

    And if you at any point need to reassign any of them, you can redo the relevant call with new parameters set.

    the var in front of the variables declares them global, meaning you can refer to these arrays/variables from anywhere in the document. And you can also reassign them from anywhere.

    once you have assigned all relevant data one way or the other, we can continue...

    And then - let us see your code

  • #3
    New Coder
    Join Date
    Feb 2012
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts
    ok so ill show you the closest i have got so far.
    this example has the button change, (ok to be in script) and target image(div) external to script (ie can be populated from db and duplicated) just doesnt have one at a time.

    i have other scripts that do one at a time but are completely different and cant seem to merge them. the page itself is php but im using this inside it.

    also im a beginner, i really appreciate your help.
    here is the code.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    	<head>
    		<title>Test Document</title>
    <script language="javascript"> 
    function toggle() { 
    	var ele = document.getElementById("toggleText");
    	var text = document.getElementById("displayText");
    	if(ele.style.display == "block") {
        		ele.style.display = "none";
    		text.innerHTML = "show";
      	}
    	else {
    		ele.style.display = "block";
    		text.innerHTML = "hide";
    	}
    } 
    
    function toggle5(showHideDiv, switchImgTag) {
            var ele = document.getElementById(showHideDiv);
            var imageEle = document.getElementById(switchImgTag);
            if(ele.style.display == "block") {
                    ele.style.display = "none";
    		imageEle.innerHTML = '<img src="images/plus.png">';
            }
            else {
                    ele.style.display = "block";
                    imageEle.innerHTML = '<img src="images/minus.png">';
            }
    }
    </script>
     	</head>
    	<body>
        
    <div id="headerDivImg">
        <div id="titleTextImg">display div test</div>
        <a id="imageDivLink" href="javascript:toggle5('contentDivImg', 'imageDivLink');"><img src="images/plus.png"></a>
        <a id="imageDivLink1" href="javascript:toggle5('contentDivImg2', 'imageDivLink1');"><img src="images/plus.png"></a>
    </div>
    <div id="contentDivImg" style="display: none;">item one is shown, image link will go here</div>
    <div id="contentDivImg2" style="display: none;">item 2 is shown, image link will go here</div>
    
    	</body>
    </html>
    thanks.

    ps. if i add a hidden form field inside the div, will it only be sent in the form if it is displayed, or will it also be sent if style display = "none" .. ie
    Code:
    <div id="contentDivImg" style="display: none;">
    <input id="test" value="item1" type="hidden" />
    item one is shown, image link will go here</div>
    ... :-)
    Last edited by Burfodus; 02-28-2012 at 09:13 AM.

  • #4
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    943
    Thanks
    0
    Thanked 129 Times in 128 Posts
    So far, so good.

    I will suggest that you change it, so the toggling is based on the button clicked instead of the state of the button.

    inside toggle5 you have you are actually testing, if the button clicked, is visible or not, by:
    if(ele.style.display == "block") {

    As the button cannot be clicked if it is not visible ...

    First: let's assign some id's to the elements that change:
    the images inside the links, and the divs containing the big images.

    And we wanna use a structure so all related elements have a unique common: the number contained in their id.
    Code:
    <a><img id="toggleImage0" /></a>
    <a><img id="toggleImage1" /></a>
    
    <div id="contentDiv0">bigimage</div>
    <div id="contentDiv1">bigimage</div>
    notice the " /" at the end of the image tag.
    we are here dealing with XHTML, which requires ALL tags to be closed.
    <img> have no end tag: </img> so instead we close it by adding " /" at the end of the tag.


    As we have assigned unique numbers for all of the set, all we have to pass to the function, is the number
    Code:
    <a href="javascript:toggle5(0)"><img id="toggleImage0" /></a>
    we also need a way for the function to count the sets.
    this can done by assign a classname to 1 of the elements in each set.
    assigning it to the link it would be.
    Code:
    <a class="toggles" href="javascript:toggle5(0)"><img id="toggleImage0" /></a>
    <a class="toggles" href="javascript:toggle5(1)"><img id="toggleImage1" /></a>
    we need one more thing:
    to set a source for the images. And to hide the div's containing the big images

    Code:
    <a class="toggles" href="javascript:toggle5(0)"><img id="toggleImage0" src="images/plus.png" /></a>
    <a class="toggles" href="javascript:toggle5(1)"><img id="toggleImage1" src="images/plus.png" /></a>
    
    <div id="contentDiv0" style="display:none"><img src="bigImage0.ext" /></div>
    <div id="contentDiv1" style="display:none"><img src="bigImage1.ext" /></div>
    Now we are fininshed with the HTML part.

    in the function we need to count the images and to run a loop through them and assign a variable for the passed value:
    Code:
    function toggle(Imagenum){
    Sets = document.getElementsByClassName('toggles');
    NumberOfSets = Sets.length;
    for (x = 0 ; x < NumberOfSets ; x++){
    ....
    }
    }
    in the loop we need to test x against Imagenum
    Code:
    function toggle(Imagenum){
    Sets = document.getElementsByClassName('toggles');
    NumberOfSets = Sets.length;
    for (x = 0 ; x < NumberOfSets ; x++){
    if (x == Imagenum){
    ...
    }else{
    ...
    }
    }
    }
    if matching, we want:
    Code:
    document.getElementById('toggleImage' + x).src = 'images/minus.png';
    document.getElementById('contentDiv' + x).style.display = 'block';
    and if not, we want:
    Code:
    document.getElementById('toggleImage' + x).src = 'images/plus.png';
    document.getElementById('contentDiv' + x).style.display = 'none';
    these condition we add to the loop:
    Code:
    function toggle5(Imagenum){
    Sets = document.getElementsByClassName('toggles');
    NumberOfSets = Sets.length;
    for (x = 0 ; x < NumberOfSets ; x++){
    if (x == Imagenum){
    document.getElementById('toggleImage' + x).src = 'images/minus.png';
    document.getElementById('contentDiv' + x).style.display = 'block';
    }else{
    document.getElementById('toggleImage' + x).src = 'images/plus.png';
    document.getElementById('contentDiv' + x).style.display = 'none';
    }
    }
    }
    And Last we have to put it all into the the document:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    	<head>
    		<title>Test Document</title>
    <script language="javascript"> 
    function toggle() { 
    	var ele = document.getElementById("toggleText");
    	var text = document.getElementById("displayText");
    	if(ele.style.display == "block") {
        		ele.style.display = "none";
    		text.innerHTML = "show";
      	}
    	else {
    		ele.style.display = "block";
    		text.innerHTML = "hide";
    	}
    } 
    
    function toggle5(Imagenum){
    Sets = document.getElementsByClassName('toggles');
    NumberOfSets = Sets.length;
    for (x = 0 ; x < NumberOfSets ; x++){
    if (x == Imagenum){
    document.getElementById('toggleImage' + x).src = 'images/minus.png';
    document.getElementById('contentDiv' + x).style.display = 'block';
    }else{
    document.getElementById('toggleImage' + x).src = 'images/plus.png';
    document.getElementById('contentDiv' + x).style.display = 'none';
    }
    }
    }
    </script>
     	</head>
    	<body>
        
    <div id="headerDivImg">
        <div id="titleTextImg">display div test</div>
    <a class="toggles" href="javascript:toggle5(0)"><img id="toggleImage0" src="images/plus.png" /></a>
    <a class="toggles" href="javascript:toggle5(1)"><img id="toggleImage1" src="images/plus.png" /></a>
    </div>
    <div id="contentDiv0" style="display:none"><img src="bigImage0.ext" /></div>
    <div id="contentDiv1" style="display:none"><img src="bigImage1.ext" /></div>
    
    	</body>
    </html>
    If you want to add more images:
    Code:
    <div id="headerDivImg">
        <div id="titleTextImg">display div test</div>
    <a class="toggles" href="javascript:toggle5(0)"><img id="toggleImage0" src="images/plus.png" /></a>
    <a class="toggles" href="javascript:toggle5(1)"><img id="toggleImage1" src="images/plus.png" /></a>
    <a class="toggles" href="javascript:toggle5(2)"><img id="toggleImage2" src="images/plus.png" /></a>
    <a class="toggles" href="javascript:toggle5(3)"><img id="toggleImage3" src="images/plus.png" /></a>
    </div>
    <div id="contentDiv0" style="display:none"><img src="bigImage0.ext" /></div>
    <div id="contentDiv1" style="display:none"><img src="bigImage1.ext" /></div>
    <div id="contentDiv2" style="display:none"><img scr="bigImage2.ext" /></div>
    <div id="contentDiv3" style="display:none"><img src="bigImage3.ext" /></div>
    

  • #5
    New Coder
    Join Date
    Feb 2012
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Wow!

    that is just superb! - well explained (thank you im a noob)

    and works like a dream. also think I have worked out how to solve my form issue so its all systems go for this script.

    my hair can start to grow back now!

    thanks so much.
    steve.

  • #6
    New Coder
    Join Date
    Feb 2012
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts
    i seem to have one more problem.

    i have achieved my task of getting what is selected sent to the next page within this script, but it only seems to work in google chrome, not firefox or ie.

    should i start a different thread for this? here is the code im using.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    	<head>
    		<title>Test Document</title>
            <script src="js/jquery-1.2.3.pack.js"></script>
    <script src="js/runonload.js"></script>
    <link href="css/tutorial.css" media="all" type="text/css" rel="stylesheet">
    
    
    <script language="javascript"> 
    function toggle() { 
    	var ele = document.getElementById("toggleText");
    	var text = document.getElementById("displayText");
    	if(ele.style.display == "block") {
        		ele.style.display = "none";
    		text.innerHTML = "show";
      	}
    	else {
    		ele.style.display = "block";
    		text.innerHTML = "hide";
    	}
    } 
    
    function toggle5(Imagenum){
    Sets = document.getElementsByClassName('toggles');
    NumberOfSets = Sets.length;
    for (x = 0 ; x < NumberOfSets ; x++){
    if (x == Imagenum){
    document.getElementById('toggleImage' + x).src = 'images/minus.png';
    document.getElementById('contentDiv' + x).style.display = 'block';
    }else{
    document.getElementById('toggleImage' + x).src = 'images/plus.png';
    document.getElementById('contentDiv' + x).style.display = 'none';
    }
    }
    }
    // end of toggle script
    var field='unset'; // need to set var to be sent
    
    // start script to send variable to another page without refresh
    
    $(function() {
      $('.error').hide();
      $('input.text-input').css({backgroundColor:"#FFFFFF"});
      $('input.text-input').focus(function(){
        $(this).css({backgroundColor:"#FFDDAA"});
      });
      $('input.text-input').blur(function(){
        $(this).css({backgroundColor:"#FFFFFF"});
      });
    
      $(".button").click(function() {
    		// validate and process form
    		// first hide any error messages
        $('.error').hide();
    		
    	  var name = $("input#name").val();
    		if (name == "") {
          $("label#name_error").show();
          $("input#name").focus();
          return false;
        }
    		var email = $("input#email").val();
    		if (email == "") {
          $("label#email_error").show();
          $("input#email").focus();
          return false;
        }
    		var phone = $("input#phone").val();
    		if (phone == "") {
          $("label#phone_error").show();
          $("input#phone").focus();
          return false;
        }
    		
    		var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;
    		//alert (dataString);return false;
    		
    		$.ajax({
          type: "POST",
          url: "../timbers.php",
          data: dataString,
          success: function() {
            $('#contact_form').html("<div id='message'></div>");
            $('#message').html("<h2>Contact Form Submitted!</h2>")
            .append("<p>We will be in touch soon.</p>")
            .hide()
            .fadeIn(1500, function() {
              $('#message').append("<img id='checkmark' src='images/check.png' />");
            });
          }
         });
        return false;
    	});
    });
    runOnLoad(function(){
      $("input#name").select().focus();
    });
    </script>
     	</head>
    	<body>
        
    <div id="headerDivImg">
        <div id="titleTextImg">display div test</div>
    <a class="toggles" href="javascript:toggle5(0);phone='variableOne';"><img id="toggleImage0" src="images/plus.png" /></a>
    <a class="toggles" href="javascript:toggle5(1);phone='variableTwo';"><img id="toggleImage1" src="images/plus.png" /></a>
    <a class="toggles" href="javascript:toggle5(2);phone='variableThree';"><img id="toggleImage2" src="images/plus.png" /></a>
    <a class="toggles" href="javascript:toggle5(3);phone='variableFour';"><img id="toggleImage3" src="images/plus.png" /></a>
    </div>
    <div id="contentDiv0" style="display:none"><a>this is the first div</a></div>
    <div id="contentDiv1" style="display:none"><a>this is the second div</a></div>
    <div id="contentDiv2" style="display:none"><a>this is the third div</a></div>
    <div id="contentDiv3" style="display:none"><a>this is the woo hoo div</a></div>
    <div id="contact_form">
      <form name="contact" method="post" action="">
        <fieldset>
    <script>
    var name = 'firstname';
    var email = 'testemail';
    
    </script>
    <input name="name" id="name" value="name" type="hidden" />
    <input name="phone" id="phone" value="phone" type="hidden" />
    <input name="email" id="email" value="email" type="hidden" />
          
        	<br />
          <input type="submit" name="submit" class="button" id="submit_btn" value="Send" />     
        </fieldset>
      </form>
    </div>
    <script type="text/javascript">
    
    function ref() {
     var var1 = name, var2 = email, var2 = phone;
     location.href = 'untitled.html?var1='+var1+'&var2='+var2;
    }
    </script>
    </head>
    
    
    <a href="javascript:ref()">Refresh</a>
    <!--
    
    <script type="text/javascript"> var var1 = name, var2 = email; var2 = phone;</script>
    <a href="" onclick="window.location.href='untitled.html?var1='+var1+'&var2='+var2+'&var3'+var3;" >update</a>
    
    
    <script type="text/javascript">
     var var1 = name, var2 = email, var2 = phone;
     
    function redirectUser() {
      var url = "<%= response.encodeURL('http://www.zakscustomcues.com/modules/zakscustom/imageswapper/untitled.html?var1='+var1+'&var2='+var2+'&var3'+var3) %>";
      window.location.href = url;
    }
    </script>
    	</body>
    </html>

  • #7
    New Coder
    Join Date
    Feb 2012
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts
    all good,
    I worked it out!

    sb..


  •  

    Posting Permissions

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