Week Four

Experimentation

Within the final week of the website build I made some final CSS styling changes to both the jQuery elements and the main site.

The main thing that I added to the site this week was another type of accordion. This time I used it for separating the different weeks. I did not remove the tabs that I had in the previous week but I placed them within the accordion to provide more interaction for the user.

	$(".accordion h3:first").addClass("active");
	$(".accordion .week_res:first").show();

	$(".accordion h3").click(function(){
		$(this).next(".week_res").slideToggle("slow")
		.siblings(".week_res:visible").slideUp("slow");
		$(this).toggleClass("active");
		$(this).siblings("h3").removeClass("active");
	});

});

By looking at the code you can see how the different classes of this jQuery element are executed.

At first code is adding the class .active to the h3 tag that is contained within the accordion, it is then showing that the first weekly_res class will be shown on page load and the rest be hidden.

The next part of the code is executing the click function that will allow the accordion slide toggle to be activated, then I have added the class that lets the browser know that when the slide is clicked then it needs to add the class active to the current selected tag and remove it from the previous.

Apart from adding the final accordion to the site I spent the rest of my time making sure everything was styled right and that the sites hierarchy was consistent.

I added classes and styled the announcements buttons and added new active and unactive images to the accordion!

cssstyle

Also using CSS classes I styled the tabs that I placed within the accordion and added a hover event to them so they became active on rollover.

acc_tabs

Final Draft

Below is a link to the final draft of my website. I am quite pleased with both the quality of the final site and with my own personal progress over the last four weeks.

Week Three

Experimentation

After the third week I feel as if I am starting to get a good grip of how jQuery works and how it is structured. It is definitely something that I want to look further into as there are so many things that can be done with it.

Within week three I once again changed the style of the website but this week I added a lot more jQuery elements than in week two.

Accordion

Within this week I added elements that allowed me to used tabs, accordions and allowed me to add elements to the DOM.

The first element that I added was the accordion. We worked on this within the practical and I thought t could come in quite handy to control the weekly announcement that would be made on the com601 website.

The first piece of this code allowed me to select the div in which I wanted the content to appear when the page was loaded also the second line of the code allowed me to select the most previous announcement and to have it on view on page load.

  $(document).ready(function() {
var currentannouncement = 0;
var totalannouncements = $('div[class="announcement"]').size();
$('#announcementContent').text($('p[class="announcement_content"]:first').text());

The second piece of this code allowed me to add and remove classes to the accordion buttons based on the fact that if they are active or unactive. This allows the user to see if there is going to be any event executed if a button is clicked.he first piece of this code allowed me to select the div in which I wanted the content to appear when the page was loaded also the second line of the code allowed me to select the most previous announcement and to have it on view on page load.

if (currentannouncement == 0) $('#prev_announcement').removeClass('active').addClass('unactive');
if (currentannouncement > 0) $('#prev_announcement').removeClass('unactive').addClass('active');
if (currentannouncement == 1) $('#next_announcement').removeClass('active').addClass('unactive');
if (currentannouncement < 1) $('#next_announcement').removeClass('unactive').addClass('active');

Tabs

The next element that I added to the website this week was a set of tabs, I followed a tutorial on the website that we were provided with to create these tabs.

They are a simple set of tabs that require some show/hide and add/remove class elements to work correctly.

The structure of this piece of jQuery is quite straightforward. As you work your way through he code the browser it being told to first hide all elements within the div #weeks except for the first tag, it is then told to add the class .active to this tag and when selected it should then remove this class and add it to the element that has just been clicked.

$(document).ready(function(){
   $('#weeks div').hide();
   $('#weeks div:first').show(); 
   $('#weeks ul li:first').addClass('active'); 
   $('#weeks ul li a').click(function(){ 
   $('#weeks ul li').removeClass('active'); 
   $(this).parent().addClass('active');
   var currentTab = $(this).attr('href'); 
   $('#weeks div').hide();
   $(currentTab).show();
   return false;
});
});

The last few lines explain to the browser that the current tab should be hidden when another has been selected.

Adding objects to the DOM

The third and final jQuery element that I included within this weeks draft was the ability for the browser to add elements to the DOM. To do this I used the .append event to call in the header content on page load.


$(document).ready(function() {
				$( '#header_content' ).append("COM601 - 11844 Advanced Web AuthoringProf. Terry Anderson");		
			});

3rd Draft

Below is a link to the second draft of my website. I have continued to style it using mainly CSS and have included several more simple jQuery elements.

Week Two

Experimentation

Within the second week of working on the website I made a few small changes to the styling of the website and added two fairly small but interesting jQuery features.

The small change that I made to the styling was placing the header in the center of the screen rather than having it sitting to the left hand side.

Within this week the two jQuery elements that I added were a web page fade and a tooltip/animation.

ex_1

Fade

To add this feature I needed to add a small piece of CSS styling to the container that the websites content was placed within. Within the wrapper styling I needed to add the style display:none, this meant that the content was hidden on page load.

	#wrapper{
	width: 900px;
	margin: 0 auto;
	padding:0;
	display: none;
	}

The next part was adding the jQuery code, this code would execute on page load allowing the content to become shown and to be presented with a fade in transition.

	$(document).ready(function() 
	{
		$( '#wrapper' ).fadeIn("slow");		
	});

The code pasted above shows what was needed for these elements to be executed correctly; the code is very simple and only contains one line.

Within this code the div #wrapper is called in and has a event added to it, this event is the .fadeIn section of the code. I have also added a slow fade so that the user will be able to see this working when they first load the page.

Tooltip/Animation

The tooltip/animation element that I added was created by following a tutorial, which was accessed through the link, we were provided with.

This piece of code contains information that will allow the content to animate in from both the top and the bottom of the div that it is contained within. As you can see it is being show from the top of the div and is being animated down slowly from a set height and is bong animated out fast also from a set height and to the top of the div.

$(document).ready(function(){

	$(".menu a").hover(function() {
		$(this).next("em").animate({opacity: "show", top: "-55"}, "slow");
	}, function() {
		$(this).next("em").animate({opacity: "hide", top: "-75"}, "fast");
	});
});

2nd Draft

Week One

Experimentation

The first thing that I done this week was the basics, I took the examples that we were given in class and re-created them myself so that I could get the grasp of what code was needed to allow effects to be show in the browser.

I typed up the simple show/hide effect that we where shown and applied the italic style to the paragraph elements of the HTML page. To customize this I changed the selector so I was able to hide/show div elements instead of just the p tag elements. I also changed the CSS selector so that each H2 tag within my text would then become italic. The example of this can be seen below.

The next step I took was added another div to the code so that I had the option to open and close different content that was placed within the page, this example could be used for showing and hiding different weeks and its weekly resources. I also added a piece of code to the document ready function that allowed me to hide the content on page load.

Within the next example I started to style my website, also I added several more examples of jQuery. Within this example I added to new animation styles that presented the content in different ways. I applied a slideIn/slideOut and a fadeIn/fadeout style to the script. To do this I simply changed the show/hide elements of each section.

Below is an example of each of these elements in action. I have applied a different animation to each week to show the different effects and so each can be compared to see which is best.

1st Draft

Below is a link to the first draft of my website. I have styled it using mainly CSS and have included several simple jQuery elements.

website - v1