It has been a long time coming, but I have at last spent some time sorting out my blog on the new web server. Work still needs to be done on it, and the styling will be taking shape over the coming weeks. However, I feel that it is best to get it out there in its 'default' and blank canvas state. Now that the wedding is out of the way, I can spend a little bit more time on this project and other projects. Feel free to send me a message.
Adobe have released a new product, known as Adobe Muse, that allows the creation of websites without needing to code. With Adobe Muse, users will be able to drag and drop elements, such as text boxes and buttons, onto a web page. There will also be support for third party integration tools, such as Google Maps.
To use this new software, Adobe will probably charge for use by a subscription basis. Adobe will launch this new product in early 2012, but it will be changing the name. For more information, please visit Adobe's website: http://muse.adobe.com/index.html
One feature that is likely to be on a website is an "accordion". An accordion is a styled list of data that can be minimised and maximised based on a mouse click, and these are often used in navigation menus where the menu items can be expanded. I have had to program these fairly recently.
This tutorial will describe how to achieve the accordion effect using Javascript and then show how it could be achieved using the JQuery library.
Note that I have made the initial default option for each accordion panel to display; it is important to ensure that the user is able to see the content in case Javascript is disabled.
The HTML for the accordion will be displayed similar to the format below.
<div class="accordion">
<div class="apanel">
<h1>Header</h1>
<p>Text</p>
</div>
</div>
First, we want to get each 'apanel' and apply a new style via class name ('unselected') to hide all panels except for the first one. internet Explorer does not recognise the Javascript getElementsByClassName() method, so we need to improvise. To make Internet Explorer behave, we first need to loop through all of the DIV elements on the page, then use DIV.className to determine the name of the class. Internet Explorer also cannot handle changing styles in the same manner that other browsers can, so we use the element.style.setAttribute() and element.setAttribute() methods on the element on the element's style to set class names.
if (document.getElementsByClassName) {
for (var i = 0; i < document.getElementsByClassName("apanel").length; i++) {
var item = document.getElementsByClassName("apanel")[i];
if (i == 0) {
item.style.height='';
} else {
item.style.height='20px';
item.className="apanel unselected";
}
}
} else {
i=0;
div = document.getElementsByTagName("div");
while (element = div[i++]) {
if (element.className == "apanel") {
if (i == 0) {
element.style.setAttribute("height","");
} else {
element.style.setAttribute("height","20px");
element.setAttribute("class","apanel unselected");
}
}
}
}
The above will work if you are using the accordion only once on a page. If you have multiple accordions, you should give each accordion an ID; you can then put the above code into a method and pass an ID parameter. The ID parameter can then be referenced to hide/expand all accordion panels except the first one in each group. (See the example below.)
function chooseAccordion(id) {
// ... place the above code here...
}
The accordion can be styled to however you wish it to look using CSS. I have set the H1 component to have a 'cursor:pointer' and have ensured that all default states have visible content. Only the '.apanel .unselected p' class should be hidden.
Using jQuery is much easier and it uses a lot less code. To achieve the same as above, simply look at the following example.
In jQuery, simply call the addClass() method to append a new class. Use the css() method to add CSS styling, and use the each() method to loop through all elements to pick out the 'apanel' element. The next bit of code captures the onClick event and determines if the tab is already opened or closed and completes the next bit of action, such as opening the clicked-on tab and ensuring that all other tabs are closed.
jQuery('.apanel').addClass("unselected");
jQuery('.apanel').css("height", "20px");
jQuery('.accordion').each(function() {
panel = jQuery(this).find('.apanel');
panel.first().removeClass("unselected");
panel.first().css("height", "");
});
jQuery('.apanel').click(function() {
if (jQuery(this).hasClass("unselected")) {
jQuery('.apanel').addClass("unselected");
jQuery('.apanel').css("height", "20px");
jQuery(this).removeClass("unselected");
jQuery(this).css("height", "");
} else if (jQuery(this).hasClass("unselected") == false) {
jQuery(this).addClass("unselected");
jQuery(this).css("height", "20px");
}
});
Animation can also be used with Javascript to create various effects, such as sliding effects when the user clicks onto the accordion.
One useful feature of HTML5 is the Canvas element. The HTML5 Canvas element allows developers to 'draw' graphics on the screen. In some cases, developers have even drawn complete works of art, from Homer Simpson to the Internet Explorer logo to a droplet of rain to a parrot (1).
Although the HTML5 Canvas is an excellent way for rendering graphics without the need for GIF or JPEG images, be warned that it is not widely supported. The HTML5 Canvas element is only supported in the following browsers@ IE 7+, Opera 10+, Safari 3+, Chrome 3+, and Fireforx 3+. It also requires Javascript to 'draw' the elements, and some of the more advanced features may not be supported or work consistently across browsers.
To use an HTML5 Canvas element, the user simply needs to ensure that the correct document type is set as the first line in the html page; This is done by inserting the tag: <!doctype htm>. Then, add a <canvas> element to the web page, as below.
<canvas id="myDrawing" width="200" height="200">
<p>Your browser doesn't support canvas.</p>
</canvas>
This <canvas> tag will act as a placeholder for you to draw the elements. The height and width can be changed in the canvas; also note that the HTML5 Canvas will be empty. In order to fill the canvas, we use Javascript.
The following lines of code manipulate the canvas and draw the elements into place. First, we check whether or not the browser supports canvas using the method getContext(). Then, we specify getContext(); '2D' is two-dimensional and will render two-dimensional graphics. (One can also render in 3D.) The user can specify the fill colour and stroke colour of the graphic using fillStyle and StrokeStyle, respectively and specifying the value using the RGB value or the hexidecimal value.
The following steps to create the element require the drawing to take place, and this is achieved by starting a new path - using beginPath() - and then moving the path to its X and Y coordinates on the canvas using moveTo(X,Y). The path can be moved from point to point to create a graphic, and when the developer is finished, the method closePath() is called. Finally, the developer needs to call the fill() method to fill the new graphic with the colour defined earlier in the code.
<script language="Javascript">
var drawingCanvas = document.getElementById('myDrawing');
if(drawingCanvas.getContext) { //check browser support for canvas
var ctx = drawingCanvas.getContext('2d');
ctx.fillStyle = 'rgb(111,21,33)';
ctx.beginPath()
ctx.moveTo(0, 0);
ctx.lineTo(150, 0);
ctx.lineTo(150, 0);
ctx.lineTo(75, 15);
ctx.closePath();
ctx.fill();
</script>
I've provided another example below that programatically uses logic to print out verticle lines.
<script language="Javascript">
var context = drawingCanvas.getContext('2d');
context.strokeStyle = "#C432F2";
context.beginPath();
for (var x = 0.5; x < 500; x += 10) {
context.moveTo(x, 0);
context.lineTo(x, 380);
}
context.closePath();
context.stroke();
</script>
Shapes can also be drawn by using the relevant method, such as 'arc' or 'rect' methods. The method below uses 'arc' to create a circle.
context.arc(100,100,50,0,Math.PI*2,true);
Hopefully this article provides you with a basic understanding of the HTML5 Canvas element to explore other features and advanced features (gradients, 3D graphics, charts, etc) on your own. Also, the following website (2) is a useful 'cheat sheet' if you intend on using HTML5 Canvas to draw your own graphical elements, and there are also many other resources out there.
Happy drawing; happy programming.
(1). http://www.queness.com/post/4023/18-brilliant-pure-css-drawings
(2). http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.pdf
Recent Comments