Search jQuery

jQuery Forum

Screen name:
xlucec

xlucec's Profile

2 Posts

4 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

How to tell my jquery hover slide out, not to build up a queue and stop and just slideout on mouseover and slide back in after a mousleave???
[6Replies]
- 03-Jul-2013 02:25 AM
- Forum: Using jQuery
Hi all,

first of all, thanks in advance for looking at this piece of jquery. This jquery piece should fold out three pictures only to the right, which is working perfectly. Thing is that because of the hover, it's building up a queue and when you hover over it three times or something like that, it doesn't slide back on mouseleave, but it stays slided out, because of this queue... I was told to add a stop function... So I tried...but it doesn't really work... I'm really an amateur on jquery, so it might be a really easy sollution

This is my jquery:

<script type="text/javascript">

$(document).ready(function(){
$('.slideout').hover(function() {
if ( ! $(this).hasClass('foldedOut') ) {
$(this).animate({
width: "1089px",

}, 1000, '', function() {
$(this).addClass('foldedOut');
updateFoldedOutClickFunctions();

});
}
});
});

function updateFoldedOutClickFunctions () {
$('.foldedOut').hover(function() {
if ( $(this).hasClass('foldedOut') ) {
var parentID = $(this).parent().attr('id');
var idx = $('#'+parentID).children('.slideout').index(this);
var size = fibonacciGetSize( idx );
$(this).removeClass('foldedOut');
$(this).animate({
width: size+"px",
}, 3000 );
.next().stop(true, true).foldedOut();
}
});
}

var fibonacciSizeValues = new Array(144,233);

function fibonacciGetSize ( num ) {

return fibonacciSizeValues[num];
}
</script>

How to hide the x and y scrollbars in my folding out pictures?
[1Reply]
- 30-Jun-2013 08:05 AM
- Forum: Using jQuery
On this homepage website, I have three big pictures, which fold out on a hover... so basically a big part of the image is hidden and at a mouse hover it get's visible....

Thing is... I get these ugly scrollbars in my images when they fold out... I tried to get rid of them, but so far without any succes...

I'm a bit of a rooky on the field of building websites...so maybe this solution is very easy to solve... I hope...

This is the html and css...

<!DOCTYPE html>

<html>
<head>
<title>Homepage</title>
<link rel= "stylesheet" href= "stylesheet.css" type= "text/css" media= "screen"
title= "no title" charset= "utf-8">
<style type="text/css">
</style>

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript">

//$(document).ready(function() {
// $('#menu ul li ul').hide();
// $("#menu li").click(
// function(){
// $('#menu ul li ul').hide();
// $(this).find('ul').show();
// }
// );
//
//});
</script>

</head>

<body>
<div id="overflow">

<div id="div-logo">
<img src="img/logo.png" alt="LCB" width="143" height="110">

</div>

<div id="menu" class="menu">
<ul><li><a href="#menu">Architecture</a>
<ul id="menu1"><li><a href="obese clinic.html">Obese clinic</a></li>
<li><a href="projectHouseB.html">House B</a></li>
<li><a href="schoolinRotterdam.html">School</a></li>
<li><a href="pavillion on the siltdepot.html">pavillion on the siltdepot</a></li>
</ul>
</li>
<li><a href="designpage.html#menu">Design</a>

</li>
<li><a href="aboutme.html"> About me</a></li>
<li><a href="contact.html"> Contact</a></li>
</ul>
</div>



<div id="main">


<div id="fixedlines" class="line">
<div id="line1" class="line">

</div>

<div id="line2" class="line">

</div>

<div id="line3" class="line">

</div>

<div id="line4" class="line">

</div>

<div id="line5" class="line">

</div>

<div id="line6" class="line">

</div>


<div id="line7" class="line" >

</div>

<div id="line8" class="line">

</div>

<div id="line9" class="line" >

</div>

<div id="line10" class="line">

</div>

<div id="line11" class="line" >

</div>

<div id="line12" class="line">

</div>

<div id="line13" class="line">

</div>

<div id="line14" class="line">

</div>

<div id="line15" class="line">

</div>

<div id="line16" class="line">

</div>
</div>

<div id="floatlines" class="line">
<div id="line17" class="line slideout">
<div class="image pavillion"><a href="pavillion on the siltdepot.html"><img src="img/Bsc2.jpg" alt="pavillion" width="1232" height="950"</a>
</div>

</div>

<div id="line18" class="line slideout">
<div class="image houseB"><a href="project House B.html"><img src="img/huisBhal.jpg" alt="huisB" width="1089" height="950"</a>
</div>
</div>

<div id="line19" class="line compleet">
<div class="image obese"><a href="obese clinic.html"><img src="img/Obeseclinic.jpg" alt="ObeseC" width="1712" height="950"</a>
</div>
</div>

<div id="line20" class="line">

</div>




</div>
</div>

</body>
</html>

And the CSS below:

body {
margin: 0;
padding: 0;
}

div#fixedlines {
position:fixed;
}
div#floatlines {
margin-left:119px;
}

/* Deze div verstopt alles wat niet erin past */
div#overflow {
position: absolute;
width:100%;
min-width:960px; /* Zorgt ervoor dat je bij een scherm minder dan 960 pixels breed wel kan scrollen */
height: 100%;
overflow: hidden;
background-color: #000000;
}
/* Deze div is 10x groter dan het scherm, zodat alles sowieso achter elkaar gaat staan */
div#main {
width: 1000%;
height: 100%;
}
div.line {
margin:0;
display: block; /* display:inline-block geeft ruimte tussen de divs (wegens de enters in de html) */
float: left;
height: 100%;
background-color: #000000;
/*outline: 1px solid red;*/
overflow: hidden;
}
div.compleet {
margin:0;
display: block; /* display:inline-block geeft ruimte tussen de divs (wegens de enters in de html) */
float: left;
height: 100%;
background-color: #000000;
/*outline: 1px solid red;*/
overflow: visible;
}

div.line.slideout {
/*background-color: white;*/
}
div.line.slideout:hover,
div.line.slideout.out {
width:auto !important;
overflow: auto;
/*background-color: red;*/
}

div.line div.image pavillion {
width:1089px;
height: 100%;
/*background-color: blue;*/
}

div.line div.image houseB div.geheel{
width:966px;
height: 100%;
/*background-color: blue;*/
}

div.line div.compleet div.image obese {
width:1514px;
height: 100%;
/*background-color: blue;*/
}

div.line div.tekstuitschuif {
width:144px;
height: 100%;
}

div#lijnenspel {
position: fixed;
left: 240px;
width: 1000%;
height: 950px;
z-index: 10000;
}

div#uitklaplijnen {
position: relative;
float: left;
left: 0px;
width: 1000%;
height: 100%;
}

div.lines {
margin:0;
display: block;
float: left;
height: 100%;
}

div.lines.sliderout {
overflow: hidden;
}

div.lines div.imageT{
width:173px;
height: 100%;
z-index: -100;
}

div.lines div.uitleg {
position: relative;
width: 300px;
height: 100%;
z-index: 100;
top: -930px;
left: 27px;
font-size: 14px;
font-family: century gothic;
}

div.lines div.imageplan {
width:1275px;
height: 100%;
background-color: black;
}

div.lines div.imageconcept {
width:334px;
height: 100%;
background-color: black;
}

div#lineA {width:21px;}
div#lineAa {width:4px;}
div#lineB {width:34px;}
div#lineBa {width:4px;}
div#lineC {width:54px;}

div#line1 {width:1px;
background-color: #0d7062;
}

div#line2 {width:1px;}

div#line3 {width:2px;
background-color: #151515;
}

div#line4 {width:2px;}

div#line5 {width:3px;
background-color: #151515;
}

div#line6 {width:3px;}

div#line7 {width:5px;
background-color: #151515;
}

div#line8 {width:5px;}

div#line9 {width:8px;
background-color: #151515;
}

div#line10 {width:8px;}

div#line11 {width:13px;
background-color: #151515;
}

div#line12 {width:13px;}

div#line13 {width:21px;
background-color: #151515;
}

div#line14 {width:34px;}

div#line15 {width:55px;}

div#line16 {width:89px;}

div#line17 {width:144px;}

div#line18 {width:233px;}

div#line19 {width:/*377*/1597px;}

div#line20 {width:610px;}

#div-logo {
float: left;
position: relative;
z-index: 100;
left: 45px;
height:110px;
width: 143px;
/*background-color: black;*/
}

div#menu {
float: left;
position:absolute;
z-index: 100;
margin-top: 142px;
width: 300px;
height: 89px;
/*background-color: white;*/

font-family: century gothic;
font-size: 10px;


}

a:link {text-decoration:none;
color: white;}
a:visited {text-decoration: none;
color: white;}
a:hover {text-decoration: none;}

.menu ul {
padding: 2px;
text-decoration: none;
list-style: none;
display: inline-table;
}

.menu ul ul {
display: block;
position: absolute;
left: 85px;

}

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend