Web Analytics Made Easy -
StatCounter MULTIPLE 'Scrollable Content Script II' iFrames in ONE Page! - CodingForum

Announcement

Collapse
No announcement yet.

MULTIPLE 'Scrollable Content Script II' iFrames in ONE Page!

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • MULTIPLE 'Scrollable Content Script II' iFrames in ONE Page!

    Ok ... I am trying to set up FOUR - at least maybe SIX - iFrames in ONE page - AND this script has user controls for scrolling up/down ...

    SO I need to know how to code the page to accommodate all of the scripts so each will function independently from the others, each will have its own up/down arrow controllers, and all will work in one page!

    Is this even possible and if so, how?

    I presume that I have to give each one a different name [1,2,3,4] but I don't know what to name and how to get the controllers to work for each of their corresponding iframes and ONLY their own!

    I've repeatedly tried to get them to work - but so far have failed miserably!

    PLEASE, I'm begging!! I have a client waiting for me to launch their site and I really need to get these scripts to play nice together yet independently of each other!

    Could speedracer or some other wonderful, kind, intelligent person on this forum please help me asap??

    p.s. I noted a response on another post to use a multiple scroller script - from www.dyn-web.com - but those cannot be manually scrolled which I would prefer. But if you tell me that I can't do what I've explained above, I suppose that would be a viable solution ...

  • #2
    P .S. In Case it Helps to Have a Visual ...

    In case it helps to SEE the page and what I'm trying to do, here's a cropped screenshot of how it's supposed to look ...

    Then I wanted each picture to be an iframe scroller, controlled by the up/down arrows next to it - so people can read a caption for the pic, then the caption for the next pic and then another pic at the bottom.

    The idea is the visitor can hit the down arrow for the image of their choice, and view the captions then view the contrasting picture - and if they choose move to another image and view the captions and contrasting picture.

    I hope this helps clarify what I'm trying to do!
    Attached Files

    Comment


    • #3
      the following script scrolls (not smoothly...) content inside the respective iframe
      Code:
      <html>
        <head>
      <script type="text/javascript">
      function gel(elName) {
      	if ( document.getElementById ) {
      		return document.getElementById(elName);
      	}
      	return false;
      }
      window.onload = function() {
      	gel("up1").onclick = function() {
      		moveUp("ifr1");
      	};
      	gel("down1").onclick = function() {
      		moveDown("ifr1");
      	};
      	gel("up2").onclick = function() {
      		moveUp("ifr2");
      	};
      	gel("down2").onclick = function() {
      		moveDown("ifr2");
      	};
      }
      function moveUp(which) {
      	window.frames[which].document.body.scrollTop -= 100;
      }
      function moveDown(which) {
      	window.frames[which].document.body.scrollTop += 100;
      }
      </script>
        </head>
        <body>
          <iframe name="ifr1" src="img.htm">
          </iframe>
          <a href="#" id="up1">[up]</a>
          <a href="#" id="down1">[down]</a>
          <iframe name="ifr2" src="img.htm">
          </iframe>
          <a href="#" id="up2">[up]</a>
          <a href="#" id="down2">[down]</a>
          <div id="test"></div>
        </body>
      </html>
      is this what ur looking for?

      a smooth scroll without using cumbersome iframes can be done...theres one from dynamicdrive here
      http://www.dynamicdrive.com/dynamicindex11/scrollc2.htm
      You never have to change anything you got up in the middle of the night to write. -- Saul Bellow

      Comment


      • #4
        Code:
        <script type="text/javascript">
        
        /******************************************
        * Scrollable content script II- © Dynamic Drive ([url]www.dynamicdrive.com[/url])
        * Visit [url]http://www.dynamicdrive.com/[/url] for full source code
        * This notice must stay intact for use
        ******************************************/
        
        iens6=document.all||document.getElementById
        ns4=document.layers
        
        //specify speed of scroll (greater=faster)
        var speed=5
        function getObj(objName) {
        	if ( document.getElementById ) {
        		return document.getElementById(objName);
        	}
        }
        function movedown(which){
        	target = getObj(which);
        	if ( parseInt(target.style.top)>=(target.content_height*(-1)+100)) {
        		target.style.top=parseInt(target.style.top)-speed+"px";
        	}
        	movedownvar=setTimeout("movedown('" + which + "')",20);
        }
        
        function moveup(which){
        	target = getObj(which);
        	if ( parseInt(target.style.top)<=0 ) {
        		target.style.top=parseInt(target.style.top)+speed+"px";
        	}
        	moveupvar=setTimeout("moveup('" + which + "')",20);
        
        }
        
        function getcontent_height(){
        	getObj("content1").content_height = getObj("content1").offsetHeight;
        	getObj("content2").content_height = getObj("content2").offsetHeight;
        }
        window.onload=getcontent_height
        
        </script>
        <!-- *********************************************************************** -->
        <div id="container1" style="position:relative;width:175px;height:160px;border:1px solid black;overflow:hidden">
        <div id="content1" style="position:absolute;width:170px;left:0;top:0">
        
        <!--INSERT CONTENT HERE-->
        <p><font size="2" face="Arial">-</font><font size="2" face="Arial"> DHTML is the
        combination of HTML, JavaScript, and CSS</font></p>
        <p><font size="2" face="Arial">- DOM stands for Document Object Model</font></p>
        <p><font size="2" face="Arial">-</font><font size="2" face="Arial"> DHTML allows
        content on a page to change on the fly, without reloading the page</font></p>
        <p><font size="2" face="Arial">- CSS allows for the separation between content
        definition and formatting</font></p>
        <p><font size="2" face="Arial">- CSS stands for Cascading style sheet</font></p>
        <p><font size="2" face="Arial">- </font><font size="2" face="Arial"><a href="http://www.dynamicdrive.com">Dynamic
        Drive</a> provides free, cut and paste DHTML scripts</font></p>
        <!--END CONTENT-->
        </div></div>
        
        <table width="175px"><td><p align="right">
        <a href="#" onMouseover="moveup('content1')" onMouseout="clearTimeout(moveupvar)"><img src="up.gif" border=0></a>  <a href="#" onMouseover="movedown('content1')" onMouseout="clearTimeout(movedownvar)"><img src="down.gif" border=0></a></p></td>
        </table>
        
        <!-- ********************************************************************** -->
        
        <div id="container2" style="position:relative;width:175px;height:160px;border:1px solid black;overflow:hidden">
        <div id="content2" style="position:absolute;width:170px;left:0;top:0">
        
        <!--INSERT CONTENT HERE-->
        <p><font size="2" face="Arial">-</font><font size="2" face="Arial"> DHTML is the
        combination of HTML, JavaScript, and CSS</font></p>
        <p><font size="2" face="Arial">- DOM stands for Document Object Model</font></p>
        <p><font size="2" face="Arial">-</font><font size="2" face="Arial"> DHTML allows
        content on a page to change on the fly, without reloading the page</font></p>
        <p><font size="2" face="Arial">- CSS allows for the separation between content
        definition and formatting</font></p>
        <p><font size="2" face="Arial">- CSS stands for Cascading style sheet</font></p>
        <p><font size="2" face="Arial">- </font><font size="2" face="Arial"><a href="http://www.dynamicdrive.com">Dynamic
        Drive</a> provides free, cut and paste DHTML scripts</font></p>
        <!--END CONTENT-->
        
        </div></div>
        
        <table width="175px"><td><p align="right">
        <a href="#" onMouseover="moveup('content2')" onMouseout="clearTimeout(moveupvar)"><img src="up.gif" border=0></a>  <a href="#" onMouseover="movedown('content2')" onMouseout="clearTimeout(movedownvar)"><img src="down.gif" border=0></a></p></td>
        </table>
        <!-- ********************************************************************** -->
        You never have to change anything you got up in the middle of the night to write. -- Saul Bellow

        Comment


        • #5
          Yes, This is THE Answer!!

          Thanks Shyam!! You not only revamped it so it works with multiple instances of the scroller, but you also simplified and reduced the size of the script!!

          Kudos to you on an EXCELLENT job well done!!

          Thanks SO much for your time, cleverness and expertise!

          Peace, love and rock 'n' roll! Shirley

          Comment

          Working...
          X