2009 October

Javascript Hoirzontal Menu

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

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

@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.

    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.

<!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.

@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: CSS, drop down menu bar, horizontal, html, javascript, menu, php, Spry

Status Update Oct 7th

by: Caleb Jonasson - October 7th, 2009 Filed under: Status Updates Add Comment

This website is slowly being built up and has come pretty far from nothing in the past week but there is still a lot of information that needs to be added. On that note there have been two new sections added to the site. Both of the two sections are under the download categories. The first one is Photoshop files and the second is Backgrounds. I hope to fill these up with weekly content or even daily have daily updates.

Photoshop files: Texturized Wallpaper Pattern

by: Caleb Jonasson - October 7th, 2009 Filed under: Uncategorized Add Comment

Texturized Wallpaper Pattern.

File Size: 46.2MB
Files Included: 5

More Photoshop Files

Creating a Single Page login – Design View

by: Caleb Jonasson - October 4th, 2009 Filed under: CSS, Web Development Add Comment

There are many ways to go about creating a single page login. There are also many different styles that you can use when creating these logins. Before you start it is a good idea to have a good idea of what you are creating, this way you can always use it as a template in case things start to go wrong.

wp-login_img

The design I would like to create is going to consist of the title of the site, a quick description and the forum to login with. For this tutorial I will be creating the login so it will look similar to WordPress’ login screen except it will be off center and there will be no header. These types of login pages are great if the login information is in its own folder or you have a site that requires users to login prior to seeing any of the information.

The first step to creating a login that looks good knowing where the content will be placed. Because I plan on having my content in the middle area of the screen I am going to have to rely on percent based margin properties. After I get all of the padding and margin properties sorted out It will then be time to create a functional and easily useable text.

<!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>Login || Code With Design</title>
<link href=”main.css” rel=”stylesheet” type=”text/css” />
</head>

<body>

<div id=”container”>
<div id=”mainContent”>
</div>
</div>
</body>
</html>

By using the code above you will create the base structure for the design. It contains all of the div tags required to line this all up later with the CSS file. Now all we need to do is create a functioning form that users can enter their password and username.

<h1>Code With Design</h1>
<form id=”form1″ name=”form1″ method=”post” action=”somepage.php”>
<table width=”375″>
<tr>
<td width=”142″><label>
<div align=”right”>Username:</div>
</label></td>
<td width=”162″><input type=”text” name=”username” id=”username” /></td>
<td width=”55″> </td>
</tr>
<tr>
<td><label>
<div align=”right”>Password:</div>
</label></td>
<td><input type=”password” name=”password” id=”password” /></td>
<td><input type=”submit” name=”login” id=”login” value=”Login” /></td>
</tr>
</table>
<h5><a href=”somelink.php”>Lost your password?</a></h5>
<label></label>
</form>

If you read over the information above you will notice that the information in the tables has been moved around with the tables and not with the CSS sheet. Whatever method you use is up to you, Normally its safer to go with the CSS method but at the time of creating this login I wanted to keep the CSS clean for creating more login pages.

@charset “utf-8″;
body {
font: 100% Plantagenet Cherokee;
background: #ffffff;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
body a {
text-decoration:none;
color:#333333;
}
body a:hover {
text-decoration:none;
color:#666666;
}
.oneColElsCtr #container {
width: 100%;
margin: 0 auto;
text-align: left;
}
.oneColElsCtr #mainContent {
padding: 3px 20px;
margin-top:20%;
margin-left:20%;
margin-bottom: 10%;
width:400px;
background: #e4edfe; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
}
.oneColElsCtr #mainContent h1 {
background: #ffffff; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
}
.oneColElsCtr #mainContent input {
font-family: “Plantagenet Cherokee”;
background: #e4edfe;
border: 2px #333 solid;
}

Now we are going to go through the CSS file that was entered above. The body is pretty standard here and doesn’t have a whole lot to do with the placement of the login container. The placement of the login container is built up within the one column elastic container main content. If you look at the code you will see that there is padding so the information is not touching the outside of the div. There is also a lot of margins created here and as mentioned above its measurement is percent based. This will help the login div stay within the central areas of the page. There is also a set width, this is so the div doesn’t extend all the way to the right.

.oneColElsCtr #mainContent {
padding: 3px 20px;
margin-top:20%;
margin-left:20%;
margin-bottom: 10%;
width:400px;
background: #e4edfe; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
}

The next thing on the page that you will notice is how the content is wrapped in a round border. This is because of the following code. It is a simple way to make the content rounded inside of your browser. It is also possible to make a border with this style method, however the look of this login is flat so a boarder is not going to be needed.

background: #e4edfe; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;

The third and final thing that you will notice is how the login box contains the same font as the rest of the page and the button does not look like a normal forum button. This is because of the following code in the CSS file.

.oneColElsCtr #mainContent input {
font-family: “Plantagenet Cherokee”;
background: #e4edfe;
border: 2px #333 solid;
}

It forces the input properties within the MainContent to have a background that matches that of the rest of the page and also creates square borders around the button and input text lines.

Here are the final results

Untitled-1

Caleb Jonasson

Tags: CSS, html, login, page, wordpress

Code With Design

Javascript Hoirzontal Menu

Status Update Oct 7th

Photoshop files: Texturized Wallpaper Pattern

Find

Powered By

Comments

Dream In Code

Categories

The Past

Blogs I read

Meta

Areas

Thanks

Comments

Pages