google+javascriptbanktwitter@js_bankfacebook@jsbankrss@jsbank
Guest, register






Create Topic Selectors like Digg Style If you joined Digg, certainly you had known about the multi-topic navigation menu for choosing of this website, a navigation selection is quite simple but very effective. This type of navigation menu is created by a combination of CSS, JavaScript and HTML and this JavaScript tutorial will guide you how to create one like Digg style without using any JavaScript framework.


Label: Topic, Selector, Digg, navigation menu, combination

Free iPage Web Hosting for First Year NOW



If you're still looking for a reliable web host provider with affordable rates, why you don't take a little of time to try iPage, only with $1.89/month, included $500+ Free Extra Credits for the payment of 24 months ($45)?

Over 1,000,000+ existisng customers can not be wrong, definitely you're not, too! More important, when you register the web hosting at iPage through our link, we're going to be happy for resending a full refund to you. That's awesome! You should try iPage web hosting for FREE now! And contact us for anything you need to know about iPage.
Try iPage for FREE First Year NOW

To note here is the inclusion of the "digg_selector.js" file which we will look at next. Also important is the hidden field with the id of "hidden_data". Since what we're doing is replacing the functionality of radio buttons with nicely styled links, we need another way to get the information submitted and we do that with the hidden field. That's where the Javascript file comes in:

window.onload=function() {
    var container = document.getElementById('container');
    var containerAnchors = container.getElementsByTagName('a'); // get anchors
    for(var j=0;j<containerAnchors.length;j++)
    {
        containerAnchors[j].onclick = handleClick;
    }
};

function handleClick()
{
    document.getElementById('hidden_data').value = this.id;

    var container = document.getElementById('container');
    var containerAnchors = container.getElementsByTagName('a');

    // unhighlight all the links
    for(var j=0;j++;containerAnchors.length;j++)
    {
        containerAnchors[j].style.backgroundColor = "#eceff6";
        containerAnchors[j].style.color = "#3b5998";
    }

    // highlight the link that was just clicked
    this.style.backgroundColor = "#3b5998";
    this.style.color = "#ffffff";
}

This is simple - there are just 2 functions. Looking at the first one:

window.onload=function() {
    var container = document.getElementById('container');
    var containerAnchors = container.getElementsByTagName('a'); // get anchors
    for(var j=0;j&lt;containerAnchors.length;j++)
    {
        containerAnchors[j].onclick = handleClick;
    }
};

When the page is loaded, we get all the anchors in the container div (these anchors are the digg style selectors/buttons or whatever you want to call them). Then, inside the for loop we attach an event handler to each anchor, which executes when the anchor is clicked. The event handler is a function called handleClick(), which we look at now:

function handleClick()
{
    document.getElementById('hidden_data').value = this.id;

    var container = document.getElementById('container');
    var containerAnchors = container.getElementsByTagName('a');

    // unhighlight all the links
    for(var j=0;j<containerAnchors.length;j++)
    {
        containerAnchors[j].style.backgroundColor = "#eceff6";
        containerAnchors[j].style.color = "#3b5998";
    }

    // highlight the link that was just clicked
    this.style.backgroundColor = "#3b5998";
    this.style.color = "#ffffff";
}

The line document.getElementById('hidden_data').value = this.id; gets a hold of the hidden field we talked about earlier, and dynamically sets its value to this.id . So what is this.id? Well, this refers to the anchor that gets clicked on. So this.id gets the id of the anchor. The hidden field is set, and when the form is submitted we can get the value of the hidden field in the $_POST['hidden_data'], assuming you're using PHP.

Finally, here's the CSS stylesheet, which needs to explanation:

body
{
font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
font-size: 15px;
}

a:link {color: #3b5998}
a:visited {color: #3b5998}
a:hover {color: #3b5998}
a:active {color: #3b5998}

h1 {
font-family: Georgia, serif;
font-style: italic;
font-size: 20px;
font-weight: bold;
}

hr {
color: #A8A8A8;
height: 1px;
}

#container {
margin:0;
margin-top: 20px;
margin-bottom: 20px;
}

.digg_style_link {
color: #3b5998;
padding: 3px;
margin: 3px;
margin-bottom: 20px;
background-color: #eceff6;
text-decoration: none;
border: 1px solid #d4dae8;
}

That's pretty much all there is to it.

Source : http://localhost/topic-selectors-digg-style.html

JavaScript by day


Google Safe Browsing McAfee SiteAdvisor Norton SafeWeb Dr.Web