1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

To to write this part of the script to be better novice readable

Discussion in 'JavaScript' started by ketting00, Apr 13, 2014.

  1. #1
    I picked this up from the internet and after a whole day long trying to dissect the script here's the part I don't understand.
    Code (Text):
    2. $('.wrapper').html('<div id="slice"><div class="pie"></div>'+(percent > 50?'<div class="pie fill"></div>':'')+'</div>');
    How to rewrite it something like this:
    Code (Text):
    2. if (percent > 50) {
    3.    $('#slice').css({
    4.      'clip':'rect(auto,auto,auto,auto)'
    5.    });
    6.    $('#slice').addClass('fill');
    7. }
    The part which I don't understand is <div class="pie fill"></div>. How do you write it in jQuery. (I've tried $('#slice').addClass('pre fill'); a hundred time already.)
    The CSS part of the code:
    Code (Text):
    2. .pie {
    3.    border: 0.1em solid #800;
    4.    position: absolute;
    5.    width: 0.8em;
    6.    height: 0.8em;
    7.    clip: rect(0em,0.5em,1em,0em);
    8.    -webkit-border-radius: 0.5em;
    9.     -moz-border-radius: 0.5em;
    10.        border-radius: 0.5em;
    11.    z-index: 110;
    12. }
    13. .fill {
    14.    -webkit-transform: rotate(180deg) !important;
    15.     -moz-transform: rotate(180deg) !important;
    16.       -o-transform: rotate(180deg) !important;
    17.        transform: rotate(180deg) !important;
    18. }
    They're working as expected when using the code which I don't understand.

    Thank you
    ketting00, Apr 13, 2014 IP
  2. deathshadow

    deathshadow Prominent Member

    Likes Received:
    Best Answers:
    Trophy Points:
    Welcome to what I mean by jQuery being needlessly and pointlessly cryptic AND promoting bad/broken methodologies.

    See the ? and the : inside the working example? That's a conditional.

    alert(true ? '1' : '0'); // will output '1'
    alert(false ? '1' : '0'); // will output '0'

    So the trick is to look at what's being generated for markup (which shouldn't be done) by that jquery crap.

    If it's <= 50 the markup made by that first code would be:
    <div id="slice"><div class="pie"></div></div>

    If it's > 50 the markup made by it is:
    <div id="slice"><div class="pie"></div><div class="pie fill"></div></div>

    ... and that's why your code isn't working, you aren't adding a div called "pie fill", you're adding a class to an existing element; the parent of both. NOT that I grasp what the devil it needs two DIV.pie for in the first place... Or why you'd be doing this client-side with only 50% accuracy... or why it seems to be screwing around with 'clip' ...

    Could you put a copy up live somewhere or even just screencaps of what you want it to do? I've got the feeling that whatever it is you're attempting to do here, it could be done far, far, far simpler.

    ... and if that's being updated client-side due to percent changing, getting rid of the content generation (which basically uses innerHTML) would probably help the performance of it.

    Really I think I'd need to see more to advise further.
    deathshadow, Apr 13, 2014 IP
  3. ketting00

    ketting00 Active Member

    Likes Received:
    Best Answers:
    Trophy Points:
    Thank for response.
    What's a clever coding. I haven't seen something like this before.

    Here's what I'm trying to do. I've cut off all unnecessary elements:
    Code (Text):
    2. <div class="wrapper">
    3.    <div class="circle">
    4.      <a href="#"><img src="<?php echo the_image(); ?>" alt="" /></a>
    5.    </div>
    6.    <div id="slice" class="gt50">
    7.      <div class="pie"></div>
    8.    </div>
    9. </div>
    The JQuery:
    Code (Text):
    2. var timer;
    3. var timerFinish;
    4. var timerSeconds;
    5. function drawTimer(percent){
    6.    // uncomment this and comment or remove the if condition below and the border line goes in circle
    7.    // $('.circle-wrapper').html('<div id="slice"'+(percent > 50?' class="gt50"':'')+'><div class="pie"></div>'+(percent > 50?'<div class="pie fill"></div>':'')+'</div>');
    10.    var deg = 360/100*percent;
    11.    $('#slice .pie').css({
    12.      '-webkit-transform':'rotate('+deg+'deg)',
    13.      '-moz-transform':'rotate('+deg+'deg)',
    14.      '-o-transform':'rotate('+deg+'deg)',
    15.      'transform':'rotate('+deg+'deg)'
    16.    });
    17.    // This is what I'm trying to make it worked without success
    18.    if (percent > 50) {
    19.      // I removed the #slice.gt50 selector and replace it with this
    20.      $('#slice .pie').css({
    21.        'clip':'rect(0em,0.5em,1em,0em)'
    22.      });
    23.      $('#slice').addClass('fill');
    24.    }
    25. }
    27. function stopTimer(){
    28.    var seconds = (timerFinish-(new Date().getTime()))/1000;
    29.    if(seconds <= 0){
    30.      clearInterval(timer);
    31.      launching_nuclear_strike();
    32.    }else{
    33.      var percent = 100-((seconds/timerSeconds)*100);
    34.      drawTimer(percent);
    35.    }
    36. }
    37. $(document).ready(function(){
    38.    (function startTimer() {
    39.      timerSeconds = 10;
    40.      timerFinish = new Date().getTime()+(timerSeconds*1000);
    41.      timer = setInterval('stopTimer()',50);
    42.    })();
    43. });
    The CSS:
    Code (Text):
    2. .wrapper {
    3.    position: absolute;
    4.    font-size: 65px;
    5.    width: 1em;
    6.    height: 1em;
    7. }
    8. .circle {
    9.    width: 50px;
    10.    height: 50px;
    11.    position: absolute;
    12. }
    13. .circle img {
    14.    width: 50px;
    15.    height: 50px;
    16.    border-radius: 50px;
    17. }
    18. #slice {
    19.    position: absolute;
    20.    width: 1em;
    21.    height: 1em;
    22.    clip: rect(0px,1em,1em,0.5em);
    23. }
    24. /* In practice I'd remove the below selector */
    25. #slice.gt50 {
    26.    clip: rect(auto, auto, auto, auto);
    27. }
    28. .pie {
    29.    border: 0.1em solid #c0c0c0;
    30.    position: absolute;
    31.    width: 0.8em;
    32.    height: 0.8em;
    33.    clip: rect(0em,0.5em,1em,0em);
    34.    -webkit-border-radius: 0.5em;
    35.     -moz-border-radius: 0.5em;
    36.        border-radius: 0.5em;
    37. }
    38. .fill {
    39.    -webkit-transform: rotate(180deg) !important;
    40.     -moz-transform: rotate(180deg) !important;
    41.       -o-transform: rotate(180deg) !important;
    42.        transform: rotate(180deg) !important;
    43. }
    It's a circular progress bar. On his web site the author appends a percentage count to the window. In my project I want it to circle round a static object, say an image. If you make the progress bar transparent you'd see 2 moving parts working in sequence.

    My condition is do not append an object to the window (use z-index instead). So this is a challenge. If success I could begin to launch a nuclear strike simultaneously with the ending of the progress bar ;)

    The link: http://blakek.us/labs/jquery/css3-pie-graph-timer/
    Last edited: Apr 13, 2014
    ketting00, Apr 13, 2014 IP
  4. deathshadow

    deathshadow Prominent Member

    Likes Received:
    Best Answers:
    Trophy Points:
    IF I'm grasping what it is you are trying to do (Not sure I am) --- a simple 0.1em wide line that rotates inside the container... you got WAY too compilcated for your own good on this; not exactly surprising with the steaming train wreck of nonsense known as jQuery involved. You have static markup of scripting only elements, far, FAR too much playing with scripting on this, and far too much CSS for something so simple as well.

    I'm really not sure why the 50% mark is your breakpoint... could you explain that better or put a live copy up of what you have working so I can see what you are trying to do here?

    With CSS3 on the table, you might even be able to ditch almost ALL the CSS and most of those DIV for nothing in the markup if you don't care about IE9/earlier. Since you're already using transform, that's really not a big change.

    Though yeah, the original code of constantly flushing child nodes and then building child nodes with what for all intents and purposes is innerHTML is REALLY bad. Entirely what I expect from jQuerytards though.

    Part of why I don't advocate the use of the fat bloated train wreck of idiocy known as jQuery in the first place.
    deathshadow, Apr 13, 2014 IP
  5. ketting00

    ketting00 Active Member

    Likes Received:
    Best Answers:
    Trophy Points:

    I've updated the data. So you could see the link where I get the code from.
    No, I don't care about IE9 and its predecessors. I would css it in another way. I don't want to use jquery, but this is a wordpress theme. So be it. Wordpress obviously fond of jquery.

    This is a second day attempt. If fail again I would ditch it. But this thing is tempting. It's nice to have it on a wordpress site.

    Thank you,
    ketting00, Apr 13, 2014 IP
  6. ketting00

    ketting00 Active Member

    Likes Received:
    Best Answers:
    Trophy Points:
    Ha! Got it worked. Now that it's simple.
    ketting00, Apr 13, 2014 IP