Search jQuery

jQuery Forum

Screen name:
xlucec

xlucec's Profile

4 Posts

9 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 seperate one piece of jquery into three different parts for three different images to fold out??
[7Replies]
- 30-Jun-2013 09:21 AM
- Forum: Using jQuery
Hi there!

for my website I inserted a piece of jquery, which is working for three lines to fold out. On the first click they fold out and on a second click they close... So that's all perfect... Thing is that they get all three folded out 350px, but I would like them to have a seperate amount of px. For example: The first picture folds out 200 px, the second 300 and the thirth 1500 px.

How can I do this, with this piece of jquery??

<script type="text/javascript">

$(document).ready(function(){
$('.sliderout').click(function() {
if ( ! $(this).hasClass('foldedOut') ) {
$(this).animate({
width: "350px",

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

function updateFoldedOutClickFunctions () {
$('.foldedOut').click(function() {
if ( $(this).hasClass('foldedOut') ) {
var parentID = $(this).parent().attr('id');
var idx = $('#'+parentID).children('.sliderout').index(this);
var size = fibonacciGetSize( idx );
$(this).removeClass('foldedOut');
$(this).animate({
width: size+"px",
}, 1000 );
}
});
}

var fibonacciSizeValues = new Array(21,34,55);

function fibonacciGetSize ( num ) {

return fibonacciSizeValues[num];
}
</script>

Thanks a lot!!

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;

}

How to fold out 3 lines next to each other onclick and close them on click?
[5Replies]
- 28-Jun-2013 02:43 AM
- Forum: Using jQuery
I have to say, that I am a beginner at the field of website building, but I'm kind of managing. The thing is that I have a problem with three lines I want to fold out 'on click' and close them 'onclick'. Now they are opening on hover, but I want them to stay open, so the website visitor can actually look at them for quite a while to read the text or examine a drawing.
I tried to do something with tabs or pull out div's, but none of them work. Here I inserted my script, with some jquery about toggle, but I don't think that will be the solution....

<html lang="nl">
<head>
<meta charset="utf-8">
<title>Index</title>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$('#line7').click(function() {
$('.imageplan').slideToggle('slow', function() {
// Animation complete.
});
});
</script>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
/* Deze div verstopt alles wat niet erin past */
div#overflow {
width:100%;
min-width:960px; /* Zorgt ervoor dat je bij een scherm minder dan 960 pixels breed wel kan scrollen */
height: 100%;
overflow: hidden;
}
/* Deze div is 10x groter dan het scherm, zodat alles sowieso achter elkaar gaat staan */
div#main {
position: relative;
float: left;
left: 377px;
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: white;*/
overflow: hidden;
}
div.line.slideout {
background-color: white;
}
/*div.line.slideout:hover {
width:auto !important;
overflow: auto;
/*background-color: red;
}*/

div.line div.image {
width:500px;
height: 100%;
background-color: blue;
}

div.line div.imageT{
width:173px;
height: 100%;
z-index: -100;
/*background-color: blue;*/
}

div.line div.uitleg {
position: relative;
width: 110px;
height: 100%;
z-index: 100;
top: -950px;
left: 27px;
font-size: 10px;
font-family: century gothic;

}

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

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

/* Fibonacci */
/*div#line1, div#line2 {width:1px;}
div#line3 {width:2px;}
div#line4 {width:3px;}*/
div#line5 {width:21px;}
div#line5a {width:4px;}
div#line6 {width:33px;}
div#line6a {width:4px;}
div#line7 {width:54px;}
div#line7a {width:4px;}
div#line8 {width:21px;}
/*div#line9 {width:34px;}
div#line10 {width:55px;}
div#line10 {width:55px;}
div#line10 {width:55px;}*/
</style>

</head>
<body>
<div id="overflow">
<div id="main">

<div id="line5" class="line slideout">
<div class="imageT"> <img src="img/uitschuiftekst.png" alt="tekst" width="366" height="950">
<div class="uitleg"
<p>location: IJsselmeer
The Netherlands</p>
<p>size: 1000m2</p>
<p>design: 2008</p>
<p>status: idea</p>
<p>The location for this particular design was situated in the middle of the IJsselmeer on a dike, which is surrounding a siltdepot. On the one side of the dike a 'clean' lake and on the other side a circular lake to store contaminated mud.
The assignment was to design a museum, a building which would make people aware of the pollution at this particularly place, but also in the rest of the world. Aside from making people aware of pollution through the exposition, which is partly about the siltdepot, also the design of the building could transform this museum in a tool, showing the pollution of the world to visitors.

When a visitor arrives at the pavillion by boat, first thing he does is climbing upon the dike and walking on it for a few meters, before entering the pavillion. This is his first encounter with the contradiction between 'clean' and dirty and contaminated. When this visitor is inside he can start his journey through the building. The building is designed in a way, that a visitor can only go up, through a staircase winding around an elevator. On each floor there is a different theme or exposition and on each floor the visitor is learning more and more about this siltdepot. At the upper floor there is suddenly a junction and the visitor is forced to make a choice: left or right. When he chooses to go left he will go up a stairs which is leading to one of the two viewpoints. He will see in this case the siltdepot. In the case that he chooses right, he will also climb a stairs before reaching the viewpoint with a view over the 'clean' IJsselmeer. This is the second and strongest confrontation the visitor has with the contradicition between clean and polluted.
</div></p>
</div>
</div>

<div id="line5a" class="line"></div>

<div id="line6" class="line slideout"><div class="imageconcept"><img src="img/concept.jpg" alt="concept" width="334" height="950"></div></div>

<div id="line6a" class="line"></div>

<div id="line7" class="line slideout"><div class="imageplan"> <img src="img/2e verd.png" alt="plattegrond" width="1275" height="950"></div></div>

<div id="line7a" class="line"></div>


</div>
</div>
</body>
</html>

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend