Learn VBA & Macros in 1 Week!

JavaScript - Loss Of Drag Handles In Ie8 After Resize

Full Excel VBA Course - Beginner to Expert

Loss Of Drag Handles In Ie8 After Resize	View Content

At the discretion of the user I am using window.resizeTo and window.moveTo to resize a window.

In IE8, if the window is resized from a maximised state the drag handles on the browser are not available after the resize? It does not seem to apply if the window is already semi minimised.

Is this a bug or is there a solution, would appreciate any thoughts.

Thanks

Full Excel VBA Course - Beginner to Expert

Table Manipulation Causing Premature Hair Loss

Similar Tutorials

View Content

Ok, first off I would like to say hi to everyone as this is my first post! Now that we have been introduced, here is my problem. I am trying to create a billing system in which you generate invoices. The way I am going about this is using a table with rows for each item the user is placing on the invoice. I have a script that adds new rows to the table when the user wants to place more than one item on the invoice, thats all fine and dandy. The problem is that I also want to be able to delete any row of the table at any time so that the user can remove items as well. When the user presses the attached "delete" button on the row they wish to remove the delete script gets the table length and changes the id and name of every item in the rows below the one being deleted so that when I submit the data as a form it will have a predictable pattern for getting the post variables. At the moment the script runs fine the first time and does exactly what it is supposed to. The issue is that the second time you run it after it has changed the id and name values for the delete button elements on the lower rows it only makes it to the first alert() call! I have been pulling my hair out for days!!!!!

Here is the Code:

Code:

	function getEl(element)
		{
			var object = null;
			if (document.layers)
				{
					object = document.layers[element];
				}
			else if (document.all)
				{
					object = document.all[element];
				}
			else if (document.getElementById)
				{
					object = document.getElementById(element);
				}
			return object;
		}
		
function addRow()
{
  var tbl = getEl('invTbl');
  var lastRow = tbl.rows.length;
  // if there's no header row in the table, then iteration = lastRow + 1
  var iteration = lastRow;
  var row = tbl.insertRow(lastRow);
  
  var cellqty = row.insertCell(0);
  var qty = document.createElement("<input type='text' name='qty_"+iteration+"' id='qty_"+iteration+"' size='4' value='1' onChange='javascript:updatePrice();' />");
  cellqty.appendChild(qty);
  
  var cellitm = row.insertCell(1);
  var itm = document.createElement('input');
  itm.type = 'text';
  itm.name = 'itm_' + iteration;
  itm.id = 'itm_' + iteration;
  itm.size = 30;
  cellitm.appendChild(itm);
  
  var celldsc = row.insertCell(2);
  var dsc = document.createElement('input');
  dsc.type = 'text';
  dsc.name = 'dsc_' + iteration;
  dsc.id = 'dsc_' + iteration;
  dsc.size = 50;
  dsc.value = iteration;
  celldsc.appendChild(dsc);
  
  var cellprc = row.insertCell(3);
  var prc = document.createElement("<input type='text' name='prc_"+iteration+"' id='prc_"+iteration+"' size='9' value='1.00' onChange='javascript:updatePrice();' />");
  cellprc.appendChild(prc);
  
  var celldel = row.insertCell(4);
  var del = document.createElement("<input type='button' name='"+iteration+"' id='"+iteration+"' value='Delete' onClick='javascript:removeRow(this.id);' />");
  celldel.appendChild(del);

}

function removeRow(row)
{

	alert("you are deleting row " + parseInt(row));
	tbl = getEl('invTbl');
	rowTotal = tbl.rows.length;
	alert("there are " + rowTotal + " rows!");
	tbl.deleteRow(parseInt(row));	
	for ( i = 1; i < rowTotal; i++ )
		{
		if ( i > parseInt(row) )
			{
			place = i - 1;
			alert(i + " becomes " + place);
			qtycontainer = "qty_" + i;
			itmcontainer = "itm_" + i;
			dsccontainer = "dsc_" + i;
			prccontainer = "prc_" + i;
			delcontainer = i.toString();
			buttonchange = place.toString();
			
			getEl(qtycontainer).name = 'qty_' + place;
			getEl(qtycontainer).id = 'qty_' + place;
	
			getEl(itmcontainer).name = 'itm_' + place;
			getEl(itmcontainer).id = 'itm_' + place;
			
			getEl(dsccontainer).name = 'dsc_' + place;
			getEl(dsccontainer).id = 'dsc_' + place;
			getEl('dsc_'+place).value = getEl('dsc_'+place).id;
			
			getEl(prccontainer).name = 'prc_' + place;
			getEl(prccontainer).id = 'prc_' + place;
			
			getEl(delcontainer).name = buttonchange;
			getEl(delcontainer).id = buttonchange;
			alert("del button changed to " + getEl(i).id);
			}
		}
//	updatePrice();
}

The button element for each row calls javascript:removeRow(this.id);

Please help me figure out what I am doing wrong!

Resize Element On Windows Resize

Similar Tutorials

View Content

Hi' there

Is there anyway to make a custom resize function that resizes one of my div elements on the webpage the same amount of pixels as the browser window gets resized?

Can't Drag Pop-up Div

Similar Tutorials

View Content

Hi All,

I'm new to the CF forums and also to JavaScript. Trying to get a pop-up div to be draggable, but it doesn't seem to be working. Can someone help me out? I'd be very grateful!

JavaScript I'm using:
Code:

//used for dragging div
function agent(v) 
{ 
return(Math.max(navigator.userAgent.toLowerCase().indexOf(v),0)); 
}
function xy(e,v) 
{ 
return(v?(agent('msie')?event.clientY+document.body.scrollTop:e.pageY):(agent('msie')?event.clientX+document.body.scrollTop:e.pageX)); 
}

function dragOBJ(d,e) 
{

function drag(e) 
{ 
if(!stop) 
{ 
d.style.top=(tX=xy(e,1)+oY-eY+'px'); 
d.style.left=(tY=xy(e)+oX-eX+'px'); 
} 
}

var oX=parseInt(d.style.left),oY=parseInt(d.style.top),eX=xy(e),eY=xy(e,1),tX,tY,stop;

document.onmousemove=drag; 
document.onmouseup=function()
{ 
stop=1; 
document.onmousemove=''; 
document.onmouseup=''; 
};
}

//used for pop-up div
function pop(div) 
{
document.getElementById(div).style.display='block';
return false
}
function hide(div) 
{
document.getElementById(div).style.display='none';
return false
}

Also, here is the HTML:
Code:

<a href="#" onclick="return pop('myDiv2')">Pop-up div #2</a> - Hidden div shows upon clicking this link, but it won't drag

<div class="bubble" onmousedown="dragOBJ(this,event); return false;"> 
   <div id="myDiv2" class="parentDisable"> 
   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
   <p><a href="#" onClick="return hide('myDiv2')">Close [X]</a></p> 
   </div> 
</div>

And the CSS:
Code:

.parentDisable { 
position:absolute;
margin:120px;
padding:20px;
width:400px;
display:none;
z-index:3;
background-color:#DEDEDE;
border:1px solid #DEDEDE;
border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;
}

.bubble { position:fixed; width:400px; top:150px; left:250px; cursor:move; }

Drag And Drop

Similar Tutorials

View Content

Hello,

I have a system where one clicks on an image an a floating calculator appear.

<img src="images/groutculatorman.png" width="114" height="85" onclick="showdiv()"/>

<div id="demo" style="visibility:hidden"> <div id="calculator" class="drag">

-----
<script type="text/javascript">

function closeCalculator() {
document.getElementById("calculator").style.display = "none";
window.location.href = window.location.href;}

var ie = document.all;
var ns6 = document.getElementById && !document.all;
var dragapproved=false;
var z, x, y;

function move(e) {
if (dragapproved) {
z.style.left=ns6? temp1+e.clientX-x: temp1+event.clientX-x;
z.style.top=ns6? temp2+e.clientY-y : temp2+event.clientY-y;
return false;
}
}

function drags(e) {
if (!ie&&!ns6)
return;
var firedobj = ns6? e.target : event.srcElement;
var topelement = ns6? "HTML" : "BODY";
while (firedobj.tagName != topelement&&firedobj.className != "drag") {
firedobj = ns6? firedobj.parentNode : firedobj.parentElement;
}
if (firedobj.className == "drag") {
dragapproved = true;
z = firedobj;
temp1 = parseInt(z.style.left+0);
temp2 = parseInt(z.style.top+0);
x = ns6? e.clientX: event.clientX;
y = ns6? e.clientY: event.clientY;
document.onmousemove=move;
return false;
}
}
document.onmousedown=drags;
document.onmouseup=new Function("dragapproved=false");
// -->
function showdiv()
{
var mydiv = document.getElementById("demo");
mydiv.style.visibility="";
mydiv.style.display="";
}

</script>
------

PROBLEM

I added a drop down function on the image in order to open different calculators.

The system works however the calculator won't drop (doesn't deselect).

Any ideas.

New code.

<a href="javascript:;" onMouseOver="MM_showMenu(window.mm_menu_1009090908_0,11,82,null,'image1')" onMouseOut="MM_startTimeout();">

<img src="images/groutculatorman.png" name="image1" width="114" height="85" border="0" id="image1">

</a> <div id="demo" style="visibility:hidden"> <div id="calculator" class="drag">

-------------

<script language="JavaScript1.2">mmLoadMenus();</script>

<script type="text/javascript">

function showdiv()
{
var mydiv = document.getElementById("demo");
mydiv.style.visibility="";
mydiv.style.display="";
}

</script>

How To Drag A Div If A Image In It?

Similar Tutorials

View Content

hi,
i want to drag the div which have a image in it:
but i find that if i click on the image, i cannot drag the div, (in FF3.5)
any advice would be appreciated.
Code:

<div id="div1">
<imc src="XXX.jpg">
</div>

and i have a JS something like that...:
Code:

drag();
function drag(){
document.onmousedown = startdrag;
document.onmouseup = enddrag;
}

function startdrag(e){
dragobj=e.target;
alert(dragobj.id);
}
......................

Drag Window

Similar Tutorials

View Content

Hei,

I should start by saying that I am very new in Javascript.. what I need to do is to drag the entire window...any ideas how to do that ?

Thanks

Drag And Drop Help?

Similar Tutorials

View Content

Hello, I'm in need of help on my drag and drop code. How can I make 2 images (1 draggable, 1 static) each switch to alternate images when the draggable is dragged over the static?

Drag And Drop

Similar Tutorials

View Content

Hey complete beginner to javascript here so sorry if I'm doing something stupid

Basically I've tried to follow this guide to make it so that I can move an image on the page.

I have a style tag in the head

Code:

<style type="text/css">.drag{position: relative;}</style>

I have an image like this:

Code:

<img src="logo.png" class="drag" alt="logo" />

which is obviously in the body

I copied and pasted the code given in the guide:

Code:

<script language="JavaScript" type="text/javascript">
<!--
var _startX = 0;			// mouse starting positions
var _startY = 0;
var _offsetX = 0;			// current element offset
var _offsetY = 0;
var _dragElement;			// needs to be passed from OnMouseDown to OnMouseMove
var _oldZIndex = 0;			// we temporarily increase the z-index during drag
var _debug = $('debug');	// makes life easier


InitDragDrop();

function InitDragDrop()
{
	document.onmousedown = OnMouseDown;
	document.onmouseup = OnMouseUp;
}

function OnMouseDown(e)
{
	// IE is retarded and doesn't pass the event object
	if (e == null) 
		e = window.event; 
	
	// IE uses srcElement, others use target
	var target = e.target != null ? e.target : e.srcElement;
	
	_debug.innerHTML = target.className == 'drag' 
		? 'draggable element clicked' 
		: 'NON-draggable element clicked';

	// for IE, left click == 1
	// for Firefox, left click == 0
	if ((e.button == 1 && window.event != null || 
		e.button == 0) && 
		target.className == 'drag')
	{
		// grab the mouse position
		_startX = e.clientX;
		_startY = e.clientY;
		
		// grab the clicked element's position
		_offsetX = ExtractNumber(target.style.left);
		_offsetY = ExtractNumber(target.style.top);
		
		// bring the clicked element to the front while it is being dragged
		_oldZIndex = target.style.zIndex;
		target.style.zIndex = 10000;
		
		// we need to access the element in OnMouseMove
		_dragElement = target;

		// tell our code to start moving the element with the mouse
		document.onmousemove = OnMouseMove;
		
		// cancel out any text selections
		document.body.focus();
		
		// prevent text selection in IE
		document.onselectstart = function () { return false; };
		// prevent IE from trying to drag an image
		target.ondragstart = function() { return false; };
		
		// prevent text selection (except IE)
		return false;
	}
}

function ExtractNumber(value)
{
	var n = parseInt(value);
	
	return n == null || isNaN(n) ? 0 : n;
}

function OnMouseMove(e)
{
	if (e == null) 
		var e = window.event; 

	// this is the actual "drag code"
	_dragElement.style.left = (_offsetX + e.clientX - _startX) + 'px';
	_dragElement.style.top = (_offsetY + e.clientY - _startY) + 'px';
	
	_debug.innerHTML = '(' + _dragElement.style.left + ', ' + _dragElement.style.top + ')';	
}

function OnMouseUp(e)
{
	if (_dragElement != null)
	{
		_dragElement.style.zIndex = _oldZIndex;

		// we're done with these events until the next OnMouseDown
		document.onmousemove = null;
		document.onselectstart = null;
		_dragElement.ondragstart = null;

		// this is how we know we're not dragging
		_dragElement = null;
		
		_debug.innerHTML = 'mouse up';
	}
}
//-->
	</script>

I have tried putting the javascript in the head and the body but no matter where I put it, I can't drag and drop the image. What am I doing wrong?

Thank you for your time

Click And Drag Div's?

Similar Tutorials

View Content

There seems to be a lot out there, but I haven't found a javascript for a click and drag that has been bug free.

Does anyone have any suggestions?

The last one I had didn't work in Safari.

Thanks so much for any help.

Drag And Drop Help

Similar Tutorials

View Content

All I Want To Make Happen Is That If You Drag and Drop A Div Into A Table An Action Happens

My Attempt At Drag And Drop...

Similar Tutorials

View Content

Dear forum

Rather than use a library, I have attempted to write my own attempt at a script that allows multiple elements to be dragged around the page. It starts by loading all divs into an array, and then forms a new array of only divs with the required class name. I believe this script doesn't work for internet explorer, but I am not concerned by this.

As you will see if you run the code below, the script works well for divs containing text, but if I include an image inside a div, then the image will follow the mouse even if the button is released.

I have spent a whole day on this tiny script and really don't know where to go from here! Could anybody shed some light on this please?

Thanks

Matt

Code:

<html>
<head>

<style>
 .dragger
 {
  background-color:lightgreen;
  position:absolute;
 }
</style>

<script type="text/javascript">

var all_els=[];
var els=[];
var el;

 window.onload = function()
 {

all_els=document.getElementsByTagName("div"); //an array of all div elements on page
for(var i=0;i<all_els.length;i++){

if(all_els[i].className=='dragger') { els.push(all_els[i]);}   //just add those with the correct class name to our final array

 }


  for (el in els)
  {
  this.dragging=false;  //each element in the array is an object, so new properties e.g. dragging can be set.  Initially set the dragging property of each element to false

  els[el].onmousedown=function() {this.dragging=true;}
  els[el].onmouseup=function() {this.dragging=false;}

  }
 }


 document.onmousemove = function(e)
 {

  for(el in els)
  {

   if (els[el].dragging==true)
  {
   els[el].style.left = e.clientX - els[el].offsetWidth/2 +'px';
   els[el].style.top = e.clientY - els[el].offsetHeight/2+'px';
  }

 }
 }

</script>
<title>Simple Drag</title>
</head>

<body>
<div class="dragger"> Some text to drag </div>
<br><br><br><br><br><br>
<div class="dragger"> Some other text to drag </div>
<br><br><br><br><br><br>
<div class="dragger"> <img src="http://www.mpklein.co.uk/images/phoenix.jpg"></img> </div>
</body>
</html>

Resizing A Div By Mouse Drag

Similar Tutorials

View Content

can any one say me how to resize a div by mouse dragging in javascript........
..first of all is it possible or not?? and if so , what should i do......

Drag And Drop An Object

Similar Tutorials

View Content

I can't figure out how to drag and drop. I've followed some tutorials but no success. I use Firefox as my browser. Any tutorial you would recommend?

Stopping Selection On Drag

Similar Tutorials

View Content

as I have no idea if this will boil down to a JS problem, or a CSS problem, I've posted this to both forums. If some enterprising moderator would like to consolidate them, have at ye!

Using javascript I've made a simple drag and drop interface for a backend component. Elements are dragged from a list at right into a main area. The elements are organized as a list (<ul><li>). Each has a mouse down listener which flicks on the visibility of a div (that mirrors the appearance of the named <li>) and then follows the mouse as long as it is needed.

All is peachy...

... BUT THEN !!! ...

As one might predict, the dragging action selects whatever content comes between the list item where the drag started and the placement where the drag ends. It's ugly and distracting; furthermore it changes my nice 'pointer' cursor to a 'text' cursor.

I don't want to have to disable selecting for the entire page (nor do I know of a slick, elegant way to accomplish this) and I've tried all sorts of other hackery: cover up divs were especially fail-tastic.

Hoping someone out there's cleverness gland can help me with this one.

Excerpt from the site below to give an idea of layout:

elements of the orange list at right get dragged into the main area in the middle

I can't link to the site directly, sorry, I don't have a version ready that doesn't modify existing databases.

Thanks,

-S

as I have no idea if this will boil down to a JS problem, or a CSS problem, I've posted this to both forums. If some enterprising moderator would like to consolidate them, have at ye!
CSS thread link

Looping And Drag And Drop

Similar Tutorials

View Content

I am trying to loop through each area and checking if they match the image class number then it should drop in correct place. You can see that i commented out the loop and if statement because it doesn't work. Can anyone shine light on this because i'm frustrated with this issue.

Code:

$(document).ready(function(){
   
         var images = $('#clothes').find('img');
         var drop = $('#dress').find('area');

        for(var a=0; a < images.length; a++){
              $( images[a] ).draggable( );
                    //alert($(images[i]).hasClass("20"));
                    if($(images[a]).hasClass("20")){
                        $( images[a] ).draggable({ revert: 'valid' });
                        //alert("WRONG");
                    }
                   
                    else{
                        $( images[a] ).draggable({ revert: 'invalid' });
                          }
               
                /*for(var b=0; b < drop.length; b++){
                     $( drop[k]).droppable({
                            activeClass: "ui-state-hover",
                            hoverClass: "ui-state-active",
                            drop: function( event, ui ) {
                                $( this ).addClass( "ui-state-highlight" )
                               
                                /*if($(images[a]).attr('class').split(" ")[0] == $(drop[b]).attr('class')){
                                    alert("RIGHT");
                                    $(images[a]).draggable({ revert: 'invalid' });
                                   
                                }
                                else if($(images[a]).hasClass("20")){
                                    $( images[a] ).draggable({ revert: 'valid' });
                                }
                    //alert("a = " + $(images[a]).attr('class').split(" ")[0] + " b = " + $(drop[b]).attr('class'));
                               
                            }
                    });
                }*/
          }
         
         
          
           
        });

Drag On Drop Into Text

Similar Tutorials

View Content

Hi all,

I'm currently developing a drag on drag editor at work.

I have a list of fields on the right which I drag onto a form and it adds the input object onto the form. I also have editable divs which I using to add text as a kind of very scaled down RTE.

Rather than dragging a field the form, I could use the field as display only so I would like to embed this into the editable div as part the text.

I'm thinking I could do something like facebook does where if I type a "@" then I could create a auto suggest to embed a field value into text but what i would like to do is drag the field into the text.

So my question is this, is it possible to know the positon in the text of where I performed the drop, I suppose that would be where the mouseup occurs?

Any thoughts much appericated,
Thanks,
Dale

Help With Drag And Drop Links

Similar Tutorials

View Content

I am creating a website that runs an iFrame with website displayed in it. On that page, in the frame, there is a simple href hyperlink. I have a text element next to the iFrame that is acting as an address bar. I want to be able to drag the link from the frame to the address bar and ondrop have the iframe redirect to the dragged link url. Here is the code I have
Code:

<html>
<head>
<style>
#NetFrame {
border:2px solid #0A9;
height:650px;
width:75%;
Position: absolute;
top:2%;
left:25%;

}
#url {
width:25%;
height:650px;
}
</style>
<script type="text/javascript">
function getUrl() {
var source = document.getElementById('url').value;
loadUrl(source);
}
function loadUrl(source) {
var showUrl = document.getElementById('NetFrame');

NetFrame.src = source;

document.getElementById('url').value="";
}
</script>
</head>
<body>
<form>
<input type="text" id="url" onDragEnd="getUrl()"/>

</form>
<iframe src="link1.html" id="NetFrame"> </iframe>
</body>
</html>

The iFrame is called NetFrame and the Text element is url. I have not coded in 6 years and am stuck here. Please Help, and be specific you are explaining to an absolute novice.

Javascript Drag And Drop Help

Similar Tutorials

View Content

Hi,
I have the following code for drag and drop objects in any page.

My target:
I want to be able to drag and drop the advertisement images that come on top of the page. It works most of the time, but sometime page crashes. I use google chrome as a bookmarklet.

Code:
Code:

javascript:var d=document,b=d.body,i="innerHTML",s="style",p="position",a="absolute",r="relative",w1="offsetWidth",w2="width",h1="offsetHeight",h2="height",t1="offsetTop",t2="top",l1="offsetLeft",l2="left",drag=false;function down(e){drag=true;z=event.srcElement;z[s][p]=r;x=event.clientX;y=event.clientY;zx=z[l1];zy=z[t1];d.onmousemove=move}function up(e){drag=false;}function move(e){if(drag){z[s][l2]=zx+event.clientX-x;z[s][t2]=zy+event.clientY-y}}document.onmousedown=down;document.onmouseup=up;

Any improvements in the code is appreciated.
Does anybody have a advanced better code, because I am just medium in javascript.

Drag & Drop Imagers (again)

Similar Tutorials

View Content

I'm sure that you must be sick and tired of the drag & drop question and for that I apologise but I have not been able to find an answer to this particular requirement despite much reading.

The object of this task is to create a very limited editor in javascript.

I have a page with two DIVs in columns. The left DIV holds text and the right holds several images. The DIVs are populated as the page loads.

There are a couple of buttons used to apply styles to the selected text, heading or description. Looking like this :-
Code:

<div id="details">
  <p class="heading">text</p>
  <p class="desc">text</p>
  <p class="heading">text</p>
  <p class="desc">text</p>
  <p class="heading">text</p>
  <p class="desc">text</p>
</div>

Once the text has been formatted as above, I want to be able to drag the images into place in the text like this :-
Code:

<div id="details">
  <p class="heading">text</p>
  <p class="desc">text</p>
  <p class="heading"><img src="photo.jpg">text</p>
  <p class="desc">text</p>
  <p class="heading">text</p>
  <p class="desc">text</p>
</div>

The images in the left DIV have been given float right in css.

I have not been able to find a method of placing that image in position like that.

I guess it doesn't have to be drag&drop, but that would be far easer for the operator.

Can anyone point me in the right direction please but I beg, please be gentle I am a newbie at javascript.

Many thanks.

Edited to add: This only needs to work in FF.

Drag/ Drop Homepage

Similar Tutorials

View Content

Hi Folks,

I've been trying to create a drag drop homepage like www.bbc.co.uk, google etc.

I can get the basic drag and drop to work, but I can't get the layout to save anywhere. Can anyone please help?

Here is what I have so far.

http://www.sandwell.nhs.uk/test/test.html

It uses Glow, which doesn't have any cookie functions apparantly.

Could anyone please help me save my layout, any example code would be much appreciated

Manu thanks