SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Taunton, UK
    Posts
    787
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Rollover div to replace with another div

    I am working on a site design that consists of a grid of 6 divs (2 rows of 3)

    Each div has an image filling the entire div plus some live text. The image and text needs to be dynamic as it changes regularly via cms updates. This also applies to the rollover content.

    I want to implement a rollover on each div so that different content is displayed when the mouse rolls over each div and it reverts back to the original when mouse leaves div.

    Sounds quite straightforward but I am struggling to find a solution

    I tried with JavaScript and setting to display none and display block but this resulted in a flickering loop. Using visibility didn't work either.

    Ideally the solution will work in ie7 but ie8 would probably be acceptable to client as a minimum.

    Really appreciate any help on this.

    Thanks
    Mediakitchen Limited
    App Development | Website Design & Development | Flash Game Development
    Somerset, UK
    http://www.mediakitchen.co.uk

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    You can do this with CSS alone, but it can cause accessibility problems, as hovering doesn't work on mobile devices. So firstly plan out how this will play out on various devices:

    - devices that don't have hover will need another way to access the text. Either it should be visible all the time, or available with a click (but how is someone going to know to click?)
    - if you use JavaScript, how will the content be available if JS is turned off?
    - will users on assistive devices like screen readers be able to access the content?

    If all these issues provide too many challenges, it probably means that the idea is not a good one in the first place.

  3. #3
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Chucky,

    A rough guess of mine would be for you to have .class1 (the original content) and .class1:hover (the replacing content), giving .class1 a z-index of 1 and .class1:hover a z-index of 2.

    I've been trying this, but I can't quite get it. Here's the non-working code I have so far:
    Code:
    <html>
    <head>
    <style>
    .class1{
    	z-index: 1;
    }
    .class1:hover span {
    	z-index: 2;
    }
    
    </style>
    </head>
    
    <body>
    
    <div class="class1">hello<span>world</span></div>
    
    </body>
    </html>
    Edit: OOPS! I started this reply before Ralph posted, so I didn't see his answer before posting.

  4. #4
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Taunton, UK
    Posts
    787
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the swift reply Ralph. The client has specified they are not concerned about this site working on mobile devices. Would the pure CSS solution work on IE7/IE8?

    Would the CSS solution involve using hover? If so, woulld you give me an example please. I did try this by laying out the 2 separate divs inside a container div for each of the 6 grid positions and setting the value of top to minus the height of the div but whilst it did move up the content of the 2 nested divs, both were visible.
    Mediakitchen Limited
    App Development | Website Design & Development | Flash Game Development
    Somerset, UK
    http://www.mediakitchen.co.uk

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Here is a simple way to do it, though there are many other ways:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .class1{
    	width: 300px; min-height: 300px;
    	display: inline-block; margin: 0 20px 20px 0;
    	position: relative;
    	z-index: 1;
    	background: #e7e7e7;
    }
    .class1 span {
    	position: absolute; 
    	left: -9999px;
    	bottom: 0;
    }
    .class1:hover span {
    	z-index: 2;
    	display: block;
    	width: 260px;
    	left: 0;
    	padding: 0 20px 20px;
    	font-size: 1.5em;
    	font-style: italic;
    	font-family: georgia, serif;
    	text-shadow: 0 1px white;
    }
    
    </style>
    </head>
    
    <body>
    
    <div class="class1"><span>This is some text relating to the image that appears on hover</span></div>
    <div class="class1"><span>This is some text relating to the image that appears on hover</span></div>
    <div class="class1"><span>This is some text relating to the image that appears on hover</span></div>
    <div class="class1"><span>This is some text relating to the image that appears on hover</span></div>
    
    </body>
    </html>
    Should work in IE7 and 8, but test it out to make sure. In IE7 you can't use display: inline-block, but for that browser you could use display: inline instead, or just float the divs instead.

    In reality, I wouldn't set a height on the divs unless perhaps the images are always going to be the same size.


    Quote Originally Posted by chuckylefrek View Post
    The client has specified they are not concerned about this site working on mobile devices.
    Heh heh. To me, that's like a client saying they don't mind if their house is not built to safety standards. I just don't accept such arguments.

  6. #6
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Taunton, UK
    Posts
    787
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much Ralph. I will give this a go now. Haha yes I agree to the clients decision about mobiles is ludicrous considering they are so concerned about it working for IE7. They had initially asked for it to be done in Flash but I told them I was able to do it in html - haha welll I thought I was able to do it
    Mediakitchen Limited
    App Development | Website Design & Development | Flash Game Development
    Somerset, UK
    http://www.mediakitchen.co.uk

  7. #7
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Taunton, UK
    Posts
    787
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Pam - I will let you know how I get on with Ralph's solution.
    Mediakitchen Limited
    App Development | Website Design & Development | Flash Game Development
    Somerset, UK
    http://www.mediakitchen.co.uk

  8. #8
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Taunton, UK
    Posts
    787
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Made a few amends to get my text in as well as an image. You can see the test file here http://mediakitchen.co.uk/index.php/test2

    Does this seem a viable solution?

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    
    
    html {
    
    	margin:0;
    	padding:0;
    
    }
    
    
    body {
    
    	margin:0;
    	padding:0;
    }
    
    img {
    
    	margin:0;
    	padding:0;
    
    }
    
    .class1Container {
    
    	float: left;
    
    	margin:0;
    	padding:0;
    
    	width: 300px;
    	height: 300px;
    	background:red;
    
    	position: relative;
    
    
    }
    
    
    .class1Image {
    
    
    	float: left;
    
    }
    
    
    .class1Text {
    
    	position: absolute; 
       	top: 20px; 
       	left: 20px; 
      
    
    
    }
    
    
    .class1{
    	margin:0;
    	padding:0;
    
    	width: 300px; min-height: 300px;
    	
    	float:left;
    	z-index: 1;
    	background: #e7e7e7;
    	text-align:left;
    }
    
    
    
    .class1Container span {
    	position: absolute; 
    	left: -9999px;
    	top: 0;
    }
    .class1Container:hover span {
    
    	margin:0;
    	padding:0;
    	z-index: 2;
    	display: block;
    	width: 300px;
    	height: 300px;
    	left:0;
    	
    	
    	
    	
    }
    
    </style>
    </head>
    
    <body>
    
    <div class="class1Container"><div class="class1Image"><img src="/images/bird.jpg" /></div><div class="class1Text">Test</div><span><img src="/images/birdInverted.jpg" /></span></div>
    <div class="class1Container"><div class="class1Image"><img src="/images/bird.jpg" /></div><div class="class1Text">Test</div><span><img src="/images/birdInverted.jpg" /></span></div>
    <div class="class1Container"><div class="class1Image"><img src="/images/bird.jpg" /></div><div class="class1Text">Test</div><span><img src="/images/birdInverted.jpg" /></span></div>
    <div class="class1Container"><div class="class1Image"><img src="/images/bird.jpg" /></div><div class="class1Text">Test</div><span><img src="/images/birdInverted.jpg" /></span></div>
    
    </body>
    </html>
    Mediakitchen Limited
    App Development | Website Design & Development | Flash Game Development
    Somerset, UK
    http://www.mediakitchen.co.uk

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Seems to work OK to me.

  10. #10
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Ralph? anybody?

    What is the advantage of sliding the images offscreen? Is it a browser compatibility thing or just another technique?

    I did the same thing with z-index and visibility and they seem OK. Just wondering.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    
    html {
        margin:0;
        padding:0;
    }
    body {
        margin:0;
        padding:0;
    }
    .birdcage {
        background:#f00;
        float:left;
        position:relative;
        width:300px;
        height:300px;
    }
    .top {
        position:absolute;
        top:0;
        left:0;
    }
    .birdcage:hover .top {
    /*    z-index:-1;           /* use this */
        visibility:hidden;    /*  or this */
    /*    left:-9999px;         /*  or this */
    }
    .text {
        color:#fff;
        position:absolute; 
        top:20px;
        left:20px;
    }
    
    </style>
    </head>
    <body>
    
    <div class="birdcage">
        <img src="http://mediakitchen.co.uk/images/birdInverted.jpg" />
        <div class="text">Test</div>
        <img class="top" src="http://mediakitchen.co.uk/images/bird.jpg" />
    </div>
    <div class="birdcage">
        <img src="http://mediakitchen.co.uk/images/birdInverted-.jpg" />
        <div class="text">Test</div>
        <img class="top" src="http://mediakitchen.co.uk/images/bird.jpg" />
    </div>
    <div class="birdcage">
        <img src="http://mediakitchen.co.uk/images/birdInverted.jpg" />
        <div class="text">Test</div>
        <img class="top" src="http://mediakitchen.co.uk/images/bird-.jpg" />
    </div>
    <div class="birdcage">
        <img src="http://mediakitchen.co.uk/images/birdInverted-.jpg" />
        <div class="text">Test</div>
        <img class="top" src="http://mediakitchen.co.uk/images/bird-.jpg" />
    </div>
    
    </body>
    </html>
    (issues with :hover and portable devices notwithstanding) Thanks.

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    You have to be careful how you hide content, because what's been set up here is for those who can see the screen. What about those who can't? They need to know what's there too, and if you initially have the content set to display: none (and possibly visibility: hidden, though I'm not sure), people using assistive technologies like screen readers may have no idea the extra content is there. And they can't hover etc. So it's at least partly an accessibility issue. Styling (or functionality provided by JS etc.) should never mean that content is not accessible to certain users.

    Having content moved off screen doesn't stop it from being accessed in screen readers. However, if someone is navigating via a keyboard and not a mouse, they will be 'up the creek without a paddle', so to speak ... as will mobile users. That's why I sounded cautions at the top of this thread.

  12. #12
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Having content moved off screen doesn't stop it from being accessed in screen readers. However, if someone is navigating via a keyboard and not a mouse, they will be 'up the creek without a paddle', so to speak ... as will mobile users. That's why I sounded cautions at the top of this thread.
    I edited my example so that :hover can hide the top image using all 3 methods: z-index, visibility, and position... just pick one . I have not considered accessibility with keyboard only or mobile devices since they don't recognize :hover. I have a feeling the web is full of "accessibility" resources. Can you recommend a favorite for a beginner?

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ronpat View Post
    I have a feeling the web is full of "accessibility" resources. Can you recommend a favorite for a beginner?
    Indeed, there are some great sites out there, and there's an Accessibility forum here, too. You might even be lucky enough to meet the forum cat, @Stomme poes , who is very knowledgeable on such things, unlike myself. It's a fascinating subject. I don't have a list of links handy at the moment, but here's one:

    http://www.w3.org/WAI/

    If you do a bit of Googling you find lots, though.

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,353
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by chuckylefrek View Post
    Made a few amends to get my text in as well as an image. You can see the test file here http://mediakitchen.co.uk/index.php/test2

    Does this seem a viable solution?
    Is the rollover image going to be a different image or just a highlighted version of the original image? If it's just an effect using an image of the same size then it would be better in the background rather than in an html element and would keep the code tidier. If it's a new image that is important to the content then having it in the html is fine. Of course you may be tied to a cms inserting both into the html so may have little choice in cleaning things up.

    Ronpat's code above is tidier as it removes all the redundant classes and tidies up the html. If as I mentioned the rollover is just for effect then I would put the second image in the background of the main div instead.

    Quote Originally Posted by ronpat
    I have a feeling the web is full of "accessibility" resources. Can you recommend a favorite for a beginner?
    You can start at the source and find plenty of appropriate links from there:

    http://www.w3.org/WAI/intro/accessibility.php
    http://www.w3.org/standards/webdesign/accessibility

  15. #15


Bookmarks

Posting Permissions

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