[Tutorial] Slide-Panel

12/15/2011 23:49 DerSaboteur#1
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 [Only registered and activated users can see links. Click Here To Register...]
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 :D

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

Mfg DerSaboteur

12/16/2011 16:04 NotEnoughForYou#2
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.
12/17/2011 05:21 Train™#3
kann man sowas auf Facebook Seiten einbauen?
01/05/2012 18:35 Che#4
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.
01/07/2012 18:49 Whoknowsit#5
Es geht dabei weniger um Komfort als darum, dass das Einbinden der Lib das Ganze beschleunigen soll (Ladezeit).
01/14/2012 09:02 DerSaboteur#6
Quote:
Originally Posted by 〤Che〤 View Post
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 ;)