Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript How to do this !

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #157436
    Dave Hallett
    Participant

    Good afternoon.

    Just wondering on the best way of going about this situation.

    Please look at this link for guidance.

    I would like to have all items in the green bar made into html. So the green arrows on the time bar will snap to each time increment, calendar popup when date input is selected.

    Any help would be really appreciated :)

    #157479
    isra26
    Participant

    this is not a full solution but it might give you an idea. Plus you’ll need to implement perhaps a jquery plugin to use the slider function or write your own.

    <div class="main">
      <div class="date">
        Wednesday <br />
        <small>4th December</small>
      </div>
      <ul class="time">
        <li>6am</li>
        <li>7am</li>
        <li>8am</li>
        <li>9am</li>
        <li>10am</li>
      </ul>
      <div class"calendar">
        <textarea name="" id="" cols="30" rows="4"></textarea>
        <button class="changeDate">Change Date</button>
      </div>
    </div>  
    

    and the css:

    .main
    {
      background: green;
      color: white;
      min-height: 50px;
      padding: 20px;
    }
    
    .date
    {
      margin: 10px 30px 10px 10px;
      float: left;
    }
    
    .time
    {
      float: left;
      margin-right: 40px;
    }
    
    .time li
    {
      display: inline-block;
      margin-left: 20px;
    }
    
    .changeDate
    {
      background: rgba(0,0,0,0.7);
      border: none;
      width: 150px;
      height: 60px;
      float: rigth;
      position: relative;
      top: -25px;
      color: white;
      border-radius: 5px;
      font-size: 20px;
      cursor: pointer;
    }
    
    #157672
    Dave Hallett
    Participant

    Thanks @isra26 for the reply. But it’s not the html/css I am worried about. More the javascript.

    #157730
    isra26
    Participant

    oh! I see, I was going by what you have posted on your question: “I would like to have all items in the green bar made into html”

    Once you have the html figure it out and of course after you have organized it with JS in mind then you could target each id or class depending how you choose to organized the html. You could use jQuery to move the arrow, not sure how this app supposed to work; I see you can pick the date and I guess you just slide the arrow to the desired time?. But then what? Do you capture the time or store the time for later use?
    the date it’s just a matter of using the date picker from jQuery or any other plugin. Based on what you have here if you just want to slide the arrows to a specific point you could just use a slider.

    http://jqueryui.com/slider/

    of course there are many more fancy ones out there for you to use. The thing that I would be thinking about is what to do once you have slide the arrow to a specific point?, like I said do you want to capture that value and use it later? if not, then you could just use an image for the time, although I see you have scroll arrows right and left so I assume this is not a static element.

    This one is a very good sample of how to approach this:

    http://akzhan.github.io/jquery-time-slider/

    Hope that helps.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.