Rinniee Ginsburg
User Interface of a website is the prime factor to decide its overall ranking parameter. A website with a great graphic design or a website with bundles of information can’t be declared as the ideal website until it has an interactive as well as resourceful user interface.
To deal with the user interface section of a web page; a lot of new techniques and plugins are developed every day. These useful techniques can serve a particular query but can’t cover the complete UI algorithm. So to provide a help desk for every web developer I am presenting you the Tutorial section of Best 5 CSS/jQuery Techniques. These useful CSS/jQuery tutorial and techniques can help a user to enhance the User Interface stars of a website.
This list of best 5 CSS/jQuery Techniques includes the following tutorials that should be implemented for a resourceful user interface of the landing page.
=> Implementing A Drag control tool for oversized content
=> Full-page slider control for an innovative navigation algorithm
=> Designing a Comment Counting slab for resourceful interaction
=> On-page text search Tool Bar for a better UI
=> Tutorial to Implement Subtle hover effects for interactive UI
Tutorial : Implementing A Drag Control Tool For Oversized Content
Super large images and word clouds are really attractive but using these extra large content on the web page is surely a complicated hassle. So dropping the idea of magnified data content is the only solution of the problem? Actually it was until Mospromstroy showcased the innovative idea of using a Drag Control tool. This Drag Control tool allows you to use the images, timeline, live videos, animations and everything else in extra large dimensions on the web page.
If you too are looking to hit the idea of large data content on your website that you can use the below provide CSS/jQuery tutorial.
Step 1: Before concentrating on the core tutorial of the tool; let’s first point a spotlight on the Mark-Up data that must be used for the controls and content of the tool.
<div id="full-sized-area"> <div id="full-sized-content"> Your content here </div> </div> <div id="drag-controls-area"> <div id="drag-controls"></div> </div>
Now let’s integrate some fundamental CSS to the tutorial:
#full-sized-area {
position: relative;
overflow: hidden;
width: 800px;
height: 400px;
}
#full-sized-content {
position: absolute;
top: 0;
left: 0;
}
#drag-controls-area {
position: relative;
width: 300px;
height: 50px;
}
#drag-controls {
position: absolute;
top: 0;
left: 0;
height: 48px;
border: 1px solid white;
}
In the above tutorial we had fixed a definite position node to the #drag-controls and #full-sized-content. To make a better user interface we had also hidden the spill-out part of any large image and assigned some random dimension statistic to the Drag control of the web page.
Step 2: Adding Interactivity by using jQuery UI
After designing a rough design of the control; let’s add some interactivity to it with the help of jQuery user interface with movable module.
In our last section we had assigned a random dimension to the drag control so we must assign a definite dimension to it before stepping forward.
$(function() { var $fullArea = $('#full-sized-area'); var $fullContent = $('#full-sized-content', $fullArea); // find what portion of the content is displayed var contentRatio = $fullArea.width() / $fullContent.width(); // scale the controls box var $controlsArea = $('#drag-controls-area'); var $controls = $('#drag-controls', $controlsArea); $controls.css('width', $controlsArea.width() * contentRatio); });
In this section of code we had assigned the part of the content that we want to see in the content area and then had fixed the dimension of the control box accordingly.
Stepping forward; it’s time to attach the draggable feature to the control box:
$(function() { var $fullArea = $('#full-sized-area'); var $fullContent = $('#full-sized-content', $fullArea); // find what portion of the content is displayed var contentRatio = $fullArea.width() / $fullContent.width(); // scale the controls box var $controlsArea = $('#drag-controls-area'); var $controls = $('#drag-controls', $controlsArea); $controls.css('width', $controlsArea.width() * contentRatio); // determine the scale difference between the controls and content var scaleRatio = $controlsArea.width() / $fullContent.width(); // attach the draggable behavior $controls.draggable({ axis : 'x', // confine dragging to the x-axis containment : 'parent', drag : function(ev, ui) { // move the full sized content $fullContent.css('left', -1 * ui.position.left / scaleRatio ); } }); });
After the completion of this step, we are done with fixing the movable tool to the X axis. At the last we had also assigned the limits till which a user can drag the tool. For fixing this limit; we had negatively moved the content to the left by the amount (calculated after multiplying the drag amount by the ratio of the control with the provided content).
Step 3: Adding Custom Cursors for an Elegant User Interface
At this stage we have a completely working draggable content tool but we can add some more attributes to it for an elegant interface.
For this interactivity let’s first add some stylish note to the control box with the help of jQuery User Interface.
In this context we are using two classes of UI namely ui-draggable & ui-draggable-dragging.
#drag-controls.ui-draggable { cursor: -moz-grab !important; cursor: -webkit-grab !important; cursor: e-resize; } #drag-controls.ui-draggable-dragging { cursor: -moz-grabbing !important; cursor: -webkit-grabbing !important; border-color: yellow; }
Beside with adding a new border color to the active controls; this section of the tutorial integrates a no. Of other cursor traits for Firefox and Safari browsers.
As we had integrated these cursor traits to the design we are required to bootstrap this using the !Important command. This ensures that if the customized cursors are not compatible or unavailable with the internet browser than the default browser must replace the error.
Step 4: Parallax Effect
As per the predicted web trends 2013 Parallax effects are expected to be the popular website design tricks in the upcoming time. So as to enhance the UI of the web page we can also implement the Parallax effect in this tool. To implement this effect with our tool; we just need to add background at the content area and then have to animate it respectively.
Step A: Adding the mark-up
<div id="full-sized-area"> <div id="full-sized-background"> Your background here </div> <div id="full-sized-content"> Your content here </div> </div> <div id="drag-controls-area"> <div id="drag-controls"></div> </div>
Step B: Adding some basic styling parameters
#full-sized-background {
position: absolute;
top: 0;
left: 0;
}
In this Section we had locked the background with the help of absolute positioning attribute.
Step C: Combining the Background animation and Drag event
$fullBackground = $('#full-sized-background'); $controls.draggable({ axis : 'x', // confine dragging to the x-axis containment : 'parent', drag : function(ev, ui) { // move the full sized content var newContentPosition = -1 * ui.position.left / scaleRatio; $fullContent.css('left', newContentPosition); // move the background $fullBackground.css('left', newContentPosition * .4); } });
You can download this whole tutorial by clicking on the ‘Download’ button given below.
Tutorial: Full-Page Slider Control For An Innovative Navigation Algorithm
Page sliding animation is a very beautiful way of website navigation. Sliding animation can be undoubtedly termed as one of the most popular as well as interactive web design trend at the present scenario. By enriching this attribute to another level of effectiveness; JAX Vineyards had demonstrated a perfect example of attractive User Interface.
In this tutorial we will create the similar kind of effect with the help of jQuery.
To Proceed through; let’s first start by adding the markup
Step 1: Adding the Mark-Up & CSS
<div id="full-slider-wrapper"> <div id="full-slider"> <div class="slide-panel active"> Panel 1 content here </div> <div class="slide-panel"> Panel 2 content here </div> <div class="slide-panel"> Panel 3 content here </div> </div> </div>
In the above section we had added the fundamental mark-up & wrappers that we will need in the upcoming steps for animation. Before proceeding to the next step you must ensure that the Full-slide is narrower than the browser window.
Step 2: Add some basic CSS to deal with the Spill-Over of the content.
html { min-width: 800px; } #full-slider-wrapper { overflow: hidden; } #full-slider { position: relative; width: 800px; height: 600px; margin: 0 auto; } #full-slider .slide-panel { position: absolute; top: 0; left: 0; width: 800px; height: 600px; visibility: hidden; } #full-slider .slide-panel.active { visibility: visible; }
In the above section we had hidden the spill-out so it becomes a must to fix a min-width of the HTML document. This minimum width will be treated as a threshold limit and the content of the web page will be transformed into scroll bars if the size of the browser window drops below that prescribed value.
Finally, we used the active class that we established in the mark-up to show the first panel.
Step 3: Add the jQuery animation to the Slider
In this section we will add the jQuery animation to the tools with the help of the active classes that we had created at the first step of the tutorial. We will proceed the action by defining a list of variables and then subjecting the animation in both navigation directions.
$(function() { var $slider = $('#full-slider'); var $sliderPanels = $slider.children('.slide-panel'); function slidePanel( newPanel, direction ) { // define the offset of the slider obj, vis a vis the document var offsetLeft = $slider.offset().left; // offset required to hide the content off to the left / right var hideLeft = -1 * ( offsetLeft + $slider.width() ); var hideRight = $(window).width() - offsetLeft; // change the current / next positions based on the direction of the animation if ( direction == 'left' ) { currPos = hideLeft; nextPos = hideRight; } else { currPos = hideRight; nextPos = hideLeft; } // slide out the current panel, then remove the active class $slider.children('.slide-panel.active').animate({ left: currPos }, 500, function() { $(this).removeClass('active'); }); // slide in the next panel after adding the active class $( $sliderPanels[newPanel] ).css('left', nextPos).addClass('active').animate({ left: 0 }, 500 ); } });
As visible from the above code; here we had used a function slidePanel() which incorporates two arguments including panel and direction.
The panel argument determines the slide that we want to play where as the Direction argument determines the direction of the active slide i.e. left or right.
The finally generated function named animate() is used to remove the effect of active slide when the animation is complete.
Step 4: Designing the controls for animation
Till these steps we had assigned different functions to control the animation algorithm but we still need a simple and composite Control panel that can modify the animation from a single trigger.
var $navWrap = $('<div id="full-slider-nav"></div>').appendTo( $slider ); var $navLeft = $('<div id="full-slider-nav-left"></div>').appendTo( $navWrap ); var $navRight = $('<div id="full-slider-nav-right"></div>').appendTo( $navWrap );
We could have included this navigation in the initial markup, but we’re appending it with JavaScript for two reasons: it ensures that the navigation won’t appear until the JavaScript is loaded, and it keeps the navigation from being displayed on the off chance that JavaScript isn’t enabled.
Let’s style the navigation:
#full-slider-nav { position: absolute; top: 0; right: 0; } #full-slider-nav-left, #full-slider-nav-right { display: inline-block; height: 0; width: 0; margin-left: 15px; border: 20px solid transparent; cursor: pointer; } #full-slider-nav-left { border-right-color: #BBB; } #full-slider-nav-left:hover { border-right-color: #999; } #full-slider-nav-right { border-left-color: #BBB; } #full-slider-nav-right:hover { border-left-color: #999; }
With the aid of the above code we had assigned the default position to the top right and had chic the controls by the CSS Triangle trick.
After building this new slider navigation function; we need to combine this function with that previously created slidePanel() function.
var $navWrap = $('<div id="full-slider-nav"></div>').appendTo( $slider ); var $navLeft = $('<div id="full-slider-nav-left"></div>').appendTo( $navWrap ); var $navRight = $('<div id="full-slider-nav-right"></div>').appendTo( $navWrap ); var currPanel = 0; $navLeft.click(function() { currPanel--; // check if the new panel value is too small if ( currPanel < 0 ) currPanel = $sliderPanels.length - 1; slidePanel(currPanel, 'right'); }); $navRight.click(function() { currPanel++; // check if the new panel value is too big if ( currPanel >= $sliderPanels.length ) currPanel = 0; slidePanel(currPanel, 'left'); });
In this example we had only implemented the control panel for the left & right navigation direction. If you want to add some more additional traits and panels; you just need to assign the correct panel window to the slidePanel() function.
At the end; let us combine all the jQuery code together to function as a single task:
$(function() { function slidePanel( newPanel, direction ) { // define the offset of the slider obj, vis a vis the document var offsetLeft = $slider.offset().left; // offset required to hide the content off to the left / right var hideLeft = -1 * ( offsetLeft + $slider.width() ); var hideRight = $(window).width() - offsetLeft; // change the current / next positions based on the direction of the animation if ( direction == 'left' ) { currPos = hideLeft; nextPos = hideRight; } else { currPos = hideRight; nextPos = hideLeft; } // slide out the current panel, then remove the active class $slider.children('.slide-panel.active').animate({ left: currPos }, 500, function() { $(this).removeClass('active'); }); // slide in the next panel after adding the active class $( $sliderPanels[newPanel] ).css('left', nextPos).addClass('active').animate({ left: 0 }, 500 ); } var $slider = $('#full-slider'); var $sliderPanels = $slider.children('.slide-panel'); var $navWrap = $('<div id="full-slider-nav"></div>').appendTo( $slider ); var $navLeft = $('<div id="full-slider-nav-left"></div>').appendTo( $navWrap ); var $navRight = $('<div id="full-slider-nav-right"></div>').appendTo( $navWrap ); var currPanel = 0; $navLeft.click(function() { currPanel--; // check if the new panel value is too small if ( currPanel < 0 ) currPanel = $sliderPanels.length - 1; slidePanel(currPanel, 'right'); }); $navRight.click(function() { currPanel++; // check if the new panel value is too big if ( currPanel >= $sliderPanels.length ) currPanel = 0; slidePanel(currPanel, 'left'); }); });
You can download this whole tutorial by clicking on the below provided ‘Download’ button.
Tutorial: Designing A Comment Counting Slab For Resourceful Interaction
To attract the reader’s attention to a definite array of posts; web masters are using different kind of tactics. Some of the most common techniques in this section include most viewed posts, most linked posts, most popular posts, out-breaking posts and most commented posts. In all these categories; ‘most commented posts’ is the most popular and effective way to direct the viewer from the landing page to the inner pages.
In this tutorial we will learn the method of designing a comment counting slab that can also be stated as ‘Most commented’ bar.
Let’s start the procedure with the help of WordPress, CSS & jQuery.
Note: If you are not a WordPress User you can skip this first step of the tutorial
Step 1: Fetching the Top-Five Most Commented Post
<?php $most_commented = new WP_Query('orderby=comment_count&posts_per_page=5'); ?>
Here we had assigned a new variable by the name of WP_Query; this will ensure that the variable don’t interrupt the working parameter of other loops present on the page.
<ul id="most-commented"> <?php $most_commented = new WP_Query('orderby=comment_count&posts_per_page=5'); ?> <?php while ($most_commented->have_posts()) : $most_commented->the_post(); ?> <li> <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a> <span class="comment-bar"><span class="comment-count"><?php comments_number('0','1','%'); ?></span></span> </li> <?php endwhile; ?> </ul>
In the above code we are using a while() loop which crawls through every post and directs the output to the variable comments_number().
Step2: Performing the basic CSS styling to the comment list
In this step we will style up the comment list with the help of CSS
#most-commented li { list-style: none; } #most-commented a { display: block; }
After styling the comment list in the above section let us proceed with the comment count and comment tab too.
#most-commented .comment-bar { display: inline-block; position: relative; height: 30px; width: 0; margin: 5px 0; padding-left: 20px; background-color: #999; } #most-commented .comment-count { display: inline-block; position: absolute; right: -20px; top: -5px; width: 34px; height: 34px; border-width: 3px; border-style: solid; border-color: #FFF; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; text-align: center; line-height: 34px; background-color: #6CAC1F; font-size: 13px; font-weight: bold; color: #FFF; }
In the above tutorial; you can easily change the interface property of the comment bar. Icing the cake; you can even attach a background image or can even integrate some designing effects to provide much more better style statement. I had positioned the comment count to the right side of the comment slab so that the size of the window can easily be magnified.
Step 3 : Combining the Subparts using jQuery
At this final step we will assign the width of the individual bars with the help of jQuery.
$(function() { $('#most-commented li').each(function(i) { var $this = $(this); var thisCount = ~~$this.find('.comment-count').text(); }); });
Before triggering the first iteration of the algorithm; it is mandatory to first assign some key variables.
$(function() { // define global variables var maxWidth, maxCount; $('#most-commented li').each(function(i) { var $this = $(this); var thisCount = ~~$this.find('.comment-count').text(); // set up some variables if the first iteration if ( i == 0 ) { maxWidth = $this.width() - 40; maxCount = thisCount; } }); });
In this section we will target the maxCount value at the top of the list to ensure that the posts are sorted in decreasing order.
At the below final algorithm we will simply apply some animation effects to the transition.
$(function() { // define global variables var maxWidth, maxCount; $('#most-commented li').each(function(i) { var $this = $(this); var thisCount = ~~$this.find('.comment-count').text(); // set up some variables if the first iteration if ( i == 0 ) { maxWidth = $this.width() - 40; maxCount = thisCount; } // calculate the width based on the count ratio var thisWidth = (thisCount / maxCount) * maxWidth; // apply the width to the bar $this.find('.comment-bar').animate({ width : thisWidth }, 200, 'swing'); }); });
Note: If you don’t want to style any kind of animation to the element than you can simply replace the animate() command with css().
You can download this whole tutorial by clicking the ‘Download’ button given below.
Tutorial: On-page text search Tool Bar for a better UI
Content searching is one of the most effective ways to provide an effective user interface for the viewers. Many of the websites provide a search box which fetches the results from the website achieves but what if a user want to locate a particular keyword on the web page? To provide an impressive solution to this hassle; I am providing this tutorial that will help you to design an on-page text search window on your webpage or blog.
Beside with providing an easy user experience; this tool offers a resourceful user interface.
Step 1: Designing the Mark up & Interaction for the input box
In the first step we will design the input box for the tool where the user can provide the searching keyword.
<input type="text" id="text-search" />
After creating a input box we are required to attach a listener using jQuery which we will assure to read the track change in the input box.
$(function() { $('#text-search').bind('keyup change', function(ev) { // pull in the new value var searchTerm = $(this).val(); )}; });
In the above section of code we had integrated the key up & event change algorithm to the main function. This attachment will trigger the search operation irrespective of the fact that the user is typing or pasting the query.
After combining both the operation to a single function we will use the ‘Highlight’ jQuery plug-in to highlight the text of the query on the web page.
$(function() { $('#text-search').bind('keyup change', function(ev) { // pull in the new value var searchTerm = $(this).val(); // disable highlighting if empty if ( searchTerm ) { // highlight the new term $('body').highlight( searchTerm ); } }); });
Beside with highlighting the searched query on the web page; this part of the tutorial ensures that the searched query is not null.
If you want to apply some boundaries to the searchable space of the query you can use the below provided algorithm.
$('#myId').highlight( searchTerm );
If you want to centralize your searching space to a certain array of elements; you can use this algorithm
$('p').highlight( searchTerm );
The resultant search for the query is not case sensitive but if you want a case sensitive result then you will simply have to remove the .toUpperCase () command from the above set of codes.
Step 2: Style up the Searched Results of the Queries
In this step of the tutorial we will concentrate about the outlook of the searched results. So by initiating the process by changing the background color and adding the rounded corners to the tool. We can also add the drop-shadow effect for a more elegant view.
Note: Drop-shadow effect can’t be implemented for the Internet Explorer.
.highlight { background-color: #fff34d; -moz-border-radius: 5px; /* FF1+ */ -webkit-border-radius: 5px; /* Saf3-4 */ border-radius: 5px; /* Opera 10.5, IE 9, Saf5, Chrome */ -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* FF3.5+ */ -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* Saf3.0+, Chrome */ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* Opera 10.5+, IE 9.0 */ }
Step 3: Providing A Final Touch Up To The Tutorial
This is the last step of the tutorial where we will complete the most important aspect of the tutorial. In this step we will design an algorithm that will undo the selected results when the user deletes the query from the input search box.
$(function() { $('#text-search').bind('keyup change', function(ev) { // pull in the new value var searchTerm = $(this).val(); // remove any old highlighted terms $('body').removeHighlight(); // disable highlighting if empty if ( searchTerm ) { // highlight the new term $('body').highlight( searchTerm ); } }); });
The above used command removeHighlight () will unselect the highlighted result. This command will work swiftly in most of the internet browsers but it may show an error in Internet Explorer.
For internet explorer you only have to replace the lines from 45 to 63 of the highlight.js with the below provided code.
jQuery.fn.removeHighlight = function() { function newNormalize(node) { for (var i = 0, children = node.childNodes, nodeCount = children.length; i < nodeCount; i++) { var child = children[i]; if (child.nodeType == 1) { newNormalize(child); continue; } if (child.nodeType != 3) { continue; } var next = child.nextSibling; if (next == null || next.nodeType != 3) { continue; } var combined_text = child.nodeValue + next.nodeValue; new_node = node.ownerDocument.createTextNode(combined_text); node.insertBefore(new_node, child); node.removeChild(child); node.removeChild(next); i--; nodeCount--; } } return this.find("span.highlight").each(function() { var thisParent = this.parentNode; thisParent.replaceChild(this.firstChild, this); newNormalize(thisParent); }).end(); };
After this code; the search bar will function bug-free in every internet browser.
You can download this whole tutorial by clicking on the below provided ‘Download’ button.
Tutorial: Tutorial to Implement Subtle Hover Effects for Interactive UI
Hover effects are one of the hottest trends among the web designers. Every web designer is searching for these Hover effects to attract the viewers. Beside with providing an interactive UI; these Hover effects are a much easy and elegant way of navigating through the different pages of websites.
In this tutorial I will teach you the algorithm to design a similar Hover effect for your website content.
Step1: Let’s begin the procedure by initially combining some CSS with the class subtle
.subtle { background-color: #78776C; color: #BBBBAD; } .subtle:hover, .subtle:focus { background-color: #F6F7ED; color: #51514A; }
The above used CSS will immediately change the Hover but if you want to see a slower-animated transition you can implement CSS3.
.subtle { -webkit-transition: background-color 500ms ease-in; /* Saf3.2+, Chrome */ -moz-transition: background-color 500ms ease-in; /* FF3.7+ */ -o-transition: background-color 500ms ease-in; /* Opera 10.5+ */ transition: background-color 500ms ease-in; /* futureproofing */ background-color: #78776C; color: #BBBBAD; } .subtle:hover, .subtle:focus { background-color: #F6F7ED; color: #51514A; }
Step 2: Use of the jQuery Back-Up technique to make the Transition Supportable with IE
In this step we will use the jQuery Back-Up technique that will ensure that the Subtle Transition is supported by every web browser.
Let’s first determine whether the internet browser of the viewer supports the above transition or not.
// make sure to execute this on page load $(function() { // determine if the browser supports transition var thisStyle = document.body.style, supportsTransition = thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.OTransition !== undefined || thisStyle.transition !== undefined; });
The above stated algorithm will provide the report about the compatibility of the browser and the transition. However if the browser doesn’t support the transition; you can implement the animation using the jQuery.
// make sure to execute this on page load $(function() { // determine if the browser supports transition var thisStyle = document.body.style, supportsTransition = thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.OTransition !== undefined || thisStyle.transition !== undefined; // assign jQuery transition if the browser doesn't support if ( ! supportsTransition ) { var defaultCSS = { backgroundColor: '#78776C' }, hoverCSS = { backgroundColor: '#F6F7ED' }; // loop through each button $('.subtle').each(function() { var $subtle = $(this); // bind an event listener for mouseover and focus $subtle.bind('mouseenter focus', function() { $subtle.animate(hoverCSS, 500, 'swing' ); }); // bind the reverse for mouseout and blur $subtle.bind('mouseleave blur', function(ev) { if ( ev.type == 'mouseleave' && ev.target == document.activeElement ) return false; $subtle.animate(defaultCSS, 500, 'swing' ); }); }); } });
You can download this whole tutorial by clicking on ‘Download’ button shown below.
I hope that these top 5 CSS/jQuery tutorials will help you to provide a more elegant user interface to the website. You are free to raise any query if you are finding any hassle while using these tutorials. I would also appreciate your reviews and comments about my work.
Comments
0 comments