From what I understand, there is no limit in the length of a data attribute(correct me if I'm wrong). However, something strange is occurring in IE when I have a data attribute with a lot of characters. Basically I want to use jQuery to show a specific div if the data attribute, data-zip, contains a specific zip entered by the user.
Everything is working great for me in FireFox, Chrome and Safari, but I noticed that I could not get this to work in any version of IE that I tried(8/9/10). I began to make a JSFiddle, with significantly less zip codes added to the data attribute, so I could post here, but that's when I realized that my Fiddle was working fine in IE as long as the number of characters in the data attribute was kept short.
I also noticed that if I enter all of the zip codes into the data attribute on JSFiddle, JSFiddle thinks that the code is formatted incorrectly (although the code still works as expected in modern browsers so this may be inconsequential).
I used the F12 developer tools in IE to inspect the elements and noticed that when I have all of the zip codes entered, it appears as though none of them are actually being parsed in IE as seen below:
This would probably explain why my code is not working correctly in IE (since the data-zip attribute appears empty). Does anyone know what's going on here and how I can rectify the situation?
Here is a JSFiddle, the first element has the maximum amount of characters I can put into a data attribute, in JSFiddle, before the syntax highlighting gets thrown off, the 2nd shows the highlighting anomaly. Neither of which are parsed correctly in any version of IE I've tried, but in modern browsers it works as expected.
You have to remove the " within the selector to make it work in IE:
So '.contentBlock[data-zip*='+ userZip +']' instead of '.contentBlock[data-zip*="'+ userZip +'"]'. Tested in IE version 9-11 (jsFiddle doesn't work well in IE8).
'[data-zip*='+ userZip +']' will also work, by the way.
Related
Having a bit of an issue in IE (aren't we all).
I've tracked down an problem I'm having to a recursive script that updates a tweets timestamp.
The script works fine, discovering all the date/time stamps to be updated, converts them fine but when it comes to updating the 'time' div it fails. IE doesn't have an issue with $('#id').text('value') but I'm obviously doing somehthing wrong.
Any ideas?
function parseTwitterDate() {
var timeToAdjust
$('a[data-scribe="element:full_timestamp"]').each(function() {
timeToAdjust = $(this).find('time')
var b = timeToAdjust.attr('datetime').split(/[-t:+]/ig);
//funky stuff here to generate strTime
timeToAdjust.text(strTime)
});
}
This works fine in every other browser however in at least IE8 (and 6 but not worried about that) it gets to timeToAdjust.text(strTime) and fails.
Note, doesn't have an issue grabbing the 'datetime' attribute timeToAdjust.attr('datetime').
Have tried .html() and $(this).find('time').text(strTime)
Many thanks for taking a look hopfully someone can point me in the right direction.
Justin
IE8 and earlier require special steps to ensure that they properly understand that the new HTML5 element types are actually elements. There are tiny scripts out there (like this one) which do that work for you.
Without doing that work, lots of aspects of those elements won't work even as just normal elements in IE8 and earlier.
This JSBin of your code (jsFiddle doesn't work with IE8) fails, but this one with a shim works.
I'm currently using this great plugin called HighlightJS for highlighting text on a page when they type in a filter field.
This works great, except for recently we updated from a very old version of jQuery (1.8.2 to 1.11.0) and this no longer works as expected in IE (all versions). It seems to break up single text nodes into a text-node for each searched item. This is problematic when I have it constantly adding & removing the highlighting on a keyup event.
Here's a screenshot of what used to be a single text node now appearing as multiple in the IE11 inspector.
I've put together a demo that breaks in the same way in IE here
Any ideas of how to improve this plugin to make it work as it should? I'll be sure to make a pull request to him on GitHub so others can benefit as well!
I ran into the same issue, and have isolated it to incorrect behavior of the implementation of the native DOM normalize() function in IE11. I've posted some reproduction steps and a workaround on my question:
Why Does IE11 Handle Node.normalize() Incorrectly for the Minus Symbol?
I'm having a problem on IE and Chrome when using the jQuery Format Currency and the jCaret plugins.
The problem is described here: http://code.google.com/p/jquery-formatcurrency/issues/detail?id=23&colspec=ID%20Type%20Status%20Priority%20Milestone%20Owner%20Summary%20Opened
When using the fix shown there, format as you type only works on Firefox. On other browsers the cursor stays "blocked" on the input control and you can't select other control. It seems the focus() event is looping.
I've created a jsFiddle to test this situation: http://jsfiddle.net/B3xA6/4/
Help is appreciated on getting this to work (especially on IE).
Thank you
Here is what is supposed to happen:
The moment the user chooses an option a certain combination of input fields should show up along with two tables.
When the user fills in the input fields and clicks the button, the results should appear in the tables.
Those tables aren't showing up. The input fields don't even show up in js fiddle.
It only works in the newest versions of Firefox, Chrome, Safari and IE.
Not in firefox 6.0 or IE 9.08.
I made the mistake of coding exclusively in Chrome at home to discover that my code doesn't work when I tried to continue working at school.
I used jsfiddle.net to validate my code and did so successfully. Although it still won't work. It doesn't even show up properly inside jsFiddle.
Here is the fiddle to demo the code:
http://jsfiddle.net/Q2nz5/5/
The outputTable method contains line Caption.align = "middle", which cannot be executed in IE and apparently in FF as well. replace it with Caption.style.textAlign = "middle"; and it will fix the problem.
The same with MCaption.
But the best you can do here is to define all styles like that in css.
In your js fiddle you were getting this error: inputOutputCreator is not defined. It is because you are loading your js in the mootools onLoad function. Change it from onLoad to no wrap in the jsfiddle settings to the left. With that changed it worked just fine for me.
hey dudes recently i came across a bizzare problem while trying to learn tabbing .. my code worked like charm in firefox and chrome it didn't work in any version of ie ...There will be two tabs and related contents when i click on tab1 corresponding content should be shown hiding other one ..same goes for tab2 it worked in ff and chrome .. but ie add all contents as i switch to other tabs my code goes like this http://jsfiddle.net/myth/PZZ6a/16/
The calls to "getElementsByName" aren't working for you. I think that's because "name" is not a proper attribute for <a> elements, but I have not found any MSDN documentation supporting that notion. The behavior, however, very strongly suggests that that's the case.
edit — well no, it doesn't seem that "name" is improper for <a> elements after all; however, for whatever reason that's the cause of your problems. The calls to "getElementsByName" are returning empty node lists, so your "for" loops don't do anything.
It definitely has to do with getElementsByName not working with the div element in IE. Easy fix though since you already have classes on those two things, use getElementsByClassName.
var tabs = document.getElementsByClassName("tab");
var seltabs= document.getElementsByClassName("seltab");
Working Fiddle: http://jsfiddle.net/CeVa9/1/
Note: Tested in IE9.