jquery - JavaScript slide, text disappear and center fix -


i have few problems code: html:

<!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">     <head>         <script class="jsbin" src="js/jquery.min.js"></script>         <link href="css/stylesheet.css" rel="stylesheet" type="text/css" />         <meta http-equiv="content-type" content="text/html; charset=utf-8" />         <title>bellevue</title>     </head>      <body>     <div id="container">         <div id="gallery">             <center>             <div id="slider">               <img src="images/1.jpg">               <img src="images/2.jpg">               <img src="images/1.jpg">             </div>             </center>             <div id="nav">             <ul>               <li class="active">go slide 1</li>               <li>go slide 2</li>               <li>go slide 3</li>             </ul>             </div>              <div id="info">               <div class="info"><h3>info panel 1</h3></div>               <div class="info"><h3>info panel 2</h3></div>               <div class="info"><h3>info panel 3</h3></div>              </div>         </div>     </div>     <div id="lengte"></div>     <script>     var imgn = "95%";     var galw = $('#gallery').outerwidth(true);     var gall = $('#lengte').outerwidth(true);      $('#slider, #info').width(galw*imgn);      $('#nav li').click(function(){       var ind = $(this).index();       $('#slider').stop(1).animate({top: '-'+gall*ind },1500);       $('#info').stop(1).animate({left: '-'+galw*ind },1500);       $(this).addclass('active').siblings('li').removeclass('active');     });     </script>      </body> </html>

css:

@charset "utf-8"; /* css document */  *{     margin:0px; }    body{     font-family:arial, verdana, helvetica, sans-serif;     background-color: #fff;     margin:0px;     padding:0px;   }  #container{     margin-left:5%;     margin-right:5%; }  /*slider*/   article, aside, figure, footer, header, hgroup,    menu, nav, section { display: block; }     #gallery{     width:100%;     height:490px;     position:relative;     margin:20px auto;     background:#eee;     overflow:hidden;   }   #slider{       width:680px;       margin-left:auto;       margin-right:auto;       position:absolute;   }   #slider img{     position:relative;     float:left;   }   #lengte{       width:350px;   }   #nav{     width:100%;     z-index:2;     position:absolute;     top:305px;     text-align:center;   }   #nav li{     cursor:pointer;     display:inline;     background:#ddd;     padding:10px;     margin:1px;     border-bottom:1px solid #999;     -moz-border-radius-topleft: 6px;     -moz-border-radius-topright: 6px;     -moz-border-radius-bottomright: 0px;     -moz-border-radius-bottomleft: 0px;     -webkit-border-radius: 6px 6px 0px 0px;     border-radius: 6px 6px 0px 0px;    }   #nav li.active{     background:#eee;     border-bottom:1px solid #eee;   }    #info{     position:absolute;     top:350px;     height:140px;     width:100%;     background:#eee;   }    div.info{     position:relative;     float:left;     padding:10px 25px;     height:120px;     width:100%;   }

problems:

  1. the images slide nicely , down, not centred
  2. the text disappears have slide form right left, can't them. see next picture
  3. the whole page isn't @ top. see white space on top

can me (one of these) problems?

links: http://jsfiddle.net/fyge5/ http://www.wouterschaeffer.nl/bellevue/poging3

to solve first problem: slider needs wrapper div 'window', lets 1 image show through @ time. should center wrapper div, , not center slides.

<div class="slider-wrapper">     <div id="slider">

remove: 

<center>...</center>

css above:

.slider-wrapper {     position: relative;     width:680px;     margin: 0 auto; }

also, remove padding nav ul, pushes off-center:

#nav ul {     padding: 0; }

as sliding #info off page well, need use wrapper div it:

<div class="info-wrapper">     <div id="info">

css above:

.info-wrapper {     position: absolute;     top:350px;     height:140px;     width: 100%; } #info {     position:absolute;     top: 0px;     left: 0px;     width: 300%;     background:#eee; } div.info {     float:left;     padding:10px 0;     height:120px;     width: 33.33%; } div.info h3 {     padding:0 25px; }

to remove margin @ top, remove margin-top #gallery:

#gallery {     margin: 0 auto 20px;

final product:

http://jsfiddle.net/fyge5/8/


Comments

Post a Comment

Popular posts from this blog

assembly - 8086 TASM: Illegal Indexing Mode -

this question has answer here: illegal use of register in indirect addressing 1 answer i writing 8086 assembly program needs compile through tasm v3.1. running error can not seem fix. my data segment has following set purposes of keyboard input: parao label byte maxo db 5 acto db ? datao db 5 dup('$') what trying first character entered, first byte of datao: lea dx, datao mov bl, [dx] however, when attempt compile, error: **error** h5.asm(152) illegal indexing mode line 152 "mov bl, [dx]" any appreciated. if matters, running tasm through dosbox (my laptop running 64-bit win7) google hasn't come helpful answers. can post entirety of code if necessary. pretty sure reason can't use dx register pointer. try instead using [si], [di] or [bx]: lea bx, data0 mov al, [bx]
Read more

Java, LWJGL, OpenGL 1.1, decoding BufferedImage to Bytebuffer and binding to OpenGL across classes -

i've been attempting solve problem without luck. have 4 classes, main class, object class, sprite class , image loader class. i'm attempting load png using image loader , using method found here: http://www.java-gaming.org/topics/bufferedimage-to-lwjgl-texture/25516/msg/220280/view.html#msg220280 convert bytebuffer, , bind opengl. the image in it's own seperate resource folder. should being drawn this: ( http://i.imgur.com/j8gbu4c.png ) (32x32), i'm seeing white box has dimensions of image, not actual texture. if has idea of go fix i'd appreciate it. i'm new opengl , looking avoid using external library in order learn how actual code works. thanks. updated! to following, implemented suggestion provided vallentin, quad taking color of first pixel in image. i've attempted implementing image loader provided c.s here . i'm receiving error: javax.imageio.iioexception: error reading png image data @ com.sun.imageio.plugins.png.pngimagereader.r...
Read more

javascript - addthis share facebook and google+ url -

i attempting use addthis create simple url shares whichever current page user on when click share button. of right now, have twitter working. when user clicks, able see url populated in tweet box. when user clicks facebook or google+, url doesn't seem show in share box. <ul class="addthis_toolbox addthis_default_style "> <li><a class="addthis_button_facebook"><img src="/img/facebook-social.png" width="20" height="20" border="0" alt="share" /></a></li> <li><a class="addthis_button_twitter"><img src="/img/twitter-social.png" width="20" height="20" border="0" alt="share" /></a></li> <li><a class="addthis_button_google_plusone_share"><img src="/img/google-social.png" width="20" height="20" border="0" alt="s...
Read more