Browser Compatibility For Centering Function
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
ADVERTISEMENT
Dec 24, 2011
The following code works for Firefox but not on Chrome. Does anybody know what it doesn't work on Chrome. Is there a document on the browser compatibility info on each JQuery command.
[Code]...
View 3 Replies
View Related
Apr 20, 2011
The following code is working fine in firefox n not working in IE8... I get the Object Expected Error when the code hits the if(GBrowserIsCompatible())..... line in the javascript code. Clear cache and browser history does not work. Does anyone have a resolution for this?
[Code]...
View 1 Replies
View Related
Nov 4, 2009
I'm using a javascript to center my absolutely-positioned left-aligned site. However, it's not perfectly centered in the browser and I'd like to fix it. I set the width to 788px (embedded Div Layout CSS). Here is the link to the site: [URL]
Below is the javascript code:
window.onresize=positionPage;
String.prototype.trim = function() { return this.replace(/^s+|s+$/, ''); };
function positionPage(){
Width = 0;
if(window.innerWidth){
Width = window.innerWidth;
}if(document.body.clientWidth){
Width = document.body.clientWidth;
}Left = Math.floor((Width - 992) / 2);
if(Left > 0){
document.getElementById("Div-Layout").style.left = Left + "px";
}}
<!--
function MM_reloadPage(init) {
//reloads the window if Nav4 resized
if (init==true) with (navigator) {
if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight;
onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW
|| innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
View 2 Replies
View Related
Jan 5, 2006
Does anyone know of good links about cross-browser compatibility (html
attributes/css2/javascript)?
View 2 Replies
View Related
Nov 5, 2006
I was really hoping that someone could help me sort out two minor problems which I'm experiencing with by JavaScript and two browsers. (FireFox and Safari)
1. Safari doesn't support style="background:#CCCCCC;"
I use the following JS code to change the background color of my select boxes.
HTML Code:
var backcolor = "#CCCCCC";
document.getElementById('operatings').style.background = backcolor;
Unfortunately Safari doesn't support this. I could use the following :
HTML Code:
var backcolor = "#CCCCCC";
document.getElementById('operatings').style.background-color = backcolor;
...but it doesn't work. Probably because the JS reads the dash ( - ) as a syntax error. What alternative is there to this?
2. FireFox doesn't support 'value="";'
I use the following code to reset the selection of a <select> drop down :
HTML Code:
document.getElementById('operatings').value = "";
...but FireFox doesn't seem to support this.
What alterative is there to unselecting the selected the option in a <select> dropdown? I know about the reset button, but unfortunately I cannot use this.
View 5 Replies
View Related
Jul 23, 2005
Is there a resource on the internet to tell me which javascript can
work with which browser.
For instance, can I use style.color with all browsers - that kind of
thing.
View 3 Replies
View Related
Dec 9, 2009
I have looked around and not been able to find a definitive answer to this. Prototype does not work in IE 7 or lower. All other browsers work just fine. Even something as simple as toggle(); will not work in older versions of IE. I don't get any errors or anything like that. It doesn't really seem like a compatibility issue as much as it does that those browsers could be parsing the code differently?
View 9 Replies
View Related
Feb 7, 2011
We run a click and sales tracking solution for our advertisers and as such we are having a few issues with browser compatability for certian sites that are ont eh Magento platform. Essentially we are just trying to create an image call in javascript that uses a few pre-populated variables from the checkout process.
So teh issue we are having doesn't seem to be broser specific. We are trying to simplify the javascript call to ensure we have the highest possible chance of compatiablity. Obviously now with so many differnt browsers and also mobile devide connectivity this is making things even harder. We know that our javascript calls are failing as we've been monitoring our IIS logs and can see the image calls are being made with blank variables. There are 3 different elements to our checkout calls that maybe you guys have experience of with possible issues or fixes:
1. unescape function
2. onload event function for images
3. creating images dynamically
these are very basic elements of the javascript core but aout 5-10% of our calls are failing with blank variables being passed into the image call. So the questions is what elements of our call will be the possibel sources of failure?
[Code]....
View 1 Replies
View Related
Jul 15, 2010
I found this script on a tutorial site but it had no summary of browser compatibility or any other issues. I know absolutely nothing about javascript and, although it works fine when I test it,
<head>
<script type="text/javascript">
lastone='empty';
function showIt(lyr)
[Code]...
View 7 Replies
View Related
Jan 10, 2009
I am having trouble getting my expanding menu to work in Firefox and Opera. It works fine in IE though. I did not write the javascript myself, as I am fairly new to JS, but I did all the HTML and CSS. I used the error console on FF, and also used FireBug. They both returned the following error:
[Code]...
View 23 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
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
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
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
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
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
Sep 18, 2009
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.
View 7 Replies
View Related
Feb 16, 2011
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.
View 2 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
Nov 25, 2010
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();
View 7 Replies
View Related
Jun 4, 2009
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.
<html>
<head>
<script>[code]....
View 5 Replies
View Related
Jan 24, 2010
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.
View 1 Replies
View Related
Mar 2, 2009
I have a main page(html) and an iframe in it.
<html>
<body>
<iframe src="myIframe.html" />
</body>
</html>
In the iframe I have DIV element with a picture/or another element in it. I need to center the DIV element in the iframe, the DIV in the end should be in the center of the iframe(client area), this iframe can be resize, so every time the iframe is resize I need to center the DIV according to the new client area. How I can get the client area and center the DIV? I'm guessing that I will need also the size of the element(picture) to center it, right?
View 2 Replies
View Related
Nov 15, 2010
Im having a bit of an issue with a website im building for a band. The band want a site that is 2500 width so that when the page loads you can either scroll roght or left to view the out of screen material...
i cant find a way of the page loading centered...it is always loading to the far left and all i can do is scroll right...i have uploaded the site to [URL]... I origionally posted this thread in the CSS forum but was instructed this would be a Javascript issue
View 1 Replies
View Related
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?
View 3 Replies
View Related