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
  #16 (permalink)  
Alt 01-12-2011, 10:34
Prominenter
 Registrierter Benutzer
Links : Onlinestatus : Prominenter ist offline
Registriert seit: Apr 2004
Beiträge: 152
Prominenter ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Hi@all

also ich habe jetzt mal den Script-Code auf ein Minimum reduziert.
Gleiches Problem, das Script wird ausgeführt, die Positionierung und Größenönderung allerdings wird erst beim erneuten Aufruf gesetzt.

Das Script - wird am Ende des Quellqodes geladen
PHP-Code:
<!--
function 
showHideLayer(obj,arg

 
// Objekt definieren
 
obj document.getElementById(obj);
 
// Objekt Style ermitteln und neu festlegen
 
if (obj.style)
 {
  
v=(arg=='show')?'block':(arg=='hide')?'none':v
 }
  
// Fenstergröße ermitteln
  
var fensterhoehe  screen.height;
  var 
fensterbreite screen.width;
  
// Objektgröße ermitteln
  
var h=obj.offsetHeight;
  var 
w=obj.offsetWidth;
  
// Layer positionieren
  
obj.style.top  "50%";
  
obj.style.left "50%";
  
// Layer mittig ausrichten
  
obj.style.marginTop  = -(h/2)+"px";
  
obj.style.marginLeft = -(w/2)+"px";
  
// Layer anzeigen/ausblenden
  
obj.style.display v
  
obj.style.position "fixed";  
 }
//--> 
Der Link - irgendwo mittendrin, meistesn bei Bildern
PHP-Code:
<img src='".$artikelbild01."' onmouseover='swapImage(".$item.",this.src);' 
onclick='document.getElementById(\"picture\").src=this.src; showHideLayer(\"layer\",\"show\")' 
alt='Artikelbild 01' title='KLICK -> GROSS' /> 
Der Layer - ganz am Ende des Quellqodes
PHP-Code:
<!-- Beginn Layer Bildanzeige -->
<
div id="layer" style="padding:5px; background:#FFFFFF; border: 2px solid black; 
position:absolute; z-index:1; display:none;"
>
<
div style="width:18px; background:#FFFFFF; border: 1px solid black; 
position:absolute; right:5px; text-align:center; vertical-align:middle; font-weight:bold; display:inline; "
>
<
a href="javascript:showHideLayer('layer','hide')" onmouseover="top.status='LAYER SCHLIESSEN';return true;" 
title="SCHLIESSEN" style="text-decoration:none; color:#000;"><b>x</b></a></div>
<
img src="http://www.php-resource.de/forum/images/null_pix.gif" id="picture" 
style="cursor:pointer; border:1px solid black;" title="Klick -> Close" alt="" 
onclick="javascript:showHideLayer('layer','hide')" />
</
div>
<!-- 
Ende Layer Bildanzeige -->
<
script type="text/javascript" src="scripts/layer.js"></script> 
Mit Zitat antworten
  #17 (permalink)  
Alt 01-12-2011, 11:03
Prominenter
 Registrierter Benutzer
Links : Onlinestatus : Prominenter ist offline
Registriert seit: Apr 2004
Beiträge: 152
Prominenter ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Hi@all

ich habe jetzt durch eine einfache Schleife, dass die Funktion 2mal aufgerufenwird und siehe da so funktioniert es.
PHP-Code:
<!--
function 
showHideLayer(lay,txt,arg

 
// Objekt definieren
 
var obj document.getElementById(lay);
 
// Objekt Style ermitteln und neu festlegen
 
if (obj.style)
 {
  
v=(arg=='show')?'block':(arg=='hide')?'none':v
 }
 
 for (
i=0i<2i++)
 {
  
// Fenstergröße ermitteln
  
var fensterhoehe  screen.height;
  var 
fensterbreite screen.width;
  
// Objektgröße ermitteln
  
var h=obj.offsetHeight;
  var 
w=obj.offsetWidth;
  
// Layer positionieren
  
obj.style.top  "50%";
  
obj.style.left "50%";
  
// Layer mittig ausrichten
  
obj.style.marginTop  = -(h/2)+"px";
  
obj.style.marginLeft = -(w/2)+"px";
  
// Layer anzeigen/ausblenden
  
obj.style.display v
  
obj.style.position "fixed"
  }
 }
//--> 
Ist sicher nicht die sauberste Lösung aber, da hat jemand bestimmt eine bessere Idee.

Gruß
Thx@all
Mit Zitat antworten
  #18 (permalink)  
Alt 01-12-2011, 12:14
Prominenter
 Registrierter Benutzer
Links : Onlinestatus : Prominenter ist offline
Registriert seit: Apr 2004
Beiträge: 152
Prominenter ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Hi@all

Zu früh gefreut,
also so geht es auch nicht, wenn verschieden große Bilder zur Auswahl stehen.

Man muss echt erst zweimal klicken.
Kann man das nicht irgendwie simulieren ???



Thx@all
Mit Zitat antworten
  #19 (permalink)  
Alt 01-12-2011, 17:21
Kropff
  Administrator
Links : Onlinestatus : Kropff ist offline
Registriert seit: Mar 2002
Ort: Köln
Beiträge: 11.721
Kropff befindet sich auf einem aufstrebenden Ast
Standard

Ich habe wohl des Rätsels Lösung. Du greifst auf die Ausmaße des Layer-Divs zu. Das hat aber keine und darum ist das margin immer 0. Ein Hack auf die Schnelle.
PHP-Code:
function showHideLayer(obj,argimg
  { 
    
obj document.getElementById(obj);
    if (
obj.style)
    {
      
v=(arg=='show')?'block':(arg=='hide')?'none':v
    }
    var 
fensterhoehe  screen.height;
    var 
fensterbreite screen.width;
    var 
img.offsetHeight;
    var 
img.offsetWidth;
    
obj.style.top  "50%";
    
obj.style.left "50%";
    
obj.style.marginTop  = -(h/2)+"px";
    
obj.style.marginLeft = -(w/2)+"px";
    
obj.style.display v
    
obj.style.position "fixed";  
  } 
Und der Aufruf erfolgt so:
HTML-Code:
<img src="bild.gif" onclick="document.getElementById('picture').src=this.src;
 showHideLayer('layer','show', this)"...
Peter

PS. Mit entsprechenden Testausgaben per alert oder console.log hättest du das aber selber herausfinden müssen!
__________________
Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
Meine Seite

Geändert von Kropff (01-12-2011 um 19:34 Uhr) Grund: Rechtschreibfehler
Mit Zitat antworten
  #20 (permalink)  
Alt 01-12-2011, 21:10
Prominenter
 Registrierter Benutzer
Links : Onlinestatus : Prominenter ist offline
Registriert seit: Apr 2004
Beiträge: 152
Prominenter ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Hi@all
@kropff

danke, hab das mal probiert, zumindest funktioniert jetzt die Größenberechnung, aber das mit der Position klappt noch nicht ganz.

Mir ist aufgefallen wenn ich ein alert() vor der object-anzeige einfüge funktioniert es tadellos, kein Bild mehr verschoben, alle sin der richtigen Größe, doch sobald ich das alert() wieder rausnehme klappt es nicht mehr.

Mit Zitat antworten
  #21 (permalink)  
Alt 01-12-2011, 22:05
Kropff
  Administrator
Links : Onlinestatus : Kropff ist offline
Registriert seit: Mar 2002
Ort: Köln
Beiträge: 11.721
Kropff befindet sich auf einem aufstrebenden Ast
Standard

Mit welchem Browser testest du das? Dem IE? Dann bau mal spaßeshalber ein setTimeout ein.

Gruß
Peter
__________________
Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
Meine Seite
Mit Zitat antworten
  #22 (permalink)  
Alt 01-12-2011, 23:21
Prominenter
 Registrierter Benutzer
Links : Onlinestatus : Prominenter ist offline
Registriert seit: Apr 2004
Beiträge: 152
Prominenter ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Zitat:
Zitat von Kropff Beitrag anzeigen
Mit welchem Browser testest du das?...
Hab FF8.0.1 und IE 8.0.7

Mit Timeout() hab ich schon probiert.
Mit Zitat antworten
  #23 (permalink)  
Alt 02-12-2011, 17:41
Kropff
  Administrator
Links : Onlinestatus : Kropff ist offline
Registriert seit: Mar 2002
Ort: Köln
Beiträge: 11.721
Kropff befindet sich auf einem aufstrebenden Ast
Standard

Stell noch mal ein Beispiel online. Also nur eine Dummy-Seite mit der Programmierung und einem Bild.

Peter
__________________
Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
Meine Seite
Mit Zitat antworten
  #24 (permalink)  
Alt 02-12-2011, 20:07
Prominenter
 Registrierter Benutzer
Links : Onlinestatus : Prominenter ist offline
Registriert seit: Apr 2004
Beiträge: 152
Prominenter ist zur Zeit noch ein unbeschriebenes Blatt
Standard

@kropff

Dummieseite ist blöd mit ur einem Bild, weil manchmal geht manchmal geht n icht.

auf:PRELOAD ist das Script mehrfachim Einsatz.

Z.Bsp. bei Galerie, da funktioniert es komischerweise fas überhaupt nicht, mnache Bilder gehen manche erst beim zweiten klick, pack ich ein alert() in das Script gehen alle Bilder sofort in gewünschter größe und Position auf.

Ansonsten gibt es auf der Seite verschiedene Bilder mit Vorschaufunktion und auch Links die ein Bild als Vorschau haben (Turnier -> Anfahrt und Startfolge z.Bsp.), da funktioniert es jetzt auch mit der Größe.

Ist die einzigste Möglichkeit zum testen.

Thx@all
Mit Zitat antworten
  #25 (permalink)  
Alt 02-12-2011, 20:32
Kropff
  Administrator
Links : Onlinestatus : Kropff ist offline
Registriert seit: Mar 2002
Ort: Köln
Beiträge: 11.721
Kropff befindet sich auf einem aufstrebenden Ast
Standard

So, jetzt machst du mal Folgendes. Du schmeißt alle(!) JavaScript-Dateien raus, die nichts mit dem Problem zu tun haben. Danach installierst du dir den Firebug für Firefox. Zu guter Letzt liest du dir das hier mal genau durch.

Und dann mach Testausgaben per console.log bis die Schwarte kracht, vulgo du den Fehler gefunden hast. Denn dabei kann und werde ich ich dir nicht mehr helfen. Sorry, aber jetzt geht es einfach nur noch darum, dass du deinen Code Stück für Stück entwanzt.

Gruß
Peter
__________________
Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
Meine Seite
Mit Zitat antworten
  #26 (permalink)  
Alt 03-12-2011, 14:16
Prominenter
 Registrierter Benutzer
Links : Onlinestatus : Prominenter ist offline
Registriert seit: Apr 2004
Beiträge: 152
Prominenter ist zur Zeit noch ein unbeschriebenes Blatt
Standard

@kropff

Herzlichen Dank, für deine Tipps, ich glaube jetzt habe ich es hinbekommen, zumindest lief es bei den Test bisher problemlos.

Das Problem lag einfach darin dass die Bilddaten beim ersten Klick immer 0 waren,ich habe das ganze jetzt in ein img.onload = function(); gepackt.

Hier nochmal alle Details:

Im <img>TAG oder im <a href> als onclick
PHP-Code:
onclick="showHideLayer(this.src,'show','Text') 
Übergeben werden: img=das aufrufende Objekt, arg=das Argument show/hide, txt=der anzuzeigende Text,

Der Layer
PHP-Code:
<!-- Beginn Layer Bildanzeige -->
<
div id="layer_preview">
 <
div id="layer_close"><a href="javascript:showHideLayer('','hide','')" 
onmouseover="top.status='LAYER SCHLIESSEN';return true;" title="SCHLIESSEN"><b>x</b></a></div>
 <
div id="layer_text" style="color:#000000; font-weight:bold; display:none;"></div>
 <
img id="layer_picture" src="http://www.php-resource.de/forum/images/null_pix.gif" 
title="Klick -> Close" alt="" onclick="javascript:showHideLayer('','hide','')" />
</
div>
<
script type="text/javascript" src="scripts/layer.js"></script>
<!-- Ende Layer Bildanzeige --> 
Die Layerformatierung
PHP-Code:
/* LAYER für Bildanzeige */
#layer_preview
{
 
position:absolute
 
top:0;
 
left:0
 
height:0;
 
width:0;
 
margin:0;
 
z-index:1
 
border2px solid black
 
background:#FFFFFF; 
 
padding:5px
 
display:none;
}
#layer_close
{
 
position:absolute
 
right:3px
 
width:18px
 
border1px solid black
 
background:#FFFFFF; 
 
font-weight:bold
 
text-align:center
 
vertical-align:middle
 
display:inline;
}
#layer_close a
{
 
text-decoration:none
 
color:#000000;
}
#layer_picture
{
 
cursor:pointer
 
border:1px solid black;

Das Script: layer.js
PHP-Code:
<!--
// Übergeben werden img=das aufrufende Objekt, arg=das Argument show/hide, txt=der anzuzeigende Text
function showHideLayer(imgargtxt

 var 
imgtxtargpicsWsHpWpHoWoH;
 
// Objekte definieren
 // Anzeige-Layer
 
var obj  document.getElementById('layer_preview');  
 
// Scrollfunktion ausschalten
 
obj.style.overflow "";   
 
// Anzeige Picture im Layer
 
var bild document.getElementById('layer_picture');
 
bild.src img;   
 
// Temporäres Bild für Größenberechnung
 
var tmp  = new Image;
  
 
// Objekt Style ermitteln und neu festlegen
 
if (obj.style)
 {
  
v=(arg=='show')?'block':(arg=='hide')?'none':v
 } 

 
// Layer Größe und Position Berechnen
 
tmp.onload = function (evt
 {
  
// Bildgößr ermitteln
  
var pW this.width;
  var 
pH this.height;

  
// Anzeige Breite
  
if( document.documentElement && document.documentElement.clientWidth )  sW document.documentElement.clientWidth;  
  else if (
document.body && document.body.offsetWidthsW document.body.offsetWidth;
  else if (
window.innerWidthsW window.innerWidth;
  else 
sW 1024;
  
// Anzeige Höhe
  
if( document.documentElement && document.documentElement.clientHeight )  sH document.documentElement.clientHeight;  
  else if (
document.body && document.body.offsetHeightsH document.body.offsetHeight;
  else if (
window.innerHeightsH window.innerHeight;
  else 
sH 768
  
  
// Layergöße auf Bildgröße setzen
  
obj.style.width  pW "px";
  
obj.style.height pH "px";  
  
// Layer positionieren
  
obj.style.left = (sW-pW)/"px";    
  
obj.style.top  = (sH-pH)/"px";   
  
  
// Wenn Bild breiter wie Bildschirm - Objekt auf 90% Bildschirmbreite setzen  
  
if( pW sW 
  {
   
oW = (sW*90/100);
   
obj.style.width    oW "px";
   
obj.style.left     = (sW-oW)/"px"
   
obj.style.overflow "scroll";
  } 
  
// Wenn Bild höher wie Bildschirm Objekt auf 90% Bildschirmhöhe setzen  
  
if( pH sH 
  {
   
oH = (sH*90/100);
   
obj.style.height   oH "px";
   
obj.style.top      = (sH-oH)/"px";      
   
obj.style.overflow "scroll";
   
pH oH;
  }
 
  
// Textausgabe, wenn Text übergeben wurde
  
if(txt)
  {
   
obj.style.height = (pH+20) + "px";  
   
document.getElementById('layer_text').innerHTML txt;
   
document.getElementById('layer_text').style.display "block";
  }
  else
  {
   
document.getElementById('layer_text').innerHTML "";
   
document.getElementById('layer_text').style.display "none";
  }
  
// Layer anzeigen
  
if (!= 'none'obj.style.display  v
  
obj.scrollTop 1;
 }; 
 
tmp.src img;
 
// Layer verbergen
 
if (== 'none'obj.style.display  v;
 
// Layer fixieren
 
obj.style.position "fixed";  
}
//--> 
Hier zu testen:http://www.scc-schwarzheide.de --> Galerie
oder auch hier: http://www.schwarzheide.de - Bildergalerie

Ich denke, da es jetzt läuft kann der Beitrag geschlossen werden.

Thx@all

Geändert von Prominenter (05-12-2011 um 17:18 Uhr) Grund: Korrekturen
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
css div zentrieren neworder666 HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 3 28-02-2007 19:26
div in div abhängig vom Inhalt zentriert jmc HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 5 22-09-2006 12:44
Div größe wie größe der seite aevo.art HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 4 09-02-2006 17:14
Div Element von JS abhängig machen Payne_of_Death BRAINSTORMING PHP/SQL/HTML/JS/CSS 9 18-10-2004 15:50
DIV Zentrieren MaxP0W3R HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 8 24-05-2004 14:39

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

PHP Server Monitor

PHP Server Monitor ist ein Skript, das prüft, ob Ihre Websites und Server betriebsbereit sind.

11.09.2018 Berni | Kategorie: PHP/ Security
PHP WEB STATISTIK ansehen PHP WEB STATISTIK

Die PHP Web Statistik bietet Ihnen ein einfach zu konfigurierendes Script zur Aufzeichnung und grafischen und textuellen Auswertung der Besuchern Ihrer Webseite. Folgende zeitlichen Module sind verfügbar: Jahr, Monat, Tag, Wochentag, Stunde Folgende son

28.08.2018 phpwebstat | Kategorie: PHP/ Counter
Affilinator - Affilinet XML Produktlisten Skript

Die Affilinator Affilinet XML Edition ist ein vollautomatisches Skript zum einlesen und darstellen der Affili.net (Partnerprogramm Netzwerk) Produktlisten und Produktdaten. Im Grunde gibt der Webmaster seine Affilinet PartnerID ein und hat dann unmittelb

27.08.2018 freefrank@ | Kategorie: PHP/ Partnerprogramme
 Alle PHP Scripte anzeigen

Alle Zeitangaben in WEZ +2. Es ist jetzt 00:19 Uhr.