2 Ways for Hover Dropdown in Bootstrap 3 Navbar

The Bootstrap 3 css framework contains a pretty good navigation component called “navbar” which automatically collapse when the viewport is too small. The dropdown menu’s of the navbar open when clicking the main item. For a tablet or phone this behavior is fine, but when using a desktop you might want the menu’s to open when hovering them. So here we are discussing 2 Ways for Hover Dropdown in Bootstrap 3 Navbar.

Read More

Valid values for the id attribute in HTML elements

This post is a sum up of when creating the id attributes for HTML elements, what rules are there to follow for the value of id? According to HTML4 specifications: ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens (“-“), underscores (“_”), colons (“:”), and periods (“.”).

Read More

Remove bullets from unordered list

By default Unordered List in HTML render bullets on webpage. To remove bullets from unordered list you can set CSS rule list-style-type: none; for ‘ul’. Inline Style: <ul style="list-style: none;"><li>...</li></ul>

Read More

3 functions to check if string contains specific words

check for existence of a substring into a string is a common requirement for programmers. Here I’m describing 3 functions to check if string contains specific words.
  • strpos – Find the position of the first occurrence of a substring in a string.
  • strstr – Find the first occurrence of a string
  • preg_match – Perform a regular expression match

Read More

jQuery functions with CSS media queries for responsive website

Due to difference between CSS media queries based on max-width and jQuery’s ‘$(window).width()’ measurement (caused by the inconsistent ways in which browser media queries handle scrollbars), there is always a mismatch between ‘jQuery $(window).width()’ and CSS3 Media Queries. Which in turn causes some ugly or unexpected behaviour by your responsive website.

Read More

Bigger & Fixed Search Box with Dropdown in Bootstrap Navbar

Twitter Bootstrap is powerful mobile first front-end framework that provides all the necessary components to develop responsive websites using its common elements. One of the most popular elements on any website is the top navigation bar and the search widget. On a recent project, I had to implement Bigger & Fixed Search Box with Dropdown in Bootstrap Navbar and making the search bar fixed across different screen size.

Read More

Post and price tags using CSS3

You can create post and price tags using CSS3 and place them into your blog, ecommerce website or any other kind of website. This is a rather simple CSS trick which uses :before and :after pseudo-elements to draw triangle and circle in post and price tags we are creating here.

Read More

[ Page 3 of 7 ]