Vertical Centering Code A Little Choppy When Loading?
Sep 7, 2010
I recently found a really nice code that centers a page vertically: [URL].. What I like about it, is that when you zoom in with Chrome, nothing gets cut off. Normally other codes for centering will zoom straight into the middle, and cut off content on the left. The only problem I'm having with it, is that when the page loads in Chrome and Safari, it starts to load at the top of the page, and then quickly jumps down to where it's centered. It looks a little choppy when you're navigating through many pages. I'm wondering if there's a way to get it to load in the correct position where it will stay?
After realizing that htc files only work with Internet Explorer, I have needed to have JavaScript code to suit the two lots of css code below. Please help, I need the code pretty urgently. The code must work with most versions of browsers.
i have been coding on this vertical sliding navigation quite a while. its tested on all relevant browsers and works like a dream. id loved to show you an example of it, but the site is under development, and i, as a little coder, am not allowed to grant access to it, additionally i do not have enough time to create a testcase for everybody to see. to give you a short insight:
the site is quite long (vertically) and we wanted a small navigation (very subtle) to follow the user when scrolling. the problem was: the footer is quite long too, and we didnt want the sliding navigation to reach into it, when scrolling down the footer. in other words: i had to stop the animation when the sliding nav reached the end of the main content.so far so good, i had NO idea how to tell the animation to stop at certain conditions, other than telling it that from the start.
my solution is totally workaround and completely selfmade. but i am SURE that there is some kind of "stop animation when condition is met"-command i was totally overlooking. so please dear jquery community: tell me what i am doing wrong, and how i could improve this function.
I was wondering if there is a javaScript code for a vertical slider. Basically, I'm presenting a menu, that needs to fit in a certain amount of space and it is much taller than the space allotted.
I was going to use an iframe, but I thought that there might be some JavaScript I could use that would be more elegant. I just need to scroll text on a page.
I have noticed that when doing animations (moving an item across the screen), at times the animations are choppy in firefox. It is hard to explain how to reproduce this problem as it seems it is dependent on random elements of the page. I have tested the same page in Opera, Safari and IE and the animations are very smooth.[code]If I put the code block anywhere but inside the content div, the animation is smooth. However once put where it belongs, the animation becomes choppy in firefox. I was playing around a bit and found out that doing some random changes causes the animations to become smooth. For instance, removing height: 100% on the nav makes the animations in the content div smooth. I lucked out with this as it doesnt change the layout of the website at all. Another solution I found is that if I remove the box shadows I have on the mainsection the animations become smooth. These attributes are no problem for Safari and Opera though.I recently rewrote the plugin I was working on and ran into this problem again. However, removing the height:100% trick did not work.
I know this is most likely a problem with Firefox, I just wanted to see if any of you know a solution. Also, have you seen any related tickets in mozilla bugzilla? If not, I may have to create a new ticket for it.
want to learn javascript and i'm using ubuntu 9.04.i have google chrome and fire fox with enabled javascript. All things are good but when i write a js file and open it in browser but nothing happening html code loads but js not any hint why .
i want to postload javscript from another javascript. This works fine in firefox and IE6 for macIE i can use an Iframe to load the code and inject it with insertAdjacentHTML The problems arise with safari and opera. Both load the new code with XMLHttpRequest, but the code is no 'executable'
To make this possible on IE i had to use the magic 'DEFER' attribute. (Sync or Async ist not the issue)
As we all know, JavaScript is client side and php is server side, (the php code is 'allowed' to do stuff on the server that JavaScript cannot). The problem with php is that it timeout after a while, (and the user also has no clue as to what is going on for a long time).
I need to run a script on the server that could take a very long time.
So what I was thinking is mixing both JavaScript and PHP Something like,
<script> var endvalue = 1000; /* some number that the server can calculate quickly */ var i = 0 while (i<=endvalue) { /** call a php file that will do some work somefunction.php?someNumber=i */ } </script>
That way the server does the work, while the client keeps it going. Ideally I would also get a return value/string from the php script.
I've run into a roadblock I just can't seem to get past. I'm developing a website for work (internal) and I have a lot of javascript calculations going on when someone enters data. What I want to do is to have a div apear when it begins calculating and goes away when it ends. I'm using:
// CSS code div.loading-invisible{ display: none; } div.loading-visible { display: block; ... various formatting here ... } // Javascript function calculate(evalForm) { document.getElementById("loading").className = "loading-visible"; [Code]...
It works great in firefox. The div display appropriately, calculates, then disappears when it's finished. However, in IE it seems to want to calculate everything before anything is displayed. I placed alerts in the code to be able to pause it mid way and it worked. But without alerts it just hangs while everything is being calculated and the code for the loading screen just seems to cancel itself out. I attempted to put some waits in the code such as:
The thing is that I would like to stop pop-over (optin form) from loading on some pages (squeeze page,review pages etc.) and can't find a way to do that. We are talking about wordpress blog here... Is there a some kind of script or code I can use? Should be, it's not a rocket science. Just want to kill the process on some pages...I'm using popup domination [URL].
Ihave a list named'Geography', the list has a dropdown field called CountryDropDown, ID of this field is ID_CountryDropDown. This field is looking up to another list called LookUpCountry, which contains all the country names in the 'Title' Column.
I am using this fancy box code to smoothly pop up an image on click, I got it working on my main index page but that's not where I want to put it. My site has a menu where it loads external webpages inside the main index one, I would like to use the code on one of those pages but something is not working.
I have been told its a DOCTYPE issue but I am not able to use the specified DOCTYPE, however I find that it works all the same with my current DOCTYPE choice. If I use the given one in addition to the one I use now (and need) then my site does not work properly, further if I replace it I get the same results.
My existing doctype:
Code:
<DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
[Code]....
I even tried using the exact code from the example in that linked .htm page but it doesn't make a difference, it probably even hinders the code as it looks at the main html page. However loading the page on its own the code will work, so its related to the menu and the way that works.
I am using this fancy box code to smoothly pop up an image on click, I got it working on my main index page but that's not where I want to put it. My site has a menu where it loads webpages inside the main index one, I would like to use the code on one of those pages but something is not working.I am not able to use the specified DOCTYPE but find that it works all the same with my current one, however if I use the given one in addition to the one I have now (and need) then my site does not work properly, further if I replace it I get the same results.My existing doctype:
Code: <DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"
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:
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?
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'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 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();
