Would this be possible in CSS?

Discussion in 'Web Design and Development' started by irishgrizzly, Aug 14, 2009.

  1. irishgrizzly macrumors 65816

    irishgrizzly

    Joined:
    May 15, 2006
    #1
    I want to create multiple sliding panels in CSS. Instead of flash I want to use CSS. Here is an idea of what I'm thinking of;
    http://img80.imageshack.us/i/slide.gif/
    [​IMG]

    Would this be possible using just CSS? On clicking the first panel – the other 3 sliding back to reveal new text/image.[​IMG]
     
  2. detz macrumors 65816

    Joined:
    Jun 29, 2007
    #2
    Anything is possible it's how much work you want to do to accomplish it and ho w fast and efficient the results will be compare to other more suited technologies.
     
  3. Cerebrus' Maw macrumors 6502

    Joined:
    Mar 9, 2008
    Location:
    Brisbane, Australia
    #3
    You could use Javascript to manipulate your CSS at certain events, such as onlcick on each of your panels, so yes, it would be possible.
     
  4. irishgrizzly thread starter macrumors 65816

    irishgrizzly

    Joined:
    May 15, 2006
    #4
    Can anyone think of some working examples of something like this?
     
  5. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #5
    I can't view the link as imageshack is blocked at my work. As mentioned you'll need JavaScript to do animation. jQuery has a number of scripts built off of for various purposes such as this. Here's one example.
     
  6. Cerebrus' Maw macrumors 6502

    Joined:
    Mar 9, 2008
    Location:
    Brisbane, Australia
    #6
    This is just something I quickly put together. It's horribly inefficient, but it's past midnight, it's a Friday night, so blah. ;)

    Just copy this and past it into a file and save it as .html, then view in your browser.

    Code:
    <html>
      <head>
        <title>Page</title>
       <script language="javascript">
         function toggleOn() {
            var panel1 = document.getElementById('panel1')
            panel1.style.width='200px'
            panel1.style.height='200px'
            panel1.innerHTML='Mouse Out'
            document.getElementById('panel2').style.display='none'
            document.getElementById('panel3').style.display='none'
            document.getElementById('panel4').style.display='none'
           return false;
        } 
    
         function toggleOff() {
            var panel1 = document.getElementById('panel1')
            panel1.style.width='100px'
            panel1.style.height='100px'
            panel1.innerHTML='Mouse Over'
    
            document.getElementById('panel2').style.display='inline'
            document.getElementById('panel3').style.display='inline'
            document.getElementById('panel4').style.display='inline'
           return false;
        } 
    
       </script>
    
       <style>
         #container{
            border:3px solid yellow;
            width:250px;
         }
    
         #panel1 {float:left;
          border:1px solid black;
          width:100px;
          height:100px;
         text-align:center;
            padding:5px;
            margin:5px;
          }
    
         #panel2 { float:right;
          border:1px solid blue;
          width:100px;
          height:100px;
         text-align:center;
            padding:5px;
            margin:5px;
           
          }
         #panel3 { float:left;
          border:1px solid red;
          width:100px;
          height:100px;
         text-align:center;
            padding:5px;
            margin:5px;
          }
         #panel4 { float:right;
          border:1px solid green;
          width:100px;
          height:100px;
         text-align:center;
            padding:5px;
            margin:5px;
          }
    
        </style>
      </head>
     <body>
      <div id="container">
               <div id="panel1" onmouseover="toggleOn();" onmouseout="toggleOff();">
                     Mouse Over
               </div>
               <div id="panel2">
                     Panel 2
               </div>
               <div id="panel3">
                    Panel 3
               </div>
               <div id="panel4">
                    Panel 4
               </div>
               <div style="clear:both;"></div>
        </div>
     </body>
    </html>
    
     
  7. Dal123 macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #7
    So when you click on panel 1 it stretches (or it stretches after a certain time)?:eek:
    This is gonna look cool if you do it on click. Make sure you post if you go through with it :D.
     
  8. irishgrizzly thread starter macrumors 65816

    irishgrizzly

    Joined:
    May 15, 2006
    #8
    I would be better off handling this in flash, but I'm told that Flash sites are poor for search SEO. Is this still the case? and a valid reason not to use pure flash (with a plainer non-flash alternative)?
     
  9. lucidmedia macrumors 6502a

    Joined:
    Oct 13, 2008
    Location:
    Wellington, New Zealand
    #9
    If you use a proper embedding method like SWFobject Flash sites can be SEO friendly... however I don't see any reason you could not do the effect with a Javacript library like scriptaculous or jquery.
     

Share This Page