Ricardo Zea PRO
Sr. Web Designer
A Designer's Journey Into JavaScript
By: Ricardo Zea - Full-Stack Designer
August 20, 2015
Lightning Talk - GemCity JS
Nothing
A Designer's Journey into JavaScript
In the beginning there was
Designer
A Designer's Journey into JavaScript
Then I decided to become a
A Designer's Journey into JavaScript
Design + HTML & CSS
Using front-end technologies to bring designs to life.
A Designer's Journey into JavaScript
Something lurks
in the shadows...
A Designer's Journey into JavaScript
JavaScript
A Designer's Journey into JavaScript
JavaScript helps me fight the bad guys!
:D
A Designer's Journey into JavaScript
JavaScript has a MASSIVE army of scripting warriors!
Design + HTML & CSS + JavaScript
A Designer's Journey into JavaScript
A Designer's Journey into JavaScript
:}
Design + HTML & CSS + jQuery
A Designer's Journey into JavaScript
How a designer uses jQuery:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script><script>window.jQuery || document.write('<script src="js/jquery-2.1.4.min.js"><\/script>')</script>Call to main library
Fallback call to local library
A Designer's Journey into JavaScript
<snippet>
<content><![CDATA[
\$("${1:.selector}").method(function() {
\$(".selector").method("selector");
});
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>jqf</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->
</snippet>jQuery function snippet in Sublime Text:
Tools » New Snippet...
Note the back slash in front of the $ signs. They are required but they won't be added to the snippet when used.
How a designer uses jQuery:
A Designer's Journey into JavaScript
jQuery function snippet in Sublime Text:
Tools » New Snippet...
How a designer uses jQuery:
A Designer's Journey into JavaScript
Examples
A Designer's Journey into JavaScript
Examples
A Designer's Journey into JavaScript
Examples
//Collapse dropdowns when clicked anywhere on the page or outside the dropdown itself
var mouse_is_inside = false;
$('.dropdown, #top-right-links, #megamenus').hover(
function(){
mouse_is_inside=true; },
function(){
mouse_is_inside=false;
});
$('body').mouseup(function(e){
e.stopPropagation();
if(! mouse_is_inside)
$('.dropdown li ul, ul#top-right-links li.product-sign-in ul, #megamenus div.menu-container').slideUp(function(){
$('.selected').removeClass('selected');
$('ul#top-right-links li.active').removeClass('active');
});
});
}
//Top dropdowns (including Product Sign In)
$('.dropdown li').click(function(){
//Fix the z-index stacking issue in IE6-7
$(this).parents().addClass('on-top');
//Hide all other drop downs that are visible, and remove the class 'active'
$(this).siblings('.active').removeClass('active');
$(this).siblings().find('ul:visible').slideUp();
//Hide any megamenu that's currently visible
$('div.menu-container:visible').slideUp(function(){
$('.click-menu h6 span.selected').removeClass('selected');
});
//Hide the drop down from the search field if it's visible
$(this).parent().siblings().children().find('.search-options-container:visible').slideUp();
//Show/Hide dropdowns
$(this).toggleClass('active');
$('ul:first',this).stop(true, true).slideToggle();
});
//Megamenus
$('.click-menu h6 span').click(function(){
//Hide any drop downs that are visible, remove the class 'active'
$('.dropdown li ul:visible, .search-options-container').slideUp();
$('.dropdown li.active').removeClass('active');
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
$(this).parent().next().stop(true, true).slideUp('slow', function() {
$('h4').css('z-index','1');
});
} else {
$('.click-menu h6 span').removeClass('selected');
$(this).addClass('selected');
$('.click-menu div.menu-container').slideUp('slow');
$(this).parent().next().stop(true, true).slideDown();
$('h4').css('z-index','0');
}
$("#ps-mm .col").equalHeights();
$("#industries .col").equalHeights();
});
//Close button X
$('.close-button').click(function(){
$('.click-menu div.menu-container:visible').slideUp('slow', function() {
$('h4').css('z-index','1');
$('.click-menu h6 span').removeClass('selected');
});
});
//Add the class "no-border" to columns 2, 3 and 5 in the Shop/Store megamenu
$('#store .col:nth-child(2), #store .col:nth-child(3), #store .col:nth-child(5)').addClass('no-border');
//Search field drop down menu
$('input#searchfield').focus(function(){
$('.search-options-container').slideDown('fast');
//Hide any drop downs from the top nav and any megamenus that are visible
$('.dropdown li ul:visible, #megamenus .menu-container:visible').slideUp(function(){
// Remove the classes 'selected' and 'active' from the menu item
$('#megamenus span.selected,').removeClass('selected');
$('.dropdown li.active').removeClass('active');
});
});
//Close button
$('.close-options').click(function(){
$('.search-options-container').slideUp('fast');
});
//Checkboxes
$('#options-list :checkbox').change(function() {
$('#all').attr('checked', !$('#options-list :checkbox:not(:checked)').length);
});
$('#all').change(function() {
if ($('#all').attr('checked')) {
$('input[type=checkbox][id!=all]').attr('checked', 'checked');
} else {
$('input[type=checkbox][id!=all]').attr('checked', '');
}
});
//E-mail this Page
/*$(".fancybox").fancybox({
'titlePosition' : 'outside',
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'overlayOpacity' : '0.6',
'overlayColor' : '#000'
});*/
//Encapsulating the Registry symbol in <sup> tags in headings since they become too large - Modified by Anoop Chauhan on 5th April
$('h1, h3, h4, h5').each(function() {
var $this = $(this);
var html = escape($this.html());
html = html.replace(/(®)/, "<sup>$1</sup>");
html = html.replace(/(℠)/, "$1");
html = html.replace(/%AE/, "<sup>%AE</sup>");
$this.html(unescape(html));
});
//Watermarks/Hints
/*$('#searchfield').watermark('— Search...');
$('#publicationsfield').watermark('— Search Publications...');*/
//New Window
//Make all links with improper '_blank' and '_new' targets, use 'nw'
$("a[target='_blank'], a[target='_new']").attr('target','nw');
//target="nw"
$(".grid_3 a[target='nw'], .grid_9 a[target='nw'], #ps-mm ul li a[target='nw'], .nwl a[target='nw'], .product-sign-in a[target='nw'], .prod-list a[target='nw'], .contact-ln a[target='nw'], .list-container a[target='nw'], .menu-container a[target='nw'], .headings-above-tabs a[target='nw']").addClass("nw");
//target="_blank"
$(".grid_3 a[target='_blank'], .grid_9 a[target='_blank'], #ps-mm ul li a[target='_blank'], .nwl a[target='_blank'], .product-sign-in a[target='_blank'], .prod-list a[target='_blank'], .contact-ln a[target='_blank']").addClass("nw");
$(".jp ol.grid li span a[target='_blank']").addClass("nw nw-visible");
//target="_new"
$(".grid_3 a[target='_new'], .grid_9 a[target='_new'], #ps-mm ul li a[target='_new'], .nwl a[target='_new'], .product-sign-in a[target='_new'], .prod-list a[target='_new'], .contact-ln a[target='_new'], .product-description a[target='_new']").addClass("nw");
$(".jp ol.grid li span a[target='_new']").addClass("nw nw-visible");
//Adds/Replaces the title attribute in all links that open in a new window
$('a[target="nw"], a[target="_blank"], a[target="_new"]').not('.twitter, .facebook, .youtube, .itunes, .rss, .mobile, .linkedin, .google-plus, .social-icons').attr('title','Opens in a new window/tab');
//Insert the background red-gray image in the top nav bar
if($('.no-gray-line').length<1){
$('<img src="http://www.lexisnexis.com/images/bg-main-nav.gif" alt="" class="jso">').prependTo('#page-title, .red-line-divider');
} else {
$('<img src="http://www.lexisnexis.com/images/bg-main-red-nav.gif" alt="" class="jso">').prependTo('#page-title, .red-line-divider');
/*$('.no-gray-line').after('<br class="clear" />');*/ //It is used for example page (31-customer-resources-example.aspx) in the mockups. So commenting this for now.
}A Designer's Journey into JavaScript
Where did I learn?
That's All Folks.
By: Ricardo Zea - Full-Stack Designer
August 20, 2015
Lightning Talk - GemCity JS
A Designer's Journey Into JavaScript
Gracias!
A Designer's Journey into JavaScript
By Ricardo Zea
A Designer's Journey into JavaScript
The story of how a web designer deals with JS and jQuery.
