Sich einschiebender content im Link

[tina777]

Hallo Leute,
leider weiss ich nicht ob ich in der richtigen Kategorie bin.
Ich würde gerne auf meiner Seite einen Contentbereich machen, den man zunächst auf der Seite nicht sehen kann, sondern der erst von links nach rechts in das Bild "hineinfliesst" wenn man auf einen Link im Menü klickt. Ich hoffe ihr versteht wie ich meine. ich weiss nicht mal, wonach ich da googeln soll, wie sowas heisst.
Ist sowas mit html überhaupt möglich oder braucht man dazu javascript?
Ich hoffe ihr könnt mir ein paar Anhaltspunkte geben.
Danke für eure Hilfe
Tina

 

[randacek_pro]

AW: Sich einschiebender content im Link

Das was du suchst, ist sicher ein sog. Slider, bzw. in dem Falle besser ein sog. Fly-Out.
Du siehst so etwas, wenn du hier im Forum mit der Maus über "Mein PSD" fährst (wo auch dein Punkte stehen).
Ist es so was in der Art, was du suchst?
In diesem Fall reagiert es schon auf das Überfahren mit dem Mauszeiger (ein hover, bzw. mouse-over-Event).
Wenn es das ist, dann lässt sich das eigentlich sehr leicht mit Javascript realisieren, wobei man es auch sehr gut mit reinem CSS machen könnte.
In deinem Fall ist der Auslöser (Event/Trigger) für das Ausklappen (Fly-Out), dann halt der Klick auf den Link. Damit das nicht einfach aufspringt, animiert man das ganze, was auch wieder mittels CSS(3) und Javascript zu machen ist.

Wenn du nach Suchworten suchst, schau dir mal "Content Slider", "Fade-in animation javascript", "fly-out css/javascript" an, nur mal als Beispiele

Lieber Gruß

 

[Schneidfried]

AW: Sich einschiebender content im Link

Moin
Ich lehne mich mal aus dem berüchtigten Fenster etwas weiter und meine zu wissen das das mit CSS3 und jqueryUI funkktioniert. Im folgenden Videotraining wird diese Technik meines Wissens angewandt:
--website-im-kinderfreundlichen-look-feel-teil-2-coding

 

[tina777]

AW: Sich einschiebender content im Link

Hallo,
nein randacek, das meine ich leider nicht, kein mouseover.
ich mochte, dass wenn man auf einen link klickt, seitlich langsam ein Fenster reingeschoben kommt, in dem dann der Inhalt steht. Also Aufbau: Hintergrundbild, Header, Links die Navi.
Dann soll eben rechts neben der quasi nur das Hintergrundbild sein und nur wenn man auf einen Navigationslink klickt, schiebt sich der Content ins Bild und verschwindet wieder wenn man auf den nächsten link klickt, sodass der nächste Inhalt wieder ins Bild reinfliessen kann.
Ich finde leider kein Beispiel dazu, aber hoffe man kann es sich vorstellen...
Grüße

 

[Schneidfried]

AW: Sich einschiebender content im Link

Probiere mal mit jQuery folgendes:

[COLOR=#800000]<script>[/COLOR] $(function(){ $('#id_Div-Name').fadeIn(); }) [COLOR=#800000]</script>[/COLOR]

Das sollte funktionieren.

 

[newbie50plus]

AW: Sich einschiebender content im Link

Tach auch.
Ich denke mal, du meinst dieses Script.
Gruß Fred

 

[tina777]

AW: Sich einschiebender content im Link

Schneidfried, ich weiss nicht ob ich dein script so richtig interpretiert habe?
Also irgendwie häng ich da voll.
Ich habe einfach nur listenpunkte gemacht, die aud einen div verweisen.
Dann habe ich via javascript die funktion gegeben, in diesem bereich den Inhalt zu laden.
Folgendermaßen müsste ich das script in meinem Document einfach nur mit hier reinplatzieren,oder?
Sieht dann inclusive loader so aus????

var ajax_loader ='<img src="images/ajax_loader.gif" height="50">';
$("#home").click(function(){
var content = "home.html";
$(function(){ $('#home').fadeIn();
$("#middle").html(ajax_loader).load(content);
});

Was ist falsch???
Danke für eure Hilfe!

 

[randacek_pro]

AW: Sich einschiebender content im Link

Hallo tina777

nein randacek, das meine ich leider nicht, kein mouseover.
ich mochte, dass wenn man auf einen link klickt, seitlich langsam ein Fenster reingeschoben kommt, in dem dann der Inhalt steht.

Na, ich meine ja auch kein Mouse-Over, sondern

In deinem Fall ist der Auslöser (Event/Trigger) für das Ausklappen (Fly-Out), dann halt der Klick auf den Link. Damit das nicht einfach aufspringt, animiert man das ganze, was auch wieder mittels CSS(3) und Javascript zu machen ist.

Die Richtung von wo nach wo, kann man ja ändern und wie gesagt, der Auslöser soll hier kein Mouse-Over-Event sein, sondern ein Klick; doch damit man mal eine Vorstellung bekommt, welcher visuelle Effekt am Ende raus kommen soll
Setzt du bisher schon jQuery auf deiner Seite ein?
Kannst du eigentlich mal deine Seite zeigen (einen Link zu deinem Projekt), bzw. den Quellcode (was du an HTML-Struktur, Javascript und CSS bisher hast) hier posten, damit man sich das genauer anschauen kann?
So hängt das von einigen Variablen ab, die man am besten prüfen kann, wenn man sie vor sich hat.

Lieber Gruß

 

[Niksda]

AW: Sich einschiebender content im Link

Also die Animation der Content-Box kannst du auf jedenfall mit Css3-Transitions machen. Sowas in die Richtung hier:

section{
position: relative;
top: 50px;
left: -500px;
width: 500px;
height: 500px;

-webkit-transition: width .25s ease .1s;
-moz-transition: width .25s ease .1s;
-o-transition: width .25s ease .1s;
-ms-transition: width .25s ease .1s;
transition: width .25s ease .1s;
}

section:hover{
width: 1000px;
overflow: visible;
padding: 0;

Für die Links brauchst du denk ich schon ein script.

Poste doch mal was, was man sich anschauen kann.

 

[randacek_pro]

AW: Sich einschiebender content im Link

@Niksda, an die CSS-Transitions hatte ich auch schon gedacht... prima Vorschlag! :

 

[tina777]

AW: Sich einschiebender content im Link

Ich hab die Seite bisher noch nirgens hochgeladen, bisher sieht der Code so aus:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<title>index</title>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="description" content="">
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="generator" content=")">

<link href="style.css" type="text/css" rel="stylesheet">
<link href="favicon.ico" type="image/x-icon" rel="shortcut icon">
</head>

<body>
<div id="container">
<div id="header">
<div id="logo"><a href="home.html"><img src="Bilder/logo.png"/></a></div>
<div id="facebook"></div>
</div>

<div id="inhalt">

<div id="menu">
<ul>
<li id="test">test</li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

<div id="content">
</div>
</div>

<div id="footer">
<a id="impressum" href="">Impressum</a>
<a id="kontakt" href="">Kontakt</a>
</div>

<div id="verweis"></div>
</div>
</body>
</html>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">

var ajax_loader ='<img src="images/ajax_loader.gif" height="50">';



$("#test").click(function(){
var content = "test.html";
$("#content").html(ajax_loader).load(content);

});


</script>

es geht jetzt erstmal um den Listenpunkt "Test" die anderen würd ich ja dann ebenso machen.
Ich dachte ja, ich könnte einfach den Vorschlag von Schneidfried in mein script einfügen...geht das nicht???

 

[tina777]

AW: Sich einschiebender content im Link

Hi Leute, hab heut mal ne Weile gegooglet und bin auf folgenden link gestossen:
Das ist so ziemlich dass, wie ich es mir vorstelle.
Nur eben will ich nicht, dass man ein zweites mal auf den Button klicken muss, um das Fenster wieder zu schliessen.
Dieses soll wieder verschwinden wenn man auf einen anderen link klickt oder wenn man mit der Maus von dem Element runter geht.