Category: "JavaScript"
Wicked Good Gallery - Lightweight LAMP, Easy to Administer
Jun 13th
The Wicked Good Gallery grew from an idea mentioned at http://w3schools.com/forum and discussions with the people at http://lilyclaireart.com.
The challenge was to build a gallery application that would allow site visitors to view and purchase artwork and be very easy to administer.
The gallery offers two viewing modes, navigation through the thumbnails at the top of the page, and a slide show. The thumbnails are limited by the width of the page, so not all thumbnails may be displayed. Arrows are used to indicate additional images earlier or later in the list. Clicking on a thumbnail displays a larger image, along with the associated HTML. The slide show hides the HTML and centers the image, then loops through the images to display all the images of the gallery. It’s as if the site visitor is walking through the gallery, looking at artwork.
Administration is through SFTP/FTP/SCP. The person running the site creates a directory, named for the image, and places the original image .jpg in it, as well as free form HTML. When the site loads the next time, it will find the new directory, check for a thumbnail and detail image, and create them if necessary. When site visitors click on the thumbnail, the HTML will be displayed with the image.
With respect to SEO, each image is represented with a dedicated URL. The artwork’s name is used as the title, and the more text in the HTML for that image, the better.
All requests into the application are routed through a single file. If the requests map to an image, the appropriate artwork is displayed, otherwise, the home page, or contact page is shown.
Psuedo 'Slide Show' - Displaying and Hiding divs
Apr 13th
This is a nice example of the setInterval function of javascript.
Key features:
- Divs can be added without modifying the code
- Div naming scheme (div#) reduces collisions with other page content
- setInterval drives the process
- Tested with IE7 and FF3.5
- Doesn’t require Flash or other complex content
- Presentation interface can be managed with CSS
<html>
<head>
</head>
<body>
<!-- Name all the divs with div and a number, they must be sequential and they must start with 1 -->
<!-- You can add more divs as needed, first div is displayed, all others are display:none -->
<div id="div1" style="display:block">One</div>
<div id="div2" style="display:none">Two</div>
<script type="text/javascript">
var loop_pause=2000;
var int=self.setInterval("rotate()",loop_pause);
/* d indicates the current div */
var d=1;
/* newDiv is the one to be shown, firstDiv is the first in the list, and lastDiv is the last one that was shown */
var newDiv,firstDiv=document.getElementById('div1');
var lastDiv=firstDiv;
function rotate()
{
/* The first div is shown on page load, so advance d */
d++;
/* Try to get the next div */
newDiv=document.getElementById('div'+d);
/* If there is no div d */
if (newDiv == null)
{
/* Cycle back to div1, firstDiv */
newDiv=firstDiv;
/* Reset d */
d=1;
}
/* Hide the previous div */
lastDiv.style.display='none';
/* Display the new or next div */
newDiv.style.display='block';
lastDiv=newDiv;
}
</script>
</body>
</html>Debugging AJAX
Feb 11th
- Use the transport mechanism to send debug information. For example, if you’re sending back an array of data, add a new element (or several), and put in the SQL query so you can see exactly what’s being executed.
- Store the returned data in global variables on the client side and use Firebug to examine them. console.debug and alert are helpful, too.
- Use var_dump and echo if you get frustrated. They’ll probably throw an error on the client side, but you’ll get to see what you want to.
- Use var_export($variable,true) if you want to do a var_dump to a string or to a file. file_put_contents(’/tmp/file’,$data,FILE_APPEND); is a great way to monitor script execution. Open a new SSH window and use tail -f /tmp/file to see it.
- Cut and paste output into Notepad so you can easily verify it. Often you need several chunks of text and data to truly understand what is happening and why.
- Develop complex pieces in a standalone environment. This is good for assembling arrays of data out of complex SQL queries. Simplifying the task so you can focus on the difficult parts will speed development.
- Watch out for extra commas in object assignments. IE will crash.
- If you have Visual Studio, use it. It can save you a tremendous amount of time when debugging under IE.
- Test for the presence of variables, objects, and attributes before using them. It isn’t really right, but you can use if (variable_exists) to see if the variable has been set up. A better solution is to initialize everything, or to use if (typeof variable != ‘undefined’).
- To remove something from a page, use style="display:none". It works, it’s simple, and it’s very low risk. If anyone is playing with your code, they’ll find it, but it shouldn’t be an issue unless it had security issues, or restricted content.
- Add a debug setting to your code that allows you to receive more information when errors occur. You can disable it for the production release.
Let Go of Logic and "It Should"
Nov 12th
Sometimes, code doesn’t do what it is supposed to, or what you expect. This is particularly common with open source code you didn’t write.
You can’t change the basic code architecture or data structures.
Key techniques to adapt and recover with javascript are instanceof and typeof. This allows you to test if an object or property has been created or assigned, and what type it is, then you can use it properly. Often, the best way to find out what types are being used is FireBug.
Take the time to look for examples in the code, so you don’t have to figure it all out from scratch. Usually, modifications to open source code involve code similar to that which is already in there, for example reassigning values.
IE, objects, and commas
Nov 12th
Using objects with javascript, under IE requires attention to commas.
If you have an AJAX application that won’t load, and the error message is difficult to match up with the code, or not descriptive, one of the best things to check is the objects for trailing commas.
The code below will run fine in FF, but will not load in IE, because of the trailing comma after the second object in the array.
object={"object":"value","array":[{"v":"one"},{"v":"two"},]};
Be sure to check any JSON data sent back from the server, as well as that which is assigned or dynamically generated in javascript.
Brute force debugging with alert statements may be helpful.