Horizontal Navigation in a Responsive Layout

If you’re working on a responsive layout website with navigation that contains too many links to display either horizontally or vertically on smaller screens, you may need to implement  a technique where only few links are visible by default and a drop-down is added for the rest of the links.

Once you go through the toughest exercise of deciding which links should be visible at all times, here is a way to execute the design.

HTML

Here is a pretty simple navigation using an unordered list and some anchor tags. Nothing special except an extra <li class=”show-more”> element that will be hidden on wide screens and class “hide” added to the  list items you will be hidden on smaller screens.

The <ul> element also has a helper class “clearfix” added to it, so our nav bar can take care of all the floats.

<ul class="nav clearfix">
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Blog</a></li>
    <li class="show-more"><a href="#">…</a></li>
    <li class="hide"><a href="#">Team</a></li>
    <li class="hide"><a href="#">About</a></li>
    <li class="hide"><a href="#">Contacts</a></li>
 </ul>

read more

Related Posts:

  • No Related Posts

Change the jQuery UI button icon based on the buttons state (i.e. checked/unchecked)

I really enjoy working with jQuery UI, however in some case the UI is not as intuitive.

Here is an example:

Let’s say you have a radio input set where you’re asking your users to select one of the options. If you style radio inputs as buttons with a “check” icon, your buttonset will look something like this by default:

[flickr id=”6081175653″ thumbnail=”small” overlay=”false” size=”small” group=”” align=”none”]

If the user selects one of the options this is what happens.

[flickr id=”6081712474″ thumbnail=”small” overlay=”false” size=”small” group=”” align=”none”]

There is a clear difference between checked and unchecked state, however the users don’t know that until they select one of the options. They may simply ignore the selection thinking all options are pre-selected, or they may try to check the one that doesn’t apply.

Better Solution

In some cases it would help to change the icon based on the state of the button. For example, you could use the “close” icon for un-checked state and switch it to “check” icon for the checked state. Click around the example below:

Here is a little code snippet that makes this happen. Please refer to comments for details.

HTML

<div id="better-radio">
		<input type="radio" id="better-radio1" name="better-radio">
        <label for="better-radio1"><span class="ui-icon ui-icon-closethick"></span></label>
		<input type="radio" id="better-radio2" name="better-radio">
        <label for="better-radio2"><span class="ui-icon ui-icon-closethick"></span></label>
		<input type="radio" id="better-radio3" name="better-radio">
        <label for="better-radio3"><span class="ui-icon ui-icon-closethick"></span></label>
	</div>

read more

Related Posts:

Add close button to dynamically added jQuery UI tabs

When working with jQuery UI tabs it is really easy to dynamically add tabs. You just use tabs  “add” method as specified in the documentation: .tabs( ‘add’ , url , label , [index] ). But there is no method for dynamically adding a close button so the tabs can be removed. Here is a quick little script I wrote to do just that.

$(function() {
		//DECLARE FUNCTION: removetab
		var removetab = function(tabselector, index) {
			$(".removetab").click(function(){
				$(tabselector).tabs('remove',index);
			});
		 };

		//create tabs
		$("#tabs").tabs({
		   add: function(event, ui) {
		   		//select newely opened tab
				$(this).tabs('select',ui.index);
				//load function to close tab
				removetab($(this), ui.index);
		   },
		   show: function(event, ui) {
		   		//load function to close selected tabs
				removetab($(this), ui.index);
		   }
		});

		//load new tab
		$(".addtab").click(function(){
			var href=$(this).attr("href");
			var title=$(this).attr("title");
			$("#tabs").tabs( 'add' , href , title+' &nbsp;');
			return false;
		});

	});

read more

Related Posts:

Progressive Enhancement: Anchor Links to Side Tabs

Here is an example of progressive enhancementtechnique using jQuery to turn anchor links into side tabs. [flickr id=”5822530004″ thumbnail=”medium_640″ overlay=”false” size=”small” group=”” align=”none”]

Anchor Links Example

Assumption here is that the links are inside an unordered list with ID “services” services assigned to it.

<ul id="services">
	<li><a href="#item1">Donec arcu est</a></li>
	<li><a href="#item2">Sed at sem lacus</a></li>
	<li><a href="#item3">Proin non turpis urna</a></li>
	<li><a href="#item4">Vestibulum non ipsum orci</a></li>
	<li><a href="#item5">Nullam cursus ullamcorper</a></li>
	<li><a href="#item6">Lorem ipsum dolor sit amet</a></li>
</ul>

read more

Related Posts:

Progressive enhancement: Accordion Style FAQ’s with jQuery

Condense a lengthy FAQ page with accordion style navigation, making your answers only appear when the questions of interest are clicked.

To use it:

  1. Add this script to the FAQ page
  2. Assign class “question” to every question
  3. Assign class “answer” to every answer
$(document).ready(function(){
		//just some regular style sheets. change them as you see fit
		var styling =".question{font-size:14px; font-weight:bold; cursor:pointer;}" +
					  ".answer{display:block;}" +
					  ".opened{color:#006699;}" +
					  ".closed{color:#009966;}";		
		//attach style to the page
		var style = document.createElement("style");
        style.type = "text/css";
        try {
            style.appendChild( document.createTextNode(styling) );
        } catch (e) {
            if ( style.styleSheet ) {
                style.styleSheet.cssText = styling;
            }
        }
        document.body.appendChild( style );
		//style all questions as closed
		$(".question").addClass("closed"); 
		//make sure first question is styled as open
	        $(".question:first").removeClass("closed").addClass("opened"); 
		$(".answer").hide(); //hide answers
		$(".answer:first").show(); //show first answer
		//question click
		$(".question").click(function() {
			$(".answer").slideUp("fast");
			$(".question").removeClass("opened").addClass("closed");
	
			if ($(this).next(".answer").is(":hidden")) {
				$(this).next(".answer").slideDown("fast");
				$(this).removeClass("closed").addClass("opened");
			} 			   
		});
});

read more

Related Posts:

  • No Related Posts

jQuery UI: Highlight multiple dates in jquery datepicker

The events are stored as UNIX timestamps in a MySQL table. We’ll be getting those events from the database via AJAX and highlight them in the jQuery UI datepicker widget.

HTML

Javascript

$.ajax({
  url: "dates.php",
  data: "action=showdates",
  dataType: "json",
  success: function(calendarEvents){
           $(".calendarwidget").datepicker({

           // [rows, columns] if you want to display multiple calendars.
           numberOfMonths: [1, 1],
           showCurrentAtPos: 0,
           beforeShowDay: function (date){
                          for (i = 0; i < calendarEvents.length; i++) {
                              if (date.getMonth() == calendarEvents[i][0] - 1
                              && date.getDate() == calendarEvents[i][1]
                              && date.getFullYear() == calendarEvents[i][2]) {
                              //[disable/enable, class for styling appearance, tool tip]
                              return [false,"ui-state-active","Event Name"];
                              }
                           }
                           return [true, ""];//enable all other days
                        }
           });
           }
         });

read more

Related Posts:

Progressive enhancement: AJAX navigation menu with jQuery

Progressive enhancement allows everyone to access the basic content and functionality of a given web site using any browser or Internet connection, while also providing those with a more advanced browsers an enhanced version of the site.

Here is an example on how to enhance a starndard navigation bar with AJAX.

Scenario

[flickr id=”5822529950″ thumbnail=”medium” overlay=”true” size=”medium” group=”” align=”left”]
Let’s assume that #header, #navigation and #footer are same on every page and #mainconent, and #sidebar inside the #content are changing on every page.

Problem
The site will have a music player that clients can choose to use while browsing the site. And if they do, we don’t want the music to be interupted as they move from page to page.

Solution
Use unobtrusive javascript and AJAX to load content and update the URL using hash in case someone wants to bookmark loaded content.

Javascript/jQuery

We’ll use jQuery to bind a click event to the navigation links and use load function to load contents of the clicked page.

Html navigation



Javascript

//FIRST: We'll check if the URL has a hash (was bookmarked) and redirect the user to appropriate page
	 if(window.location.hash!=""){
		var hashpage = window.location.hash.split("#");
		window.location.pathname = hashpage[1];
	 }

jQuery

 //bind click event to the navigation links
	 $("#navigation a").unbind("click").click(function(){
		//get href attribute
		var page = $(this).attr("href");
		//load all children of the #content div of the clicked page
		$("#content").load(page+" #content > *");
		//append hash to the url for bookmarking
		window.location.hash="#"+page;
		//cancel browser default so the page doesn't reload
		return false;

	 });

read more

Related Posts:

Create simple cross-browser textarea editor

This tutorial will help you create simple cross-browser textarea editor you can use on any of your HTML forms. View the sample.

UPDATED Dec/2010!

Added support for latest versions of:

  • Chrome
  • Safari
  • FireFox
  • Opera
  • IE9

The main DHTML methods used in this cross-browser textarea editor are:

  • execCommand.
    This method  executes a command on the current document, current selection, or the given range.
  • getElementById
    Returns a reference to the first object with the specified value of the ID attribute.

Commands used to specify an action to take on the given object:

  • Bold
    Toggles the current selection between bold and nonbold.
  • Underline
    Toggles the current selection between underlined and not underlined.
  • Italic
    Toggles the current selection between italic and nonitalic.
  • JustifyCenter
    Centers the format block in which the current selection is located.
  • JustifyLeft
    Left-justifies the format block in which the current selection is located.
  • JustifyRight
    Right-justifies the format block in which the current selection is located.
  • Indent
    Increases the indent of the selected text by one indentation increment.
  • Outdent
    Decreases by one increment the indentation of the format block in which the current selection is located.
  • Undo
    Undo the step
  • Redo
    Redo the step

Main DHTML properties used:

  • innerHTML
    Sets or retrieves the HTML between the start and end tags of the object.
  • designMode
    Sets or retrieves a value that indicates whether the document can be edited.

Download the button images here.

CSS File

.editorbuttons {
	list-style: none;
	margin: 0px;
	padding: 0px;
}
.editorbuttons li {
	float: left;
}
.editorbuttons li img {
	border:none;
}
.editorbody{clear:both; float:none;}

HTML File

  • Shift+Enter for single line spacing
< script language= "JavaScript" type= "text/javascript" > </script> <script language= "JavaScript" type= "text/javascript"> //this calles displayEditor function. Parametars are (textarea name, ,default text, textarea width, textarea height) displayEditor('content', 'Default Text', 600, 300); //--> </script>

read more

Related Posts:

Create a Scrolling Text Box using JavaScript

This can be easily done using jQuery or similar JavaScript libraries. But sometimes you may choose not to load the whole library for a simple task like scrolling text.

Javascript scrolling text function

Create a javascript function and place it either inside the element using < script > tag, or inside a separate javascript file.

//Define a variable (pos) to store the current scroll position.
var pos = 100;

function Scroll(){
    //get the id of the scrolling text box.
    obj=document.getElementById('scrolltextlayer');
    //subtract 1 from pos and check pos value using offsetHeight, which retrieves the height of the object relative to the layout.
    pos -=1;

    if(pos < 0 - obj.offsetHeight+130) return;
    //set a new height value using JavaScript style object.
    obj.style.top=pos;
    //finally the function calls itself using a timeout..
    window.setTimeout( "Scroll();" ,  30);
}

read more

Related Posts:

Dynamicaly generate a Web Safe Color palette with JavaScript

When working with jQuery UI tabs it is really easy to dynamically add tabs. You just use UI’s “add” method as specified in the documentation: .tabs( ‘add’ , url , label , [index] ). But there is no method for dynamically adding a close button so the tabs can be removed. Here is a quick little script I wrote to do just that.

$(function() {
		//DECLARE FUNCTION: removetab
		var removetab = function(tabselector, index) {
			$(".removetab").click(function(){
				$(tabselector).tabs('remove',index);
			});
		 };

		//create tabs
		$("#tabs").tabs({
		   add: function(event, ui) { 
		   		//select newely opened tab
				$(this).tabs('select',ui.index);
				//load function to close tab
				removetab($(this), ui.index);
		   },
		   show: function(event, ui) { 
		   		//load function to close selected tabs
				removetab($(this), ui.index);
		   }
		});

		//load new tab
		$(".addtab").click(function(){
			var href=$(this).attr("href");
			var title=$(this).attr("title");
			$("#tabs").tabs( 'add' , href , title+' &nbsp;');
			return false;
		});

	});

read more

Related Posts:

Page 1 of 212
© Copyright Emir Plicanic - Theme by Pexeto