hi alle
ich bin etwas am herumpröbeln mit javaScript und jQuery hier mal der code
nun zu meinen fragen.
1. wie kann ich verhindern dass das hochfahren unterbrochen wird wenn der container 100px unterhalb des viewports angekommen ist
2. möchte ich das beim zweiten klick auf link1 der container wieder verschwindet.
Das ist nur ein Test für mich damit ich die funktionen und eigenheiten von jQuery und javaScript lernen und verstehen kann. Ich suche also nicht nach einer einfacheren möglichkeit dies darzustellen sondern einfach nur nach einer lösung welche man mir auch einfach erklären kann, da ich ja wissen will was ich da mache und nicht nur einfach leer den code einfügen möchte.
Mfg devilseye
ich bin etwas am herumpröbeln mit javaScript und jQuery hier mal der code
HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="Untitled-3.js" language="javascript" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$('#gugus').hide();
function show() { $('#gugus').show()};
$('#link1').click(function(){
show();
});
function flydown(){ $('#huibuh').animate( {top: '+=150px'} ); }; /* funktion ist flydown diese ist das animieren von huibuh 150px nach unten */
$('#link2').click(function(){ /* beim Klicken auf #link2 wird funktion flydown ausgeführt */
flydown();
});
function flyup(){ $('#huibuh').animate( {top: '-=150px'} ); };
$('#link3').click(function(){
flyup();
});
});
</script>
<style type="text/css">
body, html {width:100%; height:100%; margin:0; padding:0;}
#wrapper {float:left; width:100%; height:100%; position:relative; min-height:100%!important;}
#huibuh {
position:absolute;
top:100px;
left:50%;
margin: 0 0 0 -50px;
width:100px;
height:100px;
background:#F00;
height:100px;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
color:#FFF
}
#gugus {
background-color:#0F0;
position:absolute;
top:50px;
left:25%;
width:200px;
height:200px;
}
ul li {
border:#00F 1px solid;
display:block;
float:left;
padding:0 10px;
margin:10px;
cursor:crosshair;
}
ul li:hover {
color:#fff;
background-color:#000;
}
</style>
</head>
<body>
<div id="wrapper">
<ul>
<li id="link1">Link1</li>
<li id="link2">Link2</li>
<li id="link3">Link3</li>
</ul>
<div id="gugus">gugus
<div id="huibuh">buh</div>
</div>
</div>
</body>
</html>nun zu meinen fragen.
1. wie kann ich verhindern dass das hochfahren unterbrochen wird wenn der container 100px unterhalb des viewports angekommen ist
2. möchte ich das beim zweiten klick auf link1 der container wieder verschwindet.
Das ist nur ein Test für mich damit ich die funktionen und eigenheiten von jQuery und javaScript lernen und verstehen kann. Ich suche also nicht nach einer einfacheren möglichkeit dies darzustellen sondern einfach nur nach einer lösung welche man mir auch einfach erklären kann, da ich ja wissen will was ich da mache und nicht nur einfach leer den code einfügen möchte.
Mfg devilseye
