Working on a WordPress project where client demands all images within a post should extend and touch window borders, actually full size images. The wrapper has margin of 20px on both sides and its not possible to remove the margin otherwise, all other elements will required 20px margin. I got this working with following JS code: $('.content img').each(function() { $(this).css({ 'position': 'relative', 'min-width': $(window).width(), 'margin-left': '-20px', }); }); In case you have better code for this and in CSS, please share.

Continue Reading

There are a few times when we want our website visitors to search content in just one category and not the whole website Today I am sharing a simple but effective UI trick to create a category based search box with CSS and jQuery Checkout this demo and then we'll dig into the coding part a class button info href http codepen io cssjockey full ILapH target blank Live Demo a h HTML h pre class lang xhtml decode true title HTML code lt div class search-box gt lt input type text value class search-input placeholder search gt lt div...

Continue Reading

Today we will play with jQuery CSS class methods such as strong addClass strong strong removeClass strong strong hasClass strong and strong toggleClass strong and learn some basic implementation to modify the HTML styles on the fly a class button info href http codepen io cssjockey pen HoBnv target blank Live Demo a h jQuery CSS Class Methods h Lets understand this a small piece of code First things first You must include the jQuery library in the span class lang xhtml decode true crayon-inline lt head gt lt head gt span tag pre class lang default decode true lt...

Continue Reading

Tabbed content is a great way to handle a lot of information on a page without loosing usability and it provides great user experience as well Here's a real easy way to create tabbed content with jQuery and CSS h Let's create tabbed content with jQuery and CSS h img class aligncenter src https cssjockey com wp-content uploads tabbed-content-with-jquery-css jpg alt Tabbed Content with jQuery and CSS width height nbsp h Step Include the jQuery library h pre class lang default decode true lt script src ajax googleapis com ajax libs jquery jquery min js gt lt script gt pre...

Continue Reading

Among many studies conducted to find out just what influences people's perception of a website's credibility one interesting finding is that users really do judge a book by its cover or rather a website by its design Rapid changes in design trends are driving focus towards its usability More and more features are being zipped into a plain and simple design for users to get bountiful results without spending more than a jiffy The back-end coding is the key device to achieve this simplicity in design Keeping this mind I've designed a small script to introduce a sliding login box...

Continue Reading

As you already know that I've been working on a title Recent Performance Updates on CSSJockey com href https cssjockey com general-news performance-upgrade improving the performance a of my website and I needed a simple solution to create light-box effect for a title Live Chat href https cssjockey com live-chat Live-Chat a on this website I had many options to choose from available a title Google Search for light-box href http www google com hl en amp source hp amp q jquery lightbox amp aq f amp aqi g amp oq amp fp a abe f b target blank jQuery...

Continue Reading

h style text-align center One sometimes finds what one is not looking for h This quote by strong Alexander Fleming strong explains all what I am going to share with you today I am pretty sure that you are aware of strong Google Search Suggest strong and strong Yahoo Search Assist strong feature This feature helps you effortlessly find exactly what you re looking for No doubt it lists a few suggestions to keep the user looking for more and more As you type something in the search box it automatically offers search terms and phrases in real time How...

Continue Reading

p style text-align center strong People count up the faults of those who keep them waiting strong Seems like I kept them busy decoding this loading bar D p a href https cssjockey com wp-content uploads loading-bar png img class aligncenter size-full wp-image- title loading-bar src https cssjockey com wp-content uploads loading-bar png alt width height a Recently while browsing I landed on a page on a title How is the loading script on this website implemented href http stackoverflow com questions how-is-the-loading-script-on-this-website-implemented target blank StackOverflow com a where people were discussing about how I implemented this loading bar on...

Continue Reading