D4mations.com

JavaScript Video Tutorial Pt 2



Best JavaScript Book : http://goo.gl/zodRHD

I teach you how to monitor events and react to them dynamically in this JavaScript Video Tutorial. Create Inline JavaScript : Change CSS Styling : Change Any Element Dynamically : Monitor Everything the User Does : Tons More!!!

Code is Here: http://bit.ly/fNbPwZ

Original source

d4mer

, , , , , , ,

43 responses to “JavaScript Video Tutorial Pt 2”

  4. What did i do wrong with the mouse movement detection??????

    <!DOCTYPE html>

    <html>
    <head>
    <title>Javascript tutorial</title>

    </head>

    <body>
    <noscript>
    <h3>This site requires JavaScript</h3>
    </noscript>

    <form name="formex">
    <p>Text input</p>
    <input type="text" name="mousex" />Mouse X Position<br />
    <input type="text" name="mousey" />Mouse Y Position<br />
    </form>

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

    var mie = (navigator.appName == "Microsoft Internet Explorer")?true:false;

    if (!mie)
    {
    document.captureEvent(Event.MOUSEMOVE);
    document.captureEvent(Event.MOUSEDOWN);
    }

    document.onmousemove = mousePos();
    document.onmousedown = mouseClicked();
    var mouseClick = 0;
    var keyClicked = 0;
    var mouseX = 0;
    var mouseY = 0;

    function mousePos(e)
    {
    if (!mie)
    {
    mouseX = e.pageX;
    mouseY = e.pageY;
    }
    else
    {
    mouseX = event.clientX + document.body.scrollLeft;
    mouseY = event.clientY + document.body.scrollTop;
    }

    document.formex.mousex.value = mouseX;
    document.formex.mousey.value = mouseY;
    return true;
    }

    </script>

  10. Mouse tracking isn't working for me. Whats up wit dat. Everything else worked wonderfully. Thanks for your tutorials Derek.

    <form name="formex2">
    <p>formex2 right below</p>
    <input type="text" name="mousex" />Mouse X position<br />
    <input type="text" name="mousey" />Mouse Y position<br />
    </form>

    var mie = (navigator.appName == "microsoft IE")?true:false;

    if (!mie)
    {
    document.captureEvents(Event.MOUSEMOVE);
    document.captureEvents(Event.MOUSEDOWN);
    }

    document.onmousemove = mousePos();
    document.onmousedown = mouseClicked();
    var mouseClick = 0;
    var keyClicked = 0;
    var mouseX = 0;
    var mouseY = 0;

    function mousePos(e)
    {
    if (!mie)
    {
    mouseX = e.pageX;
    mouseY = e.pageY;
    }
    else
    {
    mouseX = event.clientX + document.body.scrollLeft;
    mouseY = event.clientY + document.body.scrollTop;
    }

    document.formex2.mousex.value = mouseX;
    document.formex2.mousey.value = mouseY;
    return true;
    }

  14. Love the way you get to the point in every tutorial you make. I'm tired of watching tutorials that drag on and on never getting to the point. Great job Derek, you're awesome! 🙂

  15. In my case document.littlebrain yields 'undefined' result (5:10), was this element access style dismantled since 2011 or am I missing somthing?

    I've had to work around, tweaked onClick event this way:
    onClick="alertme(this);"

    and alertme function respectively:
    function alertme(ele)
    {
    alertmsg = ele.src + "nHeight: " + ele.height + "nWidth: " + ele.width;
    alert(alertmsg);
    return true;
    }

    At 21:20 you can also access key value directly (in !mie):
    keyClicked = e.key;

  16. This will work

    var mie=(navigator.appName=="Microsoft Internet Explorer")? true : false;
    if(!mie)

    document.captureEvents(Event.MOUSEMOVE);

    document.onmousemove=mousePos;
    var mouseX=0;
    var mouseY=0;
    function mousePos(e){
    if(!mie){
    mouseX=e.pageX;
    mouseY=e.pageY;
    }else{
    mouseX=event.clientX+document.body.scrollLeft;
    mouseY=event.clientY+document.body.scrollTop;
    }
    document.myform.mousex.value=mouseX;
    document.myform.mousey.value=mouseY;
    return true;
    }

  18. what is the reason that you create a function called alertme() only for alertmsg ? i mean in my case without creating function
    alertme working properly onDblclick('….') even in <p>
    can explain it little more plz

  19. in my case alertmsg doesn't work if i put the onClick="alertme()" or other , only work onClick="click()"
    if i put the onClick="alertme()" or other it shows the image path and image height and width. what 's wrong with mine ?

  26. Two questions:

    1) Why is the semicolon appearing BEFORE the ending double quote in the function calls? Example: <img src="images/LittleBrain.png" id="littlebrain" onClick="alertme();" onDblClick="alert('You Double Clicked');"/>

    2) Like many commenters, I could not get the alertme(); function to work. I changed it FROM document.littlebrain.src to littlebrain.src or document.getElementById("little brain").src Both changes worked. EXCEPT, now that single click works, now double click doesn't engage.

    Please help.

  31. Around 18:37 I noticed that for the MIE logic, instead of using the passed in "e" parameter that you updated later on you use "event". Is "event" a built in global variable? And is it used only for MIE or for all browsers? Thanks for making these videos btw, I find them to be the best online tutorials and I've tried other sources including CodeSchool and CodeAcademy

  38. unable to capture mouse positions.
    also at time 19:16 there are brackets at document.onmousemove=mousePos();
    and in the next frame , where did the brackets go ??
    It's like document.onmousemove=mousePos;
    you didn't remove the brackets , at least didnt show while removing them,
    whatever you did , isn't working here, my code is exactly same as yours and I'm using google chrome.

    also what is e ?
    when you're calling mousePos()
    you're not passing anything to it, and also you're calling a function without putting on parenthesis , mousePos.

    I don't understand how this is working on your PC.

  43. Nice video 🙂 tnx only one thing :
    – instead of document.littlebrain.src write: document.getElementById("littlebrain").src because without getElementById javascript doesn't know what element you want. Ofc you need document.getElementById("littlebrain").height and for width the same thing.

Leave a Reply