I have reimplemented the non-standard <marquee> element (in a very
simplified fashion), moving around a DIV using offsetParent and
offsetWidth.
It works fine in Mozilla (1.7.5) and Safari (1.2.4), but fails
miserably in IE6/Win : the content scrolls off screen to the right hand
side, although it should be going to the left.....
I've got a script that determines the true position of an element in
the page by cycling up the .offsetParent elements all the way up to the
<body> element and tallying up the .offsetLeft values returned by each
element. It works fine on the major browsers (IE, Moz, NS) on PC but
Safari on the Mac returns "0" for the offsetLeft right off the body tag
when it should be a greater value than that....
I noticed something odd yesterday—or at least something I didn't expect. When I call offsetParent() on an element with position: fixed, I get back a reference to the body tag rather than the nearest positioned element in the DOM. Is this expected behavior? If so, why?
I am including some sample code that will illustrate what I'm talking about: a relatively positioned div with one absolutely positioned and one fixed positioned child. Load the example in a browser that supports window.console and you'll see log statements showing the result of a call to offsetParent() for each. I would expect both the absolute and fixed position divs to return the relatively positioned one as their offset parents, but offsetParent says the fixed position div's offset parent is the body element.
I saw this behavior with both jquery 1.3.2 and 1.4, and in Safari4.0.4 (6531.21.10) and Firefox 3.5.7 on a Mac running OS X 10.6.2.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
I developed a Grid that sometimes resides within a table. The Grid is created with the DOM and inserted in its parent element. Problem is that IE returns offsetWidth/offsetHeight 0 when you check its offsetWidth.
For example, the following code will return 0, while Firefox returns its correct width.
Code:
<table border="1">
<tr>
<td id="myCell">
Some text goes here...
<script type="text/javascript">
alert(document.getElementById("myCell").offsetWidth);
</script>
</td>
</tr>
</table>
I read somewhere that IE renders the table once it has read the entire table, so my guess is that offsetWidth returns 0 because the table is not yet rendered and its not part of the DOM?
Anyway, if anybody would know how to avoid this it would be great. This problem does not appear inside a DIV, but in this very case it must be inside a table...
When use text/html as header for my page the method
element.offsetWIdth/Height work as usually and return the real
width/height of an element, but when I use XML as type (which is
necessary in modern browsers to use strict XHTML) the function returns
just 0.
Can somebody help me, it's very important. The prototype function
Element.getDimensions() doesn't work in strict mode.
I am not able to calculate the offsetwidth of the element which contains extra space in between the characters.for ex. if the element contains "A A" as a innerHTML value - if we calculate offsetwidth as 29 and also if the element contains "A A" value again I am getting the same offsetwidth as 29.While calculating the offsetwidth it is not calculating the empty space.May I know how to calculate the offsetwidth with the empty space because I need to insert the ellipsis (...) if it exceeds original width?
Code snipet
function fitStringToWidth(title,width,className) {
var span = document.createElement("span");
span.className="titleBar-Title-1";
[Code].....
I am not able to calculate the offsetwidth of the element which contains extra space in between the characters.for ex. if the element contains "A A" as a innerHTML value - if we calculate offsetwidth as 29 and also if the element contains "A A" value again I am getting the same offsetwidth as 29.While calculating the offsetwidth it is not calculating the empty space.May I know how to calculate the offsetwidth with the empty space because I need to insert the ellipsis (...) if it exceeds original width?
Code snipet
function fitStringToWidth(title,width,className) {
var span = document.createElement("span");
span.className="titleBar-Title-1";
[Code]....
I've got a particular javascript coding and for some reason it is only working for my mac visitors, but not PC.
What can I do to make this coding compatible for both? Where might the issues be?
I'm new to javascript, and I've been looking around for some
references on compatibility issues, but didn't found much.
I'm intrested in any and all kind of recommandations about
which methods are supported by which browsers, and all that
kind of stuff.
Are there any groups focused on these issues, or some pages
where reports up to date may be found ?
for instance, I've written some basic code from tutorials in
order to get my hands in javascript, and even with that simple
stuff, I've already come across problems with scripts that
work with firebird, but don't work with explorer.
source of that example follows:
Can anyone point me to a site that gives a good (basic) tutorial on writing
JS so that it runs in multiple browsers?
I have a web app that's been targeted for IE 5.5 but need it to work in
other browsers such as Mozilla.
Things I've noticed are HTML lines like <div class="divwithborder"
style="width:600px; height:351px;left:20px"> - in mozilla the "height"
attribute seems to be completely ignored!
I have the following javascript which is setting up a quiz (delivered from off-site) into an iframe. The javascript code determines if the visitor has Flash or not, and then sets up the page, on button click, to deliver the appropriate version of the quiz into the iframe.
For some reason, this code works in everything (it seems) except IE8. In IE8 without Flash, something (perhaps in the code itself?) kicks the viewer into a blank page. If someone could just test the URL below Maybe (I am thinking) it is because the computer I tested it on did not have JS enabled? Or maybe there is something in the code? Or maybe with the quiz delivered from off-site?
Here is the code:
<!--QUIZ BEGINS-->
<article id="page_7c">
<div class="box" id="page1">
<a href="#page_1" class="close"></a>
[Code]....
If you click on the link bottom left ("Test Your Knowledge of UFOs") that should send you to the appropriate version of the quiz.
I'm working on an application that uses ajax and we are going to have a version that people with browsers that don't support the XmlHttpRequest object. My problem is what's the best way to check this.
I have tried the following
var xmlreq = new new XMLHttpRequest();
if (!xmlreq){
// handle the browser stuff
}
In netscape 4.7 this results in an error that I don't seem to be able to recover from and I don't think this is the best approach to this problem.
<SCRIPT LANGUAGE='javascript'>
function saveas()
{
document.execCommand("SaveAs","1","filename.htm")
}
</script>
its suppose to show that "Save As" dialogue box to save the htm/asp/php file to what you want on your local machine. i was having a hard time troubleshooting the code on my firefox, but to no good. until a bright idea pop into my mind and tested it with the damn IE, and it works like magic!!
now my question or inquiry would be, do you have a similar code that will work more universally on most browsers?
Over the various browsers, is it better to use:
document.getElementById('num1').removeChild(image_ display);
or
image_display.parentNode.removeChild(image_display );
to remove an image.
Does anyone know of good links about cross-browser compatibility (html
attributes/css2/javascript)?
I might as well start off like everyone else who posts problems they
are having....So I'm new to JavaScript.....
Anywho, I have a page that lists 15 or so thumbnails and then one big
image of one of those thumbnails. I wrote some javascript code that
when you click on the thumbnail the real picture of that thumbnail
loads in the big image on the page. So essentially I wrote some very
simple code that replaces the "src" of an image tag on an onClick
event. I also replace some text within some elements that are tagged
with an ID. Everything works great in all browsers except in internet
explorer 6.0 (and possibly other versions of IE, just 6.0 is all I'm
using). If anyone has run into this problem before, or notices
something wrong with the code ...
I don't know much about java scripts, but here is my attempt to write
one. My script allows the user to enter their customer number into a
textbox. When they click on a button, they are redirected to a PDF
file. So if my customer number is 12345, I will be directed to
http://www.websiteaddress.com/reports/12345.pdf whenever I type my
customer number into the textbox.
The script I wrote works with IE 6.0, but when I tested it with
Netscape 4.7, it would not work. I'm not familiar with java scripts
and browser compatibilities. Can someone take a look at my script and
tell me what I need to change in this script to make it compatible
with as many browsers as possible?
<HTML>
<HEAD>
<TITLE>View Report</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function GetReport() {
self.location.href = 'http://www.websiteaddress.com/reports/' +
document.forms[0].txtValue.value + '.pdf'
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<form ID="Form1">
<input type=text name=text1 size=30 ID="txtValue">
<input type=button value="View Report" onClick="GetReport()"
ID="Button1" NAME="btnView">
</form>
</BODY>
</HTML>
i'm in trouble running my slider panel script i developed in jquery 1.2...it dosen't work under jquery 1.3.2
this is the javascript
(document).ready(function() { $(".topMenuAction").click( function() {
if ($("#openCloseIdentifier").is(":hidden")) {
$("#slider").animate({
marginTop: "-121px"
[Code].....
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/"></script>
<script type="text/javascript" src="js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="js/startstop-slider.js"></script>
and they work fine in the slides in All other browsers but IE, If I remove the "interface.js" the slide works but I want both to work
I am doing an experiment with setTimeout for a much larger project and cant seem to get this bit of code working. What is "supposed" to happen is on hover the div goes black, and on removing the mouse it turns red after 1 second. however, it doesnt work. ive tried a bunch of variations but nothing gets it to work. i want to line up a bunch of divs and not need to write a seperate function for each one.
here is the HTML:
<div id="0" onMouseOver="blackit('0')" onMouseOut="fadeit('0')"></div>
<div id="1" onMouseOver="blackit('1')" onMouseOut="fadeit('1')"></div>
<div id="2" onMouseOver="blackit('2')" onMouseOut="fadeit('2')"></div>
<div id="3" onMouseOver="blackit('3')" onMouseOut="fadeit('3')"></div>
[Code].....
there is some CSS but nothing crazy. it should work but it doesnt. the black on hover works but then it either stays black or goes red immediately, not waiting the 1 second.
As I understand it so far:
element.attachEvent()
IE 5+ for PC
element.addEventListener()
Gecko, KHTML
element.event
NS3+, IE4+, dunno about opera or others
Since I'm only concerned with attaching a single event and don't care about bubbling/capturing, am I best off not using the old style of event registering to assure maxium compatibility?
Does anyone know if there is a compatibility issue with JSLint and JQUERY?
View 5 Replies View RelatedI 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.
I am working in IE and FireFox compatibility. In my application we are creating dynamic iframes inside another iframe. I have to access a div inside the iframe. In IE everything is working fine. But in Firefox, I am not able to access the div.
I have tried using:
iframename.divname
iframename.getElementsByName("divname")
iframename.getElementById("divname")
iframename.getElementByTagName("divname") --> This was not throwing any error but the element length was 0.
I have created the iframe using the method
function getIframe(name){
var iframe = document.getElementById(name)
var ifDoc
if(iframe.contentDocument){
alert("1");
ifDoc = iframe.contentDocument
} //NS6+
else if(iframe.contentWindow) {
alert("2");
ifDoc = iframe.contentWindow.document
} //IE
else
{
alert("3");
ifDoc = iframe.document
} //IE5
alert ("value for getIframe is "+ifDoc);
return ifDoc
}
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();
I'm implementing prettyPhoto into my site which already contains a jquery newsticker from [URL]... There is a compatibility issue between this two, I can only manage to make one to work, but I really need both of them.
View 2 Replies View Related