6 Replies - 589 Views - Last Post: 07 February 2014 - 03:39 PM

#1 Lieoften  Icon User is offline

  • D.I.C Head

Reputation: 17
  • View blog
  • Posts: 244
  • Joined: 06-January 10

Jquery removeClass "ghost elements"

Posted 06 February 2014 - 04:56 PM

Alright, so I'm having a small issue with my website at the moment. I've got an element that is hidden until a user scrolls over it--that part is working perfectly. However, if there are multiple items (magic number seems to be 4 right now) beneath said hidden element, once it is shown, they will show inside of it--which i do not want.

Here's some pictures of the issue -- first picture is the page before hovering, second one is how it should look and third one is the problem child.

Here is the Jquery
/*
  All this code was written by Gmz1023 AKA lieoften AKA James Serbus. 
  With the exception of the centering function, which was found on StackOverflow.
  Though to be honest, that function probably won't make it into the final cut.
  
  TODO:
  	- Make a proper Purchase_stock() function that is dynamic instead of static
	- Make a menu system for stock purchases and upgrades
	- Create the Star Map.
	- Add things of interest 
*/

var denial = false;
	setInterval(function update()
	{
		if(denial) return;
		denial = true;
		$.ajax(
			{
			url:'update.php', error: function(){ denial=false;},
			complete: function(){
				denial = false;
				$('#loader').hide("slow");
				$('#credits').load('world1.php?mode=money');
				$('#fuelleft').load('world1.php?mode=fuel');
				$('#energyleft').load('world1.php?mode=energy');
				$('#starmap').show("slow");
				},
			});
	}, 1000);
jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + 
                                                $(window).scrollTop()) + "px");
    this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + 
                                                $(window).scrollLeft()) + "px");
    return this;
}
function purchase_stock(stock_id)
{
//* This is still a very simple script ATM, right now all it does is update a specific stock
var url = 'purchase.php?sid=';
var url_full = url + stock_id;
$.ajax({url:'purchase.php?sid=6', error: function(){alert('error');}, complete:
		function()
		{
			$('#purchased').fadeIn('slow',0,function(){ 
							setTimeout(
				$(this).fadeOut('slow'), 1500) 
				});
		}
	});	
}
	function starInformation()
	{
		$(".star").hover(
		function()
		{
			$(this).children('.starjumper').removeClass('hidden');
		},
		function()
		{
			$(this).children('.starjumper').addClass('hidden');	
		}
		);
	}
$(document).ready(function() 
	{
		starInformation();
		$('#starmap').center();
		$('#starmap').hide();
		$('.center').center();
		
		$('#purchased').fadeOut('fast');
		$('#purchase').click(function(){ purchase_stock(6); });
	}
);



Here is the HTML (ripped directly from the website, as most of it is generated via PHP--and is functioning perfectly)

<!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" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<title>Reddacted Project</title>
<link rel='stylesheet' href='assets/style.css' />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="js.js" type='text/javascript'></script>
</head>
<body>
<div id='status-bar'>
  <div id='credit-container'> <img src='assets/images/credits.png' />
    <div id='credits'></div>
  </div>
  <div id='fuelcell'> <img src="assets/images/fuel.png" width="36" height="22" />
    <div id='fuelleft'></div>
  </div>
  <div id='energycell'> <img src="assets/images/fuel.png" width="36" height="22" />
    <div id='energyleft'></div>
  </div>
</div>
<div id='starmap'>

 <div class='star' style='top:49%; left:68%;' href='#' id='61'><div class='starjumper hidden'>Hello World!</div></div>
 <div class='star' style='top:9%; left:14%;' href='#' id='62'><div class='starjumper hidden'>Hello World!</div></div>
 <div class='star' style='top:31%; left:33%;' href='#' id='63'><div class='starjumper hidden'>Hello World!</div></div>
 <div class='star' style='top:78%; left:64%;' href='#' id='64'><div class='starjumper hidden'>Hello World!</div></div>
 <div class='star' style='top:52%; left:64%;' href='#' id='65'><div class='starjumper hidden'>Hello World!</div></div>
 <div class='star' style='top:75%; left:0%;' href='#' id='66'><div class='starjumper hidden'>Hello World!</div></div>
 <div class='star' style='top:41%; left:42%;' href='#' id='67'><div class='starjumper hidden'>Hello World!</div></div>
 <div class='star' style='top:84%; left:64%;' href='#' id='68'><div class='starjumper hidden'>Hello World!</div></div>
 <div class='star' style='top:34%; left:69%;' href='#' id='69'><div class='starjumper hidden'>Hello World!</div></div>
 <div class='star' style='top:50%; left:14%;' href='#' id='70'><div class='starjumper hidden'>Hello World!</div></div>
 <div class='star' style='top:77%; left:60%;' href='#' id='71'><div class='starjumper hidden'>Hello World!</div></div>
 <div class='star' style='top:51%; left:72%;' href='#' id='72'><div class='starjumper hidden'>Hello World!</div></div>
 <div class='star' style='top:37%; left:39%;' href='#' id='73'><div class='starjumper hidden'>Hello World!</div></div>
 <div class='star' style='top:95%; left:75%;' href='#' id='74'><div class='starjumper hidden'>Hello World!</div></div>
 <div class='star' style='top:12%; left:98%;' href='#' id='75'><div class='starjumper hidden'>Hello World!</div></div>
 <div class='star' style='top:2%; left:56%;' href='#' id='76'><div class='starjumper hidden'>Hello World!</div></div>
 <div class='star' style='top:38%; left:34%;' href='#' id='77'><div class='starjumper hidden'>Hello World!</div></div>
 <div class='star' style='top:25%; left:1%;' href='#' id='78'><div class='starjumper hidden'>Hello World!</div></div>
 <div class='star' style='top:53%; left:55%;' href='#' id='79'><div class='starjumper hidden'>Hello World!</div></div>
 <div class='star' style='top:15%; left:7%;' href='#' id='80'><div class='starjumper hidden'>Hello World!</div></div>
 <div class='star' style='top:13%; left:86%;' href='#' id='81'><div class='starjumper hidden'>Hello World!</div></div></div><div id='bottom-nav'>
<table cellpadding='0' cellspacing='0'>
    <tr>
    <td>&nbsp;</td>
    <td><a href='index.php?X=0&Y=1'>up</a></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><a href='index.php?X=-1&Y=0'>left</a></td>
    <td>&nbsp;</td>
    <td><a href='index.php?X=1&Y=0'>Right</a></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><a href='index.php?X=0&Y=-1'>down</a></td>
    <td>&nbsp;</td>
  </tr>
</table></div>
<div id='loader' class='center'> <img src='assets/ajax-loader.gif' /> </div>

</body>
</html>


and lastly here is the css

/* 

REDDACTED PROJECT STYLE

TODO: 
	-Add more styles
*/
@import url(http://reset5.googlecode.com/hg/reset.min.css);
body {
	background-color: #999;
	width: 100%;
	height: 100%;
	font-size: 12px;
	cursor: default;
	font-family: Verdana, Geneva, sans-serif;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.hidden {
	display: none;
}
div#container, div#loader {
	width: 75%;
	margin: 0 auto;
}
.center {
	text-align: center;
	margin: 0 auto;
	position: absolute;
}
/* Status Bar Style */
div#status-bar {
	font-size: 100%;
	overflow: auto;
	position: absolute;
	float: left;
	background-color: #333;
	color: #fff;
	height: 3%;
	width: 100%;
}
#status-bar img {
	float: left;
}
#credit-container {
	float: right;
	width: 10%;
}
#credits {
}
div#status-bar div {
	text-align: center;
	padding: 5px;
	font-size: 12px;
}
div#money {
	height: inherit;
	background-color: inherit;
	text-align: center;
	font-weight: bold;
	font-size: 12px;
	color: #fff;
}
div#fuelcell {
	width: 100px;
	float: right;
}
div#energycell {
	width: 5%;
	float: right;
}
div#starmap {
	background: url(background-static.png);
	position: absolute;
	height: 80%;
	width: 80%;
	float: left;
	top: 3%;
}
/* Bottom Navigation Bar */
div#bottom-nav {
	float: left;
	width: 100%;
	background-color: #fff;
	position: absolute;
	top: 94%;
	text-align: center;
	height: 6%;
}
div#bottom-nav table {
	text-align: center;
	height: 100%;
	width: 30%;
	margin: 0 auto;
}
/*
	Star Map 3.0
*/
.star {
	height: 25px;
	width: 25px;
	position: inherit;
	background: url(stars/1.png) no-repeat;
	z-index: 2;
}
.star:hover {
	background: url(stars/1h.png) no-repeat;
}
.starjumper {
	top: 100%;
	width: 15em;
	height: 15em;
	z-index:2;
	opacity:1;
	background-color: #fff;
}
.hidden {
	display: none;
}



I've run into this issue in the past and was never able to fix it--I worked around by using the jquery "hide" and "show" functions--but I rather not do that this time around.

edit: The "show" "hide" method isn't working now either...

This post has been edited by Lieoften: 06 February 2014 - 05:01 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Jquery removeClass "ghost elements"

#2 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 359
  • View blog
  • Posts: 1,308
  • Joined: 15-January 14

Re: Jquery removeClass "ghost elements"

Posted 07 February 2014 - 09:27 AM

You might just need to change the z-index so that the stars are below the popup.
Was This Post Helpful? 0
  • +
  • -

#3 Lieoften  Icon User is offline

  • D.I.C Head

Reputation: 17
  • View blog
  • Posts: 244
  • Joined: 06-January 10

Re: Jquery removeClass "ghost elements"

Posted 07 February 2014 - 01:24 PM

View PostArtificialSoldier, on 07 February 2014 - 09:27 AM, said:

You might just need to change the z-index so that the stars are below the popup.


I've tried this and they still show up.
Was This Post Helpful? 0
  • +
  • -

#4 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 359
  • View blog
  • Posts: 1,308
  • Joined: 15-January 14

Re: Jquery removeClass "ghost elements"

Posted 07 February 2014 - 01:40 PM

Do you have an example of this online?
Was This Post Helpful? 0
  • +
  • -

#5 Lieoften  Icon User is offline

  • D.I.C Head

Reputation: 17
  • View blog
  • Posts: 244
  • Joined: 06-January 10

Re: Jquery removeClass "ghost elements"

Posted 07 February 2014 - 02:57 PM

View PostArtificialSoldier, on 07 February 2014 - 01:40 PM, said:

Do you have an example of this online?



I'm working on that right now--I just got my website back today and now i'm just working on getting the site to function properly on the server.

Should be up and running now--minus a single redirect issue I'm working on as we speak (if you're redirected to a grey screen after you log in just add ?X=0&Y=0 to the url)

http://gmz1023.com/reddact/index.php

Username: test1
password: test

The issue is contained to a couple of the "stars". specifically, Star #63, which is the top one near the big dipper looking set.

This post has been edited by Lieoften: 07 February 2014 - 02:59 PM

Was This Post Helpful? 0
  • +
  • -

#6 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 359
  • View blog
  • Posts: 1,308
  • Joined: 15-January 14

Re: Jquery removeClass "ghost elements"

Posted 07 February 2014 - 03:20 PM

It's definitely a z-index issue. If I inspect the div for #63 and change the z-index just for that element to 10, the problem doesn't appear. All of the stars all have the same z-index, which is fine because you don't need to stack the stars, but the problem is that the starjumper element is a child of the star div, so the starjumper element is going to have the same z-index as the stars since the star is the parent.

One solution would be to move the starjumper elements out of the star divs, make them siblings or something, and give them a higher z-index than the stars. Another solution would be to increase the z-index every time you show something, and decrease it when you hide it again. If the one being shown had a z-index of 3 and everything else was 2, then it would show on top. Note that if the starjumper element is still inside the star element, when you hover you need to increase the z-index on the star, not the starjumper. Make the parent higher.
Was This Post Helpful? 0
  • +
  • -

#7 Lieoften  Icon User is offline

  • D.I.C Head

Reputation: 17
  • View blog
  • Posts: 244
  • Joined: 06-January 10

Re: Jquery removeClass "ghost elements"

Posted 07 February 2014 - 03:39 PM

View PostArtificialSoldier, on 07 February 2014 - 03:20 PM, said:

It's definitely a z-index issue. If I inspect the div for #63 and change the z-index just for that element to 10, the problem doesn't appear. All of the stars all have the same z-index, which is fine because you don't need to stack the stars, but the problem is that the starjumper element is a child of the star div, so the starjumper element is going to have the same z-index as the stars since the star is the parent.

One solution would be to move the starjumper elements out of the star divs, make them siblings or something, and give them a higher z-index than the stars. Another solution would be to increase the z-index every time you show something, and decrease it when you hide it again. If the one being shown had a z-index of 3 and everything else was 2, then it would show on top. Note that if the starjumper element is still inside the star element, when you hover you need to increase the z-index on the star, not the starjumper. Make the parent higher.


Alright! fixed it! added a "addClass" to the jquery and created a new style class called "hover". Problem resolved!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1