CODEWITHSUNDEEP
javascriptjqueryhtmlloadhref
Tasos
Tasos

Reputation: 1642

Load previous/next url with jquery

I load html pages on a div and want to create previous/next button for easier navigation. What would be the best way to achieve this?

As per the fiddle: https://jsfiddle.net/5vbc2vp6/6/ - basically I want to target the next div href and load it when the previous/next button is clicked.

$(".iframe").on("click", function(e) {
  e.preventDefault();
  var $mylink = $(this).attr('href');
  $("#myDiv").load($mylink);
});

$(".prev").on("click", function(e) {
  e.preventDefault();
});

$(".next").on("click", function(e) {
  e.preventDefault();
});

HTML

<a class="prev" href="#">Previous Entry</a> | <a class="next" href="#">Next Entry</a>

<p>
  <div id="myDiv">
  HTML loads here
  </div>
</p>

<div class="entry designs">
  <span class="number">1</span>
  <a class="iframe" rel="design1" href="portfolio/automotive/page.html" caption="Design for Automotive company">
    <img src="portfolio/automotive/thumb.jpg" alt="" border="0" width="200" height="150">
    <span class="magnifier"><span class="tp-info"><span class="tp-color">Design</span> for Automotive company</span>
    </span>
  </a>
</div>

<div class="entry designs">
  <span class="number">2</span>
  <a class="iframe" rel="design2" href="portfolio/landing_page/page.html" caption="Landing page design">
    <img src="portfolio/landing_page/thumb.jpg" alt="" border="0" width="200" height="150">
    <span class="magnifier"><span class="tp-info"><span class="tp-color">Landing page</span> design</span>
    </span>
  </a>
</div>

<div class="entry print">
  <span class="number">1</span>
  <a class="iframe" rel="print1" href="portfolio/testobject/page.html" caption="Flyer design for TestObject">
    <img src="portfolio/testobject/thumb.png" alt="" border="0" width="200" height="150">
    <span class="magnifier"><span class="tp-info"><span class="tp-color">Flyer design</span> for TestObject</span>
    </span>
  </a>
</div>

Upvotes: 1

Views: 377

Answers (1)

Mihai Alexandru-Ionut
Mihai Alexandru-Ionut

Reputation: 48407

Here is my solution ! Hope this help you
https://jsfiddle.net/ionutmihai1995/1yuju49p/

$('#e1').hide();
$('#e2').hide();
$('#e3').hide();
$(".iframe").on("click", function(e) {
    e.preventDefault();
    var $mylink = $(this).attr('href');
    $("#myDiv").load($mylink);
});

$(".prev").on("click", function(e) {
    var currentId=$('#myDiv .number').html();
    if(currentId==1)
      currentId=3;
    else
      currentId-=1;
    var prev=$('#e'+currentId).html();
    $('#myDiv .entry').replaceWith(prev);
});

$(".next").on("click", function(e) {
   var currentId=$('#myDiv .number').html();
   if(currentId==3)
     currentId=1;
   else
     currentId=parseInt(currentId)+1;
   var next=$('#e'+currentId).html();
   $('#myDiv .entry').replaceWith(next);

});

HTML

<a class="prev" href="#">Previous Entry</a> | <a class="next" href="#">Next Entry</a>

<div id="myDiv">
  <div class="entry" id="current">
    <span class="number">1</span>
    <a class="iframe" rel="design1" href="portfolio/automotive/page.html" caption="Design for Automotive company">
      <img src="portfolio/automotive/thumb.jpg" alt="" border="0" width="200" height="150">
      <span class="magnifier"><span class="tp-info"><span class="tp-color">Design</span> for Automotive company</span>
      </span>
    </a>
</div>
</div>
<div id="e1">
<div class="entry">
  <span class="number">1</span>
  <a class="iframe" rel="design1" href="portfolio/automotive/page.html" caption="Design for Automotive company">
    <img src="portfolio/automotive/thumb.jpg" alt="" border="0" width="200" height="150">
    <span class="magnifier"><span class="tp-info"><span class="tp-color">Design</span> for Automotive company</span>
    </span>
  </a>
</div>
</div>
<div id="e2">
<div class="entry">
  <span class="number">2</span>
  <a class="iframe" rel="design2" href="portfolio/landing_page/page.html" caption="Landing page design">
    <img src="portfolio/landing_page/thumb.jpg" alt="" border="0" width="200" height="150">
    <span class="magnifier"><span class="tp-info"><span class="tp-color">Landing page</span> design</span>
    </span>
  </a>
</div>
</div>
<div id="e3">
<div class="entry">
  <span class="number">3</span>
  <a class="iframe" rel="print1" href="portfolio/testobject/page.html" caption="Flyer design for TestObject">
    <img src="portfolio/testobject/thumb.png" alt="" border="0" width="200" height="150">
    <span class="magnifier"><span class="tp-info"><span class="tp-color">Flyer design</span> for TestObject</span>
    </span>
  </a>
</div>
</div>

Upvotes: 1

Related Questions