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 07-07-2012, 15:03
Benutzerbild von BananaJo BananaJo
 Registrierter Benutzer
Links : Onlinestatus : BananaJo ist offline
Registriert seit: Aug 2008
Beiträge: 344
BananaJo kann nur auf Besserung hoffen
Standard Probleme mit schießen eiges DIV Layers per onclick

ich habe probleme mit dem schließen eines einfachen DIV Layers.
Und zwar soll dieser sich schließen, wenn man außerhalb des angezeigten Inhalts klickt.. eigentlich genau so, wie bei der Bildanzeige von Facebook oder Pinterest.

Leider schiließt sich der Layer auch, wenn ich auf den eigentlichen Inhalt klicke.

Mit z-index gehts leider nicht .. hat jemand eine Lösung?

Das ist der Layer:

PHP-Code:

function hideImageView()
{
    
document.getElementById("imageview").style.display "none";
    
document.getElementById("imageview_box").style.display "none";
    
    
document.documentElement.style.overflow 'visible';     // firefox, chrome
    
document.body.scroll "yes"//ie    
}

#imageview{
z-index10000;
margin:30px;
margin-left:auto;
margin-right:auto;
display:none;
overflow-xnone;
overflow-ynone;
-
webkit-perspective1000;
width:630px;
background-color:white
moz-border-radius3px;
-
webkit-border-radius3px;
border-radius3px;
box-shadow0 1px 6px rgba(34,25,25,0.4);
-
moz-box-shadow0 1px 4px rgba(34,25,25,0.4);
-
webkit-box-shadow0 1px 6px rgba(34,25,25,0.4);
}


#imageview_box{
positionfixed;
z-index9999;
top0;
right0;
bottom0;
left0;
display:none;
overflow-xauto;
overflow-yscroll;
-
webkit-perspective1000;
background:transparent;
background-image:url("http://localhost/pin/images/layer/bg.png");
}


<
div id="imageview_box" onclick="hideImageView()">
    <
div id="imageview">
        
Inhalt des Layers... wenn hier geklickt wirddarf der layer nicht schließen!            
    </
div>    
</
div
Mit Zitat antworten
  #2 (permalink)  
Alt 07-07-2012, 15:33
AmicaNoctis
  Moderatorin
Links : Onlinestatus : AmicaNoctis ist offline
Registriert seit: Jul 2009
Beiträge: 5.709
Blog-Einträge: 9
AmicaNoctis sorgt für eine eindrucksvolle AtmosphäreAmicaNoctis sorgt für eine eindrucksvolle Atmosphäre
Standard

Hallo,

dann gib dem Bereich, in dem ein Klick kein Schließen bewirken soll, einen eigenen onclick-Handler, in dem du cancelBubble auf true setzt und — sofern vorhanden — stopPropagation() aufrufst.

Alternativ kannst du auch in der existierenden Funktion prüfen, ob
Code:
this === (theEvent.srcElement || theEvent.originalTarget)
wahr ist und nur dann das Layer schließen.

Gruß,

Amica
__________________
Hast du die Grundlagen zur Fehlersuche gelesen? Hast du Code-Tags benutzt?
Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
Super, danke!
Mit Zitat antworten
  #3 (permalink)  
Alt 07-07-2012, 15:33
wahsaga
  Moderator
Links : Onlinestatus : wahsaga ist offline
Registriert seit: Sep 2001
Beiträge: 25.236
wahsaga befindet sich auf einem aufstrebenden Ast
Standard

Target des Events abfragen, und entsprechend reagieren.

Oder, auf den inneren Div auch einen click-Handler setzen, der das Bubbling des Events nach oben im DOM unterbindet.
__________________
I don't believe in rebirth. Actually, I never did in my whole lives.
Mit Zitat antworten
  #4 (permalink)  
Alt 07-07-2012, 15:34
AmicaNoctis
  Moderatorin
Links : Onlinestatus : AmicaNoctis ist offline
Registriert seit: Jul 2009
Beiträge: 5.709
Blog-Einträge: 9
AmicaNoctis sorgt für eine eindrucksvolle AtmosphäreAmicaNoctis sorgt für eine eindrucksvolle Atmosphäre
Standard

Zwei absolut übereinstimmende Meinungen, das muss jetzt einfach klappen
__________________
Hast du die Grundlagen zur Fehlersuche gelesen? Hast du Code-Tags benutzt?
Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
Super, danke!
Mit Zitat antworten
  #5 (permalink)  
Alt 07-07-2012, 16:13
Benutzerbild von BananaJo BananaJo
 Registrierter Benutzer
Links : Onlinestatus : BananaJo ist offline
Registriert seit: Aug 2008
Beiträge: 344
BananaJo kann nur auf Besserung hoffen
Standard

Danke erstmal!!

ich hab das nun so gelöst, allerdings scheint es nicht immer zu funktionieren.. mal gehts, mal nicht... weiß jemand woran das liegt??

PHP-Code:
function hideImageView()
{

    $(
"#imageview").click(function(event){
      
event.stopPropagation();
    });

    
document.getElementById("imageview").style.display "none";
    
document.getElementById("imageview_box").style.display "none";
    
    
document.documentElement.style.overflow 'visible';     // firefox, chrome
    
document.body.scroll "yes"//ie    

Mit Zitat antworten
  #6 (permalink)  
Alt 07-07-2012, 16:17
AmicaNoctis
  Moderatorin
Links : Onlinestatus : AmicaNoctis ist offline
Registriert seit: Jul 2009
Beiträge: 5.709
Blog-Einträge: 9
AmicaNoctis sorgt für eine eindrucksvolle AtmosphäreAmicaNoctis sorgt für eine eindrucksvolle Atmosphäre
Standard

Du gehst die ganze Eventbehandlung falsch an. Am besten nimmst du keine onclick-Attribute (obwohl es damit auch gehen würde, wenn man es richtig macht), sondern registrierst die Events über JavaScript am Element und zwar nicht erst beim Klicken, sondern onload:
Code:
elem.onclick = function (pEvent) {
    var target;
    pEvent = pEvent || window.event;
    target = pEvent.originalTarget || pEvent.srcElement;

    // mach was mit target

};
__________________
Hast du die Grundlagen zur Fehlersuche gelesen? Hast du Code-Tags benutzt?
Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
Super, danke!
Mit Zitat antworten
  #7 (permalink)  
Alt 07-07-2012, 16:19
Benutzerbild von BananaJo BananaJo
 Registrierter Benutzer
Links : Onlinestatus : BananaJo ist offline
Registriert seit: Aug 2008
Beiträge: 344
BananaJo kann nur auf Besserung hoffen
Standard

habs jetzt so gemacht.. und es funzt soweit

PHP-Code:
function hideImageView()
{

    $(
"#imageview").click(function(event){
      
event.stopPropagation();
    });
    
    $(
"#imageview_box").click(function(event){
          
document.getElementById("imageview").style.display "none";
        
document.getElementById("imageview_box").style.display "none";
        
        
document.documentElement.style.overflow 'visible';     // firefox, chrome
        
document.body.scroll "yes"//ie    
    
});    

Mit Zitat antworten
  #8 (permalink)  
Alt 07-07-2012, 16:21
AmicaNoctis
  Moderatorin
Links : Onlinestatus : AmicaNoctis ist offline
Registriert seit: Jul 2009
Beiträge: 5.709
Blog-Einträge: 9
AmicaNoctis sorgt für eine eindrucksvolle AtmosphäreAmicaNoctis sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von BananaJo Beitrag anzeigen
habs jetzt so gemacht.. und es funzt soweit
Aber erst beim zweiten Klick. Der erste registriert nur die Eventhandler.
__________________
Hast du die Grundlagen zur Fehlersuche gelesen? Hast du Code-Tags benutzt?
Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
Super, danke!
Mit Zitat antworten
  #9 (permalink)  
Alt 16-07-2012, 17:51
Benutzerbild von BananaJo BananaJo
 Registrierter Benutzer
Links : Onlinestatus : BananaJo ist offline
Registriert seit: Aug 2008
Beiträge: 344
BananaJo kann nur auf Besserung hoffen
Standard

@AmicaNoctis danke schonmal.. du hast recht mit dem zweiten klick und versuche das grade zu lösen.. leider verstehe ich dein unteres beispiel nicht ganz und kann das für mein beispiel nicht umsetzen...

wofür stehen denn die variablen?

PHP-Code:
pEvent pEvent || window.event;
target pEvent.originalTarget || pEvent.srcElement
Zitat:
elem.onclick = function (pEvent) {
var target;
pEvent = pEvent || window.event;
target = pEvent.originalTarget || pEvent.srcElement;

// mach was mit target

};
Mit Zitat antworten
  #10 (permalink)  
Alt 16-07-2012, 18:06
AmicaNoctis
  Moderatorin
Links : Onlinestatus : AmicaNoctis ist offline
Registriert seit: Jul 2009
Beiträge: 5.709
Blog-Einträge: 9
AmicaNoctis sorgt für eine eindrucksvolle AtmosphäreAmicaNoctis sorgt für eine eindrucksvolle Atmosphäre
Standard

pEvent steht für das Eventobjekt und unterstützt sowohl Browser, die es als Argument übergeben bekommen (z. B. Firefox) und solche, bei denen es global bereitgestellt wird (z. B. IE).

Target ist das Element, welches den Event ursprünglich ausgelöst hat und wird auch browserübergreifend befüllt (IE: srcElement; normale Browser: originalTarget).
__________________
Hast du die Grundlagen zur Fehlersuche gelesen? Hast du Code-Tags benutzt?
Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
Super, danke!
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
Probleme mit Zufallsbild per PHP slowly PHP Developer Forum 9 24-08-2010 16:29
Onclick per JS ändern klappt nicht Anbu HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 9 23-06-2009 16:38
Formularelemente per onclick Peter_Panther HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 3 19-02-2007 08:31
Probleme mit Download per header raudi PHP Developer Forum 7 10-07-2005 15:11
Sie schießen sich in den Fuß. Meillo Out of Order 10 02-04-2005 16:27

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 23:58 Uhr.