By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,987 Members | 967 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,987 IT Pros & Developers. It's quick & easy.

Can anyone tell me where I am going wrong in the following code?

P: 1
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.  
  6. <style>
  7. #wrapper {
  8.     width: 2200px;
  9.     transform: translate3d(0, 0, 0);
  10.      transition: transform .5s ease-in-out;
  11. }
  12.  
  13. .content {
  14.     float: left;
  15.     width: 550px;
  16.     height: 350px;
  17.     white-space: normal;
  18.     background-repeat: no-repeat;
  19. }
  20. #contentContainer {
  21. ****width: 550px;
  22. ****height: 350px;
  23. ****border: 5px black solid;
  24. ****overflow: hidden;
  25. }
  26. #itemOne {
  27.     background-color: #ADFF2F;
  28.     background-image: url("http://www.kirupa.com/images/blueSquare.png");
  29. }
  30. #itemTwo {
  31.     background-color: #FF7F50;
  32.     background-image: url("http://www.kirupa.com/images/yellowSquare.png");
  33. }
  34. #itemThree {
  35.     background-color: #1E90FF;
  36.     background-image: url("http://www.kirupa.com/images/pinkSquare.png");
  37. }
  38. #itemFour {
  39.     background-color: #DC143C;
  40.     background-image: url("http://www.kirupa.com/images/graySquare.png");
  41. }
  42. #navLinks {
  43.     text-align: center;
  44.     width: 550px;
  45. }
  46.     #navLinks ul {
  47.         margin: 0px;
  48.         padding: 0px;
  49.         display: inline-block;
  50.         margin-top: 6px;
  51.     }
  52.         #navLinks ul li {
  53.             float: left;
  54.             text-align: center;
  55.             margin: 10px;
  56.             list-style: none;
  57.             cursor: pointer;
  58.             background-color: #CCCCCC;
  59.             padding: 5px;
  60.             border-radius: 50%;
  61.             border: black 5px solid;
  62.         }
  63.             #navLinks ul li:hover {
  64.                 background-color: #FFFF00;
  65.             }
  66.             #navLinks ul li.active {
  67.                 background-color: #333333;
  68.                 color: #FFFFFF;
  69.                 outline-width: 7px;
  70.             }
  71.                 #navLinks ul li.active:hover {
  72.                     background-color: #484848;
  73.                     color: #FFFFFF;
  74.                 }
  75.  
  76. </style>
  77. </head>
  78.  
  79. <body>
  80. <div id="contentContainer">
  81.     <div id="wrapper">
  82.         <div id="itemOne" class="content">
  83.  
  84.         </div>
  85.         <div id="itemTwo" class="content">
  86.  
  87.         </div>
  88.         <div id="itemThree" class="content">
  89.  
  90.         </div>
  91.         <div id="itemFour" class="content">
  92.  
  93.         </div>
  94.     </div>
  95. </div>
  96. <div id="navLinks">
  97.     <ul>
  98.         <li class="itemLinks" data-pos="0px"></li>
  99.         <li class="itemLinks" data-pos="-550px"></li>
  100.         <li class="itemLinks" data-pos="-1100px"></li>
  101.         <li class="itemLinks" data-pos="-1650px"></li>
  102.     </ul>
  103. </div>
  104.  
  105. <script>
  106.     // just querying the DOM...like a boss!
  107. var links = document.querySelectorAll(".itemLinks");
  108. var wrapper = document.querySelector("#wrapper");
  109.  
  110. // the activeLink provides a pointer to the currently displayed item
  111. var activeLink = 0;
  112.  
  113. // setup the event listeners
  114. for (var i = 0; i < links.length; i++) {
  115.     var link = links[i];
  116.     link.addEventListener('click', setClickedItem, false);
  117.  
  118.     // identify the item for the activeLink
  119.     link.itemID = i;
  120. }
  121.  
  122. // set first item as active
  123. links[activeLink].classList.add("active");
  124.  
  125. function setClickedItem(e) {
  126.     removeActiveLinks();
  127.     resetTimer();
  128.     var clickedLink = e.target;
  129.     activeLink = clickedLink.itemID;
  130.  
  131.     changePosition(clickedLink);
  132. }
  133.  
  134. function removeActiveLinks() {
  135.     for (var i = 0; i < links.length; i++) {
  136.         links[i].classList.remove("active");
  137.     }
  138. }
  139.  
  140. // Handle changing the slider position as well as ensure
  141. // the correct link is highlighted as being active
  142. function changePosition(link) {
  143.     link.classList.add("active");
  144.  
  145.     var position = link.getAttribute("data-pos");
  146.     var translateValue = "translate3d(" + position + ", 0px, 0)";
  147.     wrapper.style[transformProperty] = translateValue;
  148. }
  149. var transforms = ["transform",
  150.             "msTransform",
  151.             "webkitTransform",
  152.             "mozTransform",
  153.             "oTransform"];
  154.  
  155. var transformProperty = getSupportedPropertyName(transforms);
  156.  
  157. // vendor prefix management
  158. function getSupportedPropertyName(properties) {
  159.     for (var i = 0; i < properties.length; i++) {
  160.         if (typeof document.body.style[properties[i]] != "undefined") {
  161.             return properties[i];
  162.         }
  163.     }
  164.     return null;
  165. }
  166.  
  167. //
  168. // The code for sliding the content automatically
  169. //
  170. var timeoutID;
  171.  
  172. function startTimer() {
  173.     // wait 2 seconds before calling goInactive
  174.     timeoutID = window.setInterval(goToNextItem, 2000);
  175. }
  176. startTimer();
  177.  
  178. function resetTimer() {
  179.     window.clearInterval(timeoutID);
  180.     startTimer();
  181. }
  182.  
  183. function goToNextItem() {
  184.     removeActiveLinks();
  185.  
  186.     if (activeLink < links.length - 1) {
  187.         activeLink++;
  188.     } else {
  189.         activeLink = 0;
  190.     }
  191.  
  192.     var newLink = links[activeLink];
  193.     changePosition(newLink);
  194. }
  195. </script>
  196. </body>
  197. </html>
  198.  
Attached Files
File Type: txt Slider.txt (1.1 KB, 116 views)
Jan 14 '15 #1
Share this Question
Share on Google+
2 Replies


Dormilich
Expert Mod 5K+
P: 8,639
line #21 - #24: CSS properties do not contain stars.
Jan 14 '15 #2

Exequiel
100+
P: 287
delete the asterisk in #contentContainer. it must be
Expand|Select|Wrap|Line Numbers
  1. #contentContainer {
  2.     width: 550px;
  3.     height: 350px;
  4.     border: 5px black solid;
  5.     overflow: hidden;
  6. }
  7.  
if you want to make your #contentContainer a comment use /* */ example:
Expand|Select|Wrap|Line Numbers
  1. #contentContainer {
  2.    /* width: 550px;
  3.     height: 350px;
  4.     border: 5px black solid;
  5.     overflow: hidden;*/
  6. }
  7.  
Jan 14 '15 #3

Post your reply

Sign in to post your reply or Sign up for a free account.