This is just a combination of my previous post on moving and fading elements without JQuery. I just combine the two functions so that I can move elements and at the same time fade them. Here are the links to my previous posts:
1. Simple Javascript Fade In/Out Function without JQuery
2. Simple Javascript Element Moving Function without JQuery
The combination of these two functions:
<html>
<script>
var moveSpeed = 100; // interval in ms, smaller means faster
var moveStep...
Wednesday, December 31, 2014
Tuesday, December 30, 2014
Javascript to Zoom According to a Maximum Browser's Width
There will be times when you need to perform some zooming on the browser so that you'll see what things will look like in other resolutions. For example, if you need to know how your website looks like on an iPhone screen, you might this Javascript function that I am going to show you. But make sure you know the target screen resolution before you try the following codes out:
<html>
<script>
var width,zoomPercentage;
function setWidth(pixel) {
if (!pixel) {
zoomPercentage...
Wednesday, December 24, 2014
Simple Javascript Element Moving Function without JQuery
This is similar with my previous post except this is for moving HTML elements instead of fading them.
Note: Again, this is not to replace the existing JQuery codes. This is just for those who are curious about how things are moved with only Javascript codes without JQuery.
Here are the codes:
<html>
<script>
var moveSpeed = 100; // interval in ms, smaller means faster
var moveStep = 10; // pixel count in every move, bigger means faster
function moveObj(elemID) {
this.id...
Thursday, December 18, 2014
Latest Facebook Share Method for HTML (Dec 2014)
The Facebook share method has gone through a lots of changes since my last post long ago. Here is the latest update. Please note that these codes may not be working by the time you use them as Facebook updates its coding requirements very often.
Anyway, here are the codes:
<html>
<head>
<meta name="description" content="Welcome to my website! My phone number is 1234567! Thank you!">
<meta...
Wednesday, December 10, 2014
Simple Javascript Fade In/Out Function without JQuery
If you want to know how to write your own animation function such as those in JQuery, here is one of them. Please note that this is not to replace your JQuery scripts, it is just for those who are curious about how it can be done without JQuery.
Note: I also have similar codes for movement/animation here. You can combine these two capabilities to make it fade while moving. Of course, that can be a bit challenging.
Here are the codes:
<html>
<script>
var fadeSpeed =...
Monday, November 17, 2014
Javascript Color Morphing
Here is a little fun thing to do in the lab: changing colors. If you have a little javascript project and you want to make it fun, this little color morphing script can come in handy. It opens up the door to understanding how the color components on your screen works. The combination of red, green and blue to make up a color you see on a screen can be shown in this little experiment. Here are the codes:
<html>
<head>
<script>
var runTimer;
var rCom, gCom, bCom;...
Tuesday, November 11, 2014
Auto Copyright Year Javascript
In order to avoid visitors to see outdated copyright information or having someone to help out updating the copyright year on every new year, a simple Javascript can do the job easily. Here is an example of how it is done in a simple web page with a dummy copyright text:
<html>
<body>
© copyright 2007-<span id=currentYear>2013</span>. All rights reserved.
<script>
var thisYear = new Date().getFullYear();
document.getElementById('currentYear').innerHTML...
Monday, November 10, 2014
Create Dynamic Google Map using Javascript
Why do we need to use Javascript to generate Google map dynamically? The answer is speed. If we tell our browser to load everything at the same time, everything will be loaded slower compared to letting browser to complete the important ones before the non-critical one such as the Google map.
I've done some testing and it shows that Google is slowing down the loading of other items on a web page. I compare the loading time of a web page with and without Google map. The one with concurrent...
Tuesday, October 28, 2014
onload Priority for Chrome, Safari, Firefox and Internet Explorer
I always wonder how the location of the placement of onload event listener will affect the behavior of my Javascript on various browsers. I use the following codes to check out this small doubt of me:
<html>
<head>
<script>
window.onload = function() {
alert("window.onload in the head");
}
</script>
</head>
<body onload="alert('body begins onload')">
<br><br><br><br><br><br>
<script>
alert("body...
Monday, October 13, 2014
Javascript to Simulate Shaking an Object
I know this is trivial but also fun at the same time. Just in case you need something fun for your school projects. You need to modify it to suit your need as the codes in the following is very minimal:
<html>
<script>
var x = 10;
var y = 10;
var myTimer;
function startshake() {
setTimeout(function() {moveElemX("shakeObject",x-(Math.floor(Math.random()*6)));},10);
setTimeout(function() {moveElemX("shakeObject",x+(Math.floor(Math.random()*7)));},25);
setTimeout(function()...
Monday, October 6, 2014
Fixed DIV for Browsers (Including IE and Tablets) using CSS
Without using Javascript, CSS is enough to do the job:
<!DOCTYPE HTML>
<html>
<style type="text/css">
#fixit { position: absolute; left: 10px; top: 10px; }
div > div#fixit { position: fixed; }
</style>
<body>
<div>
<div id="fixit" style="border:2px solid #333;background-color:#ddd;text-align:center;padding:10px;">
Hello
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
Try...
Sunday, August 31, 2014
Turn PHP Output Buffer Off to Make it Live on IIS
Questions will be raised on why we need such a trivial feature on our machines? The answer is simple, we want to turn our browser into a server console. When we deal with a extremely large database and we use PHP to process it, we really need the live update on the browser to see the progress as it may take a few hours to complete. Especially when it comes to debugging the PHP during the MySQL processing,...
Tuesday, August 19, 2014
Drawing Line Using Javascript (with Anti-alias Smoothening)
Caveat: It will not look good if the line is steep. Extra work is required to fix this script to render good steep lines.
This is my in-house recipe for anti-alias smoothening of line drawing using Javascript. It is not perfect and it is mainly for educational purposes. It might not be suitable for commercial web sites. If you don't want the anti-alias feature, you can try my plain line drawing...
Drawing Line Using Javascript
Updated on 27th of August: Please use the 2nd version of my drawLine() function (scroll to the bottom of this page) if possible. The first version has a lots of flaws which may not draw the line correctly in certain situation.
With HTML5 coming hot and jQuery to be well received by web developers, Javascript is now a frozen cake from the fridge. Especially when it comes to drawing shapes on browsers,...
Friday, August 15, 2014
Javascript to Prevent Selecting Texts on Tabled Buttons
It is now a common phenomenon that HTML tables are made buttons to replace conventional image-based buttons. The benefits of tabled buttons are quick loading, good button quality when zoomed on tablets and easy to change color. There is also no need to perform pre-loading.
This new popular method of displaying buttons can sometimes perform awkwardly if the text selection is not turned off on the...
Thursday, August 14, 2014
How to Quickly Identify Missing/Extra HTML Tag
When your HTML gets more and more complicated and packed, a slight mistake in the tagging will render you helpless. It could take a long time to find just a missing or extra tag. My way of solving this problem is to use Notepad++! It's free but it is only available on Windows.
It's easy. You just need to click on the tag and look for missing PURPLE! Once you click on any of the HTML tag, the corresponding...
Thursday, August 7, 2014
Javascript to Measure Vertical Scrollbar Width
I used the following codes to measure the vertical scrollbar (overflowY) width so that I can place a dummy blank DIV onto the real scrollbar to prevent someone from scrolling by dragging the scroller on the right scrollbar.
<script>
var dummyDiv = document.createElement("div"); // Create a dummy DIV
dummyDiv.style.overflow = "scroll"; // force it to have a scrollbar
dummyDiv.style.width = "50px"; // required for IE, can be other values
document.body.appendChild(dummyDiv);...
Monday, July 28, 2014
My Javascript Way to Check the Validity of an Email Address Input
Before sending an email address input from a submitted form to the server to verify, it is better to perform a simple check on the email address format for any possible typo. This will save some server bandwidth as Javascript is capable of catching some obvious email format errors.
The following Javascript codes/function are used:
<script>
function emailError() {
if (document.userForm.em.value.match(/(\w+\@\w+\.\w+)/) == null) {
return true;
}
return...
Sunday, July 27, 2014
Javascript to Disable Mouse Scroll for All Browsers including IE
I use these codes to temporarily disable the mouse scroll when I display a pop-up DIV. Although this is not quite necessary but it looks more professional to have mouse scroll locked when the pop-up appears. However the side scroll bar is still working with these following codes. You can still use the mouse to drag the page upward or downward.
The following javascript codes/functions are used: (to lock mouse scroll only that uses the center wheel of a mouse)
<script>
var...
Saturday, July 26, 2014
Javascript Way to Check Loaded Image
I use this to display images only after they are loaded into the browser's memory. I need Javascript codes to tell me if the image is ready to be displayed or processed. For example, there is a huge image that I need to display but the size is too big. I display a loading icon before I reveal the image so that it looks more like a contemporary (jQuery equipped) web page. I use the following Javascript codes.
<script>
var loaded_img = new Array();
var image_list = new Array("1.jpg","2.jpg","3.jpg","4.jpg","5.jpg");...
Wednesday, July 23, 2014
IE4-7 Jagged Text Problem After Applying Filter and the Solution
IE4 until IE7 is notorious to have this anti-alias being turned off after applying a filter to a text (with the position property is set to absolute) such as the opacity filter used for fade in and fade out. For example, the following HTML codes will show the jagged text (without anti-alias) after even applying an empty filter in IE7:
<span id="test" style="position:absolute;top:10px;left:10px;">Remove...
Friday, February 7, 2014
Detecting Browser's Touch Capability Using Javascript
Since the beginning of 2014, Google Chrome returns TRUE on document.createEvent("TouchEvent") javascript call even the browser doesn't support any touch action. The following shows the function I've been using to sniff the touch capability and it is no longer working on the latest Google Chrome:
<script>
function is_touch_device() {
try {
document.createEvent("TouchEvent");
return true;
}
catch (e) {
return false;...
Wednesday, February 5, 2014
Guessing the Performance of Your Browser and Device Using Javascript
After coming out with the Javascript to guess the CPU speed previously, I discovered that the for-next looping codes are not enough to guess the performance of a device/browser.
I realized the looping is only good to guess the performance of the browser, it is not enough to guess the speed of the animation which is crucial in today's web presence.
I then came out with two sets of codes to assess the performance of the animation capability of a device of the browser. One is to test the...
Wednesday, January 22, 2014
Screen Width and Height for iPhone, iPad, Android Tablets and Smartphones Using Javascript
When it comes to screen width and height, it is a bit tricky for tablet devices as the width and height vary according to the orientation of the tablet.
Therefore it is crucial to detect the screen dimension for websites that are sensitive to the width and height of the screen such as the sticky notes on the web page. The sticky note usually has to be accurate on the location on the web page or...
Monday, January 20, 2014
Strange Tablet (Touch Device) Problem with Javascript's MarginLeft/MarginRight DOM property
This is really hard to explain. If you do your coding in Javascript to move a DIV/SPAN manipulating the value in marginLeft/marginRight DOM property, you will run into a problem that your touch devices, ie., iPad, Android tablet/smartphones won't work with this trick if you have a align=center property somewhere before the DIV/SPAN.
Foe example:
.
.
.
<table><tr><td align=center><div id=moveDiv>...</div></td></tr></table>
<script>
document.getElementById('moveDiv').style.marginLeft...
Preload Images using Javascript
There are times that you need to preload images on your web page to avoid the long load time required for a dynamic HTML site.
I've tried many examples found on the web but none of them are really working on today's browsers.
Here's my way of making this happen:
<script>
var image_loc = new Array('/image/pic1.jpg','/image/pic5.jpg','/image/pic13.jpg','/image/pic9.jpg');
var elem;
for (i = 0; i < image_loc.length; i++) {
elem = document.createElement("span");
elem.id...
Subscribe to:
Posts (Atom)