Top of page scrolls up when iframe opens

FrankLodge
FrankLodge used Ask the Experts™
on
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.  


<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>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Jason C. LevineDon't talk to me.

Commented:
Hi FrankLodge,

Can I see a link to a live page?  It makes it easier to troubleshoot.

Author

Commented:
I am trying to create a link to a live page for you.  All of the files are at atlasofworldhistory.com/work/index.htm but I am having trouble.  

I appreciate your help and will let you know when the live page is working.

Author

Commented:
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.scroll(0,0) inside iframe body tag.  I could not make this work.

Thanks for helping.
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
Please see previous comment that contains the live page.  Test the two links:  Greece and Egypt.
Jason C. LevineDon't talk to me.

Commented:
>> 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

Author

Commented:
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.
Jason C. LevineDon't talk to me.

Commented:
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.  

Author

Commented:
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.
Jason C. LevineDon't talk to me.

Commented:
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<br />text<br/>Text<br />text<br/>Text<br />text<br/>Text<br />text<br/>Text<br />text<br/><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none'"></a></div>

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

Author

Commented:
Working on this. May not get back to you until tomorrow. Thanks for the code example.
Jason C. LevineDon't talk to me.

Commented:
Take your time, I'm not going anywhere.

Author

Commented:
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". I spent hours figuring that out!  If not, I'll send the recommendation.
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

Author

Commented:
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.
Don't talk to me.
Commented:
>> If you communicate with Nick Statenberg and Lightview

I don't :)

I just know the product because I've used it in other sites and thought it would work well for you.   I have no connection, professional nor personal, with that software or that developer and my recommendation is based entirely on functionality.  However, nothing stops you from communicating with Nick yourself.

>> SPECIFICATION:
>> Or you may be kind enough to let me know that this type of request is too specific for experts
>> exchange.  

Well, yes and no.  The request is fine, discussion is fine. Expecting code, not so much.  I prefer to teach others to fish rather than handing the fish out and most of the senior Experts work the same way.  That being said, you're obviously talented enough to get to this stage, so you really only need a nudge over the top...

Okay.  What you can do one of a few things.  Your original idea of an absolute div with an iframe is okay, albeit overly complicated and subject to being blocked.  Your other option would be to use Spry in a Master-Detail region framework and have your HTML in an external file and call things that way.  You can forget about external files entirely and adapt your previous solution as noted (makes for a long load on the page, though).  As far as the opaque overlay from lightview, that can be controlled via the CSS file.  There's no need to keep it that dark.

The nice thing about web dev is that it is fairly flexible and there is no one true way.

>> The function must recognize anchors and move the text to a bookmark

That's fairly hard to do because of the nature of bookmarks. Some heavy lifting may need to be done to get that to work.

>> 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.

FYI, the questions don't lock down once a solution is accepted.  Discussion can and does continue.

Author

Commented:
Your input helped immensely.

Author

Commented:
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.
Jason C. LevineDon't talk to me.

Commented:
You've posted that as a new question.  Let's take it from there.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial