Javascript can do a lot of things on your web page, and while PHP deals most of the server-side jobs, Javascript do the front-end client-side tasks. One of its capabilities is manipulating DOM elements. DOM, for those who don’t know what it means, stands for Document Object Model. According to W3C (World Wide Web Consortium), DOM is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document. In this case, the web page.
Now, this may not be much of a presentation, but this javascript I wrote should demonstrate how Javascript can easily manipulate DOM elements, in this case, enlarge objects on the web page when they are mouse clicked.
There are 3 elements I am going to demonstrate it on — Image (img), Text, and Division (div). I set a condition in the Javascript language that instructs our browser to enlarge any of these objects when they are clicked, and returns them to their normal size when clicked again.
Here’s the link to our demo file: https://drive.google.com/open?id=1Sgg6mIoOrkGAP9RQ68NdNPKFgK_ysujc
Talk Code
You guys may wonder why I would go back to the basics after writing advance codes. Well, that’s because I wanted to show that I can do front end Web Designing and developing stuff too. Actually, I’ve been working on a WordPress Theme and plugin lately, modifying its code via PHP, HTML, and CSS. While HTML and CSS may sound too easy, as most people would probably agree that it isn’t even programming, it’s actually hard AF. You have to deal with a lot of elements, classes, and methods. The thing about it… it’s good when you are the one who wrote it, but figuring out someone else’s code takes the patience of a saint.
HTML
<html>
<head>
<title>Enlarge objects when clicked</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
.thisdiv{
height: 100px;
width: 100px;
text-align: center;
display: table-cell;
vertical-align: middle;
border: 1px solid #000;
}
</style>
<script type="text/javascript" src="elements.js"></script>
</head>
<body>
<a onclick="enlarge()"><img id="image" src="architecture-art-colorful-161154.jpg" width="250" height="166" /></a>
<br><br>
<a onclick="text_enlarge()"><span id="thisfont" style="font-size:14px; font-family:Verdana">This is a sample text!</span></a>
<br><br>
<a onclick="div_enlarge()"><div id="thisdiv" class="thisdiv">This is a div</div></a>
<script type="text/javascript">
var width = getComputedStyle(thisdiv).width;
//var w = 100;
//var h = getComputedStyle(thisdiv).height;
var h = 100;
var w = width.slice(0,3);
function div_enlarge(){
var this_div = document.getElementById('thisdiv');
if(w == 100 && h == 100){
this_div.style.width = w * 2;
this_div.style.height = h * 2;
h = 200;
w = 200;
} else if(w == 200 && h == 200){
this_div.style.width = w / 2;
this_div.style.height = h / 2;
h = 100;
w = 100;
}
}
</script>
</body>
</html>
In the HTML file, let’s focus on the Javascript part (Line 25 – 44). Onlick property in the anchor tags, by the way, triggers an event on mouse click. This calls our Javascript functions.
In our code, line 25, the line that contains variable width is using getComputedStyle JS function to get the stylesheet of div (ref: line 23). This variable was meant to get the width value in the stylesheet so we added .width to specifically only get the width the div is using. Note that getComputedStyle is read-only, it can’t be use to change the value of the stylesheet. Also, it gets the px in the value as well.
In line 28, I set var h, which is for height, to 100. You guys may wonder, why not just use getComputedStyle.height to get the height value? Well, the reason for that is because it would only return 98px (in Chrome at least). I’m not sure where the missing 2 pixels went, but that’s definitely not the actual height that we have in the stylesheet. So, for this, we have to set the height manually in order to get the correct height.
Line 29 is doing a string slice function on our width variable. Our width has a px included in the value, and by assigning position 0, 3 in the parenthesis, we are sparing characters from 0-2 (3 digits), and start removing anything from position 3 (the px). For instance we have width = 100px, in that value, only the value 100 will remain. px will be erased.
Our function div_enlarge() (line 31-44) means that if our width is 100 and height is 100, then JS will multiply the width and height of our div with id thisdiv by 2. This apparently doubles the size of our div. After that, set var h and w to 200. If h and w is already 200, then JS will divide the width and height values by 2, which shrinks the div back to its default size. Afterwards, set var h and w back to 100. The function accomplishes the task of resizing our div box, making it bigger on click and return it to its normal size when clicked again.
Now, why didn’t this included in the Javascript file included in the header? The reason for that is because getComputedStyle JS function can only get the stylesheet values once the stylesheet values are loaded and applied to the div box. Otherwise, it would return an undefined value.
JS
// Object Enlarger
// Written by Altometa
// www.altometa.com
// Please support me!
function enlarge(){
if(document.getElementById('image').width == "250"){
document.getElementById('image').width = "500";
document.getElementById('image').height = "332";
} else {
document.getElementById('image').width = "250";
document.getElementById('image').height = "166";
}
}
function text_enlarge(){
if(document.getElementById('thisfont').style.fontSize == "14px"){
document.getElementById('thisfont').style.fontSize = "24px";
// document.getElementById('thisfont').style.fontFamily = "Verdana";
} else {
document.getElementById('thisfont').style.fontSize = "14px";
// document.getElementById('thisfont').style.fontFamily = "Verdana";
}
}
I’m not sure if I need to explain how the Javascript codes in this JS file works, but to give those who don’t yet have an idea what it does, it does the object enlargement functions. One for the image and the other for the text. In order to achieve that, our code here makes use of the getElementById function. Using getElementById, we can target the element of the image that has the id “image” and get or manipulate its width with the width property, and height with the height property. As for the font size of the text, we can manipulate that too using the style.fontSize property. This property can get an inline style for the font size from our target element as well as change its value.
Follow me at:
