Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Mar 2014
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Next / Previous to Function

    I have this script which is calling 10 divs individually from an external file.

    HTML (External File)
    Code:
    <a id="load1" href="#" data-id="1" class="load">
        <img>
    </a>
    <a id="load2" href="#" data-id="2" class="load">
        <img>
    </a>
    Javascript (Main File)
    Code:
    $(".load").click(function () {
        $("#projects").html("");
        $("#loading").show();
        $("#projects").load("projects.html #"+$(this).data('id'), function () {
            $("#loading").hide()
        })
    })
    If load1 is clicked, it loads div1. If load2 is clicked, it loads div2 etc...

    I'm wanting to add next / previous buttons on the page which will load the next / previous div. So instead of having a separate function for each div, does anyone know how to tell this to either add / minus 1 from the load id? Something along these lines:

    Pseudocode:
    Code:
    $(".next").click(function () {
        $("#projects").load("projects.html #"+$(this).data('id') + 1, function () {
    })
    $(".previous").click(function () {
        $("#projects").load("projects.html #"+$(this).data('id') - 1, function () {
    })

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,225
    Thanks
    23
    Thanked 606 Times in 605 Posts
    Some things in your JQ were not explained, like #projects and #loading, so I just re-wrote things, but you should get the point:
    10 articles titled Art1.html to Art10.html
    Code:
    <body>
    <div>
    <table style="width:250px;">
    <tr><td colspan="2" id="here"></td></tr>
    <tr>
    <td><div id="previous"  style="width:50px;padding:5px;border:1px solid black;display:none;">previous</div></td>
    <td><div id="next" style="float:right;padding:5px;border:1px solid black">next</div></td>
    </tr>
    </table>
    </div>
    <div id="love"></div>
    <script type='text/javascript' src='javascript/jquery.js'></script>
    <script type="text/javascript">
    	$("#here").load("Art1.html");
    	var num = 1;
    	$("#next").click(function(){
    		num++;
    		if(num == 11) num=1;
    		$("#here").load("Art"+num+".html");
    		$("#previous").css("display","block");
    	});
    	$("#previous").click(function(){
    		if(num == 1) num=11;
    		num--;
    		$("#here").load("Art"+num+".html");
    	});
    </script>
    </body>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New Coder
    Join Date
    Mar 2014
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Cheers sunfighter, that is along the lines of what I'm after, but is there anyway to to keep this as one external file? That was a necessary part of the script. To better explain, would you mind taking a quick demo I've put together for you? (Links below). Also find some better explained script at the end of this message.

    TinyUpload.com - best file hosting solution, with no limits, totaly free

    Code:
    $(".load").click(function () {
        $("#projects").html("");
    
        // #projects is the div where the content is being loaded.
    
        $("#loading").show();
    
        // #loading .gif displayed while the files load.
    
        $("#projects").load("projects.html #"+$(this).data('id'), function () {
    
        // Loads corresponding div into #projects
    
            $("#loading").hide()
    
            // Hides the loading .gif when loading is complete
    
        })
    })

  • #4
    New Coder
    Join Date
    Mar 2014
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Cheers sunfighter, that is along the lines of what I'm after, but is there anyway to to keep this as one external file? That was a necessary part of the script. To better explain, would you mind taking a quick demo I've put together for you? (Links below). Also find some better explained script at the end of this message.

    TinyUpload.com - best file hosting solution, with no limits, totaly free

    Code:
    $(".load").click(function () {
        $("#projects").html("");
    
        // #projects is the div where the content is being loaded.
    
        $("#loading").show();
    
        // #loading .gif displayed while the files load.
    
        $("#projects").load("projects.html #"+$(this).data('id'), function () {
    
        // Loads corresponding div into #projects
    
            $("#loading").hide()
    
            // Hides the loading .gif when loading is complete
    
        })
    })

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Without trying your demo (as it is an attachment), here's my stab at it:
    Code:
    $(".load").on('click', function () {
        var $projects = $("#projects"),
            id = $(this).data('id');
    
        $projects.html("").data('id', id);
    
        $("#loading").show();
    
        $projects.load("projects.html #" + id, function () {
            $("#loading").hide();
        })
    });
    
    $(".next").on('click', function () {
        var $projects = $("#projects");
        $projects.load("projects.html #" + ($projects.data('id') + 1), function () {
            ...
        });
    });
    $(".previous").on('click', function () {
        var $projects = $("#projects");
        $projects.load("projects.html #" + ($projects.data('id') - 1), function () {
            ...
        });
    });
    You can optimize it by attaching the click event once to the parent element of the links instead of attaching the event to each of the 10 links. This is called event delegation technique.
    Code:
    $("selector of the parent element of links").on('click', ".load", function () {
        ...same code
    });

  • #6
    New Coder
    Join Date
    Mar 2014
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's exactly what I'm after glen, yes. However I've run into a few small issues. This kind of worked locally, the next and previous buttons did work, but only for the div directly next to it (it would only go forwards and backwards once). I've got an online version now, but sadly the code seemed to break when I did so? I'm confused as to why as it's identical, but all it's doing now is closing the content from the other page. See below.

    http://goo.gl/RFBN2E

  • #7
    New Coder
    Join Date
    Mar 2014
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's exactly what I'm after glen, yes. However I've run into a few small issues. This kind of worked locally, the next and previous buttons did work, but only for the div directly next to it (it would only go forwards and backwards once). I've got an online version now, but sadly the code seemed to break when I did so? I'm confused as to why as it's identical, but all it's doing now is closing the content from the other page. See below.

    http://goo.gl/RFBN2E

  • #8
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Add return false; at the end of the next and previous event handler to cancel the link default action of loading the url specified in the href. Do the same thing for ".load" to prevent adding the anchor tag # at the end of the URL.

    BTW, although HTML5 allows id attribute that starts with numbers, I recommend not doing that.

  • #9
    New Coder
    Join Date
    Mar 2014
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Adding the returns got me back to the point where it's counting just once. (see demo).

    If it's not recommended using numbers for id's is this the wrong way to go about doing this seeing as it's using them to count? I could use another method such as sunfighter suggested if it's a better alternative.

  • #10
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    You can still use numbers but prepend it with something like 'div' (or anything) to make it 'div1', 'div2', ....and so on. Then you just need to change the code like this:

    Code:
    $projects.load("projects.html #div" + id, function () {
    ...
    $projects.load("projects.html #div" + ($projects.data('id') + 1), function () {
    ...
    $projects.load("projects.html #div" + ($projects.data('id') - 1), function () {
    Btw, where's the demo? The original link has still the old code.

  • #11
    New Coder
    Join Date
    Mar 2014
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ahh course, got that altered. still no luck with the next / previous though unfortunately

    Javascript:
    Code:
    $(".load").on('click', function () {
    
        var $projects = $("#projects"),
    
            id = $(this).data('id');
    
        $projects.html("").data('id', id);
    
        $("#loading").show();
    
        $projects.load("projects.html #div" + id, function () {
    
            $("#loading").hide();
    
        }); return false
    });
    
    $(".next").on('click', function () {
    
        var $projects = $("#projects");
    
        $projects.load("projects.html #div" + ($projects.data('id') + 1), function () {
    
        }); return false
    
    });
    
    $(".previous").on('click', function () {
    
        var $projects = $("#projects");
    
        $projects.load("projects.html #div" + ($projects.data('id') - 1), function () {
    
        }); return false
    
    });
    Index.html
    Code:
    <a href="#"  data-id="1" class="load">
        <p>LINK 1</p>
    </a>
    ...
    Projects.html
    Code:
    <div id="div1">
     <h1>DIV 1</h1>
    </div>
    ...

  • #12
    New Coder
    Join Date
    Mar 2014
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Demo re-uploaded here


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •