✔ div nach oben sliden lassen - über bestehenden Text

W

wernerschuster

Mitglied
Hallo liebe Community!

Ich kann einen absolut am unteren Bildschirmrand positionierten Div über bestehenden Text hochsliden lassen. http://www.hildundk.de/

Nun bräuchte ich aber so etwas mitten im Text.

Kann mir bitte einer der Experten helfen?

Danke, dass ihr euch für mein Problem interessiert!

Werner
 
Wie meinst du das mit "...mitten im Text..."?

Soll beim Überfahren der Maus ein bestimmter Text in einen bestehenden eingefügt werden?

Javascript: 
<script language="javascript" type="text/javascript">
var orig = "";
function move_in(text) {
//ursprünglichen Text speichern
	orig = document.getElementById("text").innerHTML;
//neuen Text einfügen
	document.getElementById("text").innerHTML = text;
}
function move_out() {
//ursprünglichen Text wieder eintragen
	document.getElementById("text").innerHTML = orig;
}
</script>

<div>Hier steht Text in den dann <span id="text"><i>hier etwas</i></span> eingef&uuml;gt wird.</div>
<div style="position: absolute; top: 400px; left: 0px;" onmouseover="move_in(this.innerHTML);" onmouseout="move_out();"><strong>ICH BIN NEU HIER!</strong></div>
 
Zuletzt bearbeitet:
Danke tombe für deine Antwort!

Vorweg entschuldige bitte, dass mich so unklar ausgedrückt habe.

Mit "mitten im Text" lag ich natürlich völlig falsch. Was ich gemeint habe ist, dass der Div nicht am Ende des Bildschirms ist, sondern dass danach weitere Divs kommen.

Also eine Box, die nach oben slided und den über ihr liegenden Div (und den darin enthaltenen Text) überdeckt und so Inhalt (Links) sichtbar macht.

Ich hoffe mich verständlicher ausgedrückt zu haben.
Falls du dafür ebenso rasch ein kleines Beispiel für mich hättest wär´s toll.

Danke
Werner
 
Ich habs jetzt so gemacht. Wahrscheinlich furchtbar, aber es reicht mal für´s erste.

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<style type="text/css">
  .slider {
    background: #ccc;
    position: absolute;
    width: 150px;
    bottom: 20px;
    height: 20px;
    overflow: hidden;
  }

  #content {
    position: relative;
    width: 400px;
    border: 1px solid #eee;
  }
</style>
</head>
<body>

<div id="content"> Blindtext Blindtext <br> Blindtext Blindtext <br>Blindtext Blindtext<br>

<div class="slider">  Menü <br /> Eins <br /> Zwei <br /> Drei </div>

Blindtext Blindtext <br>Blindtext Blindtext <br> Blindtext Blindtext <br>Blindtext Blindtext<br> Blindtext Blindtext <br>Blindtext Blindtext</div>


 <!-- The JavaScript -->
<script type="text/javascript">
      $(".slider").hover(
              function(){ // mouseenter
                   $(this).stop(true,true).animate({height: "100px"}, 500);


               },function(){ // mouseleave
                   $(this).stop(true,true).animate({height: "20px"}, 500);

      });
</script>

</body>
</html>
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück