Get the text node of an element
var h1_text = $('h1').contents().filter(function() { return this.nodeType === Node.TEXT_NODE; }).text(); <h1>Lorem ipsum <span>dolor sit amet</span><h1> // console.log(h1_text)...
View ArticleAutomatically add line breaks in SVG text
Add line breaks in SVG text with jQuery, based on a separator. In the example below the separator is plain text <br>. <div class="svg-container"> <svg version="1.1"...
View ArticleIf in view
Check if an element is in view using only JQuery. A sort of poor man’s Waypoints. $(window).on('load scroll', function() { $('.element').each(function() { if ( $(this).offset().top <=...
View ArticleUsing fullPage.js to make a vertical split-screen parallax
fullPage.js, as its author states, is a jQuery plugin which allows you to “create full screen pages fast and simple”. How about using it to make a split-screen parallax fast and simple ? First the...
View ArticlefullPage.js – always scroll from top within sections
Scroll long sections always from top. This works only for section without slides. $('#fullpage').fullpage({ scrollOverflow: true, onLeave: function(index, nextIndex, direction){...
View ArticleHover effect on the parent of an anchor tag
It ever happened that you need to apply some CSS style to the parent of a link ( anchor tag <a href=””></a> ), when the link is hovered ? For example this HTML: <div> <a...
View ArticleHow to add a class to the current slide in jQuery Cycle
I think that every web developer heard about jQuery Cycle plugin, and we all know that is the most simple to use, and the best regarding the options that it has, but that doesn’t mean is bullet proof....
View ArticleCheckbox tree with jQuery
Update: With nothing to do, I remembered the failure with the checkbox tree, and I started re-thinking it. With nothing else on my mind, took me very short time to figure my mistakes; …so now i will...
View ArticleClear form fields on focus
If you want to make a form without labels for text inputs or textareas, and instead give the fields default values, you will encounter a little annoying problem, when you focus the field to write...
View ArticleSimple HTML5 placeholders fallback for IE9 and older
I hoped I will never hear about IE9 and its lack of support for the placeholder attribute, … I had high hopes. I’ve boiled a simple fallback, late in the evening and in a rush, using IE conditional...
View ArticleRandom start cycle
function randomBox(randomItem) { randomItem = $(randomItem); var random = Math.floor(Math.random() * randomItem.length); randomItem.eq(random % randomItem.length).addClass('active'); function...
View ArticlePrevent inner elements trigger an event on the parent
Method 1 Stop propagation on inner elements before attaching an event on the parent. $('#parent a').on('click', function(event){ //stop the event bubbling up to the parent event.stopPropagation(); });...
View ArticleHide popup when clicking outside
//show popup when clicking the trigger $('#trigger').on('click touch', function(){ $('#tooltip').show(); }); //hide it when clicking anywhere else except the popup and the trigger...
View ArticlePrevent bxSlider stop auto
Prevent bxSlider stop auto slides transition, when navigating through slides. $(document).ready(function(){ var slider = $('#slideshow').bxSlider({ auto: true, stopAuto: false, startSlide: 0 });...
View ArticleSlide out hamburger menu
It is known that the slide out menus ( or hamburger menus ) are the best way of making a menu usable for mobile. This method uses jQuery in order to clone the markup of the desktop version menu, and...
View ArticleRudimentary text expander
There are jQuery plugins, like TextExpander, which work well with portions of text wrapped inside a single element (like a ‘<p>’ tag), but when it comes to collapse block elements, the animation...
View ArticleCheck if page scroll is at bottom
May seem odd to check if the page scroll is at bottom, but can be useful if you need to hide something or show something else, as in a back to top button for example. $('#back-to-top').hide();...
View ArticleQuick and simple jQuery accordion
A simple jQuery snippet for those times when you don’t need an entire plugin, but just something quick, and on the spot. <ul class="accordion"> <li> <div class="heading">Lorem ipsum...
View ArticlejQuery toggle functions
The toggle() method was deprecated in jQuery 1.8 and removed in 1.9. In jQuery 1.9 the toggle() method does not toggle between two or more functions on a click event, it just toggles the visibility of...
View ArticleBxSlider slides counter
Update! Scroll to updated code. Add a slides counter ( current/total ) to bxSlider carousels, using bxSlider callbacks and methods. You just have to add an html element ( ex. ‘<div...
View Article
