Buttons Only Working On One Page

Hello

I have a full page slider on my website, and when you click one of the 4 grey buttons, a box should open with some text.

This works fine on the first page - but not on any other pages.

Can anyone advise what I am doing wrong?!

http://iwillbeawebdeveloper.co.uk/v2/index.html

Thanks
James

Hi,

You have a number of problems there but the main one is that you are using multiple ids for the repeating sections of text. IDs are unique so the js will only ever find one of them and the others will be ignored.

The second problem is that your elements on the other slides are hidden by default so the js won;t find them when initialised. You need to use .on in jquery and use a target that already exists in the page and then it will work on dynamically added elements.

Your js is too verbose and you need to automate it better.

If you change the ids to classes and supply the destination in data attributes you can reduce the js to just a few lines.

e.g.

You can remove this:

 $(document).ready(function() {
        $("#whybutton").click(function() {
            $(".thebox").show("slow");
            $("#langtext").hide("fast");
            $("#challtext").hide("fast");
            $("#futuretext").hide("fast");
            $("#whytext").delay(200).fadeIn(800);
        });
    });
         $(document).ready(function() {
        $("#langbutton").click(function() {
            $("#whytext").hide("fast");
            $("#challtext").hide("fast");
            $("#futuretext").hide("fast");
            $(".thebox").show("slow");
            $("#langtext").delay(200).fadeIn(800);
        });
    });
         $(document).ready(function() {
        $("#challbutton").click(function() {
            $("#whytext").hide("fast");
            $("#langtext").hide("fast");
            $("#futuretext").hide("fast");
            $(".thebox").show("slow");
            $("#challtext").delay(200).fadeIn(800);
        });
    });
        $(document).ready(function() {
        $("#futurebutton").click(function() {
            $("#whytext").hide("fast");
            $("#challtext").hide("fast");
            $("#langtext").hide("fast");
            $(".thebox").show("slow");
            $("#futuretext").delay(200).fadeIn(800);
        });
    });

and just use this:

 $("#slide-window").on("click", ".toggleDiv", function() {
        var activeTab = $(this).data("destination"); //Find the destination from a data attribute
		var theTarget = $(this).closest('.thebuttons').next('.thebox'); 
		$('.showDiv,.thebox').hide();// hide all of them
		theTarget.show();// show this box
		theTarget.find(activeTab).show();//show this p element
        return false;
    });

That’s about an 80% reduction in code.

Then the html would need to look like this:

<div id="slide-window">
  <ol id="slides" start="1">
    <li class="slide color-0 alive" style="background-color: blue">
      <p class="websitename">James Winfield - DJ Page</p>
      <a href="http://www.jameswinfield.co.uk/" class="screenshot"><img src="jameswinfield.png"/></a> <br>
      <div class="thebuttons">
        <button data-destination=".whytext" class="toggleDiv flexbutton button-3d" >Why Build It?</button>
        <button data-destination=".langtext" class="toggleDiv flexbutton button-3d" >Languages/Frameworks</button>
        <button data-destination=".challtext" class="toggleDiv flexbutton button-3d" >Challenges Experienced</button>
        <button data-destination=".futuretext" class="toggleDiv flexbutton button-3d">Future Developments</button>
      </div>
      <div class="thebox">
        <p class="showDiv whytext">i WILL WRITE a load of stuff in here soon</p>
        <p class="showDiv langtext">this is lang lang lang lang lang lang</p>
        <p class="showDiv challtext">oh my word this was so so hard</p>
        <p class="showDiv futuretext">In the future the future will be future</p>
      </div>
    </li>
    <li class="slide color-1" style="background-color: green">
      <p class="websitename">Ubereadoolische</p>
      <a href="http://www.ubereadoolische.com" class="screenshot"><img src="uber.jpeg"/></a> <br>
      <div class="thebuttons">
        <button data-destination=".whytext" class="toggleDiv flexbutton button-3d" >Why Build It?</button>
        <button data-destination=".langtext" class="toggleDiv flexbutton button-3d" >Languages/Frameworks</button>
        <button data-destination=".challtext" class="toggleDiv flexbutton button-3d" >Challenges Experienced</button>
        <button data-destination=".futuretext" class="toggleDiv flexbutton button-3d">Future Developments</button>
      </div>
      <div class="thebox">
        <p class="showDiv whytext">i WILL WRITE a load of stuff in here soon</p>
        <p class="showDiv langtext">this is lang lang lang lang lang lang</p>
        <p class="showDiv challtext">oh my word this was so so hard</p>
        <p class="showDiv futuretext">In the future the future will be future</p>
      </div>
    </li>
    <li class="slide color-2" style="background-color: red">
      <p class="websitename">Canvas And Prints Kirdford</p>
      <a href="http://iwillbeawebdeveloper.co.uk/cap/index.html" class="screenshot"><img src="cap.jpeg"/></a> <br>
      <div class="thebuttons">
        <button data-destination=".whytext" class="toggleDiv flexbutton button-3d" >Why Build It?</button>
        <button data-destination=".langtext" class="toggleDiv flexbutton button-3d" >Languages/Frameworks</button>
        <button data-destination=".challtext" class="toggleDiv flexbutton button-3d" >Challenges Experienced</button>
        <button data-destination=".futuretext" class="toggleDiv flexbutton button-3d">Future Developments</button>
      </div>
      <div class="thebox">
        <p class="showDiv whytext">i WILL WRITE a load of stuff in here soon</p>
        <p class="showDiv langtext">this is lang lang lang lang lang lang</p>
        <p class="showDiv challtext">oh my word this was so so hard</p>
        <p class="showDiv futuretext">In the future the future will be future</p>
      </div>
    </li>
    <li class="slide color-3" style="background-color: pink">
      <p class="websitename">I Need A Weather Forecast</p>
      <a href="http://ineedaweatherforecast.co.uk/" class="screenshot"><img src="inawf.jpeg"/></a> <br>
      <div class="thebuttons">
        <button data-destination=".whytext" class="toggleDiv flexbutton button-3d" >Why Build It 2?</button>
        <button data-destination=".langtext" class="toggleDiv flexbutton button-3d" >Languages/Frameworks</button>
        <button data-destination=".challtext" class="toggleDiv flexbutton button-3d" >Challenges Experienced</button>
        <button data-destination=".futuretext" class="toggleDiv flexbutton button-3d">Future Developments</button>
      </div>
       <div class="thebox">
        <p class="showDiv whytext">i WILL WRITE a load of stuff in here soon</p>
        <p class="showDiv langtext">this is lang lang lang lang lang lang</p>
        <p class="showDiv challtext">oh my word this was so so hard</p>
        <p class="showDiv futuretext">In the future the future will be future</p>
      </div>
    </li>
    <li class="slide color-4" style="background-color: yellow">
      <p class="websitename">Dark Matter Events</p>
      <a href="http://www.darkmatterartists.com/events/" class="screenshot"><img src="dmp.jpeg"/></a> <br>
     <div class="thebuttons">
        <button data-destination=".whytext" class="toggleDiv flexbutton button-3d" >Why Build It 3?</button>
        <button data-destination=".langtext" class="toggleDiv flexbutton button-3d" >Languages/Frameworks</button>
        <button data-destination=".challtext" class="toggleDiv flexbutton button-3d" >Challenges Experienced</button>
        <button data-destination=".futuretext" class="toggleDiv flexbutton button-3d">Future Developments</button>
      </div>
     <div class="thebox">
        <p class="showDiv whytext">i WILL WRITE a load of stuff in here soon</p>
        <p class="showDiv langtext">this is lang lang lang lang lang lang</p>
        <p class="showDiv challtext">oh my word this was so so hard</p>
        <p class="showDiv futuretext">In the future the future will be future</p>
      </div>
    </li>
    <li class="slide color-4" style="background-color: purple">
      <p class="websitename">Random Fruit Generator</p>
      <a href="http://randomfruit.co.uk/" class="screenshot"><img src="rfg.JPeG"/></a> <br>
      <div class="thebuttons">
        <button data-destination=".whytext" class="toggleDiv flexbutton button-3d" >Why Build It 4?</button>
        <button data-destination=".langtext" class="toggleDiv flexbutton button-3d" >Languages/Frameworks</button>
        <button data-destination=".challtext" class="toggleDiv flexbutton button-3d" >Challenges Experienced</button>
        <button data-destination=".futuretext" class="toggleDiv flexbutton button-3d">Future Developments</button>
      </div>
      <div class="thebox">
        <p class="showDiv whytext">i WILL WRITE a load of stuff in here soon</p>
        <p class="showDiv langtext">this is lang lang lang lang lang lang</p>
        <p class="showDiv challtext">oh my word this was so so hard</p>
        <p class="showDiv futuretext">In the future the future will be future</p>
      </div>
    </li>
  </ol>

The js looks at the data attribute on the button to find the class of which element to show and it shows only the one that is within the next block.

<button data-destination=".whytext" class="toggleDiv flexbutton button-3d" >Why Build It?</button>

Therefore you only need to set up a click event for that one class and then you can find the target easily. All the html is set up the same for each block.

here is your page as a working example although I have not touched your css or tidied anything else up apart from the code in question.

<!doctype html>

<head>
<title>I Will Be A Web Developer</title>
<link rel="shortcut icon" type="image/x-icon" href="http://www.iwillbeawebdeveloper.co.uk/favicon.ico">
<link rel="stylesheet" type="text/css" href="http://iwillbeawebdeveloper.co.uk/v2/style.css">
<meta name="description" content="I Will Be A Web Developer - Profile For James Winfield">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<style>
.thebox {
	top:0
}/*for testing*/
</style>
</head>
<body>
<div id="slide-window">
  <ol id="slides" start="1">
    <li class="slide color-0 alive" style="background-color: blue">
      <p class="websitename">James Winfield - DJ Page</p>
      <a href="http://www.jameswinfield.co.uk/" class="screenshot"><img src="jameswinfield.png"/></a> <br>
      <div class="thebuttons">
        <button data-destination=".whytext" class="toggleDiv flexbutton button-3d" >Why Build It?</button>
        <button data-destination=".langtext" class="toggleDiv flexbutton button-3d" >Languages/Frameworks</button>
        <button data-destination=".challtext" class="toggleDiv flexbutton button-3d" >Challenges Experienced</button>
        <button data-destination=".futuretext" class="toggleDiv flexbutton button-3d">Future Developments</button>
      </div>
      <div class="thebox">
        <p class="showDiv whytext">i WILL WRITE a load of stuff in here soon</p>
        <p class="showDiv langtext">this is lang lang lang lang lang lang</p>
        <p class="showDiv challtext">oh my word this was so so hard</p>
        <p class="showDiv futuretext">In the future the future will be future</p>
      </div>
    </li>
    <li class="slide color-1" style="background-color: green">
      <p class="websitename">Ubereadoolische</p>
      <a href="http://www.ubereadoolische.com" class="screenshot"><img src="uber.jpeg"/></a> <br>
      <div class="thebuttons">
        <button data-destination=".whytext" class="toggleDiv flexbutton button-3d" >Why Build It?</button>
        <button data-destination=".langtext" class="toggleDiv flexbutton button-3d" >Languages/Frameworks</button>
        <button data-destination=".challtext" class="toggleDiv flexbutton button-3d" >Challenges Experienced</button>
        <button data-destination=".futuretext" class="toggleDiv flexbutton button-3d">Future Developments</button>
      </div>
      <div class="thebox">
        <p class="showDiv whytext">i WILL WRITE a load of stuff in here soon</p>
        <p class="showDiv langtext">this is lang lang lang lang lang lang</p>
        <p class="showDiv challtext">oh my word this was so so hard</p>
        <p class="showDiv futuretext">In the future the future will be future</p>
      </div>
    </li>
    <li class="slide color-2" style="background-color: red">
      <p class="websitename">Canvas And Prints Kirdford</p>
      <a href="http://iwillbeawebdeveloper.co.uk/cap/index.html" class="screenshot"><img src="cap.jpeg"/></a> <br>
      <div class="thebuttons">
        <button data-destination=".whytext" class="toggleDiv flexbutton button-3d" >Why Build It?</button>
        <button data-destination=".langtext" class="toggleDiv flexbutton button-3d" >Languages/Frameworks</button>
        <button data-destination=".challtext" class="toggleDiv flexbutton button-3d" >Challenges Experienced</button>
        <button data-destination=".futuretext" class="toggleDiv flexbutton button-3d">Future Developments</button>
      </div>
      <div class="thebox">
        <p class="showDiv whytext">i WILL WRITE a load of stuff in here soon</p>
        <p class="showDiv langtext">this is lang lang lang lang lang lang</p>
        <p class="showDiv challtext">oh my word this was so so hard</p>
        <p class="showDiv futuretext">In the future the future will be future</p>
      </div>
    </li>
    <li class="slide color-3" style="background-color: pink">
      <p class="websitename">I Need A Weather Forecast</p>
      <a href="http://ineedaweatherforecast.co.uk/" class="screenshot"><img src="inawf.jpeg"/></a> <br>
      <div class="thebuttons">
        <button data-destination=".whytext" class="toggleDiv flexbutton button-3d" >Why Build It 2?</button>
        <button data-destination=".langtext" class="toggleDiv flexbutton button-3d" >Languages/Frameworks</button>
        <button data-destination=".challtext" class="toggleDiv flexbutton button-3d" >Challenges Experienced</button>
        <button data-destination=".futuretext" class="toggleDiv flexbutton button-3d">Future Developments</button>
      </div>
      <div class="thebox">
        <p class="showDiv whytext">i WILL WRITE a load of stuff in here soon</p>
        <p class="showDiv langtext">this is lang lang lang lang lang lang</p>
        <p class="showDiv challtext">oh my word this was so so hard</p>
        <p class="showDiv futuretext">In the future the future will be future</p>
      </div>
    </li>
    <li class="slide color-4" style="background-color: yellow">
      <p class="websitename">Dark Matter Events</p>
      <a href="http://www.darkmatterartists.com/events/" class="screenshot"><img src="dmp.jpeg"/></a> <br>
      <div class="thebuttons">
        <button data-destination=".whytext" class="toggleDiv flexbutton button-3d" >Why Build It 3?</button>
        <button data-destination=".langtext" class="toggleDiv flexbutton button-3d" >Languages/Frameworks</button>
        <button data-destination=".challtext" class="toggleDiv flexbutton button-3d" >Challenges Experienced</button>
        <button data-destination=".futuretext" class="toggleDiv flexbutton button-3d">Future Developments</button>
      </div>
      <div class="thebox">
        <p class="showDiv whytext">i WILL WRITE a load of stuff in here soon</p>
        <p class="showDiv langtext">this is lang lang lang lang lang lang</p>
        <p class="showDiv challtext">oh my word this was so so hard</p>
        <p class="showDiv futuretext">In the future the future will be future</p>
      </div>
    </li>
    <li class="slide color-4" style="background-color: purple">
      <p class="websitename">Random Fruit Generator</p>
      <a href="http://randomfruit.co.uk/" class="screenshot"><img src="rfg.JPeG"/></a> <br>
      <div class="thebuttons">
        <button data-destination=".whytext" class="toggleDiv flexbutton button-3d" >Why Build It 4?</button>
        <button data-destination=".langtext" class="toggleDiv flexbutton button-3d" >Languages/Frameworks</button>
        <button data-destination=".challtext" class="toggleDiv flexbutton button-3d" >Challenges Experienced</button>
        <button data-destination=".futuretext" class="toggleDiv flexbutton button-3d">Future Developments</button>
      </div>
      <div class="thebox">
        <p class="showDiv whytext">i WILL WRITE a load of stuff in here soon</p>
        <p class="showDiv langtext">this is lang lang lang lang lang lang</p>
        <p class="showDiv challtext">oh my word this was so so hard</p>
        <p class="showDiv futuretext">In the future the future will be future</p>
      </div>
    </li>
  </ol>
  <div class="navbuttons"> <span class="nav fa fa-angle-left fa-3x" id="left"></span> <span class="nav fa fa-angle-right fa-3x" id="right"></span> <span class="fa fa-heart fa-1x" id="bottomleft"></span> </div>
  
  <!--    <div id="credit">Websites By James Winfield<br>Slide No.<span id="count">1</span><br><span id="zoom">zoom</span></div>--> 
  
</div>
<nav class="menu">
  <p>James Winfield <a href="#">More About Me</a> </p>
</nav>
<script>
    $.global = new Object();

$.global.item = 1;
$.global.total = 0;

$(document).ready(function() 
	{
	
	var WindowWidth = $(window).width();
	var SlideCount = $('#slides li').length;
	var SlidesWidth = SlideCount * WindowWidth;
	
   $.global.item = 0;
    $.global.total = SlideCount; 
    
	$('.slide').css('width',WindowWidth+'px');
	$('#slides').css('width',SlidesWidth+'px');

   $("#slides li:nth-child(1)").addClass('alive');
    
  $('#left').click(function() { Slide('back'); }); 
  $('#right').click(function() { Slide('forward'); }); 
        
  });

function Slide(direction)
	{
   
    if (direction == 'back') { var $target = $.global.item - 1; }
    if (direction == 'forward') { var $target = $.global.item + 1; }  
    
    if ($target == -1) { DoIt($.global.total-1); } 
    else if ($target == $.global.total) { DoIt(0); }  
    else { DoIt($target); }
    
    
	}

function DoIt(target)
  {
   
    var $windowwidth = $(window).width();
	var $margin = $windowwidth * target; 
    var $actualtarget = target+1;
    
    $("#slides li:nth-child("+$actualtarget+")").addClass('alive');
    
    $('#slides').css('transform','translate3d(-'+$margin+'px,0px,0px)');	
    
    $.global.item = target; 
    
  $('#count').html($.global.item+1);
    
  }
    
    </script> 
<script>/*
    $(document).ready(function() {
        $("#whybutton").click(function() {
            $(".thebox").show("slow");
            $("#langtext").hide("fast");
            $("#challtext").hide("fast");
            $("#futuretext").hide("fast");
            $("#whytext").delay(200).fadeIn(800);
        });
    });
         $(document).ready(function() {
        $("#langbutton").click(function() {
            $("#whytext").hide("fast");
            $("#challtext").hide("fast");
            $("#futuretext").hide("fast");
            $(".thebox").show("slow");
            $("#langtext").delay(200).fadeIn(800);
        });
    });
         $(document).ready(function() {
        $("#challbutton").click(function() {
            $("#whytext").hide("fast");
            $("#langtext").hide("fast");
            $("#futuretext").hide("fast");
            $(".thebox").show("slow");
            $("#challtext").delay(200).fadeIn(800);
        });
    });
        $(document).ready(function() {
        $("#futurebutton").click(function() {
            $("#whytext").hide("fast");
            $("#challtext").hide("fast");
            $("#langtext").hide("fast");
            $(".thebox").show("slow");
            $("#futuretext").delay(200).fadeIn(800);
        });
    }); */

 $(document).ready(function() {
    
	 $(".nav").click(function() {
          $(".thebox").hide("fast");
     });
      
   

 $("#slide-window").on("click", ".toggleDiv", function() {
        var activeTab = $(this).data("destination"); //Find the destination from a data attribute
		var theTarget = $(this).closest('.thebuttons').next('.thebox'); 
		$('.showDiv,.thebox').hide();// hide all of them
		theTarget.show();
		theTarget.find(activeTab).show();
        return false;
    });

  });// end document ready
</script>
</body>
</html>
5 Likes

Thanks for the comprehensive answer - it really is appreciated.

I’ve never used the data tags before as I’m yet to learn properly what they are for - and my jQuery is still at a more basic level!

I will take a proper look at it to understand it when I get back from work.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.