|
HTML - Simple Parent Scroll
Hello,
How can I make my parent-scrollbar scroll the iFrame? I have a page with an Iframe in it, and I don't want the iFrame to have a scrollbar, but I want to be able to scroll the iFrame using the scrollbar of the window/parent! HOW? I have already set the HTML overflow-y to scroll, so the scrollbar is always showing. Now I only need it to control the iFrame. Please help! Similar TutorialsHello dear forum, This is a big one, and I need some serious help. Have been trying to figure this one by myself, but I just couldn't, so I hope that you can help! Let me explain: I have a page with a Header/Menu which is a simple table, and an Iframe (frmMain) with some content. Here's what I need to do: onLoad & onResize the frmMain should get re-sized The main scrollbar on the page/window should scroll the frmMain content Re-size: The header should always stay 45px in height, but the frmMain should re-size to fill out the page vertically. Scroll: The scroll-bar on the main window/page should scroll the content of the frmMain of necessary. I have made an illustration to try explain my problem: how do you make an inline fame that does not have scroll bars but resizes the parent page to allow the whole child page to fit in the parent I have this 2 scripts: 1. script Allowed me to make URL switching (new page is opened after 20 sec) 2. script Allowed me a vertical scroll My Question: HOW TO MAKE THIS: I WANT EACH SITE TO OPEN AUTOMATICALLY LIKE IN 1. SCRIPT AND TO BEGIN TO SCROLL AUTOMATICALLY AFTER OPENING DURING 20 SEC... THAN SWITCHING TO A NEW PAGE, SCROLLING VERTICALY DURING 20 SECONDS... AND SO FOR EACH SWITCHING WEBPAGE... 1. script: <html> <head> <title>URL Switcher</title> <script language="JavaScript" src="url_switcher.js"> </script> <script language="JavaScript"> var i = 0; var url_array = new Array(); url_array[0] = "http://www.google.com"; url_array[1] = "http://www.codingforums.com"; url_array[2] = "http://www.ebay.com"; url_array[3] = "http://wm2.uvic.ca"; function changeURL(ms) { document.frames['my_frame'].location.replace(url_array[i]); i = (i+1)%url_array.length; setTimeout("changeURL("+ms+")", ms); } </script> </head> <body style="margin:0px; overflow-y:hidden" onLoad="changeURL(20000);"> <iframe name="my_frame" width="100%" height="100%" border="0" frameborder="0"></iframe> </body> </html> 2. script: <!-- Vertical Scroll Use this script to automatically scroll the web page when the user pushes a button --> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function CoffeeScroll() { for (I=1; I<=750; I++){ parent.scroll(1,I) } } // End --> </SCRIPT> <!-- Put this into the BODY of your webpage --> <BODY><CENTER><FORM><input type=button value="Scroll Page" onClick="CoffeeScroll()"></FORM></CENTER> THANK YOU VERY MUCH FOR YOUR HELP Can anyone help me out? I've set up a test site for a project where I have a scrollable table within an iFrame. Techincally, its an iFrame within an iFrame which gets you to a scrollable table I also added an auto-scroll with anchor-links. Everything finally works, but I really want to remove the horizontal-scroll bar that shows up, while keeping the vertical-scroll bar. (Upon testing, I found without the vertical-scroll bar, the anchor-links and auto-scroll don't work correctly.) here's the link to the test site: http://www.thegrandamerican.com/ here's the line of code I think is the correct place to make corrections: <iframe id="myiframe" name="myiframe" src="oprah june 09_news.htm" width="900" height="475" scrolling="yes" overflow-y: scroll></iframe> The hierarchy works as follows: index.htm > spotlight_news.htm > oprah june 09_news.htm The reason for all the iframes is to have elements on the higher pages that will stay in place, such as a music player and dynamic menu bar. other notes and associated files (for the auto scroll) a smooth-src-comments.js smooth.pack.js Thanks. - J Ive been looking EVERYWHERE for a site with a code for a scroll box with a trasparent scroll bar, Ive seen the code where I can edit the size of the box as well as the color of the box itself and I know how to do THAT. how do I make it where the code displays the scroll code as well so I can fully customize it? it seems that its always hidden.. I'm re-styling a website I've build for people at work. It contains a header (or title) DIV, a menu DIV and a so-called InfoCell DIV (which is nothing more then a DIV containing an iframe that shows the requested page from the menu). The problem is that the iframe always resizes to a minimum size and can not show the requested page entirely. (see here) I want the iframe to resize to the InfoCell DIV which will in turn resize to the browser's viewing window (like the rest of the page does). (remark: the office uses IE6 atm cause upgrading to 8 or using a different browser appears to be a problem for some web-applications used at the office) I've tried JavaScripts, I've tryed adjusting CSS settings, but I can't get the iframe to resize itself to the size of its parent DIV. I can make the iframe fit the full size of the InfoCell DIV when I use fixed width and height in the css. But this cancels the ability of resizing the browser window to the user's liking. The parent DIV does resize when I resize the browser window, as do the menu and title DIVs. The XHTML code: Code: <div class="title"> Servicedesk ICT Web Application Portal </div> <div class="menu"> ...code for menu items... </div ... <div class="infocell"> <iframe src="http://rsdweb.info.uwv.nl/servicedeskrsdweb/" name="info" id="infoframe" /> </div> the CSS code: Code: div.infocell {
margin:4px;
padding:2px;
border:1px solid #e0e0e0;
background:#c3c3c3;
overflow:auto;
}
div.infocell iframe {
margin:0;
border:none;
}
Any tips/tricks on how to make the iframe always fit 100% in its parent DIV? (so resizing the browser window will resize the DIV and the Iframe in turn). thnx The following code works fine in any version of Internet Explorer, but sadly not Firefox. SetPrompt is just a javascript method from my frame called fraMap that sets the text of a textbox. Can someone please tell me how to accomplish this in Firefox? I have tried to search the forums and used examples but nothing I have found has worked, thanks for any advice! Code: parent.fraMap.SetPrompt("Click Two Diagonal Points To Set Zoom Area");
EDIT: Sorry, found the answer. No need to give me a solution. I've decided to create a photo album in HTML (and Flash and CSS) using a nifty little Flash thing called SimpleViewer. However, I want multiple galleries, each within their own folder within the main photo gallery parent folder. How can I link something from one HTML file in a gallery's folder to the parent folder and then into another HTML file in another gallery's folder? Or if there's a way, directly to the other gallery's HTML file? Note I'm keeping this gallery offline for now, I'm only using it to show family and friends and for myself as it's much less cumbersome than using software or the standard Windows XP folder structure. Sorry if this is confusing, please say so if it is. Thanks in advance for all help, it's really appreciated. I have semi-protected my website (nothing important) by having a frameset, and a login page for the first visible page. However, if I'm somewhere in the website and I refresh the page, the browser refreshes the entire frameset and I'm back to the original login page (which is flash). Is there any way to redirect the refresh, so that once I'm in the website, only the frame with content refreshes? The frameset is *,100%, so I only want the 100% to refresh, see... Also, I'm working with XHTML for the first time, and I don't know much about it. Can anyone validate/verify this source code? Thanks! This is the entire frameset code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <!-- InstanceBegin template="/Templates/template2.dwt" codeOutsideHTMLIsLocked="false" --> <head> <meta http-equiv="Content-Type" content= "text/html; charset=us-ascii" /> <title>xxx</title> </head> <frameset rows="*,100%"> <frame name="hidden" src="xxx.html" scrolling="no" frameborder="0" /> <frame name="visible" src="password.html" scrolling="auto" frameborder="0" /> <noframes><body /></noframes> </frameset> </html> can you detect if a page is a child? (in an iframe) if (page is a child) { parent.remoteClick('myButton'); } else { } thanks. or the opposite i suppose... if (page is a parent) { } else { parent.remoteClick('myButton'); } ok.. well.. im making a control panel.. that updates the parent window... this is the code in the parent window to pop up the child: <img src="g2cpanel.jpg" onClick="window.open ('cpanel.html', 'newWin', 'width=255, height=255')"> and this is the whole page of my child window: <html> <head> <title>boyo productions::control panel</title> <style type="text/css"> body {background-color: black; text-color: yellow; } .maintitle {background-color: yellow; text-align: center; }</style> <script language="JavaScript"> function updateParent(newURL){ opener.document.location = new URL } </script> </head> <body><center> <img src="cpanel.jpg"><br> <div class="maintitle">welcome to the control panel!</div> <a href="javascript: updateParent('index.html')">**home**</a><br><br> <a href="javascript: updateParent('codes.html')">**get the codes!**</a><br><br> <a href="javascript: updateParent('forum.html')">**forum(coming soon)**</a><br><br> <div class="maintitle">© boyo productions 2007-2008</div> </body> </html> my problem is that i can get the control panel to pop up once the image is clicked on, but, in that child window of a control panel, the links wont update the parent window.. whats wrong with my code? plz help me.. ty all Hi, I have a div element, that will contain various debug/warning messages from Javascript. If I set it's height to 100%, so to fill the parent element, it overlaps the parent element. How can I automatically set the height, without manually setting the height in pixels? Many thanks for any suggestions. Regards Aaron HTML Code: <div style="border-style: solid; border-width: 3px; margin: 0px; padding: 0px; z-index: 1000; position: fixed; top: 252px; left: 582px; width: 494px; height: 202px; background-color: white; display: block;"> <h1 style="width: 100%; height: 20px; font-size: 12px; display: block; border-bottom-width: 2px; border-bottom-style: solid; vertical-align: middle;"><img src="https://127.0.0.1/beer2/i/clear.png" style="cursor: pointer;" alt="clear"/><img src="https://127.0.0.1/beer2/i/min.png" style="cursor: pointer;" alt="Minimise"/> Debug Window</h1> <div style="overflow: scroll; width: 100%; height: 100%; font-size: 12px; position: static;"> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> </div> </div> I am having issues with a flash intro and decided to try and just place it on a separate page when visiting my father's website - www.raymorteam.com. So I took all of the code currently on his homepage and created a copy of the page - http://www.raymorteam.com/files/35241/Main_Page.html However, I only want the copy page to show www.raymorteam.com in the addressbar. How do I go about doing this? I've seen it at www.ch131.com. Take a look at that page - any link you click will only show the parent web address in the address bar. I want my father's page to do that for this specific page. Thanks. Ok I have a dive that scrolls and when i scroll it, it goes behind another div, which is what i want , but the problem is i don't want it to apear on the other side of the div but i still want to see the background. so i was wondering if there is a way i can make the scrolling div go behind another div that is invisible or something and make the scrolling div go invisible at this section so you can still see the rest of the scrolling div, but not the part behind the invisble div. if someone knows how to do this or a more simple way, that does not involve changing the size of the scrolling div as i want the scrollbar to be the height of the page. Im developing a homepage, www.hallevikslagret.se My problem is, when your using a small resolution or if you make the browserwindow to small the menu at the top disapears. Ive tried many different ways to show a scroll but i cant solve it. How do i get a scroll when the content gets to big. I know that im not using correct XHTML-language on the page. I will get to that as soon as possible when i solve this problem. Thank you for your time! Best Regards Jens Trying to create a simple scrolling for fitting my template. sample: http://www.hottunaint.com/press1.html template sample to fit in the main panel (image size) http://www.hottunaint.com/product.html thanks Hello. I'm currently trying to help my friend develop his website. He wants to put a banner that's linked back to his site, and then underneath a scroll box which contains the code to put the banner in anywhere. The problem is, whenever I try, and I put the code in the scroll box, it shows the banner, instead of the actual code. How can I stop the banner from showing up? Thank you I had the problem of my page shifting to the right whenever it was too long for the window to allow a scroll bar so I added this overflow-y:scroll; to the body information in the css sheet. It works fine in most browsers but I've noticed that with IE7 the scroll appears in the top part of the margin and not on the browser side. It just doesn't look right. Please advise. Here's the link. http://www.yotti.de/indextemp.html I have looked through thousands of templates and this is the only one I like. The only problem is I hate the orange thing in the middle keeps moving up and down as I scroll the page. Can somebody download a copy and tell me how to make the orange thing in the middle static so it never scrolls, thanks. http://www.free-css.com/free-css-tem....php#bookmarks |
|||||||