Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Invoking a javascript function

Posted on 2015-01-31
13
Medium Priority
?
277 Views
Last Modified: 2015-02-05
When all is lost and I think I have googled every avenue I come back to the experts.

My question is about javascript and how functions get invoked.

I know all about onclick and onmousedown etc but there must be something else invoking functions and I can't get an answer anywhere.

It would be pointless posting the javascript contents as that doesn't show anything.

I saved a web page complete from the internet and have all the css and js files etc.

What I was after was the ability to drag and resize a DIV on the right hand side. I have got everything I need from the files into my own project and it is all working. I am just having this problem understanding how.

OK here is a stripped down version of my html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <META
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <TITLE>Vertical center with only 3 lines of CSS</TITLE>
    <link type="text/css" rel="stylesheet" href="NEW.css">
    <LINK href="global.css" media="all" rel="stylesheet" type="text/css">
    <link href="editor.css" media="all" rel="stylesheet" type="text/css"/>
    <LINK href="top.css" media="screen" rel="stylesheet" type="text/css">
</head>
<body class="editor state-htmlOn-cssOn-jsOn preload prelayout layout-&#10; logged-out&#10;">

<HEADER class="main-header group" id="main-header">
    <DIV class="header-left">
        <H1 class="logo header-chunk">
          <p> CodePen</p>
        </H1>
    </DIV>
</HEADER>
<DIV class="page-wrap ">
    <DIV class="boxes">
        <DIV class="top-boxes editor-parent">
            <!--..here is the heading of the first DIV-->
            <DIV class="box" id="box-html" > <!--..deleting this id stopped the resizer working-->
                <DIV class="powers">
                  <DIV class="editor-actions-left">
                  </DIV>
                    <DIV class="editor-actions-right">
                    </DIV>
                </DIV>
            </DIV>
            <!--...here is the vertical resizer between first and second DIV-->
            <DIV class="editor-resizer" id="editor-resizer-html">
            </DIV>    
            <DIV class="box" id="box-css" data-type="css">
                <DIV class="powers">
                    <DIV class="editor-actions-left">
                        <iframe class="object" name="view_dgf" height="100%" width="95%" frameborder="0"; marginwidth="0"; id="view_dgf" src="Cover.html"
                                style="overflow:hidden; background:rgb(198, 221, 194)">
                        </iframe>
                  </DIV>
                </DIV>
            </DIV>
           
        </DIV>
    </DIV>
</DIV>
<script src="everypage.js" type="text/javascript"></script>
<script src="libs.js" type="text/javascript"></script>
<script src="layout-top.js" type="text/javascript"></script>
</body>
</html>
0
Comment
Question by:bravotango
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
13 Comments
 
LVL 13

Expert Comment

by:Andrew Derse
ID: 40582527
Actually, we would need to see the .js pages in this case to see what function is being called and how.  More than likely it's an onClick or onmousedown...but we can't determine that until we see the code that's calling this to be resized.

Just curious here, it's working, and you are familiar with the onClick and onmousedown, but aren't fully understanding how the box is being resized?  In order to answer that, we will need to see the .js files to show you the code that's resizing it.
0
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 336 total points
ID: 40582802
If it is not apparent how an event is being triggered, it is probably because it has been attached to the specific element with the addEventListener() method.

The details of how that can be used can be found at:
https://developer.mozilla.org/en/docs/Web/API/EventTarget.addEventListener

It can be applied to virtually any element for any standard event, and is very frequently used in modern development to get event triggers out of the markup where it is more difficult to maintain.  Old versions of IE prior to IE8 do not support it, but have an alternative attachEvent() method

Cd&
0
 
LVL 34

Assisted Solution

by:Slick812
Slick812 earned 1000 total points
ID: 40582815
greetings bravotango, , I understand what you ask about "there must be something else invoking functions". Since this is a drag-drop page operation and NOT a Touch-Click operation, the javascript for a user ACTION (drag in this case), is more than a single event (like one time touch-click). I have coded JS drag-drop and other event driven code, and for a drag drop the JS uses a line like -
    document.getElementById("editor-resizer-html").onmousedown = function(ev){ 
       document.onmousedown=fseFuc;
       mousePos=curPos(ev);
      mAry[1]=mousePos.x-parseInt(mAry[3].style.left+0);
      mAry[2]=mousePos.y-parseInt(mAry[3].style.top+0);
      document.onmousemove=mouseMove;
     return false;
      }

Open in new window

see that the drag-bar has been set the onmousedown() to a function to do work on the drag drop, the next lines do work like get and record the current cursor position to be used in the mouseMove function.

In JS you can set and UnSet almost any (maybe all) functions for almost any event of the window, mouse event, scroll event etc., You can also, change and modify any existing function, to new and different actions at any time. You can prevent an event from bubbling up the dom container chain.

A short answer, for your "this problem understanding how", might be , in JS you write a line to change an event (global event, one element event) to use one function as -
     document.onmousemove=mouseMove; // global, all of document
     document.getElementById("id1").onmousedown = function(ev){ } // one element
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 16

Assisted Solution

by:Kiran Paul VJ
Kiran Paul VJ earned 332 total points
ID: 40582900
Hi bravotango,
there must be something else invoking function

I think you are looking for this http://en.wikipedia.org/wiki/Unobtrusive_JavaScript

hope that helps,
kiranvj
0
 

Author Comment

by:bravotango
ID: 40583017
I am overwhelmed by the number of responses and they are all very helpful.
I should say I am a silly 77 year old bugger trying to keep my mind active by learning how javascript works so this is very helpful to know that there is an unobtrusive way for javascript to work aside from functions being called from html. I thought the long/multiple class reference included in the body tag might have something to do with it but after deleting that line everything still works including the resizer.
I can see that there are references to addEventListener, mousedown in everypage.js and libs.js, especially everypage.js. Do I post the code for everypage.js here with copy and paste or as a file?
0
 

Author Comment

by:bravotango
ID: 40583036
Herewith the everypage javascript file.
everypage.js
0
 
LVL 8

Expert Comment

by:Alicia St Rose
ID: 40583160
I should say I am a silly 77 year old bugger trying to keep my mind active
Sir or Madame, I demand that you remove the words "silly" and "bugger" from this inspiring line of text!
Kudos for you!
0
 
LVL 22

Assisted Solution

by:ambience
ambience earned 332 total points
ID: 40583728
The js that you attached is not the one. I suggest that you search for the string "box-html" in each of the js files referenced. This should give you the starting point of the logic. You should expect some DOM manipulation as well as addition of events to track the drag and drop operation etc.

Also, you can upload the HTML and JS to jsbin, jsifddle or similar sites that allow for quick demo of applications and share the url here. This also makes it possible for other people to have a look at it and modify it. A lot of the time, thats the fastest way to get JS related answers.
0
 
LVL 34

Assisted Solution

by:Slick812
Slick812 earned 1000 total points
ID: 40584368
bravotango -  you ask - "Do I post the code for everypage.js here with copy and paste or as a file?",, for any "Code" that is over, say 10 - 20 kilobytes , you can effectively do as you did and post as a full file, If it is less code and you need to post here to view, DO NOT do it like you did in your question, Text in a comment IS NOT preserved very well for formatting, You should click on the Code feature on the TOP of the comment, and place your code inside the BB [ ] [/ ] tags for code.

Not really sure what you are hoping to "GET" from us experts, as an answer to your main question - "Invoking a javascript function"  - and your other inquiries -  "I am just having this problem understanding how" and  "I thought the long/multiple class reference included in the body tag might have something to do with it" etc.

Javascript is very useful for web page development, and I looked at the everypage.js you posted. This appears to be a javascript framework, maybe similar to MooTools or Jquery, as it contains code actions for getting elements by class name and a full AJAX implementation. But this is much to complicated for a beginner to learn anything from it, in my opinion. So do you want to do this drag-drop JS code on your own ? , or do you need us to explain how this complicated JS drag-drop page goes through code actions to get a effective result?
0
 
LVL 34

Accepted Solution

by:
Slick812 earned 1000 total points
ID: 40585330
some javascript to consider, this does a loosely connected drag resize -
<!doctype html><html lang="en"><head><title>Drag Drop</title><style>
body{background:#e3f7ff;}
/* Below sets the style for the three drag elements */
.dragBox {position: relative;}
#reSizer {width: 194px; 
  height: 210px; 
  border:1px solid #ba0;
  }
#drag {position: absolute; 
  top:1px; 
  left:194px; 
  width: 4px; 
  height: 210px; 
  background: #ba0; 
  cursor: ew-resize;
  }
</style><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<script>/* <![CDATA[ */
// You Must Record, On-Off, positions anb maybe element dom object
var mAry = [0, 1, 194, false, false];

function id2ob(elmt1){return document.getElementById(elmt1);}
// reduces write of document.getElementById() to id2ob( )
if(document.all){id2obj=function(elmt1){return document.all[elmt1];}}

function falseFuc(){return false;}

// have to do cross browser scrool position
function scrolPos(){var sx=0,sy=0;
if(typeof(window.pageYOffset)=='number'){
  sy=window.pageYOffset;
  sx=window.pageXOffset;
  }else if(document.body &&(document.body.scrollLeft || document.body.scrollTop)){
  sy=document.body.scrollTop;
  sx=document.body.scrollLeft;
  }else if(document.documentElement &&(document.documentElement.scrollLeft || document.documentElement.scrollTop)){
  sy=document.documentElement.scrollTop;
  sx=document.documentElement.scrollLeft;}
return [sx,sy];
}

// have to do cross browser cursor position
function curPos(ev){
if(ev.pageX||ev.pageY) return{x:ev.pageX,y:ev.pageY}
var sp=scrolPos();
return{x:ev.clientX+sp[0]-document.body.clientLeft,
  y:ev.clientY+sp[1]-document.body.clientTop}
}

// This doDown1 sets the offset Cursor X position
function doDown1(ev){
mAry[0] = 1; // turn ON the cursor drag
mousePos = curPos(ev);
mAry[1] = mousePos.x - parseInt(mAry[4].style.left+0);
document.onmousemove = mouseMove;// set global mouse move event
document.onmousedown = falseFuc; // prevent another mouse Down event
return false;
}

// in mouseMove() get new cursor X position
function mouseMove(ev){
ev=ev||window.event;
if(mAry[0]==1){ // test if dragging
  var mousePos=curPos(ev);
  mAry[2]=mousePos.x-mAry[1];  // set NEW cursor X offset
  sho.innerHTML = mAry[2]+" mouseX = "+mousePos.x+" mAry "+mAry[1];
  if (mAry[2] < 44) return; // prevent from less than 44
  if (mAry[2] > 350) return; // prevent from more than 350
  mAry[4].style.left=mAry[2]+"px";// adjust the left position
  mAry[3].style.width= mAry[2]+"px";// adjust the width
  return false; // prevent bubling
  }
}

function mouseUp(){
if(mAry[0]==1){ // test if dragging
  document.onmousedown=null; // null will erase (invalidate) a set function
  document.onmousemove=null; // null makes it go back to normal
  mAry[0]=0; // turn OFF drag
  }
}
document.onmouseup=mouseUp;

/* ]]> */</script>
</head><body bgcolor="#e3f7ff"><h3>Drag to Resize</h3>
<div class="dragBox">
<div id="drag" onmousedown="doDown1(event)"></div>
<div id="reSizer">This will Resize when<br /> you drag the right side -></div>
</div><div id="od1">mouse Pos</div>

<script>/* <![CDATA[ */
mAry[3] = id2ob("reSizer");
mAry[4] = id2ob("drag");
// for javascript operations you MUST set the initial left
// even though it's allready in the Style
mAry[4].style.left="194px";
var sho =id2ob("od1");
/* ]]> */</script>
</body></html>

Open in new window

There are other ways, using other methods, and alternate event handlers like addEventListener() .
this seems to be as straight foward as I can make it.
0
 

Author Comment

by:bravotango
ID: 40585478
All these comments have been really helpful especially the code provided by Slick812. That's really nice for a beginner and easier to understand than the code I was dealing with. However my main question has also been answered and confirmation that Javascript can be invoked in mysterious ways. I am starting to get a grip on that now by watching the action in Firefox debugger.
So many thanks for the comments and help. I am forever grateful.
0
 
LVL 34

Expert Comment

by:Slick812
ID: 40586608
@ bravotango, , thanks 4 points, there are hundreds maybe thousands of sites with javascript instuctions, how-too, tutorial, tips&tricks, optimization, etc. You might ask a question on EE about what are good sites to get javascript skills.
But I always tell developers to modify and trouble shoot, code blocks to get an undestanding on how and why the javascript system methods work, and how you can use options to get different results. Change and experiment.

For instance can you change my drag code to do vertical sizing?
0
 

Author Comment

by:bravotango
ID: 40592887
I sort of like that resizer the way it is so instead of breaking it I'll make a copy and then making it vertical can be my next project.
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

662 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question