JQuery :: First Click Shows Popup At Bottom Of Page Instead Of Centered
Apr 20, 2011
I am using Fancybox plugin and works well but for an ajax call the first few calls the popup/modal appears at the bottom of the window but later corrects itself and then is centered.
Here is an example:
Example Link
Click on the 'Foliage', 'Base' or 'Trunk' boxes in the right side column.
I have several pages that work as expected - a bottom_menu.js script writes some links to the document, and thte results are centered. Then I had to mod a page because I had only 11 items rather than 12. Now the bottom_menu.js script results ends up left justified. How to make the results be centered.
I am implementing a pop up window and need it to be centered. Found this code (below) seems to work good. I need to open it with an image rather than text link.
<script type="text/javascript"> <!-- function popup(url){ var width = 300; var height = 200; var left = (screen.width - width)/2; var top = (screen.height - height)/2; var params = 'width='+width+', height='+height; params + = ', top='+top+', left='+left; params + = ', directories=no'; params + = ', location=no'; params + = ', menubar=no'; params + = ', resizable=no'; params + = ', scrollbars=no'; params + = ', status=no'; params + = ', toolbar=no'; newwin=window.open(url,'windowname5', params); if (window.focus) {newwin.focus()} return false; } // --> </script> <a href="javascript: void(0)"onclick="popup('popup.html')">Centered popup window</a>
I have a div popup on my test site and i'm having trouble centering it. For some reason (which probably has everything to do with the code) the pop up shows in the middle of the page, as opposed to the middle of the screen. Forcing people to scroll down to see it. You can check it out here: Test page. Is there any way I can code it to where it always shows in a visible position?
Here's my javascript code: function toggle(div_id) { var el = document.getElementById(div_id); if ( el.style.display == 'none' ) { el.style.display = 'block';} else {el.style.display = 'none';} } function blanket_size(popUpDivVar) { if (typeof window.innerWidth != 'undefined') { viewportheight = window.innerHeight; } else { viewportheight = document.documentElement.clientHeight; .....
And here's the html: Code: <div id="blanket" style="display:none;"></div> <div id="popUpDiv" style="display:none;"> <a href="#" onclick="popup('popUpDiv')">Click Me To Close</a> test </div> <a href="#" onclick="popup('popUpDiv')">Click Here To Open The Pop Up</a>
im looking for a javascript code that will open a window in 100% width, no toolbars, no menubars, no statusbar, nothing but the page conent basically but for it to all be centered on the screen vertically
What I want to do is, when someone clicks a link the image pops up on screen in its own nice window smack down in the middle of the screen over top of the website. I want it to look neat tho, best example I can find is @ curse.com. [URL]. If you click that link and scroll down to the screen shot section and click on one of the images you can see how nice and professional it looks. How can I accomplish this?
I hired a programmer to develop a drag and drop system for my blog. The user should be able to browse one of my blog entries and click, drag and drop an image from my entry to a fixed bottom bar on that page.The problem we are facing is that when dragging an image, it wont place it on the bottom bar until the whole page is scrolled down to the bottom of the page. This is a problem because some of the pages can be very lengthy
I have a hidden popup that I populate with content and it dynamically expands to the size of the content. I then show the popup. When a user clicks on another link, it populates the popup with longer or shorter content. When the content is SHORTER, it seems to show the background image that I'm using expanding to the height of the previous size of the popup. I've tried setting the height manually with JS, no luck. This only happens on IE6.
I have this script which I found bits-and-pieces and put together to display and close the popup. The problem is I couldn't figure out a way to close the popup by clicking anywhere on a page. I can close by clicking on the link but that's not what i want. I want to be able to click anywhere on a page to close the popup.
i been over to CSS forums and i was redirected here as it was a JS problem. i have created a page when i click suppose say "priority" the popup comes up. now in FF, its fine but in IE, Chorme, it has scrolls, and the width and size of viewpoint of border aren't same.
I really like the sitepoint popup that pops up at the bottom, it looks nice and is unintrusive. I want to make a popup like this but instead of triggering it when I first load the site I want it to show up when I move my mouse cursor to the top outside of the website real estate.
I am experienced with PHP but this really is a JS thing.
How to Make a Html Form Shows Up when Visitor Click a Link.. I have seen Site where you want to add Message u click Link then the Form under the Link Shows Up .. it stays Hidden unless Visitor Click Link 'Send Message'. It seems done by Java but How ..
I have seen in some forums when members respond to the questions posted, a small window popup automatically and closes after few seconds. Can it be done using Javascript?
Currently I have one php page with an iframe in it. There are buttons in the parent page that links to different contents, all targets to the iframe.
Now i want to avoid using iframe and I think I can do the same thing (showing different contents in one specific area) through using a few of javascripts, except that I almost knows nothing about javascripts.
Anyway, my page is something like this:
PHP Code:
I am thinking about using php code like include() together with some javascript.
I want to have a script to open a popup on the right bottom of thescreen(like hotmail or yahoo).
I want to write a function that checkes every 10 seconds, if there are new messenges from a database , if CurrCount < NewCount , the check will be made. Can anyone point me in the right direction?
However, it is appearing ont the page in Firefox for a split second when the page loads. Is there a way to stop this? The site is on localhost at the moment but I can easily upload it if need be.
I am using jQuery and BlockUI to display a "Loading..." message to theuser while the page is loading.The problem is that the "Loading..." message seems to show up AFTERthe page has loaded, not during load. Shouldn't the document.readyfire sooner than that?What am I doing wrong?
A website I've been working on has a black bar across the bottom. Under some conditions, however, there is a gap between the bar and the bottom of the page -- white for the body. The conditions vary between browsers and OSes. To keep things simple, I'll describe what happens with my principle development environment -- Chrome under Ubuntu.
The main body of the website is fixed width, centered against a neutral background. If the browser window is narrowed so that a horizontal scrollbar appears, the gap appears.
I have tried various things to find the gap so I can move the bar down or whatever but nothing seems to work. I tried using the document height but I found that it is greater than the actual display area which probably means that it is including something not visible (which is fine) but how do I reliably determine the extra? Or is there another solution I should be looking at (I won't bother listing all that I have tried)?
I was hoping there is some way to fix this, in IE7 and 9beta when you navigate between pages from my main nav the page loads scrolled to the bottom. It seems to be pretty random and will not reproduce consistently. Is there a way to force all anchors with a certain class to scroll to the top?