| 

.NET C# Java Javascript Exception

1
Halo Codianer,

hat jemand einen Code um einen DIV Layer auf einer Webseite anzeigen zu lassen und durch einen Klick wieder unsichtbar zu machen.

Schön währe es noch zusätzlich den DIV Layer per Javascript in die Bildmitte "einfliegen" zu lassen.

Danke!
09.09.2009
jasi 149 1 1 5
Willst du das der Div den du wegklicken kannst, gleich am Start reinfliegt oder nicht?

Wenn der Div einmal weg geklickt wurde, soll der User ihn wieder mit einem Klick sichtbar machen können oder nicht???
BiX 09.09.2009
5 Antworten
3
Das Div:


<!--Die folgende Zeile erzeugt ein Div mit dem Name "MeinDiv" das nicht sichtbar ist
(display:none)-->
<div id="MeinDiv" style="display:none;">....</div>


Das JavaScript:

function DivEinAusblenden(divName){
//Gibt es das Objekt mit dem Namen der in divName übergeben wurde?
if(document.getElementById(divName){
/*"Sichtbarkeit" des Divs umschalten.
Wenn es sichtbar war, unsichtbar machen und umgedreht.*/
document.getElementById(divName).style.display =
(document.getElementById(divName).style.display == 'none') ? 'inline' : 'none';
}
}


Und dein Link der das ganze Umschalten kann:

<a href="javacript:;" onclick="javascript:DivEinAusblenden('MeinDiv');">Div Ein- und Ausblenden</a>


Im Prinzip wars das schon wenn man ein Div einfach nur ein und ausblenden will. Es gibt auch noch kürzer Schreibweise, aber der Code soll ja auch ein wenig selbsterklärend sein :D

Das mit dem "Einfliegen" eines Divs kann man verschieden lösen.
Wer möchte, kann das mit window.setIntervall lösen, eine JavaScript-Funktion mit der sich Code alle paar Milisekunden ausführen lassen würde.

var divPosition = 0;
var intervallId = 0;
function BewegeDiv(){
//Gibt es das Objekt mit dem Namen der in divName übergeben wurde?
if(document.getElementById("MeinDiv"){
document.getElementById("MeinDiv").style.position='absolute';
document.getElementById("MeinDiv").style.left=divPosition + 10;
divPosition = divPosition + 10;
}
if(divPosition >
(document.body.clientWidth/2) - document.getElementById("MeinDiv").offsetHeight)
window.clearIntervall(intervallId);
}
intervallId = window.setIntervall(BewegeDiv,100);

Die Funktion BewegeDiv wird nun alle 100 Milisekunden ausgeführt bis dein Div im Zentrum der Seite angekommen ist.

Alternative kann man auch JavaScript-Frameworks wie JQuery und Co verwenden. Diese stelle für solche zwecke Funtkionen zur Verfügung.

In JQuery könnte man das ganze mit der "animate"-Funktion bewerkstelligen.
Hier ein Beispiel aus der Documentation:

// Using multiple unit types within one animation.
$("#go").click(function(){
$("#block").animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
});
09.09.2009
Floyd 14,6k 3 9
Floyd 14,6k 3 9
Warum ein a Element nehmen, wenn es doch kein Link ist?
Div ist hier besser.

javascript: in event Attributen ist überflüssig.
hannemann 10.09.2009
2
Da kann ich dir den Einsatz eines Frameworks wie z.B. jQuery ans Herz legen. Das unterstüzt genau das was du willst und du bist mit ein paar wenigen Zeilen fertig.

Schau einfach mal hier
Auch zu empfehlen sind die Tutorials

Ausblenden
Basiseffekte zum Einblenden
Das einfliegen könntest du z.B. über eins der zahlreichen plugins erledingen... einfach mal durchschauen :)
09.09.2009
licht_micha 364 1 3
Würde auch ganz spontan jQuery sagen.
darkdust 09.09.2009
2
Folgender jQuery-Code lässt einen Div-Container (Layer) nach 5 Sekunden innerhalb von 1.5 Sekunden in die Mitte des Bildschrims fahren und blendet ihn beim Klick auf das "X" innherlab von 0.5 Sekunden wieder aus.

Javascript
layerWidth = 600;
layerHeight = 400;
$(document).ready(function(){
$('#close').click(function() {
$('#layer').fadeOut(500);
});
window.setTimeout(function() {
win = $(window);
$('#layer')
.css({
'width': layerWidth + 'px',
'height': layerHeight + 'px',
'top': '0px',
'left': '-' + layerWidth + 'px'
})
.animate({
'top': win.height() / 2 - layerHeight / 2,
'left': win.width() / 2 - layerWidth / 2
}, 1500);
}, 5000);
});


CSS
#layer {
position: absolute;
border: 1px solid red;
background: yellow;
left: -20000px;
top: -20000px;
}


HTML
<div id="layer">
<span id="close">X</span>
</div>


Damit der jQuery-Code ausgeführt werden kann, musst du in einem weitern Header das Framework einbauen. Herunterladen kannst du es hier.

Header-Beispiel (HTML)
<script type="text/javascript" src="jquery-1.3.2.js"></script>
09.09.2009
Blauesocke 637 2 8
0
kannst du über javascript lösen.
einfach dem layer ne id verpassen und dann über
document.getElementById('id').style.visibility = "visible";

bzw.
document.getElementById('id').style.visibility = "hidden";
09.09.2009
lunatigs 1,3k 2 8
Ich persönlich würde "visibility" in den meisten fällen nicht verwenden, da, wenn man die Eigenschaft auf "hidden" setzt, der Platz nicht freigegeben wird.
In den meißten Fällen ist dies jedoch gewünscht und man sollte "display" verwenden.
Floyd 09.09.2009
du kannst "visibility" durchaus verwenden, wenn denn die "position" Eigenschaft auf "absolute" steht.
Rene Drescher-Hackel 10.09.2009
0
Vielen Dank für die zahlreichen Hilfestellungen!
Habe es mit jquery gelöst.
10.09.2009
jasi 149 1 1 5

Stelle deine Javascript-Frage jetzt!