Get value from uncomputed css style with javascript / jquery - javascript

I have a small question concerning css styles and javascript / jquery. Lets say i define the following css style.
.myStile { padding: 5px }
Now I'd like to access the property of padding while not writing an html element to the document. I came up with the following idea which only works with Firefox (IE and Chrome say NaN)
var div = $('<div class="myStile />');
var padding = parseInt(div.css('padding-left'), 10);
is there a way to make this work in IE and Chrome (well trident and webkit I guess) as well? I know that one's able to read whole css files via javascript (and get the class, the properties and so on ...), but that seems to be a bit overkill.

Thanks meo for your comment. This post answers the question. Here's a google find which answers the "other browsers than chrome, firefox, safari" issue.

Related

Add span inside <option> tag and style it

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/

Setting element styles with javascript in firefox

I've got some sizing styles that I'm setting on the fly. I generally develop in chrome, and was directly setting attributes on the style attribute of the element like so:
element.style['padding-right'] = computedRightPadding + 'px';
I found recently that this does not work in firefox (version 24.6.0). The attribute on the element object looks like it's set correctly, but there is no change in the actual styling of the element. I've got a fiddle showing this here.
What's a good, cross-browser way of setting this style with javascript? I found this question, which says to do the method I'm currently using, which doesn't work. I'd rather not rely on an external library for what seems like it should be a trivial operation.
Use: parent.style.paddingRight = '100px';
jsFiddle example
Or parent.setAttribute('style', 'padding-right:100px;');
jsFiddle example

jQuery misbehaving in Safari

I'm having a problem where certain bit of code is working perfectly across all browsers until I come to Safari where it's giving me issues. I inherited this code, and I'm not a jQuery expert so needless to say I'm a bit baffled:
var xt_begin=$('#begin')[0];
xt_begin.currentTime = 0;
xt_begin.play();
"#begin" is an audio element that was set in the HTML that's using this code and the .play() function is in a jQuery plugin that's being used (Link to plugin).
In all browsers except for Safari, play is being defined as if xt_begin were an object of that timer class. In safari, however, it remains undefined and the code stops working. I have no idea how this happens or how to fix it. I can post more code if need be, any help would be appreciated.
**Update
Upon further investigation it turns out it is a DOM element, and I'm a bit thick. However, Safari seems to have a problem recognizing audio elements for some reason. It's identifying it as an "object HTMLelement" whereas Firefox shows it as "object HTMLAudioElement". I'm still stumped on this one.
**SOLVED
Apparently Safari needs quicktime installed on your desktop for it to use audio elements. That's gonna make this app I'm fixing completely useless, but at least I know now. Thanks for the help folks.
Really just a comment. The statement:
var xt_begin = $('#begin')[0];
is effectively the same as:
var xt_begin = document.getElementById('begin');
so xt_begin is either a DOM element or undefined (jQuery) or null (plain JS). Which is it?
In any case, you should probably follow with:
if (xt_begin) {
/* do stuff with xt_begin */
}
to avoid errors.
Try:
var xt_begin = document.getElementById('begin');
Instead of the jQuery line. That works across all browsers and will at least tell you if you have a jQuery problem or a Safari/web page problem.

IE7 ignoring my .js css rules - CSS/Javascript issue?

I am using the classes .js and .no-js on the <html> element to differentiate between layouts that have Javascript and those that don't.
With the <html> element, I added a default class of 'no-js'. Then I include a single line of script in the header, document.getElementsByTagName("html")[0].setAttribute("class","js"); to switch the html class to 'js'. Obviously this line of code will only work for browsers that have js enabled, so the <html> element will become <html class="js"> whereas non-js enabled browsers will continue to read <html class="no-js">.
And then I will simply use .js someElement{ font-weight:bold;} versus .no-js someElement{ font-weight:normal;} to style my page differently.
However, I find that this approach fails dramatically on IE7. On IE7, the script works - or so it seems. On Developer Tools, it shows <html class="js">. However, ALL css styling that start with .js are ignored by IE7, and IE7 behaves as though the <html> element has a class of .no-js. (Check out http://bit.ly/LMre3N to get a clearer picture.)
I can't begin to imagine what exactly is wrong here: is this a case of IE7 behaving wrongly when rendering CSS, or is it a case of scripting not working properly? Here's what I tried:
CSS
Changing the order of .js and .no-js declarations, as I figured it could be the latter overriding the former that's causing the problem - NOPE.
Changing the order of the script and stylesheets, since it might be because IE7 read the .no-js stylesheet before it read the script - NOPE.
Changing the specificity of the declarations - perhaps being more specific will lead IE7 to read the .js declarations - NOPE.
Removing the .no-js class from the document altogether, hoping that IE7 will thus read .js declarations. NOPE - it simply ignores both the .no-js and the .js declarations.
In short, IE7 totally and completely ignore the fact that there is a .js declaration. So I figured it might be the script that had problems, and here's what I did:
Javascript
I added 'type="text-javascript"' to <script> - No effect.
I tried document.documentElement instead of document.getElementsByTagName('html')[0] - still the same.
I used var htmlOrWhat=document.getElementsByTagName("html")[0];
alert(htmlOrWhat);, FF, Chrome, Opera, Safari, IE8, and IE9 returns '[object HTMLHtmlElement]', whereas IE7 returns [object], leading me to think IE7 is not reading the <html> element properly.
I then tried to read the id and lang attributes of <html> to test if IE7 is actually reading the element properly and yes, it retrieves these attributes correctly, it just simply refuse to apply .js css declarations to it.
By now, I'm at my wits' end (though I suspect the [object] anomaly is related to my problem), and I hope someone here at Stackoverflow will be able to help me out. I will really appreciate it if someone can point out exactly what's wrong with IE7 here, and how to fix it. Thanks in advance.
setAttribute() and getAttribute() are generally broken in IE7 and earlier (and compatibility modes in later versions). Use the element's className property instead.
document.getElementsByTagName("html")[0].className = "js";
Here's a fiddle demo - http://jsfiddle.net/ajcw/6Yz8x/1/
SetAttribute() doesn't work as you might expect in IE7. It won't set an attribute on an item after it has been created. You'll need another way to handle the change in IE7.
The answer below suggests using the className property. Or you could probably just use jQuery.
(More: IE7 and setAttribute() to remove classes)
setAttribute() and getAttribute() are broken in IE 7
check this out:
IE7 and setAttribute() to remove classes

Reliably detecting <img> tag support for SVG

I'm currently doing some redesign of a website, basically just upgrading it to a more up-to-date look and trying to make it as resolution independent as possible, and in the name of resolution independence I figured I'd try to use SVG images in the design where the browser supports SVG images in <img> tags. The reason I want to stick to just using SVG in <img> tags rather than using some more ambitious solution is that AFAIK Chrome, Opera and Safari all support it and FF4 seems like it may finally get it as well combined with the fact that the entire site is built on a custom CMS which would have to be partially rewritten to start changing the output HTML (currently it supports custom design images, custom CSS and custom JS includes for each theme).
Now, I've looked around the net a bit myself trying to figure out the best way of doing this and for some reason pretty much every suggested solution I've found has worked poorly (one detect FF3.x as supporting SVG in <img> tags so they didn't display properly there, another one never tried at all, several were overly complex "replace all images with SVG if there is support for it" functions which won't work too well either.
What I'm looking for is really a small snippet that can be called like this (btw, I'm using JQuery with this new theme for the website):
if(SVGSupported()) {
$('#header img#logo').attr('src','themes/newTheme/logo.svg');
/* More specified image replacements for CSS and HTML here */
}
Does anyone actually have a working solution for this that doesn't give inaccurate output? If so I'd be very grateful.
This appears to be the ultimate answer: Javascript: How can I delay returning a value for img.complete. Unless someone comes up with something yielding the correct results immediately.
For old browsers you could use the <object> or <iframe> tag, but that is not a nice solution. Firefox and IE9 (don't know about other browsers) have implemented inline svg now, which can easily be detected:
// From the Modernizr source
var inlineSVG = (function() {
var div = document.createElement('div');
div.innerHTML = '<svg/>';
return (div.firstChild && div.firstChild.namespaceURI) == 'http://www.w3.org/2000/svg';
})();
if( inlineSVG ){
alert( 'inline SVG supported');
}
So, you could replace all images by svg tags then. And I hope, but I have to google on that, that every browser that supports inline svg will support svg as image source.
A good discussion/comparison of methods is here:
http://www.voormedia.nl/blog/2012/10/displaying-and-detecting-support-for-svg-images
Based on that page, I wound up using this:
svgsupport = document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1")
I've been meaning to write a blog post about this, but here's a snippet that should work:
function SVGSupported() {
var testImg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNzUiIGhlaWdodD0iMjc1Ij48L3N2Zz4%3D';
var img = document.createElement('img')
img.setAttribute('src',testImg);
return img.complete;
}
Based on a script by Alexis "Fyrd" Deveria, posted on his Opera blog.
I'm using something similar on my blog, which you can see in action here: http://blog.echo-flow.com/2010/10/16/masters-thesis-update-1/
It will use <img> if supported; if not, and we're not on IE, it will use the a regular object tag; otherwise, it will use an object tag specially created for svg-web. fakesmil is used for the gradient animation. It seems to work everywhere I've tested it. The script that does the work for this example can be found here: http://blog.echo-flow.com/media/js/svgreplace.js

Categories

Resources