bravotango
asked on
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"
"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- logged-out ">
<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-righ t">
</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"></s cript>
<script src="libs.js" type="text/javascript"></s cript>
<script src="layout-top.js" type="text/javascript"></s cript>
</body>
</html>
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- logged-out ">
<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-righ
</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"></s
<script src="libs.js" type="text/javascript"></s
<script src="layout-top.js" type="text/javascript"></s
</body>
</html>
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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?
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?
ASKER
Herewith the everypage javascript file.
everypage.js
everypage.js
I should say I am a silly 77 year old bugger trying to keep my mind activeSir or Madame, I demand that you remove the words "silly" and "bugger" from this inspiring line of text!
Kudos for you!
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.
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?
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?
ASKER
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.
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.