Kathirvel K

Posts Tagged ‘js

jQuery Code:

<script type="text/javascript" >
jQuery(document).ready(function()
{
jQuery(".AccordionMenu .AccordionHeader").click(function()
	{
	jQuery(this).css({backgroundImage:"url(Open.png)"}).next("div.AccordionContent").slideDown('slow', function() {
	if (jQuery(this).is(':visible')) {
		jQuery(this).siblings("div.AccordionContent").slideUp("slow").siblings(".AccordionHeader").css({backgroundImage:"url(Close.png)"});
		jQuery(this).prev(".AccordionHeader").css({backgroundImage:"url(Open.png)"})
	} else {
		jQuery(this).siblings(".AccordionHeader").css({backgroundImage:"url(Close.png)"});
	}

});
	});
});
</script>

CSS Code:

<style>
.AccordionHeader { background: transparent  url(Close.png) center right  no-repeat;  position:relative;padding: 7px 10px; cursor: pointer;  margin:1px; font-weight:bold;color:#FFFFFF;height: 22px;  }
.AccordionContent { display:none;  background: #FFFFFF !important; border: 1px solid #B0C5CE; padding: 5px; }
</style>

HTML Code:

    <div class="AccordionHeader">My Header </div>
    <div class="AccordionContent">
    <p>
    -- your content goes here --
    </p>
    <div>

    <div class="AccordionHeader">My Header </div>
    <div class="AccordionContent">
    <p>
    -- your content goes here --
    </p>
    <div>

    <div class="AccordionHeader">My Header </div>
    <div class="AccordionContent">
    <p>
    -- your content goes here --
    </p>
    <div>

    <div class="AccordionHeader">My Header </div>
    <div class="AccordionContent">
    <p>
    -- your content goes here --
    </p>
    <div>

A named anchor inside an HTML document. Just used to navigate within the page. The name attribute specifies the name of an anchor.

Example 1: Simple HTML Scripts

Named Anchor:

<a name=”Top”> </a>

Call named anchor using href:

<a href=”#top”>Go Top</a>

Call named anchor in specific page that specific named #anchor:

<a href=”page2.htm#top”> Page2 #section</a>

Example 2: Page Load Named Anchor By Using Javascript

This need to include the function goToAnchor within head tag:

<script type=”text/javascript”>

function goNamedAnchor() {
location.href = “Page2.html#AnchorName”;
}

</script>

Then add this onload event to the body tag of html page:

<body onload=”goNamedAnchor();”>

Then specific the #anchor name that we want it to jump to, when the page is loaded:

<a name=”AnchorName”></a>

HTML:

<div id=”NavBar”>
<ul>
<li><a href=”home.html” id=”ctl00_toolbar_hlHome”>Home</a></li>
<li><a href=”services.html” id=”ctl00_toolbar_hlSearch”>Services</a></li>
<li><a href=”about.html” id=”ctl00_toolbar_hlProducts”>About</a></li>
<li><a href=”contact.html” id=”ctl00_toolbar_hlServices”>Contact</a></li>
</ul>
</div>

CSS:

#NavBar{height: 30px;margin-bottom:2px; border-bottom:2px solid black;}
#NavBar ul{display: inline;padding: 0;margin: 0; width: 960px;}
#NavBar li{list-style-type: none;line-height: 28px;vertical-align: middle;display: block;
text-transform: uppercase;font-size: 12px;float: left;margin-left: 0px;}
#NavBar ul li a{ background: darkred repeat-x;height: 28px;display: block;
text-decoration: none;text-align: center;color: #FFFFFF;margin-right:2px;
padding:0 25px; font-weight:bold; border:1px solid #990200;}
#NavBar ul li a:hover{background: black repeat-x;height: 28px;display: block;
color: #FFFFFF;text-decoration: none;border:1px solid #000000}
#NavBar ul li a.activeMenuItem {background: black; height: 28px;display: block;
color: #FFFFFF;text-decoration: none;border:1px solid #000000}

JavaScript:

function extractPageName(hrefString)
{
var arr = hrefString.split(‘/’);
return  (arr.length<2) ? hrefString : arr[arr.length-2].toLowerCase() + arr[arr.length-1].toLowerCase();
}
function setActiveMenu(arr, crtPage)
{
for (var i=0; i<arr.length; i++)
{
if(extractPageName(arr[i].href) == crtPage)
{
if (arr[i].parentNode.tagName != “DIV”)
{
arr[i].className = “activeMenuItem”;
arr[i].parentNode.className = “activeMenuItem”;
}
}
}
}
function setPage()
{
hrefString = document.location.href ? document.location.href : document.location;
if (document.getElementById(“NavBar”)!=null)
setActiveMenu(document.getElementById(“NavBar”).getElementsByTagName(“a”), extractPageName(hrefString));
}

</script>

Finally call this JavaScript to all pages:

<script language=”javascript”>setPage()< /script>

Source:http://www.richnetapps.com/automatically_highlight_current_page_in/

<html>
<head>
<script type=”text/javascript”>
function upperCase(x)
{
var y=document.getElementById(x).value;
document.getElementById(x).value=y.toUpperCase();
}
</script>
</head>
<body>
Enter your name: <input type=”text” id=”fname” onkeyup=”upperCase(this.id)” />
</body>
</html>

Creating the responseHTML element

This may be a variable of type Element.

var responseHTML = document.createElement("body");

This works with Internet Explorer and Firefox, not with Opera.

Creating a permanent <div> storage tag

To store the other document inside the page, the following tag has to be included anywhere into the page:

<div style="display:none;"> </div>

The content is empty. It will be filled when the other HTML page is loaded.

The JavaScript functions

A function extracts the useful part of the content of the other page and stores it into the tag above.

function getBody(content) 
{ 
   var x = content.indexOf("<body");
   x = content.indexOf(">", x);    
   var y = content.lastIndexOf("</body>"); 
   return content.slice(x + 1, y);
}

Another function fills the container, either a variable or a tag, and is used as callback by Ajax.

function getContent(content, target)
{
   target.innerHTML =  getBody(content);
}

Displaying the other page

Once the content of the other page stored into the invisible <div> tag, it may be processed and extracted with DOM methods and used into the current page. In this first example it is just copied into the page.

The following tag is used to display the other page:

<div> </div>

To put the data into the page and make it visible to readers, the content is stored into this <div> tag, with the “displayed” id (or the id of your choice), with the following statement:

document.getElementById("displayed").innerHTML = responseHTML.innerHTML;

http://www.xul.fr/ajax/responseHTML-attribute.html

Tags: ,

A UI component common in many applications (and starting to become common on the web as well) is the accordion menu. A number of javascript libraries provide nice and simple accordion menus, but today we are going to take a look at how to build our own – because, well, that is what we do here at Switch On The Code!

Below, you can see the example that we are going to build today. It is a pretty simple animated accordion, where each menu is collapsible/expandable. You can have them all collapsed, or a single menu open. It should be pretty self-explanatory, so play around!

http://www.switchonthecode.com/tutorials/javascript-and-css-tutorial-accordion-menus

Online html to js converter and Various

http://www.accessify.com/tools-and-wizards/

 

Rounded corners without images

http://www.html.it/articoli/nifty/index.html

Tags: ,