GL CREATIONS

JandB Interiors – “at the heart of your home”

Graeme — Wed, 04 Apr 2012 11:51:35 +0000

GL Creations is very proud to announce the release of the new JandB interiors website, designed by Mike Garlick, and produced by GL Creations Ltd. Read below for a full synopsis of the build, the features it uses, and the awesome design and layout that this wonderful new website uses to create an amazing experience for all users, or if you prefer, click here, to browse the website for yourself!

Home Page

A welcoming and inviting homepage, focusing on the large image slider. Ratio of images to text is perfect, meaning the user is drawn to the focus of the page – the images!

A Simple and effective menu structure, utilising jQuery to show/hide with animation, the sites heart logo, on rollover. Jquery finds the items width, and uses that to ensure that the heart is always within the centre, meaning should changes to the names ever need to be made, the end result to the user, is always the same. Consistent!

Who we are

An excellent approach to thinking outside of the box for a meet the team page. What more do people love that great design? Well, puppies and fluffy kittens of course! A wonderfully laid out page with inviting images, and text layouts, all produced in CSS.

What we do/ Interior/ Kitchen

All of these pages use a similar layout, however the key was the clear use of CSS to get the image and text align the way Mike wanted. An intricate layout which produces an amazing effect not only on the eye, but the way the text is displayed to the user.

This effect was achieved with lots of text-align; float; padding and margin combos on multi-class declarations

Gallery Pages

All of the gallery pages throughout the site, use a consistent design, based loosely on jQuery Fancy Box, it features a completely custom design for the purposes of JandB Interiors. All of the images supplied, were in different aspect ratios, so, using PHP, all thumbnails are generated once, on the fly, check dimensions, and crop to a square as appropriate and return that to be viewed by the user. It then saves this thumbnail for future use, thus reducing the server demand for thumbnail generation.

This ensures that the relevant thumbnail is only ever generated once, and means the user has to do nothing should new images need to be added in the future

A lovely jQuery hover effect is supplied on a selected picture, and clicking on an image reveals a gorgeous display of the full resolution photograph.

Get in touch

Another wonderful twist on the traditional contact us page. Three easy to navigate columns, with google maps integration, php contact form, and store opening hours.

So – what do you think? I love this website, and its been a great pleasure to build it. It is easy on the eye, inviting to all, easy to maintain, and is a great digital representation of JandB Interiors.

Technology Used

MODX Revolution (2.2 Latest build)
mySql
PHP (Various functions i.e Thumbnail generation)
jQuery (Various effects through the site)
HTML 5
CSS 3

Let me know what you think – remember to like and re-tweet!

Jquery content horizontal sliding tabber

Graeme — Wed, 14 Mar 2012 11:22:40 +0000

Welcome to another GL CREATIONS tutorial, this time its a JQuery Horizontal sliding tabber. A great way to get lots of content onto your screen, with a nice degree of interaction to your users, its also a little snazzy!

So, this will be spit into three sections, the HTML, CSS and finally, the JQuery. A finished working example of this can be seen below. Just click one of the images.

Hulk SMASH!

Some guy from the Green Lanturn thats been on too many sun beds…

Spiderman AKA Peter Parker

Superman

The HTML

A nice easy structure, commented as we go along – this will come alive when we combine it with our CSS and Jquery. If you view it with no styling it will appear as somewhat of a jumble!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

The CSS

Again, a simple enough layout, using overflow hidden, and absolute positioning, we can “trick” the browser into thinking each block is only (in this case) 125px. The final step will see this turn into a nice animated function.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

#stage {
width:930px;
height:125px;
position:relative; /* Important! */

.tileItem, .tileImg, .tileText {
float:left; /* Important! */
}

.tileItemContainer {
position:absolute; /* Important! */
top:0;
left:0;
}

.tileContainer {
width:515px; /* Important! Total width of a single item */
}

.tileItem {
position:relative; /* Important! */
overflow:hidden; /* Important! */
margin-right:10px;
width:125px;
height:125px;
}

.tileImg {
width:125px;
height:125px;
background-color:blue;
cursor:pointer;
}

.tileText {
width:370px;
height:125px;
background-color:green;
padding:0 10px;
}

The JQuery

Here is where the magic happens! Ive commented it in line, so it should make sense to you.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

$(document).ready(function(){
//For easy reference later
var tileItem = $('.tileItem');

//Grab some widths that we need
var stageWidth = $('#stage').width(); // The stage
var blockWidth = tileItem.width(); // Each img block width
var tileContainerWidth = $('.tileContainer').width(); // Width of the container for each item*/

// How many items do we have?
var totalBlocks = tileItem.length;

//Lets work out the total width + any padding or margins
var totalBlocksWidth = totalBlocks * tileItem.outerWidth(true);

//So we know to make this central we need to take one away from the other, and /2
var indentAmount = (stageWidth-totalBlocksWidth)/2;

//Now lets indent it by the above value...
$('.tileItemContainer').css("left", indentAmount);

//So when we click on an item
tileItem.click(function () {
//If its more than 0 we know we havnt clicked on anything so...
if ($('.tileItemContainer').position().left > 0) {
//Set this as we are going into a different scope in a moment...
var ourSlide = $(this);
//Move it to the left
$('.tileItemContainer').animate({"left" : "0"},400, function () {
//Trans them all
tileItem.stop().animate({"opacity" : "0.5"},200);
//Slide open this one and make visible to full 1
ourSlide.stop().animate({"width" : tileContainerWidth, "opacity" : "1"},400);
});
}
else { //So its greater than one, we have clicked something before.
//Make them all there default width, and trans them all
tileItem.stop().animate({"width" : blockWidth, "opacity" : "0.5"},200);
//Make just this one full width and visible to full 1
$(this).stop().animate({"width" : tileContainerWidth, "opacity" : "1"},400);
}
});
});

And there you have it, a really nice Jquery horizontal sliding interface! Hope you like it!

Jquery Text Bumper / Horizontal Ticker

Graeme — Mon, 12 Mar 2012 15:10:03 +0000

Another day, another JQuery script!

This is a really nice, JQuery text bumper/scroller/horizontal ticker, with a really easy structure to follow. A bare bones example of the finished piece is below…

Here is

Some Text

That animates in with custom time delays for each item

After the last

And when it reachs the bottom

Of the div that its it

It will start to bump everything else up!

See? Bump!

Bump some more!

Bump de bump de bump!

And some more bumping!

And its done!

Up
Down

This script has a few nice features to it, such as navigation up and down arrows showing after height exceeds that of the stage, and the ability to set a custom delay into each item.
Heres the code split into sections,and commented as we go along, its really easy….

The HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

<div id="stage">

<div id="rpStage">

<div class="rpItem" rel="0">
<p>Here is</p>
</div>
<div class="rpItem alt" rel="500">
<p>Some Text</p>
</div>
<div class="rpItem" rel="500">
<p>That animates in with custom time delays for each item</p>
</div>
<div class="rpItem alt" rel="500">
<p>After the last</p>
</div>
<div class="rpItem" rel="500">
<p>And when it reachs the bottom</p>
</div>
<div class="rpItem alt" rel="500">
<p>Of the div that its it</p>
</div>
<div class="rpItem" rel="500">
<p>It will start to bump everything else up!</p>
</div>
<div class="rpItem alt" rel="500">
<p>See? Bump!</p>
</div>
<div class="rpItem" rel="500">
<p>Bump some more!</p>
</div>
<div class="rpItem alt" rel="500">
<p>Bump de bump de bump!</p>
</div>
<div class="rpItem" rel="500">
<p>And some more bumping!</p>
</div>
<div class="rpItem alt" rel="500">
<p>And its done!</p>
</div>
</div>

<div id="rpNavStage">
<span id="up" class="rpNav">Up</span>
<span id="down" class="rpNav">Down</span>
</div>
</div>

The CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

#stage {width:930px; height:310px; padding-bottom:10px; position:relative; overflow:hidden; padding:0;}

/* Our nav stage */
#rpStage {
position:relative; /* Important! */
float:left;
width:850px;
height:auto; /* Important! */
overflow:hidden; /* Important! */
}

/* Our nav container */
#rpNavStage {
float:left;
height:100%;
width:50px;
display:block;
margin-left:10px;
}

/*For each of the items shown */
.rpItem {
width:820px;
margin:0 auto 10px;
padding:10px;
display:none;
opacity:0;
border:1px solid #333;
border-radius:5px;
}

/* Alternate BG color */
.alt {
background-color:#e1e1e1;
}

.rpNav {
display:block;
height:50px;
width:50px;
background-color:green;
opacity:0;
cursor:pointer;
margin-top:60px;
}

The JQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

$(document).ready(function(){
//Our starting delay, 0 as we are starting from the beginning...
var theDelay = 0;
//Total height of everything loaded inside our rpStage
var totalElementsHeight = 0;
//Fixed height of our stage
var stageHeight = $('#stage').outerHeight(true);
//How much we should adjust the outer frame
var moveIt = 0;
//How many items are we dealing with here?
var itemTotal = $('.rpItem').length;

//So for each item we will...
$('.rpItem').each(function(index){
//By adding the previous timer to the next, we have our relative load time
theDelay = theDelay + parseInt($(this).attr('rel'),10);
//Lets now add this to the DOM, so that it will add to the height of the stage
$(this).css("display", "block");
//Lets now animate it, and do the following once its completed
$(this).delay(theDelay).animate({"opacity" : 1}, 400, function () {
//Now its on the DOM, lets calculate our total height of all elements added
totalElementsHeight = totalElementsHeight + $(this).outerHeight(true);
//OK so if its greater than the stage height we want to do something
if (totalElementsHeight > stageHeight) {
//Do we need to animate? We dont if we are on the last one, lets check.
if (index !== itemTotal){
//We are not the last one, its ok to slide up
//Lets now work out how much we have to move the window up
moveIt = moveIt - $(this).outerHeight(true);
$('#rpStage').animate({"top" : moveIt}, 100);
$('.rpNav').css("display", "block");
$('.rpNav').animate({"opacity" : 1}, 400);
}
}
});
});
//Our navigation is below, simple set up
$("#up").click(function () {
var position = $('#rpStage').position().top;
goTo = position + 60;
//Some basic error capturing, dont want people clicking past the height
if (goTo < 0) {
$('#rpStage').animate({"top": goTo}, 300)
}
else {
$('#rpStage').animate({"top": 0}, 300)
}
});

$("#down").click(function () {

var position = $('#rpStage').position().top;
goTo = position - 60;
//Some basic error capturing, dont want people clicking past the height
if (goTo > -stageHeight) {
$('#rpStage').animate({"top": goTo}, 300)
}
else {
$('#rpStage').animate({"top": -stageHeight}, 300)
}
});
});

A timeline style jquery content script

Graeme — Fri, 09 Mar 2012 16:56:27 +0000

Whilst making something for a recent project, it became a requirement to make a timeline style interactive object to hide/show contents based upon the clicked objects position show and or hide. The following is what I created, and I felt that it was kinda “trick” so I thought I would share it with you all. Its completely made up of JQuery and CSS. Have a little play with the finished item below and you will see what I mean…

Heading 1