javascript - JQuery Arrow key slider thing -


okay, sorry title, not think of call it.

i'm designing smart tv interface in html5 , javascript. i've got far div full of fake movie names (for testing purposes). don't think it's running, here's demo: https://xviuw-cheapskate01.c9.io/ .

what want detect if selected div in between 3rd-to-first div of it's class , 3rd-to-last div of it's class. if is, want entire containing div's left value move -230px.

i worked out equation. though didn't work, should idea.

(index - 2) * -220 + "px"

i've tried many things, none of them working.

here's code.

js:

var selected;  $(document).ready(function() {   $(".movie-section .movie:nth-child(1)").addclass("movie-selected");   selected = $(".movie-selected");    $('html').keydown(function(e){     if (e.keycode == 39) {       if (selected.is($(".movie-section .movie:last-child"))) {        } else {         $( ".movie-selected + .movie" ).addclass("movie-selected");         $( selected ).removeclass("movie-selected");         selected = $(".movie-selected");        }     }      if (e.keycode == 37) {       if (selected.is($(".movie-section .movie:nth-child(1)"))) {        } else {         $( ".movie-selected" ).prev().addclass("movie-selected");         $( selected ).removeclass("movie-selected");         selected = $(".movie-selected");       }     }   });  });

html:

<!doctype html> <html ng-app="homeapp">     <head>         <link rel="stylesheet" href="css/style.css" type="text/css" />         <title>xviuw</title>         <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>         <script type="text/javascript" src="js/parallax.min.js"></script>         <script type="text/javascript" src="js/angular.min.js"></script>         <script type="text/javascript" src="js/main.js"></script>     </head>     <body>         <div class="parallax-window" data-parallax="scroll" data-image-src="img/blurcity.png"></div>         <div ng-controller="controller controller">             <header class="headerbar">              </header>             <div class="movie-section">                 <div ng-repeat="movie in movies" class="movie">                     <div class="thumbnail">                          <img ng-src="{{ movie.cover }}">                          <p class="title">{{ movie.name }}</p>                         <p>{{movie.rating}}</p>                         <p>{{movie.length}}</p>                     </div>                 </div>             </div>         </div>     </body> </html>

css:

@import url(https://fonts.googleapis.com/css?family=roboto); @font-face {     font-family: 'material icons';     font-style: normal;     font-weight: 400;     src: url(../fonts/materialicons-regular.ttf); }  body, html {     width: 100%;     height: 100%;     font-family: 'roboto', sans-serif;     margin: 0; }  .parallax-window {     min-height: 100%;     background: transparent; }  .headerbar {     width: 100%;     height: 100px;     position: fixed;     top: 0;     box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); }  .movie-section {     height: 200px;     position: fixed;     top: 140px;     left: 0;     white-space: nowrap;     font-family: 'roboto', sans-serif;     -webkit-transition: left 300ms, right 300ms;     transition: left 300ms, right 300ms; }  .movie {     margin: 0 10px;     width: 180px;     height: 180px;     padding: 10px 20px;     text-align: center;     color: white;     display: inline-block;     border-radius: 2px;     -webkit-transition: background 150ms;     transition: background 150ms; }   .movie-selected {     background: white;     color: #5f5f5f; }  .movie-selected:hover {     background: white !important; }  .title {     text-overflow: ellipsis;     width: 175px;     white-space: nowrap;     overflow: hidden; }  .movie:hover {     background: rgba( 0, 0, 0, 0.4); }  .thumbnail > img {     width: 160px;     height: 100px; }  .thumbnail > p {     margin: 0; }  .material-icons {     font-family: 'material icons';     font-weight: normal;     font-style: normal;     font-size: 24px;  /* preferred icon size */     display: inline-block;     width: 1em;     height: 1em;     line-height: 1;     text-transform: none;     letter-spacing: normal;     word-wrap: normal;   white-space: nowrap;   direction: ltr;    /* support webkit browsers. */   -webkit-font-smoothing: antialiased;   /* support safari , chrome. */   text-rendering: optimizelegibility;    /* support firefox. */   -moz-osx-font-smoothing: grayscale;    /* support ie. */   font-feature-settings: 'liga'; }

what need add it?


Comments

Post a Comment

Popular posts from this blog

1111. appearing after print sequence - php -

morning, i have code takes string of shoe sizes, explodes , puts in table. code works , info displayed correctly on page after table there few 1's after table. i'm confused this. so table looks (in columns of 3 on webpage) available in following sizes: 3 4 5 6 9 10 111 here's codes, purpose of example $x = 3|4|6|10|9 function get_sizes_pipe($x) { $counter = 0; $splits = explode("|",$x); asort($splits); $x = print "<table class='greentable'>"; $x .= print "<thead><tr><th scope='col' colspan='3' abbr='starter'>available in following sizes:</th></tr></thead><tbody><tr>"; foreach ($splits $split) { $entry = print "<td>".$split."</td>"; if($counter == 2){ $entry .= print "</tr><tr>"; $counter =0; } else { $counter++; ...
Read more

java - WARN : org.springframework.web.servlet.PageNotFound - No mapping found for HTTP request with URI [/board/] in DispatcherServlet with name 'appServlet' -

this question has answer here: why spring mvc respond 404 , report “no mapping found http request uri […] in dispatcherservlet”? 3 answers i trying making simple bbs i'm encountering following error, warn : org.springframework.web.servlet.pagenotfound - no mapping found http request uri [/board/] in dispatcherservlet name 'appservlet' i have tried solve error many times, have failed. how can solve error? here web.xml, controllerand , servlet-context. my web.xml <?xml version="1.0" encoding="utf-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/xmlschema-instance" xsi:schemalocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <filter> <filter-nam...
Read more

Ruby on Rails, ActiveRecord, Postgres, UTF-8 and ASCII-8BIT encodings -

weirdest error, who’s challenge try , me? spent hours yesterday on , it’s magic. can't believe happening , it's driving me crazy. btw, using: rails 4.2.3 ruby 2.2.3 pg 0.18 encoding.default_internal = encoding.default_external = utf-8 config.encoding = 'utf-8' it has postgres, activerecord , encodings! turns out we’ve been getting these errors whenever create new users on database special characters: encoding::undefinedconversionerror: "\xc3" ascii-8bit utf-8 \xc3 may vary depending on characters. weird part we’ve set since beginning utf-8. makes no sense , digged it, , used script: user.all.each |user| user.attributes.each |name, value| if value.is_a? string puts user.email + name.encoding.to_s + value.encoding.to_s end end end and output of 1 of users, users same: dr_lottahelp@blahblah.comutf-8utf-8 dr_lottahelp@blahblah.comutf-8ascii-8bit dr_lottahelp@blahblah.comutf-8ascii-8bit dr_lottahelp@blahblah.comutf-8asci...
Read more