Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts

    CSS Remote rollover trouble

    Greetings!

    I thought I had this figured out, apparently I was wrong.

    See page:
    http://theindustrialrev.com/cmakepeace/index.html

    What I want to do is have a navigation that when you mouse over the color bars (orange,green,teal,blue) a specific message appears in the word bubble. I've seen a few tutorials that are close to what I'm looking to do, but not exactly. I'm wondering, can this be done? I want to stick with CSS and not get into js. Also can I use sprites and background img positioning instead of single images? If you need any other info from me, please let me know.

    Thank you in advance! Any help would be much appreciated!

    -Dylan

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    image sprites would not work here.

    I've never tried using :hover, display: none; --> display: block;, if you choose to do this, tell me if it works. I think javascript would be a lot easier though. you're using visibility: hidden; right now, but I think display: none; would be more effective

    I would seriously ask you to reconsider javascript, you can find a script for this easily online
    Last edited by Sammy12; 07-10-2011 at 06:36 AM.

  • Users who have thanked Sammy12 for this post:

    dylan277 (07-10-2011)

  • #3
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    using jquery u can do easily.....

    let me know if u want to do....

    I would like to help u

  • Users who have thanked vikram1vicky for this post:

    dylan277 (07-10-2011)

  • #4
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks for the response guys! I guess I should give javascript a try. If you could point me in the direction of a simple(ish) script that I could use to accomplish this, I'd greatly appreciate it!

    Thanks again!

  • #5
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Code:
    <a href='javascript: toggle()'>toggle</a>
    <div id='div1' style='display:none'>
    Don't display me
    </div>
    
    <script>
    function toggle(){
    	var div1 = document.getElementById('div1')
    	if (div1.style.display == 'none') {
    		div1.style.display = 'block'
    	} else {
    		div1.style.display = 'none'
    	}
    }
    </script>
    http://snippets.dzone.com/posts/show/1721

    more options
    http://www.dustindiaz.com/seven-togglers/

  • #6
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I'm having an issue in the code your typed out. I'm really not great with javascript, so I may just be missing something. I just want the word bubble to change when you mouse over (not click) the color bars. I do need body text to appear below the color bars when clicked, but each color bar will show different text. I guess there are a few functions that need to be performed.

    This seems quite daunting to my little javascript ignorant mind.

  • #7
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    I would suggest taking the next 2 days to learn javascript. It literally takes 2 days :P

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

    but the amount you learn will broaden your skills vastly

    -best of luck

  • #8
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Can I do what I want to with javascript? With multiple functions like that?

  • #9
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    yep, javascript can do that and MUCH more

  • #10
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Ugh. Gives me a headache...

  • #11
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I'm at a dead end.
    Though I appreciate the advice of learn javascript, unfortunately at this moment it's not an option. I don't have the time and this was suppose to be small, quick project for someone. I'm not really a web designer, learning javascript at this point would be a waste as I would no doubt forget it after not using it at all for a year. Please, I'll take any guidance I can to help me get out of the woods.

    I've updated the page:
    http://theindustrialrev.com/cmakepeace/index.html

    Text pops up under the bars, but I can't figure out how to associate a different group of text for each bar. And of course I'm still stumped when it comes to changing the word bubble for each button mouse over.

  • #12
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,722
    Thanks
    41
    Thanked 191 Times in 190 Posts
    have you experimented with something like this?
    Code:
    #one{display:none;}
    #two{display:none;}
    #three{display:none;}
    red:hover one{display:block;}
    blue:hover two{display:block;}
    green:hover three{display:block;}
    then somewhere else...
    Code:
    <div id="wordBubble">
      <div id="one">this is bubble one</div>
      <div id="two">this is bubble two</div> 
      <div id="three">this is bubble three</div>
    </div>
    <div id="red"></div>
    <div id="blue"></div>
    <div id="green"></div>
    .... you will have to "tidy up" the code and check the syntax's to make the hovers work.... where I agree with Sammy that js is great; I feel his original idea (see posted code in this reply) is a better method for your case... you are only doing "hovers" so making the js function would be more work. I think his first response is the way to go and is what I have attempted to demonstrate "better" for you (so you can see what he was driving at"...
    To Sammy; in your initial reply you said you have not done this yet- I do not see any reason why it would not work- and I have done similar to this in the past.
    Back to OP, Sammy said in his first reply that you were using visibility:hidden;... please note, that with visibility:hidden the object still occupies the area, whereas display:none; it does not... if you try to cram 4 divs inside that div bubble and use visibility instead of display you will encounter issues

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #13
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Alykins,
    Thank you for trying to help me out!
    I tried to follow the code you wrote, but it's not working for me. I fully admit it's probably user error. Here's what I have:

    Code:
    #wordbubble {
    	background-image: url(images/cmakepeace.png);
    	width: 720px;
    	height: 170px;
    	margin-left:auto;
    	margin-right:auto;
    	margin-top: 150px;
    	}
    
    #one {
    	display:none;
    	}
    
    red:hover one {
    	display:block;
    	width: 271px;
    	height: 143px;
    	float: right;
    	margin-top: 11px;
    	margin-right: 10px;
    	}
    
    #buttonbar {
    	width: 700px;
    	height: 34px;
    	margin-left:auto;
    	margin-right:auto;
    	margin-top: 10px;
    	}
    
    #red {
    	height: 34px;
    	width:166px;
    	display: block;
    	background: url(images/writing.gif) no-repeat 0 -34px;
    	float: left; 
      	margin-right: 12px;
    	}
    and then

    Code:
    <div id="wordbubble">
    	<div id="one">this is bubble one</div>
     </div>
      
    <div id="buttonbar">
    	<div id="red"></div>
    </div>
    I'm hoping it's something simple.
    I undated the page here:
    http://theindustrialrev.com/cmakepeace/index2.html

    I'm trying to set up one button, once I get that I'll follow the same steps for the rest...

  • #14
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,722
    Thanks
    41
    Thanked 191 Times in 190 Posts
    i didn't check the syntax's.... you'll need to check that... im pretty sure that my syntax is botched to H and back... i was moreover pointing you to an idea... check w3schools (w3.org if you want better ) and find the proper form... i think it might actually be
    Code:
    #red:hover #one{restyling code}

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #15
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Hover isn't supported on some early ie's. just food for thought I have used :hover display block before, but I can't remember if it worked or was bug-free since it became obsolete and was pretty long ago.


  •  
    Page 1 of 2 12 LastLast

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •