SitePoint Sponsor |
|
User Tag List
Results 1 to 22 of 22
-
Nov 5, 2003, 15:30 #1
- Join Date
- Jan 2002
- Location
- NJ/NY
- Posts
- 346
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
using javascript to change specific css parameter
Hey, I would like to achieve something to this effect...
Code:document.getElementById('hello').style.border-top = "2px red solid";
Thanks,
daveLast edited by dtang4; Nov 5, 2003 at 16:09.
Forget WordPress. Launch a 300,000+ page autoscaling Job Search.
FREE GUIDES
Google Rapid Indexer - 21K in 21 Days - 7 Steps to Start a Site
-
Nov 5, 2003, 15:49 #2
- Join Date
- May 2003
- Posts
- 1,843
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
document.getElementById('hello').style.borderTop = "2px red solid";
I see you've taken the 'I think I'll type this in & see what error message I get' approach to scripting.I like that.
::: certified wild guess :::
-
Nov 5, 2003, 16:07 #3
- Join Date
- Jan 2002
- Location
- NJ/NY
- Posts
- 346
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Awesome. Thanks for the help.
Can you point me to a resource that'll list everything I can plus after "style."? Ie. every possible par for style.par = "something"
Yes haha... my strategy is somewhat unrefined, hehForget WordPress. Launch a 300,000+ page autoscaling Job Search.
FREE GUIDES
Google Rapid Indexer - 21K in 21 Days - 7 Steps to Start a Site
-
Nov 5, 2003, 16:18 #4
- Join Date
- May 2003
- Posts
- 1,843
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
::: certified wild guess :::
-
Nov 5, 2003, 16:40 #5
- Join Date
- Mar 2002
- Location
- Manchester, UK
- Posts
- 853
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Theoretically, you should be able to access all CSS properties, just like you were trying to. You're nearly there, but you're missing one vital bit of information: hyphens are invalid characters in javascript identifiers.
This means that, when attempting to access a property that, like border-top, has a hyphen in the name, you can't just use the regular CSS property name. Therefore, when accessed this way, you have to use a different property name.
But what's the property name?
- Take the name of the CSS property you want to access
- capitalise the first letter of each word after the first
- Remove the hyphens
Thus, border-top becomes borderTop; list-style-type becomes listStyleType; background-color becomes backgroundColor, and so on.gav
http://www.livejournal.com/users/blufive/
browser stats analysis and comment:
http://www.livejournal.com/community/stats_weenie/
-
Nov 6, 2003, 12:19 #6
- Join Date
- Jan 2002
- Location
- NJ/NY
- Posts
- 346
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Oh wow!
Awesome, thanks a lot for the info. That'll give me much more power in coding now.. muAhaHaForget WordPress. Launch a 300,000+ page autoscaling Job Search.
FREE GUIDES
Google Rapid Indexer - 21K in 21 Days - 7 Steps to Start a Site
-
Nov 8, 2003, 08:40 #7
- Join Date
- Jan 2002
- Location
- NJ/NY
- Posts
- 346
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by blufive
HTML Code:document.getElementById('id').backgroundImage = "url to image"; //and document.getElementById('id').backgroundImage = "url('url to image')";
Forget WordPress. Launch a 300,000+ page autoscaling Job Search.
FREE GUIDES
Google Rapid Indexer - 21K in 21 Days - 7 Steps to Start a Site
-
Nov 8, 2003, 10:20 #8
- Join Date
- Nov 2002
- Location
- Netherlands
- Posts
- 165
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Take a look at http://msdn.microsoft.com/library/de...ence_entry.asp for a nice overview of the objects and their respective properties. You can go to the object list, pick a particular object, and it'll then serve you with both the in-tag properties, CSS properties, and scripting access to the CSS properties.
Ofcourse it's cut to microsoft browsers, but even then it's still a very good overview of a lot of properties available in almost all browsers. I never needed anything else than that.
-
Nov 8, 2003, 10:26 #9
- Join Date
- Jan 2002
- Location
- NJ/NY
- Posts
- 346
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Wow, that resource is rocking.
Thanks a lot!Forget WordPress. Launch a 300,000+ page autoscaling Job Search.
FREE GUIDES
Google Rapid Indexer - 21K in 21 Days - 7 Steps to Start a Site
-
Nov 8, 2003, 11:45 #10
- Join Date
- May 2003
- Posts
- 1,843
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Well - first of all: where's that Style object?
Code:document.getElementById('id').style.background = "url(url to image)";
Disagree about the msdn docs; Microsoft has tons of non-standard, proprietary items. If you learn by referring to them, you'll spend a lot of time wondering why things don't work elsewhere.
http://academ.hvcc.edu/~kantopet/css/index.php::: certified wild guess :::
-
Nov 8, 2003, 12:10 #11
- Join Date
- Jan 2002
- Location
- NJ/NY
- Posts
- 346
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Oops, forgot to type the style part, heh.
Great, thanks a lot! I'll check out that link.Forget WordPress. Launch a 300,000+ page autoscaling Job Search.
FREE GUIDES
Google Rapid Indexer - 21K in 21 Days - 7 Steps to Start a Site
-
Nov 8, 2003, 13:51 #12
- Join Date
- Nov 2002
- Location
- Netherlands
- Posts
- 165
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Microsoft also only halfly implement normal CSS standards, hence making the reverse true: By using msdn you make sure you dont have to wonder why it doesnt work in IE. For example the :hover psuedo class and the CSS identifiers for siblings etc. I rather have it right the first time for 90% of the visitors, then polish to make it work for the minorities as well
Anyways, use what you like, and lets all hope all but one browser dies soon, so we can finally have a peaceful and easy world
-
Nov 8, 2003, 14:13 #13
- Join Date
- Sep 2002
- Location
- Bournemouth, South UK
- Posts
- 1,551
- Mentioned
- 1 Post(s)
- Tagged
- 0 Thread(s)
Is there a way you can set the CSS in javascript before the object has been applied without using document.write(<style>............................)
I have browser specific CSS, no scroll-bars, rounded corners, rotating (turning) filters etc.....LiveScript: Putting the "Live" Back into JavaScript
if live output_as_javascript else output_as_html end if
-
Nov 8, 2003, 19:52 #14
- Join Date
- May 2003
- Posts
- 1,843
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I rather have it right the first time for 90% of the visitors, then polish to make it work for the minorities as well
Often it's not just a matter of 'polishing' something (or did you mean 'Polish minorities' ?)
Seen enoughon boards like this to know the routine...(HELP!!! Script won't work in Netscape...emergency!!!)
http://www.zeldman.com/daily/0203a.shtml#debacle::: certified wild guess :::
-
Nov 9, 2003, 06:07 #15
- Join Date
- Nov 2002
- Location
- Netherlands
- Posts
- 165
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Markdidj:
Well, you can ofcourse build the CSS in memory, there are functions and objects available for that purpose. After that you can just create new html elements and then using adjacent/beforeEnd inserts to put them in the html next to/inside a placeholder HTML element.
adios:
I dont think you have been reading well. By following the docs you gave you will run into the very same compatibility problems, but then with IE not working. They are not cross-platform (you meant cross browser probably), nor cross-browser, since IE just wont take what you write.
The only thing that I want to point out really is that none of the two aproaches is better in essence, since they will both leave a browser in failure.
I quoted the percentage as a means of outlining why my personal preference goes out to writing for IE. I can imagine there are reasons why one would like to start out with Netscape (prolly standards complying) code and then polishing/patching it for IE tho. I was curious about them really.
-
Nov 13, 2003, 10:17 #16
- Join Date
- Jan 2002
- Location
- NJ/NY
- Posts
- 346
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
change the link colour of the id
Wow, this topic is still on the first page! haha
Ok, I have another related question. I want to change the link colour of the id. This is what I tried...
Code:document.getElementById('idname').style.a.color = "black"; document.getElementById('idname').a.style.color = "black";
(Sorry if this is self-evident.. heh)Forget WordPress. Launch a 300,000+ page autoscaling Job Search.
FREE GUIDES
Google Rapid Indexer - 21K in 21 Days - 7 Steps to Start a Site
-
Nov 13, 2003, 12:09 #17
- Join Date
- May 2003
- Posts
- 1,843
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I want to change the link colour of the id.::: certified wild guess :::
-
Nov 13, 2003, 12:28 #18
- Join Date
- Jan 2002
- Location
- NJ/NY
- Posts
- 346
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Sure.
Let's say this is my style sheet code:
Code:#main_nav {width:100%; background:#FF6600; font-size:10px; padding: 4px 4px 4px 60px; color:#FFFFCC; } #main_nav a {margin:1px; padding:3px; color: white; text-decoration:none}
Code:<div id=main_nav> hello, here is a <a href=http://google.com>link to google</a>. </div>
Forget WordPress. Launch a 300,000+ page autoscaling Job Search.
FREE GUIDES
Google Rapid Indexer - 21K in 21 Days - 7 Steps to Start a Site
-
Nov 13, 2003, 12:44 #19
- Join Date
- May 2003
- Posts
- 1,843
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>untitled</title> <style type="text/css"> #main_nav {width:100%; background:#FF6600; font-size:10px; padding: 4px 4px 4px 60px; color:#FFFFCC; } #main_nav a {margin:1px; padding:3px; color: white; text-decoration:none} </style> </head> <body> <div id=main_nav>hello, here is a <a id="googlelink" href=http://google.com>link to google</a>.</div> <a href="#null" onclick="document.getElementById('googlelink').style.color='#0f0';return false">change link color</a> </body> </html>
::: certified wild guess :::
-
Nov 13, 2003, 13:33 #20
- Join Date
- Jan 2002
- Location
- NJ/NY
- Posts
- 346
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Is that the only way to do it?
Cause, I plan to have a lot of links. I would then need to create an id for each link. Is there some anomaly to...
document.getElementById('main_nav').style.aColor = "black";
that works.. heh.Forget WordPress. Launch a 300,000+ page autoscaling Job Search.
FREE GUIDES
Google Rapid Indexer - 21K in 21 Days - 7 Steps to Start a Site
-
Nov 13, 2003, 13:44 #21
- Join Date
- May 2003
- Posts
- 1,843
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Code:var main_nav = document.getElementById('main_nav'); var nav_links = main_nav.getElementsByTagName('a'); for (var a_link, i = 0; i < nav_links.length; ++i) { a_link = nav_links.item(i); a_link.style.color = '#0f0'; }
::: certified wild guess :::
-
Nov 13, 2003, 15:47 #22
- Join Date
- Jan 2002
- Location
- NJ/NY
- Posts
- 346
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Oh, nice. Thanks a lot!
Forget WordPress. Launch a 300,000+ page autoscaling Job Search.
FREE GUIDES
Google Rapid Indexer - 21K in 21 Days - 7 Steps to Start a Site
Bookmarks