Alpha Codes

jquery to search and highlight words in html

noreply@blogger.com (Unknown) — Sun, 13 Oct 2013 10:55:00 +0530

Today, i have worked on a very simple script to search and highlight words in jquery inside HTML. Let's get started, shall we?

Let me explain the basic logic first. The idea is to look into the browser object's content and try to match the word or phrase using the regular expression. Then , the object is replaced with the highlighted css, if the search matches.

First, the jQuery code, later the explanation...

function replaceText() {

$("body").find(".highlight").removeClass("highlight");

var searchword = $("#searchtxt").val();

var filter = new RegExp("\\b"+searchword+"\\b", "ig");

if(searchword!=""){

$("body").each(function( ) {
$(this).html($(this).html().replace(filter,"<span class='highlight'>" + searchword + "</span>")) ;
});
}

}

1. $("body").find(".highlight").removeClass("highlight");
This line removes the previously highlighted searched words

2. var filter = new RegExp("\\b"+searchword+"\\b", "ig");
\\b is used to check for complete word or phrase, "i" is used to ignore case and "g" is used to search pattern throughout string. Look at this Javascript regular expression link for more info. (of course, you can use more complex pattern matches)

3. $("body").each(function( ) {...});
I am looking for the search word throughout the 'body' element, hence , for each word in element, am comparing the lookup text. If you want to search for a particular content or block of content, then use the element ID, for example $("#division").each(function(){});

4. $(this).html($(this).html().replace(filter,"<span class='highlight'>" + searchword + "</span>")) ;
$(this) here refer to 'body' element, using java script's " replace" function we are replacing the searched word with the filtered word, with little css to highlight it!.

CSS

<style>

.highlight{ background:#00FF00; padding:1px; border:#00CC00 dotted 1px; }

</style>

Content

<body >

<p>

The ACM Digital Library, a part of the ACM Portal, contains a comprehensive archive of the organization's journals, magazines, and conference proceedings. Online services include a forum called Ubiquity and Tech News digest.

ACM requires the copyright of all submissions to be assigned to the organization as a condition of publishing the work.[2] Authors may post the documents on their own websites, but they are required to link back to the digital library's reference page for the paper. Though authors are not allowed to charge for access to copies of their work, downloading a copy from the ACM site requires a paid subscription.
</p>

</body>

Just added a text box and a button ; onclick of which search is triggered!.

Is it not really simple?, But wait....

There is a disadvantage that am bound to.

If a search string is in lower case , on highlighting the same, the actual word is replaced with the searched word along with css, hence the word "The" becomes "the" with highlight at beginning of a sentence, which is grammatically in correct.

DEMO LOOK:

Please suggest (through comment) any solution to overcome the above disadvantage and any other fault you find , so that many are benefited with it!!.

Please subscribe if found useful and click on above links to see more cool codes :)

Google like page load in Jquery ajax (dynamic page load)

noreply@blogger.com (Unknown) — Sun, 13 Oct 2013 10:21:00 +0530

Hi ,

Today, i would teach you a very simple method to load multiple pages into a single page, without showing page URL's.in the address bar.

I am using Jquery, ajax to achieve the below.

First, let us create a page html/php(say index.php) and let us create two DOM objects. one is the button and another division, where the external pages are loaded dynamically.

<input type="button" value="load"/> - creates the button.

<div id="page_loader"></div> - create div to load page into it.

Now , let us write a function in Jquery to load pages on the fly.

function loadpage(page){

$.ajax({

url:page,

beforeSend:function(){

$('#page_loader').html("Please wait...");

success:function(data){

$('#page_loader').html(""); // to empty previous page contents.

$('#page_loader').html(data);

}

});

}

Now , from the button click, pass the page that you would like to load.
For e.g , if you want to load a contact page contact.php.. simply call the function like this...

On click of the button , the contact.php page will be loaded into the "page_loader" division in the index.php page. Like this we can load 'n' number of pages in a single page.

Please subscribe for more cool codes :)

That's it guys feedback's are welcome! :)

Google like menu in jquery

noreply@blogger.com (Unknown) — Sun, 13 Oct 2013 00:33:00 +0530

I just love google's new look, especially the menus in Beta version. have you noticed the border that appears for each link which you have selected?. Well lets learn how to create one such fantastic menu button using jquery and css.

Include jquery library

create a HTML page and few link texts

<div id="menu">
<div class="normal"> Everything </div>
<div class="normal"> Images </div>
<div class="normal"> Maps </div>
</div>

Write a little css fo the same

.normal{
    width:100px; height:30px;
    margin:5px; padding:5px 5px 5px 15px;
    background: #FFFFF;
    text-align:left;
    border:#fff solid 5px;
    cursor:pointer;
}

.clicked{
    width:100px; height:30px;
    margin:5px; padding:5px 5px 5px 15px;
    background: #FFFFF; color:#FF0000;
    text-align:left;
    border-left:#00cc00 solid 5px;
    cursor:pointer;
}

Now the Jquery to perform magic

$(document).ready(function () {

    $("#menu > div").each(function() {

        $("#menu > div").click(function() {

            $("#menu > div").removeClass("clicked");
            $(this).addClass("clicked").animate({ borderLeftWidth: "5px" }, 1500 );

            });

        });
});

Thats it guys!!

Please subscribe if found useful and click on other links to see more cool codes :)

DEMO LOOK:

Google beta Menu

jQuery to export html table data into excel sheet

noreply@blogger.com (Unknown) — Sun, 13 Oct 2013 00:07:00 +0530

Simple script to export html table or PHP data to excel sheet using jQuery, without having to write separate script again in php.

The basic idea is to take the html data as a screen shot and render it into excel output using jQuery.

Here is how it is done.

Wrap a div with an ID around the data that needs to be exported. Attach the form at the end of the data with an hidden text element

<div id="excelExportDivision">

<table cellpadding="5" cellspacing="5" border="1">
<tr>
          <th>Blog</th>
</tr>
<tr>
         <td>http://www.sreevathsabv.blogspot.com</td>
</tr>
</table>
</div>

<form style="display:hidden" name="hiddenForm" id="hiddenForm" method="post" action="export_file.php">
        <input type="hidden" id="hiddenExportText" name="hiddenExportText">
        </form>

Next we will see a simple jQuery script , on click of which we trigger a page call, where headers for excel export is coded.

function excel_export(){

var content = document.getElementById('excelExportDivision').innerHTML;

$('#hiddenExportText').val(content);

document.getElementById("hiddenForm").submit();

}

You can call the function like so , <input type="button" onclick="excel_export();" value="submit"/>

..... and finally the export_file.php page.

<?php
header('Content-type: application/vnd.ms-excel');

header("Content-Disposition: attachment; filename=BOBreport.xls");

header("Pragma: no-cache");

header("Expires: 0");

echo $_REQUEST['hiddenExportText'];
?>

NOTE: I HAVE MADE SOME CHANGES AS SOME OF MY FRIENDS HAVE COMMENTED THAT IT IS NOT WORKING. IT"S FIXED AND WORKING... :)

This is as simple as i can suggest you to export the php data into excel sheet.

It is amazingly fast and reliable.

Subscribe for more cool codes and see the other links below for more cool stuff!!

Custom news ticker script using jQuery

noreply@blogger.com (Unknown) — Sat, 12 Oct 2013 23:35:00 +0530

Hi everyone!

Here is a piece of cake , a custom news ticker script using jquery.

First create a division and write all the tickers inside the "<li>" tags.

<div>

<li>First news ticker text</li>

<li>Second news ticker text </li>

</ul>

</div>

Next add some css to hide the <li> texts and style up your news box column as you like.

#news{

height: 50px;

overflow: hidden !important;

border-bottom:#F00 1px dashed; margin:opx auto;

}

#news li {

height: 50px;

}

Now a very simple jQuery script to bring your news ticker to life

//function to find the texts other then the first text

function newstick(){

$('#news li:first').animate({'opacity':0}, 200, function () { $(this).appendTo($('#news')).css('opacity', 1); });

}

// This will automatically call the next tickers for a time interval of 4 sec

setInterval(function(){ newstick() }, 4000);

Thats it! told you was a piece of cake!

Tested with latest browsers only. Let me know your thoughts through comments!

subscribe for more cool codes and see the other links below!.

Have a great day! :)

Using multiple accordion in jquery with single function

noreply@blogger.com (Unknown) — Sat, 12 Oct 2013 23:03:00 +0530

I was working on an application recently and i had to use accordion in multiple places and pages. Of-course this was a extra space and time. So, i came up with an idea to make my own accordion in
jQuery which can be called any time with help a single function.This could not be a complete solution, but certainly has re usability.
Today i will be sharing this knowledge with you all and hope it would be helpful.

First create a function pass two variables to the function. first parameter is link field with which we click to toggle , second parameter is the division which opens and closes data. rest is a simple logic as you can see.Note that parameter are nothing but your div ID's.

var Toggled=false;

$(document).ready(function() {

call this for each page and forget manual coding to check if you need to place accordion or not..

That's it guys , feedback's are welcome!!.

below are some other useful links, click and explore!!! :)

PHP code to connect multiple MySQL server,multiple database simultaneously

noreply@blogger.com (Unknown) — Sat, 12 Oct 2013 20:23:00 +0530

Have you ever tried to connect two different servers and tried to query MySQL database located in each server, to produce a single result from a single query?. If yes, probably you would be disappointed as much as i was. As far as i know, this cannot be achieved in one shot!.

Therefore, i would walk you in this post, on, how to achieve the same using a different approach.

You must always have two step approach for this.
open connection to both the servers from PHP script
query first server with first connection. close the connection.
query second server with second server. close the connection.
fetch the resultant rows
merge the resultant array using array_merge().

The following php code would help you understand completely how its done.

<?php

$dbh1 = mysql_connect('server1', 'username', 'password')or die("Unable to connect to MySQL1");
$dbh2 = mysql_connect('server2', 'username', 'password') or die("Unable to connect to MySQL2");

mysql_select_db('db1', $dbh1);
mysql_select_db('db2', $dbh2);
$ar = array();$ar2 = array();

$qry1 = mysql_query("select * from db1.table1 where db1.table1.id='261' and db1.table1.id=db1.table1.id",$dbh1) or die(mysql_error());
while($row = mysql_fetch_array($qry1))
{
$ar[] = $row;
}

$qry2 = mysql_query("select * from db2.table1 where db2.table1.id='421' and db2.table1.id=db2.table1.id",$dbh2) or die(mysql_error());
while($row2 = mysql_fetch_array($qry2))
{
$ar2[] = $row2;
}

$result = array_merge($ar, $ar2);

// using for loop to retrieve data
for($i=0;$i<count($result);$i++)
{
echo $result[$i]['realname'].'<br>';
}

// using for each loop to retrieve data

foreach($result as $k=>$val)
{
echo $val['realname']. '<br>';

}

// using while loop to retrieve data

while(list($key, $value) = each($result)){
echo $value['realname']. '<br>';
}

?>

Disadvantage:

Of course , if you are using a highly complex query this is not the preferred approach, since , you need more execution and just because of code complexity itself.
The resultant array of result returned would contain duplicate values and you have to sort it with a different approach using array sort etc...

Please subscribe for more cool codes :)

Thats all guys feedbacks are welcome.

Check out the my other links for other cool stuffs!! :)

swipe detection for android-ipad device using jQuery mobile

noreply@blogger.com (Unknown) — Sat, 12 Oct 2013 19:33:00 +0530

Here is the most simple script to detect the browser swipe feature using jquery mobile for android and ipad devices.ofcourse, we can work around the same example in regular browsing as well...

First , you need to download and add jquery mobile kit , to your current page.

You can use the jquery live method to bind the DOM element, as of jquery 1.7 use on method instead if live, which needs to be swapped for. Here, am using body element itself. Use jquery's swipeleft and swiperight event to produce the desired effect, like slide transition etc.. for now i would just alert when a event occurs.

$('body').live('swipeleft swiperight',function(event){
        if (event.type == "swiperight") {
           alert("swipped right side");
        }
        if (event.type == "swipeleft") {
            alert("swipped left side");

        }
        event.preventDefault();
    });

If you would want the page to be moved to left or right like that of ipad, then here is an additional code.

$('body').live('swipeleft swiperight',function(event){
        if (event.type == "swiperight") {
          jQuery.mobile.changePage("#page2",{transition:'slide'});
        }
        if (event.type == "swipeleft") {
          jQuery.mobile.changePage("#page1", {transition:'slide'});

        }
        event.preventDefault();
    });

pretty simple ha? , feedback are welcome..

Please subscribe for more cool code.

check out other links for cool stuff.... :)

how to install addons offline in Mozilla firefox

noreply@blogger.com (Unknown) — Sat, 12 Oct 2013 18:18:00 +0530

Hi,

1. First, You need to go the download page of the addons that you want.
2. rightclick on the download button and save link as in the PC.(of course you need to have Internet for this :) )
3. The link will be saved as " .xpi " format.
4. while you are offline,. simply open Mozilla firefor>Tools>Addons>Extensions, drag and drop the ".xpi" file here.
5. Restart mozilla and enjoy offline coding!!

Thats it guys feedback's welcome.!

Page scroll for ipad-android device using javascript-jquery

noreply@blogger.com (Unknown) — Sat, 12 Oct 2013 16:48:00 +0530

I am really inspired by ipad page scroll UI, it looks so smooth and elegant. So, i decided to write something for a page scroll for ipad/android device using javascript/jquery.

The logic is quiet simple, really, you will have the inner references for a DIV element (or any DOM element) to which you can scroll your lengthy page into ,just dock the DOM on top of page but with help of smooth transition using jquery, which would mimic ipad like page scroll.

Remember to include jquery plugin , jquery mobile plugin and css.

NOTE: The present code and scripts gives only an idea of the development or logic and does not concentrate on great design.and validation

Here is the basic HTML

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="width=device-width, minimum-scale=1 name="viewport"></meta>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="scroll" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<title>ipad App - framework</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<link type="text/css" href="css/ipad.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="js/default.js"></script>
</head>

CSS

.page{ width:720px; height:1000px;margin:5px; border:#CCCCCC solid 1px; }
@media only screen and (width:device-width) and (orientation:portrait){
.page{ width:720px; height:1000px;margin:5px; border:#CCCCCC solid 1px; }
}
@media only screen and (width:device-width) and (orientation:landscape){
.page{ width:950px; height:700px;margin:5px; border:#CCCCCC solid 1px; }
}

.pag{ top:0px; width:250px; height:50px; left:45%; position:fixed;}

jQuery

function scroll_section(ide)

{

$('#p_nm').html("Page"+ide).animate({top:"15px"},500); // div to show which page u have scrolled into

$('html,body').animate({scrollTop: $("#"+ide).offset().top},500);

}

thats it!, told you its simple!. :)

subscription and comments are welcome!.

simple jquery image gallery script

noreply@blogger.com (Unknown) — Sat, 12 Oct 2013 16:21:00 +0530

Hi,

I would walk you through a tutorial on creating a simple , powerful jquery image slider with titles.

Features:

Supports any number of images.
shows animated caption or titles for each image.
Thumbnail preview with scroll.
Auto scroll back of thumbnails.
works fine in many major browsers.
Easy to code and maintain.

Ok, lets start...

After you include jQuery file do the following in your index file,create a division named "capsule" , it will hold our entire slider.Create another division named "image_viewer" to hold our image viewer and title. Last, create third division "galleryContainer" that holders our thumbnail images ,left and right navigation arrows.

NOTE: In order to show captions please write the respective image caption in the respective "title" tag for each image.

complete HTML here:

</div>

</div>

Now for the important one, jQuery!

The comments are self explanatory, so am not talking more about it!.

$(document).ready(function() {

var x = parseInt ($('#innerscroll img').length)- 2; // remove count for 2 images left and right arrow

var count=1; //set counter to calculate image rotation

var path = $('#innerscroll>img:first').attr('src');

var caption = $('#innerscroll>img:first').attr('title');

$('#image_viewer>img').attr('src', path).animate({"easing": "linear",'opacity': "1.0"}, 500).show();

$('#image_viewer>span').html("").slideUp('fast');

$('#image_viewer>span').html(caption).slideDown('slow');

$('#arrow_left').click(function (event){

$('#arrow_left img').attr('src','images/arrow_left.gif');

$('#arrow_right img').attr('src','images/arrow_right_over.gif');

if(count>3){ count=1; $('#innerscroll').animate({left: 0}, 500); $('#arrow_right img').attr('src','images/arrow_right.gif');}

else {

$('#innerscroll').animate({"left": "+=150px",'opacity': "0.5"}, 500).animate({"easing": "easeout",'opacity': "1.0"}, 500);

count++;

}

});

$('#arrow_right').click(function (event){

$('#arrow_right img').attr('src','images/arrow_right.gif');

$('#arrow_left img').attr('src','images/arrow_left_over.gif');

if(x<count){count=1; $('#innerscroll').animate({left: 0}, 500); $('#arrow_left img').attr('src','images/arrow_left.gif'); }

else {

$('#innerscroll').animate({"left": "-=150px",'opacity': "0.5"}, 500).animate({"easing": "easeout",'opacity': "1.0"}, 500);

count++;

}

});

$("#innerscroll img").click(function(){

var path = $(this).attr('src');

var caption = $(this).attr('title');

$('#image_viewer>img').attr('src', path).animate({"easing": "linear",'opacity': "0.5"}, 500).animate({"easing": "linear",'opacity': "1.0"}, 500).show();

$('#image_viewer>span').html("").slideUp('fast');

$('#image_viewer>span').html(caption).slideDown('slow');

});

});

Finally css :

TIP: Make sure your "#image_viewer" and "#image_viewer img" width are same , to get full image view.

.scrollable{

position:relative;width:610px; height:150px; overflow:hidden; margin:5px;

}

.image{width:150px; height:100px; float:left; display:block; cursor:pointer; margin:2px;

}

.container{ margin:5px; padding:5px; width:690px; background:#fff;

}

.container_theater{ margin:5px; padding:5px; width:690px; background:#000000;

}

#image_viewer{

border:#000000 solid 5px; width:685px; height:300px;

}

#image_viewer img{

width:685px; height:300px;

}

.img_title{

border:#999999 solid 1px; width:100%; height:25px; text-align:center; margin-top:-25px; float:right; opacity: .8; z-index:15; background:#CCCCCC;font-family:Verdana; font-style:oblique; font-weight:800; display:none;

}

#arrow_left{position:absolute;float:left;z-index:10;background-color: #FFF;padding:0px;margin-top:2px;cursor:pointer;

}

#arrow_right{

position:absolute;float:left;right:0px;z-index:10;background-color: #FFF;padding:0px;margin-top:2px;cursor:pointer;

}

#innerscroll{position:absolute;height:100px;left:40px;width:10000px;

}

#galleryContainer{height:102px; /* Height of the images + 2 */

border:1px solid #CCCCCC;

position:relative;overflow:hidden;padding:0px;width:690px;height: 104px;/* IE 5.x - Added 2 pixels for border left and right */

height/* */:/**/102px; /* Other browsers */

height: /**/102px;

}

</style>

Here is how it looks:

Thats all guys, feedbacks are welcome!

help this blog to grow in anyway you can! :)

how to create a jquery plugin

noreply@blogger.com (Unknown) — Sat, 12 Oct 2013 15:10:00 +0530

As promised , here is how you create a plugin in jQuery. No sweat and blood, relax and follow.. :)

Let us create a simple "circle plugin".

create a div in you index page, this is our div element which animates later as a circle!.

<div id="circular" class="_default_circle"> plugin</div>

The important one's, the CSS:

._default_circle{
width:50px;

height:50px;

background:#00FFFF;

border:#0000FF solid 1px; text-align:center;

}

._custom_circle{

width:50px;

height:50px;

background:#00FFFF;

border:#0000FF solid 5px;

text-align:center; top:50%;

-webkit-border-radius: 999px;

-moz-border-radius: 999px;

border-radius: 999px;

behavior: url(PIE.htc);

}

The ._default_circle is used for the div on initial load, the ._custom_circle is used when you actually access the div through your plugin.

Jquery plugin structure explained!

We can initiate the actual function of plugin using the jQuery built-in structure

(function($){....... })(jQuery);

Next, make sure that your plugin name is as simple as possible, because , the main advantage of using plugin is to get work done fast, so don't let your plugin users think for hours to get the function name right.

Ok , having said that , you can create your plugin function within extended JQ function like this, well i am going to call it as circle itself!, so our first plugin function is circle , so you can call your plugin as $('#divname').circle(); That's it!.. pretty cool ha?

Now, for the creation of function

inside the extended function write something like this

$.fn.circle = function() {

this.animate({width : 100, height: 100} ,1000);

this.addClass("_custom_circle");

}

Remember, "this" is already an object, so , its not necessary for you to call $(this) within the function.

ok , here is what we are doing.. we are increasing the width and height of the circle along with different css appended to it , also, with an animation delay of 1000sec.

Alright, here is the overall jQuery plugin code:

$(document).ready(function()

//initialize the Jquery plugin

$("#circular").circle();

});

(function($){

$.fn.circle = function() {

this.animate({width : 100, height: 100} ,1000);

this.addClass("_custom_circle");

};

})(jQuery);

save this script as circle.jquery.js and include in your index page.

That's it!!! comments are welcome!! :)

how it looks:

Please subscribe for more cool codes :)

how to create a jquery plugin with options

noreply@blogger.com (Unknown) — Sat, 12 Oct 2013 15:10:00 +0530

Hi,

In Part 1 of my previous post, i had described on how to build jQuery plugin. In this post, i would extend on; and teach you, on how to build the same circle plugin with customizable parameters.

create a div in you index page, this is our div element which animates later as a circle!.

<div id="circular" class="_default_circle"> plugin</div>

The important one's, the CSS:

._default_circle{
    width:50px;
    height:50px;
    background:#00FFFF;
    border:#0000FF solid 1px; text-align:center;

}

._custom_circle{
width:50px;
    height:50px;
    background:#00FFFF;
    border:#0000FF solid 5px;
    text-align:center; top:50%;
    -webkit-border-radius: 999px;
    -moz-border-radius: 999px;
    border-radius: 999px;
    behavior: url(PIE.htc);

}

The ._default_circle is used for the div on initial load, the ._custom_circle is used when you actually access the div through your plugin.

jQuery plugin with options structure explained!

We can initiate the actual function of plugin using the jQuery built-in structure

(function($){....... })(jQuery);

We will use the jQuery "extend" function to have options for the plugin.

Ok, first we need to decide on how to give options to the plugin, because if you provide more options to the user , more likely is he going to like your plugin. Also, remember that complexity kills the performance, so have a balanced plugin. In this tut, i have three options included ; animation speed, height and width of circle.

We will initialize the extend function like this

$.fn.extend({........ });

same way as you would initialize document ready...but, with different syntax.

call the circle function within the extend function

circle: function() {... } , if you are passing default values then use circle: function(options) {... }

within circle function let us set our default functions like this

var defaults = {

anim_speed : 100,

width: 100,

height : 100,

};

set the default values if the user does not set any in his function call.

var choice = $.extend(defaults, options);

The $.extend api will merge the contents of two or more objects together into the first object , more info here

so for every option we will overwrite the default values in the plugin like this

return this.each(function() {
                        var curr = $(this);
                     curr.animate({width : choice.width, height: choice.height} ,choice.anim_speed);
                    curr.addClass("_custom_circle");
                                        });

For every option we will animate with default values or with the values user has set.

A user will call your plugin like this $("#circular").circle();

In this case , the default variable that you had set earlier will be used in the function.

Since you have given the options, user can call their plugin with options like this:

$("#circular").circle(

{

anim_speed : 1000,

width : 200,

height: 200

}

);

Wow congratulation! you did it..

Here is overall code :

$(document).ready(function(){

$("#circular").circle(

{ anim_speed : 1000, width : 200, height: 200 }
);
});

(function($){

$.fn.extend({

circle: function(options) {

var defaults = {

anim_speed : 100,

width: 100,

height : 100,

};

var choice = $.extend(defaults, options);

return this.each(function() {

var curr = $(this);

curr.animate({width : choice.width, height: choice.height} ,choice.anim_speed);

curr.addClass("_custom_circle");

});

}

});

})(jQuery);

Please subscribe for more cool codes :)

Thank you! any help for the blog is appreciated! :)

PHP script to read outlook email inbox

noreply@blogger.com (Unknown) — Sat, 12 Oct 2013 14:30:00 +0530

Here is a simple php code to read outlook emails. This code also contains php script to read a outlook inbox mail received from a particular email address.

Please note that the following is achieved through PHP's IMAP PROTOCOL.
Also, this is not a very secured method of doing it. The idea here is to reveal the concept.

<?php

error_reporting(E_ALL ^ (E_NOTICE | E_WARNING));

$incoming_mail_server = 'imap.gmail.com'; //This is an example incoming mail server for gmail which you can configure to your outlook, check out the manual on Supported IMAP client list

$your_email = 'me@outlookmail.com'; // your outlook email ID

$yourpassword = 'xyz' // your outlook email password

$mbox = imap_open("{$incoming_mail_server}", $your_email , $yourpassword ) or die("can't connect: " . imap_last_error());

$num = imap_num_msg($mbox); // read total messages in email

$MC = imap_check($mbox);

$msg=array();

// Fetch an overview for all messages in INBOX

$result = imap_fetch_overview($mbox,"$num:{$MC->Nmsgs}",0);

foreach ($result as $overview) {

echo 'Message no'.$overview->msgno. '<br/>';

"{$overview->subject}<br/>";

$check = imap_mailboxmsginfo($mbox);

echo $check->Unread;

echo $overview->subject;

echo $overview->body;

//code to check and display email received from a particular Email address

if(preg_match("/xxx@gmail.com/",$overview->from,$match)){

$msg[$overview->msgno]=$overview->subject;

imap_delete($mbox,$overview->msgno);

}
else{

imap_delete($mbox,$overview->msgno);

}
}
imap_close($mbox);

Subscribe for more cool codes , see the other links below for more codes!

Simple script in PHP to drag and drop jQuery UI and store result in MySQL

noreply@blogger.com (Unknown) — Sat, 12 Oct 2013 13:37:00 +0530

Simple script to drag and drop jQuery UI and store result in MySQL using PHP.

Hello their !

I was thinking, how much would drag and drop UI of jQuery help the people in pure designing aspect?, well... found out - not much!, until you use it with powerful scripting language, whats better then PHP ?.
Secondly, i thought if you can use PHP why not database to store it?. Behold!! here is the simple script to drag and drop the UI and store result in MySQL along with the help of PHP.

Include jquery library
Include jquery UI widget library, especially interactions.

Before i start , i would recommend you to learn this basic Drag & drop tutorial

Basic CSS to style our drag and drop UI

.content_box{ padding:5px;
width:300px;
float:left;height:250px;
border:#00FFFF solid 1px;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin:10px;
overflow:auto;
color:#999999;
font-size:14px;
}

.content_holder_box{ width:300px;
float:right;
height: 250px;
border:#0099FF solid 1px;
padding:10px;
margin:10px;
color:#999999;
font-size:14px;
}

.content_holder_box:hover{ border:#0099FF solid 1px; }

.dragelement{ padding:5px; margin:3px; width:270px;
border:#99FF66 solid 1px;
background-color:#E2FFC6;
cursor:move;
color:#000;
font-size:13px;
}

.dropper{ width:270px;
height:125px;
margin:10px;

}

.dropper_hover{ border:#999999 dashed 1px; background:url(../images/darrow.jpg) center no-repeat ;}

//you can show arrow image to suggest where user has to drop selected UI.

Create index.php and write a simple drag environment , i have created a static one, you can create a dynamic drag environment, for example shopping cart elements from database.

<div class="content_box" id="content_box_drag" onMouseOver="drag();"> Drag label
<?php

for($i=0; $i<5;$i++)
{
echo "<p class='dragelement' id='dragelement_$i'>Ferrari_$i</p>";
}
?>
</div>

id "content_box_drag" is a static draggable environment.
initialize drag() function on mouse hover , to prepare the drag UI.
create few drag elements from php (static).
create a drop box "content_box_drop" , so that users can drop the dragged element into it for selection.
create a <p> tag so that we can append the drag element to it. (you can use any!)
use a div to show the result , here "search_result".

javascript to create a drag function and produce the result

//initialize the drag and drop functions.
function drag(){

        $( "#content_box_drag p" ).draggable({
            appendTo: "body",
            helper: "clone",
            revert: "invalid"

            //add comma to previous last line & uncomment this if u want to remove the dropped item
            /*stop: function(){$(this).remove();}*/

        });

        $( "#content_box_drop p" ).droppable({
            activeClass: "dropper_hover",
            hoverClass: "dropper_hover",
            accept: ":not(.ui-sortable-helper)",
            drop: function( event, ui ) {

var ele = ui.draggable.text();

$.ajax({

url: "store.php",

type : "POST",

data: {element:ele},

                                  beforeSend:function(){
              $('#search_result').html("<center><br/><h4>Loading.....</h4></center>");
      },
          success:function(data){
                                               $("#search_result").html(data);

}

                                 });
            }
        });

}

Now create a page store.php and write the following to store the value

$con = mysql_connect("localhost","asc","abc123");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db( 'shop' );

$element = $_POST['element'];

$query = mysql_query("insert into cart values ('',$element)");
echo "$element is added";

mysql_close($con);

Please note that the idea of this tutorial is to show you how to create things in a simple and understandable way. It does not focus on security and authenticity etc..

Check out the other cool code links :)

Hope it was helpful , as it was for me.Subscription and Comments are appreciated!!

Demo look::

jQuery php mysql - drag and drop demo

simple tooltip in Jquery

noreply@blogger.com (Unknown) — Sat, 12 Oct 2013 12:39:00 +0530

Hi,

In this post, i have attempted to create my own jquery code to show the tooltip on mouseover event.
The coding goes like this:

CREATE A DIV ELEMENT:

create a div element and name the ID as "toolt"(not necessarily same name)and initially hide the division by giving style="display:none;" option

CSS FOR THE ELEMENT:

.tooltip{

border:1px dashed #0000FF;

padding-left:10px;

padding:5px;

width:100px;

background-color:#CCFFFF;

position:absolute;

opacity:0.9;

font-family:Geneva;

font-weight:bold;

-moz-box-shadow: 0 0 13px #888;

-webkit-box-shadow: 0 0 13px #888;

box-shadow: 0 0 13px #888;

-moz-border-radius:3px;

}

Note that i have called the css through .tooltip class in the division which is supposed to be used for tooltip on hover.
Also, note that i have cracked the mozilla firefox to create round edge effect .Also, i would give a different design in IE.

JQUERY TO SHOW TOOLTIP:

function show(id,txt){

$(id).mouseover(function(e){

var offsetsLeft = $(window).scrollLeft();

var offsetsTop = $(window).scrollTop();

leftpos = parseInt(offsetsLeft + (e.pageX)) + 'px';

toppos = parseFloat(offsetsTop + (e.pageY)) + 'px';

$('#toolt').css({'top':toppos,'left':leftpos});

document.getElementById("toolt").innerHTML=txt;

$('#toolt').show();

});

$(id).mouseout(function(e){

$('#toolt').hide();

e.stopPropagation();

});

}

First , we need to pass the parameter to the function "show()"(see below to see how it is initialized), the first parameter should be DOM object type like a,p,span,div etc; the second parameter should be the content that will be displayed in the tooltip.
Next we shall calculate the mousepointer coordinates and call the tooltip division on that particular division.The first part of the function will do that trick.
Later, when mouse is taken off we will hide that division again.

INITIALIZING THE TOOLTIP:

<a href="javascript:void(0);" onmouseover="show('p','This is a tooltip content')">Hover Here</a>

If you need to call a tooltip for the 'p' tag, then you can use the above method to initialize the tooltip. Dont forget to pass the DOM object in the first parameter and remember your DOM object will be your first parameter.

Thats it guys, feedback's are welcome! :)

Programming in PHP JQuery

noreply@blogger.com (Unknown) — Tue, 19 Mar 2013 14:59:00 +0530

Hi,

If you are looking something to do like Facebook popup or message box using jQuery and PHP, you have come to the right place.
I have tried my own script to do so and you can check that out here.....
Facebook like popup script.

Announcement to subscribers

noreply@blogger.com (Unknown) — Sat, 22 Sep 2012 16:51:00 +0530

Hi friends,

Thank you for your support and subscription.

I had to change the feed URL for some reasons, Therefore , please subscribe again and do continue your support.

I apologize again for the inconvenience.

have a great coding season!. bye :)