Change Class using Jquery

The power of jQuery offers many features to web developers. jQuery has addClass(), removeClass() and toggleClass() methods to change class.

//Add a class
$('#element').addClass('class_name');

//Remove a class
$('#element').removeClass('class_name');

//Remove old class and add new class
$('#element').removeClass('old_class').addClass('new_class');

//Or a short way to swap classes
$("#element").toggleClass('old_class new_class');

Read More

disable fancybox after binding

I am having a strange issue, I have code that pulls content of wordpress posts that was using some plugin to bind fancybox to certain elements on the page. But now I want to implement that fancybox binding from some elements on that page.

Read More

Closing colorbox

Colorbox is a jQuery plugin, Nowadays jquery colorbox plugin is mostly used for displaying content in popup window. But there are still somethings where we stuck. Closing colorbox is one of them.

Read More

Resizing colorbox iframe using jquery

Once I was in problem of resizing colorbox iframe.
The scenario was that I have opened the colorbox iframe for opening a page and that iframe size was according to that opened page content.

Read More

Toggle class using jQuery

Sometimes we faced the problem of toggling the class in html because of only by changing the classes can do a different action in html.

Toggle class means exchange the class names. We can toggle class using jQuery as follows:

$(document).ready(function(){

if($('#id').hasClass('active'))
$('#id').removeClass('active').addClass('deactive');
else
$('#id').removeClass('deactive').addClass('active');

})

Read More

Arrow on scrolling the page using jquery

Sometimes we faced the problem on scrolling the content on the page and go to the bottom of the page and feel we need to go on top of the page.

For that we need to scroll the page again which is irritating. If there would be any option to click on which we can jump to top of the page easily seems good.

Read More

Opening a html page within fancybox

Opening inline HTML in a fancybox popup is easily achievable but once I faced the problem of opening a html page within the fancybox popup.

After googling, I found the solution that ‘type’ property of fancybox we need to include on calling of it.

Read More

How to open fancybox on page load?

Opening fancybox on page load is very simple. just call below given code in document ready eg.

$(document).ready(function () {
        $.fancybox({
            'width': '80%',
            'height': '80%',
            'autoScale': true,
            'transitionIn': 'fade',
            'transitionOut': 'fade',
            'type': 'iframe',
            'href': 'http://www.example.com'
        });
});

Read More

[ Page 7 of 7 ]