I have an iframe that contains a page that is constantly updating (basically a logger type thing). Is there a way (either via JS/jQuery or otherwise) to force the iframe to stick to the bottom of that inner page even as it expands?
I basically want to mimic the way may log viewers stick to the tail of a log file as it is updated. I found a similar question already here, but the solution doesn't seem to work within an iframe context (similar question).
Update: Just to clarify, I don't want the iframe at the bottom of the page. I want the contents inside the iframe to stay scrolled to the bottom. The iframe has a fixed height, and after the page loads, additional lines are added to that inner page and I want to force the iframe to always show the bottom of that inner page.
Can be achieved using just CSS
iframe{
position: absolute;
left: 0;
bottom: 0;
}
This will position the iframe relative to the body and it will always appear on the bottom.
does the iframe keep refreshing, and adding content.. or does it keep the connection open? if it isn't keeping the connection open... document.scrollTo() is the javascript method you are looking for.. if you are using ajax to append the information.. do a scrollTo where the number is VERY large 0xFFFFFF should work.
Maybe add overflow:hidden in there also
This iframe at bottom of page only works when there is not a scroll bar in HTML but as the Y axis increases this will not be moved at the bottom of page.
Related
Is it possible to make an element have fixed position, but stop it from scrolling with the page?
My problem: I am building a tooltip that I dynamically determine the placement for depending on what space is available on the page for it. It needs to pop up over everything else next to its target element and not take up space. So I initially thought position absolute.
But absolute position is based off of the element's parent wrapper. My page gets wrapped in multiple various wrappers that I have no control over (on Salesforce, but this isn't necessarily a Salesforce specific question).
So I need to position it off of the viewport instead of relying on what parent it ends up getting wrapped in. So position fixed, works great.
The only issue is position fixed has the element scroll with the page. I don't really want the tooltip to follow the user as they scroll.
I feel I need to keep the position based on the viewport due to not being able to control the parent wrappers. But all I have found is position fixed, so not sure if some method exists to stop the element from scrolling with the page.
Seems like you want to use position: absolute; instead of fixed.
If you're set on position: fixed, the only way I know of to have the element move with the rest of the page as the user scrolls is by editing the location with JavaScript when the browser scroll event fires. Otherwise, if you position with respect to the viewport at first, you'll be positioned with respect to the viewport on an ongoing basis. However, hooking into the scroll event doesn't necessarily perform well, and although there are debouncer functions available to help with that, it wouldn't be my first choice.
You may be able to use position: absolute without tangling with the extra page wrappers, however. Is there is an element (call it A) that has these properties:
your tooltip lives inside A (or can be moved there)
you can correctly position your tooltip relative to A
the extra wrappers are always outside A
If so, set position: relative on element A. Your tooltip will use A for reference and not an extra wrapper outside A (even if that wrapper also has position: relative set on it).
In my App, I am creating the dynamic pages, in which I given the css property to page container as overflow-y:auto. all works fine,
the problem is whenever the page loads, the page height exceeds and the height of the contaienr, the scroll works, but the scroll bar placed in the end of page. so i am seeing the end of the content of the container instead of the top.
is there any way to sort this issue without using script? if so any one suggest me the correct way please?
or do I need to add any special css property in the container?
any one advice me the correct approach please?
Update
This is happening only with Chrome browser. ie and firefox behaves correctly.
try below combination
overflow-y:auto
position:relative
by adjusting position to relative your scroll bar will remains at what you want.
hope it will help for you the same way i am doing this thing its works for me
I am adapting a Wordpress theme for a client.
Within the theme, there is a portfolio feature which loads using javascript. Unfortunately, execution of the javascript is fairly slow, so the result is the footer flashing in the middle of the screen before being pushed to the bottom. This is pretty unsightly - You can see it here: http://bit.ly/1nCH0Br
Is there a way to defer the execution of the footer until the javascript has finished executing (or any better way of solving this unpleasant problem?)
You could make the footer part of the portfolio, so that it doesn't load until the portfolio loads, but that will still leave you with the problem that the page looks blank for the first few seconds of a visit.
A better solution would be to adapt the theme so that it includes a div with a fixed height that displays a loading image and some text like "Loading...". You can adapt the carousel to replace this div. That way you can push the footer down to the bottom of the page, AND give the user some feedback that there's more content loading in the background.
Initialize your footer with css:
position: absolute;
left: -10000px;
opacity: 0;
and set the correct values when the page has loaded. You can do this with having 2 classes, one for preloads and another for after load.
The reason of not just hidding the footer with css is that your js can still work with width and height values
My goal is to 1) load a new "top bar" element on an arbitrary site using JS bookmarklet; 2) have the top bar pinned to the top; 3) push the original content down.
Is there a reliable way to do it with CSS/JS that would work with all sites?
Edit: This is what I tried: jQuery.wrapInner() and prepend() to first, wrap the existing body content into a new DIV, and second, to insert another new DIV with fixed position to the top. I already ran into issues with jQuery.wrapInner() re-evaluating JavaScripts twice.
One alternative I can think of is to proxy the original page through my website and have the original as iFrame (just like Digg does).
One way to do it is to wrapp the original content in a div using jquery and then set position:absolute;
top: 20px;
if your topbar is 20 px high. I can't really think of a case where this won't work...
This cannot be done reliably because JavaScript gets re-evaluated when injected into the host page. For some host pages it won't matter, for others it creates a complete mess. Now I understand why iFrame approach is used as much as it is.
I'm implementing a Wordpress theme where content slides into the page vertically. To do this, I need to measure the size of the div containing the content without visibly rendering it first. I'm attempting to do all of this without Ajax.
Here's what I've discovered so far:
I can easily load the document, read the size, then hide the div with javascript. Unfortunately there's a very obvious (and unacceptable) flicker because javascript doesn't hide the div fast enough. There's also the issue that if images are placed into the content, I have to wait until they're rendered to get the true size... no bueno.
The other option is to hide the content with the CSS, but if the user doesn't have javascript enabled, they'll just be staring at a blank page.
Which brings me to where I am currently.
I have a piece of javascript that runs immediately after the stylesheet is declared that changes the location of the stylesheet link element and then re-renders the page with a javascript specific stylesheet. This solves the problem of having to hide the content before reading the size.
This was accomplished by positioning the div containing the content absolutely and off the page 9999pixels.
#content {
position: absolute;
left: -9999px;
}
At this point, I use jquery to retrieve the height of the content with the following code:
$('#content').height();
The problem is, the number that's coming back is the incorrect size and is much smaller than the actual content. When I change the css to:
#content {
position: absolute;
left: 0px;
}
It renders correctly. What gives?? Is there a bug I don't know about? This happens in both Chrome and Firefox.
You can view it for yourself here http://thethechad.com/wordpress
-- UPDATE --------------------------------------------------------------------------
I figured out my problem. The div I was using had no specified width. When I moved it outside the flow of the document, it expanded to fill that gap, shifting the content and reducing the height of the element. I went back into my CSS and hardcoded the width and everything is working fine. I feel really dumb. I'm sure we all have those moments. Thanks so much for the help guys!
I'm a bit confused by your long explanation, but here's how I measure things without anyone seeing them.
I assign the div a class name I call "measure". Measure has predefined CSS:
.measure {
position: absolute; // doesn't affect layout
visibility: hidden; // not visible, but normal size
left: -1000px; // won't affect scrollbars
top: -1000px; // won't affect scrollbars
}
You are then free to get the divs height. Note: it's width may not be the same as it would be in the layout of the page because divs go full width when position: static.
If you want to make sure that the object is never seen, then you can give it an initial class of "measure" in it's original definition and then remove the class later when you want to use the object in the layout of the page.
I'm not sure what is causing your problem, but you might be able to use something like this:
http://jsfiddle.net/Paulpro/9YBDB/
<div id="thediv">This is the div</div>
<script type="text/javascript">
var $thediv = $('#thediv');
var height = $thediv.height();
$thediv.hide();
$thediv.html('Div\'s height is: '+height);
$thediv.show();
</script>
Were you execute a script to hide the div immediately after the div is rendered, rather than in a script later in your code or on DOMReady etc, so that the flicker doesn't get a chance to occur. However if the user's computer is slow or they are using an older browser the flicker might still appear, I'm not sure. It all depends on if the browsers HTML parser and Javascript engine is fast enough to finish executing $thediv.hide(); before the div is rendered, which I think almost all browsers will be, because rendering is a relatively slow process.