| You are viewing all posts tagged under 'Scripts' - Alternatively... |  |
| | | Showing and hiding table rows onClick can be a really useful feature for a webpage - it allows a small amount of data to be displayed on the page by default whilst the page can instantly be expanded by the user. This process can be repeated allowing each section of a webpage to be expanded with the user's discretion - see my About Page for an example of the system in action.
Sure, this can be a useful feature - but it's nice to jazz it up a bit with some image work. As you can see using the link above, one way is to have image rollovers on the clickable sections. This not only looks good, but alerts the user that the image has a function. So we need two sepearate JavaScript files to power this system - I'll link to them below.
So, firstly we need to link to these JavaScript files in the <head> of our HTML document:
<SCRIPT LANGUAGE=JavaScript SRC="JSFX_FadingRollovers.js"
TYPE="text/javascript"></SCRIPT>
<SCRIPT LANGUAGE=JavaScript SRC="showHide.js"
TYPE="text/javascript"></SCRIPT>
Secondly, we need to set up two CSS classes to style the document:
<style type="text/css">
.bodylinks {text-decoration: none; color:#333232;
font-family:Verdana; font-size:13px;}
.versiondata {padding: 15px;}
</style>
Now in order to get the clickable sections looking nice, design images to use making sure they have a 1px border around the top and sides of the image. Design a rollover image in the same way, and make your clickable table row dimensions the same as these images (in the example at the bottom, I've used image dimensions of 400x34).
Once the images are saved, you need to set up the rollover behaviour, again putting the code in the <head> of our HTML document - The first term in quotes is an ID for the rollover (in this case, img1 and img2) and the next term in the location and name of the rollover image:
<SCRIPT LANGUAGE="JavaScript">
FadeInStep=10; FadeOutStep=5;
JSFX.Rollover("img1", "1_over.jpg");
JSFX.Rollover("img2", "2_over.jpg");
</script>
We now need to make a background image for the data cells of the table - it only needs to be 1px high and the width of your table (in this case, 400px). Make sure it has a one pixel border at each side (matching your image border) and a light background colour making up the rest of the image. You also need to make a 1px square GIF matching your border colour - this is used to make the bottom border line of your clickable images. In this way, we can guarantee there is always a 1px border around everything, whether it's being shown or hidden. In my example, the background image is called 'version_data.jpg' and the border file is called 'dark_line.gif'.
Now we have everything ready to go, we just need to code the table itself, calling up both out JavaScript classes. Set up a table as normal, making its width match that of your images. The set up the first clickable table row referencing the show/hide script:
<tr id="trOne" onClick="FuncShowHideOne()">
Then set up your table cell, referencing your clickable image and the rollover ID set up earlier, finishing by closing your table row:
<td background="1.jpg" height="34">
<a href="#null" onMouseOver="JSFX.fadeIn('img1')"
onMouseOut="JSFX.fadeOut('img1')">
<img src="1.jpg" width="400" height="34"
name="img1" class="imgFader" border="0"/></a>
</td></tr>
Finally, you need to set up the row that can shown and hidden. In this example, the row will start off hidden, but to show it by default just remove the bit of style code:
<tr id="hideShowOne" style="display:none">
<td class="bodylinks"
background="version_data.jpg">
<img src="dark_line.gif" width="400" height="1"/>
<div class="versiondata">DATA</div></td></tr>
So, that should be it. I admit it looks a bit complicated on here, but once you've mastered the system, it's really simple to replicate and gives great results. I've attached a ZIP file below with all the necessary scripts, files etc so you should be able to edit mine directly if you so wish - just open the index.html file and away you go! And just to finish off, here's the working version that all the code above was for:
All files for ShowHide system (ZIP)
|
| | | | I was recently undertaking a project for a homepage that would draw in data from a Facebook status RSS feed and display each update as a story on the page. In theory, this job isn't too hard - but it involves using a GET request (in this case using LWP:Simple in Perl) and not all sites / feeds allow a computer access to the file (just a browser).
This seemed to be the case with the Facebook feed so I looked for a solution. I ended up getting it working using a Yahoo Pipe, that first took the feed in and then spat it out in a slightly changed format - this output worked fine using the GET request and the problem was solved.
The resulting stories working on the site.
The Yahoo Pipe was supposed to alter the feed to remove the username etc from each post but this didn't work so I did this manually - the pipe was still very useful though!
How to use your Facebook status RSS feed
Yahoo Pipe: Facebook RSS
|
| | | | A client recently came to me with a project to make a set of offline-only webpages that could be taken around the country on a memory stick, taking a service to people with no internet connection. This wouldn't have been too difficult except that they wanted a form-based service that would run offline without the need to install any software.
In other words, I had to create a form system that was processed without using a cgi-bin / perl scripts. The logical solution was using Javascript to handle the form data.
Below is a basic example of this system, passing one variable across two webpages. In this case, the data is preceeded by a '?' in the URL string. Start by putting the following code in the page you are passing the data to:
<FORM NAME="form">
<INPUT TYPE="hidden" NAME="pass" SIZE="35">
</FORM>
Then, simply add this javascript code where you want the variable printed into the docuement. In this case, I've put the data inside a result tag:
<SCRIPT LANGUAGE="javascript">
var locate = window.location
document.form.pass.value = locate
var text = document.form.pass.value
function delineate(str){
theleft = str.indexOf("?") + 1;
return(str.substring(theleft));
}
document.write("<result>"
+delineate(text) +"</result>");
</SCRIPT>
And there you have it. In this simple example, you pass the data after a '?'. Say your data is "56.887" and the page you are passing it to is called "results.html", then link it to "results.html?56.887" to send the data. Of course, this technique can be expanded considerably to send more than one form field, but thought it best to explain it simply! |
| | | | I think a draggable box to resize a map is a really useful feature and is common in GIS software. I've seen this functionality on a couple of online maps before, so thought I'd have a go at implementing it myself.
I've adapted some JavaScript code I found online and designed a couple of button to control the zoom. So this feature doesn't conflict with standard controls, you click the zoom button to enable drag zooming - and click the button again to get back to default control options:
I'll explain in more detail how it's done soon, but for now you'll just have to hazard a guess! :) |
| | | | Tagging images is a practice seen more and more across the internet as social networking sites have allowed vast networks of people to share media content. Tagging via social networking usually centres around ideentifying individuals, but other uses are cropping up all the time. On Flickr, for example, landscape features and photographic styles are often highlighted using tags and image maps, sometimes even adding narrative to the photo itself.
So you may be wondering, how hard is it for me to make my own tags / image maps? Well, the answer is: not very hard at all - it's just simple CSS. Below is an example showing a photo from the coast of Argyll, with 3 regions 'tagged'. I've added a bit more than CSS to this example by making 3 overlay images (in black and white with a label) that appear on a mouseover event. These images are simply included in the CSS as a hover event.
First up, here is a working example of tags and tag boxes - with mouseover events:
| | Now, I'm sure you'd like to know how it's done, so let's get cracking! I'll show the code for one box, rather than repeating it for all three, but the values to change are pretty obvious, just make sure you rename the CSS class (say from, #tag1 to #tag2) throughout the document. First up, define your image in your CSS - the image will be defined as a background for a div element. Remember to change the file name and dimensions when using this example yourself:
#image {
position: absolute;
width : 500px;
height: 333px;
background: url(filename.jpg) top left no-repeat;
}
Next up, you need to define the tag box itself, in this case adding a hover event as well:
#tag1 {
position: absolute;
width : 85px;
height: 180px;
left: 93px;
top: 131px;
border: 1px dotted #FFFCAB;
}
#tag1:hover {
width : 85px;
height: 180px;
left: 93px;
top: 131px;
border: 1px dotted #FFFFFF;
background: url(imagemap_1.jpg) top left no-repeat;
z-index: 100;
}
All the above code should be placed in a CSS declaration in the <head> of your document. The final step is to place some code in the <body> of your document that will display the image and tags:
<div style="display: none;"><img alt="" src=
"mouseover_imagename.jpg" /></div>
<div id="image"><a id="tag1" href="#" title="title">
</a></div>
And there we have it, you can now make your own tag boxes on top of an image - bellissimo! |
|
| | | | In order to highlight hyperlinks within blog posts and to distinguish them from other links on the blog (tags, topics, blog title etc), I've made inline links blink with an animated dotted line below them.
There are two parts to this method. You need to set up the CSS for the blinking links and distinguish these links from all other links on the page (especially important when using general a:link type CSS).
So, firstly you may well have set up a CSS class that covers the text where the links will be (in this case, all hyperlinks within a blog post message). In this example, we're calling the class 'blinks':
.blinks {font-family: Tahoma; color: #DDDDDD;
font-size: 12px;}
A complication will come if you are using general hyperlink style code within your CSS, such as this:
a:link {text-decoration:none; color:#B99D73}
a:visited {text-decoration:none; color:#abb7ba}
a:hover {text-decoration:underline; font-weight:bold;}
a:active {text-decoration:underline; font-weight:bold;}
In order to override the general hyperlink styles, you have to set up hyperlink styles specific to your class. This is also where you add the code to make the links blink. To do this, I'm using a tiny animated GIF and setting its location underneath the link text:
.blinks a:link {
font-family: Tahoma;
color: #DDDDDD;
background: url(Images/line.gif) repeat-x bottom left;
}
Feel free to use this image / code on your own website - it's good to share!
Download the flashing line image
All you need to make sure now is that the links you want to blink are within the class you have defined it in. This class may cover all the text of the message, or just the link itself, as in the following example:
<span class="blinks">
<a href="../blog/Images/line.gif">link text</a>
</span>
Enjoy! |
| | | | As shown in previous posts for this blog, code can be displayed in a seperate box (using a different font, such as a mono-spaced font) to allow users to easily recognise and understand it when published in HTML.
This is a very simple example showing a small piece of code and how this technique can work. As the technique uses code itself, the following examples will show how it can be done as well as the result - a 2 in 1 bonus!
First, set up the CSS for the "PRE" style class to be put into the HEAD section of the HTML page. This is the class you will use for the code box and defines all its style properties. As can be seen, this sets up a light orange box, with darker orange dotted border and a suitable size mono text:
<style type="text/css">
PRE.listing {
margin-left: 10px;
margin-right: 10px;
border: solid 2px #e69834;
border-style: dotted;
background-color: #EADFD0;
color: #663300;
width: 480px;
font: Verdana;
}
</style>
Now the CSS is set up, simple wrap any text in the BODY section of the HTML page with the PRE class, in this case we have called it 'listing':
<pre class=listing>
YOUR CODE HERE
</pre>
Then this text will be shown in a code box. Be careful using ASCII characters in HTML, these will have to be converted to their relevant formats, see this link for help: ASCII Characters in HTML |
| | | | As you may have noticed, Google have recently added a terrain map layer to their mapping applications. In order to add this layer to embedded mapping and also to have it as a layer option (like on maps.google.co.uk), a few changes need to be implemented.
To start with, you need to make sure your javascript link has the most recent version set. This is the same string that contains your google map key. Just before 'key=' you should see 'v=' - this needs to be set to 'v=2.x' to allow all new code in version 2 as it progresses, including the addition of a terrain layer:
<script src="http://maps.google.com/maps?
file=api&v=2.x&key=YOURKEYHERE"
type="text/javascript">
</script>
Next, when you set up your map, include the following lines of code. These set up the new terrain layer, the layer button and add the old 'hydrid' layer as an option of the 'satellite' button:
map.addMapType(G_PHYSICAL_MAP);
var hierarchy = new GHierarchicalMapTypeControl();
hierarchy.addRelationship(G_SATELLITE_MAP,
G_HYBRID_MAP,
null, true); map.addControl(hierarchy);\n";
map.setCenter(new GLatLng(LAT, LONG), ZOOMLEVEL,
G_PHYSICAL_MAP);
We've added the terrain layer on our UK Webcam Map - It loads as the default map layer...take a look and see what you think! |
| | | | Although PHP is gradually taking over where database-driven websites are concerned [link: PHP Overtaking Perl], there are still may reasons to use perl. It is faster for one thing and has simpler complex functions than php [link: PHP in contrast to Perl].
I'm not advocating either language, especially as what language one uses is often down to experience and tradition, more than anything else. What I will show here is how perl can be used to perform a function normally easier to perform in PHP: creating content in an HTML document from a database.
In this simple case, I am going to show how to set up a changing hyperlink that links from an HTML page. In PHP, the html would be created (as a .php file) and the link retrieved from the database as the page writes. HTML pages can contain database-driven Perl content using iframes, but this isn't the best method for a simple hyperlink.
The following code is currently in use on the Beats! Design webpages and can be seen at the bottom of every page. the image below shows the bottom-right of each page, where a little square containing musical notes can be seen. This is our 'hot link' - a particular website that has recently gained out attention...which we wanted to change easily (for all pages) using a simple database form:
The way we have used Perl to make this link database-driven is to link to a Perl file with a 0 second redirect. The Perl file calls up the database to get the latest 'hot link' and redirects instantly to this page. This way, no iframes are needed and the link can be changed once and instantly applied to all pages.
The perl file calls up the database and retrieves the link, then sets this to a variable ($url) and this is then replaced in the following script. This script sets up a very basic HTML page to redirect instantly to this link:
<html><head><title>Redirecting...</title>
<meta http-equiv="Content-Type" content="text
/html;charset=iso-8859-1">
<style type="text/css">
<!--
body {background-color: #000000;}
-->
</style></head>
<meta http-equiv="REFRESH" content="0;url=$url">
<body></body></html>
So that should explain how Perl can still be used for jobs more naturally done in PHP - and don't forget to click our 'hot link' from time to time to see an interesting website! |
| | | | One of the greatest omissions from the Google Maps API / Documentation is the ability to draw circles onto maps.
Despite talk of a GPolyCircle, so far nothing has appeared. So in the meantime, use the following script example to get a nice circle drawn onto your google map, simply by selecting the location of its center and it's diameter in kilometres. Styles can also be changed, to alter the width and colour of the line.
In the following map, a number of circle examples are shown, varying in colour (green, red, blue), purpose (simple circles and targets) and thickness:
This script is quite simple, but care needs to be taken to set it up correctly. All the code should go in the function load() section of the Google Maps JavaScript on you page (see this page's source for an idea).
function mapCircle(lat,lng,radius)
{
var points = [];
x = lat;
y = lng;
r = radius;
r2 = radius*(1.74);
for (var i = 0; i < 600; i++) {
x1 = x+r*Math.cos(2*Math.PI*i/599);
y1 = y+r2*Math.sin(2*Math.PI*i/599);
points.push(new GLatLng(x1,y1));
}
return points;
}
This should be followed immediately by the code to create the line of the circle. This code should be repeated for every circle you want to display:
var diameter = 6; //circle diameter in kms
var radius = diameter/220; //ignore
map.addOverlay(new GPolyline(
//mapCircle(lat, long, ignore,), colour, width, ignore;
mapCircle(55.9557,-3.1884,radius), "#666699",2.8,0.8));
That's pretty much it. However, to make sure the lines draw correctly in IE, be sure to replace your <html> tag with the following:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml">
|
| | | | If you create a basic HTML page, then you will find the automatic margins are places around the contents of the document body.
If you start a table or image from the first line of HTML code, there will be a small gap displayed between this image and the top of the page as margins are automatically added by most browsers.
However, if you look at the top of this webpage, you will see that the graphics start from the very first line of the page. This is evident where the strings holding up the trumpet meet the top of the page.
This applies to the left, right and bottom margins as well, although this is less obvious here. The code is really simple to get rid of margins in all main browsers - simply copy and paste this code into the <head> section of your document.
<style type="text/css">
v:* {behavior:url(#default#VML);}
html, body {width: 100%; height: 100%}
body {margin-top: 0px; margin-right: 0px;
margin-left: 0px; margin-bottom: 0px}
</style>
|
| | | | This is a little JavaScript tutorial exmplaining a simple technique to allow image rollovers with a fade effect. This works by creating two images, the main image (see 'IMAGE' in script) and a rollover image (see 'IMAGE_OVER in script). The script then fades between these images using a dark colour fader: You can download the image rollover script here.Either save this and link to it on your ftp server, or replace SOURCE with http://www.beatsdesign.co.uk/Scripts/JSFX_FadingRollovers.js The first code block below should go into the <head> section of your html document. In this instance, we are only applying this to one image, so this needs to be given a NAME (when using multiple images, just make different names for each). Then replace 'IMAGE_OVER' with your rollover image source:
<script language=JavaScript SRC="SOURCE" type="text/
javascript">
</script>
<script language="JavaScript">
FadeInStep=10;
FadeOutStep=5;
JSFX.Rollover("NAME", "IMAGE_OVER");
</script>
Then, create a table within the <body> section of your html document. The important concept here is that the main image ('IMAGE') must be the background of the table cell it is in - and therefore the cable cell has to be the same size of the image. The script below shows a table set up with one cell. For multiple images, repeat <tr> (new row) and <td> (new column) tags where necessary. Make sure the 'NAME' is the same as for the rollover image set up earlier:
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td background="Images/IMAGE">
<A HREF="TARGET" target="_bottom"
onMouseOver="JSFX.fadeIn('NAME')"
onMouseOut="JSFX.fadeOut('NAME')">
<img name="NAME" class="imgFader"
src="IMAGE" height="HEIGHT"
width="WIDTH" border="0">
</A>
</td>
</tr>
</table>
That's it! Please remember to replace all the references in the above code ('NAME', 'IMAGE', 'IMAGE_OVER', 'SOURCE') with the relevant data, as described above. |
| |
| |
All Images (N/A)
All Links (367)
All Videos (27)
List of All Posts (159)
All Posts (159)
Image Design (41)
Photography (41)
Web Design (22)
Scripting (21)
Google Maps (17)
Map Design (17)
BBC (17)
JavaScript (16)
Scripts (12)
|
