Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Mar 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript "start", "stop" "reset" buttons.

    I'm having a difficult time adding buttons. I've tried several variations to <input id="StartButton" type="button" value="Start"/>, and I can't seem to get it to work properly. I had it working once, but it wouldn't reset. Then I had it working again and the "Start" button would disappear when clicked. lol. I know this is simple, but I've never coded before the last two weeks. Help!



    Edit fiddle - JSFiddle

  • #2
    New to the CF scene
    Join Date
    Mar 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here's the code. You can also click the link for JSFiddle. Currently the script fades in and out one word at a time.

    HTML

    <div class="box">
    <div id="title"><span id="name">Title</span>
    </div>
    <div id="message"></div>
    <div id="greeting">
    <h1><center>This is a test. This is only a test.</center></h1>

    </div>
    CSS

    .box {
    border:1px solid #E38E34;
    background-color: #FFE7BF;
    height:125px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    }
    #title {
    margin:5px;
    border-bottom:1px solid #E38E34;
    color:#C46908;
    font-weight:bold;
    }
    #message {
    margin:5px;
    }
    center {
    font-size: 50px;
    }
    Script

    var h1 = $('div#greeting h1');

    h1.hide().contents().each(function () {
    var words;
    if (this.nodeType === 3) {
    words = '<span> ' + this.data.split(/\s+/).join(' </span><span> ') + ' </span>';
    $(this).replaceWith(words);
    } else if (this.nodeType === 1) {
    this.innerHTML = '<span> ' + this.innerHTML.split(/\s+/).join(' </span><span> ') + ' </span>';
    }
    });

    h1.find('span').hide().each(function () {
    if (!$.trim(this.innerHTML)) {
    $(this).remove();
    }
    });

    h1.show().find('span').each(function (i) {
    $(this).delay(600 * i).fadeIn(200).fadeOut(200);
    });

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,081
    Thanks
    23
    Thanked 592 Times in 591 Posts
    There is NO question here and no link to JSFiddle.
    Do you just want us to look at the awesomeness of this code or do you have a question?
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,623
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    There is a link to JSFiddle in the first post. But I don’t see any indication of “start”, “stop”, or “reset” there so I, too, have no idea what’s the problem.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •