Iexplorer 9 - jscript - replace backgroundImage - javascript

I'am using the next line in a js script with FF and IE9. The BackgroundImage is set somewhere to
url("images/\\BalkLinks.png")
and later I like to change that image to one with shadow.
stbmkloon.childNodes[x].style.backgroundImage=stbmkloon.childNodes[x].style.backgroundImage.replace(".png","S.png");
In FF, IE8 this is going well but in IE9 the /\\ is changed into a slash forward, a strange character and "Bal" is dropped. Also ".png" is replaced by "S.png" what is correct.
Is there somebody who can tell me what i'm doing wrong ?
Gr
an example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
function PersoonOpVoorgrond (naam)
{
alert('before :'+document.getElementById(naam).style.backgroundImage);
document.getElementById(naam).style.backgroundImage=document.getElementById(naam).style.backgroundImage.replace(/.png/,"S.png");
alert('after :'+document.getElementById(naam).style.backgroundImage);
}
</SCRIPT>
</head>
<body>
<div id="Switch" onclick="PersoonOpVoorgrond('Switch');" style="background-image:url(images/\\BalkLinks.png); background-position:0% 0%; background-repeat: no-repeat; border:2px black solid; width:50px;">
Switch
</div>
</body>
</html>

You should use regular expressions in the replace function.
backgroundImage.replace(/.png/g,"S.png");
There is also one thing that is dangerous:
Not all browsers return the current value of a style property. For example chrome would return an empty string for "style.backgroundImage".
Chrome returns only values that are specified by JavaScript before.

Related

Why can't I use any DOM functions?

<!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>
<style type="text/css">
div.main1{
background-color:#EEE;
border: 2px dotted;
padding: 5px;
}
div.sub{
background-color:#DDD;
border: 1px dashed;
padding: 3px;
width:50%;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<script type="text/javascript">
function showOptions(box){
box.childNodes[0].style.visibilty = "visible";
box.childNodes[1].style.visibilty = "visible";
}
function hideOptions(box){
box.childNodes[0].style.visibilty = "hidden";
box.childNodes[1].style.visibilty = "hidden";
}
</script>
<center>
<div class="main1">
<div class="sub" onmouseover="showOptions(this);" onmouseout="hideOptions(this);"><input />
</div>
</center>
</body>
</html>
Above is an example of the code I am using, i am using Dreamweaver... My concern is that When i Ctrl + Space after "box" in the showOptions(box) method, i don't see any of the DOM object options, i apologise if i'm making no sense because im quite new to HTML + Javascript, basically what im trying to do is check if the given argument to the function of a HTML Element, and if so, allow me to access its methods such as "childNodes" or "setAttribute()" and so on..
Is this possible?
What you're describing is called Intellisense/code hinting. From what I understand, Dreamweaver doesn't do a very good job with this.
have you thought about using a different editor? If you're working with mainly code other than .Net then maybe something like Komodo Edit.
If you're going down the .Net route then there is of course Visual Studio Express which does a much better job with Intellisense/code hinting
Edit
Also, you're attempting to see the intellisense on the method itself - this isn't the intention. It's intended to look AT the method from somewhere else. So ideally you would do your CTRL+space where shown below:
onmouseover="showOptions(this);"
-------------------------^Here
Another Edit
Also, looking at your code, it's not going to work..
You are referencing a child that doesn't exist:
box.childNodes[1].style.visibilty = "hidden";
childNodes starts at zero, so [0] would be the input. [1] is nothing.
Finally
Might I suggest you install Firefox and Firebug. Firebug will help you debug all your javascript. It does a GREAT job of telling you what/where the issue is.
You can give the IDE hints about types with JSDOC
/**
* #param {HTMLElement} box
*/
function showOptions(box){
}
Many IDEs are able to read that information and provide the correct methods for an HTMLElement. However, I haven't seen one that is smart enough to know what to suggest if you hit ctrl+space after box.childNodes[i]

jQuery .find() error: "Unexpected call to method or property access"

I'm having some problems with getting one of my site pages with IE8. It works fine in IE9, Safari (both PC & Mac) & Firefox (Mac). I'm using a find(tag1).html(tag1) call sequence to do a title substitution, but I get the following error in IE8 when I debug it in the IE script debugger, and this in the html(tag2) function:
Unexpected call to method or property access
The find(tag1) function seems to return the enclosing object (i.e. #sidebar), rather than the nested object #sidebarheader, and this causes problems when later making the html(tag2) call.
I've created a representative test case as follows:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery .find() test case</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>
<script type="text/javascript">
function UpdateHeader() {
$('#sidebar').find('header').html("New Title"); // IE8, nesting div's in the find fct. will not discover the child div
}
document.ready = UpdateHeader;
</script>
</head>
<body>
<div style="height: 400px; width: 390px">
<div id="jqm-home">
<div id="page">
<div id="sidebar">
<div id="sidebarheader">
<header>Old Title</header>
</div>
</div>
</div>
<p onclick="UpdateHeader();">Click to update title</p>
</div>
</div>
</body>
</html>
And here is the jsFiddle test case:
http://jsfiddle.net/bnmcK/21/
Has anybody a suggestion on how to get this to work in IE8?
In order to support the new HTML 5 elements in older versions of IE (8 and below), there's a handy trick, which involves creating a dummy element before running your script.
So, simply calling document.createElement('header'); in your page will solve the problem, see here.
For the full explanation, this post does a nice job of providing an explanation.
Also, html5shiv is a project that solves this problem for other elements too.
<header> is a HTML5 tag, which IE8 doesn't know about (IE9 however, supports this tag). Since you're declaring XHTML 1.0 transitional, I'd suggest using a <h1> tag instead, which will work just fine in IE8.

Bug in Internet Explorer 7 element.getAttribute method

I'm implementing a length counter on textareas for a website (twitter style). I'm using the code found here http://www.codefromjames.com/wordpress/?p=15 but seems not to work in IE7.
I've traced the issue to the check of the attribute "maxlength" in an element. It expects it to be null if the attribute is not found, but IE7 returns a number (which I guess is the maximum length allowed by the browser or by the HTML standard, I don't know).
Here's an example you can try:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
</head>
<body>
<input id="test"></input>
</body>
<script type="text/javascript">
var element = document.getElementById("test");
alert(element.getAttribute("maxlength"));
</script>
</html>
Try executing this on IE7 and you'll find out it gives a number instead of null.
Exact version of IE7 is 7.0.5703.13
Should I consider this a IE7 bug or is it working as expected?
Cheers!
You can check element.attributes.maxLength.specified to find out whether maxLength is indeed user-specified.
var element = document.getElementById('test');
var maxLength, defaultLength = 100;
if (element.attributes.maxLength && element.attributes.maxLength.specified) {
maxLength = element.attributes.maxLength.nodeValue || defaultLength;
} else {
maxLength = defaultLength;
}

Seadragon deepzoom placement of files

I have created a deepzoom image, and when image files is placed locally I can display it with this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
body {
margin: 0px;
font-family: Verdana;
line-height: 1.25em;
background-color:#000000;
}
</style>
<script type="text/javascript" src="http://seadragon.com/ajax/0.8/seadragon-min.js"></script>
<script type="text/javascript">
var viewer;
function init() {
viewer = new Seadragon.Viewer("container");
viewer.openDzi("spider.xml");
viewer.setFullPage(true);
}
Seadragon.Utils.addEvent(window, "load", init);
</script>
</head>
<body>
<div id="content">
<div id="container">
</div>
</div>
</body>
</html>
But when I then uploaded the images and the xml file to http://foto.qaz.dk
and changed the following code viewer.openDzi("spider.xml"); to viewer.openDzi("http://foto.qaz.dk/spider.xml");
I get an error message from seadragon "Hmm, this doesnt appear to a valied deep zoom image"
What am I doing wrong?
See this post:
http://dragonosticism.wordpress.com/2008/11/25/seadragon-ajax-and-cross-site-scripting/
You have hit a cross-scripting javascript problem thingy. You will need to move your script onto the remote host or think again.
do you control foto.qaz.dk ? if so, set the appropriate CORS headers, download the XML as a string and pass said string to you openDzi call as the second parameter. For more on CORS : http://en.wikipedia.org/wiki/Cross-origin_resource_sharing
CORS is not supported in older browsers, but since you are writing a seadragon based app, assumption is you have an expectation of only working with modern browsers. see: http://caniuse.com/#feat=cors

Why would javascript work on my Sony Ericsson C510 browser, but not javascript + jquery?

I'm able to copy the following .htm file to my sony ericsson C510 and the mouseover works:
<script type="text/javascript">
<!--
if (document.images) {
front = new Image
back = new Image
front.src = "front.png"
back.src = "back.png"
}
function swapImage(thisImage,newImage) {
if (document.images) {
document[thisImage].src = eval(newImage + ".src")
}
}
-->
</script>
<img onMouseOver="swapImage('test','back')"
onMouseOut="swapImage('test','front')"
src="front.png"
border="0"
name="test">
But I can't get any jquery to work, e.g. the following example does not respond when I click on the links. I know the jquery-1.4.2.min.js file exists in the right place because I copied all the files in the directory:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="javascript/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div > div.question").click(function() {
if($(this).next().is(':hidden')) {
$(this).next().show();
} else {
$(this).next().hide();
}
});
});
</script>
<style>
div.flashcard {
margin: 0 10px 10px 0;
}
div.flashcard div.question {
background-color:#ddd;
width: 400px;
padding: 5px;
cursor: hand;
cursor: pointer;
}
div.flashcard div.answer {
background-color:#eee;
width: 400px;
padding: 5px;
display: none;
}
</style>
</head>
<body>
<div id="1" class="flashcard">
<div class="question">Who was Wagner?</div>
<div class="answer">German composer, conductor, theatre director and essayist, primarily known for his operas (or "music dramas", as they were later called). Unlike most other opera composers, Wagner wrote both the music and libretto for every one of his works.</div>
</div>
<div id="2" class="flashcard">
<div class="question">Who was Thalberg?</div>
<div class="answer">a composer and one of the most distinguished virtuoso pianists of the 19th century.</div>
</div>
</body>
</html>
How can I get jquery to work in my Sony Ericsson C510 browser as plain javascript does?
Added:
Based on rchern's suggestion, I tried this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="javascript/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#test').css("background-color","lightgreen");
alert("hi from jQuery");
});
</script>
</head>
<body>
<p>test from html</p>
<p id="test">jquery should turn this green</p>
</body>
</html>
In firefox on the desktop it shows the popup and turns the line green, but on the cell phone jquery seems to have no effect, only the text is shown.
The C510 browser is NetFront 3.4.
This is definitely from the old school of browsers, back before vendors considered it useful to provide documentation on what was supported, or debugging tools. With NetFront, like other older mobile browsers, you really have to work up incrementally testing features as you go, because some of what we would today consider basic JavaScript (never mind DOM) is broken, and when something goes wrong you have little affordance to work out what it was.
jQuery is a complex beast that takes a few liberties with what JS and DOM allow. I would not expect it to work on mobile browsers prior to the current crop of smartphones (WinMo 6.1.4+, iPhone, Android etc). Sorry.
jQuery isn't supported on all mobile devices. I've been able to get it working on iPhone, iPod Touch, most Android phones, Palm Pre and -i think- Blackberry.
John Resig is working on a mobile version though, check out
http://groups.google.com/group/jquery-dev/browse_thread/thread/6d0f9da66581d9ca/819ff599f546ec65?lnk=raot&pli=1

Categories