|
JavaScript - Change Css Class
Hi,
I need to change my class, but this isn't doing it for me and I don't see why. No error messages, but nothing happens. Code: .myClass {
background-color: yellow;
}
document.getElementById("myId").setAttribute("class","myClass");
Thank You in Advance for Your Help, Lou Similar TutorialsHello, Let's say I have a <div class="main1 secondary">. Is there an easy way to change "main1" to "main2" and make sure it is the first class? I was thinking about using jquery with .removeClass and .addClass but addClass adds it to the end. Any help would be great! Thanks hi all, I am using ajaxcontent javascript to load content into certain parts of the website and all my links work that way.. the problem with that is that I can't use classical approach for building menus.. like when you assign "current " class to your link and then it changes color or whatever when you follow link to another html or whichever website. So I have menu like this .. Code: <li class="current"><a href="index.htm"><b>One</b></a></li>
<li><a href="javascript:ajaxpage('2.php', 'right');"><b>Two</b></a></li>
<li><a href="javascript:ajaxpage('3.php', 'right');"><b>Three</b></a></li>
<li><a href="javascript:ajaxpage('4.php', 'right');"><b>Four</b></a></li>
<li><a href="javascript:ajaxpage('5.php', 'right');"><b>Five</b></a></li>
I'm sorry for my English is so bad.. but I will try to explain what I'd like to achieve.. I'd like to put in some kind of onclick script which will change class of that <li> to current but at the same time I want to change <li class="current"> to <li class=""> or <li class="whatever">... so here I go again.. Code: <li class="current"><a href="index.htm"><b>One</b></a></li>
<li><a href="javascript:ajaxpage('2.php', 'right');"><b>Two</b></a></li>
<li><a href="javascript:ajaxpage('3.php', 'right');"><b>Three</b></a></li>
<li><a href="javascript:ajaxpage('4.php', 'right');"><b>Four</b></a></li>
<li><a href="javascript:ajaxpage('5.php', 'right');" onclick="this.className='current'"><b>Five</b></a></li>
Now this changes the <li> class to current and I only want to have 1 current. In this case link "Five" should have current class others should have no class or class="whatever" its same Thank you for any answers in advance Hey, I currently have my menu on a web page set out using the following method: Code: <div class="linkbox" onmouseover="this.className='linkbox2'" onmouseout="this.className='linkbox'" onclick="location.href='http://www.upthegame.net/';"> General Chat </div> I was wondering if there was a way using javascript to set ALL <div>'s with the class name "linkbox" to change to the class name "linkbox2" onmouseover and return to "linkbox" onmouseout. I would like this to be in a seperate file, I'm guessing this would probably be within an onload function or something along those lines. I'm only familiar with basic JS so please go easy on me Any help is much appreciated. Thanks, Tom. I have a list like this:
Code: <tr>
<td>Some Text One</td>
</tr>
<tr>
<td>Some Text One</td>
</tr>
<tr>
<td>Some Text One</td>
</tr>
When I click a radio button, I want the text to "dim", that is, change color. So I have two CSS classes, on and off. Here's the JS PHP Code: function enableCFFID() { document.cartform.cffid.disabled=false; document.getElementsName('cffidtext').class="cffidon"; } function disableCFFID() { document.cartform.cffid.disabled=true; document.getElementsByName('cffidtext').class="cffidoff"; } But, this does not work. What am I doing wrong??? Hi, is it possible to change the class of an element onClick with a fade? This is the code I have so far which works great for changing the class but I have no idea how to include a fade in this. I am changing the class in order to change the background-image of a div. Code: <a href="#none" onclick="document.getElementById('tool').className ='tool1'">
Many thanks, M I have some javascript code that hides and unhides a menu when a link is clicked, and that is working just fine. What I also need the function to do is switch the CSS class of change_this in the code below to change_that when the link is clicked, and then switch it back to change_this when the link is clicked again. Can someone assist me? I have tried integrating/modifying other scripts I found with this one, but nothing has worked for me. It seems so simple, but I just cant get this thing working. Thanks to anyone who replies with help! Code: <script type="text/javascript">
function HideandUNhideObj(ThisObj){
nav=document.getElementById(ThisObj).style
if(nav.display=="none"){
nav.display='block';
}else{
nav.display='none';
}
}
</script>
Code: <li class="change_this"><a id="nav" href="javascript: void();" onclick="HideandUNhideObj('display');"></a>
<ul id="display" style="display: none;">
<div id="container_div">stuff</div>
thanks anyway
I'm using javascript to change the color of certain words in an html document. Right now it uses <font> to make the change. I would like to use a CSS class named "alert" from an external style sheet to make the change. I've tried multiple things but no luck (className="alert", setClassName="alert" ) What is the correct way to replace the font part with a CSS class? Here is the working script: Code: <script type = "text/javascript">
window.onload = function (){
var text = document.getElementsByTagName('body')[0].innerHTML;
text = text.replace(/disabled/gi, "<font color=red>Disabled</font>" );
text = text.replace(/\blocked/gi, "<font color=red>Locked</font>" );
document.getElementsByTagName('body')[0].innerHTML = text;
}
</script>
Hey all, Hoping someone could help me out with some javascript coding as I am a complete novice to this! I am currently building a website using 1 static page and all the content will be pulled in through different iframes by clicking on a navigation on the page. I found a very handy piece of javascript coding that lets me remove a class from one link and move it to the link that was clicked on (the code will be below). The issue I am facing with this is that if I have Home set to class="On" to begin with and then click on Location, the background image will be added to the Location section but won't get removed from Home until it is physically clicked on. Can anyone help me out with how I can get this to work correctly? javascript: Code: <script language="JavaScript" type="text/javascript">
var Lst;
function CngClass(obj){
if (typeof(obj)=='string') obj=document.getElementById(obj);
if (Lst) Lst.className='';
obj.className='On';
Lst=obj;
}
</script>
HTML: Code: <div id="navWrapper">
<div id="globalNav">
<ul>
<li onclick="CngClass(this);" class="On"><a href="iframes/home.html" target="content_iframe">Home</a></li>
<li onclick="CngClass(this);" class=""><a href="iframes/location.html" target="content_iframe">Location</a></li>
<li onclick="CngClass(this);" class=""><a href="iframes/speakers.html" target="content_iframe">Speakers</a></li>
<li onclick="CngClass(this);" class=""><a href="iframes/agenda.html" target="content_iframe">Agenda</a></li>
<li onclick="CngClass(this);" class=""><a href="iframes/useful_material.html" target="content_iframe">Useful Material</a></li>
<li onclick="CngClass(this);" class=""><a href="iframes/event_presentations.html" target="content_iframe">Event Presentations</a></li>
<li onclick="CngClass(this);" class=""><a href="iframes/gallery.html" target="content_iframe">Gallery</a></li>
</ul>
</div>
<div id="localNav"></div>
</div>
Hi all, I've messing around with CSS and I would like to change the <body> 'class' when the user selects a hyperlink. To do this I've employed the OnClick method within the hyperlink which calls the function updateBodyClass(). Within upDateBodyClass() I would like to add the string "extraMenu" to the body class. Before selecting the hyperlink the body is: <body id="twoColLayout" class="tools"> I want this to change to: <body id="twoColLayout" class="tools extraMenu"> This is the code I currently have but it doesn't work. Please can someone point me in the right direction. Thankyou in advance for your time. <html> <head> <title>test</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script> function updateBodyClass() { document.getElementById("body").className="tools"; document.getElementById("body").className+=" extraMenu" return; } </script> </head> <body id="twoColLayout" class="tools"> <a href="index.php" onClick="updateBodyClass()">Search Bookmarks</a> </body> </html> Hello, I am new with Javascript and running into this problem that I don't understand. I define a base class that only contains an array "elements", and a derived class that contains nothing more (for simplicity): Code: function baseClass() {
this.elements = new Array;
}
function derivedClass() {
}
derivedClass.prototype = new baseClass;
Then I create two instances of the derived class, and add two elements in each: Code: a = new derivedClass();
a.elements.push("A");
a.elements.push("B");
b = new derivedClass();
b.elements.push("C");
b.elements.push("D");
When I examine the contents of these arrays, I see that both a.elements and b.elements contain {"A","B","C","D"} ! I.e. as if the two arrays are in fact the same array! But these are two separate instances of the class, I expect two separate arrays. Note that if instead I use the base class: Code: a = new baseClass();
a.elements.push("A");
a.elements.push("B");
b = new baseClass();
b.elements.push("C");
b.elements.push("D");
then I get a.elements = {"A","B"} and b.elements = {"C","D"}, as I would expect. Could someone explain to me the problem with using the derived class? Thank you, Stephanos http://www.***.com/5.html i cant get a caption specific to each image to display under the arrows when the image changes. it is especially hard for me because i have to edit the javascript which confuses the **** out of me. it seemed so simple.... thanks for any help ps i cant start an id with a digit? it doesnt seem to cause any problems...why is it stated that this cannot or shouldnot be done? Hello, Current Live View: https://tornhq.com/AroundTheWorld/Lo...WorkingOn.html This content is going to be implemented into a form I am currently working on once completed. As you can see, not all of the countries have yet been broken down as some we're having difficulties doing so. Code: SList.getSelect = function (slist, option) {
document.getElementById('scontent').innerHTML = ''; // empty option-content
if (SList[slist][option]) {
// if option from the last Select, add text-content, else, set dropdown list
if (slist == 'scontent') document.getElementById('scontent').innerHTML = SList[slist][option];
else {
var addata = '<option>- - -</option>';
for (var i = 0; i < SList[slist][option].length; i++) {
addata += '<option value="' + SList[slist][option][i] + '">' + SList[slist][option][i] + '</option>';
}
// cases for each dropdown list
switch (slist) {
case 'slist2':
document.getElementById('slist2').innerHTML = txtsl2 + ' <select name="slist2" onchange="SList.getSelect(\'slist3\', this.value);">' + addata + '</select>';
document.getElementById('slist3').innerHTML = '';
break;
case 'slist3':
document.getElementById('slist3').innerHTML = txtsl3 + ' <select name="slist3" onchange="SList.getSelect(\'scontent\', this.value);">' + addata + '</select>';
break;
}
}
} else {
// empty the tags for select lists
if (slist == 'slist2') {
document.getElementById('slist2').innerHTML = '';
document.getElementById('slist3').innerHTML = '';
} else if (slist == 'slist3') {
document.getElementById('slist3').innerHTML = '';
}
}
}
I need to know how to edit the following, if there is a simple way to set the case for each one as they are not all split up into the same way, some are Districts, some states and whatnot so the new question varies. Or do I simply need to make another big list to do them all? Best Regards, Tim Reply With Quote 03-21-2013, 06:35 AM #2 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,311 Thanks 82 Thanked 4,754 Times in 4,716 Posts Well, for starters, this is generally a really bad way to add <select>s and <option>s. Period. I would certainly toss out your entire getSelect() function and rewrite it. But I'm also not clear on what your question is. Are you asking *HOW* to implement the third level? I don't see any countries with any third level data, at this point. If that's what you are asking, one possible way: Code: SList.slist2 = {
...
"United Kingdom" :
{ "England" : ["Staffordshire", "Derby", ... ],
"Scotland" : ["Edinburgh", ... ],
"Wales" : [ ... ],
"Northern Ireland" : [ .... ]
},
...
};
I have to ask: Why would you name that Slist.slist2 instead of Slist.countries ?? Not that it really matters, but why not make code more self documenting? Hi all, On my site each page is composed by header, contents and bottom. Each part, located respectively at header.php, content1.php, content2.php, ... and bottom.php, is included in page.php. I have a menu, that is the same for all pages, on header.php: Code: <ul class="site-nav"> <li><a href="home.php" class="" name="Home"></a></li> <li><a href="page2.php" class="" name="OK"></a></li> </ul> I'd like to set a class in order to have its corresponding menu with this class="act" for each content.php. I tried this but it doens't work: I add this in content1.php Code: <!-- act for site-nav -->
<script language="javascript" type="text/javascript">function changeClass() {
document.getElementByName("Home").setAttribute("class", act);
}
</script>
and this in top.php Code: <ul class="site-nav"> <li><a href="home.php" class="changeClass()" name="Home"></a></li> <li><a href="page2.php" class="changeClass()" name="OK"></a></li> </ul> Please help me, I don't understand anything of javascript . So, I have this javascript that works just fine... But... PHP Code: <script language="javascript"> function addBtn() { element = document.createElement("input"); element.setAttribute("type", 'button'); element.setAttribute("value", 'Track'); element.setAttribute("name", 'element'); element.onclick = function() { alert("Tracking"); }; var btn = document.getElementById("gs-track-btn"); btn.appendChild(element); } </script> <div id="gs-track-btn"></div> How would I target that div if the " gs-track-btn " id was a class? hey I want to get the href via attributes of this a tag & then this href to be set to a variable Alright I have never really created a class before and I have to for a project. This is what I have so far and I will try to explain the requirements I am looking for thoroughly and what problems I am having. Code:
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<script language="javascript" type="text/javascript">
function clock () { //Object Constructor
this.setT = function() { //Method Set Time
//Properties
this.currentTime = new Date ( );
this.currentHours = this.currentTime.getHours ( );
this.currentMinutes = this.currentTime.getMinutes ( );
this.currentSeconds = this.currentTime.getSeconds ( );
}
clock.prototype.displayTime = function () {
clock.setT
}
}
</script>
<body>
<form name="form1">
<p>
<input type="text" rows=7 cols=60 name="currentTime">
<br>
<input type="button" value="Set Time" onClick="clock.displayTime();">
<br>
<input type="button" value="Display Time" onClick="currentTime.value= completeTime;">
<br>
<input type="reset" value="Reset">
</p>
</form>
</body>
</html>
The clock class contains: Three Properties: Hours Minutes, Seconds Two Methods setTime (which uses date class to get current time) Must be defined in the constructor displayTime (returns a string displaying current time) Must be defined as a prototype property of constructor The below is a very rough outline, and probably not correct. I've been reading up on objects for the last few hours and can't be very sure of anything yet. Code: function clock() {
this.currentTime = new Date ( );
var currentHours = currentTime.getHours ( );
var currentMinutes = currentTime.getMinutes ( );
var currentSeconds = currentTime.getSeconds ( );
this.setTime = function() {
}
}
clock.prototype.displayTime = function ( ) {
}
I guess my biggest problem now is the outline. Any help would be great hopefully once i get what goes where i can actually start writing the code. I already have the full code to write a basic clock just like this but it doesn't use classes or any of this. Hello everybody. For the moment im locking for a JavaScript-document. That will be working like this... When we are push on a link, for example to username. So will it coming up a box "<div class="profile_class"></div> From to beeing visibility: hidden; display: none; To be visibility: visibile; display: block; .profile_class { float: left; width: 300px; height: 250px; margin-top: 2px; margin-left: 2px; position: absolute; visibility: hidden; display: block; background-color: #151515; } .profile_class_inactive { visibility: visible; display: none; } When we are push on the mouse outsite the "profile_class" will it beeing closing/invisbile. But when we have it active something like "profile_class" so will it show uz... <ul> <li>Send a message</li> <li>Add contact</li> <li>Block the contact</li> </ul> And on the right site, will it beeing showing uz a little avatar. Can you please help me with this one? I'm a amateur and I've just coded this little script. What it does is quite simple, once you click on the 'theBox' div, it switches from one class to another. I can't help having the feeling that this could have been coded in a lot more simple way than the way I've coded. So I thought that maybe you guys could help me out. (Oh, and by the way, the script works fine in FireFox and IE). Code: <script>
function setDivClassName(string){
document.getElementById("divClassName").innerHTML = string;
}
function theBoxOnClick(){
var classes = new Array();
classes[0] = 'zero';
classes[1] = 'one';
classes[2] = 'two';
var currentClassName = document.getElementById('theBox').className;
var currentClassIndex;
var nowGoTo;
for(var i = 0;i <= classes.length-1;i++){
//alert(classes[i]);
if(classes[i] == currentClassName){
currentClassIndex = i;
nowGoTo = currentClassIndex + 1;
}
}
if(classes[nowGoTo] == undefined){
nowGoTo = 0;
}
document.getElementById('theBox').className = classes[nowGoTo];
setDivClassName(classes[nowGoTo]);
}
</script>
<style>
.zero{width:100;height:100;background-color:black;color:white;padding:10;border-style:solid;border-color:red;border-width:2}
.one{width:100;height:100;background-color:yellow;color:red;padding:10;border-style:solid;border-color:red;border-width:2}
.two{width:100;height:100;background-color:red;color:yellow;padding:10;border-style:solid;border-color:red;border-width:2}
</style>
<body onLoad="setDivClassName('zero')">
<div id="theBox" class="zero" onClick="theBoxOnClick()">
This DIV's Class is <div id="divClassName"></div>
</div>
I have a button design below: Code: <a class="button"><span name="submit" id="sub_button" style="display:none">Submit</span></a> When I do this: Code: document.getElementById('sub_button').style.display="none";
It hides all of the button except a tiny sliver on the far left border of the button. Do I need to do something to hide the entire class? |
|||||||