Menu
Hi everyone,
I have a kiosk screen with several circles that have options that appear and disappear based on selections. Currently I have 5 large circles surrounding a logo in the middle of the screen. When one of the large circles is clicked that circle travels to the center of the screen while everything else fades away. As this is happening the large circle increases in size and several smaller circles emerge surrounding the larger circle. This is working fine. The issue I am running into is the return. When a back button is clicked I need the smaller circles to disappear, the large circle to shrink, move back to its old location and then have the other 4 large circles and the logo re-emerge. I am hoping this is a simple math issue but here it goes:
Here is the CSS for the starting location of one of the large circles:
[CODE]
#JSarea{
top:calc(40% – (360px*.5));
left: calc(30% – (360px*.5));
margin-top:auto; margin-bottom:auto;
Position: absolute;
z-index:1;
width:360px; height:360px;
}
Here is the javascript that is being fired on first click: (which is working fine)
[CODE]
$(document).ready(function() {
$(“#JSlc”).click(function() {
var l = ($(window).width() – $(‘#JSarea’).width()*1.8) *.5;
var t = ($(window).height() – $(‘#JSarea’).height()*1.8) *.5;
var cfsc = parseInt($(“.scp”).css(“font-size”));
var nfsc = cfsc + 8 + “px”;
var cflc = parseInt($(“.lcp”).css(“font-size”));
var nflc = cflc + 12 + “px”;
$(this).parent().siblings().animate({“opacity”:”0″},300);
// section to run immediately once above section is completely “invisible”
$(‘#JSarea’).animate({‘height’: $(‘#JSarea’).height()*1.8, ‘width’: $(‘#JSarea’).width()*1.8, ‘top’: t + ‘px’, ‘left’: l + ‘px’},400);
$(‘#JSlc’).animate({‘height’: $(‘#JSlc’).height()*1.8, ‘width’: $(‘#JSlc’).width()*1.8},400);
$(‘.scp’).animate({‘font-size’: nfsc},400);
$(‘.lcp’).animate({‘font-size’: nflc},400);
$(‘.back’).animate({‘height’: $(‘.back’).height()*1.8, ‘width’: $(‘.back’).width()*1.8},400);
$(‘.smallcircleleft’).animate({‘height’: $(‘.smallcircleleft’).height()*1.8, ‘width’: $(‘.smallcircleleft’).width()*1.8},400);
$(‘.smallcircleupleft’).animate({‘height’: $(‘.smallcircleupleft’).height()*1.8, ‘width’: $(‘.smallcircleupleft’).width()*1.8},400);
$(‘.smallcircleup’).animate({‘height’: $(‘.smallcircleup’).height()*1.8, ‘width’: $(‘.smallcircleup’).width()*1.8},400);
$(‘.smallcircleupright’).animate({‘height’: $(‘.smallcircleupright’).height()*1.8, ‘width’: $(‘.smallcircleupright’).width()*1.8},400);
$(‘.smallcircleright’).animate({‘height’: $(‘.smallcircleright’).height()*1.8, ‘width’: $(‘.smallcircleright’).width()*1.8},400);
$(‘.smallcirclerightdown’).animate({‘height’: $(‘.smallcirclerightdown’).height()*1.8, ‘width’: $(‘.smallcirclerightdown’).width()*1.8},400);
$(‘.smallcircledown’).animate({‘height’: $(‘.smallcircledown’).height()*1.8, ‘width’: $(‘.smallcircledown’).width()*1.8},400);
// section to start immediately when Line 4 in the last section is complete
$(“#JSback”).delay(300).animate({“opacity”:”1″},1000);
$(“#JSsmallcircleleft”).delay(400).animate({“opacity”:”1″},1000);
$(“#JSsmallcircleupleft”).delay(500).animate({“opacity”:”1″},1000);
$(“#JSsmallcircleup”).delay(600).animate({“opacity”:”1″},1000);
$(“#JSsmallcircleupright”).delay(700).animate({“opacity”:”1″},1000);
$(“#JSsmallcircleright”).delay(800).animate({“opacity”:”1″},1000);
$(“#JSsmallcirclerightdown”).delay(900).animate({“opacity”:”1″},1000);
$(“#JSsmallcircledown”).delay(1000).animate({“opacity”:”1″},1000);
});
});
Here is the javascript that is firing when the back button is clicked:
[CODE]
$(document).ready(function() {
$(“#JSback”).click(function() {
var l = ($(window).width() – $(‘#JSarea’).width()/1.8) *.5;
var t = ($(window).height() – $(‘#JSarea’).height()/1.8) *.5;
var cfsc = parseInt($(“.scp”).css(“font-size”));
var nfsc = cfsc – 8 + “px”;
var cflc = parseInt($(“.lcp”).css(“font-size”));
var nflc = cflc – 12 + “px”;
// section starts immediately but elements progressively fade out
$(“#JSsmallcircledown”).delay(300).animate({“opacity”:”0″},1000);
$(“#JSsmallcirclerightdown”).delay(400).animate({“opacity”:”0″},1000);
$(“#JSsmallcircleright”).delay(500).animate({“opacity”:”0″},1000);
$(“#JSsmallcircleupright”).delay(600).animate({“opacity”:”0″},1000);
$(“#JSsmallcircleup”).delay(700).animate({“opacity”:”0″},1000);
$(“#JSsmallcircleupleft”).delay(800).animate({“opacity”:”0″},1000);
$(“#JSsmallcircleleft”).delay(900).animate({“opacity”:”0″},1000);
$(“#JSback”).delay(1000).animate({“opacity”:”0″},1000);
// section to start once all elements in last section are completely “invisible”
$(‘.smallcircledown’).delay(1500).animate({‘height’: $(‘.smallcircledown’).height()/1.8, ‘width’: $(‘.smallcircledown’).width()/1.8},400);
$(‘.smallcirclerightdown’).delay(1500).animate({‘height’: $(‘.smallcirclerightdown’).height()/1.8, ‘width’: $(‘.smallcirclerightdown’).width()/1.8},400);
$(‘.smallcircleright’).delay(1500).animate({‘height’: $(‘.smallcircleright’).height()/1.8, ‘width’: $(‘.smallcircleright’).width()/1.8},400);
$(‘.smallcircleupright’).delay(1500).animate({‘height’: $(‘.smallcircleupright’).height()/1.8, ‘width’: $(‘.smallcircleupright’).width()/1.8},400);
$(‘.smallcircleup’).delay(1500).animate({‘height’: $(‘.smallcircleup’).height()/1.8, ‘width’: $(‘.smallcircleup’).width()/1.8},400);
$(‘.smallcircleupleft’).delay(1500).animate({‘height’: $(‘.smallcircleupleft’).height()/1.8, ‘width’: $(‘.smallcircleupleft’).width()/1.8},400);
$(‘.smallcircleleft’).delay(1500).animate({‘height’: $(‘.smallcircleleft’).height()/1.8, ‘width’: $(‘.smallcircleleft’).width()/1.8},400);
$(‘.back’).delay(1500).animate({‘height’: $(‘.back’).height()/1.8, ‘width’: $(‘.back’).width()/1.8},400);
$(‘#JSlc’).delay(1700).animate({‘height’: $(‘#JSlc’).height()/1.8, ‘width’: $(‘#JSlc’).width()/1.8},400);
$(‘.scp’).delay(1700).animate({‘font-size’: nfsc},400);
$(‘.lcp’).delay(1700).animate({‘font-size’: nflc},400);
$(‘#JSarea’).delay(1700).animate({‘height’: $(‘#JSarea’).height()/1.8, ‘width’: $(‘#JSarea’).width()/1.8, ‘top’: t + ‘px’, ‘left’: l + ‘px’},400);
// section should start as soon as above section has completed
$(this).parent().siblings().delay(1800).animate({“opacity”:”1″},500);
});
});
Here is the code that is moving the elements and I cannot get back to its original location:
[CODE]
var l = ($(window).width() – $(‘#JSarea’).width()/1.8) *.5;
var t = ($(window).height() – $(‘#JSarea’).height()/1.8) *.5;
…
$(‘#JSarea’).delay(1700).animate({‘height’: $(‘#JSarea’).height()/1.8, ‘width’: $(‘#JSarea’).width()/1.8, ‘top’: t + ‘px’, ‘left’: l + ‘px’},400);
As you can see I simply reversed the calculation assuming that when you times a number by 1.8 you can return back to the original number by dividing the new number by 1.8 (100 X 1.8 = 180 and 180 / 1.8 = 100).
Please help! If I haven’t already said so, I am a newbie to javascript and I am trying to learn all that I can. Thanks in advance for the assistance!!!