php-resource



Zurück   PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr > Entwicklung > HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS
 

Login

 
eingeloggt bleiben
star Jetzt registrieren   star Passwort vergessen
 

 

 


HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS Probleme mit HTML5, Bootstrap oder jQuery ?

Antwort
 
LinkBack Themen-Optionen Thema bewerten
  #1 (permalink)  
Alt 28-11-2010, 17:03
kerbstone
 Registrierter Benutzer
Links : Onlinestatus : kerbstone ist offline
Registriert seit: Nov 2004
Beiträge: 412
kerbstone ist zur Zeit noch ein unbeschriebenes Blatt
Standard jQuery Overlay: Kann Element nicht ansteuern

Hallo,

ich habe das Problem, dass der Trigger nicht zu funktionieren scheint!

Zur Zeit sieht mein Code so aus:

Code:
<script>
$(document).ready(function() {
    $("img[rel]").overlay();
});
</script>
Hiermit komme ich aber nicht an die jeweiligen Images
oder zumindest passiert nichts...

Code:
<div class="jMyCarousel">
    <ul>
        <li><img rel="#ref01" src="http://farm4.static.flickr.com/3651/3445879840_7ca4b491e9_m.jpg" width="200" height="150"></li>
        <li><img rel="#ref02" src="http://farm4.static.flickr.com/3346/3449388113_71a06b8548_m.jpg" width="200" height="150"></li>
 	<li><img rel="#ref03" src="http://farm4.static.flickr.com/3651/3445879840_7ca4b491e9_m.jpg" width="200" height="150"></li>
        <li><img rel="#ref04" src="http://farm4.static.flickr.com/3346/3449388113_71a06b8548_m.jpg" width="200" height="150"></li>
  </ul>
</div>
Ich hoffe es kann mir jemand sagen, wie ich den JavaScript Code
anzupassen habe bzw. was hier falsch ist.

Geändert von kerbstone (28-11-2010 um 20:56 Uhr)
Mit Zitat antworten
  #2 (permalink)  
Alt 28-11-2010, 21:57
mephisto111
 Registrierter Benutzer
Links : Onlinestatus : mephisto111 ist offline
Registriert seit: Nov 2003
Beiträge: 52
mephisto111 befindet sich auf einem aufstrebenden Ast
Standard

Hallo kerbstone,

wo und wie sind die "anzusteuernden Elemente" definiert?
Sind die jQuery-Tools richtig eingebunden?
Mit Zitat antworten
  #3 (permalink)  
Alt 28-11-2010, 23:09
kerbstone
 Registrierter Benutzer
Links : Onlinestatus : kerbstone ist offline
Registriert seit: Nov 2004
Beiträge: 412
kerbstone ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Die Einbindungen der Libraries können vernachlässigt werden,
denn sobald der div-Container "<div class="jMyCarousel">"
entfernt wird funktioniert es...
Mit Zitat antworten
  #4 (permalink)  
Alt 29-11-2010, 10:09
Wyveres
 Registrierter Benutzer
Links : Onlinestatus : Wyveres ist offline
Registriert seit: Dec 2006
Ort: Rügen
Beiträge: 763
Blog-Einträge: 2
Wyveres ist zur Zeit noch ein unbeschriebenes Blatt
Wyveres eine Nachricht über ICQ schicken
Standard

1.) lass dir einfach mal die länge von
Code:
$('img[rel]')
ausgeben.

2.) irgendwelche JS Meldungen irgendetwas anderes außer ... es passiert nichts ;D

3.)
JQuery version?
JQuery im head bereich oder am body ende?
laut jQuery docu gibt es keine overlay() funktion. also welches Plugin soll das sein?
__________________
Bitte Beachten.
Foren-Regeln
Danke
Mit Zitat antworten
  #5 (permalink)  
Alt 29-11-2010, 16:10
kerbstone
 Registrierter Benutzer
Links : Onlinestatus : kerbstone ist offline
Registriert seit: Nov 2004
Beiträge: 412
kerbstone ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Um keine Frage offen zu lassen gehe ich das Originaldokument
nun systematisch durch:

1. Die Einbindung von jQuery, jQuery Tools und jMyCarousel
(inkl. MouseWheel) im Header <head> ... </head>
Code:
<!-- javascript -->
<script type="text/javascript" src="http://localhost/javascripts/jquery.js"></script>
<script type="text/javascript" src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js?foo"></script> 
<script type="text/javascript" src="http://localhost/javascripts/jMyCarousel.js"></script>
<script type="text/javascript" src="http://localhost/javascripts/jquery.mousewheel.js"></script>
<script type="text/javascript">
		$(function() {
		
		    $('#activator').click(function(){
                        $('#overlay').fadeIn('fast',function(){
                            $('#box').animate({'top':'50px'},500);
                        });
                    });

                    $('#boxclose').click(function(){
                        $('#box').animate({'top':'-600px'},500,function(){
                            $('#overlay').fadeOut('fast');
                        });
                    });

		    $(".jMyCarousel").jMyCarousel({
		        visible: '4',
		        eltByElt: true,
		        evtStart: 'mousedown',
		        evtStop: 'mouseup'
		    });

		});
</script>
2. Das Styling für jMyCarousel und explizit das jQuery Overlay Fenster,
dass ebenfalls im Header eingebunden ist <head> ... </head>
Code:
<link rel="stylesheet" type="text/css" href="http://localhost/css/jMyCarousel.css" />  
    <style>
        /* Style for overlay and box */
        .overlay{
            /*background:transparent url(http://localhost/images/overlay.png) repeat top left;*/
            position:fixed;
            top:0px;
            bottom:0px;
            left:0px;
            right:0px;
            z-index:100;
        }
        .box{
            position:fixed;
            top:-600px;
            left:30%;
            right:30%;
            background-color:#fff;
            color:#7F7F7F;
            padding:20px;
            border:2px solid #ccc;
            -moz-border-radius: 20px;
            -webkit-border-radius:20px;
            -khtml-border-radius:20px;
            -moz-box-shadow: 0 1px 5px #333;
            -webkit-box-shadow: 0 1px 5px #333;
            z-index:101;
        }
        .box h1{
            border-bottom: 1px dashed #7F7F7F;
            margin:-20px -20px 0px -20px;
            padding:10px;
            background-color:#A5A2A5;
            color:#FFFFFF;
            -moz-border-radius:20px 20px 0px 0px;
            -webkit-border-top-left-radius: 20px;
            -webkit-border-top-right-radius: 20px;
            -khtml-border-top-left-radius: 20px;
            -khtml-border-top-right-radius: 20px;
        }
        a.boxclose{
            float:right;
            width:26px;
            height:26px;
            background:transparent url(http://localhost/images/cancel.png) repeat top left;
            margin-top:-30px;
            margin-right:-30px;
            cursor:pointer;
        }

/* the overlayed element */
.simple_overlay {
	
	/* must be initially hidden */
	display:none;
	
	/* place overlay on top of other elements */
	z-index:10000;
	
	/* styling */
	background-color:#333;
	
	width:675px;	
	min-height:200px;
	border:1px solid #666;
	
	/* CSS3 styling for latest browsers */
	-moz-box-shadow:0 0 90px 5px #000;
	-webkit-box-shadow: 0 0 90px #000;	
}

/* close button positioned on upper right corner */
.simple_overlay .close {
	background-image:url(http://localhost/images/cancel.jpg);
	position:absolute;
	right:-15px;
	top:-15px;
	cursor:pointer;
	height:35px;
	width:35px;
}

/* styling for elements inside overlay */
	.details {
		position:absolute;
		top:15px;
		right:15px;
		font-size:11px;
		color:#fff;
		width:150px;
	}
	
	.details h3 {
		color:#aba;
		font-size:15px;
		margin:0 0 -10px 0;
	}
    </style>
3. Die Einbindung des Carousels für Image Slides im Body <body> ... </body>
Code:
<div class="jMyCarousel">
    <ul>
        <li><img rel="#ref01" src="http://farm4.static.flickr.com/3651/3445879840_7ca4b491e9_m.jpg" width="200" height="150"></li>
        <li><img rel="#ref02" src="http://farm4.static.flickr.com/3346/3449388113_71a06b8548_m.jpg" width="200" height="150"></li>
 	<li><img rel="#ref03" src="http://farm4.static.flickr.com/3651/3445879840_7ca4b491e9_m.jpg" width="200" height="150"></li>
        <li><img rel="#ref04" src="http://farm4.static.flickr.com/3346/3449388113_71a06b8548_m.jpg" width="200" height="150"></li>
  </ul>
</div>
4. Die Einbindung der Overlays im Body <body> ... </body> mit
jQuery Javascript Code
Code:
<div class="simple_overlay" id="ref01">
	<img src="http://farm4.static.flickr.com/3651/3445879840_7ca4b491e9.jpg" />

	<div class="details">
		<h3>The Barcelona Pavilion</h3>

		<h4>Barcelona, Spain</h4>

		<p>
			The Barcelona Pavilion, designed by Ludwig Mies van
 der Rohe, was the German Pavilion for the 1929 International Exposition in
 Barcelona, Spain. It was an important building in the history of modern
 architecture.
		</p>

		<p>
			Several critics, historians and modernists have
 declared it "the most beautiful building of the century"
		</p>
	</div>
</div>

<div class="simple_overlay" id="ref02">
	<img src="http://farm4.static.flickr.com/3346/3449388113_71a06b8548.jpg" />
	<div class="details">
		<h3>The Barcelona Pavilion</h3>

		<h4>Barcelona, Spain</h4>

		<p>
			Another unique feature of this building is the
 <em>exotic materials Mies chose to use</em>.
		</p>

		<p>
			Plates of high-grade stone materials like veneers of
 Tinos verde antico marble and golden onyx as well as tinted glass of grey,
 green, white, in addition to translucent glass, perform exclusively as spatial
 dividers.
		</p>
	</div>
</div>

<script>
$(document).ready(function() {
    $("img[rel]").overlay();
});
</script>
Und das ist das ganze Dokument.
Sobald ich den DIV-Tag für das Carousel entferne funktioniert das Overlay
von jQuery Tools, was aber nicht Sinn der Sache ist.
Ich möchte die Thumb-Bilder im Overlay vergrößert darstellen
inklusive einer kurzen Beschreibung.
Mit Zitat antworten
  #6 (permalink)  
Alt 29-11-2010, 16:30
Wyveres
 Registrierter Benutzer
Links : Onlinestatus : Wyveres ist offline
Registriert seit: Dec 2006
Ort: Rügen
Beiträge: 763
Blog-Einträge: 2
Wyveres ist zur Zeit noch ein unbeschriebenes Blatt
Wyveres eine Nachricht über ICQ schicken
Standard

1.) ich seh keine id mit dem namen overlay ...
2.) würde ich alle JS scripts an das Ende des Bodys setzen ...
3.) FF firebug ... JS errors.
__________________
Bitte Beachten.
Foren-Regeln
Danke
Mit Zitat antworten
  #7 (permalink)  
Alt 29-11-2010, 16:40
wahsaga
  Moderator
Links : Onlinestatus : wahsaga ist offline
Registriert seit: Sep 2001
Beiträge: 25.236
wahsaga befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von kerbstone Beitrag anzeigen
Um keine Frage offen zu lassen gehe ich das Originaldokument nun systematisch durch:
Da fehlt noch was viel essentielleres: „Und um euch zu keiner Copy&Paste-Orgie zu zwingen, wenn ihr das Problem nachvollziehen wollte, hier der Link zum Online-Beispiel: ...“
__________________
I don't believe in rebirth. Actually, I never did in my whole lives.
Mit Zitat antworten
  #8 (permalink)  
Alt 29-11-2010, 22:23
kerbstone
 Registrierter Benutzer
Links : Onlinestatus : kerbstone ist offline
Registriert seit: Nov 2004
Beiträge: 412
kerbstone ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Zitat:
Zitat von Wyveres Beitrag anzeigen
1.) ich seh keine id mit dem namen overlay ...
2.) würde ich alle JS scripts an das Ende des Bodys setzen ...
3.) FF firebug ... JS errors.
Das Overlay wird mit einer Methode overlay() aufgerufen.
Das Overlay wird referenziert mit ref01, ref02, ref03, ref04.

Libraries werden im Header eingebunden.

FF Firebug lade ich mir herunter und probiere es gleich mal aus.
Mit Zitat antworten
  #9 (permalink)  
Alt 30-11-2010, 09:21
Wyveres
 Registrierter Benutzer
Links : Onlinestatus : Wyveres ist offline
Registriert seit: Dec 2006
Ort: Rügen
Beiträge: 763
Blog-Einträge: 2
Wyveres ist zur Zeit noch ein unbeschriebenes Blatt
Wyveres eine Nachricht über ICQ schicken
Standard

ok du hast mich nicht verstanden. In deinen hier gezeigtem Quellcode gibt es kein
Code:
$('#overlay')
__________________
Bitte Beachten.
Foren-Regeln
Danke
Mit Zitat antworten
  #10 (permalink)  
Alt 01-12-2010, 11:57
kerbstone
 Registrierter Benutzer
Links : Onlinestatus : kerbstone ist offline
Registriert seit: Nov 2004
Beiträge: 412
kerbstone ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Das Overlay ist jQuery nativ. Also das Standard-Overlay.
Die ID ist zu finden in meiner include() Datei für das Impressum.
Hier benötige ich kein besonderes Overlay.
Für die Bilder benötige ich aber das jQuery Tools Simple Overlay.
Und das funktioniert nicht. Das Standard Overlay funktioniert.
Mit Zitat antworten
  #11 (permalink)  
Alt 01-12-2010, 12:02
Wyveres
 Registrierter Benutzer
Links : Onlinestatus : Wyveres ist offline
Registriert seit: Dec 2006
Ort: Rügen
Beiträge: 763
Blog-Einträge: 2
Wyveres ist zur Zeit noch ein unbeschriebenes Blatt
Wyveres eine Nachricht über ICQ schicken
Standard

tolle Antwort.

und jetzt führst du bitte das was wahsaga gesagt hat aus ...
denn so kann ich dir nicht mehr helfen.
__________________
Bitte Beachten.
Foren-Regeln
Danke
Mit Zitat antworten
  #12 (permalink)  
Alt 04-12-2010, 13:47
kerbstone
 Registrierter Benutzer
Links : Onlinestatus : kerbstone ist offline
Registriert seit: Nov 2004
Beiträge: 412
kerbstone ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Die aktuelle URL ist: die.musikagentur
Mit Zitat antworten
  #13 (permalink)  
Alt 04-12-2010, 13:53
wahsaga
  Moderator
Links : Onlinestatus : wahsaga ist offline
Registriert seit: Sep 2001
Beiträge: 25.236
wahsaga befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von kerbstone Beitrag anzeigen
Die aktuelle URL ist: die.musikagentur
Firebug Console sagt:
Code:
uncaught exception: Could not find Overlay: #ref03
P.S.: Absolut fiese DIV-Suppe, bäh.
__________________
I don't believe in rebirth. Actually, I never did in my whole lives.

Geändert von wahsaga (04-12-2010 um 13:58 Uhr)
Mit Zitat antworten
Antwort

Lesezeichen


Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
 

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
jquery load funktioniert nicht im ie joextra HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 13 11-10-2010 12:53
[JavaScript] JQuery: bestimmtes Element erwischen Dennis79 HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 14 20-11-2008 21:55
[AJAX] JQuery Form - funktioniert nicht bei includierten Datein?! carapau HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 6 04-11-2008 14:00
[CSS] div Element wächst nicht mit Laire HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 2 19-09-2007 17:50
overlay mit javascript ...???? HILFE xunling Apps und PHP Script Gesuche 3 29-09-2006 20:21

Themen-Optionen
Thema bewerten
Thema bewerten:

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are an


PHP News

ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlicht
ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlichtDie bekannte Marktplatzsoftware ebiz-trader ist in der Version 7.5.0 veröffentlicht worden.

28.05.2018 | Berni

Wissensbestand in Unternehmen
Wissensbestand in UnternehmenLebenslanges Lernen und Weiterbilden sichert Wissensbestand in Unternehmen

25.05.2018 | Berni


 

Aktuelle PHP Scripte

ADSMAN V3 - Werbe-Manager ansehen ADSMAN V3 - Werbe-Manager

ADSMAN V3 - mehr als nur ein Bannermanager! Banner, Textanzeigen und PagePeel Manager! Mit ADSMAN PRO haben Sie die Marketinglösung für eine effektive und effiziente Werbeschaltung mit messbaren Ergebnissen. Unterstützt werden Bannerformate in beliebi

25.10.2018 virtualsystem | Kategorie: PHP/ Bannerverwaltung
PHP News und Artikel Script V2

News schreiben, verwalten, veröffentlichen. Dies ist jetzt mit dem neuen PHP News & Artikel System von virtualsystem.de noch einfacher. Die integrierte Multi-User-Funktion und der WYSIWYG-Editor (MS-Office ähnliche Bedienung) ermöglichen...

25.10.2018 virtualsystem | Kategorie: PHP/ News
Top-Side Guestbook

Gästebuch auf Textbasis (kein MySQL nötig) mit Smilies, Ip Sperre (Zeit selbst einstellbar), Spamschutz, Captcha (Code-Eingabe), BB-Code, Hitcounter, Löschfunktion, Editierfunktion, Kommentarfunktion, Kürzung langer Wörter, Seiten- bzw. Blätterfunktion, V

22.10.2018 webmaster10 | Kategorie: PHP/ Gaestebuch
 Alle PHP Scripte anzeigen

Alle Zeitangaben in WEZ +2. Es ist jetzt 07:37 Uhr.