JQuery :: Centering An Image In The Viewport?
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
ADVERTISEMENT
Nov 24, 2011
I have a large image which is centred horizontally and is 300px from the top of the web page. I have some code which will shrink the image, but am struggling to know how to ensure that the image remains centred as it shrinks, and also moves to the top of the page. Can anyone point me in the right direction? The code I have so far is...
Code:
window.onload = function(){
$("#logo").animate({width: "-=400", height: "-=200"}, 5000);
};
View 1 Replies
View Related
Aug 27, 2010
How can i find the DIV position (top and left) relative to viewport ?
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 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
Apr 20, 2010
I'm trying to write a function to center a div within a parent div, and I'm having a little trouble. Horizontally, it works fine. Vertically, not so much.
This is my function:
function centerObject(idName, idParent) {
var parentLeft = $(idParent).position().left;
var parentWidth = $(idParent).width();
var parentWCenter = parentWidth / 2;
var parentTop = $(idParent).position().top;
var parentHeight = $(idParent).height();
var parentHCenter = parentHeight / 2;
var objWidth = $(idName).width();
var objWCenter = parentLeft + parentWCenter - (objWidth / 2);
var objHeight = $(idName).height();
var objHCenter = Math.abs(parentTop + parentHCenter - (objHeight / 2) - 20);
$(idName).css({left:objWCenter,top:objHCenter});
};
The line with the Math.abs call is necessary because without it, the given div ends up halfway off the page up at the top. At least this way it appears somewhere within the browser. The divs in question are all set to position: absolute, but I've tried setting them to all the other possibilities without luck. Or maybe I missed something. This happens in any browser... IE, FF, Chrome, Safari, etc.
View 2 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
Oct 17, 2009
I didn't see this as an option, so I decided to give it a try on my own. I was able to add some lines of code (shown with the > in the margin below) to the jquery.cycle.js script to read in the width of each image and center the slide within the slideshow container // set position and zIndex on all the slides
View 2 Replies
View Related
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
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
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
Nov 22, 2005
I have a bit of code that unhides a div and then loads an image into it.
What I would really like is to have that div center on the users screen.
How do I go about doing that?
function unHide(ImgSrc) {
var newsrc = document.getElementById('enlargedImg');
var newWin = document.getElementById('divOpen').style.visibility = 'visible'
newsrc.src = ImgSrc;
}
View 3 Replies
View Related
Aug 24, 2006
How can I get visible viewport dimensions of any browser?
View 2 Replies
View Related
Mar 10, 2001
How do you center the a pop-up window on the screen after a mouseclick on a button?
View 9 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
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
Jul 23, 2005
I'd like to append/amend the following code from the Dreamweaver extension "Open Picture Window Fever" for the ability to center the PopUp window:
By default, it allows the window to be offset on the left and top, but does not include a centering option.
I'm thinking it would include something like (screen.width-imageWidth)/2;
somewhere but not sure how do go about doing this.....
View 17 Replies
View Related
Jan 3, 2010
ive been strugglng all day to centre a DIV with javascript in the centre of my page. Ive created a modal popup and id like it to stay in the screen even if the page has been scrolled down. And no matter what i try i cant get it to actually hit the centre of the screen. I should add that im totally new to javascript but decided i cant avoid learning javascript forever so here are my pathetic efforts..
function ShowPopup(hoveritem, thepopup, theimage)
{
popVar = document.getElementById(thepopup);
[code]....
Ive tried loads of other things too, whats commented out has been my last effort. Im doing other things too in the function in case you wondered.
View 6 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
Jul 23, 2005
I have the following funciton that centers my website content for any size window and will center it in real time as the window is expanded or shrunk. It is activated by a
onresize="CenterIt();"
in the body tag.
Works fine for IE. How do I make it compatible with netscape and most browsers? Better yet, is there a good single source that explains how to write javascript to be compatible with all browsers? 766 and 435 are the width and height of my table that surrounds the website data defined so:
<TABLE id="Main" style="position:absolute; z-index:0; top:0; left:0;">
function CenterIt()
{
newOffsetWidth = 0;
newOffsetHeight = 0;
if (document.getElementById)
{
winW = document.body.offsetWidth;
winH = document.body.offsetHeight;
}
else if (document.all)
{
/*
What goes here????
*/
}
else if (document.layers)
{
/*
What goes here????
*/
}
if (winW > 766)
newOffsetWidth = ((winW - 766) / 2) - 10;
if (winH > 435)
newOffsetHeight = ((winH - 435) / 2);
if (document.getElementById)
{
document.getElementById('Main').style.left = newOffsetWidth;
document.getElementById('Main').style.top = newOffsetHeight;
}
else if (document.all)
{
/*
What goes here????
*/
}
else if (document.layers)
{
/*
What goes here????
*/
}
}
CenterIt();
View 6 Replies
View Related
