Archive for the ‘JavaScript’ Category.
October 19, 2009, 5:45 PM
This is a useful trick.
Change the CSS of the site without loading the entire site. It’s something really easy to do.
Here you can find this small example to do it:
Imagine that you have 2 css (can be only 1), 1 with all the styles and another with the colors:
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="blue.css" />
Then we do more CSS with different colors:
<link rel="stylesheet" type="text/css" href="green.css" />
<link rel="stylesheet" type="text/css" href="blue.css" />
<link rel="stylesheet" type="text/css" href="purple.css" />
<link rel="stylesheet" type="text/css" href="orange.css" />
Well, then first we need to put an ID to the style we want to change:
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="blue.css" id="css_color" />
Continue reading ‘Change the CSS of your site with JavaScript’ »
October 2, 2009, 6:49 PM
I needed a Clock that is updating automatically and takes the time from the server (same as the office), also they want to display the time in other countries to have a reference.
For this I developed a “simple” (how much I like this word) script to update times.
Screenshot:
Demo
Download
Installation:
Download, unzip and serve your self!
UPDATE: Faster way, just copy paste this in your site:
<script type='text/javascript' src='http://lab.neo22s.com/jsClock/jsClock.js'></script>
<link rel="stylesheet" href="http://lab.neo22s.com/jsClock/jsClock.css" type="text/css" />
<div id="rellotje" class="clock"></div>
<script type='text/javascript'>moveClock("rellotje");</script>Usage:
Continue reading ‘jsClock – JavaScript Clock with few options’ »
September 30, 2009, 10:50 AM
Since I opened the lab, few people asked to me how it works.
Today I’m going to answer that and also I will release the code that makes the lab possible.
The lab is a really simple script:
- Reads from a given path all the files and paths that are inside.
- The list is shorted by date of creation (in this way we have the newest script in the top).
- We only display the folders that have a readme.txt file inside.
- If inside the folder there’s a screenshot or a .zip or index.php or index.html we show this options.
Of course right now only works with HTML and PHP, but for me is enough.
For a new script to appear in the list must be have this requirements:
/folderExample/
readme.txt (mandatory, you can ad as many new fields as you wish)
screenshot.png (optional)
index.php or index.html (example for the running script, optional)
folderExample.zip (download for the script, optional)
Improvements that I have in mind:
Version: 0.1
Author: Chema Garrido
License: GPL v3
Demo in lab.neo22s.com
Download
September 28, 2009, 10:23 PM
Easy script to check extensions on JavaScript.
function checkExt(e) {//use in a form event or ina input
value=e.value;
if( !value.match(/\.(jpg)|(gif)|(png)|(bmp)|(pdf)$/) ){//here your extensions
alert("wrong extension"); //actions like focus, not validate...
}
else {//right extension
alert("nice!"); //actions
}
}Usage example onchange event:
<input id="Path" name="Path" type="file" />
Just one that says if is PDF or not:
function isPdf(e) {
if( e.value.match(/\.(pdf)$/) ){
alert("pdf"); //action
}
else alert("no pdf"); //actions
}Same as the other one.
I know they are really simple but I never need it to validate this in the client side since today. Kind of weird xD
September 26, 2009, 8:55 PM
Three useful functions for JavaScript.
They are not the best since you need to have X and Y as global variables, but it works.
var x,y;//GLOBAL
function returnInnerDimensions(){//returns screen size X,Y
if (self.innerHeight){ // all except Explorer
x = self.innerWidth;
y = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight){// Explorer 6 Strict Mode
x = document.documentElement.clientWidth;
y = document.documentElement.clientHeight;
}
else if (document.body){ // other Explorers
x = document.body.clientWidth;
y = document.body.clientHeight;
}
}
function returnScrollOffset(){//return how much we scrolled already
if (self.pageYOffset){ // all except Explorer
x = self.pageXOffset;
y = self.pageYOffset;
}
else if (document.documentElement && document.documentElement.scrollTop){// Explorer 6 Strict
x = document.documentElement.scrollLeft;
y = document.documentElement.scrollTop;
}
else if (document.body){ // all other Explorers
x = document.body.scrollLeft;
y = document.body.scrollTop;
}
}
function returnPageDimensions(){//returns the page size, max X and max Y
var sh = document.body.scrollHeight;
var oh= document.body.offsetHeight
if (sh > oh){ // all but Explorer Mac
x = document.body.scrollWidth;
y = document.body.scrollHeight;
}
else {// Explorer Mac;would also work in Explorer 6 Strict, Mozilla and Safari
x = document.body.offsetWidth;
y = document.body.offsetHeight;
}
}Works in ie5,ie6,ie7,ie8, Firefox, Chrome, Safari. That I could try ;)
