6 Replies - 5066 Views - Last Post: 04 March 2011 - 02:02 AM

#1 cryoffalcon  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 34
  • Joined: 03-February 11

Display none in css having issue with chrome browser

Posted 03 March 2011 - 11:57 AM

Hi,
well i am using quicksand and in it i wanted to use tootips but no one on internet helped me by telling how to do so. So, i am now using css technique, the method is very simple css trick, when you hover over the game icons its details appear, and when you hover over the details then the details disappear. The details disappear in IE and firefox but it is not the case with google chrome.
here is the test page
http://letseedrop.bl.../testing-8.html
i don't know what i am doing wrong, i also tried to use !important in css but it didn't helped.
well i am pasting css here too if you don't want to go into the source code

.demosa {
position:relative;
top:0px;
left:0px;
margin:0px;
padding:0px;
}

.gamedetailpara {
text-decoration:underline;
color:#000000;
}

ul.gamecolumns {
min-height:300px;
list-style: none;
margin: 0px;
padding: 0px;
}
ul.gamecolumns li {
background:url('http://i51.tinypic.com/30v28bb.png') no-repeat;
position:relative;
display: inline;
width: 114px;
height:118px;
float: left;
margin: 8px;
padding: 0px;
}
ul.gamecolumns li:hover {
z-index: 99;
}


ul.gamecolumns li img {
position:relative;
top:12px;
left:12px;
filter: alpha(opacity=100);
opacity: 1;
-ms-filter:"progidXImageTransform.Microsoft.Alpha(Opacity=100)"; /*--IE8 Specific--*/
}
ul.gamecolumns li:hover img{
position:relative;
top: 12px;
left:12px;
z-index: 999;
filter: alpha(opacity=100);
opacity: 1;
-ms-filter: "progidXImageTransform.Microsoft.Alpha(Opacity=100)";
}

ul.gamecolumns li .gamedetails {
position: relative;
left: 0px; top: 0px;
padding: 20px 4px 10px 10px;
display:none;
background:#ffffff;
font:bold 13px "Times New Roman", Times,sans-serif;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
z-index: 99999;
}

ul.gamecolumns li .gamedetails:hover {
display:none;
}

ul.gamecolumns li:hover .gamedetails {display: block;}

ul.gamecolumns li:hover .gamedetails:hover {display: none;}

thank you in advance.

Is This A Good Question/Topic? 0
  • +

Replies To: Display none in css having issue with chrome browser

#2 marinus  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 135
  • View blog
  • Posts: 575
  • Joined: 14-April 10

Re: Display none in css having issue with chrome browser

Posted 03 March 2011 - 12:52 PM

Hi do you mean the image with the bird with the red eye?

When my mouse leaves these images the details does disappear in Google Chrome . :wacko:

I don't know why but your web-page work fine where im sitting.

Really strange :alien:
Was This Post Helpful? 0
  • +
  • -

#3 cryoffalcon  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 34
  • Joined: 03-February 11

Re: Display none in css having issue with chrome browser

Posted 03 March 2011 - 10:32 PM

sorry for making you confuse but what i am saying is that when you hover the details and details are those text which reads as NAME:
SIZE:
DATE:
when you hover over it they disappear in firefox and IE but its not the case in chrome, i want to make it disappear but i am not able to do so, and visibility is not an option as it will still take the place.
Was This Post Helpful? 0
  • +
  • -

#4 marinus  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 135
  • View blog
  • Posts: 575
  • Joined: 14-April 10

Re: Display none in css having issue with chrome browser

Posted 03 March 2011 - 11:24 PM

What you difenly can do is use Javascript mouseover > mouseout

give this div and ID
<div id="magic" class="gamedetails" onmouseover="this.style.display='none'" > 


and id like so with mouseover attribute in the above link

Now give mouseover event for images.

Like so

<img alt="FF" onmouseover="makevisible(1)" src="http://lh5.ggpht.com/_QAJ2Le4En08/TTsLIZqwZCI/AAAAAAAAAcc/zTEP3WxjP6s/s128/thumb_birdinator60%20%2890%20x%2090%29.jpg">

<script type = "text/javascript">
function makevisible(imgNum){

var num = parseInt(imgNum);

switch(num)
{
case 1:
document.getElementById("magic").style.display = '';
break;
}

}
</script>


I know what you are thinking

"But you have to do this for every image" :death:

there is a far better why like using getElementsByTagName() or event Jquery

but you must learn javascript and here is a good link on the basics.

http://www.w3schools.../js/default.asp

Dont fall in to jquery code because its not pure Javascript and then it wont help you

The code is not perfect so you can only get the idea.

This is how it done :shuriken:

Greetings

Marinus

This post has been edited by marinus: 03 March 2011 - 11:44 PM

Was This Post Helpful? 0
  • +
  • -

#5 cryoffalcon  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 34
  • Joined: 03-February 11

Re: Display none in css having issue with chrome browser

Posted 03 March 2011 - 11:57 PM

thanks for another quick reply its always hard to find good people who reply at forums, and i think all of them are at this forum,as all other forums on internet they are just........
well i can't use javascript or jquery if i was able to do so then why wouldn't i use tooltips instead. THE REASON IS QUICKSAND JQUERY it removes the javascript applied, and to make it work you have to add call back to the script, and as i have no knowledge of jquery or java so i can't add callback to it, as i will be able to add code of java to it only if some one guide me add this line of code after this line, but people don't like to help for free, hehehehe
THIS IS the reason i am trying to stick to css only as quicksand jquery becomes angry when java or jquery is used.
So, css is all i have. BTW i like your commenting style do you like anime i mean i like naruto A LOT.
Was This Post Helpful? 0
  • +
  • -

#6 marinus  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 135
  • View blog
  • Posts: 575
  • Joined: 14-April 10

Re: Display none in css having issue with chrome browser

Posted 04 March 2011 - 12:21 AM

Friend I cannot help you with JQ sandbox as i did not construct it. :mellow:
Using someone elses creations then you're on your own im afraid .

I have to admit , i did not even realized there was a problem with sandbox on Chrome.
It is actually not recognizable if you didn't tell me ..

BTW..
I played that submarine game on you're website last night . That was kinda fun !
And you're website looks nice.

No i don't really like anime , but i always watched dragon ball z if that count and I was a major van of it .
But not now really.

If you really want that small error to go away then
You can go to JQ website and take a look at events there

http://api.jquery.com/mouseover/

Hope that might help you

Greetings
Was This Post Helpful? 0
  • +
  • -

#7 cryoffalcon  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 34
  • Joined: 03-February 11

Re: Display none in css having issue with chrome browser

Posted 04 March 2011 - 02:02 AM

Thanks a lot for your reply i really appreciate help from your side, its okay if this css trick didn't work out i got another idea to use it, i am basically a certified chartered accountant, i am in the last semester of ACCA, but coding is my passion i want to learn it all and in future i would like to make a team of developers to make a website of my idea.
Well thanks for playing game, the place where you played the game is a testing place of mine which is copy of real place which is http://www.bloghuts.com
But even the real place is still under-construction for 7 days. Our target is to provide only the best games.

And as soon as i am done with the construction of my games place, i will start learning programming first step will be java and then jquery.
if you were interested in adding me as a friend that do tell me your id if you don't use skype mine is cryoffalcon@skype.com
take care.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1