Category Archives: HTML – CSS

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.

Hover dropdown in bootstrap 3 navbar

Continue Reading ››

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 (“.”).

Continue Reading ››

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

Continue Reading ››

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.

Continue Reading ››

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.

Fixed search box with dropdown

Continue Reading ››