How to properly assign style.backgroundClip = "text"? - javascript

I am having trouble with one line of code. I have been searching the web for hours now and had to resort to stack overflow. When I run this code, it does nothing. Here is the code:
e.style.backgroundClip = "text";
When I researched this, I found that the "text" is not officially existing, however if I use this in the css with background-clip it works. If you have any idea why this is not working, please help. I am using a device running iOS 8 if that helps.
I AM USING A PROGRAM CALLED "EXPRESSO HTML"

Setting text as the value for background-clip property is not a recognised value in the specification:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip#Values
You could force the element to take the inline styling like so:
el.setAttribute("style", "-webkit-background-clip:text");
Notice it also takes the -webkit- vendor prefix. I think only Chrome supports it, I may be wrong.
Fiddle: http://jsfiddle.net/crwk2mac/
Since this variation of background-clip is not well supported, it would not be advisable to use it without decent and well tested fallbacks. This would be best done in CSS and could give you a real headache trying to implement entirely in javascript.

Related

create SVG group with JavaScript

I want to create Elements with g tagname for SVG using JavaScript.
The next code work in Google Chrome but not in Firefox, and I want this work in both.
svg=document.getElementsByTagName("svg").item(0)
group=document.createElementNS("http://www.w3.org/2000/svg","g");
group.setAttribute("name","mygroup")
svg.appendChild(group);
Does anybody know a solution?
The only "problem" that is obvious here is that an attribute called name has no meaning in SVG. Did you perhaps mean id?
The only problem I had was with your first line:
svg=document.getElementsByTagName("svg").item(0)
I just had a quick try in some browsers (sorry, I don't have FireFox installed in a remotely sane way) and with some it didn't get the SVG, even though it was the only one on the page. So I gave the SVG an ID and then it worked. See: http://jsfiddle.net/9RhG2/

Is There A Way To Run Code When The Value Changes In Javascript?

Is there a way possible to do code when the target value changes?
Like:
mod.t[id].messages
In here I have messages that is a holder of objects that contain messages.I want to run my code when the container's values change.Is it possible?
You can use Object.watch but its only implemented in gecko and mostly used for debugging purposes.
That said if you don't need IE6 I'd suggest giving a look at this implementation which works on all modern browsers.
Also, some people might suggest to bind the value to a DOM element, but you REALLY shouldn't do that.

Most efficient way to use selectors in jQuery?

is it more efficient to use $('.active') or $('div.active') ? I have always avoided including "div" because it's extra text in the javascript file I don't want the user to have to download.
Older versions of IE will benefit from the inclusion of div because they don't support getElementsByClassName().
Because of that, every element on the page needs to be selected with:
document.getElementsByTagName('*');
...and manually tested to see if it has the active class.
If you include div, then it is able to narrow it down a bit, since it can do:
document.getElementsByTagName('div');
...then test only those elements.
When I say older versions, I mean IE6 and IE7 since IE8+ supports querySelectorAll.
EDIT:
Browser suppport:
getElementsByClassName: http://www.quirksmode.org/dom/w3c_core.html#t11
querySelectorAll: http://www.quirksmode.org/dom/w3c_core.html#t13
It depends. If you mean performance.
I prepared special test for everyone on JSPerf: jquery class selector test.
On my browser and computer (FF 3.6.13 and Core 2 Duo 1.6) div.active is a bit slower. But found it variable - it seems GC has something doing here.
And after few more tests it seems that div.active:
Speed is variable on FF, sometimes GC turns on 'div.active' test, but generally difference is very small.
Unnoticable difference on Chrome and Safari
Faster on IE9
I like to include the tag name if it helps self-document the code. If I can use
$("nav.primary")
instead of
// this is the primary nav
$(".primary")
I tend to do it.
I guess the best way to get some speed on large pages is to use find instead.
$( your-container ).find("div.active")
Since you always? know where you should look, you can create your own scope. So that the browser only need to search within that area of code.
By the way, you don't need to care about size of the css, EVER :)
Use css minifing tools to minimize the css when the site is in production mode. You can also set your web server to automatically gzip your css files before sending the to the user. And if you don't change your css filename on every pageload, the browser cache up to whole css file.
CSS selectors in jQuery used to be optimized similar to how you would do it for browsers, see: http://css-tricks.com/efficiently-rendering-css/
Specifying a generic tag anywhere, even with an ID or class would be dramatically slower than just specifying the ID or class alone. See:
http://www.no-margin-for-errors.com/demos/how-to-optimize-jquery-selectors/
The above uses jQuery 1.3. Since jQuery 1.4 and the introduction of the Sizzling selector engine, this is less important from what I understand. See:
http://hungred.com/useful-information/jquery-optimization-tips-and-tricks/
For myself, I decided in CSS to use whatever reads the easiest, and I am more specific there since that is only parsed once. In jQuery, however, I have been more careful since those selectors could run thousands of times over the life of a page.

How does the Chrome Developer Tool "Properties" section help with CSS/JavaScript development?

How does the Chrome Developer Tool "Properties" section help with CSS/JavaScript development?
In the screenshot it shows blur, contains, focus, etc.
I don't know what you can do with these.
It's showing you exactly which JavaScript functions are included in that element's prototype (the functions that you can call on that element).
It helps when you're trying to figure out exactly how you can solve a specific problem but you're not sure exactly what JavaScript functions you have available to you.
Speaking about css, i found the dev tool to be very very usefull. I use it to debug my css code and check whatever an element inherited a class that doesn't mean to be there.
I never used it for javascript code, except for random errors i couldn't solve by myself.

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