Jquery Site Setup (Positioning) 3 of 4

Posted on Sunday, May 4, 2014

This tutorial is going to be split into 4 sections.  The goal of this tutorial is to create a simple web site that has a top bar with a static Height, a left tool bar with a static width, and a variable "display area" which will take up the rest of the space.

This tutorial will start where the last tutorial finished were the problem
Of resizing was solved using the underscore library.  Now it's time to add some buttons and create some ajaxiness


I also made a video of this tutorial check it out at
http://youtu.be/iWnn4IYQUgA

The other tutorials can be found here
1st http://www.whiteboardcoder.com/2014/04/jquery-site-setup-positioning-1-of-4.html
2nd http://www.whiteboardcoder.com/2014/05/jquery-site-setup-positioning-2-of-4.html
4th http://www.whiteboardcoder.com/2014/05/jquery-site-setup-positioning-4-of-4.html

Icons


Before we start we need some icons

I use http://www.iconsdb.com/ [1] for icons most are free to use in your web site.

Create a folder to put the images in


> mkdir img

And use wget to download the following icons



> cd img
> wget http://www.iconsdb.com/icons/download/white/handshake-128.png
> wget http://www.iconsdb.com/icons/download/white/plus-128.png
> wget http://www.iconsdb.com/icons/download/white/youtube-2-128.png
> cd ..

Edit the index.html to add the icons in the nav-left element


> vi index.html

Update it to the following



<html>
<head>
<link rel="stylesheet" href="css/main.css" type="text/css"/>
</head>
<body>

<div id="nav">
  <div id="nav-top">
    <h1>This is the Top Area</h1>
  </div>
  <div id="nav-left-outer">
     <div id="nav-left">
      <img id="nav-1" src="img/handshake-128.png" class="nav-left"/>
      <img id="nav-2" src="img/plus-128.png" class="nav-left"/>
      <img id="nav-3" src="img/youtube-2-128.png" class="nav-left"/>
     </div>
  </div>
  <div id="nav-display-area-outer">
    <div id="nav-display-area">
        <h1>Resizeable Display Area</h1>
    </div>
  </div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="js/underscore.js"></script>
<script src="js/main.js"></script>

</body>
</html>


Reload the page




The icons are now in the nav-left element.

CSS for icons


Update the css to center these a little better by adjusting their margins.


> vi css/nav.css

Update this file to the following



html, body {
margin: 0;
background-color:yellow;
}

#nav{
position:relative
background-color:red;
height:100%;
}

#nav-top{
position:absolute;
top:0px;
right:0px;
height:200px;
width:100%;
background-color:#f58a22;
z-index:2;
}

#nav-left-outer{
position:absolute;
top:0px;
left:0px;
width:200px;
height:100%;
background-color:#000000;
z-index:1;
}

#nav-left{
position:absolute;
top:200px;
left:0px;
background-color:#000000;
color:#FFFFFF;
}

#nav-display-area-outer{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background-color:#80dd77;
}

#nav-display-area{
position:absolute;
top:200px;
left:200px;
background-color:#80dd77;
border:solid 5px red;
}

.nav-left{
margin:20px 0px 20px 36px;
border:solid 5px red;
}




Reload the page



Now the icons look a bit more centered.  I also placed a red border around them so they can be seen more clearly.




Animate the icons (hover)


Animate the icons simply with jQuery, this will simply change the background color behind the icons (which are transparent)

Edit the index.html to add a new JavaScript file


> vi index.html

To the following


<html>
<head>
<link rel="stylesheet" href="css/main.css" type="text/css"/>
</head>
<body>

<div id="nav">
  <div id="nav-top">
    <h1>This is the Top Area</h1>
  </div>
  <div id="nav-left-outer">
     <div id="nav-left">
      <img id="nav-1" src="img/handshake-128.png" class="nav-left"/>
      <img id="nav-2" src="img/plus-128.png" class="nav-left"/>
      <img id="nav-3" src="img/youtube-2-128.png" class="nav-left"/>
     </div>
  </div>
  <div id="nav-display-area-outer">
    <div id="nav-display-area">
        <h1>Resizeable Display Area</h1>
    </div>
  </div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="js/underscore.js"></script>
<script src="js/main.js"></script>
<script src="js/animate.js"></script>

</body>
</html>

Edit the new JavaScript file


> vi js/animate.js


(function (window, undefined) {
  $(function () {
    $(".nav-left").mouseenter(function () {
        $(this).css("background-color", "red")
    })
    $(".nav-left").mouseleave(function () {
        $(this).css("background-color", "black")
    })
  })
})(this)

When a mouse enters into any element that has "nav-left" as a class will have its background turn to Red when the mouse enters it (hovers) and will have it turn back to black when it leaves the element.



Reload the page and roll over an icon.


Here the Middle icons is being hovered over.

Ajax using jQuery load


Use the jQuery load function https://api.jquery.com/load/ [2]

First make some static files that will be used to load.


> vi shaking-hands

And place the following in it


<br/><h1>Shaking Hands</h1>

Add a second file to load


> mkdir tools
> vi tools/add


And place the following in it


<br>
<center>
<img id="plus" src="img/plus-128.png"/>
<br/>
<div id="num">
1
</div>
</center>
Add a third file to load


> mkdir youtube
> vi youtube/view


And place the following in it


<br/>
<center>
  <iframe width="560" height="315"
    src="//www.youtube.com/embed/d5bkryupOXQ"
    frameborder="0"  
    style="margin:40px">
  </iframe>
</center>


Edit the index.html to add a new JavaScript file


> vi index.html

To the following


<html>
<head>
<link rel="stylesheet" href="css/main.css" type="text/css"/>
</head>
<body>

<div id="nav">
  <div id="nav-top">
    <h1>This is the Top Area</h1>
  </div>
  <div id="nav-left-outer">
     <div id="nav-left">
      <img id="nav-1" src="img/handshake-128.png" class="nav-left"/>
      <img id="nav-2" src="img/plus-128.png" class="nav-left"/>
      <img id="nav-3" src="img/youtube-2-128.png" class="nav-left"/>
     </div>
  </div>
  <div id="nav-display-area-outer">
    <div id="nav-display-area">
        <h1>Resizeable Display Area</h1>
    </div>
  </div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="js/underscore.js"></script>
<script src="js/main.js"></script>
<script src="js/animate.js"></script>
<script src="js/ajax-load.js"></script>

</body>
</html>



Edit the new JavaScript file


> vi js/ajax-load.js


(function (window, undefined) {
  $(function () {
    $("#nav-1").click(function () {
        $("#nav-display-area").load("shaking-hands")
    })
    $("#nav-2").click(function () {
        $("#nav-display-area").load("tools/add")
    })
    $("#nav-3").click(function () {
        $("#nav-display-area").load("youtube/view")
    })
  })
})(this)





Reload the page and click on a tool


You will see the nav-display area update






I want the + tools to do a few more things….

I want to add some CSS styling and some JavaScript that executes when the + tool loads….



Dynamically loading scripts


Create a css file for the add tool


> vi css/add.css


And place the following in it


#num{
font-size:60px;
margin:40px;
}

Create a JavaScript file for the add tool
Edit the tools/add file

> vi js/add.js


And place the following in it


(function (window, undefined) {
  $(function () {
    $("#plus").click(function () {
        $("#num").html(parseInt($("#num").html()) + 1)
    })
  })
})(this)
Edit the tools/add file


> vi tools/add


And add the following


<link rel="stylesheet" href="css/plus.css type="text/css"/>
<br>
<center>
<img id="plus" src="img/plus-128.png"/>
<br/>
<div id="num">
1
</div>
</center>
<script src="js/add.js"></script>



Reload the page and click on the + button




The CSS is not loaded and the JavaScript this is not the way to properly load the JavaScript using jQuery.


Edit the tools/add file


> vi tools/add


To the following


<br>
<center>
<img id="plus" src="img/plus-128.png"/>
<br/>
<div id="num">
1
</div>
</center>


Now edit the ajax-load.js file to load the CSS and JavaScript file


> vi js/ajax-load.js


(function (window, undefined) {
  $(function () {
    $("#nav-1").click(function () {
        $("#nav-display-area").load("shaking-hands")
    })
    $("#nav-2").click(function () {
        $('<link/>', {
            rel: 'stylesheet',
            type: 'text/css',
            href: 'css/add.css'
        }).appendTo('head')
        $("#nav-display-area").load("tools/add")
        $.getScript("js/add.js")
    })
    $("#nav-3").click(function () {
        $("#nav-display-area").load("youtube/view")
    })
  })
})(this)


Reload the page and click on the + button



Then click on the + button to see the number increment


The jQuery load tool has been added. The next tutorial will go over the HTML 5 Browser history management API.
The next tutorial can be found at
http://www.whiteboardcoder.com/2014/05/jquery-site-setup-positioning-4-of-4.html

References
[1]        ICONDSDB free custom icons
            http://www.iconsdb.com/
                Accessed 03/2014
[2]        jQuery load function
            https://api.jquery.com/load/
                Accessed 03/2014


Category: , ,

No comments:

Post a Comment