FrankLodge
asked on
Top of page scrolls up when iframe opens
Situation: Page shows a large world map. When user clicks name of country, text appears in small iframe.
Problem: Map scrolls up until iframe appears at top of window. Do not want map to move.
Help wanted: Code examples that show how to keep map from scrolling up when iframe is selected. Solution can use iframe or replace iframe with more compliant "object".
Clues that may help:
--The iframe css includes position:fixed and top:100px.
--The iframe goes to a bookmark anchor [this works correctly]
--The scrolling problem does not happen if vertical scroll bar is not present
--On some browsers the map scrolls up each time a new file is sent to iframe. The iframe always moves to top.
Problem: Map scrolls up until iframe appears at top of window. Do not want map to move.
Help wanted: Code examples that show how to keep map from scrolling up when iframe is selected. Solution can use iframe or replace iframe with more compliant "object".
Clues that may help:
--The iframe css includes position:fixed and top:100px.
--The iframe goes to a bookmark anchor [this works correctly]
--The scrolling problem does not happen if vertical scroll bar is not present
--On some browsers the map scrolls up each time a new file is sent to iframe. The iframe always moves to top.
<div id "container">
<div id=mapdiv>
>>>shows a world map
</div>
<div id="historyFrame>
<iframe name="historyFrame" width= . . .></iframe>
</div>
<div id="apDivRome"><a href="TEXT/Rome.html#550" target="historyFrame">Rome</a></div>
<!--end #container></div>
ASKER
I am trying to create a link to a live page for you. All of the files are at atlasofworldhistory.com/wo
I appreciate your help and will let you know when the live page is working.
I appreciate your help and will let you know when the live page is working.
ASKER
Go to www.atlasofworldhistory.com/MUSEUM/ENGLISH/home1280.html.
This page is 1260px wide, so best to view on 1280 or larger monitor.
The best solution I could find in the answers section suggested <a name="top"> at top of parent and onLoad="window.parent.scro
Thanks for helping.
This page is 1260px wide, so best to view on 1280 or larger monitor.
The best solution I could find in the answers section suggested <a name="top"> at top of parent and onLoad="window.parent.scro
Thanks for helping.
ASKER
Please see previous comment that contains the live page. Test the two links: Greece and Egypt.
>> Map scrolls up until iframe appears at top of window. Do not want map to move.
The reason this happens is the the iframe the target of the links. So when you click a link that moves the target to the historydiv, the page will shift to make sure the historydiv is fully displayed (it won't render "offscreen").
There isn't a real good solution that involves a placed object because making it the target will always shift the view. Your choices are:
1) Use javascript to change the value of the iframe without making it the target
2) Use a CSS "overlay" to pop a new layer when the clicks happen to show the information
3) Use a CSS "tooltip" (included in Spry) to create a hovering region around the links
The reason this happens is the the iframe the target of the links. So when you click a link that moves the target to the historydiv, the page will shift to make sure the historydiv is fully displayed (it won't render "offscreen").
There isn't a real good solution that involves a placed object because making it the target will always shift the view. Your choices are:
1) Use javascript to change the value of the iframe without making it the target
2) Use a CSS "overlay" to pop a new layer when the clicks happen to show the information
3) Use a CSS "tooltip" (included in Spry) to create a hovering region around the links
ASKER
I am a real beginner. Unless you can offer a code snippet (not necessarily functional) of how to pass the href to the javascript function, I probably won't be able to figure out solution one. If you can write suggest what the function call looks like I might have a better chance.
Solution 2 looks much better for me. I've found some examples of CSS overlay that I can modify. I will work tomorrow and will try to test this approach. Then I will go back and rate the comment.
Thank you.
Solution 2 looks much better for me. I've found some examples of CSS overlay that I can modify. I will work tomorrow and will try to test this approach. Then I will go back and rate the comment.
Thank you.
If you want to go with an overlay then I suggest looking into lightbox.js or lightview.js
This method is slight better than an iframe because some paranoid security software will block iframes even if they are running on the same domain.
This method is slight better than an iframe because some paranoid security software will block iframes even if they are running on the same domain.
ASKER
Many, many hours later!
Created overlay that seems to work, but I haven't been able to figure out how to put the country history text inside the overlay. Everything is carefully documented in the file. It should take you only seconds to show me how to link to the content.
Go to www.atlasofworldhistory.org and click "English" to get to updated map page.
Created overlay that seems to work, but I haven't been able to figure out how to put the country history text inside the overlay. Everything is carefully documented in the file. It should take you only seconds to show me how to link to the content.
Go to www.atlasofworldhistory.org and click "English" to get to updated map page.
That's not the script I would have chosen for you. Apologies. This is:
http://www.nickstakenburg.com/projects/lightview/
The problem with the script you are using is that you would have to load all of the content into different divs like this one:
<div id="light" class="white_content">Text
And change the ID to something unique for each one and change the javascript to call the correct div each time. That's a lot of edits and really bloats your page code, especially given how much content will be in there.
Compare that to what I did with your existing content here:
http://www.jasonsinternet.net/home1280.html
http://www.nickstakenburg.com/projects/lightview/
The problem with the script you are using is that you would have to load all of the content into different divs like this one:
<div id="light" class="white_content">Text
And change the ID to something unique for each one and change the javascript to call the correct div each time. That's a lot of edits and really bloats your page code, especially given how much content will be in there.
Compare that to what I did with your existing content here:
http://www.jasonsinternet.net/home1280.html
ASKER
Working on this. May not get back to you until tomorrow. Thanks for the code example.
Take your time, I'm not going anywhere.
ASKER
I am ready to "Accept as Solution" but this is the first time I've used this site and wanted to be sure that I would be able to comment.
You provided a good solution that is backed by third-party code that I can rely on to keep up with industry advances. I plan to use it to display images as long as the images can be called from the history text which will be in the small frame that I am still seeking.
I noticed that the lightview page failed if I tried to go to an anchor "Egypt.html#b2315". I really need to use bookmarks. This will not be an issue for images.
If you communicate with Nick Statenberg and Lightview, please ask them to add to their installation instructions the requirement that the images folder must be placed in a separate folder"../images/lightview
Back to my original need. Perhaps if I write a specification, you will suggest a "question" that can frame a new "question".
SPECIFICATION:
--Need to place .html text file in an absolutely positioned area over the page. [The primary view is a world map. The text appears in a location where the map doesn't normally change.]
--No opaque overlay must appear. [The user is reading history text and will want to refer to the world map to see where events may be happening.]
--The function must recognize anchors and move the text to a bookmark [Only a small amount of text is shown, but this is pertinent to the year of the map.]
--A vertical scroll bar will allow users to access overflow text.
--It is not necessary to close the text area. Users will typically select three or four links that will appear in that area and then move to a new page.
--When a new page is opened, it is desirable, but not required, that the area behind the text area be visible until the user opens the text area for the first time.
--The text area will contain links to images. These images will be displayed using a lightview overlay. When the overlay is closed, the user must return to the same map and same text area and be able to select another image from another link in the text area.
--Since iframes are deprecated, perhaps another solution will prove more durable.
--Code examples or snippets showing the solution will be very helpful because the developed is a novice.
--Developer is using Dreamweaver (CS4), css, and javascript.
Jason: Thank you very much for your help. You have given me a valuable solution that will prove useful. I still need help with the "specification" problem above. Perhaps you might be willing to suggest a "question" that frames the specification. When I ask the new "question" I'll be more likely to get exactly what I need. I will submit this and, a few minutes later, press the "Accept as solution" button which appears in the previous message.
Or you may be kind enough to let me know that this type of request is too specific for experts exchange. Frank Lodge
You provided a good solution that is backed by third-party code that I can rely on to keep up with industry advances. I plan to use it to display images as long as the images can be called from the history text which will be in the small frame that I am still seeking.
I noticed that the lightview page failed if I tried to go to an anchor "Egypt.html#b2315". I really need to use bookmarks. This will not be an issue for images.
If you communicate with Nick Statenberg and Lightview, please ask them to add to their installation instructions the requirement that the images folder must be placed in a separate folder"../images/lightview
Back to my original need. Perhaps if I write a specification, you will suggest a "question" that can frame a new "question".
SPECIFICATION:
--Need to place .html text file in an absolutely positioned area over the page. [The primary view is a world map. The text appears in a location where the map doesn't normally change.]
--No opaque overlay must appear. [The user is reading history text and will want to refer to the world map to see where events may be happening.]
--The function must recognize anchors and move the text to a bookmark [Only a small amount of text is shown, but this is pertinent to the year of the map.]
--A vertical scroll bar will allow users to access overflow text.
--It is not necessary to close the text area. Users will typically select three or four links that will appear in that area and then move to a new page.
--When a new page is opened, it is desirable, but not required, that the area behind the text area be visible until the user opens the text area for the first time.
--The text area will contain links to images. These images will be displayed using a lightview overlay. When the overlay is closed, the user must return to the same map and same text area and be able to select another image from another link in the text area.
--Since iframes are deprecated, perhaps another solution will prove more durable.
--Code examples or snippets showing the solution will be very helpful because the developed is a novice.
--Developer is using Dreamweaver (CS4), css, and javascript.
Jason: Thank you very much for your help. You have given me a valuable solution that will prove useful. I still need help with the "specification" problem above. Perhaps you might be willing to suggest a "question" that frames the specification. When I ask the new "question" I'll be more likely to get exactly what I need. I will submit this and, a few minutes later, press the "Accept as solution" button which appears in the previous message.
Or you may be kind enough to let me know that this type of request is too specific for experts exchange. Frank Lodge
ASKER
IGNORE COMMENTS ABOUT LIGHTVIEW IMAGES. I DID SOMETHING STUPID. I now have a folder Lightview2.5 with the css, js, and images files in it, and everything works fine and makes more sense.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Your input helped immensely.
ASKER
Trying to use Spry HTML Panel Widget as a solution to pass the history text files into the apDiv. I can't get the data into the panel. Is the Spry solution a false start? Submitted a new question regarding using the "Spry Panel Widget" this evening. The code I am using is live at www.atlasofworldhistory.org. Thank you.
You've posted that as a new question. Let's take it from there.
Can I see a link to a live page? It makes it easier to troubleshoot.