Link to home
Start Free TrialLog in
Avatar of bravotango
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-&#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>
Avatar of Carlos Llanos
Carlos Llanos
Flag of United States of America image

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.
SOLUTION
Avatar of COBOLdinosaur
COBOLdinosaur
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Avatar of Kiran Paul VJ
Kiran Paul VJ
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of bravotango
bravotango

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?
Herewith the everypage javascript file.
everypage.js
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!
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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?
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.