We Keep Coding

Select a Slick slider 1.3.5 after page load so it has focus to navigate with arrow keys

I want the slider to be selected automatically after the loading of page. Meaning that I want to be able to navigate through the slider using the arrow keys right after the page load, without clicking on it first.
This is the workign slider but I have to click on it first before the arrow keys work.
https://codepen.io/jinzagon/pen/YzqpdLj
HTML
<section class="top_slider">
<div>
<img src="http://placehold.it/288x288?text=1">
</div>
<div>
<img src="http://placehold.it/288x288?text=1">
</div>
<div>
<img src="http://placehold.it/288x288?text=1">
</div>
<div>
<img src="http://placehold.it/288x288?text=1">
</div>
<div>
<img src="http://placehold.it/288x288?text=1">
</div>
</section>
CSS
.slider {
background-color: white;
margin: 100px auto;
height: auto!important;
}
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
}
JS
$(".top_slider").slick({
dots: true,
infinite: true,
centerMode: true,
slidesToShow: 3,
slidesToScroll: 1,
});

1. Put focus on the slider after it is loaded
After the slider is initialised, you can put focus on the slider so that the keyboard can be used without tabbing to it or clicking on it first... but note that you can only set focus on an element that can get focus e.g. an a, button or input. You're first slide contains a link so we can use it.
In Slick 1.3.9 or below (which you are using), you can use the onInit callback and select the link in the first div of the .slide-track like this:
$(".top_slider").slick({
dots: true,
infinite: false,
centerMode: true,
slidesToShow: 3,
slidesToScroll: 1,
onInit: function() {
$(".top_slider .slick-track div:first-of-type a").focus();
},
});
In Slick 1.4.0 and above, you use the callback event before you initialise the slider, and you can select the first slide more easily using the .slick-current class (note, you still need to select a focus-able element in the slide):
/* Bind the event BEFORE initialising slick */
$('.top_slider').on('init', function(event, slick){
$(".top_slider .slick-current a").focus();
});
/* Now you can initialise Slick */
$(".top_slider").slick({
/*Settings....*/
});
2. Automatically scroll to the slider when the page loads
You just need the following line to make your page to scroll down to the slider when the page loads:
$( document ).ready(function() {
$("html, body").animate({ scrollTop: $('.top_slider').offset().top}, 500);
});
We get the position of the top of the slider using the .top_slider class and set scrollTop to this value in the animate function - this will animate the scroll to that location.
Working Snippet Putting this all together:
$('.top_slider').on('init', function(event, slick) {
$(".top_slider .slick-current a").focus();
});
$(".top_slider").slick({
dots: true,
infinite: false,
centerMode: true,
slidesToShow: 3,
slidesToScroll: 1,
onInit: function() {
$(".top_slider .slick-track div:first-of-type a").focus();
},
});
$('html,body').animate({ scrollTop: $('.top_slider' ).offset().top}, 500);
.slider {
background-color: white;
margin: 100px auto;
height: auto!important;
}
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css">
<h1>HEADER HERE...</h1>
<h2>Some more content to scroll past...</h2>
<section class="top_slider">
<div>
<img src="http://placehold.it/288x288?text=1">
</div>
<div>
<img src="http://placehold.it/288x288?text=1">
</div>
<div>
<img src="http://placehold.it/288x288?text=1">
</div>
<div>
<img src="http://placehold.it/288x288?text=1">
</div>
<div>
<img src="http://placehold.it/288x288?text=1">
</div>
</section>
<p>Content to make the page long enough to see the scroll...</p>
<p>Content to make the page long enough to see the scroll...</p>
<p>Content to make the page long enough to see the scroll...</p>
<p>Content to make the page long enough to see the scroll...</p>
<p>Content to make the page long enough to see the scroll...</p>
<p>Content to make the page long enough to see the scroll...</p>
<p>Content to make the page long enough to see the scroll...</p>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>

Helping with Gucci like owl-carousel

Ive tried as much as I could on creating an owl carousel for a fashion website, I want a similar one that gucci.com has. Image below. I have updated my website and code and looks like this now: ghostparis.com[looks like this now: ghostparis.com] . Okay so progress so far the images are now loading and in a carousel, not playing automatically sadly and critically loading vertically and not horizontally, like if you visit the website in mobile device you will see that the image loads downwards and not sideways like the next image. I dont know how to fix it :( 1
I have tried creating this in code (HTML)
<div class="site-blocks-cover" data-aos="fade">
<div class="backgroundHome">
<div class="slider_area">
<div class="slider_active owl-carousel owl-theme">
<div class="homeslider">
<div class="item">
<div class="image1">
<img src="images/Ghost1.jpg" alt="">
</div>
<div class="image2">
<img src="images/Ghost2.jpg" alt="">
</div>
<div class="image3">
<img src="images/Ghost3.jpg" alt="">
</div>
</div>
</div>
css here:
.backgroundHome{
width: 100%;
height: 100%;
}
.item img{
display: block;
width: 100%;
height: auto;
}
background color red is just for development purposes as its just overriden by image on slider
and javascript I think here is pretty much where my mistake is as its my first time actually creating a slider:
var slider1 = function(){
$('.slider_active').owlCarousel({
loop:true,
margin:0,
items:1,
autoplay:true,
navText:['<i class="fa fa-angle-left"></i>','<i class="fa fa-angle-right"></i>'],
nav:true,
dots:true,
autoplayHoverPause: true,
autoplaySpeed: 800,
responsive:{
0:{
items:1,
dots:false,
},
767:{
items:1,
dots:false,
},
992:{
items:1,
dots:true,
}
}
})
};
slider1();
Help with be really much appreciated.

jQuery .height method fails to set height in iOS Safari

I met very strange behavior on iOS Safari 7+
I'm using flexslider and for some reason it doesn't work when i click on a link and go to the page i use it. If i copy and paste the link in the address bar it works. Also it works on all other popular mobile browsers. Here is js i used to debug the issue:
if (!vertical || fade) {
var $obj = (fade) ? slider : slider.viewport;
var objHeight = slider.slides.eq(slider.animatingTo).height();
console.log($obj.height());
(dur) ? $obj.animate({"height": objHeight}, dur) : $obj.height(objHeight);
if ($obj.height() == 0) { $obj.css("height", objHeight); }
console.log(objHeight);
console.log($obj.height());
console.log($obj.css("height"));
}
Chrome logs expected values:
577, 187,187, 187px
But Safari logs very unusual values:
682, 195, 0, 0px
When i see the generated html it is absolutely same for the two browsers:
<div id="itemImgsContainer" class="flexslider singleSmoothHeight">
<div class="flex-viewport" style="overflow: hidden; position: relative; height: 187px;">
<ul class="slides" style="width: 600%; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);">
<li class="item flex-active-slide" style="width: 342px; float: left; display: block;"><img id="img_product_big_1085" itemprop="image" src="img_big.jpg" title="title" border="0" class="ui-corner-all"></li>
<li class="item" style="width: 342px; float: left; display: block;"><img src="img1.jpg" title="mytitle" border="0" class="ui-corner-all"></li>
<li class="item" style="width: 342px; float: left; display: block;"><img src="img2.jpg" title="title" border="0" class="ui-corner-all"></li>
</ul>
</div>
<ol class="flex-control-nav flex-control-paging">
<li><a class="flex-active">1</a></li><li><a>2</a></li><li><a>3</a></li>
</ol>
</div>
the difference is only in the height where Safari shows 195px instead.
This happens only on iPhone Safari, and not any other popular browser.
Any help will be appreciated.
EDIT
After some experiments i found out that this happens only if i click on a tag that uses "flippable" efect. If i put on this a tag e.stopPropagation(); this issue disappears. I know that there is no logic for this behavior, because the issue is on another page than this, but these are the facts.
EDIT 2
Here is some more code that shows how flexslider is called:
$('.flexslider.singleSmoothHeight li:first-child').imagesLoaded(function() {
$(this).parents('.singleSmoothHeight').flexslider({
animation: 'slide',
slideshow: false,
animationLoop: false,
directionNav: false,
smoothHeight: true
});
});
Here is a link with clip with the behavior in device simulator (iPhone 6+ in this case):
http://bksito.com/aftco_iPhone_tests.avi
Note that the Safari is in device emulator mode in firsts steps, and last tests are on Safari emulator mode. I'm so confused why only on devices this behavior occurs.

When you have these kind of issue, the unique solution is to call all the jQuery functions using chain:
$(...).css( ... ).height( ... ).animate( ... ). ...;
Other solution is to use a timer setted to 0, in order to get the painter refresh the DOM.
$(...).css( ... );
setTimeout(function(){
$(...).animate( ... );
},0);

toogle not working when wrapped around 2 containers

am trying to make a slider, and make the text and image slide when i click on an arrow(img)
<div class="col span_12_of_12 bannerHomeHeight">
<div class="homeImage1" id="homeBannerContainer1" style="display: block">
<div class="homeImage">
<h4>HIV</h4>
<img src="/images/banner-hiv-icons.png" alt=""/>
</div>
<div class="homeBanner">
<h3>HIV support materials for healthcare professionals, paitent groups and paitents</h3>
<div class="homeArrow">
<img src="/images/arrow.png" alt=""/>
</div>
</div>
</div>
</div>
<div class="homeImage1" id="homeBannerContainer2" style="display: none">
<div class="homeImage">
<h4>HCV</h4>
<img src="/images/banner-hep-icons.png" alt=""/>
</div>
<div class="homeBanner">
<h3>HCV support materials for healthcare professionals, paitent groups and paitents</h3>
<div class="homeArrow">
<img src="/images/arrow.png" alt=""/>
</div>
</div>
</div>
My J query is:
$(function () {
$(".homeArrow").on('click', function () {
$('.homeImage1').animate({
width: 'toggle'
});
});
});
homeImage1 is the container which i want sliding but the 2nd one goes to the bottom rather than coming in from the side.
live: thenandnow.anytimeafter9.co.uk

The problem is your bannerHomeHeight for the first slider frame is still there taking up space when you toggle its child homeImage1's display.
Try toggle bannerHomeHeight instead:
$(function () {
$(".homeArrow").on('click', function () {
$(".bannerHomeHeight").animate({
width: 'toggle'
});
});
});
[EDIT]
The problem with this is that when both elements are side by side during animation they take up > 100% and one is forced underneath. To solve this we can give .bannerHomeHeight 2 style changes (max height and width) so it is as follows:
.bannerHomeHeight {
margin-top: -16px;
min-height: 170px;
background-color: #54565b;
max-height: 170px;
width: 98%;
}
This way the height isn't seen to change to fit the content as it animates, and being 98% width is just enough to prevent the combination of the 2 becoming over 100% (I don't know whats causing this exactly, I guess something to do with padding/margins ?)

Chrome, margins and jQuery animate

I'm having a weird display inconsistency with chrome and perhaps someone with cross-browser experience can shed light on it.
Fiddle: http://jsfiddle.net/Bio2hazard/DqCMY/
I've simplified the code as much as possible to dig down to the problem(s).
HTML ( Just a few images, really )
<div id="1" class="list_box">
<img class="game_image" src="http://lorempixel.com/output/animals-q-c-184-69-9.jpg"
width="184" height="69"/>
</div>
<div id="2" class="list_box">
<img class="game_image" src="http://lorempixel.com/output/animals-q-c-184-69-9.jpg"
width="184" height="69"/>
</div>
<div id="3" class="list_box">
<img class="game_image" src="http://lorempixel.com/output/animals-q-c-184-69-9.jpg"
width="184" height="69"/>
</div>
<div id="4" class="list_box">
<img class="game_image" src="http://lorempixel.com/output/animals-q-c-184-69-9.jpg"
width="184" height="69"/>
</div>
<div id="5" class="list_box">
<img class="game_image" src="http://lorempixel.com/output/animals-q-c-184-69-9.jpg"
width="184" height="69"/>
</div>
<div id="6" class="list_box">
<img class="game_image" src="http://lorempixel.com/output/animals-q-c-184-69-9.jpg"
width="184" height="69"/>
</div>
CSS
body {
background-color: #2d2d2b;
color: #939393;
}
.list_box {
margin-bottom: 2em;
display:inline-block;
width: 184px;
height: 69px;
overflow: hidden;
}
.testleft {
float: left;
}
.testright {
float: right;
}
JS ( The interesting part, probably )
$.fn.infoCardDisable = function () {
$('.active').stop().animate({
height: '69px',
marginBottom: '2em'
}, 400, function() {
$(this).removeClass('active');
$(this).children('.testleft').remove();
$(this).children('.testright').remove();
});
}
$('.list_box > .game_image').click(function (e) {
if ($(this).parent().hasClass('active')) {
$(this).infoCardDisable();
} else {
$(this).infoCardDisable();
$(this).parent().append('<span class="testleft">L.Test</span><span class="testright">R.Test</span>');
$(this).parent().addClass('active').stop().animate({
height: '103px',
marginBottom: '-2px'
}, 400);
}
return false;
});
The basic goal is to expand the list_box element downwards to reveal additional content when a image is clicked on. This action should not affect the positioning or flow of the content.
It works fine in both Firefox and IE, however chrome has all sorts of problems with it.
1) The float: left; and float:right; on the text causes the box to be awkwardly stuck higher up than any other element. Can be fixed by removing the floats, but I need them to position the elements.
2) The whole thing makes all elements around it jump around. This can be fixed by removing the display: inline-block from list_element but unfortunately that is not a option.
My tests were done on Firefox(18.0.1), Chrome(24.0.1312.52) and Internet Explorer(9.0.8).
Sooo... any ideas?

Chrome's default vertical-align behaves weirdly sometimes, you can solve it by explicitly setting it:
.list_box {
[...]
vertical-align: top;
}
Fiddle