Digital Indian Gov: Javascript

Showing posts with label Javascript. Show all posts

Collapsed Image with Jquery and CSS.

SoAs.in June 22, 2017 Javascript

ow to do collapsed image with Jquery and CSS. Orkut.comimplemented this concept while updating image scrap, the scrap shows image in collapsed style to reduce the webpage height. This is very simple script using mouseover, mouseout and css Jquery functions.

Javascript Code
Contains javascipt and HTML code. $(".imagebox").mouseover(function(){}).mouseout(function{})- imagebox is the class name of div tag. $(".showlink").click(function(){}) - .showlink is the class name of show anchor tag. $(".hidelink").click(function(){}) - .hidelink is the class name of hide anchor tag. Using Jquery CSS function chaning the max-height:100px

<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
// Image Area Mouseover and Mouseout
$(".imagebox").mouseover(function()
{
$(".showhide").show();
}).mouseout(function()
{ 
$(".showhide").hide();
});

//Show link
$(".showlink").click(function()
{
$(".imagebox").css('max-height','');
$(".showlink").hide();
$(".hidelink").show();
});

//Hide link 
$(".hidelink").click(function()
{
$(".imagebox").css('max-height','100px');
$(".hidelink").hide();
$(".showlink").show();
});

});
</script>
//HTML code
<div class="imagebox" style="max-height:100px;">
<img src="image.jpg"/>
<div class="showhide" >
<a href="#" class="showlink">show</a>
<a href="#" class="hidelink">hide</a>
</div>
</div>

CSS code

.imagebox
{
display:block;
position:relative;
overflow:hidden
}
.hidelink
{
display:none;
}
.showhide
{
padding:5px;
border-top:dashed 1px #333;
border-bottom:dashed 1px #333;
background:#F2f2f2 none repeat scroll 0 0;
bottom:0;
cursor:pointer;
display:block;
height:18px;
left:0;
line-height:18px;
padding-left:5px;
position:absolute;
width:100%;
}

Facebook Like Extracting URL Data with Jquery and Ajax

SoAs.in June 22, 2017 Javascript

Are you looking for facebook like live extracting URL or link data preview while typing the content. In this post I want to explain how to get the cross domain data with jquery and ajax. This is very interesting post.

Javascript and HTML Code
$('#content').keyup(function(){} - content is the ID of the textbox. Using $(this).val() getting the textbox value.

<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#contentbox").keyup(function()
{
var content=$(this).val();
var urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
// Filtering URL from the content using regular expressions
var url= content.match(urlRegex);

if(url.length>0)
{
$("#linkbox").slideDown('show');
$("#linkbox").html("<img src='link_loader.gif'>");
// Getting cross domain data 
$.get("urlget.php?url="+url,function(response)
{
// Loading <title></title>data
var title=(/<title>(.*?)<\/title>/m).exec(response)[1];
// Loading first .png image src='' data 
var logo=(/src='(.*?).png'/m).exec(response)[1];
$("#linkbox").html("<img src='"+logo+".png' class='img'/><div><b>"+title+"</b><br/>"+url)
});

}
return false;
});
});
//HTML Code
<textarea id="contentbox"></textarea>
<div id="linkbox"></div>
</script>

Why used urlget.php
Ajax origin policy we could not access the cross domain data with ajax request $.get("http://www.yahoo.com",function(response){ });. So that using local file(urlget.php) accessing the cross domain data.

urlget.php
Contains PHP code using file_get_contents function loading the URL data. Eg:urlget.php?url=http://yahoo.com

<?php
if($_GET['url'])
{
$url=$_GET['url'];
echo file_get_contents($url);
}
?>

CSS

body
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#contentbox
{
width:458px; height:50px;
border:solid 2px #dedede;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
margin-bottom:6px;
}
.img
{
float:left; width:150px; margin-right:10px;
text-align:center;
}
#linkbox
{
border:solid 2px #dedede; min-height:50px; padding:15px;
display:none;
}

Chatting with Jquery and Ajax.

SoAs.in June 22, 2017 Javascript

I received lot of email requests from my reader that asked to me how to develop a facebook lite chat application. In this post I'm just giving an idea about chat application with simple javascript.

Database

CREATE TABLE chat
(
id INT PRIMARY KEY AUTO_INCREMENT,
user VARCHAR(50) UNIQUE,
msg VARCHAR(200),
);

chat.php
Contains PHP, Javascript and HTML code. Run this file with chat.php?user=yourname

<?php
include('db.php');
if($_GET['user'])
{
$user=$_GET['user'];
?>
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var user='<?php echo $user;?>';
// Requesting to Database every 2 seconds
var auto_refresh = setInterval(function ()
{
var last_id=$("ol#update li:last").attr("id");
$.getJSON("chat_json.php?q="+user,function(data)
{
$.each(data.posts, function(i,data)
{
if(last_id != data.id)
{ 
var div_data="<li id='"+data.id+"'><b>"+data.user+"</b>: "+data.msg+"</li>";
$(div_data).appendTo("ol#update");
}
});
});
}, 2000); 

// Inserting records into chat table
$(document).ready(function()
{
$('.post').click(function()
{
var boxval = $("#content").val();
var user = '<?php echo $user;?>';
var dataString = 'user='+ user + '&msg=' + boxval;
if(boxval.length > 0)
{
$.ajax({
type: "POST",
url: "chatajax.php",
data: dataString,
cache: false,
success: function(html)
{
$("ol#update").append(html);
$('#content').val('');
$('#content').focus();
}
});
}
return false;
});
});
</script>
// HTML code
<div>
<form method="post" name="form" action="">
<input type='text' name="content" id="content" />
<input type="submit" value="Post" id="post" class="post"/>
</form>
</div>
<?php } ?>

chatajax.php
Contains PHP code. Inserting records into chat table.

<?php
include('db.php');
if($_POST)
{
$user=htmlentities($_POST['user']);
$msg=htmlentities($_POST['msg']);
$user=mysql_escape_String($user);
$msg=mysql_escape_String($msg);
mysql_query("insert into chat(user,msg)values('$user','$msg')");
$sql=mysql_query("select id from chat where user='$user' order by id desc limit 1");
$row=mysql_fetch_array($sql);
$id=$row['id'];
?>
<li id="<?php echo $id; ?&gt;">
<b><?php echo $user; ?>:</b><?php echo $msg;?>
</li>
<?php
}
?>

chat_json.php
Contains PHP code getting latest record from the chat table and output result in JSON format.

<?php
include('db.php');
if($_GET['q'])
{
$user=$_GET['q'];
$sql = mysql_query("select * from chat order by id desc limit 1");
$row=mysql_fetch_array($sql);
$userx=$row['user'];
$id=$row['id'];
$msg=$row['msg'];
if($userx!=$user)
{
echo '{"posts": [';
echo '
{
"id":"'.$id.'",
"user":"'.$userx.'",
"msg":"'.$msg.'"
},'; 
echo ']}';
} } 
?>

db.php
PHP database configuration file

<?php
$mysql_hostname = "Host name";
$mysql_user = "UserName";
$mysql_password = "Password";
$mysql_database = "Database Name";
$bd = mysql_connect($mysql_hstname, $mysql_user, $mysql_password) or die("Could not connect database");
mysql_select_db($mysql_database, $bd) or die("Could not select database");
?>

Digital Indian Gov

Labels

Layout

Post Style

Technology

Breaking News

Articles by "Javascript"

Collapsed Image with Jquery and CSS.

Facebook Like Extracting URL Data with Jquery and Ajax

Chatting with Jquery and Ajax.

Digitalindiagov.com

Contact Form