Kathirvel K

Posts Tagged ‘javascript

HTML:
<ul id=”topnav”>
<li><a href=”#”>Home</a>
<ul>
<li><a href=”home.html”>Submenu</a></li>
<li><a href=”Submenu1.html”>Submenu1</a></li>
<li><a href=”Submenu2.html”>Submenu2</a></li>
</ul>
</li>
<li><a href=”#”>Nav 2</a>
<ul>
<li><a href=”nav2.html”>Nav2</a></li>
<li><a href=”Submenu3.html”>Submenu3</a></li>
<li><a href=”Submenu4.html”>Submenu4</a></li>
</ul>
</li>
</ul>

jQuery Script:
<script type=”text/javascript”>
$(document).ready(function() {
//
$(‘#topnav ul li’).each(function () {
if (window.location.href.indexOf($(this).find(‘a:first’).attr(‘href’)) > -1) {
$(this).closest(‘ul’).closest(‘li’).attr(‘class’,’active’)
$(this).addClass(‘active’).siblings().removeClass(‘active’);
}
});
//
});
</script>

CSS:
#topnav li.active {background:#222; color:#fff;}
#topnav ul li.active a{ background:#007dba none; color:#fff; }

This is explained how to do show more / show less option using jQuery for dynamically generated texts/links/lists.

jQuery code:

<script type="text/javascript" >
jQuery(function() {
var adjustheight = 40; var moreText = "Show More";
var lessText = "Show Less";
jQuery(".more-less .more-block").css('height', adjustheight).css('overflow', 'hidden');
var listItem_size = jQuery(".more-block a").length
if (listItem_size < = 8 ) {
if (listItem_size < = 4 ) {
jQuery(this).find(".more-block").css('height', adjustheight1).css('overflow', 'hidden');
}
} else {
jQuery(".more-less").append('');
jQuery("a.adjust").text(moreText);
}
jQuery(".adjust").toggle(function() {
jQuery(this).parents("div:first").find(".more-block").css('height', 'auto').css('overflow', 'visible');
jQuery(this).text(lessText);
}, function() {
jQuery(this).parents("div:first").find(".more-block").css('height', adjustheight).css('overflow', 'hidden');
jQuery(this).text(moreText);
});
});
</script>

CSS Code:

<style>
#Tabs a.adjust{text-align:center; padding:5px;background: #333333 ; color:#FFFFFF; font-size:11px ; display:block ; width:65px ; cursor:pointer; height: 13px;line-height: 13px ; text-decoration:none; clear:both;} #Tabs { padding: 0 0 2px 0; margin: 0; display:block;border:1px solid #999999; padding:6px; float: left; width:550px; clear:both;} #Tabs ul{ display: block;float: left;margin: 0; padding: 0;} #Tabs ul li{float:left; width:130px; list-style:none;} #Tabs a{text-align:center; padding: 3px 10px;margin:5px;display:block;text-decoration: underline;font-size: 11px; color:#800000; word-wrap: break-word; float:left; width:100px; } #Tabs a:hover{background:#A41B1B; color:#FFFFFF; text-decoration:none;} </style>

HTML Code:

 <div class="more-less">
  <div class="more-block">
  <ul>
  <li><a href="#"> Sample Link </a>
  <li><a href="#"> Sample Link </a>
  <li><a href="#"> Sample Link </a>
  <li><a href="#"> Sample Link </a>
  <li><a href="#"> Sample Link </a>
  <li><a href="#"> Sample Link </a>
  </ul>
  <div>
</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