hi
gleich Vorweg ich habe von JS nicht die große Ahnung kenne mich eher in PHP aus. Aber so langsam will ich mich mit AJAX befassen und da brauch ich doch mal bisschen JS bzw. jQuery
ich versuche mich gerade etwas mit jQuery bisschen was habe ich schon hin bekommen (Tooltip z.b.
)
Jetzt will ich das ein div langsam einblendet in dem Fall ist es mal der Inhalt (also da wo die eigentliche Seite ist)
fangen wir mal mit den Code an:
JS Code(js.js Datei):
und der html Teil:
und die css dazu:
Mein Verdacht geht in die Richtung das beim Link irgendwas fehlt (bei Tooltip musste ja title dazu irgend so was wird wohl auch für fadein dazu müssen) aber ich komme nicht drauf was. Die Infos wo ich bis hier her habe stammen von https://docs.jquery.com/Effects/fadeIn#speedcallback
Danke schon mal
(ich hoffe der Code erschreckt euch nicht ZU sehr )
edit: man eh warum finde ich die Lösung immer wenn ich schon gepostet hab da sucht man 1 Stunde findet nix postet und dann -->
https://docs.jquery.com/Effects/fadeIn#speedcallback -> Examples -> View Source grml ihr braucht erst mal nicht antworten *g*
edit2: habe es hinbekommen
in der css muss ein display:none; rein und dann geht das auch der js Code noch bissle anpassen aber steht ja alles im oberen edit
mfg
Chris
gleich Vorweg ich habe von JS nicht die große Ahnung kenne mich eher in PHP aus. Aber so langsam will ich mich mit AJAX befassen und da brauch ich doch mal bisschen JS bzw. jQuery
ich versuche mich gerade etwas mit jQuery bisschen was habe ich schon hin bekommen (Tooltip z.b.
)Jetzt will ich das ein div langsam einblendet in dem Fall ist es mal der Inhalt (also da wo die eigentliche Seite ist)
fangen wir mal mit den Code an:
JS Code(js.js Datei):
PHP:
$('.tu-navi a').each(function(i){
$("body").append("<div class='tooltip' id='tooltip"+i+"'>" +
"<p>"+$(this).attr('title')+"</p></div>");
var my_tooltip = $("#tooltip"+i);
var position = $(this).position();
$(this).removeAttr("title").mouseover(function(){
my_tooltip.css({opacity:0.9, display:"none"}).fadeIn(400);
}).mousemove(function(kmouse){
my_tooltip.css({right: '40px', top:kmouse.pageY-15});
}).mouseout(function(){
my_tooltip.fadeOut(400);
});
});
$(document.body).click(function () {
$("realcontent:hidden:first").fadeIn("slow");
});und der html Teil:
PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>42 42 42 23 23 23</title>
<link rel="stylesheet" href="style.css" type="text/css" title="Style" />
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="js.js"></script>
</head>
<body>
<a title="Startseite" href="test.php">Startseite</a>
<div id="realcontent">
<!--Hier folgt nun Beispielinhalt der Seite-->
Hier steht ein haufen Schrott lalala Lorem Ipsum und wie der mist heißt.
<!--Ende vom Inhalt-->
</div>
</body>
</html>und die css dazu:
PHP:
#realcontent {
margin-top: 30px;
width: 636px;
float:left;
overflow:hidden;
}Mein Verdacht geht in die Richtung das beim Link irgendwas fehlt (bei Tooltip musste ja title dazu irgend so was wird wohl auch für fadein dazu müssen) aber ich komme nicht drauf was. Die Infos wo ich bis hier her habe stammen von https://docs.jquery.com/Effects/fadeIn#speedcallback
Danke schon mal
(ich hoffe der Code erschreckt euch nicht ZU sehr )edit: man eh warum finde ich die Lösung immer wenn ich schon gepostet hab da sucht man 1 Stunde findet nix postet und dann -->
https://docs.jquery.com/Effects/fadeIn#speedcallback -> Examples -> View Source grml ihr braucht erst mal nicht antworten *g*
edit2: habe es hinbekommen
in der css muss ein display:none; rein und dann geht das auch
der js Code noch bissle anpassen aber steht ja alles im oberen edit mfg
Chris
Zuletzt bearbeitet: