Vertical Viewport Without Scrollbars?
Apr 25, 2007
I'm looking for an solution to find out the real vertical viewport -
without the height of horizontal scrollbars.
I have two frames side by side. The left one declared 'scrolling="no"'
and the right one 'scrolling="auto"'. For the left frame it is important
to know if the right frame has a horizontal scrollbar and how sick it
is. So I have tried to compare the viewport of both frames.
Using 'window.innerHeight', 'document.documentElement.clientHeight',
'document.body.clientHeight' or 'document.body.offsetWidth' I get the
height including the scrollbars.
The same problem with two frames (rows="50%,50%) i've solved with block
elements declared with a width of 100%. Comparing the offsetWidth of
both, I can see if there is a scrollbar in one frame. But with frames
side by side that doesn't work.
View 2 Replies
ADVERTISEMENT
Mar 27, 2011
I have developed a vertical accordion menu and all is great except for the fact that some of the submenus are long and run beyond the bottom of the viewport. I need to detect the position of the UL, find out how many pixels are below the page fold, and lift the UL up by that many pixels so the UL does not go below the fold. The UL in question is positioned absolutely inside of a relatively positioned parent so I can easily use a negative top position to lift the UL but how do I get the number of pixels that the UL descends below the page fold?
View 2 Replies
View Related
Jan 24, 2007
I got a div, I'd like some code to be executed onClick, that'd move the div to the top of the viewport (not to the top of the page), kinda like a "vertical float".
Is there a way to do this? I've seen annoying menus/ advertisements that stick to the top of the window even if you scroll down.
View 6 Replies
View Related
Mar 17, 2011
Example A (this works):
Code:
<html>
BLAH
<script>
alert(document.body.clientWidth + "x" + document.body.clientHeight);
</script>
</html>
[Code]...
I am working on Javascript code that gets the size of the browser viewport. My code works perfecty if the page has content. But my code does not work at all if the page has no content. Try the code examples above to see what I am talking about. How can I make it work regardless of whether or not the page has content?
View 3 Replies
View Related
Aug 24, 2006
How can I get visible viewport dimensions of any browser?
View 2 Replies
View Related
Mar 21, 2010
I have 50 thumbnails running vertically down the page, so that the viewer must scroll quite a bit to see them all. When a thumbnail is clicked I want to display the full size image in the middle of the viewport. Thus, the top offset of the absolute div that displays the full size picture will change depending on how far down the viewer has scrolled.
I can bind a function to the <img> tag that will set the top offset of the div where the full size images are displayed but I don't know how to get the current position of the viewport, or how to position something with respect to the viewport.
Can jQuery pull the viewport position out of the DOM and let me center something in it?
View 3 Replies
View Related
Aug 27, 2010
How can i find the DIV position (top and left) relative to viewport ?
View 1 Replies
View Related
Jun 11, 2010
Does anyone know a way to do vertical sync with javascript animations (getting timers to run on the vertical sync)?
I rather doubt there is a way to do it, but I find it annoying that when I am dragging an object with my mouse that the object "tears" sometimes.
View 1 Replies
View Related
May 17, 2006
I just learned that firefox (v 1.5.0.3) chops any content of an iframe
that exeeds 2^15 (=32768) pixels i.e. in height? Any idea what went
wrong or is this a bug/feature?
I am using this code:
<iframe src="kibo.html" style="width:400px;height:32778px;"></iframe>
View 1 Replies
View Related
Aug 10, 2009
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-
[code]....
View 2 Replies
View Related
Apr 1, 2010
The mouse position tutorial has an example of how to find the click position within an element. How do you find the click position within the viewport?
View 1 Replies
View Related
Jun 5, 2010
I'm using a simple toggle function to reveal divs when clicking on the associated heading. What I'm aiming to achieve:
1. When the heading is clicked, the hidden div will be revealed and the page scrolled so that the heading is at the top of the viewport.
2. If the page has insufficient height for the heading to move to the top, the page height will be increased to allow this to occur.
3. When the heading is clicked again, the div will be hidden but the heading remain in its current position at the top of the viewport. If a div is being toggled closed when not at the top, the page having been scrolled, then it should remain in its current position.
Other things to consider:
Preventing the amount of any generated empty space at the page bottom from being sufficient to fill the entire viewport.
Current state of play:
The code below will move the heading and revealed div to the top of the viewport if the page height is sufficient. When the div is hidden again, the heading drops down to its original location on the page, which is disorienting for the user.
Markup
<h2 class="trigger">Switch<h2>
<div>Content to toggle</div>
jQuery
$(document).ready(function() {
$('.trigger').next('div').hide();
$('.trigger').click(function() {
$('html,body').animate({scrollTop: $(this).offset().top}, 500);
$(this).next('div').toggle();
});
});
View 1 Replies
View Related
Apr 19, 2009
I would like to have a Back To Top button in the bottom right corner of the viewport. I figured that Javascript would be used for this, and after some searching, I found this Jump To Top Link script at DynamicDrive. I'm sure I could easily change its appearance from a link to a button but I don't like the jerky scrolling effect. I wondered if you guys could explain to me how to make the button (or link in the script's case) stay in the bottom right corner of the viewport at all times instead of scrolling?
View 3 Replies
View Related
Apr 9, 2010
Essentially the idea is to make Element-B and Element-C to cover the area horizontally starting from center of Element-A and ending at the edge of viewport.So, I guess i want to get the distance value from the center of Element-A to the edge of viewport
Additional notes:
Element-A doesnt have static position or size.
Element-B and Element-C verticalposition or height is
irrelevant.
I was thinking something like this:Calculate width of Element-A and divide it by two ( Or just get half the width if theres a way. )
Get the distance from the edge of Element-A to the edge of Viewport Add up these calculated values.Of course unless theres way to get that this width straight up )I was trying to look for a way to do list item 2.
View 1 Replies
View Related
Aug 18, 2010
I'm working on a mysql browser / edit-in-place app which presents the user with a floating UI (think lightbox), that contains widgets appropriate for the given field they've clicked on.
Presently, rather than centering the UI element like a lightbox however, I find it best to keep it relative to their mouse, so that they don't have to traverse halfway across the screen with their mouse to interact with the interface if they've clicked something (for instance) on the bottom left.
The problem however should be apparent: if they click something towards the bottom of the screen, we need to adjust the css top/left properties so that the UI remains within the viewable area and doesn't run beyond the viewport, if possible. I've seen this done tons of times with tooltips.
I've thrown some basic awareness together using$(window).height() / width(), but if anyone could point me to a maturealgorithmfor harvesting the appropriate offset.
View 1 Replies
View Related
Jun 12, 2010
write a PHP script that detects the user's viewport width, and I am guessing stores this in a variable, then checks if it is less than or equal to 1024px using an if statement and if so attaches a certain stylesheet, lets say alternative.CSS, but in the else part of the statement; therefore, if the viewport width is greater than 1024px, it attaches or links default.css
View 8 Replies
View Related
Aug 19, 2010
I don't know if this is a browser bug. I positioned a div at the bottom of the page just underneath the viewport, calculating it with $(document).height() and animate it to bottom:0, works great even when scrolling, cause of updating with the scroll-event. But when I reload this page or scroll down a bit the original position value was used, so it animates to the original viewport value.
View 1 Replies
View Related
Feb 10, 2011
Im trying to prevent my unorder list submenu from extending past the viewport.[code]
View 3 Replies
View Related
Jul 21, 2011
I have a wordpress website with which I wish to provide content via an iframe on facebook.. Without using a wordpress plugin, I would like to know if I provide a function in jquery that basically says if viewport is equal to 520px then either load this css file or add this body class.. Also, if viewport is = to 520px then hide this element.. I think this can be done but after a lot of searching, I cannot seem to find a definative answer..
View 2 Replies
View Related
Jul 20, 2005
IE6 in standards mode doesn't seem to hide scrollbars on the body element
(overflow:hide) Ain't this a quandary. I have it in my head that I need to
specify html instead. The scrollbars do hide on Gecko browsers though, so
there is definitely a disagreement among browser developers on how to
implement scrollbars (as a side note, Gecko browsers with their notoriously
bug-ridden resize code seem to always screw up when asked to stretch and
scroll divs, even when the page is reloaded on every resize!)
My first thought is to modify the CGI that generates the style sheet as I
already have code that deprecates the document type when hidden scroll bars
are required on IE6 (but not IE5.) This is based on the simple empirical
evidence that the scroll bars are still there on IE6 in standards mode, so
the optimal document type (XHTML strict) cannot be used. So I could just
change this to output an html style (rather than a body style) for IE6 and
lose the deprecation (it wouldn't be needed at this point.)
So the question is this. Given that CGI-based processing of browser
versions for these kinds of tweaks is taboo, what would you check on the
client side before dynamically generating the style for the body and/or html
element? It doesn't seem like you could just send both as this would surely
break some older browsers (I know you can do tricks with comments and such,
but that only works for NS4 and maybe IE3 AFAIK.)
documentElement is the only thing I can think of that indicates standards
mode and NS6/Mozilla support this AFAIK.
IE Conditional comments perhaps? I would hate to hard-code a test for a
browser version number into the actual document (for obvious reasons), but I
guess it is an alternative if the browser version is exposed to these
things.
I don't see any other way to deal with a situation like this than with
server-side code that looks at the browser's version number and makes the
necessary adjustment. And there are lots of little differences like this
that just don't seem to have viable client-only solutions. There's DirectX
stuff (probably is an object detect for that) and funky colored scrollbars
(hey people ask for them) and document margins (Opera did them slightly
differently than the rest as I recall) and now this scrollbar thing.
View 24 Replies
View Related
Jul 20, 2005
I have used a textarea to display typewriter effect text. The scrollbars are displayed by default. What is the code to disable the scrollbars in a textarea form field? < scrolling="no"> does not seem to work.
View 2 Replies
View Related
Jun 22, 2003
This code is for an external, homemade scroolbar set, requiring 8 images:
arrowDown_on.gif --Active Button used when scrolling down (down arrow) http://www.boomspeed.com/buzz_killr_x/arrowDown_on.gif
arrowDown_off.gif --Inactive Button http://www.boomspeed.com/buzz_killr_x/arrowDown_off.gif
arrowUp_on.gif --Active Button used when scrolling up (up arrow) http://www.boomspeed.com/buzz_killr_x/arrowUp_on.gif
arrowUp_off.gif --Inactive Button http://www.boomspeed.com/buzz_killr_x/arrowUp_off.gif
arrowTop_on.gif --Active Button used to go straight to top of page (bigger up arrow) http://www.boomspeed.com/buzz_killr_x/arrowTop_on.gif
arrowTop_off.gif --Inactive Button http://www.boomspeed.com/buzz_killr_x/arrowTop_off.gif
arrowBottom_on.gif --Active Button used to go straight to bottom of page (bigger down arrow) http://www.boomspeed.com/buzz_killr_x/arrowBottom_on.gif
arrowBottom_off.gif --Inactive Arrow http://www.boomspeed.com/buzz_killr_x/arrowBottom_off.gif
<script>
var newWindow = null;
var scrolling = 0;// Controls whether the layer is scrollin or not
var yT = 25;// Pixel position the top of the scrolling layer should be set to
var lT = 25;// Initial position for the top of the layer
var yI = 5;// Increment that the scrolling layer should move at
var yH = 0;
var domStyle;// Stores the generic DOM for the scrolling layer to access style properties
var dom;// Stores the generic DOM for the scrolling layer
var isDHTML = 0;
var isLayers = 0;
var isAll = 0;
var isID = 0;
if (document.images){
imag = new Array();
imag[0] = "media/arrowUp_off.gif";
imag[1] = "media/arrowUp_on.gif";
imag[2] = "media/arrowDown_off.gif";
imag[3] = "media/arrowDown_on.gif";
imag[4] = "media/arrowTop_off.gif";
imag[5] = "media/arrowTop_on.gif";
imag[6] = "media/arrowBottom_off.gif";
imag[7] = "media/arrowBottom_on.gif";
im = new Array();
for (var i = 0; i < imag.length; i++)
{
im[i] = new Image();
im[i].src = imag[i];
}
}
if (document.getElementById) {isID = 1; isDHTML = 1;}
else {
if (document.all) {isAll = 1; isDHTML = 1;}
else {
browserVersion = parseInt(navigator.appVersion);
if ((navigator.appName.indexOf('Netscape') != -1) && (browserVersion == 4)) {isLayers = 1; isDHTML = 1;}
}}
var isIE = 0;
if (navigator.appName.indexOf('Microsoft Internet Explorer') != -1) {isIE = 1;}
var xC = 5;
var theDelay = 0;
var frameRateMax = 48;
varframeRate = 1;
function scrollPageTo(xN) {
if (xC > xN) {
xC = xC - frameRate;
posDif = (xC - xN)/(frameRate/2);
if (xC < xN) { frameRate = 1; return; }
}
else {
xC = xC + frameRate;
posDif = (xN - xC)/(frameRate/2);
if (xC > xN) { frameRate = 1; return; }
}
if (isIE) {
document.body.scrollLeft = xC;
}
else {
scrollTo(xC,0);
}
if ((posDif >= frameRateMax) && (frameRate != frameRateMax)) frameRate = frameRate + 1;
else if (frameRate > 1) frameRate = frameRate - 2;
setTimeout ('scrollPageTo(' + xN + ')',theDelay);
}
function findDOM(objectID1,objectID2,withStyle) {
if (withStyle == 1) {
if (isID) { return (document.getElementById(objectID2).style) ; }
else {
if (isAll) { return (document.all[objectID2].style); }
else {
if (isLayers) {
if (objectID1) { return (document.layers[objectID1].layers[objectID2]); }
else { return (document.layers[objectID2]); }
}
};}
}
else {
if (isID) { return (document.getElementById(objectID2)) ; }
else {
if (isAll) { return (document.all[objectID2]); }
else {
if (isLayers) {
if (objectID1) { return (document.layers[objectID1].layers[objectID2]); }
else { return (document.layers[objectID2]); }
}
};}
}
}
function openWindow(contentURL,windowName,windowWidth,windowHeight) {
widthHeight = 'height=' + windowHeight + ',width=' + windowWidth + ',scrollbars=yes'
newWindow = window.open(contentURL,windowName,widthHeight);
newWindow.focus()
}
function closeWindow() {
if (newWindow != null) {
newWindow.close();
newWindow = null;
}
}
function startScroll(objectID1,objectID2,direction) {
domStyle = findDOM(objectID1,objectID2,1);
dom = findDOM(objectID1,objectID2,0);
scrolling = 1;
yT = domStyle.top;
if (document.getElementById) {
pxLoc = yT.indexOf('px');
if (pxLoc >= 1) yT = yT.substring(0,pxLoc);
}
if (window.innerHeight != null)
yH = window.innerHeight - 25;
else
yH = document.body.clientHeight - 25;
if (dom.offsetHeight != null)
yH = yH - dom.offsetHeight;
else
yH = yH - dom.clip.height;
scroll(direction);
}
function scroll(direction) {
if (scrolling == 1) {
if ((direction == 1) && (yT <= lT)) {
yT = (yT/1) + yI;
if (yT > lT) yT = lT;
domStyle.top = yT;
}
else {
if ((direction == 0) && (yT >= yH)) {
yT -= yI;
if (yT < yH) yT = yH;
domStyle.top = yT; }
}
if (document.getElementById) {
yT = domStyle.top;
pxLoc = yT.indexOf('px');
if (pxLoc >= 1) yT = yT.substring(0,pxLoc);
}
code2run = 'scroll('+ direction + ')'
setTimeout(code2run,0);
}
return false;
}
function stopScroll() {
scrolling = 0;
dom = null;
domStyle = null;
return false;
}
function URB(objectID1,objectID2) {
domStyle = findDOM(objectID1,objectID2,1);
dom = findDOM(objectID1,objectID2,0);
if (window.innerHeight != null)
yH = window.innerHeight - 25;
else
yH = document.body.clientHeight - 25;
if (dom.offsetHeight != null)
yH = yH - dom.offsetHeight;
else
yH = yH - dom.clip.height;
domStyle.top = yH;
dom = null;
domStyle = null;
}
function URT(objectID1,objectID2) {
domStyle = findDOM(objectID1,objectID2,1);
domStyle.top = lT;
dom = null;
domStyle = null;
}
function toggle(imgName,num){
if (document.images && imgName){
imgName.src = im[num].src;
}
return false;
}
</script>
**Please do not use my images, as they were provided for examples only.
View 9 Replies
View Related
Feb 4, 2004
in the parent window, i have some objects that will release a pop-up window. in the pop-up window you can make various changes that will affect the database. to see those changes in the parent window, i need to refresh...right?
well, when i refresh...if you're working at the bottom of the page it pops the scrollbars all the way back up to the top. is there a way to reposition the scrollbars without the use of anchors?
View 2 Replies
View Related
Jul 23, 2005
Is there anyway to detect if scrollbars were made visible in a
textarea? I'm not talking about initial setting of the scrolling
attribute, but rather whether scrollbars have been added either
horizontally or vertically based on the users text input?
View 2 Replies
View Related
May 13, 2006
After i open a new window can i show scrollbars ???
(if an image is bigger than my screen)
Something like :
xxx(a,b) {
if (a < b){
self.scrollbars = true;
} else {
self.scrollbars = false;
}}
well, the example does not work, but is there a way to do something like
that ???
View 4 Replies
View Related
Jul 20, 2005
i use netscape 7 and want to hide the scrollbars of the window when
something happens. I tried this:
window.scrollbars.visible=false
window.scrollbars.visibility="no"
....
Nothing works. Is it also possible only to hide the vertical scrollbar instead of both?
View 6 Replies
View Related
