1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

mouse over class change help!

Discussion in 'JavaScript' started by ferret147, Mar 17, 2011.

0
  1. #1
    Here is my code which works fine
    <!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>Snooker Brackets</title>
<style type="text/css">
.base {
	background-color: #CF6;
	height: 50px;
	width: 400px;
}
.player1 {
	background-color: #000;
	height: 50px;
	width: 400px;
	color: #FFF;
}
.player2 {
	background-color: #fff;
	height: 50px;
	width: 400px;
}
.player1over {
	background-color: #009;
	height: 50px;
	width: 400px;
	color: #FFF;
}
.player2over {
	background-color: #C9C;
	height: 50px;
	width: 400px;
}
.class {
	background-color: #C9C;
	height: 50px;
	width: 400px;
}
</style>
<script>
function change_class(player, cls){
	var my_ids = ['_div2', '_div3', '_div4', '_div5', '_div6'];
	for (var i=0; i<my_ids.length; i++){
		document.getElementById(player+my_ids[i]).className = cls;
	}
}
</script>
</head>
<body style="margin: 0pt;">
<div class="base" id="player1_div1" onmouseover="change_class('player1', 'base player1over');" onmouseout="change_class('player1', 'base player1');">Player 1</div>
<div class="base" id="player2_div1" onmouseover="change_class('player2', 'base player2over');" onmouseout="change_class('player2', 'base player2');">Player 2</div>
<div class="base player1" id="player1_div2">Player 1</div>
<div class="base player2" id="player2_div2">Player 2</div>
<div class="base player1" id="player1_div3">Player 1</div>
<div class="base player2" id="player2_div3">Player 2</div>
<div class="base player1" id="player1_div4">Player 1</div>
<div class="base player2" id="player2_div4">Player 2</div>
<div class="base player1" id="player1_div5">Player 1</div>
<div class="base player2" id="player2_div5">Player 2</div>
<div class="base player1" id="player1_div6">Player 1</div>
<div class="base player2" id="player2_div6">Player 2</div>
</body>
</html>
    PHP:
    but what I want to do is load the variables player1, player2, etc in dynamically so they will be john smith, robert thomas etc as they will be class names i will strip the white space to make them johnsmith, robertthomas etc

    but how can I change the javascript to keep the script working?

    Sorry I am useless at Javascript :)
     
    ferret147, Mar 17, 2011 IP
  2. leunamer

    leunamer Peon

    Messages:
    65
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I don't understand what you're trying to do.
     
    leunamer, Apr 4, 2011 IP
  3. dimitar christoff

    dimitar christoff Active Member

    Messages:
    882
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    90
    #3
    here you go. http://jsfiddle.net/dimitar/jkhnj/

    
window.change_class = function(player, cls){
    var my_ids = ['_div2', '_div3', '_div4', '_div5', '_div6'], baseId = player.getAttribute("id").split("_")[0];
    for (var i=0; i<my_ids.length; i++){
        document.getElementById(baseId+my_ids[i]).className = cls;
    }
}
    Code (javascript):
    whereby it's called with a pointer to the object, i.e. 'this':
    
<div class="base" id="player1_div1" onmouseover="change_class(this, 'base player1over');" onmouseout="change_class(this, 'base player1');">Player 1</div>
    Code (markup):
    In an ideal world, this can be MUCH simpler if done with a framework like mootools or jquery.

    eg via mootools that works dynamically w/o touching the elements: http://jsfiddle.net/dimitar/jkhnj/2/

    
window.addEvent("domready", function() {
    var triggers = document.getElements("#grid div.trigger");
    var targetClass, targetEls;
    
    triggers.addEvents({
        mouseenter: function() {
            targetClass = (this.hasClass("player1")) ? "player1" : "player2";
            targetEls = document.getElements("#grid div." + targetClass);
            targetEls.addClass(targetClass + "over");
        },
        mouseleave: function() {
            targetEls.removeClass(targetClass + "over");
            targetEls = targetClass = null;
        }
    });
    
});
    Code (javascript):
    which will work fine with:
    
<div id="grid">
<div class="base player1 trigger">Player 1</div>
<div class="base player2 trigger">Player 2</div>
<div class="player1">Player 1</div>
<div class="player2">Player 2</div>
<div class="player1">Player 1</div>
<div class="player2">Player 2</div>
<div class="player1">Player 1</div>
<div class="player2">Player 2</div>
<div class="player1">Player 1</div>
<div class="player2">Player 2</div>
<div class="player1">Player 1</div>
<div class="player2">Player 2</div>
</div>
    HTML:
    notice the !important on your base class:

    
.base {
    background-color: #CF6 !important;
    height: 50px;
    width: 400px;
}
    HTML:
     
    dimitar christoff, Apr 4, 2011 IP