Invoking a javascript function

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"
    <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">
<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>
<DIV class="page-wrap ">
    <DIV class="boxes">
        <DIV class="top-boxes editor-parent">
            <! 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 class="editor-actions-right">
            <! is the vertical resizer between first and second DIV-->
            <DIV class="editor-resizer" id="editor-resizer-html">
            <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)">
<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>
Who is Participating?
Slick812Connect With a Mentor Commented:
some javascript to consider, this does a loosely connected drag resize -
<!doctype html><html lang="en"><head><title>Drag Drop</title><style>
/* Below sets the style for the three drag elements */
.dragBox {position: relative;}
#reSizer {width: 194px; 
  height: 210px; 
  border:1px solid #ba0;
#drag {position: absolute; 
  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;
  }else if(document.body &&(document.body.scrollLeft || document.body.scrollTop)){
  }else if(document.documentElement &&(document.documentElement.scrollLeft || document.documentElement.scrollTop)){
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();

// 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){
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

/* ]]> */</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
var sho =id2ob("od1");
/* ]]> */</script>

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.
Andrew DerseIT ManagerCommented:
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.
COBOLdinosaurConnect With a Mentor Commented:
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:

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

Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

Slick812Connect With a Mentor Commented:
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){ 
     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
Kiran Paul VJConnect With a Mentor Computer EngineerCommented:
Hi bravotango,
there must be something else invoking function

I think you are looking for this

hope that helps,
bravotangoAuthor Commented:
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?
bravotangoAuthor Commented:
Herewith the everypage javascript file.
Alicia St RoseOwner & Principle Developer/DesignerCommented:
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!
ambienceConnect With a Mentor Commented:
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.
Slick812Connect With a Mentor Commented:
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?
bravotangoAuthor Commented:
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.
@ 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?
bravotangoAuthor Commented:
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.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.