46 users online (0 members and 46 guests)  

Thread: Loop Linking?


  Results 1 to 4 of 4

Related

  1. SSI nav banners and linking    Forum: HTML Forum
    Replies: 2
  2. Linking...    Forum: HTML Forum
    Replies: 2
  3. Replies: 8
  4. php loop    Forum: PHP Forum
    Replies: 0
  5. Linking Passwords    Forum: HTML Forum
    Replies: 1
  1. #1
    cokesodanotd's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Apr 2004
    Posts
    56

    Loop Linking?

    Hi all, I was curious if this is possible

    I've got this idea for linking, it involves two buttons, and 8 actual links, alright here goes

    I was thinking about some sort of design that would make it possible to use up and down buttons to go from one window to another

    ________________________
    |....................................|
    |......alright, pretend this....|
    |........Is an I-frame...........|
    |______________________ |
    ....................................__...__
    now, i have link over here |^| |\/|

    **"...."s are used for spacing**

    alright, the I-frame starts with a certain window, now i want the links to basically be like scrolling between certain windows. the ^ button goes up a list of links and the \/ goes down and it consists of a list of links like that will open in the iframe in the order. so if i labeles the links 1.2.3.4.5.6.7 and 8 it would automatically start on 1 when the page loads, then if you select the \/ arrow, it will open 8 in the frame, if you hit it again, it will go to 7, then if you hit the ^ arrow it will go back to 8....so is this possible? or am i being insane again :-D

    Hope i was clear! and thank you for atleast considering to read this stupid thread by the one and only, ME!

  2. #2
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    Hi,

    I'm thinking JavaScript is the easiest way to do this.

    My thought is the buttons don't change, but they look inside the document in the iframe to see which page to load. Like

    Heres an introduction to accessing iframes with JavaScript

    http://www.quirksmode.org/js/iframe.html

    SHout if you need more.
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?

  3. #3
    cokesodanotd's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Apr 2004
    Posts
    56
    alright thanks, and something tells me i should start learning java script

  4. #4
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732
    Hi there cokesodanotd,

    although not exactly the same as your iframe, you may find this of interest.
    Basically the links scroll continuously until mouseover.

    iframe.html
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/1999/REC-html401-19991224">
    <html>
    <head>
    <title>iframe scroller</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    
    
    
    <style type="text/css">
    /*<![CDATA[*/
    
    body {
         background: #806666;
         margin-top:50px;
     }
    
    #container {
         border:inset 8px #907777;
         width:442px;
         margin:auto;
     }
    #ifrm {
        width: 440px;
        height: 255px;  
     }
    
    /*//]]>*/
    </style>
    
    </head>
    <body>
    
    <div id="container">
    <iframe id="ifrm"src="scrolling_div.html" scrolling="auto"></iframe>
    </div>
    
    </body>
    </html>
    scrolling_div.html
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>scrolling div</title>
    
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    
    <style type="text/css">
    /*<![CDATA[*/
    
    a {
         color:#5d4d4d;
         font-weight:bold;
     }
    
    a:hover {
         color:#ff0000;
     }
    
    li {
         color:#5d4d4d;
     }
    
     body {
         background: #d0c5c5;
         margin:0px;
         padding:0px;
     }
    
    #container, #container1 {
         width:418px;      
         position:absolute;
         background:#fefefe;
         font-family:arial;
         font-size:16px;    
     }
    
    #starter {
         position:absolute;
         z-index:2;
         width:418px;
         height:3000px;  
         background:#d0c5c5;  
    } 
    
    p { 
         font-family:arial;
         font-size:18px;
         color:#5d4d4d;
         text-align:center;
         margin:100px 30px 30px 20px;
       }
    
    /*//]]>*/
    </style>
    
    <script type="text/javascript">
    //<![CDATA[
    
      var conh;      /*container height*/
      var scroller;  
      var i = 0;
      var j=0;
      var speed = 1;
    function delayStart() {
    i++
    if(i>4) {
    i=0;
    findHeight();
    }
    else {
         setTimeout('delayStart()',1000);
     }
    }
    function findHeight() {
      
         conh=document.getElementById("container").offsetHeight;
         document.getElementById('starter').style.display="none";
         divScroll();
     }
    
    function divScroll() {   
       
          document.getElementById("container").style.height=conh+"px";
          document.getElementById("container1").style.height=conh+"px";
          document.getElementById("container").style.top=i+"px";
          document.getElementById("container1").style.top=conh+j+"px";
      i--;
      j--;
    
    if(i < - conh) {
      i = conh;
     }
    
    if(j <- conh*2) {
      j = 0;
     }
    
    scroller=setTimeout("divScroll()",speed); 
     }
    
    function stopScroll() {
        clearTimeout(scroller);
     }
    
    function startScroll() { 
         divScroll();  
     }
    
    
    //]]>
    </script>
    
    </head>
    <body onload="delayStart()">
    
    <div id="starter">
    <p>Please be patient<br />this page will open after about five seconds</p>
    </div>
    
    <div id = "container" onmouseover = "stopScroll();return false" onmouseout = "startScroll();return false">
    <script type="text/javascript" src="http://jade.mcli.dist.maricopa.edu/feed/feed2js.php?src=http%3A%2F%2Fnews.com.com%2F2547-1_3-0-20.xml&chan=n&num=0&desc=1&date=n&targ=y"></script>
    </div>
    
    <div id = "container1" onmouseover = "stopScroll();return false" onmouseout = "startScroll();return false">
    <script type="text/javascript" src="http://jade.mcli.dist.maricopa.edu/feed/feed2js.php?src=http%3A%2F%2Fnews.com.com%2F2547-1_3-0-20.xml&chan=n&num=0&desc=1&date=n&targ=y"></script>
    </div>
    
    
    
    </body>
    </html>


    coothead
    Last edited by coothead; 01-22-2005 at 04:53 PM.



Tags for this Thread