Search Results

Search found 2 results on 1 pages for 'lavalamp'.

Page 1/1 | 1 

  • jQuery lava-lamp-like effect bouncing all over the place!

    - by Nathan Loding
    I followed the tutorial found here and added my own flare to it: tutorial What I was looking to accomplish was to put a specific image on the left and right side of the list item. So instead of just the generic <li id="blob"></li> created in the tutorial, I did <li id="blob"><div class="blob-wrap"><div class="leftimage"></div><div class="rightimage"></div></li> to accomplish the particular effect I wanted. It works beautifully ... except that the image attempts to bounce back the "currentPageItem" if I leave the mouse hovering over one of the list items. Here's a JS Bin example: http://jsbin.com/odome What do I need to do to fix it? jQuery is firing the "hoverOut" function (or whatever you want to call it). But why?

    Read the article

  • Div not floating left

    - by Davey
    Can't seem to get this div to move to the left. Using wordpress. I tried a lot of things but am at a loss. Here is the css for the div: #portfolio li img { position: absolute; float: left; margin: 34px 50px 0 0; width: 942px; } Here is the header.php: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- Design by Davey Whitney [email protected] --> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo('charset'); ?>" /> <link rel="stylesheet" type="text/css" href="wp-content/themes/zenlite/layout.css" media="screen" /> <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/print.css" media="print" /> <link rel="stylesheet" type="text/css" href="wp-content/themes/zenlite/color.css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.kwicks-1.5.1.js"></script> <script type="text/javascript" src="js/jquery.innerfade.js"></script> <script type="text/javascript" src="js/custom.js"></script> <title> Wildfire </title> <script type="text/javascript" src="http://wfithaca.com/js/jquery.lavalamp.js"></script> <script type="text/javascript" src="http://wfithaca.com/js/jquery.easing.1.1.js"></script> <script type="text/javascript" src="http://wfithaca.com/js/jquery.cycle.all.min.js"></script> <script type="text/javascript"> function my_kwicks(){ $('.kwicks').kwicks({ duration: 300, max: 200, spacing: 0 }); } $(document).ready(function(){ my_kwicks(); }); </script> <script type="text/javascript"> $(document).ready( function(){ $('ul#portfolio').innerfade({ speed: 1000, timeout: 5000, type: 'sequence', }); }); </script> </script> <script type="text/javascript"> $(document).ready(function(){ $('li.headlink').hover( function() { $('ul', this).css('display', 'block'); }, function() { $('ul', this).css('display', 'none'); }); }); </script> </head> <body> <div id="wrapper"> <div id="header"> <ul id="portfolio"> <li> <img src="http://wfithaca.com/images/banner1.png" /> </li> <li> <img src="http://wfithaca.com/images/banner1.png" /> </li> <li> <img src="http://wfithaca.com/images/banner1.png" /> </li> </ul> </div> <div id="navigation"> <div id="kwickbar"> <ul class="kwicks"> <li id="kwick1"><a href="#">Home</a></li> <li id="kwick2"><a href="#">Menu</a></li> <li id="kwick3"><a href="#">Events</a></li> <li id="kwick4"><a href="#">Friends</a></li> <li id="kwick5"><a href="#">Contact</a></li> </ul> </div> </div> Here is the stylesheet: html,body { font-family:Tahoma, Verdana,Arial, Helvetica, sans-serif; font-size:100%; padding:0; color:#fff; border-style:none; } a { text-decoration:none; } a:hover,a:active,a:focus { text-decoration:none; } ul li { list-style-type:none; } ul.dbem_events_list a:link {color: #A32725; text-decoration: underline; } ul.dbem_events_list a:visited {color: #A32725; text-decoration: underline; } ul.dbem_events_list a:hover {color: #ffffff; text-decoration: none; } ul.dbem_events_list{text-decoration:none; list-style-type:none;} ul li ul li { list-style-type:none; } ul li ul li ul li { list-style-type: none; } q:before, q:after { content:""; } #wrapper { width:986px; margin: 0 auto; } #header { background-image:url('images/headframe.png'); width:986px; height:271px; } #kwickbar { padding: 25px 0 0 25px; } #navigation { width:984px; height: 100px; background-color: #000000; text-decoration:none; margin-left:1px; } .update-post { float:left; width:100px; } #content { float:left; height:100%; width:984px; background-color: #000000; text-decoration:none; margin-left:1px; } #postcontent{ height:100%; width:100%; } #content .post { float:left; width:90px; } #content .page,#content .attachment,.postcontent { color:#fff; width:720px; margin-top:15px; margin-left:30px; float:left; text-decoration:none; } .photo { width: 250px; height:700px; background-color:#000000; margin:0 0 0 880px; } .slideshow { height: 232px; width: 232px; margin:0 0 0 880px; } .slideshow img { border: 5px solid #000; } .post-title { margin:0; padding:0; } .post-title a { text-decoration:none; } .post-title a:hover,.post-title a:active,.post-title a:focus { text-decoration:underline; } #content .meta li,#content .prevnext li,#content .gallery li { list-style-image:none; list-style:none; } .meta { margin:5px 0 0; padding:0; font-size:.85em; } .meta ul,.meta li { margin:0; padding:0; } .meta ul { display:inline; } .meta li li { display:inline; padding-right:.3em; } .postfoot { clear:both; margin-bottom:20px; padding-bottom:10px; line-height:1.2em; } .author .posts-by { padding-top:10px; } #footer { clear:both; margin:0; padding:0 0 5px; text-align:center; font-size:.8em; border: 0; width:960px; } #footer ul { clear:both; margin:0; padding:0; } #footer li { display:inline; margin:0; padding:0 5px; } #footer li.rss { position:relative; top:3px; } .copyright { padding:50px 0 0 0; font-family:verdana; color:#ffffff; text-align:left; width:800px; font-size:0.8em; } .copyright a { text-decoration:none; color:#7E0000; font-weight:600; } .copyright a:hover { color:#C0D341; } . .postcontent p { text-decoration:none; border:0; border-style:none; } .postcontent p a:hover { color:#fff; } .kwicks { list-style-type: none; list-style-position:outside; position: relative; margin: 0; padding: 0; } .kwicks li{ display: block; overflow: hidden; padding: 0; cursor: pointer; float: left; width: 125px; height: 40px; margin-right: 0px; background-image:url('http://wfithaca.com/images/kwicks.jpg'); background-repeat:no-repeat; } .kwicks a{ display:block; height:40px; text-indent:-9999px; outline:none; } #kwick1 { background-position:0px 0px; } #kwick2 { background-position:-200px 0px; } #kwick3 { background-position:-400px 0px; } #kwick4 { background-position:-600px 0px; } #kwick5 { background-position:-800px 0px; } #kwick1.active, #kwick1:hover { background-position: 0 bottom; } #kwick2.active, #kwick2:hover{ background-position: -200px bottom; } #kwick3.active, #kwick3:hover { background-position: -400px bottom; } #kwick4.active, #kwick4:hover { background-position: -600px bottom; } #kwick5.active, #kwick5:hover { background-position: -800px bottom; } #portfolio li img { position: absolute; float: left; margin: 34px 50px 0 0; width: 942px; } Just want the #portfolio li img div to move to the left a bit. any help would be greatly appreciated.

    Read the article

1