wp_nav_menu shortcode

wp_nav_menu shortcode

To install the shortcode just place this code inside functions.php file of your theme.

// Function that will return our Wordpress menu
function list_menu($atts, $content = null) {
 extract(shortcode_atts(array(  
  'menu'            => '', 
  'container'       => 'div', 
  'container_class' => '', 
  'container_id'    => '', 
  'menu_class'      => 'menu', 
  'menu_id'         => '',
  'echo'            => true,
  'fallback_cb'     => 'wp_page_menu',
  'before'          => '',
  'after'           => '',
  'link_before'     => '',
  'link_after'      => '',
  'depth'           => 0,
  'walker'          => '',
  'theme_location'  => ''), 
  $atts));
 
 
 return wp_nav_menu( array( 
  'menu'            => $menu, 
  'container'       => $container, 
  'container_class' => $container_class, 
  'container_id'    => $container_id, 
  'menu_class'      => $menu_class, 
  'menu_id'         => $menu_id,
  'echo'            => false,
  'fallback_cb'     => $fallback_cb,
  'before'          => $before,
  'after'           => $after,
  'link_before'     => $link_before,
  'link_after'      => $link_after,
  'depth'           => $depth,
  'walker'          => $walker,
  'theme_location'  => $theme_location));
}
//Create the shortcode
add_shortcode("listmenu", "list_menu");

How to remove the arrows from input[type=“number”] in Google chrome , Firefox and Opera etc...

I've been using some simple CSS and it seems to remove them and work fine.

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0;
}

Web standards is the present and future in web design – the way all websites should be design and implemented. Websites created using web standards load faster, have better search engine ranking and are easier to update. All the websites I show here have been created this way.

CSS3 Attribute Selectors

CSS3 Substring Matching Attribute Selectors

The CSS3 Selectors module introduces three new attribute selectors, which are grouped together under the heading “Substring Matching Attribute Selectors”.

These new selectors are as follows:

[att^=val] – the “begins with” selector

[att$=val] – the “ends with” selector

[att*=val] – the “contains” selector



The first of these new selectors, which we’ll refer to as the “begins with” selector, allows for the selection of elements where a specified attribute (e.g. the href attribute of a hyperlink) begins with a specified string (e.g. “http://”, “https://” or “mailto:”).

In the same way, the additional two new selectors, which we’ll refer to as the “ends with” and “contains” selectors, allow for the selection of elements where a specified attribute either ends with or contains a specifed string (respectively).

The CSS3 Selectors module was the second of the new CSS3 modules to become an official W3C Recommendation, in September 2011, and the features within can now be considered to be at a stable stage of development. As such, browser support for the three new attribute selectors is relatively widespread – full details can be found in the browser support section near the end of this article.

How they Work

Let’s take a look at each of these new selectors in more detail, including examples to demonstrate how they might be used.

[att^=val] – the “begins with” selector

The “begins with” selector allows for the selection of elements where a specified attribute (e.g. thehref attribute of a hyperlink) begins with a specified string (e.g. “http://”, “https://” or “mailto:”).

The Syntax

element[att^=val]

Examples

a[href^=”http://”]
p[title^=”Hello”]

Here’s a real-life example of the “begins with” selector in use. Below we have a list of links, as follows: a standard web link; a link to a secure website; a mailto: link; an ftp link; and lastly a magnet link. Using the “begins with” selector we can style each link differently, in this case using CSS to apply different icons to the differing link types, by selecting the links we want to style based on the begining of their href attribute.

Here’s the example:

Visit a website

Visit a secure website

Send an email

Connect to an FTP server

Download from a magnet link





Here’s the HTML for this example:

<div class="example1">
<ul>
<li><a href="http://www.google.com">Visit a website</a></li>
<li><a href="https://www.google.com">Visit a secure website</a></li>
<li><a href="mailto:email@email.com">Send an email</a></li>
<li><a href="ftp://www.google.com">Connect to an FTP server</a></li>
<li><a href="magnet:…">Download from a magnet link</a></li>
</ul>
</div>

And here’s the CSS for this example:

div.example1 ul {
list-style-type: none;
}

div.example1 ul li a {
padding-left: 20px;
background-image: url(demo-images/file.png);
background-repeat: no-repeat;
}

div.examples1 ul li a[href^=”https://”] {
background-image: url(demo-images/lock.png);
}

div.example1 a[href^=”mailto:”] {
background-image: url(demo-images/mail.png);
}

div.example1 a[href^=”ftp://”] {
background-image: url(demo-images/folder_ftp.png);
}

div.example1 a[href^=”magnet”] {
background-image: url(demo-images/magnet.png);
}



[att$=val] – the “ends with” selector

Similar to the “begins with” selector, the “ends with” selector allows for the selection of elements where a specified attribute (e.g. the href attribute of a hyperlink) ends with a specified string (e.g. “.pdf”, “.docx” or “.mp3”).

The Syntax

element[att$=val]

Examples

a[href$=”.pdf”]
p[title$=”World”]

Here’s a real-life example of the “ends with” selector in use. Again we have a list of links, this time as follows: a link to a PDF document; a link to Word document; a link to an Excel document; a link to an MP3 file; and lastly a standard link. Using the “ends with” selector we can style each link differently, in this case using CSS to apply different icons to the differing file types by selecting the links we want to style based on the ending of their href attribute.

Here’s the example:

A link to a PDF document

A link to a Word document

A link to an Excel document

A link to an MP3 file

A normal web link





Here’s the HTML for this example:

<div class="example2">
<ul>
<li><a href="http://www.css3.info/demos/files/1.pdf">A link to a PDF document</a></li>
<li><a href="http://www.css3.info/demos/files/1.docx">A link to a Word document</a></li>
<li><a href="http://www.css3.info/demos/files/1.xlsx">A link to an Excel document</a></li>
<li><a href="http://www.css3.info/demos/files/1.mp3">A link to an MP3 file</a></li>
<li><a href="http://www.css3.info">A normal web link</a></li>
</ul>
</div>

And here’s the CSS for this example:

div.example2 ul {
list-style-type: none;
}

div.example2 ul li a {
padding-left: 20px;
background-image: url(demo-images/file.png);
background-repeat: no-repeat;
}

div.example2 ul li a[href$=”.pdf”] {
background-image: url(demo-images/pdf.png);
}

div.example2 ul li a[href$=”.docx”] {
background-image: url(demo-images/page_white_word.png);
}

div.example2 ul li a[href$=”.xlsx”] {
background-image: url(demo-images/page_white_excel.png);
}

div.example2 ul li a[href$=”.mp3″] {
background-image: url(demo-images/audio.png);
}



[att*=val] – the “contains” selector

The last of the new substring matching attribute selectors, and perhaps the most powerful, is the “contains” selector, or “wildcard” selector as it is sometimes refered to. The “contains” selector enables designers to select elements where a specified attribute (again we could use the example of the href attribute of a hyperlink) contains a specified string (eg. google.com or yahoo.com).

The Syntax

element[att*=val]

Examples

a[href*=”google.com”]
p[title$=”orl”]

Again, here’s a real life example using a list of hyperlinks, this time; a link to Google, a link to our Twitter profile, a link our Facebook page, a link to Yahoo, and lastly a link to Bing. Using the “contains” selector we can style each link differently based on the contents of the href attribute, in this case by specifying a specific icon for elements where the contents of the href attribute contains a particular domain name.

Here’s the example:

A link to Google

A link to a Twitter profile

A link to a Facebook page

A link to Yahoo

Any other link





Here’s the HTML for this example:

<div class="example3">
<ul>
<li><a href="http://www.google.com">A link to Google</a></li>
<li><a href="http://www.twitter.com/css3">A link to a Twitter profile</a></li>
<li><a href="https://www.facebook.com/css3.info">A link to a Facebook page</a></li>
<li><a href="http://www.yahoo.com">A link to Yahoo</a></li>
<li><a href="http://www.bing.com">Any other link</a></li>
</ul>
</div>

And here’s the CSS for this example:

div.example3 ul {
list-style-type: none;
}

div.example3 ul li a {
padding-left: 20px;
background-image: url(demo-images/file.png);
background-repeat: no-repeat;
}

div.example3 ul li a[href*=”google.com”] {
background-image: url(demo-images/google.png);
}

div.example3 ul li a[href*=”twitter.com”] {
background-image: url(demo-images/twitter.png);
}

div.example3 ul li a[href*=”facebook.com”] {
background-image: url(demo-images/facebook.png);
}

div.example3 ul li a[href*=”yahoo.com”] {
background-image: url(demo-images/yahoo.png);
}



Browser Support

	Chrome	Firefox	IE	Safari	Opera
[att^=val] – “begins with”	2.0	3.01.0	7.0	1.3	9.59.2
[att$=val] – “ends with”	2.0	3.01.0	7.0	1.3	9.59.2
[att*=val] – “contains”	2.0	3.01.0	7.0	1.3	9.59.2

Table key:

#native selector support (with no known bugs), since version indicated



#native selector support (with known bugs), since version indicated





With development on the CSS3 Selectors module now complete, browser support is relatively widespread, and in fact the CSS3 substring matching attribute selectors have enjoyed widespread browser support for sometime now, although some older versions of certain browsers (particularly Internet Explorer) contain known bugs.

Additional Notes & Further Reading

The Difference Between UX and UI Design - Prathavee Raj Moond

UX Design refers to the term User Experience Design, while UI Design stands forUser Interface Design. Both elements are crucial to a product and work closely together. But despite their professional relationship, the roles themselves are quite different, referring to very different parts of the process and the design discipline. Where UX Design is a more analytical and technical field, UI Design is closer to what we refer to as graphic design, though the responsibilities are somewhat more complex.

What is User Experience Design?

As is found on Wikipedia:

User experience design (UXD or UED) is the process of enhancing customer satisfaction and loyalty by improving the usability, ease of use, and pleasure provided in the interaction between the customer and the product.

1. User Experience Design is the process of development and improvement of quality interaction between a user and all facets of a company.
2. User Experience Design is responsible for being hands on with the process of research, testing, development, content, and prototyping to test for quality results.
3. User Experience Design is in theory a non-digital (cognitive science) practice, but used and defined predominantly by digital industries.

What is UI Design?

1. User Interface Design is responsible for the transference of a brand’s strengths and visual assets to a product’s interface as to best enhance the user’s experience.
2. User Interface Design is a process of visually guiding the user through a product’s interface via interactive elements and across all sizes/platforms.
3. User Interface Design is a digital field, which includes responsibility for cooperation and work with developers or code.

“Something that looks great but is difficult to use is exemplary of great UI and poor UX. While Something very usable that looks terrible is exemplary of great UX and poor UI.”

Disable right click using jquery

To disable right click menu using jquery, the following code snippet can be used

$(document).ready(function(){     $(document).bind("contextmenu",function(e){         return false;     }); });

Web standards is the present and future in web design – the way all websites should be design and implemented. Websites created using web standards load faster, have better search engine ranking and are easier to update. All the websites I show here have been created this way.

Rotate image 360deg when mouse hover using CSS 3

Adding rotation effect using the CSS3 transition property is posted below. Thanks david walsh for this code snippet

.image{     -webkit-transition-duration: 0.8s;     -moz-transition-duration: 0.8s;     -o-transition-duration: 0.8s;     transition-duration: 0.8s;           -webkit-transition-property: -webkit-transform;     -moz-transition-property: -moz-transform;     -o-transition-property: -o-transform;     transition-property: transform;           overflow:hidden;       }     .image:hover   {     -webkit-transform:rotate(360deg);     -moz-transform:rotate(360deg);     -o-transform:rotate(360deg); }

Then just attach the class “image” with any image or text to rotate it 360 degree.

PRATHAVEE RAJ MOOND 

Web standards is the present and future in web design – the way all websites should be design and implemented. Websites created using web standards load faster, have better search engine ranking and are easier to update. All the websites I show here have been created this way.