selector 'nth-last-child(n)' not working in chrome - javascript

alert($('#Content_tab form .form-group:nth-last-child(2)').html());
this and more selection on nth-last-child(n) not working in chrome !!
How ever they are working fine in all other browsers, like in IE8, Mozilla.
Please review my Site and source code
you can find the code near line no. 502

Use this
$('#Content_tab form .form-group').eq(-2).html()
As a javascript developer, I don't like that selector at all. It is agains my rules to use that kind of selector. It will be very non performant. You can give some class to that element while building your markup or this is even better.
$("#Content_tab").find(".form-group").eq(-2).html()

Related

Create a <noscript> element with content fails on IE7 and IE8 (jQuery)

I've seen several threads about reading contents, but nothing on writing to noscript.
$('body').append('<noscript><div></div></noscript>');
In Chrome and IE9 I get a noscript-element with a empty div inside like I expect, but in IE7 and IE8 I just get a empty noscript-element without the div inside.
Example: http://jsfiddle.net/cEMNS/
Is there a way to add HTML inside the noscript-tag that works in all browsers? What I need is to add some tracking code into a noscript-element at the end of the page, but the info I need isn't available until after document ready.
Edit: I'm getting a lot of comments on "why". It's some poorly done tracking library that requires this. We don't have access to the code to change it. Regardless, I find it interesting that it works in some browsers and not in others since jQuery was supposed to work equally in all browsers. Is it simply a bug?
Edit2: (2 years later) Adding a noscript on the browser doesn't make sense, I know. My only excuse not the question the task I had was because of lack of sleep, like everyone else in the project. But my rationale was that jQuery should behave the same on all browsers and someone might want to do this on the server.
Regardless of the tracking code, what you are doing (or are required to do) makes no sense!
Why? There are two cases possible here:
user has JavaScript enabled in which case the NOSCRIPT get's inserted into the DOM but is ignored by the browser (does nothing)
user does not have JavaScript enabled, NOSCRIPT does not get inserted and does not "execute"
The end result of both cases is that nothing actually happens.
Just an idea: You could try giving your noscript tag an ID, and then try to use native js.
for example:
$('body').append('<noscript id="myTestNoScript"></noscript>');
document.getElementById('myTestNoScript').innerHTML = '<div></div>';
I would claim that if it does not work with native js, it will not work with any library (feel free to correct me on this one).
I tried following simple HTML code:
<html>
<body>
<noscript>I'm a noscript tag.</noscript>
</body>
</html>
Then I did analyse this with IE8 (in IE7 mode) and his integrated code insprector. Apparently the IE7 checks are script allowed. If so he declared it as empty. And empty tags will be ignored. Unfortunatly I could not try that with disabled script option, because only the Systemadministrator can change the settings (here at my work).
What I can assure you, the noscript does exists. If you add
alert($('noscript').size());
after the creation, the result will be 1.

javascript checkbox containers - is there a simpler way to write this

I'm trying to make a checkbox check when I click not only the checkbox, but also the container it's in. The problem I faced is that when I checked a checkbox, it fired it twice because it was also clicking the container. I've come up with the following solution that seems to work fine, but I have a feeling there's a simpler way to do this and I'm looking to learn to really why short and compact javascript, so any advice would be helpful :)
http://jsfiddle.net/masedesign/8q5TQ/
$(function(){
$('td.cell input').click(function(e){
e.stopPropagation();
});
$('td.cell').click(function(){
$(this).find('input').click();
});
});​
The e.stopPropagation() method prevents the event from bubbling.
just for fun I tried to achieve the same effect without javascript: if you're interested in a pure CSS solution working only on newer browser (it relies on :checked pseudoclasses) look at this fiddle: http://jsfiddle.net/g6Sx7/2/ (but if you're interested I can improve it with a js fallback for old IE)
Edit: a fiddle with js fallback: http://jsfiddle.net/g6Sx7/7/ this code should work fine also on IE6 but here the problem is about CSS support (the adjacent sibling operator + is not supported on IE6) : the whole effect won't work there, but anyway you cannot have a box shadow in that browser... so I think it's not a great problem.
If you are not performing any other task when the checkbox is checked i.e. the js that you have written is just for the sake of making the box clickable then i would suggest to take a CSS approach rather then JS.
here's a working example http://jsfiddle.net/8q5TQ/6/
Note: this works in IE7/8/9 FF (latest installed in my machine) and Chrome (latest installed in my machine)
Update: (after reading ur comment) i don't have IE 6 (sorry) but tried in quirk's mode and is working fine. Hope this helps :)

Javascript autocomplete works in IE and Chrome, doesn't work in Firefox

I'm working on a client's site which utilizes a Javascript autocomplete feature in the search form. The website is in Hebrew, but please don't let that scare you away - my issue is in code, not English. :)
Link: -removed by author-
Most of the autocompletion options are in Hebrew but I added "test" so that it will be easy to test in English as well.
Basically this autocomplete script generates a text input box, and when the user types in a letter (onkeyup), a list of common values are offered (e.g. "test").
This works fine in both Chrome and IE, but for some reason Firefox is behaving differently.
When you enter a letter in Firefox, according to the error console:
Error: searchResult1 is not defined
Source File:
Line: 1
Same goes for searchResult0 in the second input field (line ~460 in the source code).
If you look at -removed- the autocomplete script does work in Firefox, so I don't really know what it is I could have changed that broke its functionality.
Thank you for any help with this :)
The problem is onkeyup="searchResult1.style.visibility='visible';...", it should be document.getElementById('searchResult1').style.visibility - you are referring to an element by its ID. It's an old MSIE feature that elements with an ID turn into "global variables" but that's really not something you should use. Other browsers implemented support for this misfeature ("global scope pollution") to stay compatible with MSIE but it is merely a compatibility layer and only kicks in under certain conditions.
Why don't you try using jquery autocomplete plugin rather than writing something on your own. The javascript written is not proper.
Its best to use the jquery autocomplete plugin. I see in you code you are jquery1.5.2
Autocomplete Demo:
http://view.jquery.com/trunk/plugins/autocomplete/demo/
Download and documentation
http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/

Tracking down display errors in IE, when everything looks good in firefox

I am a super newb at developing web pages. Especially pages that are created dynamically from javascript.
I have a page that I have worked on that uses some templates from prototype, and widgets from dojo, as well as plain old javascript. This page looks and acts perfectly in firefox.
It is basically adding rows to a table, and adding widgets to the cells.
The widgets basically seem like they are in the wrong column/wrong place.
Where do I start looking to figure out what the incompatibilities are between firefox and IE?
There are lots of sites that will give you information about compatibility. I'd check google. Also, you can download IETester which will allow you to see how your site looks in most IE versions (5.5+).
Take a look at: http://www.quirksmode.org/
I am currently trying to make a template that displays well with FF do the same in IE.
So far, I am breaking it down div by div with corresponding JS function.
Then it is easier to look up the specifics of that particular piece you are trying to make compatible.
For example, I was implementing the enter key and noticed it worked well in FF and not IE. After I looked at that specific input box in html and gathered there were no problems with it, I dove into that specific JS function. Inside I found that the currentTarget wasn't "working". I did a quick search on current target in IE and got all the info I needed to get it to work.
Get yourself a good JS debugger as well, FireBug works with both browsers.
There just aren't good web standards in the web industry right now. Everyone is doing their own thing, it is like the house and bank market. These guys are trying though.

need help with IE 6

so i've been working on a website now for like a couple months and i test it on chrome mainly. but before i release anything big i always check it on firefox 3.something and IE7. Now i've received some complaints that that it doesn't look very good in IE6 and when i do check it... well ya it doesn't look like its supposed to. Is there any quick fix that i can add to my HTML to make it look the same in IE6 as it does every where else?
At the risk of downvotes: have you tried adding IE6 to your test matrix? If you have a significant number of users complaining that it looks bad on IE6, you clearly have a significant number of users using IE6 to use it, so it seems like it would be worth your while to just add it to the set of browsers you check before release. Just sayin'.
A really good start is http://code.google.com/p/ie7-js/ Just place it in conditional comment tags in the head of your document and it will make ie6 'standards-compliant'. After that make sure you have seperate css documents for each version of IE, and make sure all of your code is valid with w3's validator. Also declaring a doctype can fix many issues, but it MUST be on the very first line that the browser sees.
Edit: also, for png transparency, I've found that this http://www.twinhelix.com/test/ (IE PNGFIX 2.0 Alpha) works best.
There is no quick trick to getting everything to work. Pretty much have to examine each element that looks different.
That said, you might try looking at a CSS reset file.
Yahoo has one.
And if you search google I'm sure you can find others.
Read this: Internet Exporer box model bug. Also try using YUI reset or Eric Meyer's resetReloaded to set a baseline for all your styles.
And stop developing in Chrome! Try Firefox with Firebug.
How badly does your website 'break' in IE6? If it's minor, then I wouldn't worry about it.
How critical is it that it works in IE6? It's share of the market is slowly but surely declining (Looking at my own logs from a Government website also shows that IE6 is definitely going away). Can you display a message on your website letting users know if they use IE6 and advising that they upgrade?
There are many reasons to upgrade, and educating your users as to why they should upgrade might also be worthwhile?
Uhm... if there is a simple solution I really want to know it. :)
But you can anyway use this good Microsoft tool to cross-test your pages.
It can be usefull for compare the final render of a website.
CSS resets will probably do nothing if it looks fine in IE7. Things like double margins when floating and overflow:auto bugs are things that need to be manually added for each occurance. I'd suggest adding the following line to your head tag:
<!--[if lt IE 7]><style type="text/css">#import "/stylesheets/ie6.css";</style><![endif]-->
and then writing an ie6.css file to fix all the bugs (yes, one at a time)
Probably not what you wanted to hear, but it is why everyone hates IE6 so much
you can check version of client browser and include css fixing for that browser. but most simple solution is to show an alert or notification to client that his browser is outdated and provide links to download latest browser
here are some way to show that notification
http://garmahis.com/tools/ie6-update-warning/
i like this solution
http://www.browser-update.org/

Categories

Resources