Add Class To Parent IMG - LazySizes - javascript

With the lazysizes the images will carry one by one. The default class in the IMG element is lazyload and when an image is loading the lazyloading class comes into action next to it, and when the loading of that image finishes, the lazyloading class is replaced by the lazyloaded class what I want now is to use add / remove a class of the div.parent based on the classes that become active in IMG.
`<div class="image-wrap">
<a href="#">
<img class="lazyload" data-src="">
</a>
</div>`
<script src="http://afarkas.github.io/lazysizes/lazysizes.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="image-wrap">
<a href="#">
<img class="lazyload" data-src="http://lorempixel.com/150/150">
</a>
</div>
<div class="image-wrap">
<a href="#">
<img class="lazyload" data-src="http://lorempixel.com/150/150/sports/">
</a>
</div>
<div class="image-wrap">
<a href="#">
<img class="lazyload" data-src="http://lorempixel.com/150/150/nature/">
</a>
</div>
<div class="image-wrap">
<a href="#">
<img class="lazyload" data-src="http://lorempixel.com/150/150/cats/">
</a>
</div>
<div class="image-wrap">
<a href="#">
<img class="lazyload" data-src="http://lorempixel.com/150/150/business/">
</a>
</div>
<div class="image-wrap">
<a href="#">
<img class="lazyload" data-src="http://lorempixel.com/150/150/city/">
</a>
</div>
<div class="image-wrap">
<a href="#">
<img class="lazyload" data-src="http://lorempixel.com/150/150/people/">
</a>
</div>
</div>


Solved by #dvd, #aFarkas: https://pt.stackoverflow.com/a/280306/95735
$(document).ready(function(){
$(".image-wrap").addClass("classe1");
const els = $(".image-wrap").find("img");
els.each(function(){
$(this).on("load error", function(){
$(this)
.closest(".image-wrap")
.addClass("classe2")
.removeClass("classe1");
});
});
});
/*linhas só para exemplo*/
.classe1{
background: red;
}
.classe2{
background: blue;
}
.image-wrap{
padding: 15px;
margin: 5px;
position:relative;
}
.classe1:before {
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
margin: -20px 0 0 -20px;
content: "";
background: #f7f7f7 url(//afarkas.github.io/lazysizes/assets/imgs/loader.gif) no-repeat center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://afarkas.github.io/lazysizes/lazysizes.min.js"></script>
<div class="container">
<div class="image-wrap">
<a href="#">
<img class="lazyload" data-src="http://lorempixel.com/150/150">
</a>
</div>
<div class="image-wrap">
<a href="#">
<img class="lazyload" data-src="http://lorempixel.com/150/150/sports/">
</a>
</div>
<div class="image-wrap">
<a href="#">
<img class="lazyload" data-src="http://lorempixel.com/150/150/nature/">
</a>
</div>
<div class="image-wrap">
<a href="#">
<img class="lazyload" data-src="http://lorempixel.com/150/150/cats/">
</a>
</div>
<div class="image-wrap">
<a href="#">
<img class="lazyload" data-src="http://lorempixel.com/150/150/business/">
</a>
</div>
<div class="image-wrap">
<a href="#">
<img class="lazyload" data-src="http://lorempixel.com/150/150/city/">
</a>
</div>
<div class="image-wrap">
<a href="#">
<img class="lazyload" data-src="http://lorempixel.com/150/150/people/">
</a>
</div>
</div>
Solution #2
https://github.com/aFarkas/lazysizes/issues/474
$(document).on('lazybeforeunveil lazyloaded', function(e){
if(e.type == 'lazyloaded'){
var addClass = 'classe2',
removeClass = 'classe1';
}else{
var addClass = 'classe1',
removeClass = 'classe2';
}
$(e.target)
.closest('.image-wrap')
.addClass(addClass)
.removeClass(removeClass);
});
/*linhas só para exemplo*/
.classe1{
background: red;
}
.classe2{
background: blue;
}
.image-wrap{
padding: 15px;
margin: 5px;
position:relative;
}
.classe1:before {
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
margin: -20px 0 0 -20px;
content: "";
background: #f7f7f7 url(//afarkas.github.io/lazysizes/assets/imgs/loader.gif) no-repeat center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://afarkas.github.io/lazysizes/lazysizes.min.js"></script>
<div class="container">
<div class="image-wrap">
<a href="#">
<img class="lazyload" data-src="http://lorempixel.com/150/150">
</a>
</div>
<div class="image-wrap">
<a href="#">
<img class="lazyload" data-src="http://lorempixel.com/150/150/sports/">
</a>
</div>
<div class="image-wrap">
<a href="#">
<img class="lazyload" data-src="http://lorempixel.com/150/150/nature/">
</a>
</div>
<div class="image-wrap">
<a href="#">
<img class="lazyload" data-src="http://lorempixel.com/150/150/cats/">
</a>
</div>
<div class="image-wrap">
<a href="#">
<img class="lazyload" data-src="http://lorempixel.com/150/150/business/">
</a>
</div>
<div class="image-wrap">
<a href="#">
<img class="lazyload" data-src="http://lorempixel.com/150/150/city/">
</a>
</div>
<div class="image-wrap">
<a href="#">
<img class="lazyload" data-src="http://lorempixel.com/150/150/people/">
</a>
</div>
</div>

Related

Class is not added by jQuery

I need to add dark overlay to images by adding class imgoverlay using jQuery.
$("#featured .row .col-sm img").hover(
function() {
$(this).addClass('imgoverlay');
},
function() {
$(this).removeClass('imgoverlay');
}
);
.imgoverlay {
height: 100%;
background-color: rgba(18, 15, 65, 0.7);
z-index: 2000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="main" id="featured" data-aos="fade-up">
<div class="container">
<div class="d-flex justify-content-between justify-content-end" data-aos="fade-up">
<div>
<span class="sub-title"><p align="right" data-aos="fade-left" data-aos-duration="3000"> مشاريع مميزة </p></span>
</div>
<div>
<a href="#">
<p align="right"><strong> مشاريعنا الأخرى<i class="fas fa-arrow-left"></i></strong></p>
</a>
</a>
</div>
</div>
<!-- Gallery start -->
<div class="row ">
<div class="col-sm">
<a href="">
<div class="thumb1"><img name="Auoya" src="assets/images/thumb1resize.jpg" alt=""></div>
</a>
<a href="">
<div class="thumb1"><img name="capitalHeights" src="assets/images/thumb2resize.jpg" alt=""></div>
</a>
</div>
<div class="col-sm">
<a href="">
<div class="thumb2"><img name="hai-sakani" src="assets/images/thumbMiddleresize.jpg" alt=""></div>
</a>
</div>
<div class="col-sm">
<a href="">
<div class="thumb1"><img name="bosco" src="assets/images/thumb3resize.jpg" alt=""></div>
</a>
<a href="">
<div class="thumb1"><img name="armonia" src="assets/images/thumb4resize.jpg" alt=""></div>
</a>
</div>
</div>
</div>
</section>

Pure CSS
You can use pseudo element ::after or ::before, no need to use JS or jQ just add a global class and set hover effect on ::after and active it on :hover
.thumbs:hover::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
background-color: rgba(18, 15, 65, 0.7);
}
.thumbs {
width: 150px;
height: 150px;
overflow: hidden;
border: 1px solid red;
position: relative;
}
<section class="main" id="featured" data-aos="fade-up">
<div class="container">
<div class="d-flex justify-content-between justify-content-end" data-aos="fade-up">
<div>
<span class="sub-title"><p align="right" data-aos="fade-left" data-aos-duration="3000"> مشاريع مميزة </p></span>
</div>
<div>
<a href="#">
<p align="right"><strong> مشاريعنا الأخرى<i class="fas fa-arrow-left"></i></strong></p>
</a>
</a>
</div>
</div>
<!-- Gallery start -->
<div class="row ">
<div class="col-sm">
<a href="">
<div class="thumb1 thumbs"><img name="Auoya" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoQEfG25HrwwvXqpLkQfVMQk3PxQ7Q8CEH8oZx9MGfG04JlnLd" alt=""></div>
</a>
<a href="">
<div class="thumb1 thumbs"><img name="capitalHeights" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoQEfG25HrwwvXqpLkQfVMQk3PxQ7Q8CEH8oZx9MGfG04JlnLd" alt=""></div>
</a>
</div>
<div class="col-sm">
<a href="">
<div class="thumb2 thumbs"><img name="hai-sakani" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoQEfG25HrwwvXqpLkQfVMQk3PxQ7Q8CEH8oZx9MGfG04JlnLd" alt=""></div>
</a>
</div>
<div class="col-sm">
<a href="">
<div class="thumb1 thumbs"><img name="bosco" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoQEfG25HrwwvXqpLkQfVMQk3PxQ7Q8CEH8oZx9MGfG04JlnLd" alt=""></div>
</a>
<a href="">
<div class="thumb1 thumbs"><img name="armonia" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoQEfG25HrwwvXqpLkQfVMQk3PxQ7Q8CEH8oZx9MGfG04JlnLd" alt=""></div>
</a>
</div>
</div>
</div>

How to prevent jQuery apendTo from duplicating content

I'm trying to move a div(.titleContainer) inside another div(.imageContainer a) by using jQuery prependTo function, but for some reason the the content that was previously appended is also added to the element that's receiving an appended element. Thanks!
$(document).ready(function () {
$('.titleContainer').each(function(){
$(this).prependTo('.imageContainer a');
});
});
.imageContainer{
background: rgb(144, 144, 221);
}
.card{
margin-right: 20px;
flex: 0 0 30%;
}
h3{
color: black
}
body{
display: flex;
justify-content: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="card">
<div class="titleContainer">
<h3>title1</h3>
</div>
<div class="imageContainer">
<a href="">
<img src="" alt="">
</a>
</div>
</div>
<div class="card">
<div class="titleContainer">
<h3>title2</h3>
</div>
<div class="imageContainer">
<a href="">
<img src="" alt="">
</a>
</div>
</div>
<div class="card">
<div class="titleContainer">
<h3>title3</h3>
</div>
<div class="imageContainer">
<a href="">
<img src="" alt="">
</a>
</div>
</div>
</body>

You need to target .imageContainer within the same .card. Using '.imageContainer a' will target all a
$(document).ready(function() {
$('.titleContainer').each(function() {
$(this).prependTo($(this).closest('.card').find('.imageContainer a'));
});
});
.imageContainer {
background: rgb(144, 144, 221);
}
.card {
margin-right: 20px;
flex: 0 0 30%;
}
h3 {
color: black
}
body {
display: flex;
justify-content: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="card">
<div class="titleContainer">
<h3>title1</h3>
</div>
<div class="imageContainer">
<a href="">
<img src="" alt="">
</a>
</div>
</div>
<div class="card">
<div class="titleContainer">
<h3>title2</h3>
</div>
<div class="imageContainer">
<a href="">
<img src="" alt="">
</a>
</div>
</div>
<div class="card">
<div class="titleContainer">
<h3>title3</h3>
</div>
<div class="imageContainer">
<a href="">
<img src="" alt="">
</a>
</div>
</div>
</body>

$(function(){
$('.titleContainer').each(function(){
$(this).prependTo($(this).next().find('a'));
});
});
Codepen
Note: $(function(){}) === $(document).ready(function(){});

Slick carousel individual overlay

Explanation
I'm trying to set a overlay on each image of the slider (slick.js) when hovering them, but for some reason, when I hover it, the overlay appears on top of the slider (all 12 images), not the image hovered.
Code
You can also see it in JSFiddle and in "fullscreen mode".
ps: it's be better to see the overlay content in fullscreen.
$('.carousel').slick({
arrows: false,
dots: true,
slidesPerRow: 3,
rows: 3
});
.carousel-wrapper {
background-color: rgb(235, 235, 235);
position: relative;
}
img {
background-color: black;
}
.slick-slide {
text-align: center !important;
}
.overlay {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: rgba(1, 1, 1, .35);
transition: 0.2s;
opacity: 0;
}
.overlay:hover {
opacity: 1;
}
.overlay-content {
color: rgb(255, 255, 255);
position: absolute;
top: 50%;
left: 50%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
</head>
<body>
<section class="carousel-wrapper">
<div class="container">
<div class="row">
<ul class="col-md-12 carousel text-center">
<li>
<a href="#">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
</body>
</html>
Thanks in advance,
Luiz.

Why is it not working?
Your code doesn't work as expected because your overlay is being positioned relatively to .carousel-wrapper not the a element (.carousel-wrapper is the first parent of .overlay that has position other than static - if you don't set your position explicitly it defaults to static).
How to avoid this mistake in the future?
If you want any element on your website to have an overlay (or in general you want to use position: absolute somewhere) you need to remember that this element is going to be positioned relatively to it's parent that has positon: relative or position: absolute. If there's no such element it's going to position itself to <html>.
It's very well explained here:
Remember that these values will be relative to the next parent element
with relative (or absolute) positioning. If there is no such parent,
it will default all the way back up to the element itself
meaning it will be placed relatively to the page itself.
(on absolute positioning)
https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
Check the working demo:
https://jsfiddle.net/thffcgqc/2/

Wrap your anchor tags and overlay content in a separate div and style as follows. The reason is due to the fact that you are not using a margin-right for whitespace between boxes. You are simply using a fixed with li tags and the images leaves a gap in the parent container . If an overlay is placed, you will see the overlay over the white gap and the image (which is somewhat not what you want - I believe)
See snippet below
$('.carousel').slick({
arrows: false,
dots: true,
slidesPerRow: 3,
rows: 3
});
.carousel-wrapper {
background-color: rgb(235, 235, 235);
position: relative;
}
img {
background-color: black;
}
.slick-slide {
text-align: center !important;
}
.overlay {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: rgba(1, 1, 1, .35);
transition: 0.2s;
opacity: 0;
background: red;
z-index: 1;
}
.overlay:hover {
opacity: 1;
}
.overlay-content {
color: rgb(255, 255, 255);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
a {
position: relative;
display: inline-block;
}
a:hover .overlay {
opacity: 1
}
.img_cont {
position: relative;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
</head>
<body>
<section class="carousel-wrapper">
<div class="container">
<div class="row">
<ul class="col-md-12 carousel text-center">
<li>
<a href="#">
<div class="img_cont">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="img_cont">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="img_cont">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="img_cont">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="img_cont">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="img_cont">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="img_cont">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="img_cont">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="img_cont">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="img_cont">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
</body>
</html>

stop scrolling once last li is visible on screen

I have a set of images that is aligned in a single row and overflow:hidden. I have 2 buttons, Left and Right, which when clicked scrolls the div to their opposite sides. The problem I am facing here is even after the last element is visible on the screen the scroll goes on to some extent and then stops, creating aspect for blank space in the screen. How can I prevent this? Here is the Fullscreen result and Fiddle and code below:
$(document).ready(function() {
//Video Slider begins
var totalWidth = 0;
$(".gallery__item").each(function() {
totalWidth = totalWidth + $(this).outerWidth(true) + 100;
});
var maxScrollPosition = totalWidth - 100 - $(".gallery-wrap").outerWidth();
function toGalleryItem($targetItem) {
if ($targetItem.length) {
var newPosition = $targetItem.position().left;
if (newPosition <= maxScrollPosition - 100) {
$targetItem.addClass("vid-item-active");
$targetItem.siblings().removeClass("vid-item-active");
$(".gallery").animate({
left: -(newPosition)
});
} else {
$(".gallery").animate({
left: -(maxScrollPosition)
});
};
};
};
$(".des-style").width("100%");
$(".gallery").width(totalWidth);
$(".vid-item:first").addClass("vid-item-active");
// When the prev button is clicked
// ====================================================================
$(".gallery__controls-prev").on("click", function() {
var $targetItem = $(".vid-item-active").prev();
toGalleryItem($targetItem);
});
// When the next button is clicked
// ====================================================================
$(".gallery__controls-next").on("click", function() {
var $targetItem = $(".vid-item-active").next();
toGalleryItem($targetItem);
});
});
.gallery-wrap {
margin: 0 auto;
overflow: hidden;
}
.services-wrap {
padding: 20px;
background: #fff;
border-radius: 4px;
margin: 0 0 40px;
margin-top: 15px !important;
box-shadow: 5px 5px 5px gray;
max-height: 220px !important;
min-height: 220px !important;
}
.gallery {
position: relative;
left: 0px;
top: 0px;
}
.gallery__item {
float: left;
list-style: outside none none;
margin-right: 20px;
width: 200px;
}
.stay-fixed {
position: absolute;
z-index: 20;
}
.gallery__controls-prev {
cursor: pointer;
float: left;
}
.gallery__controls-next {
cursor: pointer;
float: right;
}
.gallery__controls-prev img,
.gallery__controls-next img {
width: 28px;
height: 28px;
}
.left {
transform: rotate(-180deg);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="gallery-wrap">
<div class="gallery clearfix">
<ul>
<li class="gallery__item vid-item vid-item-active">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="vjEehv6_3b0" data-desc="A Glimpse of Tiger dance by Team MCB">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Chrysanthemum.jpg">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
<li class="gallery__item vid-item">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="co9iVzVTQIQ" data-desc="Marpalli Chande seve in Tirupathi Sri Govindaraja Swami Temple.">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Desert.jpg">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
<li class="gallery__item vid-item">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="qtrEg7plreY" data-desc="Outside Chande Program ">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Hydrangeas.jpg">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
<li class="gallery__item vid-item">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="KW95id4p-9Q" data-desc="Bannanje Competition">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Jellyfish.jpg">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
<li class="gallery__item vid-item">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="MAqH4vq4fGM" data-desc="Hulivesha by our Team">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Koala.jpg">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
<li class="gallery__item vid-item">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="WHBMONzvdHY" data-desc="Rashi Pooje at Marpalli Temple">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Lighthouse.jpg">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
<li class="gallery__item vid-item">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="Jp_lu1KaAf0" data-desc="Uppoor Chande">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Penguins.jpg">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
<li class="gallery__item vid-item">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="4wnAaX7LNKc" data-desc="Marpalli Akhanda Chande Seve - part[2]">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Untitled.png">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
<li class="gallery__item vid-item">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="rZorz5vYk10" data-desc="Akhanda Chande Seve at Marpalli Mahalingeshwara Chande Balaga - part[1]">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Untitled1.png">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
<li class="gallery__item vid-item">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="bE6i8HsJbt4" data-desc="Chande seve at Udupi Sri Krishna Temple">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Untitled2.png">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
</ul>
</div>
<div class="gallery__controls row clearfix stay-fixed col-md-6 col-md-offset-3 col-xs-12">
<div class="gallery__controls-prev">
<img src="http://www.myiconfinder.com/uploads/iconsets/7e81c2f3697b91ee17fe6ed6348c232a-Arrow.png" class="left">
</div>
<div class="gallery__controls-next">
<img src="http://www.myiconfinder.com/uploads/iconsets/7e81c2f3697b91ee17fe6ed6348c232a-Arrow.png">
</div>
</div>
</div>

Please check i have added snippet.
Demo Link
$(document).ready(function() {
//Video Slider begins
var totalWidth = 0;
var mainDivWidth = $(".gallery").outerWidth();
$(".gallery__item").each(function() {
debugger;
totalWidth = totalWidth + $(this).outerWidth(true) + 12;
});
var maxScrollPosition = totalWidth - 100 - $(".gallery-wrap").outerWidth();
function toGalleryItem($targetItem) {
if ($targetItem.length) {
var newPosition = $targetItem.position().left;
debugger;
if (totalWidth < newPosition + mainDivWidth) {
return false;
}
if (newPosition <= maxScrollPosition - 100) {
$targetItem.addClass("vid-item-active");
$targetItem.siblings().removeClass("vid-item-active");
$(".gallery").animate({
left: -(newPosition)
});
} else {
$(".gallery").animate({
left: -(maxScrollPosition)
});
};
};
};
$(".des-style").width("100%");
$(".gallery").width(totalWidth);
//$(".gallery").css("left", "-40px");
// Basic HTML manipulation
// ====================================================================
// Set the gallery width to the totalWidth. This allows all items to
// be on one line.
$(".vid-item:first").addClass("vid-item-active");
// When the prev button is clicked
// ====================================================================
$(".gallery__controls-prev").on("click", function() {
var $targetItem = $(".vid-item-active").prev();
toGalleryItem($targetItem);
});
// When the next button is clicked
// ====================================================================
$(".gallery__controls-next").on("click", function() {
var $targetItem = $(".vid-item-active").next();
toGalleryItem($targetItem);
});
});
.gallery-wrap {
margin: 0 auto;
overflow: hidden;
}
.services-wrap {
padding: 20px;
background: #fff;
border-radius: 4px;
margin: 0 0 40px;
margin-top: 15px !important;
box-shadow: 5px 5px 5px gray;
max-height: 220px !important;
min-height: 220px !important;
}
.gallery {
position: relative;
left: 0px;
top: 0px;
}
.gallery__item {
float: left;
list-style: outside none none;
margin-right: 20px;
width: 200px;
}
.stay-fixed {
position: absolute;
z-index: 20;
}
.gallery__controls-prev {
cursor: pointer;
float: left;
}
.gallery__controls-next {
cursor: pointer;
float: right;
}
.gallery__controls-prev img,
.gallery__controls-next img {
width: 28px;
height: 28px;
}
.left {
transform: rotate(-180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery-wrap">
<div class="gallery clearfix">
<ul>
<li class="gallery__item vid-item vid-item-active">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="vjEehv6_3b0" data-desc="A Glimpse of Tiger dance by Team MCB">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Chrysanthemum.jpg">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
<li class="gallery__item vid-item">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="co9iVzVTQIQ" data-desc="Marpalli Chande seve in Tirupathi Sri Govindaraja Swami Temple.">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Desert.jpg">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
<li class="gallery__item vid-item">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="qtrEg7plreY" data-desc="Outside Chande Program ">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Hydrangeas.jpg">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
<li class="gallery__item vid-item">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="KW95id4p-9Q" data-desc="Bannanje Competition">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Jellyfish.jpg">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
<li class="gallery__item vid-item">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="MAqH4vq4fGM" data-desc="Hulivesha by our Team">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Koala.jpg">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
<li class="gallery__item vid-item">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="WHBMONzvdHY" data-desc="Rashi Pooje at Marpalli Temple">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Lighthouse.jpg">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
<li class="gallery__item vid-item">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="Jp_lu1KaAf0" data-desc="Uppoor Chande">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Penguins.jpg">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
<li class="gallery__item vid-item">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="4wnAaX7LNKc" data-desc="Marpalli Akhanda Chande Seve - part[2]">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Untitled.png">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
<li class="gallery__item vid-item">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="rZorz5vYk10" data-desc="Akhanda Chande Seve at Marpalli Mahalingeshwara Chande Balaga - part[1]">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Untitled1.png">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
<li class="gallery__item vid-item">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="bE6i8HsJbt4" data-desc="Chande seve at Udupi Sri Krishna Temple">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Untitled2.png">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
</ul>
</div>
<div class="gallery__controls row clearfix stay-fixed col-md-6 col-md-offset-3 col-xs-12">
<div class="gallery__controls-prev">
<img src="http://www.myiconfinder.com/uploads/iconsets/7e81c2f3697b91ee17fe6ed6348c232a-Arrow.png" class="left">
</div>
<div class="gallery__controls-next">
<img src="http://www.myiconfinder.com/uploads/iconsets/7e81c2f3697b91ee17fe6ed6348c232a-Arrow.png">
</div>
</div>
</div>

Rich Text Editor doesnot work properly in IE 10

I have Implemented richtext editor like this.
Problem 1. If i remove images and put simple div, it does not works. The function for
formatting is called, no error comes. But there is no output also. I tried this for div and span.
Problem 2. In IE 10, to format element I have to select previous element. Though it works well in firefox.
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script>
var txtEditor;
var viewHtml = 1;
function initDoc() {
txtEditor = $('#textBox')[0];
}
$(window).load(initDoc);
function formatDoc(sCmd, sValue) {
//if (validateMode()) { document.execCommand(sCmd, false, sValue);
$(txtEditor).focus(); }
document.execCommand(sCmd, false, sValue); $(txtEditor).focus();
}
function validateMode() {
if (viewHtml==1) { return true; }
alert("Uncheck \"Show HTML\".");
$(txtEditor).focus();
return false;
}
</script>
<style type="text/css">
#textBox {
margin-left: 10px;
width: 650px;
height: 200px;
border: 1px #000000 solid;
padding: 12px;
overflow: scroll;
}
#textBox , #sourceText {
padding: 0;
margin: 0;
max-width: 650px;
min-height: 200px;
}
#editMode label {
cursor: pointer;
}
.attributesStyle {
margin-left: 0px;
border: 1px solid #ccc;
padding: 3px;
float: left;
}
.link {
width: 16px;
height: 17px;
}
.floatLeft {
float: left;
}
.floatRight {
float: right;
}
.marginLeft10 {
margin-left: 10px;
}
.clearBoth {
clear: both;
}
a:hover {
cursor: pointer;
}
</style>
<body >
<form >
<input type="hidden" name="myDoc">
<div style="margin-bottom:10px;">
<div class="floatLeft marginLeft10">
<a onclick="formatDoc('formatBlock', '<h1>');">
<div id="h1" class="attributesStyle">
<img class="link" title="H1" src="~/Images/Heading1.png" />
</div>
</a>
<a onclick="formatDoc('formatBlock', '<h2>');">
<div id="h2" class="attributesStyle">
<img class="link" title="H2" src="~/Images/Heading2.png" />
</div>
</a>
<a onclick="formatDoc('formatBlock', '<h3>');">
<div id="h3" class="attributesStyle">
<img class="link" title="H3" src="~/Images/Heading3.png" />
</div>
</a>
<a onclick="formatDoc('formatBlock', '<h4>');">
<div id="h4" class="attributesStyle">
<img class="link" title="H4" src="~/Images/Heading4.png" />
</div>
</a>
<a onclick="formatDoc('formatBlock', '<h5>');">
<div id="h5" class="attributesStyle">
<img class="link" title="H5" src="~/Images/Heading5.png" />
</div>
</a>
<a onclick="formatDoc('formatBlock', '<h6>');">
<div id="h6" class="attributesStyle">
<img class="link" title="H6" src="~/Images/Heading6.png" />
</div>
</a>
<a onclick="formatDoc('formatblock', '<p>');">
<div id="divParagraph" class="attributesStyle">
<img class="link" title="Paragraph" src="~/Images/paragraph.png" />
</div>
</a>
<a onclick="formatDoc('formatblock', '<pre>');">
<div id="divParagraph" class="attributesStyle">
Pre
</div>
</a>
<a onclick="formatDoc('formatblock', '<blockquote>');">
<div class="attributesStyle">
<img class="link" title="Quote" src="~/Content/themes/base/images /quote_1.png" />
</div>
</a>
</div>
<div class="floatLeft marginLeft10">
<a onclick="formatDoc('bold');">
<div id="bolds" class="attributesStyle" title="Bold">
<img class="link" title="Bold" src="~/Images/text_bold.png" />
</div>
</a>
<a onclick="formatDoc('italic');">
<div id="italic" class="attributesStyle" title="Italic">
<img class="link" title="Italic" src="~/Images/text_italic.png" />
</div>
</a>
<a onclick="formatDoc('underline');">
<div class="attributesStyle" title="Underline">
<img class="link" title="Underline" src="~/Images/text_underline.png" />
</div>
</a>
<a onclick="formatDoc('insertorderedlist');">
<div class="attributesStyle">
<img class="link" title="Order List" src="~/Content/themes/base/images/list_numbered_32.png" />
</div>
</a>
<a onclick="formatDoc('insertunorderedlist');">
<div class="attributesStyle">
<img class="link" title="Bullets List" src="~/Content/themes/base/images/text_list_bullets.png" />
</div>
</a>
<a onclick="formatDoc('undo');">
<div class="attributesStyle" title="undo">
<img class="link" src="~/Content/themes/base/images/rotateLeft.png" />
</div>
</a>
<a onclick="formatDoc('redo');">
<div class="attributesStyle" title="redo">
<img class="link" src="~/Content/themes/base/images/rotateRight.png" />
</div>
</a>
</div>
<div class="floatLeft marginLeft10">
<a onclick="formatDoc('justifyleft');">
<div class="attributesStyle" title="Justify left">
<img id="justifyleft" class="link" title="Justify Left" src="~/Content/themes/base/images/text_align_left.png" />
</div>
</a>
<a onclick="formatDoc('justifycenter');">
<div class="attributesStyle" title="Justify Center">
<img id="justifycenter" class="link" title="Justify Center" src="~/Content/themes/base/images/text_align_center.png" />
</div>
</a>
<a onclick="formatDoc('justifyright');">
<div class="attributesStyle" title="Justify Right">
<img id="justifyright" class="link" title="Justify Right" src="~/Content/themes/base/images/text_align_right.png" />
</div>
</a>
</div>
<a id="divToggleHtml" >
<div class="attributesStyle" title="Toggle Html">
Toggle HTML
</div>
</a>
<div class="floatLeft marginLeft10">
<a onclick="javascript: var sLnk = prompt('Write the URL here', 'http:\/\/'); if (sLnk && sLnk != '' && sLnk != 'http://') { formatDoc('CreateLink', sLnk); }">
<div class="attributesStyle" title="Add Link">
<img class="link" src="~/Content/themes/base/images/link.png" />
</div>
</a>
<a onclick="formatDoc('InsertImage', true);">
<div class="attributesStyle" title="Add Image">
<img class="link" src="~/Content/themes/base/images/image.png" />
</div>
</a>
<a onclick="formatDoc('Unlink');">
<div class="attributesStyle" title="Unlink">
<img class="link" src="~/Content/themes/base/images/brokenLink.png" />
</div>
</a>
</div>
<div class="clearBoth">
</div>
</div>
<div id="textBox" contenteditable="true"><i>Amit Sinha</i></div>
<p style="display:none;" id="editMode"><input type="checkbox" name="switchMode" id="switchBox" onchange="setDocMode(this.checked);" /> <label for="switchBox">Show HTML</label></p>
<p><input type="submit" value="Send" style="display:none;" /></p>
</form>
</body>

i can provide a solution to the first problem.
didn't work for me either as long as i had text in there. problem seemed to be some kind of "select text instead of respond to the click"
add these css-settings for your button-divs:
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select:none;
this should make your controls respond to clicking.
unfortunately, i can't test your 2nd problem as i'm working on linux ;)

Categories

Resources