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.
I'm using the following piece of code to create a link that, when clicked, uses jquery animation to slowly display a paragraph of text. The trouble is that the animation goes both vertically and horizontally, making it look a little too busy/cluttery. How can I tweak my code to make it only animate vertically?
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?
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
I have a html list displayed in a div and I want to make the list cycle through items, i.e the first item in the list becomes the last item while the second one becomes the first, and this should continuously happen.
I wrote a small bit of jQuery to accomplish this, but the problem with this code is that is causes the block to continuously resize vertically. Does anyone know of a correction I could make to the code below to remove this glitch. Here is what I have written.
Code JavaScript: $(document).ready(function() { /** * Removes the first element of the news-ticker elements and then calls * addLast() to add it to the end of the list.
i've been wrestling with this issue for the last hour. I can't seem to get thiscentreddiv to animate properly.What it currently does:A small div, (10x2px) expands to full 100% width and 100% height. However, it expands in the bottom right hand corner of the screen.
What I am trying to get it to do: To expand equally in all four directions.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>
I'm using the fgMenu plugin [URL] to style our select menus. Does anyone know how to force the menu to open beneath where the menu is clicked to be opened? If you click on the first menu here ...
[URL]
you will notice that the menu opens above the click, and the top part is cut off. I would prefer the menu opens below the click, and someone can scroll to see all options.
Is there a jquery plugin that can scroll text in a div vertically?I have div with a set height that is filled with more content than can be seen.I'm looking for a way to vertically scroll the text or some way to page thru the content.
I am a noob when its comes to Javascript. I used two different coda like sliders for two of my sites, one of them expands vertically based on the content, the other does not. This is the site I created that will demonstrate the effect I am going for. It is a more robust coda script [URL] This is the site I am creating that DOES NOT expand vertically as I would like. I would like it to behave the same as the site above. (had to use a smaller script to function in wordpress CMS) [URL]
I'm trying to get some thumbnail images that are displayed with ClueTip to be centered vertically & horizontally. The images are various sizes, though none is larger than 150px on a side, so I set ClueTip to have a width & height of 200px. The images are wrapped in a div so that I can have them display: none by default, yet assign display: block to the images themselves. div.DownloadStatsThumb { display: none; vertical-align: middle; } img.DownloadStatsThumb { display: block; margin: auto; } The markup looks like so: <a href="#" rel="#thumb_456" title="">foo</a> <div class="DownloadStatsThumb" id="thumb_456"> <img src="/path/to/some/image.jpg" width="150" height="101" alt="thumbnail image" class="DownloadStatsThumb" /> </div>
The images are always aligned left & top. Eventually, I figured out that it was div#cluetip-inner that was the culprit. While the outer div has a height and width, the inner div has display:inline-block and so was shrinking down to the img size, essentially. I then added: onActivate: function(e){ $('#cluetip-inner') .css('display', 'block') .css('width', '186px') .css('height', '186px') .css('vertical-align', 'middle') .css('background-color', '#000'); return true; } The 186px is to avoid getting scrollbars and the BG color is to assure myself that it's resizing ok. However, the images remain centered horizontally only. Is there something else I've missed?
Im looking for something that would allow a user to click on a button / link that would then reveal hidden content by sliding the whole of the main site content / container down.
I found this which slides the page content to the left or right [URL]
But need something vertical, almost as if the whole site was a big vertical accordian.
Or like on twitter / facebook phone app when refreshing for new tweets etc.
I am new to using jquery and had a question about the slider that I use on my portfolio [URL]. The slider works perfectly but the one issue I have is that whilst it is loading you can see all the images that are used in it tiled vertically, overlapping the text and the rest of the site. It basically looks very ugly whilst loading so I was wondering if there is a way to hide the images whilst it loads, or if there is another alternative?
Adjust the CSS margins of the BODY element with the first slider. The yellow P (paragraph) element resizes to fit its smaller containing block, as I would expect.
Then, adjust the CSS border or padding of the BODY element with the second and third sliders. The P element does not resize, though its origin changes. Instead, it overflows its containing block.
Finally, adjust the margins again. The P element snaps back into its containing block.
As you can see from the source, this is jQuery 1.6.4 and jQueryUI 1.8 pulled from googleapis.com.
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...
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.
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:
A client has a 1440 wide flash move in .swf format that serves as in intro to the site. They want the flash movie centered on the screen even if the resolution is lower, at 1024 or whatever. At this point my idea is to wrap the flash object in a div and center that div using javascript so that it centers no matter the screen width, but I don't know exactly how to do this.
I'm creating a Dreamweaver CSS site based off a template I purchased.In this site,I want to have page with a gallery of my company's products.So I went to http://smoothgallery.jondesign.net/, used the "Gallery Set" setup, and put it into my web page.It all works GREAT...except the gallery is left-aligned and I want it centered on my page.I'm not all that familiar with css or javascript, and nothing I'm doing is getting my gallery to center.
I have a problem in centering my popup window. I want it centered in the page when it pops up. The problem is in the code that is red. Here's a part of my script: if (counter == 0){ var myRes = "<html><head>"; myRes += "<title>Popup Window</title>"; myRes += "</head><body>"; myRes += "<div style='text-align:center'>"; myRes += "<p>Search character '<b>" + searchChar + "</b>' not found in text string!</p>"; myRes += "<input type='button' value='Close Window' onclick='window.close()'>"; myRes += "</div>"; myRes += "</body> </html>"; var popup = window.open("", "Popup", "top=10,left=300,width=300,height=100"); popup.focus(); popup.document.write(myRes); popup.document.close();
I have the following DIV, that I need to position in the center of the page, I have the following code, but you can see the div is not exactly center, space I have from the top is not the same I have in the bottom, the space I have from bot side is the same.I was wandering also if I can do this dynamically, meaning the div will receive the width and height in run time, and them I will send the values to my method "centerObj" (How I can get the height and width of the div element.
I got a slider that I am using but the problem is that it is using AP Div tags and with that when the browser window resizes the slider moves. what I want to do is center it and keep it from resizing or moving around.When I change it to a regular div it just get all jumbled up.
