$(document).ready(function() { $('.faqApp').each(function(){ $obj = $(this); $obj .css("position", "relative") .css("background-color", "#f8a475") .css("border-bottom-width", "0px") .css("border-bottom-style", "solid") .css("border-bottom-color", "#fcd5bb") .prepend('

The Questions Click on a question to see the answer below

') .append('
') .children("ul") .css("margin", "10px") .css("padding", "0px") .css("padding-bottom", "10px") //.append('
  •  
    • ') .children('li') .css("list-style-type", "none") .css("width", "50%") .css("display", "block") .css("float", "left") .css("margin", "0px") .addClass('question') .children('span') .css("display", "block") .css('background-image','url(images/layout/solaveil/faqRadioOff.jpg)') .css('background-repeat','no-repeat') .css('background-position','0px 5px') .css("padding-left", "25px") .css("padding-right", "15px") .css("padding-top", "4px") .css("font-size", "12px") .css('cursor', 'pointer') .height(25) .end() .children('ul') .css("margin", "0px") .css("padding", "10px") .css("position", "absolute") .css("top", $obj.height()+"px") .css("left", "0px") .width($obj.width-20) .css('background-color','#fcd5bb') .prepend('

    The Answer

    ') .addClass('answer') .hide() .children('li') .css("font-size", "12px") .css("margin-left", "20px") .end() .end() .end() .append('
  •  
    • ') .children('li') .children('ul') .css("top", $obj.height()+"px") .end() .end() .end(); ; $('.faqApp .question > span').click(function(){ // alert("bvlah"); $(this).css('background-image','url(images/layout/solaveil/faqRadioOn.jpg)').parent().siblings().find('span').css('background-image','url(images/layout/solaveil/faqRadioOff.jpg)'); $(this).siblings('.answer').each(function(){ $obj2 = $(this); $obj2 .stop(true, true) .show(0) .addClass('visible') .parent() .siblings() .find('.answer') .stop(true, true) .hide(0) .end() .parent() .parent() .css("border-bottom-width", $obj2.outerHeight()+'px') ; }); }); }); $('.spfGuide').each(function(){ $obj = $(this); var mainHeight = 190; $obj .css("position", "relative") .css("overflow", "hidden") .css("background-color", "#fccaa9") .height(mainHeight) .children() .prepend('

    SPF Guide

    What age are you?

    ') .addClass("question1") .children('li') .each(function(e){$(this).attr('id', 'item'+(e+1))}) .children('span') .addClass('question1link') .end() .end() .children('li:not(.multilevel)') .children('ul') .addClass("recommendation") .prepend("

    Your recommended SPF

    ") .children('li') .css("list-style-type", "none") .end() .end() .children() .each(function(){ $(this).children('li:first').addClass("recommendedSPF"); $(this).children('li:last').addClass("smallprint"); }) .end() .end() .children('li.multilevel') .children('ul') .addClass("question2") .prepend("

    there are 5 main skin types, choose the one which best matches your skin type to find out a recommended SPF factor (click on figure)

    ") .prepend("

    What Skin Type are you?

    ") .prepend("

    Your recommended SPF

    ") .children('li') .each(function(e){ $(this).css('background-image', 'url(images/layout/solaveil/skinType'+(e+1)+'.jpg)') .css('background-repeat','no-repeat') .css('background-position','center top').attr('id', 'item'+(e+1)) ; }) .children('span') .addClass('question2link') .children('span') .css("display", "block") .end() .end() .children('ul') .addClass("recommendation") .prepend("

    Your recommended SPF

    ") .end() .children('ul') .each(function(){ $(this).children('li:first').addClass("recommendedSPF"); $(this).children('li:last').addClass("smallprint"); }) .end() .end() .end() .end() .end() .end() ; var padding = 10; var paddingRight = 127; var question1Width = 200; var contentWidth = ($obj.width() - question1Width - (padding*2)); var reccWidth = ($obj.width() - question1Width) - (paddingRight+padding); var reccHeight = mainHeight-(padding*2); $('li', $obj) .css("list-style-type", "none") ; $('.question1', $obj) .css("margin", "0px") .css("padding", padding+"px") .width(question1Width) .children('li') .css("margin", "0px") .children('span') .css("display", "block") .css("line-height", "30px") .css('background-image','url(images/layout/solaveil/spfRadioOff.jpg)') .css('background-repeat','no-repeat') .css('background-position','0px 5px') .css('padding-left','25px') .css('cursor','pointer') .height(30) .end() .children('ul.recommendation') .css("position", "absolute") .css("top", "0px") .css("right", "0px") .css("margin", "0px") .css("padding", padding+"px") .css("padding-right", paddingRight+"px") .css("background-color", "#fee1cf") .width(reccWidth) .height(reccHeight) .hide() .children('li.smallprint') .css("padding-right", paddingRight+"px") .css("margin-bottom", "0px") .css("position", "absolute") .css("bottom", padding+"px") .css("left", padding+"px") .end() .end() .children('ul.question2') .css("background-color", "#fff") .css("position", "absolute") .css("top", "0px") .css("right", "0px") .css("margin", "0px") .css("padding", padding+"px") .width(contentWidth) .height(290) .hide() .children('li') .css("float", "left") .css("height", "150px") .width(contentWidth/5) .children('span') .css("display", "block") .css("padding-top", "125px") .css("text-align", "center") .css("font-size", "17px") .css('cursor','pointer') .children('span') .css("display", "block") .css("font-size", "14px") .end() .end() .children('ul.recommendation') .css("position", "absolute") .css("top", "0px") .css("right", "0px") .css("margin", "0px") .css("padding", padding+"px") .css("padding-right", paddingRight+"px") .css("background-color", "#fee1cf") .width(reccWidth) .height(reccHeight) .hide() .children('li.smallprint') .css("padding-right", paddingRight+"px") .css("margin-bottom", "0px") .css("position", "absolute") .css("bottom", padding+"px") .css("left", padding+"px") .end() .end() .end() .end() .end() ; $('.question2 .recommendation .smallprint', $obj) .before('change your skin type') ; $obj .prepend('

    Your recommended SPF

    Select an age to find out!

    ') .children('div#initial') .css('position', 'absolute') .css('right', '0px') .css('padding', padding+'px') .css("background-color", "#fee1cf") .height(mainHeight) .width(contentWidth) ; $('h3', $obj) .css('color', '#f58345') .css('font-size', '24px') ; $('.question1link', $obj).click(function(){ if($(this).parent().hasClass('multilevel')){ $obj.height(310); $(this).parent().find('.recommendation').hide(); } else { $obj.height(mainHeight); } $(this) .css('background-image','url(images/layout/solaveil/spfRadioOn.jpg)') .parent().siblings('li').find('.question1link').css('background-image','url(images/layout/solaveil/spfRadioOff.jpg)') ; $('+ ul', this) .show() .parent() .siblings('li') .find('.recommendation') .hide() .end() .find('.question2') .hide() ; }); $('.question2link', $obj).click(function(){ $('+ ul', this) .show() .parent() .siblings('li') .find('.recommendation') .hide() ; $obj.height(mainHeight); }); $('.changeSkinType', $obj).click(function(){ $(this).parent().hide(); $obj.height(310); }); }); $('.optionPicker').each(function(){ $op = $(this); $op .css('position', 'relative') .after('

    Click above which best represents your behaviours when the sun shines to see how your skin may look in the future.

    ') .children('img').each(function(e){ $(this) .addClass('options') .attr('id', 'imageOption'+(e+1)) ; }) .end() .append('') .append('') .append('') .height(230) .children('img') .css('position', 'absolute') .end() .children('img.optionButton') .css('bottom', '0px') .css('cursor', 'pointer') .end() .children('img#Option2') .css('right', '0px') .end() $('.optionButton', $op).click(function(){ $('img#start', $op).remove(); $('img#image' + $(this).attr('id'), $op).fadeTo(200, 1).siblings(':not(.optionButton)').fadeTo(200, 0); if($(this).attr('id') == 'Option1'){ $('+ p',$op).html('Image represents a woman in her early 50s who has always protected her skin effectively from UV rays.') } else { $('+ p',$op).html('Image represents a woman in her early 50s who has negelected to protect her skin effectively from UV rays.') } }); ; $('.optionButton', $op) }); $('.grid_12.signup input[type=button], table.searchResults #Table2 .searchoptions input.inputControl').attr('value', ''); $('table.searchResults h3').replaceWith('

    Search results

    '); $('.search2010Textbox').attr('value', ''); $('.spfGuideLogo').mouseenter(function(){ $(this).stop(true, true) .animate({'left' : "-10px"}, 200, 'easeInQuad') .animate({'left' : "10px"}, 200, 'easeInQuad') .animate({'left' : "0px"}, 200, 'easeInQuad') }); if(jQuery().colorbox) { $('.enlarge').colorbox({rel: $(this).attr('rel'), title: $('img', this).attr('alt')}); } });