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