Using jQuery to Create a Right Click Function to Save Website Logo

Using jQuery to Create a Right Click Function to Save Website Logo

How many times have you tried to right-click and save the logo of a website? And how many times has the resulting image been of very poor resolution? Many sites provide a press page with some hi-res logos and images, but these press pages are not easy to reach.

How can we get the best of press images with the ease of a right-click? Inspired by the Akismet Homepage we are going to create a modal box for downloading press images when the page logo is right-clicked.

Akismet Press

[tut demo=”http://www.onextrapixel.com/examples/akismet-press/” download=”http://www.onextrapixel.com/examples/akismet-press/akismet-press.zip”]

How Does it Work?

It’s pretty easy, all we need to do is intercept the right click on our logo, and instead of showing the context menu, a modal box will appear. Right over the logo. jQuery will be our friend and some CSS3 magic will make everything look nicer. Let’s take a look at the HTML first.

<!DOCTYPE HTML>
<html lang="en-US" class="no-js">
	<head>
		<meta charset="UTF-8">
		<title>jQuery Press Modal</title>
		<link rel="stylesheet" type="text/css" media="all" href="styles/reset.css" />
		<link rel="stylesheet" type="text/css" media="all" href="styles/style.css" />
		<script src="scripts/modernizr.min.js"></script>
	</head>
	<body>
		<header role="banner" id="banner">
			<a href="#">
				<img src="images/oxp-logo.png" alt="Logo" id="logo"/>
				<h1>Example Header</h1>
			</a>
			<nav role="nav">
				<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#">About</a></li>
					<li><a href="#">Contact</a></li>
				</ul>
			</nav>
		</header>
		<section id="content" role="main">
			<h1>Right click on the Logo<br/>and let the magic happen.</h1>
		</section>
		<script src="scripts/jquery.min.js"></script>
		<script src="scripts/script.js"></script>
	</body>
</html>

Nothing strange here, notice we are using HTML5, and Modernizr will help us with older browsers.

It’s Time for JavaScript

After the jQuery is included it’s time for our script to execute. When the DOM is ready we will bind the right-click on the logo with the appearance of the modal box. Sounds easy.

$(document).ready(function() {
    $('#logo').bind('contextmenu',function(e) {
	// check if right button is clicked
	if(e.button === 2) {
		showPressModal();
		e.preventDefault();
	}
});

We will check if the right button is clicked, and if it is, let’s show the user our modal. Remember also to prevent the default behaviour of the right-click, otherwise, odd things might happen.

Showing and Hiding the Modal Box

Before showing the modal, we need to create the necessary elements, and load the modal content. For demo purposes our content is hard-coded inside the script, loading it with Ajax is a better solution.

// the modal window html
var logos = '<h2>Looking for our Logo?<span class="close">X</span></h2>';
logos += '<img src="images/oxp-logo.png" alt="Logo Download" />';
logos += '<ul><li><a href="images/oxp-logo.png" rel="external">High Res<span>300 Kb</span></a></li>';
logos += '<li><a href="images/oxp-logo.png" rel="external">Low Res<span>150 Kb</span></a></li></ul>';

function showPressModal() {
	// if no shadow is visible then no modal is displayed
	if($('#shadow').length === 0) {
		$('#banner').append('<div id="press-modal"></div>');
		$('body').prepend('<div id="shadow"></div>');
		$('#press-modal').append(logos).hide().slideDown();
		$('#shadow').hide().fadeIn();
	}
}

function hidePressModal() {
	$('#shadow').fadeOut(400, function() {
		$(this).remove();
	});
	$('#press-modal').slideUp(400, function() {
		$(this).remove();
	});
}

First, we add a nice shadow to the body, then we append the modal content to the modal container. We hide both the modal and the shadow and we make them fade in or slide down. Some additional checks are required to prevent multiple modal boxes from showing.

When hiding the modal box we remove the shadow and the box with some nice effects.

Making Things Better

Some additional scripting is required for completing the behaviour of the modal box. For example when clicking the shadow or the close button on the box, everything should disappear. Insert the following code in the $(document).ready() function

// when clicking on the shadow or on the close button
$('#shadow, .close').live('click', function() {
	hidePressModal();
});
	
// open links with rel="external" in a new window or tab
$('a[rel="external"]').click( function() {
        window.open( $(this).attr('href') );
        return false;
});

Making Things Look Pretty

Now that our press modal box shows up, It’s time to position it correctly and give it a nice look.

body {
    font-family: 'Helvetica Neue', Verdana, sans-serif;
    margin: 0;
}

#shadow {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 10;
}

#press-modal {
    position: absolute;
    background: #FFFFFF;
    width: 320px;
    padding: 20px;
    top: 0;
    z-index: 20;
    -webkit-border-bottom-left-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    -moz-border-radius-bottomright: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;	
}

#press-modal h2 {
    color: #666666;
    line-height: 20px;
    position: relative;
}
	
#press-modal h2 span {
    position: absolute;
    right: 0;
    top: -2px;
    display: block;
    padding: 0px 5px;
    background: #CC0000;
    cursor: pointer;
    color: #FFFFFF;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
		
#press-modal h2 span:hover {
    background: #FF0000;
}
	
#press-modal img {
    margin: 10px 0;
    max-width: 100%;
}

#press-modal ul {
    border-top: 1px solid #CCCCCC;
}
	
#press-modal ul li {
    border-bottom: 1px solid #CCCCCC;
    border-left: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
}
		
#press-modal ul li a {
    text-decoration: none;
    font-size: 14px;
    color: #44c9aa;
    display: block;
    position: relative;
    padding: 10px 20px;
}
			
#press-modal ul li a:hover {
    background: #EFEFEF;
}
			
#press-modal ul li a span {
    position: absolute;
    right: 20px;
    color: #999999;
    font-size: 12px;
}	

#banner {
    width: 960px;
    margin: 0 auto;
    height: 150px;
    position: relative;
}

The shadow must fill all the page with a transparent black color. Position your header relatively position: relative; and consequently position the modal absolutely over it. Making the modal box appear right over the logo gives the user the idea that they have done the right action, whereas, placing the modal at the center of the page would confuse the user.

[tut demo=”http://www.onextrapixel.com/examples/akismet-press/” download=”http://www.onextrapixel.com/examples/akismet-press/akismet-press.zip”]

Final Thoughts

The code is not bullet proof and might need some further improvements, but perfection wasn’t the purpose. It wanted to show you how small things can improve the user experience significantly and how you can make logo-downloading a pleasure.

Have you any suggestions on how this can be improved? Have you found other small things that matter that you want to discuss or go deeper into with us? Let us know in a comment, participation is really appreciated and makes everyone learn something new.

Luca Degasperi is a Web developer & designer, iOS developer with the passion for beautiful and usable things. Always following the latest trends of technology. Currently studing interfaces and communication technologies at the university of Trento, Italy.

Comments

  1. / Reply

    I wonder if you could duplicate the functionality for a long-press on iOS devices, and/or the equivalent on other smart phone?

    1. / Reply

      Just tested on android (firefox), didn’t work as-is.

        • Luca Degasperi,
        • July 25, 2011
        / Reply

        probably using the mousedown event and a timer you can simulate the long tap. Right now I don’t know if there is already an event for long taps in iOS or Android devices.

        By the way thanks for the feedback!

    • Michael Gunner,
    • July 25, 2011
    / Reply

    I’m not sure this would be brilliant for website logos. And how are you going to communicate the function exists, unless the user actually right clicks? In those situations where someone is browsing a site, looking for high res logos, they’d be more likely to try and find it in a “Media” section of the site etc.

    However, what this would be incredible for is either a photo gallery or a shopping cart, but with left-click, not right click.

      • Luca Degasperi,
      • July 25, 2011
      / Reply

      Hi Michael, the intent of this script is to offer user who try to download your logo by right clicking it a better version of the logo. It can be ‘resumed’ in this scheme of interaction.

      User tries to download logo
      It right clicks it
      Modal appears
      User: “oh cool, hi res logo! Download”
      Site has better reputation now

    1. / Reply

      Michael, I’d have to disagree with this having value of a “left-click” action. No one left clicks an image unless they are expecting a zoom image or link. People right click images mostly if they want to copy or save it. In this case, it makes perfect sense because we are giving them a choice in case they want a higher resolution image to work with.

  2. / Reply

    it was nice for the interface using jQuery or javascript related , to make a Magical Logos .
    but in this case it would be great for form login related ,
    after click the Logo , people can sign up or take a look his/her own profile .
    but i really like the function the idea .
    Nice work dude , it was nice Share ..
    :)

      • Luca Degasperi,
      • July 26, 2011
      / Reply

      Thank you very much :)
      By changing the context menu event to click it should be possible to make what you intended.

  3. / Reply

    It would be good if all hi-res images were stored in one directory with a consistent filename to their on-page counterpart. Then you could quite easily test for the existence of a hi-res version of any image on the right click and present the relevant download options. If it isn’t available then you can abort the hi-def side of things and show the standard right button menu?

      • Luca Degasperi,
      • July 26, 2011
      / Reply

      You will probably deal with a blocking Ajax request in order to check if the image exists, and provide a fallback if the server responds with a 404 code. My personal opinion about this method is that it is useless: if you don’t have an hi res image, you probably don’t want to implement this script :)

      Thanks for the comment!

    • Josh,
    • July 30, 2011
    / Reply

    I just tried the demo in Chrome (12.0), and it didn’t work. The usual options to copy, save image, save link, etc came up.

      • Luca Degasperi,
      • August 2, 2011
      / Reply

      I’ll fix it as soon as possible, thanks for the feedback!

    • Luca Degasperi,
    • August 2, 2011
    / Reply

    I have just checked the demo with chrome 12 on the mac and it works fine, are you sure javascript is enabled?

    Let me know!

  4. / Reply

    WOW full stylish
    i changes this #logo-modal position to be fixed ;)
    ty ty ty ☺

    • Ad,
    • November 25, 2011
    / Reply

    Did anybody make a html4 version? I tried to convert everything but it’s working buggy :(

    • Doug,
    • December 30, 2011
    / Reply

    Not sure if anyone else had this problem but I needed to use the “live” event handler with a “click” parameter to get images to open in a new window:

    $(‘a[rel=”external”]’).live(‘click’, function() {
    window.open( $(this).attr(‘href’) );
    return false;
    });

    Instead of:

    $(‘a[rel=”external”]’).click( function() {
    window.open( $(this).attr(‘href’) );
    return false;
    });

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals

Elegant Themes Coupon Code: 20% discount

While most other WordPress theme sites charge per theme, Elegant Themes is an amazing deal as you pay just once for access to 87 premium WordPress themes and a…

WrapPixel Coupon – 25% Discount

If you’re looking for an HTML or PSD template for your next website, checkout the selection of templates at WrapPixel made for web developers, designers, and agencies. You can…