Archive for category javascript

Example using JQuery and CSS for DIV Slideshow

Over the last few months I have been helping my dad with a new website for his self catering holiday home in Galway. It gave me an opportunity to create a wordpress theme using thematic theme framework as well as look at some features of JQuery.


The Issue

One issue that he had with his old site was the very long page used to display all of the rooms in the house. It listed each room, one above the other with a picture and a description.

I wanted a way to display each room description and picture in a slideshow so only one room is displayed at any one time. I saw an example of a JQuery slideshow here that change the image from a list on a button click. I wasn’t interested in animating the image sliding across but it showed me how to use JQuery to change the order of the elements on the page.

$('#slides li:first').before($('#slides li:last'));

This takes the first li child of an element with an id of ‘slides’ then places it before the last li element. The example uses CSS to hide all of the other elements of the list so that only one element is shown at a time. When the JQuery code above moves the first element to the end, the second element is show. This is the CSS that makes this all work:

#slides {
  overflow:hidden;
  position:relative;
  width:250px;
  height:250px;
.....

As the height and width of the of the surrounding element is fixed and overflow is hidden, you will never see the other elements in the list.

My Solution

So with this example in mind, I set about defining a div for a room that I would display. This contains 3 other divs with the following class: roomName, roomImg, roomDesc. I also added a clear div to the bottom of each room definition to make sure that the content did not overflow.

Kitchen
  • Rangemaster cooker with gas hob & electric oven
  • American-style fridge
  • Belfast sink
  • Granite worktops
  • Dishwasher
  • Kitchen table comfortably seats 12 diners
  • Radio/CD player
  • Dual aspect
  • Double doors leading onto upper terrace

The CSS is similar to the example that I was using. Again, the important part is to make sure the surrounding div has overflow set to hidden so that only the content of one room is shown at a time.

  .clear {clear:both}
  .roomList{
  	width:640px;
	height:355px;
	margin:0 auto;
	overflow:hidden;
	position:relative;
  }
  .room {
	min-height:350px;
  	width:570px;
  }
  .roomDesc {
	float: left;
	max-width:240px;
  }
  .roomImg img{
	max-width:300px;
	max-height:350px;
	vertical-align:text-top;
	float: right;
	position:relative;
	padding:5;
  }

I changed the JQuery from the example to rotate the order of the div elements that I created when a previous and next button is clicked. As I didn’t want to animate a slide effect like the example, I just faded out the element before changing it and then faded the new element back in.

jQuery('#prev').click(function() {
			jQuery('.rooms').fadeOut('slow', function() {
				//move the last item and put it as first item
				jQuery('.room:first').before(jQuery('.room:last'));
				jQuery('.rooms').fadeIn('slow');
				setButtonText();

			});

        //cancel the link behavior
        return false;
    });  

    //if user clicked on next button
    jQuery('#next').click(function() {
      		jQuery('.rooms').fadeOut('slow', function() {
				//move the last item and put it as first item
				jQuery('.room:last').after(jQuery('.room:first'));
				jQuery('.rooms').fadeIn('slow');
				setButtonText();

		});
        //cancel the link behavior
        return false;  

    });

The setButtonText function is used to set the title attribute of the previous and next button to the next and previous rooms in the list. the

function setButtonText()
{
	jQuery('#prev').attr('title',jQuery('.room:last .roomName').html());
	jQuery('#next').attr('title',jQuery('.room:nth-child(2) .roomName').html());
}

The Demo

You can see this example in action on the accommodation page of Riverside Paradise.

Thanks to Kevin Liew for putting me on the right track with this JQuery slideshow example.


, , , ,

3 Comments

Unable to apply Javascript XSL Transform over HTTPS

I came across this issue a while a go and couldn’t really find much information on it at the time so thought that I would post about it just in case anyone has a similar issue.

We had the following code that loads an XML document and then applies a XSL transform against the XML document. The code looks a bit like following:
(This is the IE Specific version)

xmlDoc = new ActiveXObject(‘Msxml2.DOMDocument.3.0’);
xmlDoc.loadXML(XMLString);
xslDoc = new ActiveXObject(‘Msxml2.DOMDocument.3.0’);
xslDoc.load(xslFile);
output = xmlDoc.transformNode(xslDoc);

We would normally run this over HTTP and it always applied the transform and generated our output as you would expect. When we ran the same code over HTTPS the transform would never work.

After a lot of investigation it turned out that the issue was being caused due to a cache setting in the response header.

We were setting the Cache-Control parameter in the Response header to

‘private,no-cache,no-store’.

It seems that not allowing the XSL form to be cached was preventing the ActiveObject from loading it for the transform. By removing Cache-control parameter from the response header it worked fine every time.
Hope this can save someone with the same issue a bit of time.

2 Comments

AJAX process definition on Client Side

I came across an interesting article by Masayuki Otoshi via Java World that discusses how to execute process definitions on the client side rather than the server side.  This can come into play when making AJAX calls.  As AJAX is Asynchronous, it is not possible to predict the order that your callback methods will be called in.  Masayuki uses J-SOFA (Java/JavaScript Services Orchestration for Actions) to overcome this.

I haven't come across J-SOFA before but it looks like it might be worth looking at for situations where the order of callback methods is important.

No Comments