jQuery: Selected state of menu item with ASP.NET Master Page

How to add selected states to your navigation using jQuery.

Here’s a simple jQuery solution for adding selected states to your navigation.

The sample HTML looks like this:

<ul id="navigation">

<li><a href="home.html">Home</a></li>

<li><a href="services.html">Services</a></li>

<li><a href="about.html">About</a></li>

<li><a href="information.html">Info</a></li>

<li><a href="contact.html">Contact</a></li>

</ul>

And the sample CSS:

li {

background-color: white;

color: black;

padding: 5px 10px;

}

li.selected {

background-color: black;

color: white;

}

And the corresponding jQuery:

$(document).ready(function() {

// store url for current page as global variable

current_page = document.location.href

// apply selected states depending on current page

if (current_page.match(/home/)) {

$("ul#navigation li:eq(0)").addClass('selected');

} else if (current_page.match(/services/)) {

$("ul#navigation li:eq(1)").addClass('selected');

} else if (current_page.match(/about/)) {

$("ul#navigation li:eq(2)").addClass('selected');

} else if (current_page.match(/information/)) {

$("ul#navigation li:eq(3)").addClass('selected');

} else if (current_page.match(/contact/)) {

$("ul#navigation li:eq(4)").addClass('selected');

} else { // don't mark any nav links as selected

$("ul#navigation li").removeClass('selected');

};

});

How does it work?

First we capture the url of the current page in a variable. Then we use that variable to write conditions based on a regular expression (e.g. if the current url contains the word ‘about’). Finally, we use the :eq(index) selector to target the corresponding <li> and add a class of selected.

The only thing that’s remotely tricky here is the :eq(index) selector. This allows you to use an index to target a specific element within a larger array of matched elements.

So in our example, ul#navigation li would return an array of all five <li> elements whereas ul#navigation li:eq(4) would return only the fifth <li>. This saves us the trouble of having to apply a unique id to each list item.

A few gotchas.
g modifier continue searching after first match, i  modifier tells to search for case-sensitive sensitive search. It will match regardless of capital or small caps 

Make sure your regular expression matchers are not too general or you might end up adding selected states to the wrong pages. For example, this might not be a good solution for a blog where the slugs correspond to post tiles.

Make sure to include the most recent version of jQuery in your head element.

Make sure jQuery is loaded before the script for your selected navigation.

Don’t forget to place your script inside the document ready function. Otherwise your script will run before the DOM is fully loaded – and do nothing.

CSS:Image overlay caption

Intro

There are 2 image overlay caption related tutorials i made “Making image captions using jQuery” and“Making A Cool Thumbnail Effect With Zoom And Sliding Captions”. Feel free to check them out, they’re great 

Both of them have some cool effect made with jQuery, but yesterday a reader (hi Goodluck) asked me how to have the captions shown by default without jQuery effects. So i realized i don’t have a tutorial explaining how to make a simple overlay image caption and here we are. Enjoy.

How it looks

HTML

view plaincopy to clipboardprint?

1. <!-- wrapper div -->  
2. <div class='wrapper'>  
3.     <!-- image -->  
4.     <img src='wolf.jpg' />  
5.     <!-- description div -->  
6.     <div class='description'>  
7.         <!-- description content -->  
8.         <p class='description_content'>The pack, the basic...</p>  
9.         <!-- end description content -->  
10.     </div>  
11.     <!-- end description div -->  
12. </div>  
13. <!-- end wrapper div -->  

CSS

view plaincopy to clipboardprint?

1. div.wrapper{  
2.     float:left; /* important */  
3.     position:relative; /* important(so we can absolutely position the description div */  
4. }  
5. div.description{  
6.     position:absolute; /* absolute position (so we can position it where we want)*/  
7.     bottombottom:0px; /* position will be on bottom */  
8.     left:0px;  
9.     width:100%;  
10.     /* styling bellow */  
11.     background-color:black;  
12.     font-family: 'tahoma';  
13.     font-size:15px;  
14.     color:white;  
15.     opacity:0.6; /* transparency */  
16.     filter:alpha(opacity=60); /* IE transparency */  
17. }  
18. p.description_content{  
19.     padding:10px;  
20.     margin:0px;  
21. }  

That’s it

And we have a nice transparent overlay image caption. If you don’t like that the text is also transparent then i can suggest you to use a transparent PNG image 1px wide and 1px tall as the background of the .description and remove the CSS opacity, or you can use javascript to make a transparent mask and on top of it show the caption text. If you like to see a tutorial on different ways to achieve that, let me know and i’ll see what i can do

CSS: How to center a div

In order to center a div:

1. Always use a extra outer div to make other div center
2. Outer div width will be 100% and inner div width will be fixed. In other word outer div width will be greater than inner div and then inside the inner div margin: 0px auto will center the inner div. 
3. margin: 0px auto; in the inner div
4. position: relative; outer div relative and inner div position: absolute for image only otherwise relative
5. text-align:center;
6. In order for margin: 0 auto; to work, in addition to display:block a width needs to be specified.
7. Without specifying margin-left and margin-right it is sometimes impossible to center a div. Center a div with absolute position is really hard. with absolute position margin:auto does not work.

<div id="outer">

    <div id="inner">Inner</div>

</div>

#outer

{

       /* The main container */

       text-align:center;

       width:100%;

       position:relative;

}

#inner

{

       /* The main container */

       text-align:center;

       width:700px;

       position:relative; // i needed it to be absolute

}

Sometimes position:absolute you need but position:absolute does not let div to be centered. Just remove the position:absolute; property for #inner

You can apply this CSS to the inner div:

#inner {
    width: 50%;
    margin: 0 auto;
}

Of course, you don't have to set the width to 50%. Any width less than the containing div will work. The margin: 0 auto is what does the actual centering.

If you don't want to set a fixed width on the inner div you could do something like this: #outer { width: 100%; text-align: center; } #inner { display: inline-block; } That makes the inner div into an inline element that can be centered with text-align. Suppose that your div is 200px wide: .centered { position: fixed; left: 50%; margin-left: -100px; }

Center a div with absolute positioned:

margin: 0 auto; won't work for elements that are absolutely positioned. Instead, we can work with the properties of the element itself. Check out the fiddle...

http://jsfiddle.net/UnsungHero97/HnzyT/2/

To center it horizontally is easy since you know the width AND its positioned absolutely. All you have to do is give it 2 CSS properties:

width: 960px;
position: absolute;

/* ... other CSS properties... */

left: 50%; /* 1. move it to the right 50% of the width of the page; now the left side of the element is exactly in the middle */
margin-left: -480px; /* move the element to the left exactly half of its width and now the center of the element is centered horizontally */

In order to fit an image inside a div:

1. Manually alter the width and height of the <img>. 
2. CSS: Display: block will fit the img inside the div

HTML

<div>
    <img src="something.jpg" alt="" />
</div>

CSS

div {
   width: 48px;
   height: 48px;
}

div img {
   display: block;
   width: 100%;
}

This will make the image expand to fill its parent, of which its size is set in the div CSS.
#container{
    width:300px;
    height:300px;
    border:1px solid black;
}
#image{
    position:relative; // i needed it to be absolute
    top:-200px;
}

How to center table inside a div:

I was doing like this
<div >
        <table align="center" class="table-main" >
        </table>
</div>
and as a result page was positioning on the left. Doing the align="center" in the div section solves the problem - as followed:

<div align="center" >

        <table class="table-main" >

        </table>

</div>

How to center a div elements. In this case div elements are aside.

CSS File:

.centerOuterDiv {

    max-width:960px;

    width:100%;

    margin: 0 auto;

}

.centerInnerDiv {

    width:100%;

    margin: 0 auto;

    text-align:center; // it will center the elements

}

    .centerInnerDiv aside {

        display:inline-block; //it will keep the elements in the same line like float

        margin:5px;

        padding:2px 5px;

        vertical-align:top;

    }

.consultancy {

    text-align:left; // it will push back the text to the left 

    width:210px;

    height:260px;

   

}

HTML File:

<div id="columns" class="centerOuterDiv">

        <div id="columns" class="centerInnerDiv">

       

        <aside>

            <div id="studentConsultancy" class="transitionDiv consultancy column" draggable="true">

                <a href="StudentConsultancy.aspx"><h3>Student Consultancy</h3></a>

                <ul>

                    <li><a href="">Career Counselling</a></li>

                    <li><a href="">University Selection Assistance</a></li>

                    <li><a href="">Admission Process Assistance</a></li>

                </ul>

            </div>

        </aside>

</div><!--end inner div-->

</div><!--end outer div-->