UrbanDweller

Has anyone actually created something like this successfully without jquery?

Cool ill give that a go, so what understand from that is i create a document.onmousedown & onmouseup and detect inside the down function see if cropDiv was clicked in the process. In theory this will keep my current code working too as the moveable div's top left style depends on the difference in location from wen i called mousedown and compare it to the current mouse position inside the parent div in the mousemove function.

I know i could just use jquery but I dont know how to write jquery plus i like the feeling of coding this independently. I have the div moving fine inside of the parent div just cant cancel the mousedown function which moves the div which im sure is quite simple to end. The whole idea of this is for cropping images for thumbnails for a friends shop.

Hey, Im trying to create a div which is movable only inside its parent div but before i can really test my code to see if it wants to keep to the restrictions i need to be able to cancel the mousedown/move mouse event that make the child div move. At the moment I can release my mouse and the div still follows it, the code is a bit long but the mouse event structure that calls the needed functions is like so.. Thanks team eventHandling(); cropDiv = document.getElementById("cropDiv"); // is global variable created in previous function that creates div dimensions. function eventHandling(){ cropDiv.onmousedown = OnMouseDown; cropDiv.onmouseup = OnMouseUp; } function OnMouseUp(e){ document.onmousemove = null; document.onmousemove = null; document.onmouseup = null; return false; } function OnMouseDown(e){ //Mouse movement code "Not relevant" cropDiv.onmousemove = OnMouseMove; }

// Call Function my_function_name(var1, var2); //Create Variables var var1= "Variables"; var var2 = "Joined"; // Note that the function call can have different variable names the to the function itself ie var1 = t1 and var2 = t2 inside the called function. function my_function_name(t1,t2){ var t3 = t1+" "+t2; // popup will display "Variables Joined" alert(t3); } </script> creating t3 shows you how to join variables with the + sign and " " displays the gap between the variables or they would join together.

worked like a charm, thanks for that

Thanks for the reply, All the variables have been called globally just to reduce clutter, but imgDiv is the name of the div i want to get the mouse xy position.

Hey, I have two variables which both hold different integer values that i would like to use addition on and make the answer into a new variable but due to js function that adds variables together with a + I cant seem to to use math addition on the two variables. Note: One variable is an array but in previous function subtraction worked fine in same situation Below is the snippet of the code that wont work. Thanks team function OnMouseDown(e){ imgDivPos = new imagePosition(imgDiv); mCurrentX = e.pageX + imgDivPos[0]; mCurrentY = e.pageY + imgDivPos[1]; alert(mCurrentY); cropDiv.onmousemove = OnMouseMove; } function imagePosition(param){ var x=0, y=0; x = param.offsetLeft; y = param.offsetTop; this[0] = x; this[1] = y; }

By the way im pretty sure search engines like google/yahoo dont use meta keyword anymore.

Looks fine to me, all I can suggest is to debug the script by calling an alert with percentage variable in that function to see if the script even makes it to it?

Hey man I'm not a fan of jquery when I'm trying to advance my javascript coding but thanks for the link I would be lying if i didnt think of taking that route though if it got too hard. I have go all the mouse positioning figured out inside the required divs and got the div moving using onmousedown function which then fires onmousemove of the div but I cant figure out how to stop the div moving once onmouseup is fired. I dont know how to stop the mousedown & mousemove function from firing after onmouseup event is done any thoughts. Thanks a lot // Mouse events function eventHandling(){ var movingDiv = document.getElementById("movingDiv"); // Mouse move is fired inside downFunction movingDiv.onmousedown = downFunction; movingDiv.onmouseup = upFunction; } window.onload = function(){ eventHandling(); }

Hey, I havent touched mouse events yet and cant find any good tutorials with mouse event etc related syntax. I need to get the mouse x & y position while over a div and be able to move a child div within the parent div with the mouse. <div id="parentDiv"> <div id="childDiv"> </div> </div> Thanks

Hey, I havent done much in the way off css manipluation with javascript but one way I did it was by... document.getElementById(errors).className = "ClassID"; So you have another css class with the changes you want then change the elements class. Longer way just i havent used much js style etc.

Yeah thats just what i was thinking of doing too. I know that its more for functionality, as so many web developers are using js in there sites these day for forms etc you would hope for the users sake that they had it automaticlly when browsing as to not inhibit their browsing experience

Ok, i assumed all you wanted to do now was retrieve a value from a option tag and check the value is yes? I just gave you a dynamic way of check but you can make it more direct by removing the for loop. PS, More direct approach by selecting option from its array. var s1 = document.getElementById("s1") s1.onchange = function(){ if (s1.options[1].selected){ var optionVar = s1.options[1].value; }else{ var optionVar = null; } } The 1 corresponds the position of the option inside the select tag starting a 0.

Your issue is that the statement below the element doesnt have a value as you have targetted the select tag and not the options tags inside it do. if (document.getElementById("agree").value == "Yes") just implement my snippet of code into your script and it will work. Basically it runs through all the option tags inside the select with a for loop and IF the option is selected and the value is value yes only then will the code go on or in my case alert u.

Just going to throw it out there but maybe it doesn't support style.display table_row etc? have you tried display block none etc or you could ad classes to affected rows with a hidden and displayed class that u could change etc?

Heres a way to check select options and only alerts if yes is selected <html> <head> <title>Untitled Document</title> <script type="text/javascript"> window.onload = function(){ var s1 = document.getElementById("s1") s1.onchange = function(){ for(var i = 0; i < s1.options.length; i++){ if(s1.options[i].selected && s1.options[i].value == "yes"){ value = s1.options[i].value; alert(value); } } } } </script> </head> <body> <form> <select id="s1"> <option>---</option> <option value="yes">yes</option> <option>no</option> </select> </form> </body> </html>

are u sure that "disabled" attribute works correctly?

Try AJAX, Im not totaly sure but js and php dont work hand in hand like that.

Why dont they build javascript into browsers cause i keep thinking about disabling javascript while using a form could disrupt js validation.

Php is far more secure and I can easily disable the page if post variables arent valid that are required for the form.

Hey, What i mean by this is if i have a form that needs information before form pages is requested i dont want people to be able to access form by directly accessing page from its url. If after form is sent that a error will pop up if user clicks back in browser etc? I just want form page to be accessed only by page1. do i need to create a annon id for each user? or just a function that checks previous page url somehow? "page1->Form>page3" Thanks

WOOT I solved it. For anyone who wants to know lol it was the pattern attribute i added to inputs was clashing with some html/browser syntax. The reason the page was working with at the last div was due to it not checking the inputs with pattern attribute.

Note: Form submits if u change the 1st div class to disabledForm and 4th too activeForm and display submit. This allows the form to submit without going through all hidden divs input if i don't validate them.