/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] zooming parent moves all elements

Copy linkTweet thisAlerts:
Dec 30.2015

Hi all!

First off let me say I am a complete newb to javascript so my apologies if this is a simple answer. I have two issues actually.

  • 1.

    When I click a div it should move it to the center of the page and zoom the parent of that div, which in-turn should zoom all of that divs childrens.
    I can get the div centered but for some reason when I use the zoom property it shifts everything off screen instead of staying put.

  • 2.

    When a back button is clicked the parent div should zoom back to its original size and return to its original location
    For some reason I cannot get the div to return to its previous location even if I comment out the zoom and focus on the movement itself.

    • Any help would be greatly appreciated!!!!

    Here is what I have going so far:

    The HTML:

    [CODE]
    <!DOCTYPE html>
    <html>
    <head>
    <link rel=”stylesheet” type=”text/css” href=”index.css”>
    <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>
    <script src=”index.js”></script>
    <title align=”center”>WMW Kiosk</title>
    </head>
    <body>
    <div id=”body”>
    <img id=”logo” src=”WMW logo.png” alt=”wrong” style=”width:300px;height:128px;”/>
    </div>
    <div id=”JSarea”>
    <div id=”JSlc” class=”largecircle”>
    <p><a href=”#”>Job Search<br>Tools</a></p>
    </div>
    <div id=”JSback” class=”back”>
    <a href=”#”><img src=”back.png” alt=”wrong” style=”width:50px;height:50px;”/></a>
    </div>
    <div id=”JSsmallcircleleft” class=”smallcircleleft”>
    <p><a href=”#”>Job<br>Searching</a></p>
    </div>
    <div id=”JSsmallcircleupleft” class=”smallcircleupleft”>
    <p><a href=”#”>Applications</a></p>
    </div>
    <div id=”JSsmallcircleup” class=”smallcircleup”>
    <p><a href=”#”>Resumes</a></p>
    </div>
    <div id=”JSsmallcircleupright” class=”smallcircleupright”>
    <p><a href=”#”>Cover<br>Letters</a></p>
    </div>
    <div id=”JSsmallcircleright” class=”smallcircleright”>
    <p><a href=”#”>Interviewing</a></p>
    </div>
    <div id=”JSsmallcirclerightdown” class=”smallcirclerightdown”>
    <p><a href=”#”>Personal<br>Branding</a></p>
    </div>
    <div id=”JSsmallcircledown” class=”smallcircledown”>
    <p><a href=”#”>Blank<br>Blank</a></p>
    </div>
    </div>
    </body>
    </html>
    [/CODE]

    The CSS:

    [CODE]
    #unemploymentarea, #WMWarea, #WEAarea, #CRarea, #JSarea {
    Position: absolute;
    z-index:1;
    width:360px; height:360px;
    /*background-color:gray;*/
    }

    #unemploymentarea {
    bottom:20px; left: calc(40% – (360px/2));
    margin-top:auto; margin-bottom:auto;
    }

    #WMWarea{
    bottom:20px; right: calc(40% – (360px/2));
    margin-top:auto; margin-bottom:auto;
    }

    #WEAarea{

    top: 0; right: calc(50% – (360px/2));
    }

    #CRarea{
    top:calc(40% – (360px/2));
    right: calc(30% – (360px/2));
    margin-top:auto; margin-bottom:auto;
    }

    #JSarea{
    top:calc(40% – (360px*.5));
    left: calc(30% – (360px*.5));
    margin-top:auto; margin-bottom:auto;
    }

    #body {
    position: fixed;
    width: 300px;
    height: 128px;
    top: calc(50% – (128px/2));
    left: calc(50% – (300px/2));
    }

    #logo {
    position: relative;
    width:300px;
    height:128px
    }

    a {
    text-decoration:none;
    color:black;
    }
    .back, .smallcircleleft, .smallcircleupleft, .smallcircleup, .smallcircleupright, .smallcircleright, .smallcirclerightdown, .smallcircledown {
    opacity:0;
    width: 80px; height:80px;
    max-height:100%; max-width:100%;
    overflow:auto;
    border-radius: 80px;
    border-width: 5px; border-color:black; border-style:solid;
    display:flex;
    box-shadow: 5px 5px 5px #A9A9A9;
    z-index:2;
    position:absolute;
    text-align:center;
    justify-content:center;
    align-items:middle;
    }

    .smallcircleleft p, .smallcircleupleft p, .smallcircleup p, .smallcircleupright p, .smallcircleright p, .smallcirclerightdown p, .smallcircledown p {
    margin:auto;
    font-size:13px; font-family:Aileron; font-weight: bold;
    background-color: #FFFFFF;
    }

    .largecircle {
    top:0; left:0; bottom:0; right:0;
    margin:auto;
    max-height:100%; max-width:100%;
    overflow:auto;
    width:150px; height:150px;
    border-radius: 150px;
    border-width: 5px; border-color:black; border-style: solid;
    display:flex;
    box-shadow:5px 5px 5px #A9A9A9;
    background-color: #FFFFFF;
    z-index:3;
    position:absolute;
    text-align:center;
    justify-content:center;
    align-items:center;
    }

    .largecircle p {
    font-size:17px; font-family:Aileron; font-weight: bold;
    vertical-align:middle;
    }

    .back {
    left:10px; bottom:10px;
    margin-top:auto;
    background-color: #000000;
    }

    .back img {
    margin:auto;
    }

    .back a {
    margin:auto;
    }

    .smallcircleleft {
    left:-20px; top:0; bottom:0;
    margin-top:auto; margin-bottom:auto;
    }

    .smallcircleupleft {
    top:10px; left:10px;
    margin-right:auto;
    }

    .smallcircleup {
    top:-20px; left:0; right:0;
    margin-left:auto; margin-right:auto;
    background-color: #FFFFFF;
    }

    .smallcircleupright {
    top:10px; right:10px;
    margin-left:auto;
    background-color: #FFFFFF;
    }

    .smallcircleright {
    right:-20px; top:0; bottom:0;
    margin-top:auto; margin-bottom:auto;
    background-color: #FFFFFF;
    }

    .smallcirclerightdown {
    right:10px; bottom:10px;
    margin-top:auto; margin-bottom:auto;
    background-color: #FFFFFF;
    }

    .smallcircledown {
    bottom:-20px; left:0; right:0;
    margin-left:auto; margin-right:auto;
    background-color: #FFFFFF;
    }
    [/CODE]

    The JavaScript:

    [CODE]
    $(“#JSlc”).click(function() {
    $(“#WMWlc”).animate({“opacity”:”0″},500);
    $(“#WEAlc”).animate({“opacity”:”0″},500);
    $(“#unemploymentlc”).animate({“opacity”:”0″},500);
    $(“#CRlc”).animate({“opacity”:”0″},500);
    $(“#logo”).animate({“opacity”:”0″},500);

    var l = ($(window).width() – $(“#JSarea”).width()) / 2;
    var t = ($(window).height() – $(“#JSarea”).height()) / 2;

    $(“#JSarea”).animate({‘zoom’:1.8},400);
    $(“#JSarea”).animate({‘top’: t + ‘px’, ‘left’: l + ‘px’});

    $(“#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);
    });
    });
    [/CODE]

    to post a comment
    JavaScript

    3 Comments(s) ↴

    Copy linkTweet thisAlerts:
    @SempervivumDec 31.2015 — Interesting task. I created a test page using your code. At first only the large circle was visible, not the smaller ones. I found out that the smaller ones have the property opacity:0. When I removed this, they got visible.

    Unfortunately the circles do not react an click. Did you already get this running or is this part of your problem?
    when I use the zoom property it shifts everything off screen instead of staying put.[/QUOTE]To fix this I recommend to create a second version of the circle, position this absolutely and center and zoom this one.
    Copy linkTweet thisAlerts:
    @SempervivumDec 31.2015 — PS:Unfortunately the circles do not react an click.[/QUOTE]Didn't execute the javascript at DOM ready. Works fine now. This fixes the problem regarding visibilty too.

    All the circles move and zoom together. Is this what you intended or is this your problem?
    Copy linkTweet thisAlerts:
    @cregauthorJan 01.2016 — I have decided to abandon zoom all together. it is way to unpredictable when combined with moving the object. Zoom by itself works great but as soon as I move the object anywhere the zoom acts erratic. I have decided to manually zoom each element and font through javascript by multiplying heights and widths by 1.8 (my desired zoom) and increase fonts as desired. I will mark this one solved for now and show my code in hopes it saves someone else the trouble of trying to get zoom and move to work together.

    [CODE]
    $(document).ready(function() {
    $("#JSlc").click(function() {
    $(this).parent().siblings().animate({"opacity":"0"},300);

    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";



    $('#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);
    $('.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);

    $('.scp').animate({'font-size': nfsc},400);
    $('.lcp').animate({'font-size': nflc},400);

    $("#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);
    });
    });

    $(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";

    //$("#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);

    $('.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);
    $('#JSarea').delay(1700).animate({'height': $('#JSarea').height()/1.8, 'width': $('#JSarea').width()/1.8, 'top': t + 'px', 'left': l + 'px'},400);

    $('.scp').delay(1700).animate({'font-size': nfsc},400);
    $('.lcp').delay(1700).animate({'font-size': nflc},400);

    $(this).parent().siblings().delay(1800).animate({"opacity":"1"},500);
    });
    });
    [/CODE]
    ×

    Success!

    Help @creg spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.16,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...