| 

.NET C# Java Javascript Exception

2
Hi leider bin ich nicht der profi in Java :-) Hoffe ihr könnt mri helfen.

Ich habe 3 Buttons und möchte sobald man über einen fährt im Rahmen angezeigt bekommen. Es soll sich ändern sobald dich zum nächsten Button fahre. Das funktioniert auch halbwegs (außer das der Slideeffekt außerhab des Rahmen sichtbar ist was nicht sein sollte)

Weiters soll sich die letzte angezeigte Box nach ca 3 sec ausblenden wenn man nicht mit der Maus darüber fährt ( in den Boxen werden Links angezeigt dann )

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Unbenanntes Dokument</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style type="text/css">
* {
margin: 0;
}
#knopf {
width: 40px;
height: 30px;
color: rgba(255,255,255,1.00);
background-color: rgba(81,81,81,1.00);
position: relative;
left: 200px;
text-align: center;
padding-top: 4px;
font-size: 14px;
cursor: pointer;
}
.box_blue {
width: 100%;
height: 30px;
background-color: rgba(81,81,81,1.00);
}
/*Slider*/
#wrapper {
width: 980px;
margin-left: auto;
margin-right: auto;
}
#slider {
width: 600px;
height: 350px;
background-color: rgba(227,227,227,0.52);
border: 1px solid rgba(53,53,53,1.00);
position: relative;
float: left;
display: inline;
}
.rechts {
width: 300px;
height: 350px;
float: left;
position: relative;
margin-left: 20px;
margin-top: 4px;
margin-bottom: 4px;
}
#r1 {
width: 200px;
height: 50px;
background-color: rgba(139,212,20,1.00);
margin-top: 4px;
margin-bottom: 2px;
}
#r2 {
width: 200px;
height: 50px;
background-color: rgba(19,149,212,1.00);
margin-top: 2px;
margin-bottom: 2px;
}
#r3 {
width: 200px;
height: 50px;
background-color: rgba(212,149,19,1.00);
margin-top: 2px;
margin-bottom: 2px;
}
#fadeInBox1 {
width: 200px;
height: 350px;
background-color: rgba(139,212,20,1.00);
position: relative;
left: 400px;
}
#fadeInBox2 {
width: 200px;
height: 350px;
background-color: rgba(19,149,212,1.00);
position: relative;
left: 400px;
}
#fadeInBox3 {
width: 200px;
height: 350px;
background-color: rgba(212,149,19,1.00);
position: relative;
left: 400px;
}
</style>
</head>

<body>
<div class="box_blue" id="slideToggleBox" style="display: none;">slideToggleBox</div>
<div id="knopf">+</div>
<div id="wrapper">
<div id="slider">
<div class="boxr1" id="fadeInBox1" style="display: none;"></div>
<div class="boxr1" id="fadeInBox2" style="display: none;"></div>
</div>
<div class="rechts">
<div class="showSingle" id="r1" target="1"></div>
<div class="showSingle" id="r2" target="2"></div>
<div class="showSingle" id="r3" target="3"></div>
</div>
<div class="box" id="fadeInBox1" style="display: none;"></div>
<div class="box" id="fadeInBox2" style="display: none;"></div>
<div class="box" id="fadeInBox3" style="display: none;"></div>
</div>

<!--Scripte-->
<!--Top slider-->
<script>$("#knopf").click(function () {$("#slideToggleBox").slideToggle("slow");});</script>
<!--r1-->

<script>
jQuery(function () {
jQuery('.showSingle').hover(function () {
var index = $(this).index(),
newTarget = jQuery('.box').eq(index).slideDown();
jQuery('.box').not(newTarget).slideUp();

});
});
</script>

</body>
</html>
News:
05.11.2013
miked 11 2
3 Antworten
1
Woran liegt es das der Slide nicht schön ausgeführt wird??

http://www.kcserver.info/testscripte/js/top%20Slide%20.html
05.11.2013
miked 11 2
0
Wenn ich die frage richtig verstanden habe geht es darum, die Box nach 3 Sekunden auszublenden richtig?
Wenn ja, das ganze geht entweder mit CSS3-Animationen oder mittels Javascript und der Methode window.setTimeout welche es erlaubt, Code zeigtgesteuert auszuführen.
05.11.2013
Floyd 14,6k 3 9
0
ja die Box soll nach ca 3 Sekunden ausblenden wenn man mit der Maus nicht darüber ist

http://www.kcserver.info/testscripte/js/top%20Slide%20.html

woran kann es liegen das die Slider Boxen außerhalb des Rahmens sichtbar sind. Das würde ich gerne abstellen. Es soll nur im Rahmen der Slide sichtbar sein.
05.11.2013
miked 11 2

Stelle deine Javascript-Frage jetzt!