I'd like to change the attribute of a Google Calendar select element.
The code I'm trying works in WebKit browsers, but not in FF or IE.
Here's what I have:
$jqry('iframe').contents().find('.calendar-nav').attr('style','display: table; background: blue');
I think it's getting stuck on the find() function. Is my iframe being treated as ajax? Is the issue being caused by mime/content type? Please help with a code example if possible.
Many thanks!
Try this,
Chrome/Firefox:
xml.children[0].childNodes[1].innerHTML
IE8+/Safari:
xml.childNodes[0].childNodes[1].textContent
IE8:
xml.documentElement.childNodes[1].text;
I found a solution that worked for me. It seems Firefox and IE didn't like the vagueness of having only a tag selector: $('iframe'). As soon as I added a class it worked: $('.myiframe'). I'm guessing an ID would work just the same: $('#myiframe'). I was only using the tag selector because I didn't want to modify the plugin I was using, and it was the only iframe on the page -- oh well. Thanks to those who provided input.
Related
I would like to add span before text inside <option> tag and style it (it should represent color in select menu). However it does't seem to work...
How to make this piece of code working?
JsFiddle: http://jsfiddle.net/bartuz/08e0L9j2/2/
It seems example above does work in Firefox only... what about other browsers?
This will depend on your web browser. In the latest version of Firefox, it works fine. However, it doesn't work in the latest version of Internet Explorer.
Your question is a bit loaded - and I suspect that's why it got downvoted - you are asking why it's not working, rather than how to get it to work.
It's not working because it's not really a supported feature of selectboxes (yet!)
I'd suggest you look into using JavaScript to achieve the same result (and specifically, the jQuery UI selectmenu) which should support this type of 'advanced' select box.
An option element isn't allowed to have child elements.
I've extended your same answer, but instead applied the background color to the option element as demonstrated in this jsfiddle link:
https://jsfiddle.net/go4zee/6L0jjjoa/
$('#tag_item_color option').each(function () {
var color = $(this).text();
console.log(color);
$(this).closest("option").css({"background-color":color});
})
You shouldn't rely on the fact that your hack works on Firefox, does not mean it should on Chrome too.
Anyway, styling selects was always frustrating and there's no easy way to customize native select elements.
If you're looking for a way to style the native select elements, maybe this will help:
https://catalin.red/making-html-dropdowns-not-suck/
On my page I'm currently doing something like this: http://jsfiddle.net/FBCSt/6/ I really don't know why, but in Chrome I got some strange issues with that - sometimes the contents of the div elements are not loaded correctly. In IE, Safari and Firefox it work fine, but as I said, in Chrome it is causing some trouble.
That's why I want to know, if there is a more sleek way to do this? (There are three buttons, every one is assigned to one div. Only one div should be visible)
I am thankful for every answer =)
EDIT: Thanks everybody. This is the solution. It works well =)
"a better way: jsfiddle.net/FBCSt/13 – #Mohammed ElSayed 20 mins ago"
Try this: http://jsfiddle.net/FBCSt/10/
In IE, Safari and Firefox it work fine, but as I said, in Chrome it is
causing some trouble.
I really don't see an issues when testing under Google Chrome 19.0.1084. But in any case,
That's why I want to know, if there is a more sleek way to do this?
Yep, there is. Since one of your tags is jQuery, I suggest you take a look at jQuery UI's tabs.
Why don't you use show() instead of toggle()? Maybe the issue is related to using toggle(). And you can combine the elements to be hidden: For example,
$('#page2,#page3').hide();
$('#page1').show();
Or as nicely put by Mohammad,
$('#page1').show().siblings().hide();
I have working solution on this url : pastebin it works in chrome and also in FF.also it will work even if you add 1000 id with page#100 but still it will not have too much code. thanks.
Like Abody97 said: try JQuery UI tabs
If you're looking for a "more sleek" way of doing this, try this fiddle: http://jsfiddle.net/NCbW6/
It doesn't bother with specific ids for each element so you can add as many as you'd like without changing the JS.
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 :)
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.
i cannot focus IFRAME In FireFox , But i Can Focus it on IE as Follow:
frames["MyFrameID"].focus();
i have trying many solutions but all not working , Can Any One Help Me??
Try
document.getElementById("MyFrameID").contentWindow.focus();
Edit: I don't think you an access a particular frame in Firefox using the id in the frames collection.
Have you tried:
document.getElementById('MyFrameID').focus();
However, the focus() method is not defined for IFRAME elmements: http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-50708718
The focus() method is defined for IFRAME elements.
Have a look here http://www.w3schools.com/jsref/event_onload.asp
It is listed in html tags which support it.