Invent, Innovate, and Integrate

News Categories

News Archives

Web Solutions|SEO|Customize Wordpress|My Blog|Linoogle

14. Aug
2008

Quick Contact Forms

Written by: admin - Posted in: Developer Blog, Category: Developer Blog -

I’ve added a new function to my site will enable to view a contact form easily at my home page. It is a sliding content that uses a hidden div’s and only appear by clicking on a javascript link.
This script lets you display content in tight areas on your page, by dropping it down into view when the mouse rolls over the anchor element. The content temporarily overlaps anything beneath it. Think of it as adding another dimension to your webpage to create more space. It’s extremely handy for displaying search boxes, additional links etc in a tight area, such as the sidebar column of a page. The content to reveal/ overlap in each case is simply contained inside an arbitrary DIV on the page for easy customizing. A quick overview:

Drop Down Content can be revealed either via onclick of the anchor link, or onmouseover instead. Independent setting for each anchor link.
Set whether Drop Down Content itself should automatically hide after the user rolls his mouse out of it. Global setting inside .js file.
For the content within Drop Down Content, it can either be inline, or fetched from an external file on your server via Ajax instead.
Drop Down Content supports four different position orientations- “left-bottom”, right-bottom”, “left-top”, and “right-top”. The speed of the drop down reveal can also be customized.

See code here:

Step 1: Insert the following script into the <head> section of your page:

<script type=”text/javascript” src=”dropdowncontent.js”>
</script>

Javascript file: dropdowncontent.js

Step 2: Insert the below sample HTML code into the <body> section of your page, which demonstrates how to set up two drop down contents, activated by two arbitrary links:

<DIV id=”subcontent” style=”position:absolute; visibility: hidden; border: 3px solid #3c8ca3; background:#fff; width: 400px; padding: 8px; text-align:left;”>
<div style=”padding:5px; border:1px solid #c0c0c0; background:#f2f2f2; margin-bottom:15px;”>
Hi there!, Please fill up the form below. After sending your message. you will receive a feedback as soon as posible. Thanks!
</div>
<form method=”post” action=”http://www.emailmeform.com/fid.php?formid=112038″ enctype=”multipart/form-data” accept-charset=”UTF-8″>

<label for=”user” class=”contactlabel”>Name:</label>
<input type=”text” name=”FieldData0″ value=”" maxlength=”100″ class=”contactbox” onkeypress=”return handleEnter(this, event)”><br />

<label for=”email” class=”contactlabel”>Email Address:</label>
<input type=”text” name=”FieldData1″ value=”" maxlength=”100″ class=”contactbox” onkeypress=”return handleEnter(this, event)”><br />

<label for=”Subject” class=”contactlabel”>Subject:</label>
<input type=”text” name=”FieldData2″ value=”" maxlength=”100″ class=”contactbox” onkeypress=”return handleEnter(this, event)”/><br />

<label for=”comments” class=”contactlabel”>Message:</label>
<textarea name=”FieldData3″ rows=”30″ id=”limiter”></textarea>
<span style=”text-align:right;”>
<br />
<center>
<input type=”submit” name=”Submit” id=”submitbutton” class=”contactbutton” value=”Submit” onClick=”return checkmail(this.form.FieldData1)”/>
<input type=”reset” value=” Clear ” name=”Clear” id=”searchbutton”>
</center>
</form>
<br/>
<a href=”javascript:dropdowncontent.hidediv(’subcontent’)”>Close [X]</a>
</DIV>

<script type=”text/javascript”>
//Call dropdowncontent.init(”anchorID”, “positionString”, glideduration, “revealBehavior”) at the end of the page:

dropdowncontent.init(”searchlink”, “right-top”, 500, “click”)
</script>

Source: http://dynamicdrive.com/dynamicindex5/overlapcontent.htm

Comments (0)

6. Aug
2008

Accordition Menus

Written by: admin - Posted in: Developer Blog, Category: Developer Blog -

Since I started developing this blog I also learning new scripts. And part of it are Javascript and AJAX. I found on Dynamicdrive.com a type of menu that be hide if its use or click by the user. This help my site more functionality on browsing my pages easily.
see code:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>

<head>

<script type=”text/javascript” src=”jquery-1.2.2.pack.js”></script>

<script type=”text/javascript” src=”ddaccordion.js”>

/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</script>

<script type=”text/javascript”>

ddaccordion.init({
headerclass: “submenuheader”, //Shared CSS class name of headers group
contentclass: “submenu”, //Shared CSS class name of contents group
revealtype: “click”, //Reveal content when user clicks or onmouseover the header? Valid value: “click” or “mouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", ""], //Two CSS classes to be applied to the header when it’s collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["suffix", "<img src='plus.gif' class='statusicon' />", "<img src='minus.gif' class='statusicon' />"], //Additional HTML added to the header when it’s collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: “normal”, //speed of animation: “fast”, “normal”, or “slow”
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})

</script>

<style type=”text/css”>

.glossymenu{
margin: 5px 0;
padding: 0;
width: 170px; /*width of menu*/
border: 1px solid #9A9A9A;
border-bottom-width: 0;
}

.glossymenu a.menuitem{
background: black url(glossyback.gif) repeat-x bottom left;
font: bold 14px “Lucida Grande”, “Trebuchet MS”, Verdana, Helvetica, sans-serif;
color: white;
display: block;
position: relative; /*To help in the anchoring of the “.statusicon” icon image*/
width: auto;
padding: 4px 0;
padding-left: 10px;
text-decoration: none;
}

.glossymenu a.menuitem:visited, .glossymenu .menuitem:active{
color: white;
}

.glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/
position: absolute;
top: 5px;
right: 5px;
border: none;
}

.glossymenu a.menuitem:hover{
background-image: url(glossyback2.gif);
}

.glossymenu div.submenu{ /*DIV that contains each sub menu*/
background: white;
}

.glossymenu div.submenu ul{ /*UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
}

.glossymenu div.submenu ul li{
border-bottom: 1px solid blue;
}

.glossymenu div.submenu ul li a{
display: block;
font: normal 13px “Lucida Grande”, “Trebuchet MS”, Verdana, Helvetica, sans-serif;
color: black;
text-decoration: none;
padding: 2px 0;
padding-left: 10px;
}

.glossymenu div.submenu ul li a:hover{
background: #DFDCCB;
colorz: white;
}

</style>

</head>

<body>

<div class=”glossymenu”>
<a class=”menuitem” href=”http://www.dynamicdrive.com/”>Dynamic Drive</a>
<a class=”menuitem submenuheader” href=”http://www.dynamicdrive.com/style/” >CSS Examples</a>
<div class=”submenu”>
<ul>
<li><a href=”http://www.dynamicdrive.com/style/csslibrary/category/C1/”>Horizontal CSS Menus</a></li>
<li><a href=”http://www.dynamicdrive.com/style/csslibrary/category/C2/”>Vertical CSS Menus</a></li>
<li><a href=”http://www.dynamicdrive.com/style/csslibrary/category/C4/”>Image CSS</a></li>
<li><a href=”http://www.dynamicdrive.com/style/csslibrary/category/C6/”>Form CSS</a></li>
<li><a href=”http://www.dynamicdrive.com/style/csslibrary/category/C5/”>DIVs and containers</a></li>
<li><a href=”http://www.dynamicdrive.com/style/csslibrary/category/C7/”>Links & Buttons</a></li>
<li><a href=”http://www.dynamicdrive.com/style/csslibrary/category/C8/”>Other</a></li>
<li><a href=”http://www.dynamicdrive.com/style/csslibrary/all/”>Browse All</a></li>
</ul>
</div>
<a class=”menuitem” href=”http://www.javascriptkit.com/jsref/”>JavaScript Reference</a>
<a class=”menuitem” href=”http://www.javascriptkit.com/domref/”>DOM Reference</a>
<a class=”menuitem submenuheader” href=”http://www.cssdrive.com”>CSS Drive</a>
<div class=”submenu”>
<ul>
<li><a href=”http://www.cssdrive.com”>CSS Gallery</a></li>
<li><a href=”http://www.cssdrive.com/index.php/menudesigns/”>Menu Gallery</a></li>
<li><a href=”http://www.cssdrive.com/index.php/news/”>Web Design News</a></li>
<li><a href=”http://www.cssdrive.com/index.php/examples/”>CSS Examples</a></li>
<li><a href=”http://www.cssdrive.com/index.php/main/csscompressor/”>CSS Compressor</a></li>
<li><a href=”http://www.dynamicdrive.com/forums/forumdisplay.php?f=6″>CSS Forums</a></li>
</ul>
<img src=”http://i27.tinypic.com/sy7295.gif” style=”margin: 10px 5px” />
</div>
<a class=”menuitem” href=”http://www.codingforums.com/” style=”border-bottom-width: 0″>Coding Forums</a>
</div>

<p>Assuming the current page is named “current.htm”, the below links when navigated to expands a particular header on that page:</p>
<p>
- <a href=”current.htm?submenuheader=0″>Expand 1st header within “submenuheader” header group</a><br />
</p>

<p>Helpful links: </p>
<p>
- <a href=”http://www.dynamicdrive.com/dynamicindex17/ddaccordion_suppliment.htm”>Adding arbitrary links hat expand/ collapse the contents</a><br />
- <a href=”http://www.dynamicdrive.com/dynamicindex17/ddaccordion_suppliment2.htm”>Taking advantage of the oninit() and onopenclose() event handlers</a><br />
</p>

</body>
</html>

Source:http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu.htm

Comments (0)

4. Aug
2008

Hungry for vacation

Written by: admin - Posted in: My Blog, Category: My Blog -

It’s been a long time since i graduated from college. And now all I do is work all the time 5 day a week. I only spend 1 day resting and 1 day for going out with my girlfriend. Its August now 4 weeks after is my birthday. I’m thinking of some place that i can relax for long period of time. Just wondering how can i escape from my work?

Comments (0)

News Categories

News Archives

Quick Contact Forms

Accordition Menus

Hungry for vacation

Google News : U.S. : All

Google News : U.S. : Sci/Tech

Google News : U.S. : Sports

Google News : U.S. : Entertainment

Google News : U.S. : Entertainment

Google News : U.S. : Sci/Tech

Google News : U.S. : Sci/Tech

About

Recent entries

Developer Blog