html - Real time agenda with javascript and json -

-

i have div on website needs real time agenda list of events. have events loaded through json file , using javascript populate div data file.

the problem data displays stacked item item in 1 column within div, need split div 3 separate columns/divs. 1 events happening now, next, , coming soon. ex) 1 event @ 7am, next 7:30, , coming 8am.

but not able select each item , move using css since code populates 1 item upon page load , cannot see index each item (video side content item) on , on display events necessary.

this lot easier if format items being populated 3 separate columns through css, can't figure out how this.

by way site written using flexbox, hence why there "row" in 1 of divs.

also can please point in right direction how real time? or other helpful solution achieve this?

thanks in advance help.

picture of i'm trying do

function populate data

function agendarealtimeupdate() {     if ($('.real-time-agenda').length !== 0) {         videosidecontenttype = 'agenda';         $.getjson("ac.json", function(data) {             var sessions = data.session;             var contentstring = '';             var currentsessionindex;             var currentsession;             var currenttime;             var currentday;             var title;             var time;             var room;             var description;             var d;             var = 0;              d = new date();              //gets current time , returns in string 3-4 digits ex: "1000" = 10              currenttime = parseint(d.gethours().tostring() + ((d.getminutes() < 10 ? '0' : '') + d.getminutes()).tostring());              currentday = d.getdate();              // loop runs long haven't figured out session matches time             while (currentsessionindex === undefined && < sessions.length) {                  //this takes current time , compares sessions start , end times                 if ((currenttime >= sessions[i].starttime && currenttime <= sessions[i].endtime) &&                      currentday === sessions[i].day &&                      sessions[i].track === "none")                  {                         currentsessionindex = i;                 }                  i++;             }              if (currentsessionindex === undefined) {                 currentsessionindex = 0;             }              // function finds sessions come after identified current session             function findnextsessions() {                 var sessionscopy = sessions.slice(); //make copy of sessions array aren't altering when remove indexes                  (var z = 0; z < 2; z++) {                     var index = currentsessionindex + z;                       // breaks out of loop if next session undefined                     if (sessionscopy[index] === undefined) {                         z = 2;                     }                      currentsession = sessionscopy[index];                      // loops through sessions , if session has track removed sessionscopy array                     while (currentsession.track !== "none") {                         console.log('has track: ' + currentsession.track);                         sessionscopy.splice(index, 1);                         currentsession = sessionscopy[index];                     }                      time = currentsession.timestring !== undefined ? "<div class='video-side-content__time'><b>time:</b> " + currentsession.timestring + "</div>" : '';                      room = currentsession.room !== undefined ? "<div class='video-side-content__room'><b>room:</b> " + currentsession.room + "</div>" : '';                     title = currentsession.title !== undefined ? "<div class='video-side-content__secondary-title'>" + currentsession.title + "</div>" : '';                      description = currentsession.content !== undefined ? "<div class='video-side-content__content'>" + currentsession.content + "</div>" : '';                     contentstring += "<div class='video-side-content__item'>" + time + room + title + description + "</div>";                  }             }             findnextsessions();             $('.real-time-agenda').html(contentstring);         });     } }

div i'm working with

 <div class="row__item">     <h2 class="video-side-content__title"><img src="img/agenda-icon.png">&nbsp;thursday. sept. 22</h2>     <div class="row__flex-container">       <div class="row__item video-side-content__strip video-side-content__strip-left"> </div>       <div class="row__item video-side-content__row">         <div class="video-side-content">           <div class="video-side-content__items">             <div class="video-side-content__item">               <h2 class="count-down__sub-header"><br>                 showing now</h2><br>               <div class="real-time-agenda">                 <!--data populates upon page load json file                     lays data out as: time, title, room, description-->                </div>               <br>             </div>           </div>         </div>       </div>     </div>   </div>


Comments

Post a Comment

Popular posts from this blog

javascript - Slick Slider width recalculation -

-
i'm trying add slide in panel on slick container css. carousel works except new width not being calculated when space has been added. recalibrate once advance next slide i'd happen each time panel opened or closed. i've tried adding both margin , padding, neither makes difference. ideas? https://jsfiddle.net/mhigley/dpf7mlpl/ html: <button type="button" id="button"><i class="fa fa-arrow-right"></i></button> <aside> <h2>slide in panel</h2> <ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol> </aside> <main role="main"> <div class="sections"> <section> <article> <h2>first slide</h2> <p>lorem ipsum d...
Read more

jsf - PrimeFaces Datatable - What is f:facet actually doing? -

-
looking through primefaces code in app noticed following line: <f:facet name="header">#{trainsearch.traincount} trains</f:facet> it looks overriding header, makes sense, can explain me in little more detail? what happening line of code? complete code listed below: <p:datatable id = "results" value = "#{trainsearch.trains}" var = "train" rendered="#{not empty trainsearch.trains}" styleclass = "train-search-table horizontal-border"> <f:facet name="header">#{trainsearch.traincount} trains</f:facet> <p:column headertext = "train id"> <p:panelgrid columns="1" styleclass = "train-id-grid" layout = "grid"> <h:outputtext styleclass = "train-id-label" value="#{train.traini}"/> <h:outputtex...
Read more

angular2 services - Angular 2 RC 4 Http post not firing -

-
i trying fire post request app , it's not working, tried multiple ways. don't see request being fired under network tab in chrome. not sure problem is, appreciated. import { injectable } '@angular/core'; import { http, headers } '@angular/http'; @injectable() export class userservice{ private _url="users"; constructor(private _http: http){ } checkifusernameexists(username){ return this._http.get(this._url+"/"+username) .map(response => response.json()) } createuser(user){ let headers = new headers(); headers.append('content-type', 'application/json') console.log(json.stringify(user)); return this._http.post(this._url, json.stringify(user),{headers: headers}) .map(response => response.json()) } } first need capture error , solve error: this._http.post(this._url, json.stringify(user),{headers: headers}) .subscribe( ...
Read more