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

Question

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?

They ask 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

What is wrong with my code, and why isn't it working, per the title?

Where's the code thats not working? Are there errors in browser console? — charlietfl, Nov 12 '16 at 16:56
Don't want to loose my post content so I'm adding it piecemeal ... please bear with me ... I wish there was a better way to do this. :( — Eric Hepperle - CodeSlayer2010, Nov 12 '16 at 16:59
@Falk yes, I did. Checked jQuery in the console to be sure. Good question. — Eric Hepperle - CodeSlayer2010, Nov 12 '16 at 17:13

charlietfl · Accepted Answer · 2016-11-12T17:16:28.343

2

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');
  }
});

edited Nov 12 '16 at 17:16

answered Nov 12 '16 at 17:12

charlietfl

170,828
13
121
150

It worked! Thanks so much! It seems that my information deficit was not knowing about location.hash. If I'm understanding correctly, This solution allows the link to redirect to pics.html normally, then uses the hash parameter of the location object to show the right list item. This is the simple solution I was looking for. Marking as correct. – Eric Hepperle - CodeSlayer2010 Nov 12 '16 at 17:27
One more quick question if I may ... Is there a searchable phrase or term for what you just explained? A lot of times there's jargon and buzzwords that if only I was familiar with them, I could Google the answers much more easily. Thanks! – Eric Hepperle - CodeSlayer2010 Nov 12 '16 at 17:39
regarding what, how javascript works in each page? Or how to find `location.hash` concept? – charlietfl Nov 12 '16 at 17:42
Sorry, been busy with school. The location.hash. For instance, If I didn't know the jargon "DOM" and "document traversal" I would have a hard time find out about those concepts. In the same way, i had no idea about the `location.hash`... hope that clarifies. – Eric Hepperle - CodeSlayer2010 Nov 16 '16 at 22:48
Just part of the learning curve. Some research into javascript and URL would probably turn up docs on `location` and all it's properties – charlietfl Nov 16 '16 at 23:11

score 0 · Answer 2 · answered Nov 12 '16 at 17:22

0

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

you should first get parameter in pics.html use location.hash

`console.log(location.hash)`

answered Nov 12 '16 at 17:22

Loki Shan

1

Thanks for your answer. Although it is correct, @charlietfl's answer was more explanatory and showed how to use the code correctly, so I marked his answer as correct. – Eric Hepperle - CodeSlayer2010 Nov 12 '16 at 17:31

score 0 · Answer 3 · answered Jul 11 '17 at 06:34

<script type="text/javascript">
// HTML1 Page Add JS
 $(function() {
  var field = 'goto';
  var url = window.location.href;
  if(url.indexOf('?' + field + '=') != -1) {
  $('body').addClass('open-menu');
  }
 });
  
// HTML2 Page Add JS 
    document.getElementById("NewButton").onclick = function () {
    location.href = "HTML1.html?goto=backtohome"; // Page URL
  $('body').addClass('contact');
    };
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- HTML1 Page HTML NO CODE -->

<!-- HTML2 Page HTML NO CODE -->
<div class="btn">
     <button id="NewButton" class="buton">BACK</button>
</div>

enter code here

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

Issue

My code

What I've tried already

My questions

3 Answers3