[jQuery-ui] resizable und draggable verursachen laggs

W

weedo

Erfahrenes Mitglied
Hi,

ich wollte gerne eine Tabelle durch den browser schieben und sie vergrößern, bzw verkleinern. Praktisch wie ein Fenster.

Ich habe dafür die Engine von jQuery-ui verwendet.

Meine ersten Probleme, die ich damit hatte waren, dass diese sachen irgendwie nur für DivContainer ausgelegt sind, diese mir aber nichts nützen. Jedesmal wenn ich das in die Tabelle eingebaut hab, hat der mir den punkt zum vergrößern/verkleinern an den rand des Bildschirms und nicht an den Rand der tabelle gebracht...

nun dachte ich mir, dass ich mal schlau wie Schlumpf bin und einfach einen iFrame in einen Divcontainer packe und diesem Container die attribute gebe.

Und es Funktioniert! Nur ist es extrem laggy. Da mein Laptop nicht gerade der schlechteste ist, möchte ich nicht wirklich wissen wie es sich dann auf älteren Maschienen benutzen lässt...

Was kann ich machen, dass meine Idee möglichst laggfrei funktioniert?

hier erstmal den kleinen codeschnippsel, den ich zusammen gebaut habe.

HTML: 
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.6.custom.css" rel="stylesheet" />	
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"></script>
<script>
  $(function(){
    $("#content").resizable({
      //animate: true
      
    });
  });
  $(function(){
    $("#content").draggable({
    handle: "#handler",
    //helper: true
    });
  });
</script>


<div id="content" style="width:801; height: 501; position: absolute; top:1; left1;">
  <div id="handler" style="position: fixed; height:31; width:100%; top:0; left:0" cursor: move;></div>
  <iframe style="border: none;  width:100%; height: 100%;" src="content.html"></iframe>
</div>

Für eure Hilfe bin ich sehr Dankbar.
lg weedo
 
Hallo Cpoly,

nein leider geht das nicht.

weedo hat gesagt.:
[...]Jedesmal wenn ich das in die Tabelle eingebaut hab, hat der mir den punkt zum vergrößern/verkleinern an den rand des Bildschirms und nicht an den Rand der tabelle gebracht...
Zum Vergrößern anklicken....

Die Tabelle endet mit dem Punkt rechts unten etwa mittig am Bildschirm, der punkt zum ziehen befindet sich aber am Bildschirmrand rechts unten...und viel vergrößern kann man da dann nichtmehr.

lg weedo
 
Folgendes funktioniert bei mir hervorragend.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="html" xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<title>Page title</title>
	
	<style type="text/css">
		#resize {
			width:500px;
			height:400px;
		}
		
		#resize table {
			width:100%;
			height:100%;
		}
	</style>
	
	<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/humanity/jquery-ui.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<div id="resize">
		<table border="1">
			<tr>
				<td>1</td><td>2</td><td>3</td>
			</tr>
			<tr>
				<td>4</td><td>5</td><td>6</td>
			</tr>
			<tr>
				<td>7</td><td>8</td><td>9</td>
			</tr>
		</table>
	</div>
	
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
	
	<script type="text/javascript">
	/* <![CDATA[ */
		$(document).ready(function(){
			$("#resize").resizable();
		});
	/* ]]> */
	</script>
</body>

</html>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück