0

I am trying to code a page that will allow users to read on on the same page rather than having to jump to page two or whatever the relevant "NEXT" is.

I can achieve this by pre-defining on the "main" page how many different pages it will have access as well as the links to each of those pages to load.

My question is can this be done, with the links being at the bottom of each page in the folder location, or can it only be achieved by pre-defining the links and div sections.

EG,

<div class="morebox">
<p>Halvah cheesecake wafer. Marzipan tart jujubes icing dessert cheesecake jujubes danish. Topping chocolate lemon drops.</p>
<p>Unerdwear.com danish unerdwear.com. Danish candy gingerbread cookie donut liquorice. Chocolate cake gummi bears toffee liquorice chocolate bar sweet soufflé applicake carrot cake.</p>
<p>Toffee bonbon ice cream wafer muffin applicake. Chocolate cake liquorice candy candy croissant bonbon jelly beans. Soufflé cotton candy donut biscuit danish. Jelly chocolate cake cotton candy unerdwear.com macaroon soufflé gummies tootsie roll.</p>
<p>Applicake icing cotton candy jelly-o pie cotton candy lollipop. Cupcake toffee cookie bonbon. Topping donut biscuit toffee apple pie.</p>
<p>Sugar plum marzipan jelly pie. Sugar plum biscuit sweet sugar plum bonbon. Wafer ice cream marshmallow.</p>
</div>

<div class="morebox-one"></div>
<a href="ajax_more.html" id="one">Click for More</a>

<div class="morebox-two"></div>
<a href="ajax_seconds.html" id="two">Click for More</a>

As you can see from the code above the links are included in the main page, but on the main page I would like it so that the only link showing is the one for whichever is the next relevant page to load.

The jQuery code I am using is

$("a").click(function(event){
var linkLocation = $(this).attr("href");
var ID = $(this).attr("id");
$("#"+ID).fadeOut(500);
$(".morebox-"+ ID).fadeOut(500, function () {
    $(".morebox-"+ ID).load(linkLocation, function () {
        $(".morebox-"+ ID).fadeIn(500)      
    });
});
return false;
});

This method would be fine for smaller documents, but longer pages that should be broken down to prevent longer page loads are what this script is really for.

Thanks for anyone looking at this question, and a virtual hi five to suggested solutions.

smokeyhandgel
  • 27
  • 1
  • 10
  • really not clear what the question is. You definitely need to use common classes for common elements like your links – charlietfl Dec 07 '13 at 17:11
  • sorry if I have not made it very clear. I have three pages (main.html, ajax_more.html & ajax_seconds.html) and the content on one, leads on to another and ends on the last. I can create a page that allows all three pages to load within main.html, but I can only get it to work if I include all the links ("click for more" button) on the main, rather having one link on each page. As I said originally, this is fine for smaller content, but for multiple paged content, it will mean having to have multiple links on the main page and look rather confusing. – smokeyhandgel Dec 07 '13 at 17:24
  • you need to delegate your event handlers using `on()` to account for future elements being added...http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements – charlietfl Dec 07 '13 at 17:28

0 Answers0