I have checked the questions:
How do I Scroll parent page to top when child page is click within iframe?
and
Scrolling parent page when remote content loads in iframe
But I would like to avoid javascript if possible.
I have an iframe
<iframe name="MapFrame" id="MapFrameID" src="http://maps.google.ch/maps?f=q&..."></iframe>
And some links that point to it:
mostra sulla mappa
My problem is that some of the links are far below in the page and when they are "clicked" the iframe is not visible or only partially visible.
How can I force the page to scroll to the top without using javascript?
I already have a div at the top of the page with id=Fascione that I use in my footer to "go to the top"
<img class="NoBackground" alt="Go to top" src="images/common/go_up_black.png" width="30" height="30">
and I would like to re-use it; is this possible (again without javascript)?
You may want to try this piece of code:
Go to the top
This is a easy way to scroll the page to the top.
I think you will have to use Javascript, which isn't that hard. Here's what to change:
mostra sulla mappa
The href="#Fascione" will push the page to the top, and changing the SRC on the iframe will automatically trigger the update.
Related
I have a page with a menu on the left (with hyperlinks to external pages). I have a div on the right, called "main-area". When I click on the menu links, I would like the external page to open in my "main-area" div. How can I do that?
I found the solution. The target should be a iframe, not a div.
URL
<iframe name="main-area"></iframe>
is there a trick to do this(cause i want my div to automatically scroll without javascript)
If you want do this without javascript you can make your div tag and hidden that. Then you can show your content when user scroll the page. Also you can use AOS library. Please see this link https://michalsnik.github.io/aos/
You can use a URL fragment:
example.com/example#divtoscrollto
<div> <div>{scrollable content}</div> <div id="divtoscrollto"></div> </div
Place an element at the bottom of the scroll content then if you change the url to that fragment for it's id it will jump to its location.
I have an iFrame within a page and it has a chat-icon that should stick to the bottom of the screen (but of course it will have to remain in the iFrame when scrolled out of the view).
The iFrame stretches outside the main viewport and as it seems, the iFrame is only aware of the bottom of its own document/viewport which in my example resides below the bottom of the browser window. It is not aware of the bottom of the parent page which in this case is the bottom of the browser window..
The question is simply, is there a way to get this to work with CSS only from within the iFrame? I do have the option to post messages with i.e. page height down to the iFrame. I am trying to avoid Javascript solution to position the icon manually on scroll event, due to its flickeryness...
I'm unaware of any way to do this in a CSS only fashion as the iframe is going to be completely unaware of the larger page (and that page's viewport) because it's own viewport is the bounds of the iframe itself, and the screen.
I think the only way to do this is with javascript using postMessage to pass the viewport dimensions down into the iframe where you can adjust the bottom value. To avoid flickering, add a short transition to the icon CSS so it slides into the correct place.
First of all, Look at this picture to understand what I mean by a slider:
Problem :
Let's say I have a scrollable div with height:50% and the content is some lines so when the window is full screen I will not see a scroller like this:
But if I will resize the browser window the scroller will be like that:
So as you saw the scroller will automatically stay at the top, and here is my problem I want it to stay at the bottom (without JavaScript)?
I don't want to make it with JavaScript because I'm already using it
in some other things on the same div like (the user have the ability
to scroll app without forcing him to go down when there is an update
....), My project is a chatroom
Contrary to what I've read above, this can easily be achieved without JS/JQ.
Create an anchor at the bottom of the DIV
<div id='thediv'>
Your content here
<a id='bottom'>here at the bottom</a>
</div>
Then link to it/call it/add it to your refresh, body onload etc...
<a href='#bottom'>Clicky</a>
Or on the previous page
<a href='chatroom.html#bottom'>Clicky</a>
..and so on. Basic example:
https://jsfiddle.net/gguajng6/
I'm putting together a horizontally scrolling layout to display nested content (think files within folders within folders ad infinitum). For purposes of graceful degradation, is there any way whatsoever to load the page initially scrolled all the way to the right, without JavaScript? It's easy to scroll it all the way to the bottom by adding <a id="foo"></a> to the end of the page and appeding #foo to the URL, but that doesn't seem to work horizontally.
Yep! Check out this fiddle. You can see that I'm using an anchor to reference an element way on the right of the page (the yellow div), and the browser is scrolling that element into view just as it would scroll downward to bring an element into view that was below the window's edge.