JavaScript - Change <div> Class Onmouseover

hi all,

I really need help with this topic. I have to use onMouseOver to change the content of an iframe. I'm trying to use an array but I'm confused and I'm not really sure if what I'm doing is correct and it doesnt work. I will appreciate your help and understanding.

Thanks a lot!

here is part of my code..


var frame=new Array(6);
frame[0]="page1.html";
frame[1]="page2.html";
frame[2]="page3.html";
frame[3]="page4.html";
frame[4]="page5.html";
frame[5]="page6.html";
var j=0;

function nextFrame()

{
if (j < 5)
{
j++;
document.getElementById(frame).contentDocument=frame[j];

}
return;
}

<span onMouseOver="nextFrame()" > <img name="upperImage" src="something.jpg" width=350 height=250 /></span>

<iframe id="frame1" name="frame1" src="" width=350 height=250 frameborder="0"> </iframe>


Please let me know if at least I'm in the right track.

Thanks

Hi guys,

I need some help. Im trying to make a navagation menu with images that need to be changed when someone hovers over the child category.

So lets say I have a menu that looks like this:

Code:

<img src="notactiveimagemenu1.jpg" alt="">
<ul id="menu1">
   <li>link</li>
   <li>link</li>
   <li>link</li>
</ul>
<img src="notactiveimagemenu2.jpg" alt="">
<ul id="menu2">
   <li>link</li>
   <li>link</li>
   <li>link</li>
</ul>

Now what im trying to do is if someone hovers over the li items from menu1 to change the image src of menu1.jpg to active.

I was hoping to do this with some javascript.
Code:

// i was thinking about something like this:

// first put menu items in a array

// then use document.getElementById(id).onmouseover = function()
// and make some sort of check to see which src should be changed.

Now I really have no clue how to do it.
So if anyone knows a cool solution please let me know.
I know I could add onmouseover events to each li item and changing the src of the category. But Im trying to find a better solution.
And I think I should be able to use document.getElementById(id).onmouseover = function() for that.

Anyway thanks for any tips.
Please note I know I could use jquery to do all of this very easy but I consider this practice because I don't know that much javascript.

Hi, I'm trying to get the pic to change when the mouse rolls over the button. I used this template of code and it works:

Code:

<A HREF="http://www.cnn.com" 
onMouseOver="document.pic1.src='menu1on.gif'"
onMouseOut="document.pic1.src='menu1off.gif'">
<IMG SRC="menu1off.gif" BORDER=0 NAME="pic1">
</a>

The problem occurs when I attempt to change a *second button* to have two buttons change on the same page. Here is how the code for two buttons looks side by side while it works:

Code:

	<a href="development.html">
		<img height="20" src="http://mywebsite.com/SIDE4H.png" style="border-width: 0px; margin-top: 2px; margin-bottom: 2px" width="185" /></a><br />
<a href="exhibitions.html">
		<A HREF="" onMouseOver="document.pic1.src='SIDE5H2.png'"onMouseOut="document.pic1.src='SIDE5H.png'"><IMG SRC="http://mywebsite.com/SIDE5H.png" BORDER=0 NAME="pic1" style="margin-top: 2px; margin-bottom: 2px"></a><br />

Here is the code after I add the javascript to two buttons. When I do this the buttons *do not* change (switch images), but do display one image properly on the site:

Code:

<a href="development.html">
		<img height="20" src="http://mywebsite.com/SIDE4H.png" style="border-width: 0px; margin-top: 2px; margin-bottom: 2px" width="185" /></a><br />
		<a href="exhibitions.html">
		<A HREF="" onMouseOver="document.pic1.src='SIDE5H2.png'"onMouseOut="document.pic1.src='SIDE5H.png'"><IMG SRC="http://mywebsite.com/SIDE5H.png" BORDER=0 NAME="pic1" style="margin-top: 2px; margin-bottom: 2px"></a><br />
<a href="careers.html">
		<A HREF="" onMouseOver="document.pic1.src='SIDE6H2.png'"onMouseOut="document.pic1.src='SIDE6H.png'"><IMG SRC="http://mywebsite.com/SIDE6H.png" BORDER=0 NAME="pic1" style="margin-top: 2px; margin-bottom: 2px"></a><br />
		<a href="contactus.html">
		<img height="20" src="http://mywebsite.com/SIDE7H.png" style="border-width: 0px; margin-top: 2px; margin-bottom: 2px" width="185" /></a></td>
		<td colspan="2" style="height: 148px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </td>
		<td style="width: 148px; height: 148px">

Any ideas? I hope the code displays ok on your screen.

Hello everybody!

This is my first post at CodingForums!

I'm currently designing a wordpress theme, and I require a bit of javascript for a hover effect. I'm using Wordpress Jquery + Jquery Color Animations plugin.

The structu
I use a div (class="post") as a container for the wordpress post, and within the "post" div, I have a span (class="title") which I use to display the title of the post.

What I want to do is:
when the user hovers over (OnMouseOver) "post" div:
".title" spans's background color fades from black to red.

when the user hovers out (OnMouserOut) "post" div:
".title" spans's background color fades back to black.

The Code

Code:

$j(document).ready(function(){
	$j(".posts").hover(function(){
	$j (".posts .title").animate({ backgroundColor: "#FF0062" }, 300);
	},function(){
	$j(".posts .title").animate({ backgroundColor: "#231F20" }, 300);
	});
	});

The Problem

The code works, except when the user hovers over any "post" div, all "title" span change color. So my question is, how do I target the code to address ONLY the "title" span in the "post" div that is in hover state?


Any help would be greatly appreciated,

Cheers,

Drew.

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

Hello,

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

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 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

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

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>

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>

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