[Tutorial] Slide-Panel

DerSaboteur · 12/15/2011, 23:49

Hey Leute.
Dieses hier ist mein erstes Tutorial.. ich habe nach dieses hier schon gesucht..
letztens erst.. nur habe ich leider dazu nix richtiges gefunden..
aber durch eure Nette hilfe habe ich es geschaft!!!

Aber naja nun zu dem Tutorial

Slidepanel

Vorbereitung:
Zuerst geht ihr auf

danach klickt ihr auf Download.. nun wird ein text anzeigt. den kopieren wir..
erstellen eine neue Datei "jquery.js" die endung mit ".js" und fügen dort alles ein.

so da alles nun geschafft ist.. erstellen wir eine ".htm" Datei. z.B. "index.htm"

Inhalt der x.htm

HTML Code:

<html>
<head>
<title>SlidePanel</title>
</head>

<body>
</body>
</html>

nun fügen wir die "jquery.js" script ein..
mit dem Befehl

HTML Code:

<script type="text/javascript" src="jquery.js"></script>

Das sollte dann so aussehn..

HTML Code:

<html>
<head>
<title>SlidePanel</title>
<script type="text/javascript" src="jquery.js"></script>
</head>

<body>
</body>
</html>

nun geben arbeiten wir am Design. (einfaches via css)

das sollte dann so aussehn

HTML Code:

<html>
<head>
<title>SlidePanel</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
	
		#slider{
	width: 500px;
	height: 200px;
	background-color: red;
	border: 3px solid black;
	text-align: center;
	display: black;
	position:fixed;
	bottom:0px;
		}
		
	</style>
</head>

<body>
</body>
</html>

width = breite
height = höhe
background-color = hintergrundfarbe
border = rahmen
text-align = Text mittig ausrichten.
display = Black = Sofort Anzeigen

Doch tragt ihr anstatt "Black" "none" ein wirds nicht bei öffnen der seite angezeigt..

position:fixed = Wird beim Scrollen mit bewegt..
bottom = sollte schon für sich sprechen..

da wir das nun gemacht haben fügen einen Anzeigen Text ein.

HTML Code:

<html>
<head>
<title>SlidePanel</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
	
		#slider{
	width: 500px;
	height: 200px;
	background-color: red;
	border: 3px solid black;
	text-align: center;
	display: black;
	position:fixed;
	bottom:0px;
		}
		
	</style>
</head>

<body>
<a href="#" onClick="$('#slider').slideToggle(500);">Anzeigen</a>
</body>
</html>

onClick="$('#slider') = Bei Klick den Div-Tag #slider
auswählen.

slideToggle(500); = slideToggle schaut ob der DiV-Tag "#Slide" zu sehn ist wenn ja schließt er es bei klick wenn nicht öffnet er es.. und die 500 ist wie schnell es sliden soll
1000= 1sec

nun erstellen wir einen Div-tag.

das sollte dann so aussehn..

HTML Code:

<html>
<head>
	<title>SlidePanel</title>
	<script type="text/javascript" src="jquery.js"></script>
	<style type="text/css">
	
		#slider{
	width: 500px;
	height: 200px;
	background-color: red;
	border: 3px solid black;
	text-align: center;
	display: black;
	position:fixed;
	bottom:0px;
		}
		
	</style>
</head>
	<body>
    	<center>
		<a href="#" onClick="$('#slider').slideToggle(500);">Anzeigen</a>
        </center>
		<div id="slider">
			<h1>Slide-Panel</h1>
		</div>
	</body>
</html>

dann seit ihr eig schon mit allem fertig.. nun nur noch die "x.htm"
Datei öffnen und Sliden was das Zeug hält

Sorry wenns etwas viel Text ist.. wollte es für jeden so einfach erklären wie es geht.. erstes wirkliches Tutorial

Mfg DerSaboteur

NotEnoughForYou · 12/16/2011, 16:04

besser ist es, nicht die jquery lib in ne neue Datei schreiben & dann einbinden, sondern die aktuelle. Googel & Microsoft bieten ( unter anderem ) dafür eine API an.

bsp:

PHP Code:


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

& es wäre schöner es nicht im link direkt sondern direkt im Jquery Code aufzurufen.

Train™ · 12/17/2011, 05:21

kann man sowas auf Facebook Seiten einbauen?

Che · 01/05/2012, 18:35

nicht

Code:

display: black;

sondern

Code:

display: block;

JQuery sollte man sich nicht runterladen sondern einfach die Onlineversion einbinden, ist viel komfortabler:

Code:

[COLOR=#000000][COLOR=#007700]<[/COLOR][COLOR=#0000BB]script type[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#DD0000]"text/javascript" [/COLOR][COLOR=#0000BB]src[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#DD0000]"http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"[/COLOR][COLOR=#007700]>[/COLOR][COLOR=#0000BB]</script>[/COLOR]  [/COLOR]

Ist zwar ne ganz nette Sache, aber für sowas braucht man nicht wirklich n Tutorial.

Whoknowsit · 01/07/2012, 18:49

Es geht dabei weniger um Komfort als darum, dass das Einbinden der Lib das Ganze beschleunigen soll (Ladezeit).

DerSaboteur · 01/14/2012, 09:02

Quote:
Originally Posted by 〤Che〤
nicht
Code:
display: black;
sondern
Code:
display: block;
JQuery sollte man sich nicht runterladen sondern einfach die Onlineversion einbinden, ist viel komfortabler:
Code:
[COLOR=#000000][COLOR=#007700]<[/COLOR][COLOR=#0000BB]script type[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#DD0000]"text/javascript" [/COLOR][COLOR=#0000BB]src[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#DD0000]"http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"[/COLOR][COLOR=#007700]>[/COLOR][COLOR=#0000BB]</script>[/COLOR]  [/COLOR]
Ist zwar ne ganz nette Sache, aber für sowas braucht man nicht wirklich n Tutorial.

vertippen kann sich ja mal jeder...
und für sowas brauch man kein tut? .. also ich habe es gesucht und nicht gefunden

manche leute brauchen es doch