JavaScript Reference Links

Exercises to do:
https://www.w3resource.com/javascript-exercises/

Wrap content in tags


<script>
$(document).ready(function(){
$( ".offer" ).wrap( "<a href='/toys/closing-down-sale'></a>" );
});
</script>

Replace class at specific time


<script>
$(document).ready(function(){
  var d = new Date();
  var n = d.getHours();
  if (n > 19 || n < 6)
    // If time is after 7PM or before 6AM, apply night theme
    document.body.className = "night";
        //document.getElementById("christmasHubGradient").className += " day";
  else if (n > 16 && n < 19)
    // If time is between 4PM – 7PM could use for northern lights theme
    document.body.className = "night";
  else
    // Else use ‘day’ theme
    document.body.className = "day";
});

</script>

Turn on and off content a specific time


<script>

$( document ).ready(function() {

  var current = new Date();
  var start = new Date("January 20, 2018 18:00:00");
  var expiry = new Date("January 25, 2018 09:00:00");

  if((current.getTime() > start.getTime()) && (current.getTime() < expiry.getTime())){
    $('#ADD-ID').show();
  }
});
  
</script>

...

<div id="ADD-ID" style="display:none">
<div class="">
    <p>Swow this content.</p> 

</div>
</div>

Half slider / 4 promo slots HTML



<!--homepage section-->
<section class="category-section category-section-2018">
  
<!--Slider section - Note, Not Flexbox as Owl carousel is incompatible -->     

<section class="category-section-2018" >  
<div class="wrapper ">
<div class="content category-top-left">
    <section class=" category-top-slider  homepage-slider flex-box-slider-width" data-carousel-options='{ "autoplay": true, "autoplayHoverPause": true, "autoplayTimeout": 5000, "responsive": { "0": { "items": 1 }, "1024": { "items": 1  }, "1500": { "items": 1 } } }'>
    <!--<section class="category-top-slider  homepage-slider" data-carousel-options='{ "autoplay": true, "autoplayHoverPause": true, "autoplayTimeout": 6000 }'> -->   
        <div id="homepage" class="owl-carousel slider-bg-black owl-loaded owl-drag">

               <div>
                    <a href="###">
                        <img src="http://placehold.it/920x544"
                        alt=" " >
                    </a>
                </div>            
            
               <div>
                    <a href="###">
                        <img src="http://placehold.it/920x544"
                        alt=" " >
                    </a>
                </div>                       
            
<!--
               <div>
                    <a href="###">
                        <img src="http://placehold.it/920x300"
                             
                        srcset="http://placehold.it/920x544 696w,
                                
                        http://placehold.it/920x544 920w"
                        alt=" " >
                    </a>
                </div>          
-->
                           
            </div>
      </section>
</div>

<div class="category-top-right homepage-h2 -centered">
<h2 class="display-mobile">Shop by Console</h2>    

<div class="grid-2 -min-half">
    <div>
        <a href="###"><img src="http://placehold.it/514x344" alt="Xbox" class=""></a>  
    </div>
    <div>
        <a href="###"><img src="http://placehold.it/514x344" alt="" class=""></a>   
    </div>
    <div>
        <a href="###"><img src="http://placehold.it/514x344" alt="" class=""></a>  
    </div>
    <div>
        <a href="###"><img src="http://placehold.it/514x344" alt="" class=""></a>   
    </div> 
</div>    
    
    
</div>
</div>
</section>
       
<!-- AGE buttons -->

<section class="homepage-h2 -centered">
    <div class="wrapper">

        <h2>Shop All by Age</h2>
                        

<div class="">
<div class="wrapper age-buttons">

      <div class="grid-4 -min-half">
        <div class="no-border-age"><a href="/toys/browse/video-games/_/N-4294949817+102878?fv=Age%200-2&ab=tru-video-games:age:2-4"><button class=" -primary age-button">2-4 Years</button></a></div>
        <div class="no-border-age"><a href="/toys/browse/video-games/_/N-4294949816+102878?fv=Age+2-4&ab=tru-video-games:age:5-7"><button class=" -primary age-button">5-7 Years</button></a></div>
        <div class="no-border-age"><a href="/toys/browse/video-games/_/N-4294949814+4294949806+102878?fv=Age+5-7&ab=tru-video-games:age:8-14"><button class=" -primary age-button">8-14 Years</button></a></div>
        <div class="no-border-age"><a href="/toys/browse/video-games/_/N-4294949800+102878?fv=Age+8%20And%20Over&ab=tru-video-games:age:8-over"><button class=" -primary age-button">BIG Kids</button></a></div>
      </div><!-- end grid 4 -->
      
    </div><!-- end wrapper -->
  </div><!-- end slice -->                        
                        
</div>
</section>

<!-- END AGE buttons --> 
   
   
</section><!-- Main homepage section close-->

<!--2018 homepage layout styling-->

<style type="text/css">
  
/*TOP SLIDER*/
.category-section-2018 .category-top-left {width: 49%; float: left; padding-right: 2%;}
.category-section-2018 .category-top-right {width: 49%; float: left;}

.category-section-2018 .homepage-slider .owl-dots {padding: 0px 20px 18px 0px; text-align: center;}

.category-section-2018 .homepage-slider { background: #0061B3 !important;} 
    
.category-section-2018 .homepage-slider .owl-dots > .owl-dot > span {border: 2px solid white; }
    
.category-section-2018 .padding-bottom-20 {padding-bottom: 20px;}
.category-section-2018 .padding-bottom-24 {padding-bottom: 24px;}
.category-section-2018 .padding-bottom-23 {padding-bottom: 23px;}
    
/*.category-section-2018 .home-page-2018-hero.homepage-slider .owl-dots > .owl-dot.active > span {border-width: 5px !important;}*/
    
.owl-dots > .owl-dot.active > span {border-width: 5px !important;}
    
/*H2 styling*/

.category-section-2018 .homepage-h2 h2 {
    background: white;
    /*width: 275px;*/
    padding: 20px;
    margin: auto;
    font-weight: bold !important;
    font-size: 28px !important;
}

/*Featured age buttons*/
    
.category-section-2018 .-centered.background-age {
    background: black;
    background: url(http://news.toysrus.co.uk/custloads/761829732/Aug-2017/repeat-new-in-005a.jpg);
}
    
.category-section-2018 .background-age h2 {
    background: white;
    width: 275px;
    padding: 20px;
    margin: auto;
    font-weight: bolder !important;
    font-size: 28px !important;
}
    
/*Other Buttons */
    
.category-section-2018 .category-section .large-button {font-size: 20px !important;}
.category-section-2018 .category-section .medium-button {font-size: 16px !important;}
.category-section-2018 .category-section .small-button {font-size: 14px !important;}
    
/*Smaller Categories scroller styling*/
.category-section-2018 .wrapper.cat-slider-background {padding: 0 !important;}
.category-section-2018 .cat-slider-background {background: white;}
.category-section-2018 .cat-slider-background .owl-dots {margin: 0px 0px !important;}
/*.cat-slider-background .owl-nav {display: none !important;}*/
.category-section-2018 .cat-slider-background .owl-dots > .owl-dot { display: none !important;} 
    
.category-section-2018 .cat-slider-background .owl-nav .owl-next {
    right: 20px;
    background: transparent url(/ux-custom/themes/tru/uk/responsive/images/chevron-right@2x.png) 0 0 no-repeat;
}
    
.category-section-2018 .cat-slider-background .owl-nav .owl-prev {
    left: 20px;
    background: transparent url(/ux-custom/themes/tru/uk/responsive/images/chevron-left@2x.png) 0 0 no-repeat;
}
    
.category-section-2018 .cat-slider-background .owl-nav {
max-width: 100% !important;
}    
 
.category-section-2018 .cat-slider-background .owl-nav .owl-prev, .category-section-2018 .cat-slider-background .owl-nav .owl-next {
    top: 62%; }
   
/* Homepage top hero slider */
    
.category-section-2018 .homepage-slider .owl-nav .owl-prev, .category-section-2018 .homepage-slider .owl-nav .owl-next {
    width: 30px;
    height: 30px;
    top: 89%;
    margin-top: 0px;
}
    
.category-section-2018 .homepage-slider #homepage .owl-nav .owl-next {
    right: 0px;
    background: transparent url(http://news.toysrus.co.uk/custloads/761829732/September2017/brand-ad/homepage-slider-right-2018-001.png) 0 0 no-repeat !important;
}
    
.category-section-2018 .homepage-slider #homepage .owl-nav .owl-prev {
    left: 0px;
    background: transparent url(http://news.toysrus.co.uk/custloads/761829732/September2017/brand-ad/homepage-slider-left-2018-001.png) 0 0 no-repeat !important;
}    
    
.category-section-2018 .homepage-slider #homepage .owl-nav {
    margin: 0 auto;
    max-width: 90%;}    
    

.category-section-2018 .category-slider.trending-cat-homepage .owl-nav .owl-prev, .category-section-2018 .category-slider.trending-cat-homepage .owl-nav .owl-next {
    background-color: none !important;
    border-radius:  none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}   
    
.category-section-2018 .category-slider.trending-cat-homepage .owl-nav .owl-next {
    right: 15px;
    background-position: 0px 50% !important;
}   

.category-section-2018 .category-slider.trending-cat-homepage .owl-nav .owl-prev {
    left: 15px;
    background-position: 0px 50% !important;
}    
    

/*Button Styling*/    
.category-section-2018 .-black-button{
    background: black;
    background: -webkit-gradient(linear, left top, left bottom, from(black), to(#363636)) !important;
    background: linear-gradient(black 0%, #363636 100%) !important;
    
}    

.category-section-2018 .-black-button:hover {
    background: black;
    background: -webkit-gradient(linear, left top, left bottom, from(#363636), to(black)) !important;
    background: linear-gradient(#363636 0%, black 100%) !important;
    
}    

.category-section-2018 .-dark-red-button{
    background: #7e0c0c;
    background: -webkit-gradient(linear, left top, left bottom, from(#7e0c0c), to(#ba3b3b)) !important;
    background: linear-gradient(#7e0c0c 0%, #ba3b3b 100%) !important;
    
}    

.category-section-2018 .-dark-red-button:hover {
    background: #7e0c0c;
    background: -webkit-gradient(linear, left top, left bottom, from(#ba3b3b), to(#7e0c0c)) !important;
    background: linear-gradient(#ba3b3b 0%, #7e0c0c 100%) !important;
    
}    
       
.category-section-2018 .age-button{width: 100% !important; font-size: 22px !important;}

.category-section-2018 .clear-divider {padding-top: 10px;}  

.category-section-2018 .image-border-radius img {border-radius: 12px;}

/*D&A Grid overrides*/
@media screen and (max-width: 800px){
.grid-3.-min-half > *{width: 48.5%; margin: 0 0.5% 15px;}
.grid-3.-min-half > *:nth-child(2n){margin-right: 0;}   
.grid-3 > * {width: 48.5%; margin: 0 .5% 15px;}
}   
 
@media screen and (max-width: 600px){

}

    
@media screen and (max-width: 499px){
.grid-3.-min-half > *{width: 48%; margin: 0 1% 15px;}

}  
    
a img:hover{opacity: 0.8;}    
  
.category-section-2018 {padding-top: 30px;}    

.category-section-2018 .category-top-slider.homepage-slider .owl-nav .owl-prev {
    left: 10px;
    background: transparent url(http://news.toysrus.co.uk/custloads/761829732/September2017/2017x09x21-bru-sale/icon-arrow-left-white-lrg-001.png) 0 0 no-repeat !important;
}    

.category-section-2018 .category-top-slider.homepage-slider .owl-nav .owl-next {
    right: 10px;
    background: transparent url(http://news.toysrus.co.uk/custloads/761829732/September2017/2017x09x21-bru-sale/icon-arrow-right-white-lrg-001.png) 0 0 no-repeat !important;
}   

.category-section-2018 .category-top-slider.homepage-slider .owl-item {opacity: 1; transition-duration: 1s; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s;}    
.category-top-slider .owl-item.center { opacity: 1; background-color: transparent !important; transition-duration: 1s; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s;}    

.category-section-2018 .category-top-slider.homepage-slider {
    background: white;
}    
  
@media screen and (max-width: 1024px){
.category-section-2018 .category-top-slider.homepage-slider .owl-nav {/*max-width: 95% !important;*/ display: none !important;}
.category-section-2018 .category-top-slider .owl-item {opacity: 1 !important;} 
.category-section-2018 .owl-carousel .owl-stage-outer {background: white !important;  }
.category-section-2018 .homepage-slider .owl-dots {padding: 0px 0px 18px 0px; text-align: center;}
}    

/*#sitewide-banner {display: none;}    */
    
/*Display none on mobile*/    
.display-mobile {display: none !important;}    
    
@media screen and (max-width: 920px){
.display-mobile {display: block !important;}
.display-desktop {display: none !important;}
}  

/*2018 Homepage mobile styling*/    

    
@media screen and (max-width:980px) {

/*H2 styling*/
    
.category-section-2018 .homepage-h2 h2 {
    background: white;
    /*width: 275px;*/
    padding: 20px;
    margin: auto;
    font-weight: bold !important;
    font-size: 18px !important;
    line-height: 26px;
}    

.category-section-2018 {padding-top: 0px;}     
    
  
    

/*Top section styling*/    
.category-section-2018 .category-top-left {width: 100%; padding-right: 0%;}
.category-section-2018 .category-top-right {width:100%;}     

}    
    
/*END 1060 Mobile styling*/    

@media screen and (max-width: 920px){

  

/*smallest screen styling*/     
    
@media screen and (max-width:560px) {    
    
}

    
    
</style>

Slanted Banner with HTML text

http://jsfiddle.net/LL5Lq8pf/

    
    
    
<div class="container">

<div class="banner-content">
<h2>
Title text
</h2>
<p>
Offer text
</p>
</div>
<div class="button-pos">
<p class="button">
Click here
</p>
</div>
    <div id="parallelogram">
        <div class="image"></div>
        
    </div>

</div>
   
<style>.container{
    overflow:hidden;
    position:relative;

}
#parallelogram {
    width: 600px;
    height: 300px;

    background: transparent url(http://placehold.it/600x300) 0 0 no-repeat !important;
    overflow:hidden;
    position:relative;
}
.image{

    position:absolute;
        background: red;
    top:0px;
    left:-60px;
    right:300px;
    bottom:0px;
    margin: 0 0 0 0px;
    -webkit-transform: skew(-20deg);
       -moz-transform: skew(-20deg);
         -o-transform: skew(-20deg);

}
.banner-content{    position:absolute; z-index:1; top: 20px; left: 20px;}
.button-pos{position:absolute; z-index:1; bottom: 20px; left: 20px;}
.button{font-size: 18px; background: white; color: red; padding: 12px; font-family: "Open Sans",Arial,sans-serif; border-radius: 12px;}
.banner-content h2, .banner-content p{font-family: "Open Sans",Arial,sans-serif; color: white;}
</style>
    

Scrollable content on mobile

  

<!--homepage section-->
<section class="homepage-section homepage-section-2018">

<!-- Homepage Flexbox container - for mobile ordering (main-homepage-flexbox-container)--> 
    
<div class="main-homepage-flexbox-container">    

<!-- Flexbox slider on mobile - under 920px -->
    
<div class="wrapper-rp -centered homepage-h2 mobile-pos-2">
        
<div class="scrollable-promo-card -centered">

<section class="promo-card grid-4-rp scroller-rp">
    <div class="promo-card-slider-content">
            <a href="###">
                <img alt="" src="http://placehold.it/514x514">
            </a>
    </div>
    <div class="promo-card-slider-content">
            <a href="###">
                <img alt="" src="http://placehold.it/514x514">
            </a>
    </div>
    <div class="promo-card-slider-content">
            <a href="###">
                <img alt="" src="http://placehold.it/514x514">
            </a>   
    </div>
    <div class="promo-card-slider-content">
            <a href="###">
                <img alt="" src="http://placehold.it/514x514">
            </a>   
    </div>
    <div class="promo-card-slider-content">
            <a href="###">
                <img alt="" src="http://placehold.it/514x514">
            </a>   
    </div>
    <div class="promo-card-slider-content">
            <a href="###">
                <img alt="" src="http://placehold.it/514x514">
            </a>
    </div>
    <div class="promo-card-slider-content">
            <a href="###">
                <img alt="" src="http://placehold.it/514x514">
            </a>  
    </div>
    <div class="promo-card-slider-content">
            <a href="###">
                <img alt="" src="http://placehold.it/514x514">
            </a>
    </div>
    

    
</section>
      
</div>
    
    <div class="-centered display-mobile">
            <img alt="" src="/wp-content/uploads/2018/03/icon-scrolling-001.jpg" style="width: 60px; height: 60px;">
    </div>    

<div class="clear-divider"></div>    
    
</div>
    
<!-- END Flexbox slider on mobile - under 920px -->
    

</div><!--END - main-homepage-flexbox-container-->       
       

<div class="clear-divider"></div>

</section><!-- Main homepage section close-->

<!--2018 homepage layout styling-->

<style type="text/css">

/*2018 Homepage mobile styling*/    

/*Flexbox grid 'non-slider' on deskop */   
    
@media screen and (min-width: 920px) {    
    
body .wrapper-rp
{
    margin-left: auto;
    margin-right: auto;
    max-width: 1142px;
    width: auto;
    padding: 0 15px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}    

.grid-4-rp *,.grid-3-rp *
{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}    
 
.grid-4-rp > *,.grid-3-rp > *  {width: 100%;
    margin: 0 0 15px;
    display: inline-block;
    -webkit-box-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
}    

.grid-4-rp > * {
    width: 24.25%;
    margin: 0 .5% 15px;
}

.grid-3-rp > * {
    width: 32.66%;
    margin: 0 .5% 15px;
}    
    
.grid-4-rp,.grid-3-rp {
    display: -webkit-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
} 
    
.grid-4-rp > *:nth-child(4n+1) {
    margin-left: 0;
}    

.grid-4-rp > *:nth-child(4n) {
    margin-right: 0;
}    

.grid-3-rp > *:nth-child(3n+1) {
    margin-left: 0;
}    

.grid-3-rp > *:nth-child(3n) {
    margin-right: 0;
}     
    
}
    
@media screen and (max-width:920px) {

/*Flexbox grid scroller on mobile */ 

.scroller-rp::-webkit-scrollbar {
  /*-webkit-appearance: none;*/
  width: 8px;
/*  height: 8px;*/
}

.scroller-rp::-webkit-scrollbar-thumb {
  background:#0061B5;
  border: thin solid #0061B5;
  border-radius:10px;
  height: 8px;
}    
    
.scroller-rp::-webkit-scrollbar-track {
  background:#eee;
  border: thin solid lightgray;
  box-shadow: 0px 0px 3px #dfdfdf inset;
  border-radius:10px;
}
    
.scroller-rp::-webkit-scrollbar-thumb:horizontal {
  background:#0061B5;
  border: thin solid #0061B5;
  border-radius:10px;
  height: 8px;
}
    
.scroller-rp::-webkit-scrollbar-thumb:vertical {
  background:#A1A7AC;
  border: thin solid #dfdfdf;
  border-radius:10px;
}
    
.scroller-rp::-webkit-scrollbar-thumb:hover {
  background:#0061B5;
}
    
.scroller-rp::-webkit-scrollbar-button:horizontal:end:increment {
  background-image: url(/assets/rsp/images/right-arrow-rp-scroller.png);
}
    
.scroller-rp::-webkit-scrollbar-button:horizontal:start:decrement {
  background-image: url(/assets/rsp/images/left-arrow-rp-scroller.png);
}
    
.scroller-rp::-webkit-scrollbar-button:horizontal:end:increment,
.scroller-rp::-webkit-scrollbar-button:horizontal:start:decrement {
  display: block;
}    
  
/*Flexbox - Featured Scrollable on Mobile */    
.homepage-section-2018  .scrollable-promo-card {
  background-color: transparent;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.homepage-section-2018 .promo-card {
  display: flex;
  background-color: white;
  min-width: 100%;
  min-height: 300px;
  overflow-x: auto; 
}

/*.promo-card::-webkit-scrollbar {
  display: none;
}*/

.homepage-section-2018 .promo-card-slider-content {
  background-color: lightgrey;
  min-width: 300px;
  margin: 10px;
}

/*H2 styling*/
    
.homepage-section-2018 .homepage-h2 h2 {
    background: white;
    /*width: 275px;*/
    padding: 20px;
    margin: auto;
    font-weight: bold !important;
    font-size: 18px !important;
    line-height: 26px;
}    

.grid-2-920.grid-2 > * {width: 100% !important}    
    

/*Moile homepage order flexbox*/    
    
.main-homepage-flexbox-container {
  display: flex;
  flex-direction: column;
/*  flex-wrap: wrap;*/
  }

.mobile-pos-0{order: 0;}   
.mobile-pos-1{order: 1;}
.mobile-pos-2{order: 2;}
.mobile-pos-2{order: 2;}
.mobile-pos-3{order: 3;}
.mobile-pos-4{order: 4;}
.mobile-pos-5{order: 5;}
.mobile-pos-6{order: 6;}
.mobile-pos-7{order: 7;}    

/*Top section styling*/    
.homepage-section-2018 .homepage-top-left {width: 100%; padding-right: 0%;}
.homepage-section-2018 .homepage-top-right {width:100%;}     

}    
    
/*END 920 Mobile styling*/    

@media screen and (max-width: 920px){
    
}   

/*smallest screen category slider styling*/     
    
@media screen and (max-width:560px) {    
.homepage-section-2018 .promo-card {
  display: flex;
  background-color: white;
  min-width: 100%;
  min-height: 210px;
  overflow-x: auto; 
}

.homepage-section-2018 .promo-card-slider-content {
  background-color: lightgrey;
  min-width: 210px;
  margin: 10px;
}  
    
}

    
</style>