Windows Taskbar Like Navigation Menu
3 posts
Page 1 of 1
Quick Profile
Information
Posts: 265
Joined: Sat Nov 19, 2011 2:19 pm View Full Profile
In this tutorial we will create a 'Windows-Like Preview' popover. So, without any further ado, let's get coding.
This is what the end-product looks like:
To streamline everything, we will use a CSS and a JS framework called: Bootstrap at http://getbootstrap.com
NOTE: I have tested it with the latest one, it's not working: so use the file provided as a download.
Now, select the folder where you will store everything about your website. My folder looks like this:
The assets folder will hold all of our helper files, like stylesheets, jQuery plugins, images, etc.
Go ahead and create your index.html file and add the <!DOCTYPE html> and type in a skeleton of the page. Also add the link reference to the bootstrap.css file. Just for your reference, if should look like this:
I will be using version 1.7.1 of jQuery, but I guess any would work fine. https://ajax.googleapis.com/ajax/libs/j ... ery.min.js
So, go ahead and add a script reference to the CDN. (A good practice is to add all the JavaScript files at the end of the <body> section, it helps in loading the page faster.)
The code should look like this:
The first script reference, links your page to the jQuery CDN. This is the base of all the things we will be doing in this tutorial. (for more information, visit http://jquery.com)
The second file, is the jQuery plugin for adding tooltips. If anyone is from a programming background, he will know that Tooltips are small pop-ups which are shown when the cursor hovered over a control; often used for providing help.
Similarly, the third file, helps in providing pop-overs which are like small boxes containing some information.
With that done, let's structure our page to make it look a little better. At this point (i.e. after adding the page's structure) the code should look like this:
Keep in mind that in every bootstrap design, we HAVE to use the container class (in a div) to structure and format the page correctly.
If we open the file in our web browser, (at this point) it should look like this:
Now let's see the anchor tags:
The last property is the orientation of the popover, I am just using bottom for demonstration purposes, but for native Windows Look, use data-placement="top".
Now if you hover over the buttons you see: well, nothing. That's because the popovers are opt-in meaning that, you have to trigger them. To trigger that, we add a little jQuery.
Now the code should look like this: (after the jQuery code)
Let's see the code, line-by-line.
Those of you who are unfamiliar with jQuery, there are selectors, and we use selectors to select HTML elements, and apply the magic, to perform some action when the page loads, we use
Now, as I told you that popovers are opt-in , let's trigger 'em.
To do that, $(selector).popover({properties}); has to be called.
Let's look at one such trigger:
$("#example1").popover({ title: 'Preview', content: img, html:true });
The selector here is the element with the id of example1 (remember we had set an id to the anchor tag) and then calls the popover function.
We see that there is a Title property which tells it so set the title accordingly (here 'Preview'), next we tell the content we want in the popover, which, in this case is the variable we defined earlier: imgdoes that. Lastly, for the popover to render correctly, we tell it that the content we will be passing is of type html.
And voila! We are done.
Live Preview: http://labsvisual.no-ip.biz/tutorials/wtsk/
For all those lazy bums, here is the code: (5 code credits, hope you don't mind)
This file is hosted off-site.
------
Think that the tutorial was not up to the mark? Throw in your comments to help me improve the quality of my tutorials.
This is what the end-product looks like:
To streamline everything, we will use a CSS and a JS framework called: Bootstrap at http://getbootstrap.com
NOTE: I have tested it with the latest one, it's not working: so use the file provided as a download.
Now, select the folder where you will store everything about your website. My folder looks like this:
The assets folder will hold all of our helper files, like stylesheets, jQuery plugins, images, etc.
Go ahead and create your index.html file and add the <!DOCTYPE html> and type in a skeleton of the page. Also add the link reference to the bootstrap.css file. Just for your reference, if should look like this:
I will be using version 1.7.1 of jQuery, but I guess any would work fine. https://ajax.googleapis.com/ajax/libs/j ... ery.min.js
So, go ahead and add a script reference to the CDN. (A good practice is to add all the JavaScript files at the end of the <body> section, it helps in loading the page faster.)
The code should look like this:
The first script reference, links your page to the jQuery CDN. This is the base of all the things we will be doing in this tutorial. (for more information, visit http://jquery.com)
The second file, is the jQuery plugin for adding tooltips. If anyone is from a programming background, he will know that Tooltips are small pop-ups which are shown when the cursor hovered over a control; often used for providing help.
Similarly, the third file, helps in providing pop-overs which are like small boxes containing some information.
With that done, let's structure our page to make it look a little better. At this point (i.e. after adding the page's structure) the code should look like this:
Keep in mind that in every bootstrap design, we HAVE to use the container class (in a div) to structure and format the page correctly.
If we open the file in our web browser, (at this point) it should look like this:
Now let's see the anchor tags:
Code: Select all
The first property, href is just telling the tag where to go when clicked. Next we just add an id to this element (as well as all others) as we will need to use them via jQuery. Then, just to make things look good, we use the built-in button-styling classes, btn and btn-success. Now comes the interesting part, rel="popover", this tells that Dude, I have a popover embedded into me, stay calm. (Well, browsers don't speak; but you got the point ;) ). Technically, it's the relevance identifier.<a href="#" id="example" class="btn btn-success" rel="popover" data-placement="bottom">hover for popover</a>
The last property is the orientation of the popover, I am just using bottom for demonstration purposes, but for native Windows Look, use data-placement="top".
Now if you hover over the buttons you see: well, nothing. That's because the popovers are opt-in meaning that, you have to trigger them. To trigger that, we add a little jQuery.
Now the code should look like this: (after the jQuery code)
Let's see the code, line-by-line.
Those of you who are unfamiliar with jQuery, there are selectors, and we use selectors to select HTML elements, and apply the magic, to perform some action when the page loads, we use
Code: Select all
The next line, sets the variable 'img' with the HTML image link of the image you want. This can be anything.
$(function() {
// This code will be executed once the page has finished loading.
});
Now, as I told you that popovers are opt-in , let's trigger 'em.
To do that, $(selector).popover({properties}); has to be called.
Let's look at one such trigger:
$("#example1").popover({ title: 'Preview', content: img, html:true });
The selector here is the element with the id of example1 (remember we had set an id to the anchor tag) and then calls the popover function.
We see that there is a Title property which tells it so set the title accordingly (here 'Preview'), next we tell the content we want in the popover, which, in this case is the variable we defined earlier: imgdoes that. Lastly, for the popover to render correctly, we tell it that the content we will be passing is of type html.
And voila! We are done.
Live Preview: http://labsvisual.no-ip.biz/tutorials/wtsk/
For all those lazy bums, here is the code: (5 code credits, hope you don't mind)
This file is hosted off-site.
------
Think that the tutorial was not up to the mark? Throw in your comments to help me improve the quality of my tutorials.
Quick Profile
Information
Posts: 622
Joined: Thu Jun 17, 2010 11:54 pm View Full Profile
GREAT tut thanks bro going to use this a lot
Quick Profile
Information
Posts: 151
Joined: Sat Dec 22, 2012 1:49 am View Full Profile
#visualtech awesome.. good info. 
keep on posting...!!! +rep
keep on posting...!!! +rep
3 posts
Page 1 of 1
Copyright Information
Copyright © Codenstuff.com 2020 - 2023