Get, install, and use light box

By: Caleb Jonasson - April 2nd, 2010  Filed under: CSS, javascript Add Comment

First and foremost, if you do not know what light box is, then I can only assume that you have been living in the dark ages. A lot of sites incorporate this technique to view full sized photos inside of the browser.

Secondly I am going to have to add that this article is about implementing light box. Not creating a light box like plug in.

The first thing that is required for us is to get light box. Where do you get light box. Well the Internet probably has some light box. lets go there.

This is the site that has what we need. If you would like to click that link, upload to the server you will be working on we can get started.

When working with lightbox you will need to include four lines of code into your header. Once added, your header will look like this.

1
2
3
4

<script src="prototype.js" type="text/javascript"><!--mce:0--></script>
<script src="scriptaculous.js?load=effects,builder" type="text/javascript"><!--mce:1--></script>
<script src="lightbox.js" type="text/javascript"><!--mce:2--></script>
<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />

The next part to using this script requires us to link to an image using it. This can be done by using a rel path.

1

<a title="Title" rel="lightbox" href="demo-image.jpg">First Image</a>

Note: There are some things that can go wrong when working with lightbox. The first thing that you need to check is that everything is being properly linked to. There are files from the css that can cause lightbox to not function properly.

Also, if you do not see an image or lightbox appear then you may have to check the JavaScript within the body tag. You may have to modify the on load.

Tags: , , , ,

JQuery: Show and hide images

By: Caleb Jonasson - March 30th, 2010  Filed under: javascript Add Comment

In this tutorial we will be using JQuery to show and hide images that are displayed in our web page. If you would like to use the files used in this tutorial you can click here to download them.

When using JQuery the first thing that is required is for us to link to the JQuery library. The link to this library is contained within the header tags of the web page and look like this:

1
2
3

<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>

The next part of this code that is required is for us to create the functions that the buttons will link to. When the user presses one of these buttons the image will go into that state unless already in that state. It does this by using an “on click” that linking to the javascript function.

1
2
3
4
5
6
7
8

<script>
function showImage(){
	$('#imgSwitch').show();
}
function hideImage(){
	$('#imgSwitch').hide();
}
</script>

Now we need to create the img tags and give the image an ID that will work with the functions we have just created. The code for this looks like so:

1

<img id="imgSwitch" src="cjdesign.png">

The final part of code that is required is the form that links to the functions we created in the second group of javascript code. For this section of code we will be creating two buttons that will allow the change in image.

1
2
3
4

<form>
	<input type="button" value="show" onclick="showImage()"></input>
	<input type="button" value="hide" onclick="hideImage()"></input>
</form>

And finally this is what all of the code looks like together. The code you have created should look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<head>
		<title>Show and Hide Images</title>
		<script src="http://code.jquery.com/jquery-latest.js"></script>
		<script>
			function showImage(){
				$('#imgSwitch').show();
			}
			function hideImage(){
				$('#imgSwitch').hide();
			}
		</script>
	</head>
	<body>
		<h1>Showing and Hiding Images</h1>
		<p>This is an example of showing and hiding images.</p>
		<img id="imgSwitch" src="cjdesign.png">
		<form>
			<input type="button" value="show" onclick="showImage()"></input>
			<input type="button" value="hide" onclick="hideImage()"></input>
		</form>
 
	</body>
</html>
Tags: , , , ,

Javascript Hoirzontal Menu

By: Caleb Jonasson - October 8th, 2009  Filed under: javascript, Web Development Add Comment

javascript_horizontal_menu

In order to create a proper working javascript based horizontal menu you need to have all of the necessary files. These files consist of :

/SpryAssets/SpryMenuBarHorizontal.css
/SpryAssets/SpryMenuBar.js

index.php
main.css

The first section of code is going to be the SpryMenuBarHorizontal.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

@charset "UTF-8";
ul.MenuBarHorizontal
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
}
ul.MenuBarActive
{
z-index: 1000;
}
ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 8em;
float: left;
}
ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: auto;
}
ul.MenuBarHorizontal ul li
{
width: 8.2em;
}
ul.MenuBarHorizontal ul ul
{
position: absolute;
margin: -5% 0 0 95%;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: auto;
top: 0;
}
ul.MenuBarHorizontal ul
{
border: 1px solid #CCC;
}
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #4b4b4b;
padding: 0.2em 0.4em;
color: #ffffff;
text-decoration: none;
}
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
background-color: #4b4b4b;
color: #FFF;
}
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-color: #333366;
color: #ccccff;
}
ul.MenuBarHorizontal iframe
{
position: absolute;
z-index: 1010;
}
@media screen, projection
{
ul.MenuBarHorizontal li.MenuBarItemIE
{
display: inline;
f\loat: left;
background: #4b4b4b;
}
}

The second file, SpryMenuBar.js looks like this.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120

    var Spry;
    if(!Spry)
    {
    Spry = {};
    }
    if(!Spry.Widget)
    {
    Spry.Widget = {};
    }
    Spry.Widget.MenuBar = function(element, opts)
    {
    this.init(element, opts);
    };
 
    Spry.Widget.MenuBar.prototype.init = function(element, opts)
    {
    this.element = this.getElement(element);
 
    this.currMenu = null;
 
    var isie = (typeof document.all != ‘undefined’ &amp;&amp; typeof window.opera == ‘undefined’ &amp;&amp; navigator.vendor != ‘KDE’);
    if(typeof document.getElementById == ‘undefined’ || (navigator.vendor == ‘Apple Computer, Inc.’ &amp;&amp; typeof window.XMLHttpRequest == ‘undefined’) || (isie &amp;&amp; typeof document.uniqueID == ‘undefined’))
    {
    return;
    }
    if(opts)
    {
    for(var k in opts)
    {
    var rollover = new Image;
    rollover.src = opts[k];
    }
    }
 
    if(this.element)
    {
    this.currMenu = this.element;
    var items = this.element.getElementsByTagName(‘li’);
    for(var i=0; i 0)
    {
    layers[0].parentNode.removeChild(layers[0]);
    }
    };
 
    Spry.Widget.MenuBar.prototype.clearMenus = function(root)
    {
    var menus = root.getElementsByTagName(‘ul’);
    for(var i=0; i 0 ? submenus[0] : null);
 
    var hasSubMenu = false;
    if(menu)
    {
    this.addClassName(link, “MenuBarItemSubmenu”);
    hasSubMenu = true;
    }
 
    if(!isie)
    {
 
    listitem.contains = function(testNode)
    {
    if(testNode == null)
    {
    return false;
    }
    if(testNode == this)
    {
    return true;
    }
    else
    {
    return this.contains(testNode.parentNode);
    }
    };
    }
 
    var self = this;
 
    this.addEventListener(listitem, ‘mouseover’, function(e)
    {
    if(self.bubbledTextEvent())
    {
 
    return;
    }
    clearTimeout(closetime);
    if(self.currMenu == listitem)
    {
    self.currMenu = null;
    }
 
    self.addClassName(link, hasSubMenu ? “MenuBarItemSubmenuHover” : “MenuBarItemHover”);
    if(menu &amp;&amp; !self.hasClassName(menu, “MenuBarSubmenuVisible”))
    {
    opentime = window.setTimeout(function(){self.showSubmenu(menu);}, 250);
    }
    }, false);
 
    this.addEventListener(listitem, ‘mouseout’, function(e)
    {
    if(self.bubbledTextEvent())
    {
 
    return;
    }
 
    var related = (typeof e.relatedTarget != ‘undefined’ ? e.relatedTarget : e.toElement);
    if(!listitem.contains(related))
    {
    clearTimeout(opentime);
    self.currMenu = listitem;
 
    self.removeClassName(link, hasSubMenu ? “MenuBarItemSubmenuHover” : “MenuBarItemHover”);
    if(menu)
    {
    closetime = window.setTimeout(function(){self.hideSubmenu(menu);}, 600);
    }
    }
    }, false);
    };

Now you need your index.php. This is where the menu content will be.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<link href=”main.css” rel=”stylesheet” type=”text/css” />
<script src=”SpryAssets/SpryMenuBar.js” type=”text/javascript”></script>
<link href=”SpryAssets/SpryMenuBarHorizontal.css” rel=”stylesheet” type=”text/css” />
</head>
 
<body>
 
<div id=”container”>
<div id=”header”>
<h1>Header</h1>
 
<ul id=”MenuBar1″>
<li>
<div align=”center”><a href=”#”>simple</a></div>
</li>
<li>
<div align=”center”><a href=”#”>Smart</a></div>
</li>
<li>
<div align=”center”><a href=”#”>Tutorials</a>
<ul>
<li><a href=”#”>Photoshop</a></li>
<li><a href=”#”>Illustrator</a></li>
<li><a href=”#”>Flash</a></li>
<li><a href=”#”>Dreamweaver</a></li>
</ul>
</div>
</li>
</ul>
<!– end #header –></div>
<div id=”mainContent”>
<h1> Main Content </h1>
<!– end #mainContent –></div>
<div id=”footer”>
<p>Footer</p>
<!– end #footer –></div>
<!– end #container –></div>
<script type=”text/javascript”>
<!–
var MenuBar1 = new Spry.Widget.MenuBar(“MenuBar1″);
//–>
</script>
</body>
</html>

The last file that we need is the main.css file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

@charset "utf-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
.oneColElsCtrHdr #container {
width: 46em;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
.oneColElsCtrHdr #header {
background: #4b4b4b;
color: #ffffff;
padding: 0 10px 0 20px;
}
.oneColElsCtrHdr #header h1 {
margin: 0;
padding: 10px 0;
}
.oneColElsCtrHdr #mainContent {
padding: 0 20px;
background: #FFFFFF;
margin-top: 50px;
}
.oneColElsCtrHdr #footer {
padding: 0 10px;
background:#DDDDDD;
}
.oneColElsCtrHdr #footer p {
margin: 0;
padding: 10px 0;
}

Try it out by clicking here.

Tags: , , , , , , ,