Styling current page menu link using jQuery

-
We can easily style the current page url in menubar using jquery. All you have to do is just follow to snippets.

[code lang="css"]
#menu ul{ list-style-type:none; width:100%; background:#000000}
#menu li{padding:5px;display:inline-block}
#menu li a{ text-decoration:none; color:#FFFFFF; font-weight:bold}
#menu li a:hover{ background:#CCCCCC; color:#000000}
#menu li a:active{ background:#CCCCCC; color:#000000}
.current-menu{ background:#CCCCCC; padding:6px 5px 5px}
.current-menu a{ color:#000000;}
[/code]

Paste the css it in the header.

[code lang="php"]
<div id='menu'>
<ul>
<li><a href="http://localhost/menu/index.php">Home</a></li>
<li><a href="http://localhost/menu/products.php">Products</a></li>
<li><a href="http://localhost/menu/services.php">Services</a></li>
<li><a href="http://localhost/menu/contact.php">Contact</a></li>
</ul>
</div>
[/code]

Add the menu in your preferred location.

[code lang="js"]
var url =window.location;
$(".primary-menu a").each(function() {
if($(this).attr('href') == url){
$(this).addClass('current-menu');
}
});
[/code]

Add the above script after adding jQuery library.
jQuery.each() helps to go through all anchor tags.
To know more about each() 5 jQuery.each() Function Examples

Comments

Post a Comment

Popular posts from this blog

Send email from xampp localhost

-
Send email from xampp localhost. Follow the easy steps Goto http://glob.com.au/sendmail/ , download latest sendmail package. Extract the zip file and copy the files into your \xampp\sendmail folder(Replace every file in the existing folder). Update the sendmail.ini file in sendmail folder with the following details, and make sure it is not commented(;). smtp_server=smtp.gmail.com smtp_port=25 error_logfile=error.log debug_logfile=debug.log auth_username=yourname@gmail.com auth_password=gmailpassword force_sender=yourname@gmail.com Here i have added gmail account for sending emails. Open xampp\php\php.ini file find sendmail_path and update its value to "\"C:\xampp\sendmail\sendmail.exe\" -t" . Now it will look like below sendmail_path = "\"C:\xampp\sendmail\sendmail.exe\" -t" Make sure it's not commented(;) Restart your apache server. Now you can send email from xampp localhost! enjoy :-)
Read more

Modify item price in cart after placing order using sales_quote_add_item

-
We can easily modify product price after placing order in magento using the event sales_quote_add_item . We can see this hook registered in app/code/core/Mage/Sales/Model/Quote.php line:874. This is the event created by magento. Mage::dispatchEvent('sales_quote_add_item', array('quote_item' => $item)); We can access $item values using its registered event name sales_quote_add_item and we can modify the price with our logic.
Read more

Convert long url to short url using tinyurl api

-
Tinyurl provides us a short and simple service to convert long URL to small(tiny) URL. We can send email without link breakage. Here is the tinyurl api to get shorten url. You can use any of the method. Method 1: Use file_get_contents to fetch tinyurl. echo file_get_contents('http://tinyurl.com/api-create.php?url=http://www.websnippetz.com'); file_get_contents is not working? If your are able to access php.ini file set allow_url_fopen = On or you can use the below method. Method 2: Use cURL (runs faster than file_get_contents) to fetch tinyurl. function get_tiny_url($url) { $url = "http://tinyurl.com/api-create.php?url={$url}"; $ch = curl_init(); $timeout = 5; curl_setopt($ch,CURLOPT_URL,$url); curl_setopt($ch,CURLOPT_RETURNTRANSFER,1); curl_setopt($ch,CURLOPT_CONNECTTIMEOUT,$timeout); $data = curl_exec($ch); curl_close($ch); return $data; } echo get_tiny_url('http://www.websnippetz.com');
Read more