ajDeskta Blog

The Web Factor

aj — Tue, 29 Dec 2009 13:15:19 +0000

Rob Hawkes talks about The Web Factor.

Have a read here.

Live Preview v2.0 : jQuery

aj — Wed, 09 Dec 2009 07:26:32 +0000

In the previous version of jQuery live preview we made a basic widget to track update the preview area on every keyUp.

This new widget updates the live preview area on pasting a piece of text via right click, CTRL + V and drag and drop. Try it out yourself ..

and see a preview here ..

HTML

<textarea id="live-preview-textarea" style="width: 200px; float:left; margin-right: 20px;">
Write here ..

and see a preview here ..

CSS

#live-preview-textarea {
    width: 200px;
    height: 200px;
    margin: 0 20px 0 0;
    padding: 10px 15px;
    float: left;
    background: #06C;
    color: #FFF;
    font: 13px/1.8 Arial;
    border: 0;
    }
#live-preview-wrapper {
    width: 200px;
    height: auto;
    overflow: hidden;
    font: 13px/1.8 Arial;
    }

jQuery

$(document).ready(function() {

    $(' #live-preview-textarea ').bind("keyup mouseover", function() {
        var livePreviewVar = $(this).val();
        var livePreviewVar = livePreviewVar.replace(/</g, "<");
        var livePreviewVar = livePreviewVar.replace(/\n/g, "<br/>");
      
        $(' #live-preview-wrapper ').html(livePreviewVar);
    });

});

How To Create A Website For Free

aj — Mon, 23 Nov 2009 01:19:14 +0000

The best things may come for a cost but this doesn't mean that good things aren't available for free. This post is your guide to create your website with a customized domain and free web hosting.

Get A Domain

Co.Cc provides free of cost domain names for a period of one year after which you can renew domain for an affordable cost.

Click here to sign up at Co.Cc.

Get A Web Host

110mb.com provides free web hosting for life time.

Click here to sign up at 110mb.com.

As an alternative you can also try freehostia which offers free web hosting with its chocolate package.

Customize You Website

Now it's time to publish your website. If your a familiar with HTML and CSS then you can create your website from scratch or you can take help of web page editors like Adobe DreamWeaver, Coffee Cup, etc. Alternatively you can use some pre-designed website templates from websites like FreeWebTemplates, FreeWebsiteTemplates and many more which provide free templates to customize your website. You can choose a templates which best suits your niche.

Now you have your own unique domain name and web space. You also have a customized template for your website. You're all set for publishing your website.

enjoy

Live Preview : jQuery

aj — Sun, 01 Nov 2009 22:31:42 +0000

and see a preview here ..

HTML

<textarea id="live-preview-textarea" style="width: 200px; float:left; margin-right: 20px;">
Write here ..

and see a preview here ..

CSS

#live-preview-textarea {
    width: 200px;
    height: 200px;
    margin: 0 20px 0 0;
    padding: 10px 15px;
    float: left;
    background: #06C;
    color: #FFF;
    font: 13px/1.8 Arial;
    border: 0;
    }
#live-preview-wrapper {
    width: 200px;
    height: auto;
    overflow: hidden;
    font: 13px/1.8 Arial;
    }

jQuery

$(document).ready(function() {

    $(' #live-preview-textarea ').keyup(function() {
        var livePreviewVar = $(this).val();
        var livePreviewVar = livePreviewVar.replace(/</g, "<");
        var livePreviewVar = livePreviewVar.replace(/\n/g, "<br/>");
      
        $(' #live-preview-wrapper ').html(livePreviewVar);
    });

});

Select Box Linking : jQuery

aj — Sun, 25 Oct 2009 13:32:47 +0000

A tutorial to create hyperlinks in select box options.

check it out ..

Link Hover Title : jQuery

aj — Sun, 25 Oct 2009 13:10:25 +0000

A tutorial to show an element's content as its title text using jQuery.

check it out ..

10+ jQuery Form Enhancement PlugIns

aj — Wed, 21 Oct 2009 11:59:28 +0000

.. direct link ..

Link Hover Effects : jQuery

aj — Wed, 21 Oct 2009 05:52:23 +0000

3 variation of hover effects on hyperlinks.

check it out ..

Simple Slider Menu : jQuery

aj — Wed, 21 Oct 2009 05:42:43 +0000

A tutorial to make a simple and easy slide down menu with jQuery.

It's in 3 variations

Simple slider menu
Slider menu with hover effects
A toggle down menu

check it out ..

Blogger Widget : Change Font Color and Size

aj — Wed, 16 Sep 2009 22:46:28 +0000

Here we are with a fully functional widget for your Blogger blog to give your readers more options to increase their reading comfort.

Features of This Widget

It's completely packed and well formatted.
It allow us to change the text color of the post area as black, white, blue and gray.
It allow us to change the text size of the post area as 10, 12, 14, 16.

Installation

Step #1 : From your Blogger Dashboard navigate to Layout › Edit HTML. On that page in the code area (text area) search (CTRL + F) for and just before line insert this line of code and save the template.

P.S : If your blog already have a jQuery main file linked to it then above step isn't required.

Step #2 : Now navigate to Layout › Page Elements and on the sidebar area open Add A Gadget link and in the new pop up window select HTML/javaScript widget.

On the new page in the same pop up window leave the Title area blank and under the Content area put this code and save the widget and you are done.

<!– Code Begins –>
<!– http://blog.ajDeskta.com/ –>
<style type="text/css">
/** ajDeskta Blog - Font Color and Size Change widget begins **/
#tuw-font-change-widget {width: auto;}
#tuw-font-change-widget h2 {margin: 0 0 8px 0 !important;font: 12px Tahoma !important;font-weight: normal !important;border: 0 !important;}
#tuw-font-change-widget ul {width: auto; overflow: hidden;margin: 0 0 20px !important;padding: 0 !important;list-style; none !important;}
#tuw-font-change-widget ul li {width: 20px !important;height: 20px !important;overflow: hidden;margin: 0 10px 0 0 !important;padding: 2px !important;display: block !important;float: left !important;border: 1px solid #CCCCCC !important;}
#tuw-font-change-widget ul li a {width: 20px !important;height: 20px !important;display: block !important;line-height: 18px !important;text-align: center !important;color: #FFFFFF !important;font-size: 11px !important;font-family: Tahoma !important;text-decoration: none !important; outline: 0 !important;}
#fcw-black { background: #000000 !important; } #fcw-white { background: #FFFFFF !important; } #fcw-blue { background: #0066CC !important; } #fcw-gray { background: #666666 !important; }
#fcw-color a { text-indent: -999px !important; }
#fcw-size a { background: #333333 !important; }
/** ajDeskta Blog - Font Color and Size Change widget begins **/
</style>
<script type="text/javascript">
$(document).ready(function(){
// Change Font Color — begins
$(" #fcw-color #fcw-black ").click(function() {
$(" .post-body ").css({ color: "#000000" });
return false;
});</p> <p>$(" #fcw-color #fcw-white ").click(function() {
$(" .post-body ").css({ color: "#FFFFFF" });
return false;
});</p> <p>$(" #fcw-color #fcw-blue ").click(function() {
$(" .post-body ").css({ color: "#0066CC" });
return false;
});</p> <p>$(" #fcw-color #fcw-gray ").click(function() {
$(" .post-body ").css({ color: "#666666" });
return false;
});
// Change Font Color — ends</p> <p>// Change Font Size — begins
$(" #fcw-size #fcw-10 ").click(function() {
$(" .post-body ").css({ fontSize: "10px" });
return false;
});</p> <p>$(" #fcw-size #fcw-12 ").click(function() {
$(" .post-body ").css({ fontSize: "12px" });
return false;
});</p> <p>$(" #fcw-size #fcw-14 ").click(function() {
$(" .post-body ").css({ fontSize: "14px" });
return false;
});</p> <p>$(" #fcw-size #fcw-16 ").click(function() {
$(" .post-body ").css({ fontSize: "16px" });
return false;
});
// Change Font Size — ends
});
</script>
<!– ajDeskta Blog - Blogger Change Font color and size widget begins –>
<div id="tuw-font-change-widget">
<div class="tuw-fcw">
<h2> Change Font Color </h2>
<ul id="fcw-color">
<li> <a id="fcw-black" href="#">black</a> </li>
<li> <a id="fcw-white" href="#">white</a> </li>
<li> <a id="fcw-blue" href="#">blue</a> </li>
<li> <a id="fcw-gray" href="#">gray</a> </li>
</ul>
</div></p> <p><div class="tuw-fcw">
<h2> Change Font Size </h2>
<ul id="fcw-size">
<li> <a id="fcw-10" href="#">10</a> </li>
<li> <a id="fcw-12" href="#" title="Default Size">12</a> </li>
<li> <a id="fcw-14" href="#">14</a> </li>
<li> <a id="fcw-16" href="#">16</a> </li>
</ul>
</div>
</div>
<!– ajDeskta Blog - Blogger Change Font color and size widget ends –>
<!– Code ends –>

Have fun with this new widget on your blog.

enjoy