Solved

Invoking a javascript function

Posted on 2015-01-31
13
242 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
13 Comments
 
LVL 13

Expert Comment

by:NUKIT
Comment Utility
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 84 total points
Comment Utility
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 33

Assisted Solution

by:Slick812
Slick812 earned 250 total points
Comment Utility
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
 
LVL 16

Assisted Solution

by:kiranvj
kiranvj earned 83 total points
Comment Utility
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
Comment Utility
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
Comment Utility
Herewith the everypage javascript file.
everypage.js
0
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
LVL 7

Expert Comment

by:Alicia St Rose
Comment Utility
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 83 total points
Comment Utility
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 33

Assisted Solution

by:Slick812
Slick812 earned 250 total points
Comment Utility
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 33

Accepted Solution

by:
Slick812 earned 250 total points
Comment Utility
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
Comment Utility
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 33

Expert Comment

by:Slick812
Comment Utility
@ 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
Comment Utility
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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

771 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now