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 Bewertung: Bewertung: 3 Stimmen, 5,00 durchschnittlich.
  #1 (permalink)  
Alt 07-12-2013, 17:06
Marcus-24-D
 Registrierter Benutzer
Links : Onlinestatus : Marcus-24-D ist offline
Registriert seit: Oct 2007
Beiträge: 173
Marcus-24-D befindet sich auf einem aufstrebenden Ast
Standard IE 11 - Prob

Mahlzeit.
Das Script soll das draggen von divs erlauben. Was bisher wunderbar mit dem
IE funktioniert hat. Seit IE 11 gibts hier ein Problem welches ich mit der Konsole und debuggen nicht finden kann.
Es wird nämlich kein Fehler oder eine Warnung ausgespuckt sondern still ignoriert. Sprich: Das draggen ist nicht möglich.

Hier wird jetzt der IE als Gecko erkannt.
Ich habe bereits einen IE11 detect eingebaut und die Variablen für den MSIE
zugewiesen. Wenn das Ereignis dann eintrifft, wird eine Fehlermeldung ausgespuckt.
Er hat dann Probleme mit "document.attachEvent("onmousemove", dragGo);"
Aktuell ist die IE11 kennung wieder raus. Das Scriptist so also original.

Kann da jemand helfen?

Code:
function Browser() {
 
  var ua, s, i;
 
  this.isIE    = false;
  this.isNS    = false;
  this.version = null;
 
  ua = navigator.userAgent;
 
  s = "MSIE";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isIE = true;
    this.version = parseFloat(ua.substr(i + s.length));
    return;
  }
 
  s = "Netscape6/";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isNS = true;
    this.version = parseFloat(ua.substr(i + s.length));
    return;
  }
 
  // Treat any other "Gecko" browser as NS 6.1.
 
  s = "Gecko";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isNS = true;
    this.version = 6.1;
    return;
  }
}
 
var browser = new Browser();
 
// Global object to hold drag information.
 
var dragObj = new Object();
dragObj.zIndex = 0;
 
function dragStart(event, id) {
 
  var el;
  var x, y;
 
  // If an element id was given, find it. Otherwise use the element being
  // clicked on.
 
  if (id)
    dragObj.elNode = document.getElementById(id);
  else {
    if (browser.isIE)
      dragObj.elNode = window.event.srcElement;
    if (browser.isNS)
      dragObj.elNode = event.target;
 
    // If this is a text node, use its parent element.
 
    if (dragObj.elNode.nodeType == 3)
      dragObj.elNode = dragObj.elNode.parentNode;
  }
 
  // Get cursor position with respect to the page.
 
  if (browser.isIE) {
    x = window.event.clientX + document.documentElement.scrollLeft
      + document.body.scrollLeft;
    y = window.event.clientY + document.documentElement.scrollTop
      + document.body.scrollTop;
  }
  if (browser.isNS) {
    x = event.clientX + window.scrollX;
    y = event.clientY + window.scrollY;
  }
 
  // Save starting positions of cursor and element.
 
  dragObj.cursorStartX = x;
  dragObj.cursorStartY = y;
  dragObj.elStartLeft  = parseInt(dragObj.elNode.style.left, 10);
  dragObj.elStartTop   = parseInt(dragObj.elNode.style.top,  10);
 
  if (isNaN(dragObj.elStartLeft)) dragObj.elStartLeft = 0;
  if (isNaN(dragObj.elStartTop))  dragObj.elStartTop  = 0;
 
  // Update element's z-index.
 
  dragObj.elNode.style.zIndex = ++dragObj.zIndex;
 
  // Capture mousemove and mouseup events on the page.
 
  if (browser.isIE) {
    document.attachEvent("onmousemove", dragGo);
    document.attachEvent("onmouseup",   dragStop);
    window.event.cancelBubble = true;
    window.event.returnValue = false;
  }
  if (browser.isNS) {
    document.addEventListener("mousemove", dragGo,   true);
    document.addEventListener("mouseup",   dragStop, true);
    event.preventDefault();
  }
}
 
function dragGo(event) {
 
  var x, y;
 
  // Get cursor position with respect to the page.
 
  if (browser.isIE) {
    x = window.event.clientX + document.documentElement.scrollLeft
      + document.body.scrollLeft;
    y = window.event.clientY + document.documentElement.scrollTop
      + document.body.scrollTop;
  }
  if (browser.isNS) {
    x = event.clientX + window.scrollX;
    y = event.clientY + window.scrollY;
  }
 
  // Check object isnt being dragged off screen
 
     var w = 0, h = 0;

   // check browser type and get window sizes
     if( typeof( window.innerWidth ) == 'number' )
   {
       // Non-IE
       w = window.innerWidth;
      h = window.innerHeight;
    }
   else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) )
   {
       // IE 6+ in 'standards compliant mode'
       w = document.documentElement.clientWidth;
       h = document.documentElement.clientHeight;
     }
   else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) )
   {
       // IE 4 compatible
       w = document.body.clientWidth;
       h = document.body.clientHeight;
     }

   if( x < 30 )
   {
      x = 30;
   }
   
   if( x > (w - 30) )
   {
      x = w - 30;
   }
   
   if( y < 30 )
   {
      y = 30;
   }
   
   if( y > (h - 30) )
   {
      y = h - 30;
   }

  // Move drag element by the same amount the cursor has moved.

  dragObj.elNode.style.left = (dragObj.elStartLeft + x - dragObj.cursorStartX) + "px";
  dragObj.elNode.style.top  = (dragObj.elStartTop  + y - dragObj.cursorStartY) + "px";
 
  if (browser.isIE) {
    window.event.cancelBubble = true;
    window.event.returnValue = false;
  }
  if (browser.isNS)
    event.preventDefault();
}
 
function dragStop(event) {
 
  // Stop capturing mousemove and mouseup events.
 
  if (browser.isIE) {
    document.detachEvent("onmousemove", dragGo);
    document.detachEvent("onmouseup",   dragStop);
  }
  if (browser.isNS) {
    document.removeEventListener("mousemove", dragGo,   true);
    document.removeEventListener("mouseup",   dragStop, true);
  }
}
Mit Zitat antworten
  #2 (permalink)  
Alt 07-12-2013, 18:02
h3ll
 Registrierter Benutzer
Links : Onlinestatus : h3ll ist offline
Registriert seit: Mar 2008
Beiträge: 3.578
h3ll befindet sich auf einem aufstrebenden Ast
Standard

Warum verwendest du nicht ein JavaScript-Framework wie jQuery? Dann bräuchtest du dir um Browser-Kompatibilität keine Gedanken machen.
Mit Zitat antworten
  #3 (permalink)  
Alt 07-12-2013, 18:14
Marcus-24-D
 Registrierter Benutzer
Links : Onlinestatus : Marcus-24-D ist offline
Registriert seit: Oct 2007
Beiträge: 173
Marcus-24-D befindet sich auf einem aufstrebenden Ast
Standard

Das hab ich schon gemacht. Allerdings ergeben sich in meinem Programm entsprechende Probleme.
Sobald ich die jquery ui dragging implementiere und
auf meine divs anwende, ergibt sich das Problem, das der gesamte div Container
draggable ist und zwar werden alle Kind elemente die sich darin befinden
mit angesprochen. Da es sich bei mir um einen chat handelt, also (ziehbare privatfensterchen)
muss und soll der Text Container, nicht auf klick draggable sein. Auch das scrollen funktioniert so nicht.
Ansonsten wäre ich mit der JQuery Lösung echt zufrieden. Aber auch habe ich festgestellt,
(weil ich im mom JQuery drag im Einsatz habe [Notlösung] ) diverse User starke Performanceprobleme haben.

Bei mir ist das der Div so aufgebaut.

Div Container
title
textfenster
input field
tools

mit meinem Script wird das gesamte div mit dem mousdown event auf das title div aktiv und deaktiv sobald ich es loslasse.
So kann das fenster nur dann verschoben werden wenn man es am title anfässt.
Mit Jquery soll das wohl so nicht funktionieren. Und wenn ja, bin ich für diese Lösung gerne offen

edit: das ist das privat.js

Code:
var privateChat = 0;

function createPChatDiv(divPName,divToName,dPID,duID)
{
	if(privateChat == 1)
	{
		showInfoBox("system","200","300","200","",lang30);
		return false;
	}

	// to user
	if(divToName!=userName)
	{
		var uUser = divToName;
	}
	else
	{
		var uUser = divPName;
	}

	// window title
	var pTitle = uUser;

	// div name
	divPName = duID+"_"+dPID;
	
	// prevent duplicate private chat windows 
	if(document.getElementById(dPID+"_"+duID))
	{
		document.getElementById(dPID+"_"+duID).style.visibility = 'visible';
		document.getElementById("pcontent_"+dPID+"_"+duID).style.visibility = 'visible';
		document.getElementById("pmenuBar_"+dPID+"_"+duID).style.visibility = 'visible';
		document.getElementById("psendbox_"+dPID+"_"+duID).style.visibility = 'visible';
		document.getElementById("pmenuWin_"+dPID+"_"+duID).style.visibility = 'visible';	
		
		return false;
	}	

	// if div exists
	if(!document.getElementById(divPName))
	{
		// create div
		var ni = document.getElementById("pWin");

		var newdiv = document.createElement('div');
		newdiv.setAttribute("id",divPName);
		newdiv.className = "pChatWin";

		// title
		newdiv.innerHTML = "<div doFocus(\""+divPName+"\")' id='ptitle_"+divPName+"' class='ptitle' style='cursor:move;' onclick=doFocus(\""+divPName+"\")> <span style='float:left;'>&nbsp;<img style='vertical-align:middle;' src='avatars/online.gif'>&nbsp;"+decodeURI(pTitle)+"</span> <span style='float:right;'><span style='cursor:pointer;' onclick='minPwin(\""+divPName+"\",\""+divPName+"\")'><img src='images/min.gif'></span>&nbsp;<span style='cursor:pointer;' onclick='closePWin(\""+divPName+"\");privateChatCount();'><img src='images/close.gif'></span>&nbsp;</div>";

		// content
		newdiv.innerHTML += "<div id='pcontent_"+divPName+"' class='pcontent'></div>";

		// menu
		newdiv.innerHTML += "<div id='pmenuBar_"+divPName+"' class='pmenuBar'></div>";

		// sendbox
		newdiv.innerHTML += '<div id=\'psendbox_'+divPName+'\' class=\'psendbox\'><input type=\'text\' id=\'poptionsBar_'+divPName+'\' class="poptionsBar" onKeyPress="return submitenter(this,event,\'poptionsBar_'+divPName+'\',\'pcontent_'+divPName+'\',\''+uUser+'\');" onfocus="changeMessBoxStyle(\'poptionsBar_'+divPName+'\');"></textarea><input id="poptionsSend" class="poptionsSend" type="button" value="'+lang31+'" onclick="sendPMessage(\''+uUser+'\',\'poptionsBar_'+divPName+'\',\'pcontent_'+divPName+'\')"></div>';

		// menu win
		newdiv.innerHTML += "<div id='pmenuWin_"+divPName+"'></div>";

		ni.appendChild(newdiv);

		// add menu
		optionsMenu('pmenuBar_'+divPName, 'poptionsBar_'+divPName, 'pcontent_'+divPName, 'pmenuWin_'+divPName);

		// focus window
		doFocus(divPName);

		// priv drag
		$( "#"+divPName ).draggable();		

		// resize window
		
		/*
		$( "#"+divPName ).resizable({
			minHeight: 300,
			minWidth: 444
			}).position( { of: $(this), my: 'center center', at: 'center center' } );			
		*/
	}


}
wobei hier jetzt das onmousedown event im title div nicht enthalten ist, weil jquery halt im Moment drin ist

Geändert von Marcus-24-D (07-12-2013 um 18:19 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 07-12-2013, 18:17
h3ll
 Registrierter Benutzer
Links : Onlinestatus : h3ll ist offline
Registriert seit: Mar 2008
Beiträge: 3.578
h3ll befindet sich auf einem aufstrebenden Ast
Standard

Du musst nicht jQuery UI Draggable verwenden, sondern jQuery alleine wäre ja auch schon eine Verbesserung. Mir wird nur schlecht, wenn ich die vielen Browser-Weichen in dem Code sehe. Das ist doch überhaupt nicht wartbar. Und dann die ganze Arbeit investieren, nur damit dir das Ding beim IE12 wieder um die Ohren fliegt?

Geändert von h3ll (07-12-2013 um 18:21 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 07-12-2013, 18:21
Marcus-24-D
 Registrierter Benutzer
Links : Onlinestatus : Marcus-24-D ist offline
Registriert seit: Oct 2007
Beiträge: 173
Marcus-24-D befindet sich auf einem aufstrebenden Ast
Standard

Ich hab mein beitrag eben editiert. siehe oben
Zum draggen brauch ich nicht die ui ?
Kannst du mir da nen Beispiel machen wie das funktionier?
Mit Zitat antworten
  #6 (permalink)  
Alt 07-12-2013, 18:28
h3ll
 Registrierter Benutzer
Links : Onlinestatus : h3ll ist offline
Registriert seit: Mar 2008
Beiträge: 3.578
h3ll befindet sich auf einem aufstrebenden Ast
Standard

zB. Create a Windows-like Interface with jQuery UI | Nettuts+
Mit Zitat antworten
  #7 (permalink)  
Alt 07-12-2013, 18:31
Marcus-24-D
 Registrierter Benutzer
Links : Onlinestatus : Marcus-24-D ist offline
Registriert seit: Oct 2007
Beiträge: 173
Marcus-24-D befindet sich auf einem aufstrebenden Ast
Standard

ah okay, das werd ich mir mal zu gemüt führen..jetzt... danke. wenn ich nen prob kriege, schrei ich nochmal diesbezüglich
Mit Zitat antworten
  #8 (permalink)  
Alt 07-12-2013, 21:13
Marcus-24-D
 Registrierter Benutzer
Links : Onlinestatus : Marcus-24-D ist offline
Registriert seit: Oct 2007
Beiträge: 173
Marcus-24-D befindet sich auf einem aufstrebenden Ast
Standard

Melde mich nochmal zurück. Ich verstehe hier etwas nicht ganz denk ich.
Wo ist hier die drag Funktion difiniert? Legt das die jQ UI anhand der classen fest?

Code:
var _init = $.ui.dialog.prototype._init;
		$.ui.dialog.prototype._init = function() {
			_init.apply(this, arguments);
			
			var dialog_element = this;
			var dialog_id = this.uiDialogTitlebar.next().attr('id');
			
			this.uiDialogTitlebar.append('<a href="#" id="' + dialog_id + 
			'-minbutton" class="ui-dialog-titlebar-minimize ui-corner-all">'+
			'<span class="ui-icon ui-icon-minusthick"></span></a>');
			
			$('#dialog_window_minimized_container').append(
				'<div class="dialog_window_minimized ui-widget ui-state-default ui-corner-all" id="' + 
				dialog_id + '_minimized">' + this.uiDialogTitlebar.find('.ui-dialog-title').text() + 
				'<span class="ui-icon ui-icon-newwin"></div>');
				
			$('#' + dialog_id + '-minbutton').hover(function() {
				$(this).addClass('ui-state-hover');
			}, function() {
				$(this).removeClass('ui-state-hover');
			}).click(function() {
				dialog_element.close();
				$('#' + dialog_id + '_minimized').show();
			});
			
			$('#' + dialog_id + '_minimized').click(function() {
				$(this).hide();
				dialog_element.open();
			});
		};
		
		
		
		
		
		
		
		
$(document).ready(function() {
				$('#create_button').button().click(function() {
					var create_dialog = $('#dialog_window_1');
					var create_button = $(this);
					if( create_dialog.dialog('isOpen') ) {
						create_button.button('option', 'label', 'Create a new Window');
						create_dialog.dialog('close');
					} else {
						create_button.button('option', 'label', 'Close Window');
						create_dialog.dialog('open');
					}
				});
				
				$('#dialog_window_1').dialog({
					width: 'auto',
					height: 'auto',
					autoOpen : false,
					buttons: [
						{
							text: 'Create',
							click: function() {
								var div_count = $('.dialog_window').length + 1;
								var div_id = 'dialog_window_' + div_count;
								var div_title = $('#new_window_title').val();
								var div_content = $('#new_window_content').val();
								var buttons = new Array();
								if( $('#alertbutton').is(':checked') ) {
									buttons.push({
										text: 'ALERT',
										click: function() {
											alert('ALERTING from Dialog Widnow: ' + div_title);
										}
									});
								}
								
								if( $('#closebutton').is(':checked') ) {
									buttons.push({
										text: 'CLOSE',
										click: function() {
											$('#' + div_id).dialog('close');
										}
									});
								}
								
								$('body').append('<div class="dialog_window" id="' + div_id + '">' + div_content + '</div>');
				
								var dialog = $('#' + div_id).dialog({
									width: 'auto',
									height: 'auto',
									title : div_title,
									autoOpen : true,
									buttons: buttons
								});
							}
						}
					]
				});
				$('#buttonlist').buttonset();
			});
Mit Zitat antworten
  #9 (permalink)  
Alt 07-12-2013, 21:49
Marcus-24-D
 Registrierter Benutzer
Links : Onlinestatus : Marcus-24-D ist offline
Registriert seit: Oct 2007
Beiträge: 173
Marcus-24-D befindet sich auf einem aufstrebenden Ast
Standard

ich hab jetzt sowas hier. funktioniert zwar, weiß aber nicht ob das so gesund ist oder nicht?!

Code:
$( "#"+divPName ).draggable({handle:"#ptitle_"+divPName});
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
Prob ..... DaFunkY HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 7 07-12-2005 16:39
Kontaktformular prob. dzinner PHP Developer Forum 39 12-08-2005 12:47
ftp prob! aKuT Off-Topic Diskussionen 7 21-04-2003 19:57
performance Prob. tobias_k PHP Developer Forum 24 02-02-2003 16:37
url prob +db crusher02 SQL / Datenbanken 9 27-12-2002 17:29

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:21 Uhr.