|
JavaScript - Iframe Scrolling
Hi,
I know that iframes can be set to have scroll bars automatically apear when needed or put them there permanantly. However, I would like to have a Javascript slider on the topmost page scroll the iframe. It was possible to make a link on the topmost page change the content of the iframe by putting the iframe name in the link's target. Is this possible with a slider? I ask this because some of the content inside the iframe is on external pages so obviously we can't add the scroll bar there. Similar TutorialsHi, i've been searching this for a while now. I need to make a website for a school exercise and i'm looking for the next thing: i have 2 rows of 4 iframes on my site, which shows an image. u can combine these images by scrolling the iframes. but what i want is that it scrolls fixed. i have a preview of this right he http://toliademidov.ru/p/ i just need to know how to make it not scroll, but 'switch' to a next piece of image by scrolling. Thanks!! Mathieu Is there a way to resize an iframe dynamically so that you never get the scroll bar and essentially hide that there is an iframe? Better integration really. Basically I want to iframe a forum into my site so that the design down the sides and top which my friend does using iweb are not messed with. We have a central area which can be longer or shorter depending on the forum. Hi all, I hope you can help I have some code which: 1) Opens a URL (e.g. google.com) in a hidden iframe, then 2) Redirects the visitor to a different URL (e.g. yahoo.com) after it has loaded... This works exactly as I need. What I'd like to do is the following: 1) Open a URL (e.g. google.com) in a hidden iframe, then 2) Redirect the visitor to a different URL (e.g. yahoo.com) in a full-screen iframe 3) The address bar of the full-screen iframe should be my domain (obviously!) Here's what I have so far... Hidden iframe -> New URL Code: Code: <html>
<body>
<script type="text/javascript">
var page_body = document.getElementsByTagName('body');
var myframe = document.createElement('iframe');
var id = Math.random();
myframe.setAttribute('id', 'myFrame'+id);
myframe.src = 'http://google.com'; //First open Google in hidden iframe
myframe.setAttribute('frameborder', '0')
myframe.setAttribute('width', '0');
myframe.setAttribute('height', '0');
if (myframe.attachEvent)
{
myframe.attachEvent('onload', function()
{
top.location = 'http://yahoo.com'; //Once loaded redirect to Yahoo -- but the address bar shows yahoo.com -- I want the address bar to display mydomain.com/page.html
});
}
else if (myframe.addEventListener)
{
myframe.addEventListener('load', function()
{
top.location = ('http://yahoo.com');
}, false);
}
page_body[0].appendChild(myframe);
</script>
</body>
</html>
I have an example of some code which displays the full screen iframe, but my problem is... ...I can't figure out how to redirect to this after the hidden iframe has loaded Here's an example of how I want the redirect to display -- after the initial hidden iframe has loaded: Code: <html>
<head>
<script type="text/javascript">
function sendParams() {
document.body.style.overflow = "hidden";
}
</script>
</head>
<body>
<!--Open Yahoo.com in a full screen iframe, and disable extra scrollbar -->
<iframe height="100%" width="100%" frameBorder="no" onload="sendParams()" src="http://yahoo.com"></iframe>
</body>
</html>
I've been beating my head against the wall today trying to figure this out, and I'm fresh out of ideas. If you can help, you'll have some serious gratitude and good karma thrown your way! Best wishes, and thanks in advance, Paul Hi there everybody, I've got this problem which I can't solve myself... I've got a website which has 3 colums and is hosted on domain1.com. in the right column I've got an Iframe which loads content from domain2.com . this content are some textboxes and a datepicker tool. if I press the 'search'-button in this Iframe I would like to refresh the mainpage (from domain1.com) so that another Iframe appears in the middle column. in this column i would like to load a new form from domain2.com which contains the values that I've put in in the form from the right Iframe. Unfortunally I can't get this to work... Will somebody please help me? I have used iframes for my site and found various javascripts so when a person clicks on say the audio page he http://www.krillmeed.com/index.html it takes them to the audio page but will load it into the index.html page. The problem is, especially with search engines, to point to that page, this is what the URL looks like to send someone to that page: http://www.krillmeed.com/?frame=0&sr...m%2Faudio.html which is not very clean at all, this is the javascript that i found that at least works: Child iframe script: Code: <script type="text/javascript">
(function(){
var qstr = '?frame=0&src=' + encodeURIComponent(location.href),
lre = new RegExp('^' + location.protocol + '//' + location.hostname + '(()|(/)|(/index.html)|(/index.php))(()|(\\' + qstr + '))$');
if (!lre.test(parent.location.href)){
top.location.href = '/' + qstr;
}
})();
</script>
Parent iframe Script: Code: <script type="text/javascript">
(function(){
function getQval(n) {
if(typeof n !== 'string'){
return null;
}
var r = new RegExp('[?&;]' + n + '=([^&;#]*)'), m = location.search;
return (m = r.exec(m))? unescape(m[1]) : null;
}
var f = getQval('frame'), s = getQval('src');
if(f && frames[f] && s && s.indexOf(location.protocol + '//' + location.hostname + '/') === 0){
frames[f].location.href = s;
}
})();
</script>
Is there a "cleaner" way of doing this? This was an old code, i have yet to find a more modern one. Thank you in advance. Hi, Not sure if I worded that question right. I have a web page which will display another web page in an iframe. But the content inside the iframe may change while the user interacts with it so I need to be able to resize the iframe height from code on the page inside the iframe. Any tips on how I can do that? I am using php and javascript. Thanks. I have an iframe that is a specific height and width. I want to detect whenever the the iframe is no longer exactly the height i set it to. If a user has CSS turned off for example the iframe will be in default height and width. I want to detect that. This is how you'd normally do it but this only returns the original size (try with 'no style' in Firefox): Code: function getSize()
{
alert('height is now '+document.getElementById("Iframemain").height)
alert('height is now '+document.getElementById("Iframemain").width)
}
Is it possible? Hello to all and thanks in advance for my help. I know this has been posted in different places on the web but I have found no solid solution. Here is my problem: I have an iframe the loads up a page on a remote server (out of my hands) and when I send certain information to it, the page redirects my entire site to their 404 page. I need to prevent this from happening so I engaged in much research and found this... temporary fix: Code: <script>
// No redirection!
var prevent_bust = 0
window.onbeforeunload = function() { prevent_bust++ }
setInterval(function() {
if (prevent_bust > 0) {
prevent_bust -= 2
window.top.location = 'http://www.mysite.com/my404.html'
}
}, 1)
</script>
What this code does, is that every time the unload of a page happens, it will redirect me to my404.html and this does solve the problem of the iframe trying to redirect my entire site but anytime a user tried to go to a new website by typing it in the address bar, they are redirected to my404.html. Is there another solution for me so that the page within the iframe cannot redirect the parent page? Hello.... I've 2 iframes. And i want to change the css class of second iframe anchor tag from the first. Code: <div id="top-navigation" title="top-navi">
<ul><li id="homePageLink" class="first">
<a id="homePageTab" class="navigation-font" href="</a>
</li>
</ul>
</div>
In the above code how can i change the class="navigation-font" from the first iframe? Please help.... Hi I have a page with 3 iFrames, showing different content. iFrame1: Here is a navigation php page. Click on a menu item and it loads a php page in iFrame2 iFrame2: Here is a list of items from a database. iFrame3: I load 3 different php pages here. (A) is the main showing page. (B) and (C) is a record manipulation page, that does some editing in the database and then redirects to (A). When the (A) php page loads, it should reload iFrame2 I have tried to put something like: <body onLoad=parent.location.reload()> and put it on the (A) php page. This will reload the entire page, which works. However, it results in a loop of reloads, as the (A) iFrame file will load with the entire page reload... So, I was looking for the right code to put, like onLoad=iFrame2.location.reload() However, I can't seem to find the correct code, so I hope any of you can help me... Hi there, I was wondering of there is any way to have a browser window scroll down when your mouse reaches the bottom of the page? Any help would be much appreciated, Thanks Hello. I am in the process of making a basic game board using javascript. Just a table with a bunch of cells that are blank, soon to be colored. However, what I want to do is create my board and be able to scroll depending on where the mouse cursor is. For example, if it is 100px away from the right side of the screen, then move the board to the right. I am trying to use the information from: here I can't seem to get it to work. I have checked firebug, set and checked breakpoints, but it never moves and I am not sure why. Could anyone please help? Thank you. Heres my code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style>
#land {
table-layout: fixed;
width: 2500px;
height: 2500px;
}
#land td {
width: 25px;
height: 25px;
border: 1px solid black;
empty-cells:show;
}
#land tr {
height: 25px;
}
</style>
<script type="text/javascript" src="World/world.js"></script>
<script type="text/javascript" src="mapscrolling.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body id="mainBody">
<div id="mainDiv">
</div>
<script type="text/javascript" >
new CursorDivScroll( 'mainDiv', 20, 20 ); // HERES THE REFERENCE!
var i, j;
body = document.getElementById("mainDiv");
land = document.createElement("table");
land.setAttribute("id", "land");
land.setAttribute("cellspacing", "0");
land.style.border = "1";
for(i = 0; i < 100; ++i)
{
var row = document.createElement("tr");
for(j = 0; j < 100; ++j)
{
var cell = document.createElement("td");
cell.appendChild(document.createElement("div")) // tried &nsbd; but didn't work
row.appendChild(cell);
}
land.appendChild(row);
}
body.appendChild(land);
</script>
</body>
</html>
Hi, I'm looking to create a div which contains a list of news items which can be vertically scrolled through by hovering near the top or the bottom of the div. It will then automatically start scrolling through the content. The nearer to the bottom of the div they position their mouse, the faster the scrolling is. Is this something which is possible, and if so how can I do this? Thanks Curt +++ is it possible to scroll / jump to say, 10px above a div? i tried adding padding, but it doesn't work. also, when I use <a href="#xxxx">, is it possible to prevent the browser from adding #xxxx to the url in the browser? thanks!!! +++ I am looking to have a panoramic image used as the background webpage scroll automatically while the page is open. I do not want the user to have to scroll the image or hover over a div. Is there a way to accomplish this in JS?
I am creating a testimonials page on a customers site, and I am wanting it to be like a scrolling content. I have the border created, and I want to have text inside the border that will scroll sideways displaying a new one every 10 seconds or so, but having the ability to move between the content. Can anyone tell me what sort of script I should use? I've seen something like it before, but I've had a mind blank. I know it's some kind of Java scripting. Any ideas? Thanks in advance This is what i need to do: I have a single <DIV> </DIV> for rendering dynamic HTML content. it already has a scrollbar in it when it overflows with text. I want to be able to prevent the user from selecting text on the DIV, and at the same time, when they click on the DIV and drag the mouse up or down , the HTML document will be scrolled proportionally to the dragging. i would also like to Hide the Scrollbar (not disable it). any suggestions? Hi, I have the following scrolling table where I do not want the table headers to scroll. I want only the data inside <td></td> to scroll. For some reason that is not happening. Can someone help ? Really appreciate that. Regards, sbguy [CODE] <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Page</title> <script type="text/javascript"> var div, scrollTop, scrollID, direction, imgDirection, scrollID1; window.onload = function() { div1 = document.getElementById("div1"); scrollTop = div1.scrollTop; }; function scrollOnImage() { if (imgDirection ==1 ) { if (scrollTop != 0) scrollTop--; } else if (imgDirection == 2) { if (scrollTop != (div1.scrollHeight - 300)) scrollTop++; } div1.scrollTop = scrollTop; scrollID1 = setTimeout("scrollOnImage()", 10); } </script> </head> <body> <br /> <div style="border: solid 1px red; float: left; height:300px; max-height:300px; width:200px; overflow: hidden;" > <table> <tr> <th style="height:20px;"><input type="image" src="images/LGbtn_off.png" alt="img1" onMouseOut="clearTimeout(scrollID1)" onMouseOver="imgDirection=1; scrollOnImage()" /></th> <th>1A</th> <th ><input type="image" src="images/RRbtn_off.png" alt="img2" onMouseOut="clearTimeout(scrollID1)" onMouseOver="imgDirection=2; scrollOnImage()" /></th> </tr> <tr> <td colspan="3" style="height:280px; max-height:280px;"> <div id="div1"> <ul id="ulR_1A" class="ulli"> <li><span class="li_head">PCode:</span> 1234</li> <li><span class="li_head">Product:</span> GX12x24 Medium Large 80</li> <li><span class="li_head">Qty:</span> 256</li> <li><span class="li_head">Batch No:</span> 01AC950</li> <li><span class="li_head">Manf Date:</span> 11/08/2012</li> <li><span class="li_head">SS Date:</span>11/07/2013</li> <li><span class="li_head">Total Pals:</span> 60</li> <li><span class="li_head">Pals Occupied:</span> 59</li> <li><span class="li_head">Bin Occupancy:</span> 89%</li> <li><span class="li_head">Trn No:</span> 1234567890</li> <li><span class="li_head">Bin Status:</span> Part Full</li> </ul> <ul id="ulR_1A" class="ulli"> <li><span class="li_head">PCode:</span> 1235</li> <li><span class="li_head">Product:</span> GX12x24 Medium Large 80</li> <li><span class="li_head">Qty:</span> 256</li> <li><span class="li_head">Batch No:</span> 01AC950</li> <li><span class="li_head">Manf Date:</span> 11/08/2012</li> <li><span class="li_head">SS Date:</span>11/07/2013</li> <li><span class="li_head">Total Pals:</span> 60</li> <li><span class="li_head">Pals Occupied:</span> 59</li> <li><span class="li_head">Bin Occupancy:</span> 89%</li> <li><span class="li_head">Trn No:</span> 1234567890</li> <li><span class="li_head">Bin Status:</span> Part Full</li> </ul> <ul id="ulR_1A" class="ulli"> <li><span class="li_head">PCode:</span> 1236</li> <li><span class="li_head">Product:</span> GX12x24 Medium Large 80</li> <li><span class="li_head">Qty:</span> 256</li> <li><span class="li_head">Batch No:</span> 01AC950</li> <li><span class="li_head">Manf Date:</span> 11/08/2012</li> <li><span class="li_head">SS Date:</span>11/07/2013</li> <li><span class="li_head">Total Pals:</span> 60</li> <li><span class="li_head">Pals Occupied:</span> 59</li> <li><span class="li_head">Bin Occupancy:</span> 89%</li> <li><span class="li_head">Trn No:</span> 1234567890</li> <li><span class="li_head">Bin Status:</span> Part Full</li> </ul> </div> </td> </tr> </table> </div> <div style="border: solid 1px red; float: left"> <img src="http://www.easyvoyage.co.uk/base/imgs/default/esv/meh/upDownArrow.png" onMouseOut="clearTimeout(scrollID1)" onMouseOver="imgDirection=1; scrollOnImage()" /><br /><br /> <img src="http://www.easyvoyage.co.uk/base/imgs/default/esv/meh/downUpArrow.png" onMouseOut="clearTimeout(scrollID1)" onMouseOver="imgDirection=2; scrollOnImage()" /> </div> </body> </html> [CODE] hey guys i have graphic on the right side of the screen that is not in view and i am scrolling it to the left. Is there away to remove the bottom scrollbar permanently through using a mask or something. if i have an item scrolling from the left the scroll bar does not show, but on the right it does. an help be appreciated. I need a marquee code that displays images in a continuous vertical cycle.
|
|||||||