 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
PixelSchubser
Threadersteller
Dabei seit: 19.08.2004
Ort: GI
Alter: 43
Geschlecht: 
|
Verfasst Mi 09.02.2011 13:58
Titel jQuery - Plugin Flip |
  |
|
Gud'n Tach zusammen,
ich versuch grad meinen Horizont in Sachen jQuery auszuweiten, aktuell aber häng ich fest. 
Hab als Beispiel mal mit dem Plugin Flip experimentiert, aber aus unerfindlichen Gründen kann ich bei den Links keinen neuen Content/neue .html zuweisen. Egal auf welche .html Seite ich verlinke, es will einfach net. Und ich rast bald aus.
Zwar ändert es Farbe und auch den Flipeffekt selbst, aber der Content der angeforderten Seite bleibt ständig gleich. 
Is bestimmt, so hoffe ich, nurn blöder kleiner Fehler, wo mir hier sicherlich nen kompetenter MG bei helfen kann. 
Jedenfalls wärs toll. 
Link zum Experiment
Danke! 
Code zur Seite:
| Code: | <!DOCTYPE HTML>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>index.</title>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-1.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.js"></script>
<script type="text/javascript" src="js/jquery.flip.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
$(".box").flip({
direction:'tb',
content:$("index"),
color:'#94c109'
});
$('footer nav ul li:nth-child(1) a').bind("click", function(){
$(".box").flip({
direction:'lr',
content:$("index.html"),
color:'#94c109'
});
return false;
});
$('footer nav ul li:nth-child(2) a').bind("click", function(){
$(".box").flip({
direction:'rl',
content:$("sites/page2.html"),
color:'#bec012'
});
return false;
});
$('footer nav ul li:nth-child(3) a').bind("click", function(){
$(".box").flip({
direction:'bt',
content:$("sites/page3.html"),
color:'#c26513'
});
return false;
});
$('footer nav ul li:nth-child(4) a').bind("click", function(){
$(".box").flip({
direction:'tb',
content:$("sites/page4.html"),
color:'#11a8be'
});
return false;
});
$('footer nav ul li:nth-child(5) a').bind("click", function(){
$(".box").flip({
direction:'tb',
content:$("sites/page5.html"),
color:'#66F'
});
return false;
});
//for navigation
$("footer nav ul a").click(function(){
$("footer nav ul a").removeClass("active");
$(this).addClass("active");
});
$('footer a.privacy').bind("click", function(){
$(".box").flip({
direction:'rl',
content:$("#page5"),
color:'#8d8d8e'
});
return false;
});
//for privacy
$("footer a.privacy").click(function(){
$("footer nav ul a").removeClass("active");
});
})
</script>
<!--[if lt IE 7]>
<script type="text/javascript" src="js/ie6_script_other.js">
<![endif]-->
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<![endif]-->
<link href="css/reset.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
</head><body>
<div id="main">
<!-- header -->
<header>
<!-- .logo -->
<div class="logo">
<a linkindex="0" href="index.html"><img src="images/logo.png" alt=""></a>
</div>
<!-- /.logo -->
</header>
<!-- content -->
<section id="content">
<!-- .box -->
<div style="visibility: visible; background-color: rgb(148, 193, 9);" class="box color1">
<div class="inner">
<div class="wrapper">
<img src="images/1page-img1.png" alt="" class="img-indent fright">
<h2>BLINDTEXT überschrift </h2>
<h2>BLINDTEXT überschrift</h2>
<p> 111111111111111111111111111</p>
</div>
</div>
</div>
<!-- /.box -->
</section>
</div>
<!-- footer -->
<footer>
<nav>
<div class="container">
<ul>
<li><a href="index.html" class="item1 active">Link1</a></li>
<li><a href="sites/page2.html" class="item2">Link2</a></li>
<li><a href="sites/page3.html" class="item3">Link3</a></li>
<li><a href="sites/page4.html" class="item4">Link4</a></li>
</ul>
</div>
</nav>
<div class="container">
<div class="wrapper">
<div class="fright">© 2011 Bla Bla | <a href="#" class="privacy">I Bla bla</a> <!-- {%FOOTER_LINK} --></div>
</div>
</div>
</footer>
<div id="page1" class="page">
<div class="inner">
<div class="wrapper">
<img src="images/1page-img1.png" alt="" class="img-indent fright">
<h2>Our approach is straight forward. By understanding your needs we can create design meeting your objectives.</h2>
<p>Phasellus ta. Fusce suscipit varius mi. Cum sociisnatoque tibus et magnisis parturient ontes, etur culus mus. <a href="#">Nulla duiuscgiat maleda</a>
Morbiuncdio, gravida at, cursus nec luctus a lorem. cenas trisue orci
ac em. Duis ultriciesretra magna. Donec accumsan malesuada orci. Donec
sit amet erosoremip</p>
<a href="#" class="button">read more</a>
</div>
</div>
</div>
<div id="page2" class="page">
<div class="inner">
<div class="wrapper color2">
<h2>latest news</h2>
<dl class="news">
<dt>12.06.2010 <a href="#">Fusce suscipit varius mi.</a></dt>
<dd>Cum
sociisnatoque tibus et magnisis parturient ontes, etur culus musgravida
at, cursus nec luctus a lorem. cenas trisue orci ac em. Duis
ultriciesretra magna accumsan.</dd>
<dt>23.06.2010 <a href="#">Cum sociisnatoque tibus</a></dt>
<dd>Magnisis parturient ontes, etur culus musgravida at, cursus nec luctus a lorem. cenas trisue orci ac em. </dd>
</dl>
<a href="#" class="button">read more</a>
</div>
</div>
</div>
<div id="page3" class="page">
<div class="inner">
<div class="wrapper color3">
<!-- gallery begin -->
<div id="images">
<img src="images/big-img1.jpg" class="first" height="200" width="387">
</div>
<div id="slider">
<ul>
<li><a href="#"><img src="images/thumb1.jpg" alt=""></a>
<div><img id="image1" src="images/big-img1.jpg" class="first" height="200" width="387"></div>
</li>
<li class="alt"><a href="#"><img src="images/thumb2.jpg" alt=""></a>
<div><img id="image2" src="images/big-img2.jpg" height="200" width="387"></div>
</li>
<li><a href="#"><img src="images/thumb3.jpg" alt=""></a>
<div><img id="image3" src="images/big-img3.jpg" height="200" width="387"></div>
</li>
<li class="alt"><a href="#"><img src="images/thumb4.jpg" alt=""></a>
<div><img id="image4" src="images/big-img4.jpg" height="200" width="387"></div>
</li>
</ul>
</div>
<div class="pagination aligncenter"><a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">6</a></div>
<!-- gallery end -->
</div>
</div>
</div>
<div id="page4" class="page">
<div class="inner">
<div class="wrapper color4">
<div class="fleft contacts">
<h2>kontakt</h2>
<dl class="address">
<dt>firma<br>
adresse<br>
plz ort</dt>
<dd><span>telefon</span>0123456789</dd>
<dd><span>telefax</span>0123456789</dd>
<dd><span>E-mail:</span> <a href="#">mail@mail.de</a></dd>
</dl>
</div>
<div class="fleft feedback">
<h2>nachricht</h2>
<form action="" id="contacts-form">
<fieldset>
<div class="col-1">
<label><input value="Name:" type="text"></label>
<label><input value="E-mail:" type="text"></label>
<label><input value="adresse:" type="text"></label>
</div>
<div class="col-2">
<textarea>nachricht:</textarea>
<div class="wrapper">
<a href="#" class="button" onclick="document.getElementById('contacts-form').submit()">senden</a><a href="#" class="button" onclick="document.getElementById('contacts-form').reset()">löschen</a>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
<div id="page5" class="page">
<div class="inner">
<h2>bla bla bla </h2>
<p>Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vestibulum
molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta. Fusce
suscipit varius mi. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Nulla dui. Fusce feugiat
malesuada odio.</p>
<p>Maecenas tristique orci ac sem. Duis
ultricies pharetra magna. Donec accumsan malesuada orci. Donec sit amet
eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris
fermentum dictum magna. Sed laoreet aliquam leo. Ut tellus dolor,
dapibus eget, elementum vel, cursus eleifend, elit.</p>
<p>Aenean
auctor wisi et urna. Aliquam erat volutpat. Duis ac turpis. Integer
rutrum ante eu lacus. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Praesent vestibulum molestie lacus.</p>
<a href="#">mail@mail.de</a>
</div>
</div>
</body></html> |
|
|
| |
  |
 |
PixelSchubser
Threadersteller
Dabei seit: 19.08.2004
Ort: GI
Alter: 43
Geschlecht:
|
Verfasst Do 10.02.2011 11:33
Titel
|
|
|
|
Ich will ungern pushen, aber hat niemand ne Idee?
|
|
| |
|
|
|
Anzeige
|
|
|
DerM
Dabei seit: 18.01.2009
Ort: -
Alter: 42
Geschlecht:
|
Verfasst Do 10.02.2011 12:25
Titel
|
|
|
| PixelSchubser hat geschrieben: | | Ich will ungern pushen, aber hat niemand ne Idee? |
| Code: |
content:$("sites/page5.html"),
|
ich würde fast behaupten, ohne mir die Source jetzt angesehen zu haben, das das nicht funktioniert!
| Code: |
content:"sites/page5.html",
|
das sollte klappen!
|
|
| |
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht:
|
Verfasst Do 10.02.2011 13:14
Titel
|
|
|
|
nö. das plugin hat kein ajax support. dafür müsste man sich an die entsprechenden load events hängen.
|
|
| |
|
|
DerM
Dabei seit: 18.01.2009
Ort: -
Alter: 42
Geschlecht:
|
|
| |
|
|
PixelSchubser
Threadersteller
Dabei seit: 19.08.2004
Ort: GI
Alter: 43
Geschlecht:
|
Verfasst Do 10.02.2011 14:15
Titel
|
|
|
Äh, aha. Ok. Danke.
Mal sehn, ob ich da mit meiner Nullpeilung durchsteig.
// Ok, nun gehts, aber jetzt wechselt er die Farbe nimmer mit und macht immer den gleichen Richtungswechsel. 
Zuletzt bearbeitet von PixelSchubser am Do 10.02.2011 14:27, insgesamt 2-mal bearbeitet
|
|
| |
|
|
DerM
Dabei seit: 18.01.2009
Ort: -
Alter: 42
Geschlecht:
|
Verfasst Do 10.02.2011 14:43
Titel
|
|
|
Du hast ja auch javascript fehler drin
"content : " <- DOPPELPUNKT
und wo kommt das "$new" her ??
|
|
| |
|
|
PixelSchubser
Threadersteller
Dabei seit: 19.08.2004
Ort: GI
Alter: 43
Geschlecht:
|
Verfasst Do 10.02.2011 14:47
Titel
|
|
|
Mit dem $new hats ja eben geklappt, aber da übernimmt er nicht Farbe und Flipevent.
Ohne den : gmeldet er mir nen Syntaxfehler und geht auch net.
So, wies aktuell ist solls sein, nur eben das sich der Content wechselt.
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
jQuery Plugin - Slider als Input wie in jQuery UI
jquery plugin und ankerpunkte
jquery page switch plugin
[JQuery] Checken ob ein Plugin aktiv ist?
Content-Scoller als jQuery-Plugin gesucht
"Shadowbox" jquery plugin
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
