2 Replies - 4848 Views - Last Post: 17 September 2009 - 11:10 AM

#1 pokertec   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 13-September 09

Dynamically change CSS with javascript / jquery problem

Posted 13 September 2009 - 01:32 PM

Hello,

I have a complex website designed with Jquerry, javascript and css. The index.html serves as a client ui for an open source poker game. Much of the css is contained in multiple and imported external css files. The Jquery / javascript code is also contained in an external file.

The site is completely functional. What I am attempting to do is add a feature to the client that will, through a Jquery or Javascript function, dynamically change the visibility of an element. The elements in question represent the hole cards that a player sees after his cards are dealt. By default they are visible and face up. I changed this default behaviour by first changing their visibility element default value to visibility:hidden. Then I created and styled a div named "peek" and wrote a few lines of code with a Jquery .hover event that should invoke the $(document).ready() function which should toggle the elements visibility values. This should in turn show and hide the hole cards.

I have been unsuccessful in getting this to work. When I try the mouseOver nothing happens. I don't receive any error messages from the browser. I would appreciate any help and advice in this matter. :blink:

Here is the relevant css (how the cards are displayed in the browser) in the external css file

.jpoker_table .jpoker_ptable_card_seat00 { width:191px; height:262px; visibility:hidden; z-index:2; position:absolute; top:140px; left:10px; -webkit-transform: scale(1); -moz-transform: scale(1);background-image:url("images/jpoker_table/cards/small-back.png");}
.jpoker_table .jpoker_ptable_card_seat01 { width:191px; height:262px; z-index:3; position:absolute; top:190px; left:60px; -webkit-transform: scale(1);-moz-transform: scale(1); background-image:url("images/jpoker_table/cards/small-back.png");} 


Here is the relevant html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript">
//<![CDATA[
var version = {title: "TiddlyWiki", major: 2, minor: 3, revision: 0, date: new Date("Dec 4, 2007"), extensions: {}};
//]]>
</script>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!--PRE-HEAD-START-->
<!--{{{-->
<link rel="alternate" type="application/rss+xml" title="RSS" href="index.xml"/>
<link href="css/jpoker_seat0.css" rel="stylesheet" type="text/css" />
<!--}}}-->
<!--PRE-HEAD-END-->
<title>
TiddlyWiki - a reusable non-linear personal web notebook
</title>
<style type="text/css">
#saveTest {display:none;}
#messageArea {display:none;}
#copyright {display:none;}
#storeArea {display:none;}
#storeArea div {padding:0.5em; margin:1em 0em 0em 0em; border-color:#fff #666 #444 #ddd; border-style:solid; border-width:2px; overflow:auto;}
#shadowArea {display:none;}
#javascriptWarning {width:100%; text-align:center; font-weight:bold; background-color:#dd1100; color:#fff; padding:1em 0em;}
#peek 
.jpoker_table .jpoker_action,
.jpoker_table .jpoker_action
{position:absolute; width:243px; height:54px; top:72px; left:10px; visibility:visible;}
</style>
<!--POST-HEAD-START-->
<!--POST-HEAD-END-->
<script type="text/javascript">
</script>
</head>
<body onload="main();" onunload="if(window.checkUnsavedChanges) checkUnsavedChanges(); if(window.scrubNodes) scrubNodes(document.body);">
<!--PRE-BODY-START-->
<!--PRE-BODY-END-->
<div id="copyright">
Welcome to TiddlyWiki created by Jeremy Ruston, Copyright  2007 UnaMesa Association
</div>
<noscript>
	<div id="javascriptWarning">This page requires Javascript to function properly.<br /><br />If you are using Microsoft Internet Explorer you may need to click on the yellow bar above and select 'Allow Blocked Content'. You must then click 'Yes' on the following security warning.</div>
</noscript>
<div id="saveTest"></div>
<div id="backstageCloak"></div>
<div id="backstageButton"></div>
<div id="backstageArea"><div id="backstageToolbar"></div></div>
<div id="backstage">
	<div id="backstagePanel"></div>
</div>
<div id="contentWrapper">
<div id="peek">
</div>
</div>
<div id="contentStash"></div>
<div id="shadowArea">
<div title="MarkupPreHead">
<pre><!--{{{-->
<link rel='alternate' type='application/rss+xml' title='RSS' href='index.xml'/>
<!--}}}--></pre>
</div> 


Finally, here is the jquery code that I made, the code is commented as // showholecards. The surrounding code is the existing code.

//
	// muck (table plugin helper)
	//

	jpoker.plugins.muck = {
	AUTO_MUCK_WIN: 1,
	AUTO_MUCK_LOSE: 2,
	templates : {
		muck_accept: '<div class=\'jpoker_muck jpoker_muck_accept\'><a href=\'java script://\'>{muck_accept_label}</a></div>',
		muck_deny: '<div class=\'jpoker_muck jpoker_muck_deny\'><a href=\'java script://\'>{muck_deny_label}</a></div>',
		auto_muck: '<div class=\'jpoker_auto_muck\'><div class=\'jpoker_auto_muck_win\'><input type=\'checkbox\' name=\'auto_muck_win\' id=\'auto_muck_win{id}\'></input><label for=\'auto_muck_win{id}\' title=\'{auto_muck_win_title}\'>{auto_muck_win_label}</label></div><div class=\'jpoker_auto_muck_lose\'><input type=\'checkbox\' name=\'auto_muck_lose\' id=\'auto_muck_lose{id}\'></input><label for=\'auto_muck_lose{id}\' title=\'{auto_muck_lose_title}\'>{auto_muck_lose_label}</label></div></div>'
	},
	muckRequest: function(server, packet, id) {
		if ($.inArray(server.serial, packet.muckable_serials) != -1) {
		$('#muck_accept' + id).show();
		$('#muck_deny' + id).show();
		}
	},

	muckRequestTimeout: function(id) {
		$('#muck_accept' + id).hide();
		$('#muck_deny' + id).hide();
	},
	sendAutoMuck: function(server, game_id, id) {
		var auto_muck = 0;
		if ($('#auto_muck_win' + id).is(':checked')) {
		auto_muck |= jpoker.plugins.muck.AUTO_MUCK_WIN;
		}
		if ($('#auto_muck_lose' + id).is(':checked')) {
		auto_muck |= jpoker.plugins.muck.AUTO_MUCK_LOSE;
		}
		server.sendPacket({type: 'PacketPokerAutoMuck', serial: server.serial, game_id: game_id, auto_muck: auto_muck});
		server.preferences.extend({auto_muck_win: $('#auto_muck_win' + id).is(':checked'), auto_muck_lose: $('#auto_muck_lose' + id).is(':checked')});
	}
	};

	 //
	 // showholecards
	 // 

	 $("peek").hover(
		 function () { //on hover
		   $("#jpoker_ptable_card_seat00").show();
		 }, 
		 function () { //on hover out
		   $("#jpoker_ptable_card_seat00").hide();
		 }
	   );

	//
	// cards (table plugin helper)
	//
	jpoker.plugins.cards = {
	update: function(cards, prefix, id) {
		jpoker.plugins.cards.update_value(cards, prefix, id);
		jpoker.plugins.cards.update_visibility(cards, prefix, id);
	},
	update_value: function(cards, prefix, id) {
			for(var i = 0; i < cards.length; i++) {
				var card = cards[i];
				var element = $('#' + prefix + i + id);
		element.removeClass().addClass('jpoker_card jpoker_ptable_' + prefix + i);
				if(card !== null) {
					var card_image = 'back';
					if(card != 255) {
						card_image = jpoker.cards.card2string[card & 0x3F];
					}		   
					element.addClass('jpoker_card_' + card_image);
		}
			}
	},
		update_visibility: function(cards, prefix, id) {
			for(var i = 0; i < cards.length; i++) {
				var card = cards[i];
				var element = $('#' + prefix + i + id);
				if(card !== null) {
					element.show();
				} else {
					element.hide();
				}
			}
		}
	}; 

This post has been edited by pokertec: 14 September 2009 - 08:52 AM


Is This A Good Question/Topic? 0
  • +

Replies To: Dynamically change CSS with javascript / jquery problem

#2 arthurakay   User is offline

  • D.I.C Head

Reputation: 22
  • View blog
  • Posts: 226
  • Joined: 17-February 09

Re: Dynamically change CSS with javascript / jquery problem

Posted 17 September 2009 - 06:36 AM

My best advice would be to use Firebug and inspect the CSS properties of your DIV elements. Inspect them while hidden, then mouse-over and watch to see if Firebug shows a difference.

I'm a little fuzzy on what's happening in your code, but it looks like you're trying to show/hide things when mouseovers occur on the DIV "peek". My guess would be that either (1) #peek isn't the area you think you're mousing over, or (2) the show/hide methods aren't correctly editing your CSS definitions.

If you still can't get it working, post a link and I'll take a look.
Was This Post Helpful? 0
  • +
  • -

#3 Wimpy   User is offline

  • R.I.P. ( Really Intelligent Person, right? )
  • member icon

Reputation: 159
  • View blog
  • Posts: 1,038
  • Joined: 02-May 09

Re: Dynamically change CSS with javascript / jquery problem

Posted 17 September 2009 - 11:10 AM

It may be the "visibility:hidden;" style that you set on the element you try to show/hide, I'm not sure but I don't think jQuery bothers about the visibility setting when you use show/hide, try using "display:none;" instead! :)

This post has been edited by Wimpy: 17 September 2009 - 11:11 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1