Programming Techniques & Tools

Friday, 4 June 2021

Change image source dynamically on hyperlink

Changing image source dynamically using JQuery. Here in this example I have created there hyperlink and stored all images in the same folder/directory.

<script>

$('.img1').on('click', function() {

$('#image').prop('src', "2.jpeg");

});

$('.img2').on('click', function() {

$('#image').prop('src', "1.jpg");

});

$('.img3').on('click', function() {

$('#image').prop('src', "3.jpg");

});

</script>

Complete Example -

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

</head>

<body>

<center>

<img id="image" src="" style="margin-left:25%;margin-right:25%" height=80 width=80>

<a class="img1" href="#" title="image1">Image 1</a>

<a class="img2" href="#" title="image2">Image 2</a>

<a class="img3" href="#" title="image1">Image 1</a>

<script>

$('.img1').on('click', function() {

$('#image').prop('src', "2.jpeg");

});

$('.img2').on('click', function() {

$('#image').prop('src', "1.jpg");

});

$('.img3').on('click', function() {

$('#image').prop('src', "3.jpg");

});

</script>

</center>

</body>

</html>

Finding last span of Div.

To find the last span of div and apply some changes in this using JQuery, we can use :last-child selector for this, like :-

$("div span:last-child" ).css({ color:"red" }); //apply css on last span of div

We can also use it for any element to find its last ,like if we want last paragraph in body then-

$("p:last-child").css("background-color", "yellow");

Above code will select last paragraph in body or in any element.

Complete example for div last span is :-

<!DOCTYPE html>

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<head>

<style>

span , p {

border: 2px solid green

}

</style>

</head>

<body>

<div style="border:1px solid; width:30%"><span>span 1</span><span>span2</span></div>

<span>second paragraph</span>

<p><span>third paragraph</span><a href="page1.html">go to page1</a></p>

<button id='action'>Click to Perform Action</button>

<script>

$('#action').click(function() {

$("div span:last-child" ).css({ color:"red" }); //apply css on last span of div

$('div span:last-child').text('last span text of div is changed');// change text of last span of div

});

</script>

</body>

</html>

Picture zoom in/zoom out effect on button click using JQuery.

Increasing the size of the picture is called zoom in and decreasing the size of the picture is called zoom out effect. It can be done using JQuery. The increasing size of picture on every click we can define and same on decreasing size.

So, see the JQuery code for zoom in and zoom out:-

<script>

$(document).ready(function(){

$("#zoomin").click(function(){

$("img").width($("img").width()+20);//increase width by 20 pixel

$("img").height($("img").height()+20);//increase height by 20 pixel

});

$("#zoomout").click(function(){

$("img").width($("img").width()-20);//decrease width by 20 pixel

$("img").height($("img").height()-20);//decrease height by 20 pixel

});

</script>

Complet example :-

<html>

<head>

<title>Zoom in zoom out effect</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>

<body>

<center>

<h3>Zoom in zoom out effect</h3>

<button id="zoomin">Zoom In</button>

<button id="zoomout">Zoom Out</button>

<br><br>

<div><img src="1.jpg" width="150px" height="150px"></div>

</center>

<script>

$(document).ready(function(){

$("#zoomin").click(function(){

$("img").width($("img").width()+20);//increase width by 20 pixel

$("img").height($("img").height()+20);//increase height by 20 pixel

});

$("#zoomout").click(function(){

$("img").width($("img").width()-20);//decrease width by 20 pixel

$("img").height($("img").height()-20);//decrease height by 20 pixel

});

</script>

</body>

</html>

Wrap all direct child element of body into div using JQuery.

To wrap all element of body in div using JQuery, anyone can use the following code :-

$('body').children().wrapAll("<div style='border: thick solid blue;'></div>"); //wrap all body childs into wrapper/div

If you want to wrap any other child element of ane parent element then we can also use above code. Suppose you want to wrap all child elements of <p> (paragraph) the you can use code like -

$('p').children().wrapAll("<div style='border: thick solid blue;'></div>");

Now see the complete example -

<!DOCTYPE html>

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>

<body>

<div style="border:1px solid; width:30%"><span>span 1</span><span>span2</span></div>

<span>second paragraph</span>

<p><span>third paragraph</span><a href="page1.html">go to page1</a></p>

<button id='action'>Click to Perform Action</button>

<script>

$('#action').click(function() {

$('body').children().wrapAll("<div style='border: thick solid blue;'></div>"); //wrap all body childs into wrapper/div

});

</script>

</body>

</html>

Sunday, 23 May 2021

Find span tag inside div tag and set any text.

The given snippet will find the all span tag inside the div tag and set new text.

<div id='div1' class="c1"> <span>First Div</span> </div>

<div id='div2' class="c2"> <span>Second Div</span> </div>

<button id='action'>Click to Perform Action</button>

JQuery code to find all span inside the div tag and set new text will be -

$('div').find('span').text('New text');

$('div').children('span').text('New text');

If we want to change only in a specific div the mention div id or class like this

$('#div1').find('span').text('New text');// using id

$('.c1').find('span').text('New text'); // using class

Complete example -

<!DOCTYPE html>

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>

<body>

<h3>

Click to change

</h3>

<div id='div1' class="c1"> <span>First Div span text</span> </div>

<div id='div2' class="c2"> <span>Second Div span text</span> </div>

<button id='action'>Click to Perform Action</button>

<script>

$('#action').click(function() {

$('div').find('span').text('New text'); // change all div

// $('#div1').find('span').text('New text'); //only change div1 using id

// $('.c2').find('span').text('New text');only change div2 using class

// or

// $('div').children('span').text('New text');

});

</script>

</body>

</html>

Adding(appending) span tag/element inside div tag/element and adding(wrapping) div tag/element outside the span tag/element dynamically using JQuery.

This blog will see how we can add (appending) span tag/element inside div tag/element and add (wrapping) div tag/element outside the span tag/element dynamically using JQuery.

Let see in detail-

1. Add (appending) span tag/element inside div tag/element. Using .append() function we can add something in any element/tag inside.

<div id="div" class="div" style="height:150px; width:150px; background-color:red;"></div></br>

<button id='action'>Add span inside div</button></br>

JQuery code will be -

$('#action').click(function() {

$('.div').append("<span style='border-color: coral;background-color:green;'>Span Added</span>");//insert inside

});

2. Add (wrapping) div tag/element outside the span tag/element. Adding something outside of any element is called wrapping. For that we use .wrap() function.

<span class="span" style="background-color:green;">Span text</span></br>

<button id='action1'>Add div outside the span</button>

JQuery code will be -

$('#action1').click(function() {

$( ".span" ).wrap( "<div id='new' style='border: thick solid blue;' class='new'>Div Added..</div>" );//inser outside

});

Note: JQuery script will be writen before body close(</body>) tag.

Now complete example -

<!DOCTYPE html>

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<style>

h3 {font-size: 30px;}

</style>

</head>

<body>

<center>

<h3>

Click to change

</h3>

<div id="div" class="div" style="height:150px; width:150px; background-color:red;"></div></br>

<button id='action'>Add span inside div</button></br>

<span class="span" style="background-color:green;">Span text</span></br>

<button id='action1'>Add div outside the span</button>

<script>

$('#action').click(function() {

$('.div').append("<span style='border-color: coral;background-color:green;'>Span Added</span>");//insert inside

});

$('#action1').click(function() {

$( ".span" ).wrap( "<div id='new' style='border: thick solid blue;' class='new'>Div Added..</div>" );//inser outside

});

</script>

</center>

</body>

</html>

Thursday, 20 May 2021

Checking textarea empty value using JQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>

$('#action').click(function() {

if (!$.trim($("#txtarea").val())) {

alert("please input something"); //to check textarea is empty or not

}

});

</script>

Above JQuery code will check that textarea is empty or not it will also check white space.

Complete example is given below-

<!DOCTYPE html>

<html>

<body>

<center>

<textarea cols="50" rows="8" id="txtarea" required></textarea>

<br>

<button id="action">Click to check</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>

$('#action').click(function() {

if (!$.trim($("#txtarea").val())) {

alert("please input something"); //to check textarea is empty or contains only white-space

}

});

</script>

</center>

</body>

</html>