post

Defer parsing of javascript to improve performance in wordpress

Nothing for introduction, hehe! A very small snippet which will help you to defer parsing all javascript files except jquery in wordpress. Here is the code:

You can add those codes in your functions.php in the theme, if you think your theme won’t be changed. Otherwise mu-plugins is the best solution. To use mu-plugins, go to /wp-content/ and find the folder with name ‘mu-plugins’. If there is no folder in that name, then create a folder, name it ‘mu-plugins’, create a file inside that, give any name you like and paste the code in there. You don’t need to activate that plugin. Mu-plugins means must use plugins, so it will be activated automatically always. If you use mu-plugins then add a php start tag at the beginning of the code.

A very simple jQuery slideshow – jSlider

Guys, this is a very simple jQuery slideshow, jSlider. Nothing special in naming, I just used a follower’s convention. This plugins have some configuration options. Let’s look at the code.

We just need one block element to implement the slideshow.

In here we just need to configure some options. Among those, images field are required to put the images path. Also for caption, we may have title, some text and url to redirect on.

Remember, we can’t put text/title/url for only one image, we need to put for all. In that case, if we don’t need we can use “” or # (in case of url).

Any more questions? Ask in the comment box.

Anyway, this plugin is free to use, just keep the author info at the top. :)

Why don’t you check the demo? ;)

DOWNLOAD FROM github

BeautyMenu: A simple jQuery drop down menu plugin

Hey Folks, this is a very simple one level drop down menu plugin for you. Usage of this plugin is very simple. This is version 1. In next version I will make it for multi-level menu items.

You can check demo before jump into the code.

Now, it’s time to dive into the codes.

In section, write the following code:

Here, the css is for styling the menu. I also used two plugins – hoverIntent and easing.

In section –

Now, the css part is:

The beautyMenu plugin code is:

Now, it’s time to call the plugin. You have four parameter to set, if you want you can leave these alone – then it will get its default values.

Put the following code into head section:

or just simply

You can download the source code here.

This plugin is free to use and modify, just keep the author info at the top ;)

post

Change input type text to password type onclick – JQuery

Sometimes we need to change input type text to password type when user click on it. It should like more attractive. This is very simple. Here is the code for jQuery, just set a class name e.g. pw for that input field:

post

Fix png issue for jQuery fadeIn()/fadeOut() effect IE7

When we use jQuery fadeIn() or faeOut() function with transparent png image, in IE7 we get a weird borer around it. There are many solutions for it, but we cant say that all of those are okay to everyone. This one works for me and some other guys. Call the following function in document load.

post

A very simple popup plugin

This is a very simple popup plugin with jQuery. As I am a newbie, so this is for newbies. Hope it can reduce their pressure.

Special thanks goes to:
Anjan Bhowmik Da
Adrián Mato Gondelle

HTML Code:
[html]

[/code]

In head tag:
[code lang=”html”]

[/html]

CSS Code:

[css]

.backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
.popupBox{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
border:10px solid #666;
border-radius:10px;
z-index:200;
}
.popupBoxClose{
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#6fa5fd;
font-weight:700;
display:block;
cursor:pointer;
}

[/css]

Plugin code:

[javascript]

(function($) {
$.fn.jPopup = function(options)
{
var settings =
{
‘className’: ‘popup’
};

var popStatus = 0;
var methods =
{
loadPopup: function(obj)
{
var jId = obj.attr(‘href’);
if(popStatus == 0)
{
$(jId).append(‘

‘);
$(jId+” .backgroundPopup”).css({“opacity”: “0.5”});
$(jId+” .backgroundPopup”).fadeIn(“slow”);
$(jId+” .popupBox”).css(‘width’, $(jId+” .popupBox div:first-child”)
.width()).append(‘X‘)
.fadeIn(“slow”);
popupStatus = 1;
}
},

disablePopup: function(obj)
{
var jId = obj.attr(‘href’);
$(“.popupBoxClose, .backgroundPopup”).live(‘click’, function() {
$(jId+” .popupBox”).fadeOut(“slow”);
$(jId+” .backgroundPopup”).remove();
$(jId+” .popupBoxClose”).remove();
popupStatus = 0;
});
},

centerPopup: function(obj)
{
var jId = obj.attr(‘href’);
var windowWidth = $(window).width();
var windowHeight = $(window).height();
var popupHeight = $(jId+” .popupBox”).height();
var popupWidth = $(jId+” .popupBox”).width();

//centering
$(jId+” .popupBox”).css({
“position”: “absolute”,
“top”: windowHeight/2-popupHeight/2,
“left”: windowWidth/2-popupWidth/2
});

//only need force for IE6
$(jId+” .backgroundPopup”).css({“height”: windowHeight});
},

showPopup: function(obj)
{
obj.bind(‘click’, function() {
methods.loadPopup(obj);
methods.centerPopup(obj);
return false;
});
}
};

return this.each(function() {
if(options) $.extend(settings, options);
methods.showPopup($(this));
methods.disablePopup($(this));
});
};
})(jQuery);

[/javascript]

Call in HEAD section in html:

[html]

//

*{margin:0; padding:0;}
body{font:11px/15px arial;}
#test{width:500px; background:#CCC}
.test-pad{padding:15px;}
h3, p{margin-bottom:10px;}
#popup-test{margin:150px auto 0; text-align:center}

[/html]

post

An easy tooltip plugin tutorial

This is a simple tooltip plugin. You have some parameter that you can use but not mandatory. This is very simple. Not a hot-&-sexy tooltip but you can work with it. Lets check the codes.

HTML Code:
[html]

What is this?Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet

Open InfoSorry! You are not allowed to see this info. Please verify your username and password.

Stop! Right there!!Do not enter through that door. You will be dead.

[/html]

In head tag:
[html]

[/html]

And the js-script:
[javascript]
$(document).ready(function() {
$(‘.help’).jTooltip();
$(‘.info’).jTooltip({
tip: ‘info’, //info, alert or help
});
$(‘.alert’).jTooltip({
tip: ‘alert’, //info, alert or help
color: ‘red’ //any color or color code
});
});
[/javascript]

jTooltip.css

[css]
.tipText{
display:none;
}

.jTooltip{
width:200px;
background:url(../images/arrow.png) no-repeat center bottom #FFFFFF;
position:absolute;
left:0;
padding-bottom:16px;
font-size:10px;
line-height:100%;
}

.jTooltip .jText{
border:2px solid #000000;
border-bottom:none;
padding:7px 7px;
}

.jTooltip img.jIcon{
margin-left:5px;
}

.jTooltip-v{
width:200px;
background:url(../images/arrow-v.png) no-repeat center top #FFFFFF;
position:absolute;
left:0;
padding-top:16px;
font-size:10px;
line-height:100%;
}

.jTooltip-v .jText{
border:2px solid #000000;
border-top:none;
padding:7px 7px;
}

.jTooltip-v img.jIcon{
margin-left:5px;
}

[/css]

jTooltip.js plugin:

[javascript]
(function($) {
$.fn.jTooltip = function(options)
{
var settings =
{
‘tip’: ‘help’,
‘color’: ‘#000′
};

var tooltipClass = “jTooltip”;

var methods =
{
tooltip: function(obj)
{
obj.hover(function(e) {
if(e.pageY < 100) tooltipClass = "jTooltip-v";

var html =obj.find('span.tipText').html();
obj.css({'position':'relative'});
switch(settings.tip)
{
case 'help':
var image = "“;
break;

case ‘alert’:
var image = ““;
break;

case ‘info’:
var image = ““;
break;
}

html = “

” + image + html + “

“;
obj.append(html);

tlObj = obj.find(‘.’+tooltipClass);

var jTop = -(tlObj.height() + obj.height() + 3);
if(e.pageY < 100) jTop = obj.height();
tlObj.css({'color': settings.color, 'top': jTop});

}, function() {
$('.'+tooltipClass).remove();
obj.css({'position':'static'});
});
}
};

return this.each(function() {
if(options) $.extend(settings, options);
methods.tooltip($(this));
});
};
})(jQuery);
[/javascript]

This is my second plugin, but I think it will help new developers to learn about jquery plugin tutorial.

Grateful: Anjan Bhowmik
Demo: css-avenue.com/works/tooltip/
Download: css-avenue.com/works/tooltip/tooltip.zip

post

Create a dynamic image gallery using ajax, jquery and php (XML also)

This is a tutorial to create a dynamic image gallery using jQuery ajax and php mainly. To reduce burden, I added a normal script to read directory. In gallery.php file it will read the directory and will generate a xml file which will be thrown directly to the index file (actually ajax in index file will request to execute this file and read the generated the XML formatted data). A lightbox plugin is also used in this script. Let’s have a look:

HTML:

Portfolio

”” ””

CSS:

{code type=css}

*{margin:0; padding:0;outline:none}
.clr{clear:both;}
a{text-decoration:none;}
@font-face{src:url(‘../fonts/Agency_FB.ttf’);font-family:agency;}
body{font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#000000}
ul{list-style-type:none;}
h1, h2, h3, h4{font-family:agency;}
h2{font-size:20px; border-bottom:5px solid #CCCCCC;}
#wrapper{margin:0 auto;width:500px;}
#lightbox{padding:10px;background:url(../images/portfolio.png) repeat;margin-top:10px;border-radius:15px;border:3px solid #CCCCCC;overflow:hidden}
ul.gallery li{float:left; border:1px solid #666666; margin:5px 7px;}
ul.gallery li a{padding:1px; overflow:hidden; display:block}
ul.gallery li a img{width:100px; height:100px; opacity:0.2}

{/code}

JS Code and stylesheet link which should be placed into head section:

{code type=html}

// <![CDATA[
$(document).ready(function() {

$.ajax({
type: “GET”,
url: “gallery.php”,
dataType: “xml”,
success: function(xml){

//pagination for gallery photos
var startIndex = 0; // gets edited via ui
var howMany = 4; // constant of how many per page, but you could make this a ui changeable thing too
var issues = $(xml).find(‘item’); //the resulting issues from the xml
var totalIssues = issues.length;
var displayIssues = function() { // display the issues
var issuesPaginated = issues.slice( startIndex , (startIndex + howMany) );
$(‘ul.gallery’).html(”); // clear old issues
issuesPaginated.each(function(){
var url = $(this).find(‘link’).text();
var alt = $(this).find(‘alt’).text();
$(‘

  • ‘).html(‘<a href=”images/fullscreen/’+url+'” rel=”prettyPhoto
    [gallery1]
    ”>’).appendTo(‘ul.gallery’);
    });
    //lightbox code for gallery after parsing xml
    $(“area[rel^=’prettyPhoto’]”).prettyPhoto();
    $(“.gallery:first a[rel^=’prettyPhoto’]”).prettyPhoto({animation_speed:’slow’,theme:’light_square’,slideshow:3000, autoplay_slideshow: false});
    $(“.gallery:gt(0) a[rel^=’prettyPhoto’]”).prettyPhoto({animation_speed:’slow’,slideshow:10000, hideflash: true});
    $(“#custom_content a[rel^=’prettyPhoto’]:first”).prettyPhoto({
    custom_markup: ‘

    ‘,
    changepicturecallback: function(){ initialize(); }
    });
    $(“#custom_content a[rel^=’prettyPhoto’]:last”).prettyPhoto({
    custom_markup: ‘

    ‘,
    changepicturecallback: function(){ _bsap.exec(); }
    });
    $(‘.gallery a img’).hover(function() {
    $(this).stop().animate({opacity:1}, 1000);
    }, function() {
    $(this).stop().animate({opacity:0.2}, 1000);
    });
    }
    $(‘#prevButton’).click(function() {
    startIndex -= howMany;
    if( startIndex >= 0) {
    //startIndex += howMany;
    displayIssues();
    if((startIndex) <= 0) $(this).hide();

    if(totalIssues – startIndex > howMany) $(‘#nextButton’).show();
    }
    });
    $(‘#nextButton’).click(function() {
    startIndex += howMany;
    if( startIndex < totalIssues) {                         //startIndex += howMany;

    displayIssues();

    if((startIndex + howMany) >= totalIssues) $(this).hide();
    if(totalIssues – startIndex > howMany) $(‘#prevButton’).show();
    }
    });
    displayIssues(); // display for the first time (ajax call);
    }
    });
    });
    // ]]>

    {/code}
    Its not fully tested. Perfectly tested in FF.

    Live in action

    Download

    Thanks.

    post

    Make image vertically centered align within a div and don’t let user save the picture easily

    This is a very easy tutorial to set an image vertically centered within a div. Simple jQuery codes are used here. There is a also a nice option added that won’t let your user save the image easily. Please look at the code:

    [html]

    .resize{
    width:105px;
    height:100px;
    background-position:center;
    border:1px solid #000000;
    margin:20px auto;
    background-repeat:no-repeat;
    }

    $(document).ready(function() {
    $(‘.resize’).each(function() {
    var src = $(this).find(‘img’).attr(‘src’);
    $(this).find(‘img’).attr(‘src’, ‘t.png’).css({‘width’:’100%’, ‘height’:’100%’});
    $(this).css({‘backgroundImage’: ‘url(‘+src+’)’});
    });
    });

    [/html]

    Download Link

    post

    Create Simple Jquery Right Click Cross browser Vertical Menu

    Here is the code:

    [html]

    #rightclickarea{width:500px; margin:0 auto; height:300px; border:1px solid #000000;}
    .vmenu{border:1px solid #aaa;position:absolute;background:#fff; display:none;font-size:0.75em;}
    .vmenu .first_li span{width:100px;display:block;padding:5px 10px;cursor:pointer}
    .vmenu .inner_li{display:none;margin-left:120px;position:absolute;border:1px solid #aaa;
    border-left:1px solid #ccc;margin-top:-28px;background:#fff;}
    .vmenu .sep_li{border-top: 1px ridge #aaa;margin:5px 0}
    .vmenu .fill_title{font-size:11px;font-weight:bold;/height:15px;/overflow:hidden;word-wrap:break-word;}

    $(document).ready(function(){

    $(‘#rightclickarea’).bind(‘contextmenu’,function(e){
    var $cmenu = $(this).next();
    $(‘

    ‘).css({left : ‘0px’, top : ‘0px’,position: ‘absolute’, width: ‘100%’, height: ‘100%’, zIndex: ‘100’ }).click(function() {
    $(this).remove();
    $cmenu.hide();
    }).bind(‘contextmenu’ , function(){return false;}).appendTo(document.body);
    $(this).next().css({ left: e.pageX, top: e.pageY, zIndex: ‘101’ }).show();

    return false;
    });

    $(‘.vmenu .first_li’).live(‘click’,function() {
    if( $(this).children().size() == 1 ) {
    alert($(this).children().text());
    $(‘.vmenu’).hide();
    $(‘.overlay’).hide();
    }
    });

    $(‘.vmenu .inner_li span’).live(‘click’,function() {
    alert($(this).text());
    $(‘.vmenu’).hide();
    $(‘.overlay’).hide();
    });

    $(“.first_li , .sec_li, .inner_li span”).hover(function () {
    $(this).css({backgroundColor : ‘#E0EDFE’ , cursor : ‘pointer’});
    if ( $(this).children().size() >0 )
    $(this).find(‘.inner_li’).show();
    $(this).css({cursor : ‘default’});
    },
    function () {
    $(this).css(‘background-color’ , ‘#fff’ );
    $(this).find(‘.inner_li’).hide();
    });

    });

    Right click inside bordered container
    Open
    Open in new tab
    Quick Preview

    Dossier
    Channel 1
    Channel 2
    Preview

    Channel 1
    Channel 2
    Edit
    Event Log
    New
    Assignments

    Assignement 1
    Assignement 2
    Assets

    Asset 1
    Asset 2
    All Assets
    Preview
    Move to

    Folder name
    Others

    Mark as Read
    Mark as Unread
    Trash
    Archieve
    Commite
    Release

    [/html]