1 Reply Latest reply: Jan 24, 2011 3:10 AM by luadke RSS

    I want my div to slide in not expand in (jquery)

    luadke Community Member

      Hello,

       

      How can I make it so that the div holding the iframe slides on rather than slides and expands as it is doing now. Here is my working page- http://blackpaint.co.uk/new/ . I tried looking at the code here but could make it work: http://www.learningjquery.com/2009/02/slide-elements-in-different-dire ctions. So basically just making it move on the x axis and for the content not to resize inside.

       

      thank you

       

      ------------

       

      the source code and css are below:

       

                                                                                                                                                 

       
                             
             
          
                     
                  
                     
        
             
                        

              mystery jets (music video)
          fenech soler

      - - - - -

           seaweed
          pixel fun
          making a shell
             

      - - - - -

           tide
          eyelids
                   

      - - - - -

                        press and exhibitions 
                  

      - - - - -

                

      about

      luke@blackpaint.co.uk

                 
         
                
             
                                                               
                            
                

       

       

      css:

       

      /* Supersized - Fullscreen Slideshow jQuery Plugin Stylesheet Version 3.0 By Sam Dunn (www.buildinternet.com // www.onemightyroar.com) Version: supersized.3.0.js Website: www.buildinternet.com/project/supersized */ *{          margin:0;          padding:0;      }      a{      color:#CCC;      text-decoration: none;      outline: none;      }      img{          border:none;      }      body {          overflow:hidden;/*Needed to eliminate scrollbars*/          background:#000;      }      /*Area to place content normally*/      #content-wrapper{           width:100%;           height:100%;           position:absolute;           top:0;           overflow:auto;           z-index:4;           text-align:center;      }                  /*Supersize Plugin Styles*/      #navigation{          float: right;          margin:10px 20px 0 0;      }      #loading {      position: absolute;      top: 49.5%;      left: 40%;      z-index: 10;      width: 217px;      height: 25px;      text-indent: -999em;      background-image: url(../supersized3/images/progress1.gif);      }      #supersized{          position:fixed;      }      #supersized img{ -ms-interpolation-mode: bicubic; }      #supersized img, #supersized a{          height:100%;          width:100%;          position:absolute;          z-index: -1;      }            #supersized .prevslide, #supersized .prevslide img{          z-index: 1;      }      #supersized .activeslide, #supersized .activeslide img{          z-index: 2;      }            #nextthumb, #prevthumb{ z-index:6; display:none; position:absolute; bottom:12px; height:75px; width:100px; overflow:hidden; border:2px solid #fff; -webkit-box-shadow: 0px 0px 5px #000; }      #nextthumb{ right:12px; }      #prevthumb{ left:12px; }           #nextthumb img, #prevthumb img{ width:150px; }           #nextthumb:active, #prevthumb:active{ bottom:10px; }                      /*Add hover pointer*/           #controls > *:hover, #nextthumb:hover, #prevthumb:hover{ cursor:pointer; }                             /*Font Colour change*/           .second      a {      font-style:normal !important;            padding: 5px; }      body {      background-color:#FFF; } /*Font Colour change*/      #list {      padding: 20px;      } h1 {      font-size:18px;      font-weight:bold;      font-family: Georgia, "Times New Roman", Times, serif;      color: #999; } h2 {      font-size:11px;      font-weight:lighter;      font-family: Georgia, "Times New Roman", Times, serif;      color: #999; } p     {      font-size:11px;      font-weight:lighter;      font-family: Georgia, "Times New Roman", Times, serif;      color: #999; } .externalcontent {      color: #666;      padding: 20px; } #mediaholder {      padding-left: 20px;      }

        • 1. Re: I want my div to slide in not expand in (jquery)
          luadke Community Member

          Sorry about that, let me try again:

           

          html:

           

          <!--
          plainslides.html
          Supersized - Fullscreen Slideshow jQuery Plugin Version 3.0
          By Sam Dunn (www.buildinternet.com // www.onemightyroar.com)
          Website: www.buildinternet.com/project/supersized
          -->
          <!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" dir="ltr" lang="en-US"><head profile="http://gmpg.org/xfn/11">
          
          <title>Supersized - Full Screen Background/Slideshow jQuery Plugin</title>
               <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
               
          <link rel="stylesheet" href="css/supersized.css" type="text/css" media="screen" />
                
                  <!--needs for bg images (also has to be above jquery for overlay) -->
               <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
                <!--needs for bg images -->
          
           <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js"></script>   
              
           <!--SCRIPT FOR FONT COLOUR CHANGE -->
          
          <script type="text/javascript" src="jQuery_color_animation/js/jquery-1.3.2.min.js"></script>
          <script type="text/javascript" src="jQuery_color_animation/js/jquery.color.js"></script>
          
          <script type="text/javascript"> 
          
          
           <!--START SCRIPT FOR FONT COLOUR CHANGE -->
           // Background color animation 
                  $(document).ready(function(){
                          $(".first a").hover(function() {
                          $(this).animate({ backgroundColor: "#00aadd" }, 600);
                  },function() {
                           $(this).animate({ backgroundColor: "#303030" }, 400);
                  });
           // font color animation 
                          $(".second a").hover(function() {
                          $(this).animate({ color: "#FFDA6B" }, 100);
                  },function() {
              $(this).animate({ color: "#CCC" }, 500);
                  });
             
               });
          
          
           <!--END SCRIPT FOR FONT COLOUR CHANGE -->
          
            </script> 
            
            
          <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> 
               <script src="supersized3/js/effects.core.js"></script> 
               <script src="supersized3/js/effects.slide.js"></script> 
               
               <script type="text/javascript" src="supersized3/supersized.3.0.js"></script> 
               <script type="text/javascript">  
                    $(function(){
                         $.fn.supersized.options = {  
                              startwidth: 640,  
                              startheight: 377,
                              vertical_center: 1,
                              slideshow: 1,
                              navigation: 0,
                              thumbnail_navigation: 0,
                              transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
                              pause_hover: 0,
                              slide_counter: 0,
                              slide_captions: 0,
                              slide_interval: 500,
                              slides : [
                                   {image : 'supersized3/slides/1.jpg'},
                                   {image : 'supersized3/slides/2.jpg'},
                                   {image : 'supersized3/slides/3.jpg'},
                                   
                              ]
                         };
                       $('#supersized').supersized(); 
                   });
               </script> 
              
              
             
               
          
                <!--STYLE FOR BG IMAGES TO WORK -->
               <style type="text/css"> 
               
                    #content{ background-color:rgba(0,0,0,0.65); width:720px; height:800px; margin:30px auto; text-align:left; }
                         
          
                    
               </style> 
           <!--STYLE FOR BG IMAGES TO WORK -->
           
          <style type="text/css">
          <!--
          #the_effect {
               float:right;
               display:none;
               margin-left:100px;
               width:80%;
               height: 100%;
          }
           
          #the_effect2 {
               float:right;
               display:none;
               margin-left:100px;
               width:80%;
               height: 100%;
          } 
           
          .links {
               text-align:left;
               float:left;
               position: absolute;
          }
           
          .clearfloat {
          clear:both;
          height:0px;
          font-size: 1px;
          line-height: 0px;
          }
          -->
            </style>
          
          
          </head>
          
               <body>
              
             
              
               
               <!--Loading display while images load-->
               <div id="loading"> </div>
              
             
               
               <!--Content Area-->
               <div id="content-wrapper">
              
              
          <!-- container required to validate strict for clearfloat linebreak at end of container -->
          <div>
           
               <div id="the_effect">
                    <IFRAME width="100%" height="100%" frameborder="0" src="pages/main-pages.html"></IFRAME>
               </div>
               
                  <div id="the_effect2">
                    <IFRAME width="100%" height="100%" frameborder="0" src="pages/main-pages.html"></IFRAME>
               </div>
           
             <div id="list" class="second"> 
             
               <div class="links">
               
              
               
               <h2>
             
               <a href="#" id="effect_link">mystery jets (music video)</a><br />
          
              <a href="#" id="effect_link2">fenech soler</a><br />
          <p>- - - - -</p>
               <a href="#" id="two" >seaweed</a><br />
              <a href="#" id="two" >pixel fun</a><br />
              <a href="#" id="two" >making a shell</a><br />
              
              <p>- - - - -</p>
          
          
          
               <a href="#" id="two" >tide </a><br />
              <a href="#" id="two" >eyelids </a><br />
          
          
            </h2>
            
                   <p>- - - - -</p>
                   
                   <a href="#" id="two" >press and exhibitions  </a><br />
                       <p>- - - - -</p>
                     <a href="#" id="two" > <h1>about</h1></a>
          <P><a href="mailto:luke@blackpaint.co.uk">luke@blackpaint.co.uk</a></p>
                 
               </div>
              </div>
                
             
            <br class="clearfloat" />
            
            
            
            
          </div>
          <!-- end container -->
           
               <script type="text/javascript">
               <!--
                    $("#effect_link").click(function() {
                              $("#the_effect2").hide("fast");
                         $("#the_effect").toggle("fast");
                         return false;
                    });
                      
               -->
                
                     <!--
                    $("#effect_link2").click(function(slide) {
                            $("#the_effect").hide("fast");
                         $("#the_effect2").toggle("fast");
                         return false;
                    });
               -->
               </script>    
               
               
               
               
          
                 
                 
              
              
          
              
          
          
          
             </div>
               
               
               <!--Slides-->
               <div id="supersized"></div>
              
             
              
          
          
          
          
          
          </body>
          
          </html>
          
           
          

           

           

          /*
          Supersized - Fullscreen Slideshow jQuery Plugin Stylesheet Version 3.0
          By Sam Dunn (www.buildinternet.com // www.onemightyroar.com)
          Version: supersized.3.0.js
          Website: www.buildinternet.com/project/supersized
          */
          
          *{
                   margin:0;
                   padding:0;
               }
               a{
               color:#CCC;
               text-decoration: none;
               outline: none;
               }
               img{
                   border:none;
               }
               body {
                   overflow:hidden;/*Needed to eliminate scrollbars*/
                   background:#000;
               }
               /*Area to place content normally*/
               #content-wrapper{ 
                    width:100%; 
                    height:100%; 
                    position:absolute; 
                    top:0; 
                    overflow:auto; 
                    z-index:4; 
                    text-align:center; 
               }
               
          
          
          
               
               /*Supersize Plugin Styles*/
               #navigation{
                   float: right;
                   margin:10px 20px 0 0;
               }
               #loading {
               position: absolute;
               top: 49.5%;
               left: 40%;
               z-index: 10;
               width: 217px;
               height: 25px;
               text-indent: -999em;
               background-image: url(../supersized3/images/progress1.gif);
               }
               #supersized{
                   position:fixed;
               }
               #supersized img{ -ms-interpolation-mode: bicubic; }
               #supersized img, #supersized a{
                   height:100%;
                   width:100%;
                   position:absolute;
                   z-index: -1;
               }
               
               #supersized .prevslide, #supersized .prevslide img{
                   z-index: 1;
               }
               #supersized .activeslide, #supersized .activeslide img{
                   z-index: 2;
               }
               
               #nextthumb, #prevthumb{ z-index:6; display:none; position:absolute; bottom:12px; height:75px; width:100px; overflow:hidden; border:2px solid #fff; -webkit-box-shadow: 0px 0px 5px #000; }
               #nextthumb{ right:12px; }
               #prevthumb{ left:12px; }
                    #nextthumb img, #prevthumb img{ width:150px; }
                    #nextthumb:active, #prevthumb:active{ bottom:10px; }
                    
                    /*Add hover pointer*/
                    #controls > *:hover, #nextthumb:hover, #prevthumb:hover{ cursor:pointer; }
                    
               
                    
          /*Font Colour change*/          
          .second      a {
               font-style:normal !important;
               
               padding: 5px;
          }
          
          
               body {
               background-color:#FFF;
          }
          /*Font Colour change*/     
          
          
          
          
          
          
          #list {
               padding: 20px;     
          }
          
          
          
          
          h1 {
               font-size:18px;
               font-weight:bold;
               font-family: Georgia, "Times New Roman", Times, serif;
               color: #999;
          }
          
          h2 {
               font-size:11px;
               font-weight:lighter;
               font-family: Georgia, "Times New Roman", Times, serif;
               color: #999;
          }
          
          p     {
               font-size:11px;
               font-weight:lighter;
               font-family: Georgia, "Times New Roman", Times, serif;
               color: #999;
          }
          
          .externalcontent {
               color: #666;
               padding: 20px;
          
          }
          
          #mediaholder {
               padding-left: 20px;     
          }