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

Embed base64 encoded images

Most modern desktop browsers such as Chrome, Mozilla, Internet Explorer supports images encoded as data url. But there are problems displaying data URLs in some mobile browsers like Android Stock Browser.

Here we are presenting that how we can embed base64 encoded images in various platforms.

Read More

Implement styles on parent tag if it has children

We need to implement the css things based on the condition that the parent tag has a child or not. For the same,I faced an issue of implement styles on parent tag if it has children.

I found many tutorials for solving this problem using jQuery or javascript. But I was looking the solution using css.

Read More

Add arrow in anchor tag using css3

In every website, we use menu and other things with ordered/unordered list. For displaying nested or next level, we need to place the arrow to indicate next level. We can add arrow in anchor tag using css3.

Read More

Prevent anchor in an iframe from scrolling the parent window

I was building a page in a website. In that page I was loading a page inside an iframe. The page inside iframe had an anchor (http:/fellowtuts.com/test.html#specific_content) as well. When I used to click on the anchors within the iframe to reach the specific content section, it was working in firefox browser smoothly but working with a undesired behaviour in chrome and internet explorer browsers. In chrome, it was scrolling the parent window to top along with Iframe’s content.

Read More

Offsetting anchor hash tag links to adjust for fixed header

Sometimes our website has a fixed header or navigation menu that usually remains fixed at the top of the page. When you use the URL anchor (the #fragment part), the browser window will scroll itself (instantly) to bring anchor at the top of the page, leaving the content behind the fixed header. So here we need for offsetting anchor hash tag links to adjust for fixed header to let content appear below the fixed item.

Read More

[ Page 3 of 6 ]