Attributes added using setAttribute aren't processed by the behavior - javascript

For example if I am doing a.setAttribute("begin", b+".focus"); it shows up in the HTML tab of the dev tool but it's completely ignored by the behavior (if I add begin="time1.focus" directly in the html it works just fine).
How do you expose these dynamically-added attributes to the behavior?
Is there another way to add them? (createElement and document.write excluded)
PS: I have already tried using createAttribute + nodeValue + setAttributeNode to no avail.

The secret is the order: you need to set the attributes before adding the behavior's class or using addBehavior.

Related

How can I change cssText in IE?

In the past I've been able to modify the CSS on a page via an inline style tag.
I know this sounds horrible but it's for custom CSS writing while working on a kind of WYSIWYG (not with text though).
I used to do something like:
tag.styleSheet.cssText = myrules;
I don't know when exactly, but at some point IE started saying "Invalid Argument" when I try this. The real crux is that doing tag.innerHTML = 'body {}' gives Unable to set value of the property 'innerHTML': object is null or undefined which doesn't happen in any other browser.
EDIT
To be clear I am using an inline style tag. I am not trying to use the inline style attribute.
<style type="text/css" id="mytag"></style>
How can I change the inside of that tag?
EDIT 2
Please see this fiddle:
http://jsfiddle.net/tTr5d/
It appears that my solution of tag.styleSheet.cssText is identical to using styleSheets property. You can comment out the last definition of cssText to see it working as proposed by #Teemu. So now I'm real lost why it's not working in my app. If anyone has ideas what could break that functionality that would be great. In the meantime I'll be tinkering around my app.
IE is limited to 32 stylesheets. I like to forget that fact apparently, which seems to include inline style tags, on top of <link>.
I changed my sandbox to turn on minification so it would put the files together.
Then my code worked.
So it appears that when you go over the limit and insert via JS, you don't get a real error until you try what I did.
You can get a reference to a styleSheet object only via styleSheets collection (or imports collection). If you refer direct to the style element, you'll just get a HTML-element. (Check properties in both objects within simple for..in-loop, and see the difference)
This works in all IEs, and results are rendered immediately:
document.styleSheets['mytag'].addRule('BODY', 'background-color:red');
More info in MSDN: styleSheet object
You can use jQuery. If it's the inline style, you can use the .attr() function.
$("#myElement").attr('style')
otherwise, you can see what .css() has to offer. You can use that to get and set various CSS styles.
Other CSS related jQuery methods
I never had much luck with style elements and IE's innerHTML.
The dom methods are surer, even if you need to branch for IE;
without jquery-
function addNewStyle(str, title){
var el= document.createElement('style');
if(title) el.title= title;
if(el.styleSheet) el.styleSheet.cssText= str;
else el.appendChild(document.createTextNode(str));
document.getElementsByTagName('head')[0].appendChild(el);
return el;
}

Image Zoom effect using Cloud Zoom jQuery plugin

I am trying to apply cloud zoom on a single image as in the below Fiddle
http://jsfiddle.net/7HDbz/
But it does not seems to be working. Someone have a look at this.
Here is another fiddle with working effects
http://jsfiddle.net/tuHuZ/1/
The original plugin usage is here.... http://www.professorcloud.com/mainsite/cloud-zoom.htm
Problems with your first fiddle (the non-working one) include:
No space between the src and class attribute on your <a> tag
Using ' single quotes instead of " double-quotes for constructing the <a> tag
Use of prop where attr should be used. The former is only for properties where the value is irrelevant, such as disabled.
General Tip: Use variable names that make sense -- e.g. use src for the image source instead of x (which could mean anything, and in fact suggests a number)
General Tip: You should avoid having multiple $(this) calls. Instead, set a local variable $this as shown
Here's the working corrected version: http://jsfiddle.net/6dR2k/ .

Replace part of innerHTML without reloading embedded videos

I have a div with id #test that contains lots of html, including some youtube-embeds etc.
Somewhere in this div there is this text: "[test]"
I need to replace that text with "(works!)".
The normal way of doing this would of course be:
document.getElementById("test").innerHTML = document.getElementById("test").replace("[test]","(works!)");
But the problem is that if i do that the youtube-embeds will reload, which is not acceptable.
Is there a way to do this?
You will have to target the specific elements rather than the parent block. Since the DOM is changing the videos are repainted to the DOM.
Maybe TextNode (textContent) will help you, MSDN documentation IE9, other browsers also should support it
Change your page so that
[test]
becomes
<span id="replace-me">[test]</span>
now use the following js to find and change it
document.getElementById('replace-me').text = '(works!)';
If you need to change more than one place, then use a class instead of an id and use document.getElementsByClassName and iterate over the returned elements and change them one by one.
Alternatively, you can use jQuery and do it even simpler like this:
$('#replace-me').text('(works!)');
Now for this single replacement using jQuery is probably overkill, but if you need to change multiple places (by class name), jQuery would definitely come in handy :)

how to change the value of <span lang> in javascript?

i have an element in html as shown below.
<tr><td class="HELPTEXT"><span lang="HLPMTXT1" id="HLPMTXT1"></span></td></tr>
i want to change the value of lang according to particular condition.
I tried as given below.but its not working.
<script>
document.getElementById("HLPMTXT1").lang ="HLPMTXT2"
</script>
Could anyone help me for changing the value of lang attribute of span?
You should use setAttribute(name, value) to do that, so your code would look like:
document.getElementById("HLPMTXT1").setAttribute("lang", "HLPMTXT2");
You can also use getAttribute(name) to retrieve the value using JavaScript.
https://developer.mozilla.org/en/DOM/element.setAttribute
https://developer.mozilla.org/en/DOM/element.getAttribute
Edit: It's also possible that your script is not working because you're trying to access the element before it exists in the DOM. Best way to insure that your element exists is by either: a) putting your script tag after the element, b) using the unload event to delay execution of your JS until everything is loaded, or c) use the DOMContentLoaded event. The latter, however, is a bit tricky to get to work cross-browser (without reusing somebody else's code that already addresses those problems) so you might want to read up on it first.
document.getElementById('HLPMTXT1').setAttribute('lang', 'HLPMTXT2');
Not all attributes can be accessed through the object properties

Markup showing jQuery1281617118201 on Internet Explorer

I'm seeing some of the following in my markup on Internet Explorer:
<span jquery128161711820124="24"></span>
and
<span jQuery1281617118201="26"></span>
What is it?
It is a property added so that jQuery can track data associated with that element.
Things like event handlers you attach using jQuery:
$('someElement').click(function() {
// run code
});
or data you add to the element using .data()
$('someElement').data('myData', 'myValue');
are some of the associations.
jQuery doesn't add that property until it is necessary.
You can view the data associated with an element using the number at the end, as in:
jQuery1281617118201=“26”
console.log(​jQuery.cache[26]);​ // will show the data for element number 26 in the cache
I'm not 100% sure, but I think it's a property set by jQuery to speed up DOM element selection.
I would think the reason that it only appears in IE is that it laks support for a bunch of native getElements methods (ie. document.getElementByClassName)
EDIT:
I was partly right (I think). In the source code of (jQuery 1.4.2) at line 986 it's a generated attribute base on the now() method. The underlying method seems to have with cache of jQuery to do. The cache is used when selecting elements so you don't have to fetch the same element twice.
Was that code generated by your app or it's found in a third party code?
It looks like an internal jQuery variable used to maintain a state or to point to another jQuery (DOM) object.

Categories

Resources