|
CSS - Within A Javascript Function, How To Pass A Css Class?
I include a CSS style sheet in my php page and within a javascript function, I pass a hard-coded color code. I want to change that hard-coded color code to be the color of one of the css classes. How do I go about doing this? The reason I need to do this, is because the css file included will change from user to user, but the class name (holding the color) always remains the same. Help please. Thanks in advance.
Similar TutorialsHi all, Not exactly sure where this post truely belongs (CSS, HTML, JS forums) but firt trying this forum. I'm trying to create a simple expandable link but the link jumps up and down when expands/collapses. The code attached, any ideas any one. Code demonstrates the problem so please save it as .html and view it. -- Thanks. Code:
<style type="text/css">
.faq_hidden
{
visibility: hidden;
}
.faq_shown
{
visibility: visible;
}
</style>
<script type="text/javascript">
function showReview(n)
{
document.getElementById(n+'_r').className = 'faq_hidden';
document.getElementById(n+'_f').className = 'faq_shown';
}
function hideReview(n)
{
document.getElementById(n+'_f').className = 'faq_hidden';
document.getElementById(n+'_r').className = 'faq_shown';
}
</script>
<div id="r1_r" class="faq_shown">
<a onclick="showReview('r1'); return false;" href="#">
<div>
Completing the questions 1
</div>
</a>
</div>
<div class="faq_hidden" id="r1_f">
<a onclick="hideReview('r1'); return false;" href="#">
<div>
Completing the questions
</div>
</a>
<p>
Completing the questionnaire should take 8 - 10 minutes of your time.
Be honest, answer as you would normally behave and act, in response to
the statements and questions.
</p>
</div>
Is something like this possible, if yes, what's the correct format? input, textarea, button, select { font-size: 8pt; font-weight: bold; onfocus="this.style.background='#DDDDDD'"; onblur="this.style.background='#EFEFEF'"; color: #000000; background-color: #EFEFEF; border: 1px solid #CCCCCC; font-family: Tahoma, arial, helvetica, serif; } I am creating a standalone (included with <script src>) script to display a slideshow of images, and need the images' container DIV to resize to the height and width of the largest image, PLUS the border width. I can get the height easily enough, but the border is giving me problems. The code I'm using now is: Code:
function getcss(myclass,element) {
var CSSRules;
if (document.all) { CSSRules = 'rules'; }
else if (document.getElementById) { CSSRules = 'cssRules'; }
for (var i = 0; i < document.styleSheets[0][CSSRules].length; i++) {
alert ('.' + document.styleSheets[0][CSSRules][i].style['border'] + '.');
if (document.styleSheets[0][CSSRules][i].selectorText == myclass) {
return document.styleSheets[0][CSSRules][i].style[element]
}
}
}
function InitializeImageRoller() {
for (var q = 0; q < Files.length-1; q++) {
var hidden = eval('hiddenpicture' + q);
if (MaxW < hidden.width) { MaxW = hidden.width }
if (MaxH < hidden.height) { MaxH = hidden.height }
Container.style.height = MaxH;
Container.style.width = MaxW + getcss('Container','borderWidth');
hidden.style.display = "none";
}
}
right now I'm testing, and in the first function, I have a line " alert ('.' + document.styleSheets[0][CSSRules][i].style['border'] + '.');". This works fine, but returns ALL the properties of the border. I need it to only give me the width. What should the ['border'] be changed to to accomplish this? hey, I got a table, every <td> in the table got the css class .regular. (<td class='regular'>). When the user moves their mouse over a row, that row should change color. This works with the following code: <tr onmouseover='this.className=\"hoverRow\"'> However, this only works if the td's in that row have no class set yet. And since all td's in my table have a class set allready, i cant use this. How can i overwrite the class of the td's by the class for the whole row? thanks in advance Using the following example: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
a
{
display: block;
}
a.one.on, a:hover.one, a:hover.one.on
{
color: red;
}
a.two.on, a:hover.two, a:hover.two.on
{
color: orange;
}
a.three.on, a:hover.three, a:hover.three.on
{
color: green;
}
</style>
</head>
<body>
<a href="#" class="one">one</a>
<a href="#" class="two">two</a>
<a href="#" class="three">three</a>
<p> </p>
<a href="#" class="one on">one</a>
<a href="#" class="two on">two</a>
<a href="#" class="three on">three</a>
</body>
</html>
Notice how, in IE6 (works fine in FF), when the secondary style named 'on' is added, all 3 links in the 2nd set display the properties of the style: Code: a.three.on, a:hover.three, a:hover.three.on
{
color: green;
}
(since it is last in the list) rather than the style specified by their respective numbers (i.e. 'one', 'two' or 'three'). Is there a way to overcome this in IE. I've read several forums and know that the technique I'm trying to achieve is possible, however I can't seem to get it to work. Basically I'm trying to shift the background positions of both the list item I'm hovering over and the next list item. I'm sure its just a syntax error and not a logic error, anyways the code is below - any help would be greatly appreciated! Code:
HTML Code
<div class="menu">
<ul>
<li><a href="#" class="search"></a></li>
<li><a href="#" class="battery"></a></li>
<li><a href="#" class="cart"></a></li>
<li><a href="#" class="contact"></a></li>
</ul>
</div>
CSS
.search, .contact, .cart, .battery
{
width:100px;
height:30px;
margin-left:-1px;
display:block;
}
.search
{
background-image:url(Images/search.png);
}
.contact
{
background-image:url(Images/contact.png);
}
.cart
{
background-image:url(Images/cart.png);
}
.battery
{
background-image:url(Images/battery.png);
}
ul li a.search:hover
{
background-position:0px 60px;
}
ul li a.search:hover ul li a[class=battery]
{
background-position:0px 60px;
}
Sorry for the lousy title, can't come up with better wording.... What I'm trying to say is can someone give me an example code of a css syntax that accept one css classname and add a few more properties to it under a different class name. Sort of like merging two classname into one. Thanks... Since it's in the news since a few days that the upcoming Internet Explorer 7 will not be passing the Acid Test meant to demonstrate browser support or lack thereof for CSS2, I thought I'd humor everyone and post results from a quick experiment on how the four main browsers on Windows platfrom performed. In order of success, reference image first: Click here to view screenshots in full size Note the "ERROR" texts in Opera and IE. Ironically, despite The Opera Challenge to Microsoft in the Acid2 ring, Opera performs sub-standard itself. I'm using ASP.NET 2.0 for my site. I already have a CSS that is working for the site; however, because an ASP.NET lable requires CSS Class, how do I convert my current CSS to a CSS Class? I know that a CSS class start with a period then a unique name. The problem is how do I implement the li, ul, a, and so on. Here is what I have that I want to convert to a CSS Class. #nav { padding: 0; clear: both; } body.main #nav, body.blogger #nav { float:right; width: 220px; \width: 250px; w\idth: 220px; margin: 10px 10px 0 0; padding: 0; } body.second #nav { float:left; width: 200px; \width: 210px; w\idth: 200px; padding:0 0 20px; margin: 0; } body.second #nav img { padding-bottom: 10px; } #nav a { color: #006; } body.second #nav ul { list-style: none; padding: 0 0 0 5px; margin: 0; } body.second #nav ul li { margin: 0 0 7px 0; font-size: 11px; } body.second #nav ul li ul li { margin: 0 0 5px 15px; } .skip { display:none; } /* end #nav */ #content p, #nav p { padding: 0; margin-top: 0; margin-bottom: 10px; line-height: 140%; } #content li, #content ol { margin-top: 0; line-height: 140%; } code, pre { font-family:"Courier New", Courier, mono, monospace; } /* definition lists, all that and a bag of chips! */ #content dl { margin:0px; padding:0; } #content dt { font-weight: bold; } #content dd { margin-top: 0; margin-right: 0; margin-bottom: 10px; margin-left: 0; padding: 0 5px 0 0; } /* end definition list*/ Any help is appreciated. In CSS, which would be more appropriate (or I suppose semantically correct) to use, p.text or .text p ? P representing the <p> tag, and "text" representing the class "text". Any info or links to pages with info on this matter would be greatly appreciated! I am new to CSS and confused about when to use id # and when to use class . Some enlightenment on the benefits/purpose of each would be helpful. I have read several tutorials - but the same pretty much the same to me so I must be missing something Thanks! When defining css in a webpage, it can be done using either a class or id. My understanding is that css uses . notation with classes and # notation with id's, regardless of whether the actual css is in the webpage itself of linked externally. Please correct me in error. My css uses classes and external . notation. When I use id's only and # notation exernally, I lose all my styling. Its only when I use the # notation internally that the styling works. In order to use external css I need to declare both a class and id and dot notation. Internally only an id. Is this correct behaviour? The book i am reading does not clear this up. When would you use class vs id to put elements in different catagories? why not use all id? It seems to make more sense.. ie. make all headers id="header" and divs also class. thank you in advance Which is better to use id (#) in CSS or to use class (.) ?? does it affect website rank? So I want to create a really simple css file that uses a lot of the same styles. For example I may create a box that takes up two fifths of the page, and is floated left or right, similarly I may have a box that takes up three fifths, or four fifths etc. The main thing here is that I'm thinking the specifics will be placed inside an ID like so: Code:
#twoFifths {width:275px; padding: 0px 12px 0px 50px;}
#threeFifths {width:375px; padding: 0px 50px 0px 12px;}
And then to handle the float I'd use a class like so: Code:
.floatRight{float:right;}
.floatLeft{float:left;}
Is this considered good practice? Obviously as I generate layouts I may want to float either right or left so having an ID for every single thing I may want to use would be a little overwhelming. The problem with this of course is that I can't call an ID twice in a page, and I can't have more than one class... so for example: Code: <div id="templateBlueBox" class="floatRight"> <h2>Six free lessons</h2> <p>These free Lessons are great to read online or print out and carry with you.</p> </div> <div id="templateGreenBox" class="floatRight"> <h2>New Features</h2> <p>Some fun, helpful study tools to help you get more out of every Lesson. Check them out!</p> </div> <div id="templateOrangeBox" class="floatRight"> <h2>Sign up for email updates</h2> <p>So we can let you know when you can subscribe to get it every week.</p> </div> <div id="templatePinkBox" class="floatleft"> <h2>Send us feedback</h2> <p>Is it the coolest thing ever (or is it just okay)? Tell us what you think!</p> </div> <div id="templateBlueBox" class="floatLeft"> <h2>Submit photos</h2> <p> You can be part it..</p> </div> So as you can see I'm having to repeat the id templateBlueBox. Is there a better approach for accomplishing this? Problem solved. Hi all, new css user here and have a slight problem. I am trying to change the color of the 'post date' on my forum that i am creating. In the source code for this area, there is no div id, but just three classes namely, "top-post forum-post clear-block", "post-info clear-block", and "posted-on", with the first being the most outer class. In my css sheets there are references to the latter two classes, but adding 'color:#fffff', does not change the text color. I have tried listing them all from outer to inner and then declaring the color but also this did not work. I am using drupal and the advanced forum module, and saw using inspect element that another site just had the color specified under 'posted-on', and it was working, but not for me. Even with an !important tag, it just comes up with an exclamation mark on the 'inspect element. I was wondering if anyone had any suggestions as to how to change this? Any help massively appreciated! Hi .. Im still new to all of this (Web and CSS in general) but would like to know if the following is a possiblity... assuming the CSS Below ... div#item{ width: 200px; height:100px; } div#item_image{ width:50px; height:100px; background-image:url(blahblah); } div#item_text{ width: 140px; height:100px; (...other properties) } then when I create an instance of this i use the following HTML <div id = "item"> <div id = "item_image> </div> <div id = "item_text> </div> </div> I know its maybe not the best way to do it .. but im trying to illustrate a point ... each time I create an "item" I am required to redeclare or redefine the child divs ... is there any way I can "embed" (for lack of a better word !) the children so that everytime I create an "item" it automatically creates the "item_image" and "item_text" so basically .. my HTML will just be <div id = "item"></div> and nothing else ?? Thanks for any guidance ... Hi There, I am working with an online educational system and working to style it accordingly. The system has "modules" that contain information of various types in their own distinct boxes. I would like to target each heading and style it individually ie different colours etc. I know this is probably a very basic problem and I'm relatively new to the process, but any help would be much appreciated. Here is the html generated by the system for one of the boxes "module:_148_1" ...............Start HTML Snippet <div class="portlet clearfix " id="module:_148_1"> <!-- extid:148: --> <h2 class=" "> <span class="moduleTitle" >What's happening at Ivanhoe</span> </h2> <div class="edit_controls"> </div> <div class="collapsible" style="overflow: auto;"> ............................End HTML Snippet My Current generalised styling on all boxes is achieved via the following css #moduleTitle, .portlet h2 { color: #fff; padding: 4px 52px 5px 6px; background: #13770a; background-image:url(images/headings_details.png); background-repeat:no-repeat; background-position:right top; margin: 0; font-size:110%; font-weight:bold; position:relative; vertical-align:middle; overflow:visible; } As an example, if I wanted to target this particular module with ID module:_148_1 and set the background colour to #a0012e how would I best achieve this? Many thanks Chris I have a form with a list of things. The number of things in the list is variable, depending on certain factor, different things, different numbers of things. Next to each thing is a radio button. There is a question with two radio buttons, "yes" and "no". When "no" is selected, I want the radio buttons to be disabled, and the color of the text to change to gray. For the radio buttons, I have a simple JS function: javascript Code: Original - javascript Code function enableCFFID() { document.cartform.cffid.disabled=false; } function disableCFFID() { document.cartform.cffid.disabled=true; }
For the test that goes with each thing, obviously I don't want to have to assign unique ID (perhaps in a span tag that encloses the text). I would want a common name for all of them. But this would mean I can't use getElementById. What other method can I use to change the class for a group of span tags who's number is variable? |
|||||||