Digital Indian Gov: Javascript

Showing posts with label Javascript. Show all posts

Create Bit.ly Short URLs Using Jquery and Ajax.

SoAs.in June 22, 2017 Javascript

How to create Bit.ly short URLs using Jquery and Ajax. Many tutorials available on web about short URLs using server side script, this script works on client side. It is easy just 5 lines of code calling Bit.ly API. You have to modify the username and API key. Use it and make URLs shorts and neat.

Javascript Code
You have to create an account on bit.ly and modify the username and API key.

<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()
{

//bit_url function
function bit_url(url) 
{ 
var url=url;
var username="username"; // bit.ly username
var key="bit.ly API key";
$.ajax({
url:"http://api.bit.ly/v3/shorten",
data:{longUrl:url,apiKey:key,login:username},
dataType:"jsonp",
success:function(v)
{
var bit_url=v.data.url;
$("#result").html('<a href="'+bit_url+'" target="_blank">'+bit_url+'</a>');
}
});
}


$("#short").click(function()
{
var url=$("#url").val();
var urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
var urltest=urlRegex.test(url);
if(urltest)
{
bit_url(url);
}
else
{
alert("Bad URL");
}
});

});
</script>

//HTML Code
<input type="text" name="url" id="url"/> 
<input type="submit" id="short" value="Submit"/> 
<div id="result"></div>

This javascript code $("#short").click(function(){}- short is the id name of the submit button. Using $("#url").val() calling input box value.

Magical feedback form with Jquery

SoAs.in June 22, 2017 Javascript

I had designed a magical feedback form using Jquery with easing animation effect. It's simple and intersting just hiding and showing the div tags with jquery. Use it and make some thing better your web project feedback box.

Javascript Code
Contains five animation move functions. Four click actions take a look at click(function()

<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
var feed_width = $('#feedback').width();
var scr_w = screen.width; // Screen Width
// 26 is width of the veritcal feedback button
var btn_width = 26;
var move_right = scr_w - btn_width;
var move_left = -(feed_width - btn_width);
var slide_from_left = 0;
var slide_from_right = scr_w - (feed_width - btn_width);
var center = ( scr_w / 2 ) - ( feed_width / 2 );

function positioningForm()
{
$('.left_btn').hide();
$('#feedback').css({"left": move_right+"px"}).show();
}
function slideFromRight()
{
$('#feedback').animate(
{left: slide_from_right+"px"},
{duration: 'slow',easing: 'easeOutElastic'});
$('.left_btn').hide();
}
function slideFromleft()
{
$('#feedback').animate(
{left: slide_from_left+"px"},
{duration: 'slow',easing: 'easeOutElastic'});
$('.right_btn').hide();
}
function moveLeft()
{
$('#feedback').animate(
{left: move_left+"px"},
{duration: 'slow',easing: 'easeOutElastic'});
$('.left_btn').show();
}
function moveRight()
{
$('#feedback').animate(
{left: move_right+"px"},
{duration: 'slow',easing: 'easeOutElastic'});
$('.right_btn').show();
}

// Positioning the feedback form at the time of page loading
positioningForm();

// Handling the right_btn and lift_btn event animations
$('.right_btn').click(function()
{
slideFromRight();
});

$('.left_btn').click(function()
{
slideFromleft();
});

// Moving left or right by clicking close button
$('.feed_close').click(function()
{
var pos = $('#feedback').position();
var ls = pos.left;
if(ls == slide_from_left)
{
// feedback form is at LEFT
moveRight();
}
else if(ls == center)
{
// feedback form is at RIGHT
moveRight();
}
else
{
// feedback form is at CENTER
moveLeft();
}
});
// Submit Form values

$('#submit_btn').click(function()
{
var name=$('#name').val();
var email=$('#email').val();
var msg=$('#msg').val();
if(name.length>0 && email.length>0 && msg.length>0)
{
$('.left_btn').hide();
$('.right_btn').hide();
$('.box').hide();
$('#feedback').animate(
{left: center+"px"},
{duration: 'slow',easing: 'easeOutElastic'});
$('.thankyou').show();
}
else
{
$('#error').html('Enter some thing');
}
return false();
});

});
</script>

HTML Code
Contains simple HTML code.

<div id="feedback"> 
<div class="right_btn"><img src="images/feed_right_btn.png" width="26px" height="99px"/></div> 

<div class="formdiv"> 

<div class='thankyou'> 
<h3>Thank you !</h3> 
<div class="feed_close"><img src="images/feed_close_btn.png" width="16px" height="15px"/></div> 
</div> 

<div class="box"> 
<table border="0"> <tr> 
<td><label>Name:</label><br/><input type="text" name="name" id="name"/> </td> 
<td valign="middle" align="right"><div class="feed_close"><img src="images/feed_close_btn.png" width="16px" height="15px"/></div></td> 
</tr> <tr> 
<td colspan="2"><label>Email:</label><br/><input type="text" name="email" id="email"/></td> 
</tr> <tr> 
<td colspan="2"><label>Message: </label><br/&gt;<textarea rows="5" cols="16" name="msg" id="msg"></textarea></td> 
</tr> <tr> 
<td colspan="2"><input id="submit_btn" type="submit" value="Submit"/><span id="error"></span></td> 
</tr> </table> 
</div> 
</div> 

<div class="form_submit"></div> 
<div class="left_btn"><img src="images/feed_left_btn.png" width="26px" height="99px"/></div> 
</div>

CSS

body{
width: 100%;
overflow: hidden; /* This is IMP */
padding: 0;
margin: 0 auto;
}
#feedback{
width: 362px;
padding: 10px;
position: absolute;
top: 100px;
display: none;
}
#feedback .formdiv{
width: 300px;
float: left;
background-color: #6f115c;
padding: 0px 5px 5px 5px;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 6px;
border-bottom-right-radius:6px;
border-bottom-left-radius:6px;
min-height:100px;
}
#feedback label{
font:bold 11px arial;
color: #febaf9;
}
#feedback textarea{
width: 290px;
height: 100px;
color: #fcd1f2;
font: normal 11px verdana;
border: none;
padding: 5px;
background-color: #943080;
-moz-box-shadow: inset 1px 1px 1px #4c0b3f;
-webkit-box-shadow: inset 1px 1px 1px #4c0b3f;
resize: none; /* disable extending textarea in chrome */
}
#feedback input[type="text"]{
color: #606060;
font: normal 11px verdana;
padding: 3px;
width: 200px;
height: 25px;
border: none;
color: #fcd1f2;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background-color: #943080;
-moz-box-shadow: inset 1px 1px 1px #4c0b3f;
-webkit-box-shadow: inset 1px 1px 1px #4c0b3f;
}
#feedback input[type="submit"]{
background-color: #ffaffa;
border: none;
color: #6f115c;
font:bold 11px arial;
padding: 2px 6px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
cursor: pointer;
}
#feedback .left_btn,
#feedback .right_btn{
width: 26px;
height: 100px;
float: left;
cursor: pointer;
}

#feedback .feed_close{
cursor: pointer;
margin:-15px -5px 0px 0px;
}
#error
{
color:#fff;
padding:4px;
font-size:11px;
}
.thankyou
{
text-align:center;
display:none;
}

Status Message Design with CSS

SoAs.in June 22, 2017 Javascript

I received lot of requests from my readers that asked to me how to design Twitter and Facebook like status message(image + text) with CSS. So that I had presented a very basic level CSS tutorial with Div and Ol tags, truly it's for CSS beginners. I hope you like this. Thanks!

HTML Code
Here stbody, stimg and sttext are class names of Body, Image and Text div tags respectively.

<div class="stbody">

<div class="stimg">
2 Image Part
</div> 

<div class="sttext">
3 Text Part
</div> 

</div>

CSS Code
word-wrap:break-work for text justification.

.stbody
{
min-height:70px;
margin-bottom:10px;
border-bottom:dashed 1px #cc0000;
}
.stimg
{
float:left;
height:50px;
width:50px;
border:solid 1px #dedede;
padding:5px;
}
.sttext
{
margin-left:70px;
min-height:50px;
word-wrap:break-word; // Text justification
overflow:hidden;
padding:5px;
display:block;
font-family:'Georgia', Times New Roman, Times, serif
}

HTML Code

<div class="stbody">

<div class="stimg">
<img src="sri.jpg" />
</div> 
<div class="sttext">
9lessons programming blog <a href="http://www.9lessons.info">http://9lessons.info</a> 
<div class="sttime">2 seconds ago</div> 
</div> 

</div>

Order List Tag

I suggest you do with order list tag it's very flexible for jquery animation effects.

<ol> 
// Loop Start
<li class="stbody">
<div class="stimg">
<img src="sri.jpg"/>
</div> 
<div class="sttext">
9lessons programming blog http://9lessons.info
<div class="sttime">2 seconds ago</div> 
</div> 
</li> 
//Loop End
</ol>

CSS Code

ol
{
list-style:none;
margin:0px;
padding:0px;
}
.stbody
{
min-height:70px;
margin-bottom:10px;
border-bottom:dashed 1px #cc0000;
}
.stimg
{
float:left;
height:50px;
width:50px;
border:solid 1px #dedede;
padding:5px;
}
.sttext
{
margin-left:70px;
min-height:50px;
word-wrap:break-word;
overflow:hidden;
padding:5px;
display:block;
font-family:'Georgia', Times New Roman, Times, serif
}

Digital Indian Gov

Labels

Layout

Post Style

Technology

Breaking News

Articles by "Javascript"

Create Bit.ly Short URLs Using Jquery and Ajax.

Magical feedback form with Jquery

Status Message Design with CSS

Digitalindiagov.com

Contact Form