Wednesday, July 7, 2010

Get Active/ Inactive/ Current tabs in Navigation Bar using PHP and jQuery

php Code
Step 1: Get current page URL using PHP

$phpSelf = $_SERVER['REQUEST_URI'];
jQuery Code

Step 2: Check whether URL is similar to navigation bar button url, if they are similar we give it as the current active page,
< script type="text/javascript" >
             var root_url =
             var phpSelf = root_url+"<?php echo $phpSelf;?>";
              $("#navigation li").each(function() {
                  var link = $(this).children("a").attr("href");
                  if(phpSelf == link){
 < /script >

to your active css class
http://localhost to website root directory

Have Fun !

Getting roles of logged in users in Moodle LMS

global $COURSE, $USER;

$context = get_context_instance(CONTEXT_COURSE,$COURSE->id);

if (has_capability('moodle/legacy:student', $context, $USER->id, false) ) {
echo "I'm a student";
if (has_capability('moodle/legacy:teacher', $context, $USER->id, false) ) {
echo "I'm an Assistant Teacher";
if (has_capability('moodle/legacy:editingteacher', $context, $USER->id, false)) {
echo "I'm  a teacher";
if (has_capability('moodle/legacy:admin', $context, $USER->id, false)) {
echo "I'm Admin";

Tuesday, July 6, 2010

Use CSS Sprites, Save Bandwidth

Saving Bandwidth and Improving Site Speed Using CSS Spites
As a site owner, possibly the worst experience that you could serve upon your visitors is a frustrating wait whilst the clock spins and the page loads. In most cases, most of your potential customers would have pressed the back button in their browser and headed off somewhere else; this inevitably means a loss of potential business.
Site speed is predicted to become one of Google’s next ranking factors, although as per normal, the company tends to keep the nitty-gritty close to its chest.

In a presentation in Las Vegas, when pressed on the subject of site speed integration into the Google search ranking algorithm, Matt Cutts, member of the Search Quality group at Google and a highly-regarded person in the SEO community, described this as one of his "what to expect in 2010" bullet points. He went on to explain that the company wanted search to be "real fast, as if you are flipping through a magazine."
What all of this should tell us is that if you wish your site to be user-friendly and well-positioned within the ranks of the major search engines, then you should be looking at ways to improve your web page performance. Apart from the myriad of options displayed in Google Webmaster Tools, including consolidating and compression of external files, and checking for broken links on your website, I would recommend looking at the way you use images. One of the best web design techniques out there is the use of CSS sprites.

What are CSS Sprites?

It may be a common misconception that a sprite implies a series of small images. The opposite, in fact, is the truth — a CSS sprite is one large image.
You may be aware of the CSS technique of displaying an "on/off" state for a button which is contained within a single image and positioned using the background-position CSS attribute on :hover (see the tutorial on a button that uses CSS sprites). CSS sprites are basically the same concept: The image is displayed on the page using the coordinates specified in your CSS, and only this area will be visible.
It is easy to believe that a number of small images are likely to be less heavy in total file size than one containing all of the images positioned together. But even if you may have images that are only a few bytes in size, each one is giving your web server unnecessary work to do by sending an HTTP request. Each request contains a portion of overhead information that uses valuable site bandwidth.
Using CSS sprites can reduce the number HTTP requests and can make the web page seem more responsive because all interface elements are already downloaded before the user handles them. This technique can be very effective for improving site performance, particularly in situations where many small images, such as menu icons, are used.

Building a Basic CSS Image Background Sprite

Let’s discuss this topic using an example. Using Photoshop, I created a document with a series of images (logos of companies) and divided the area into chunks of 100 pixels (see the images below). I saved the file and named it logos.jpg.
I used 100-pixel measurements between logos for the purposes of illustrating the concept in this article and because this was a convenient distance to move the position of the CSS background image each time when manipulating the coordinates in my CSS (you should be more accurate when actually applying CSS sprites to reduce its file size further).
The CSS background image is focused on displaying only the first logo as defined by the green border — the coordinates of which are y = 0 and x = 0.
What are CSS Sprites?
To position them, we use the background-position attribute.
What are CSS Sprites?
To display the second image alongside the first, all that is necessary is to adjust the coordinates on the x-axis.
Because of the way we have constructed the image (at 100-pixel intervals), all we need do is add a line of CSS advancing the x-axis by 100 pixels to display each logo.

CSS for the CSS Background Sprite

#logos {height: 64px; margin: 0; padding: 0; position: relative;}

#logos li {background: url(/logos.jpg) no-repeat top left; margin: 0; padding: 0; list-style: none; position: absolute; top: 0;}

#logos a {height: 64px; display: block;}
// First logo
#logos li a.jaz {background-position: 0 0}
// Second logo
#logos li a.iberotel {background-position: 0 -100px;}
// Third logo
#logos li a.solymar {background-position: 0 -200px;}
// Fourth logo
#logos li a.travcotels {background-position: 0 -300px;}
// Fifth logo
#logos li a.intercity {background-position: 0 -400px;}

The Results of Using CSS Sprites

The Results
In the example above, it was possible to reduce the file size from 52kb to 22kb and the number of HTTP requests from 5 to 1. This represents a good saving, and is only one small section of a web page!
Our new CSS sprite method tests well in most modern browsers. The notable exception is Opera 6 (all Opera versions, not just Opera 6, comprise 1.98% of all web browser usage[1]), which doesn’t apply a background image on link hover states. The links still do work, and if they’ve been labeled properly, the net result will be a static — but usable — image map in Opera 6. This could be an acceptable price to pay, especially now that Opera 7 has been around for a while.

CSS3 Sample Tutorial Techniques

Examples of CSS3 in the Wild
Seeing CSS3 on actual functioning websites is a lot like spotting a Himalayan Snow Leopard or a Giant Panda. Because roughly 53 percent of browsers in use don’t support CSS3 (ahem, IE, ahem), most web designers just don’t use it on a regular basis. At least they don’t use it on sites they design for work. As such, most people don’t see it regularly, and if they do, it’s just a fleeting glimpse.

That’s not to say it’s not out there – again, like with snow leopards and pandas, to see CSS3 in the wild, you need to be stealthy, smart, and patient.
So, with out further ado, here are some examples of CSS3 in the wild. But please – make sure to avoid big, sudden movements. You don’t want to scare it off.
To learn more about CSS3, you should also check out these articles and tutorials:

Rounded Corners

How We Did Rounded Corners Before

By creating separate images for the corners of a box, or by using JavaScript to mask sharp edges.

How We Do Rounded Corners with CSS3

border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;

Examples of CSS3 Rounded Corners

The rounded corners on these following sites are pretty obvious and fairly simple looking, but as any web designer knows, they weren’t so simple to create without CSS3.

Text Shadow

How We Did Text Shadow Before

By creating two elements with the same text, giving one of them the shadow color, offsetting it one or two pixels, and placing it behind the main text using the z-index CSS property.

How We Do Text Shadow with CSS3

text-shadow: 2px 2px 4px #000;

Examples of CSS3 Text Shadow

The sites below each use text shadow in a different way.
Jolicloud uses CSS3 Text Shadow throughout the site.
A Different Design
A Different Design uses a white text shadow in the site’s name to give the text that cool "embossed" look.
A Different Design
Over at Time2Project, the "who," "what," and "where" menu links use text shadow to highlight themselves when you hover over them – very cool.

Box Shadow

How We Did Box Shadow Before

By creating an image of the box with a shadow or by using a JavaScript plugin.

How We Do Box Shadow with CSS3

box-shadow: 2px 2px 4px black;
-moz-box-shadow: 2px 2px 4px black; 
-webkit-box-shadow: 2px 2px 4px black; 

Examples of CSS3 Box Shadow

Again, with the two sites below, we can see two very different ways of using the same CSS3 technique.
camen design
At camen design, the footer stays in the same place, and box shadow is used to give the illusion of the main content area sliding underneath the footer.
camen design
Over at CSS-Tricks, the box shadow effect is used on pretty much every box on the site, highlighting whichever box you hover your mouse on.

RGBA Colors

How We Did RGBA Colors Before

By calling a PHP script within CSS, thereby tricking the browser into overlaying colors in RGBA format. In no way could this be thought of as a good way of doing things, as it leads to lots of extra code in the PHP file that you’ll never use again.

How We Do RGBA Colors with CSS3

background: rgba(150, 25, 150, 0.5);

Examples of CSS3 RGBA Colors

International Gorilla Conservation Programme (IGCP)
Check out the awesome translucent gorilla on the IGCP site. Now look slightly to the right. That box around the video player uses RGBA as a way to layer a semi-transparent container on top of the banner behind it.
International Gorilla Conservation Programme
24 ways
24Ways uses the effect throughout the site, but it’s most noticeable on the top, where hovering over the headline banner uses RGBA to increase the opacity.
24 ways

Opacity Level

How We Did Opacity Levels Before

By creating PNGs with transparency, or by using CSS filters for IE.

How We Do Opacity Levels with CSS3

opacity: 0.5;

Examples of CSS3 Opacity Levels

Changing the opacity level with CSS3 is one of the coolest ways to add to the user’s interface experience and also one of the simplest, as it takes very little code.
At Bunton, each individual box uses opacity to show the designer’s comments about his portfolio – all that info is there all the time, it’s just got an opacity of 0 before you hover over it.
Peaxl uses it even more subtly in the "subscribe" box, making the existing text fade away slowly when you click it.
31Three uses it on its portfolio examples as well, making each circle light up ever so slightly with your hovering mouse. Nice.


How We Did Gradients Before

Image slice of gradient repeated as a background image.

How We Do Gradients with CSS3

background: -moz-linear-gradient(100% 100% 90deg, #1a1a1a, #808080)
background: -webkit-gradient(linear, 0 0, 0 100%, from(#1a1a1a), to(#808080));

Example of CSS3 Gradients

Philadelphia FIRST
While this example isn’t the most beautiful or breathtaking example of CSS3, it might be the most practical. By making the blue banner on top fade into a lighter blue by using CSS3 instead of an image, the site isn’t required to serve that image every time. Little things like that make a difference for a heavily-traffic site, and it shows what can be accomplished with CSS3 once it becomes the standard.
Philadelphia FIRST

@Font-face, Text Shadow, RGBA, Rounded Corner

(aka The Holy Grail of websites that currently use CSS3*)

How We Made Sites Like This Before

We didn’t.

How We Make Them Now

With CSS3. Lots of CSS3.

Examples of CSS3 Sites

The following sites are examples of what one can do with CSS3.
Of course, because CSS3 isn’t implemented in all browsers yet, and implementation of browsers that do use CSS3 can vary, not all of these will render correctly on every browser.
However, it’s an interesting look on what’s soon going to be possible in the world of web design.
Mozilla Labs Jetpack
Mozilla Labs Jetpack

Excellent CSS Navigation Bar Techniques

1. The Menu menu

The Menu menu

This another great CSS menu Stu Nicholls that’s unique – hovering over a menu item reveals a submenu. If you want get started with this menu just simple view the source code. Demo in page.

2. Pure CSS hover menu

Pure CSS hover menuView Demo
In this CSS technique, you’ll learn to create a vertically-oriented CSS hover menu that reveals a submenu when a menu item is hovered on.

3. Matte CSS Menu

 CSSView Demo
Matte is a simple CSS menu with rounded corners using two small images only from 13styles. It is maintained by David Appleyard who has lots of simple and advanced CSS-based menus.

4. CSS Blur Menu

CSS Blur MenuView Demo
This CSS technique shows you a method from creating a menu that blurs sibling menu items when you hover over an item.

5. CSS Navigation with Glowing Icons

CSS Navigation with Glowing IconsView Demo
This beautiful CSS menu technique can be created by following along this extensive step-by-step tutorial.

6. CSS Sliding Door using only 1 image

CSS Sliding Door using only 1 imageView Demo
This slick CSS menu is based on the Sliding Doors technique but only uses one image.

7. Navigation Matrix Reloaded

Navigation Matrix ReloadedView Demo
This stylish navigation menu technique uses a CSS sprite.

8. CSS Horizontal Menu

CSS Horizontal MenuView Demo
Ian Main provides a great set of free CSS menus that are stylish and easy to use.

9. Woody CSS Menu

Woody CSS Menu.
Woody is a pre-made CSS menu that’s ready to use and has been tested in IE6, IE 7, Firefox, Opera, Safari, Chrome. Demo in the page.

10. Advanced CSS Menu

Advanced CSS Menu
Advanced CSS Menu was created by Nick La and uses an advanced (extraordinary) list menu utilizing the CSS position property. Demo in the page.

11. Simple Yellow Tabbed

Simple Yellow Tabbed
This menu is from CSS Menu Generator which has more free high quality menus. Demo in the page.

12. Vimeo-Like Top Navigation

Vimeo-Like Top NavigationView Demo
This CSS-based navigation menu is based on the Vimeo primary menu.

13. Apple Like Colorful CSS Menu

Apple Like Colorful CSS Menu
Learn a technique for mimicking Apple’s image rollover CSS menu by following along this menu tutorial. Demo in page.

14. CSS Hoverbox

CSS Hoverbox
Inspired by the Hoverbox Image Gallery technique developed by Nathan Smith, CSS Hoverbox leans on the background-position CSS property to superimpose rollover images on top of neighboring menu items. Demo in page.

15. Big CSS Box

 CSS Box
This is an experimental CSS menu that allows you to create a scaling menu that adjusts depending on the browser’s width. Demo in page.

16. Simple CSS-based drop-down menu

Simple CSS-based drop-down menuView Demo
This is a very basic CSS-based drop-down menu that’s excellent for trying to grok the technique involved in creating drop-down menu that doesn’t require client-side scripting.

17. Two Level Horizontal Navigation in CSS

Two Level Horizontal Navigation in CSSView Demo
Veerle Pieters provides a CSS menu and tutorial created using text-indent CSS property.

18. Uberlink CSS List Menus

Uberlink CSS List MenusView Demo
This CSS navigation bar looks and behaves like an image-swapping menu.

19. CSS-Only Accordion Effect

CSS-Only Accordion EffectView Demo
In this technique, you’ll witness a method for creating a CSS-based accordion menu.

20. Tabbed Navigation Using CSS

Tabbed Navigation Using CSS
Here is another excellent method for creating a module tab interface based purely on CSS. Use the tabs in the page to learn about the instructions on how to implement this technique.

21. CSS Mini Tabs (the UN-tab, tab)

 Mini Tabs (the UN-tab, tab)View Demo
This CSS menu on the popular web design agency SimpleBits shows a way for creating mini tabs. View the source code on the demo page to learn how it works (the code is inline and formatted well for readability for your convenience).

22. Drop-Down Menus, Horizontal Style

Drop-Down Menus, Horizontal StyleView Demo
This A List Apart CSS menu technique is for a fly-out submenu that appears on the right of the top-level menu, leveraging the position: absolute CSS property to move the submenu to the appropriate level.

23. List Into a Navigation Bar

List Into a Navigation BarView Demo
Roger Johansson of 456 Berea Street shows us the basic principles of turning an unordered list into a navigation bar – it’s a great starting point for beginners to learn about building a semantic HTML structure and then styling it with CSS.

24. CSS Tabs with Submenus

CSS Tabs with Submenus
This CSS menu technique will allow you to create CSS tabs that have submenus for a two-level hierarchy. Demo in page.

25. CSS Block Navigation Menu

CSS Block Navigation Menu
This CSS menu technique allows you to create a navigation menu that has item with descriptions. Demo in page.

26. XHTML & CSS Sprite Navigation

XHTML & CSS Sprite NavigationView Demo
This stylish CSS sprite menu technique has three states: idle, hover, and clicked.

27. XHTML CSS Tabbed Menu

XHTML CSS Tabbed MenuView Demo
Learn how to create module tabs without the use of client-side scripting.

28. Cool, Simple, Horizontal CSS Menu

XHTML & CSS Sprite NavigationView Demo
Learn to create a straightforward technique for creating a CSS based menu.

29. CSS Menu with Descriptions

CSS Menu with DescriptionsView Demo
This technique showcases a method for creating a menu that expands when hovered upon.

30. CSS Hover Button

CSS Hover ButtonView Demo
Create CSS button-style navigation menu by checking out this excellent tutorial.

Related content

Popular Posts