Javascript Question

With jQuery, on click redirect to new page, then show or hide DOM elements

Issue



I'm trying to do something that seems like it should be fairly simple. Just not sure where I'm going wrong.

I have a slideshow running in let's say index.html. When an image in the slideshow is clicked, the desired behavior is for the page to redirect to "pics.html". The pics page has an unordered list of images with some text content. If Javascript is disabled, all the images and content (contained in the list items), should be displayed. But, if JavaScript is enabled only the list item that corresponds to the image that was clicked on the index page should show.

While I am able to redirect to the pics.html page, no jQuery commands on that page seem to work after redirect.

My Code



index.html



<body id="home" class="jsOff">

<header>
<h1>Slideshow</h1>
</header>

<div class="cycle-slideshow"

<div class="slide">
<a href="pics.html#flower">
<img src="http://malsup.github.io/images/p1.jpg">
</a>
</div>

<div class="slide">
<a href="pics.html#trees">
<img src="http://malsup.github.io/images/p2.jpg">
</a>
</div>

<div class="slide">
<a href="pics.html#ocean">
<img src="http://malsup.github.io/images/p3.jpg">
</a>
</div>

</div>





pics.html



<body id="pics" class="jsOff">

<header>
<h1>Pics Page</h1>
</header>

<ul id="images">

<li id="flower">
<h2>Flower</h2>
<img src="images/flower1.jpg" title="#" src="#">
<div class="photo-content">
<p>Lorem ipsum yada, yada ... </p>
</div>
</li>

<li id="trees">
<h2>Trees</h2>
<img src="images/trees1.jpg" title="#" src="#">
<div class="photo-content">
<p>Lorem ipsum yada, yada ... </p>
</div>
</li>

<li id="ocean">
<h2>Ocean</h2>
<img src="images/ocean1.jpg" title="#" src="#">
<div class="photo-content">
<p>Lorem ipsum yada, yada ... </p>
</div>
</li>

</ul>





styles.css



#pics p,
#pics h1,
#pics h2,
#pics h3 {
margin: 1em 0em;
}

header h1 {
font-size: 3em;
line-height: 1.125;
margin: 1.125em 0 0.5em 0;
font-family: Papyrus, fantasy;
color: #aad55b; /* Lime green-ish */
text-shadow: 2px 2px 2px black;
}

#pics nav {
margin-bottom: 1em;
}

#pics nav a {
text-decoration: none;
border-radius: .3em;
background: #348F50; /* fallback for old browsers */
background: linear-gradient(to bottom, #348F50 , #56B4D3);
color: #bcdacd;
padding: .2em 1em;
display: inline-block;

}

#pics nav a:hover {
background: lavender;
color: gray;
}

#pics nav a:before {
content: '\276E\276E';
margin-right: 2px;

}

#pics ul#images:after {
clear: both;
content: '';
display: block;
}

#pics ul#images > li {
background: rgba(255,255,255,0.2);
margin-bottom: 2em;
overflow: hidden;
padding: 1em;
}

#pics ul#images > li h2 {
font-family: Tahoma, sans-serif;
font-size: 2.25em;
line-height: 1.125;
margin: 0 0 0.5em 0;
color: #b286ff;
text-shadow: 2px 2px 4px black;
}

#pics ul#images > li img {
width: 200px;
height: auto;
}

#pics ul#images > li:nth-child(odd) img {
float: right;
margin-left: 1em;
}

#pics ul#images li:nth-child(even) img {
float: left;
margin-right: 1.2em;
}

#pics.jsOn ul#images > li {
display: none;
}





scripts.js



$(document).ready(function(){

$('body').removeClass('jsOff').addClass('jsOn');

$('#home .slide a').on('click', function(e) {
// console.log("%clocation.pathname = %s","background: orange", location.pathname):
// console.log(location.pathname);
// $('#pics *:visible').hide();
// alert(this.hash);
e.preventDefault();

var relUrl = 'pics.html' + this.hash
window.location.href = relUrl;

console.log("this.hash = " + this.hash);
$('#pics ' + this.hash).show();

$('#pics.jsOn header > h1').css('background', 'orange');



});

});





What I've Tried Already



These two articles were promising, but I wasn't able to derive a workable solution from them:

With click, navigate to another page and open a div hidden by javascript

Is there any way to redirect to a new page and write some content with jquery on that page?

It asks the exact question I have, but none of the answers work for me. I'm not sure what is wrong in my understanding.

My Questions



I hope I have included enough information. Here are my questions:


  1. Basically, what is wrong with my code, and why isn't it working (per the title of this post)?



Sorry, it was difficuly and time-consuming to assemble this post (although I love the code snippet feature!)

Any help is appreciated.

Answer

The problem is when a new page loads the javascript from previous page has no effect on the new one....all the script will reload also on new page

You don't need any of:

$('#home .slide a').on('click', function(e) {

Let the browser use the href to make page change, then for pics.html page do something like:

$(function() {
  // is this pics.html page?
  if ($('#pics').length) {
    var hash = location.hash;
    // is there a url hash and matching element?
    if (hash && hash !== '#' && $(hash).length) {
      $(hash).show();
    } else {
      // do something else if no hash in url or no matching id
    }

    $('#pics.jsOn header > h1').css('background', 'orange');
  }
});