Programming Techniques & Tools: June 2021

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>