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 2 of 2
  1. #1
    New Coder
    Join Date
    Jul 2014
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts

    jquery: store urls into an array and open them using .click(); function with controls

    My Exlanation of what I am trying to do

    1 .create an empty class in HTML like so:
    Code:
    <div class="resources"></div>
    2. create an array of URLs in JAVASCRIPT/JQUERY and store them within .resources class

    3. create prev , random , next buttons in HTML

    4. random button when clicked opens random URL from array i.e.:
    Code:
    $(array[random]).click();
    5. next button when clicked opens next URL from array i.e.:
    Code:
    $(array[+1]).click();
    6. prev button when clicked opens previous URL from array i.e.:
    Code:
    $(array[-1]).click();
    MUSTS: urls must be opened with: click(); function: like so:
    Code:
    $(array[0]).click();
    fiddle to make it clearer: view view fiddle

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,570
    Thanks
    23
    Thanked 643 Times in 642 Posts
    I will give you a start and will show you how to continue if you have problems, but stop using fiddle. Post you code here using code tags.

    I don't know why you want the urls in a div. Making an array in JS is simple.

    ex:
    Code:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="UTF-8" />
    <title>Title of the document</title>
    </head>
    
    <body>
    <div id="links"></div>
    
    <script type="text/javascript">
    links = ["https://www.google.com/", "https://www.youtube.com/", "https://www.yahoo.com/"];
    document.getElementById("links").innerHTML = links[1];
    </script>
    </body>
    </html>
    Here is your getting array from a div. I also give the center button working, but not moving to the next array element. Study JS arrays here JavaScript Arrays

    Your code:
    Code:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="UTF-8" />
    <title>Title of the document</title>
    <style type="text/css">
    body {
    margin: 0;
    padding: 0;
    color: black;
    }
    
    .link {
        width: 180px;
        height: 20px;
        padding: 10px;
        background-color: black;
        cursor: pointer;
        text-align: center;
        margin-top: 5px;
    	color: #fff;
    }
    
    </style>
    </head>
    
    <body>
    
    <div class="resources">
        <a href="https://www.google.com/">f</a>
        <a href="https://www.youtube.com/"></a>
        <a href="https://www.yahoo.com/"></a>
        <a href="http://www.msn.com/"></a>
    </div>
    <div class="link open-prev">click previous link</div>
    <div class="link open-random-link">click random link</div>
    <div class="link open-next">click next link</div>
    <div id="tom">g</div>
    <script type='text/javascript' src='javascript/jquery.js'></script>
    <script type="text/javascript">
    	var links = $( '.resources a[href]' );
    	document.getElementById('tom').innerHTML = links[0]+"<br />"+links[1]+"<br />"+links[2]+"<br />"+links[3]+"<br />";
    
    	$('.open-random-link').click(function(){
    	   window.location.href= links[3];
    	});
    </script>
    </body>
    </html>
    Your way was good if you didn't have real links but had "url1" etc.
    Last edited by sunfighter; 09-02-2014 at 07:28 PM. Reason: I am tired of this site sending MY post to a content editor. Fix this!!
    Evolution - The non-random survival of random variants.

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


  •  

    Tags for this Thread

    Posting Permissions

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