Not able to fetch inline transform scale using jquery

Not able to fetch inline transform scale using jquery - javascript

I am creating a functionality wherein I need to fetch the inline transform scale value from each li.
Below I have created a demo for you to help me out?
HTML
<div style="color:red;transform:scale(1);">Dummy content</div>
JS
$(function(){
$('div').click(function(){
var trans=$('div').css('transform');
console.log(trans);
});
});
Thanks in advance!
--------------------Update------------------------
I think my question didnt justify to the problem currently I am facing so please check the below codepen for the reference.
http://codepen.io/anon/pen/vOzoWv
Below is the code available who might not be able to check in codepen:
HTML
<ul>
<li class="image-container">
<img src="http://a3.mzstatic.com/us/r30/Purple7/v4/2e/71/0f/2e710fc0-54c2-ce6a-3ce6-296cc0fe526e/icon175x175.png" alt="Receipt" style="transform: scale(0.55); margin-top: -100px;">
</li>
<li class="image-container">
<img src="http://a3.mzstatic.com/us/r30/Purple7/v4/2e/71/0f/2e710fc0-54c2-ce6a-3ce6-296cc0fe526e/icon175x175.png" alt="Receipt" style="transform: scale(0.6); margin-top: -80px;">
</li>
<li class="image-container">
<img src="http://a3.mzstatic.com/us/r30/Purple7/v4/2e/71/0f/2e710fc0-54c2-ce6a-3ce6-296cc0fe526e/icon175x175.png" alt="Receipt" style="transform: scale(0.7); margin-top: -40px;">
</li>
<li class="image-container">
<img src="http://a3.mzstatic.com/us/r30/Purple7/v4/2e/71/0f/2e710fc0-54c2-ce6a-3ce6-296cc0fe526e/icon175x175.png" alt="Receipt" style="transform: scale(0.8); margin-top: 1px;">
</li>
<li class="image-container">
<img src="http://a3.mzstatic.com/us/r30/Purple7/v4/2e/71/0f/2e710fc0-54c2-ce6a-3ce6-296cc0fe526e/icon175x175.png" alt="Receipt" style="transform: scale(0.9); margin-top: 50px;">
</li>
<li class="image-container">
<img src="static/images/fileeebox/Receipt.jpg" alt="Receipt" style="transform: scale(1); margin-top: 100px;">
</li>
<li class="image-container">
<img src="static/images/fileeebox/Receipt.jpg" alt="Receipt" style="transform: scale(1.1); margin-top: 200px;">
</li>
<li class="image-container" style="display: none;">
<img src="http://a3.mzstatic.com/us/r30/Purple7/v4/2e/71/0f/2e710fc0-54c2-ce6a-3ce6-296cc0fe526e/icon175x175.png" alt="Receipt" style="transform: scale(1.1); margin-top: 200px;">
</li>
<li class="image-container" style="display: none;">
<img src="http://a3.mzstatic.com/us/r30/Purple7/v4/2e/71/0f/2e710fc0-54c2-ce6a-3ce6-296cc0fe526e/icon175x175.png" alt="Receipt" style="transform: scale(1.2); margin-top: 700px;">
</li>
<li class="image-container" style="display: none;">
<img src="http://a3.mzstatic.com/us/r30/Purple7/v4/2e/71/0f/2e710fc0-54c2-ce6a-3ce6-296cc0fe526e/icon175x175.png" alt="Receipt">
</li>
</ul>
CSS:
ul li.image-container img {
max-width: 100%;
max-height: 100%;
margin: 0 auto;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.4);
transition: all 600ms ease-in-out;
list-item-style:none;
}
ul li.image-container:last-child img {
transform: scale(1.2);
margin-top: 700px;
}
ul li.image-container:nth-last-child(2) img {
transform: scale(1.1);
margin-top: 200px;
}
ul li.image-container:nth-last-child(3) img {
transform: scale(1);
margin-top: 100px;
}
ul li.image-container:nth-last-child(4) img {
transform: scale(0.9);
margin-top: 50px;
}
ul li.image-container:nth-last-child(5) img {
transform: scale(0.8);
margin-top: 1px;
}
ul li.image-container:nth-last-child(6) img {
transform: scale(0.7);
margin-top: -40px;
}
ul li.image-container:nth-last-child(7) img {
transform: scale(0.6);
margin-top: -80px;
}
ul li.image-container:nth-last-child(8) img {
transform: scale(0.55);
margin-top: -100px;
}
ul li.image-container:nth-last-child(9) img {
transform: scale(0.5);
margin-top: -120px;
}
ul li.image-container:nth-last-child(10) img {
transform: scale(0.45);
margin-top: -140px;
}
ul li.image-container:nth-last-child(n+10) img {
transform: scale(0.4);
margin-top: -155px;
}
JS
$(function(){
$('img').click(function(){
var arrImages=$('li.image-container');
var length=arrImages.length;
var lastElement=$(arrImages).find(':visible').last();
var i;
for(i=length-1;i>=0;i--){
var obj=$(arrImages[i]);
var prevMargin=$(obj).eq(i-1).find('img').css('margin-top');
var prevScale=$(obj).eq(i-1).find('img').css('transform');
alert(prevMargin);
alert(prevScale);
}
});
});

-- Update
Ok, since that was not obvious from the info in your previous post i am just putting my update of the answer up here. This should be what you are looking for.
$(function() {
$('img').click(function(){
var arrImages = $('li.image-container');
var length = arrImages.length;
var lastElement = $(arrImages).find(':visible:last');
var i;
for( i = length -1; i >= 0; i-- ) {
var obj = $(arrImages[i]);
if (i < length - 2 && i !== 0) {
var prevMargin = arrImages.eq(i - 1 ).find('img').css('margin-top');
var prevScale = arrImages.eq(i - 1 ).find('img').css('transform');
console.log(prevScale);
}
}
});
});

Related

Use same javascript function for different overlay IDs

I want to display the overlay for different links. 1st overlay has an image and text whereas if we click link2 it must display overlay2 having same structure but diff content. Please help me get the desired output.
function on() {
document.getElementById("overlay").style.display = "block";
}
function on1() {
document.getElementById("overlay1").style.display = "block";
}
function off() {
document.getElementById("overlay").style.display = "none";
}
.img {
transition: transform 5s ease-in-out;
transform: scale(1);
transform-origin: 0 0;
}
.img:hover {
transform: scale(1.25)
}
#overlay,
#overlay1 {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: white;
z-index: 77777772;
cursor: pointer;
}
#text,
#text1 {
position: fixed;
top: 20%;
left: 5%;
//font-size: 50px;
color: black;
// transform: translate(-50%,-50%);
// -ms-transform: translate(-50%,-50%);
}
<div id="overlay" onclick="off()">
<div id="text">
<div style="width: 48%; float:left">
<h2>XXX</h2>
<h4>ZZZ</h4>
<p style="font-size:14px;">
Help bring forth the immense talent that resides amongst the valley’s citizens. </p>
</div>
<div style="width: 50%; float:right; margin-top:-220px;
">
<img class="img" style="height:100%" src="http://cdn.dpmag.com/2016/06/boydB3_6881-683x1024.jpg">
</div>
</div>
<div style="padding:20px">
<h2></h2>
<a onclick="on()"></a>
</div>
<div id="overlay1" onclick="on1()">
<div id="text1">
<div style="width: 48%; float:left">
<h2>AAA</h2>
<h4>MMM</h4>
<p style="font-size:14px;">Help bring forth the immense talent that resides amongst the valley’s citizens. </p>
</div>
<div style="width: 50%; float:right; margin-top:-220px;
">
<img class="img" style="height:100%" src="http://cdn.dpmag.com/2016/06/002boydB37683-703x1024.jpg">
</div>
</div>
<div style="padding:20px">
<h2></h2>
<a onclick="on1()"></a>
</div>
</div>
</div>
<a onclick="on(id)"style="font-size: 11pt;">Read More -></a>
<a onclick="on(id)"style="font-size: 11pt;">Read More -></a>
1. List item

There are better ways to achieve this, however as per your requirement you may pass different ids &actions as params to same function like so
function on() {
document.getElementById("overlay").style.display = "block";
}
function on1() {
document.getElementById("overlay1").style.display = "block";
}
function off() {
document.getElementById("overlay").style.display = "none";
}
function toggle(id, value) {
document.getElementById(id).style.display = value;
}
.img {
transition: transform 5s ease-in-out;
transform: scale(1);
transform-origin: 0 0;
}
.img:hover {
transform: scale(1.25)
}
#overlay,
#overlay1 {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: white;
z-index: 77777772;
cursor: pointer;
}
#text,
#text1 {
position: fixed;
top: 20%;
left: 5%;
font-size: 50px;
color: black;
transform: translate(-50% -50%);
-ms-transform: translate(-50% -50%);
}
<div id="overlay" onclick="toggle('overlay', 'none')">
<div id="text">
<div style="width: 48%; float:left">
<h2>XXX</h2>
<h4>ZZZ</h4>
<p style="font-size:14px;">
Help bring forth the immense talent that resides amongst the valley’s citizens. </p>
</div>
<div style="width: 50%; float:right; margin-top:-220px;
">
<img class="img" style="height:100%" src="http://cdn.dpmag.com/2016/06/boydB3_6881-683x1024.jpg">
</div>
</div>
<div style="padding:20px">
<h2></h2>
<a onclick="toggle('overlay', 'block')"></a>
</div>
<div id="overlay1" onclick="toggle('overlay1', 'block')">
<div id="text1">
<div style="width: 48%; float:left">
<h2>AAA</h2>
<h4>MMM</h4>
<p style="font-size:14px;">Help bring forth the immense talent that resides amongst the valley’s citizens. </p>
</div>
<div style="width: 50%; float:right; margin-top:-220px;
">
<img class="img" style="height:100%" src="http://cdn.dpmag.com/2016/06/002boydB37683-703x1024.jpg">
</div>
</div>
<div style="padding:20px">
<h2></h2>
<a onclick="toggle('overlay1', 'block')"></a>
</div>
</div>
</div>
<a onclick="toggle('overlay', 'block')" style="font-size: 11pt;">Read More -></a>
<a onclick="toggle('overlay', 'block')" style="font-size: 11pt;">Read More -></a> 1. List item

Jquery animate() opacity working but animating right does not?

Hi i am trying to animate to the right but it doesn't seem to be working but opacity change does work in the same function?
$(document).on("click touchstart tap", ".buttonchat", function () {
$('.message').each(function(i) {
delay =(i)*500;
$(this).delay(delay).animate({
opacity: 0,
right: "-150px"
},1000, function() {
// Animation complete.
});
});
});
as you can see in this pen animating to the right does nothing but changing opacity works what's happening?
pen: https://codepen.io/uiunicorn/pen/YzZXwJp
thanks in advance

Your messages span will have to have the position: absolute property...
<span class="message" style="width: 18.2105rem; height: 1.26316rem; opacity: 1; position:absolute;">Hello! 👋 I hope you're having a good night</span>
Here's a working pen: https://codepen.io/paulmartin91/pen/RwpPaPL
Here's the explanation from W3 Schools:
By default, all HTML elements have a static position, and cannot be
moved. To manipulate the position, remember to first set the CSS
position property of the element to relative, fixed, or absolute!

In CSS file you should consider adding "." in the beginning.
and Js file here below with corrections.
$(document).on("click touchstart tap", ".buttonchat", function () {
$('.message').each(function(i) {
delay =(i)*500;
$(this).delay(delay).animate({
"opacity": 0.20 ,
"right": "0px" , "top": "0px" , "background-color" : "green"
},1000, function() {
// Animation complete.
});
});
});
.message{
left: 0px;
position : absolute ;
}
.relative{ position : relative ; }
<button style="width: 200px; height: 100px" class="buttonchat"></button>
<div class="message-main relative">
<div class="message-hold">
<div class="messages">
<div
class="bubble cornered left"
style="
opacity: 1;
width: 19.2105rem;
height: 2.47368rem;
margin-top: 0px;
margin-left: 0px;
transform: scale(1);
"
>
<div class="loading" style="transform: translateX(0rem) scale(1)"
><b style="opacity: 0; transform: scale(0)">•</b
><b style="opacity: 0; transform: scale(0)">•</b
><b style="opacity: 0; transform: scale(0)">•</b></div
><div
class="message"
style="width: 18.2105rem; height: 1.26316rem; opacity: 1"
>Hello! 👋 I hope you're having a good night</div
>
</div>
<br />
<div
class="bubble cornered left"
style="
opacity: 1;
width: 15.7368rem;
height: 2.47368rem;
margin-top: 0px;
margin-left: 0px;
transform: scale(1);
"
>
<div class="loading" style="transform: translateX(0rem) scale(1)"
><b style="opacity: 0; transform: scale(0)">•</b
><b style="opacity: 0; transform: scale(0)">•</b
><b style="opacity: 0; transform: scale(0)">•</b></div
><div
class="message"
style="width: 14.7368rem; height: 1.26316rem; opacity: 1"
>I'm a junior interactive designer 😎</div
>
</div>
<br />
<div
class="bubble cornered left"
style="
opacity: 1;
width: 23.8947rem;
height: 2.47368rem;
margin-top: 0px;
margin-left: 0px;
transform: scale(1);
"
>
<div class="loading" style="transform: translateX(0rem) scale(1)"
><b style="opacity: 0; transform: scale(0)">•</b
><b style="opacity: 0; transform: scale(0)">•</b
><b style="opacity: 0; transform: scale(0)">•</b></div
>
<div
class="message"
style="width: 22.8421rem; height: 1.26316rem; opacity: 1"
>
which basically means I create cool looking websites 🤘
</div>
</div>
<br />
<div
class="bubble cornered left"
style="
opacity: 1;
width: 30.9474rem;
height: 2.47368rem;
margin-top: 0px;
margin-left: 0px;
transform: scale(1);
"
>
<div class="loading" style="transform: translateX(0rem) scale(1)"
><b style="opacity: 0; transform: scale(0)">•</b
><b style="opacity: 0; transform: scale(0)">•</b
><b style="opacity: 0; transform: scale(0)">•</b></div
><div
class="message"
style="width: 29.9474rem; height: 1.26316rem; opacity: 1"
>I have exactly 0 qualifications and mostly get by using stackoverflow
👀</div
>
</div>
<br />
<div
class="bubble cornered left"
style="
opacity: 1;
width: 20.3158rem;
height: 2.47368rem;
margin-top: 0px;
margin-left: 0px;
transform: scale(1);
"
>
<div class="loading" style="transform: translateX(0rem) scale(1)"
><b style="opacity: 0; transform: scale(0)">•</b
><b style="opacity: 0; transform: scale(0)">•</b
><b style="opacity: 0; transform: scale(0)">•</b></div
><div
class="message"
style="width: 19.3158rem; height: 1.26316rem; opacity: 1"
>Now I have your full confidence let's move on!</div
>
</div>
<br />
</div>
</div>
</div>

How to use several image sliders on the same page?

I created a simple image slider and I am trying to make it work regardless of how many are on the same page. I have tried many approaches, but none work correctly unless I call each slider separately:
HTML
<section id="rm-slider-1" class="rm-slider" data-name="rm-slider-1">
<a href="#" class="rm-slider-control rm-prev">
<span class="rm-slider-icon-container"><span><</span></span>
</a>
<a href="#" class="rm-slider-control rm-next">
<span class="rm-slider-icon-container"><span>></span></span>
</a>
<ul class="rm-slider-slides">
<li class="rm-slider-slide slide-1" style="background-image: url(http://www.planwallpaper.com/static/images/beautiful-sunset-images-196063.jpg);">
<div class="rm-copy-container">
<h1 class="rm-img-slider-title">Slide One</h1>
<a class="rm-img-slider-call-to-action" href="http://georgecodes.com/">
<span>Button 1</span>
</a>
</div>
</li>
<li class="rm-slider-slide slide-2" style="background-image: url(http://www.planwallpaper.com/static/images/434976-happy-valentines-day-timeline-cover.jpg);">
<div class="rm-copy-container">
<h1 class="rm-img-slider-title">Slide Two</h1>
<a class="rm-img-slider-call-to-action" href="http://georgecodes.com/">
<span>Button 2</span>
</a>
</div>
</li>
<li class="rm-slider-slide slide-3" style="background-image: url(http://all4desktop.com/data_images/original/4237670-images.jpg);">
<div class="rm-copy-container">
<h1 class="rm-img-slider-title">Slide Three</h1>
<a class="rm-img-slider-call-to-action" href="http://georgecodes.com/">
<span>Button 3</span>
</a>
</div>
</li>
</ul>
</section>
<section id="rm-slider-2" class="rm-slider" data-name="rm-slider-2">
<a href="#" class="rm-slider-control rm-prev">
<span class="rm-slider-icon-container"><span><</span></span>
</a>
<a href="#" class="rm-slider-control rm-next">
<span class="rm-slider-icon-container"><span>></span></span>
</a>
<ul class="rm-slider-slides">
<li class="rm-slider-slide slide-4" style="background-image: url(http://www.planwallpaper.com/static/images/download-happy-janmashtami-hd-images_q0dlDbz.jpg);">
<div class="rm-copy-container">
<h1 class="rm-img-slider-title">Slide Four</h1>
<a class="rm-img-slider-call-to-action" href="http://georgecodes.com/">
<span>Button 4</span>
</a>
</div>
</li>
<li class="rm-slider-slide slide-5" style="background-image: url(http://www.planwallpaper.com/static/images/happy_diwali__sms_images_.jpg);">
<div class="rm-copy-container">
<h1 class="rm-img-slider-title">Slide Five</h1>
<a class="rm-img-slider-call-to-action" href="http://georgecodes.com/">
<span>Button 5</span>
</a>
</div>
</li>
<li class="rm-slider-slide slide-6" style="background-image: url(http://www.planwallpaper.com/static/images/_77246627_fa4891a6-ccf8-4c8f-9e32-f1a80cdcdf4c_0ClWxBM.jpg);">
<div class="rm-copy-container">
<h1 class="rm-img-slider-title">Slide Six</h1>
<a class="rm-img-slider-call-to-action" href="http://georgecodes.com/">
<span>Button 6</span>
</a>
</div>
</li>
</ul>
</section>
<section id="rm-slider-3" class="rm-slider" data-name="rm-slider-3">
<a href="#" class="rm-slider-control rm-prev">
<span class="rm-slider-icon-container"><span><</span></span>
</a>
<a href="#" class="rm-slider-control rm-next">
<span class="rm-slider-icon-container"><span>></span></span>
</a>
<ul class="rm-slider-slides">
<li class="rm-slider-slide slide-7" style="background-image: url(http://www.planwallpaper.com/static/images/Halloween-Wallpaper-37.jpg);">
<div class="rm-copy-container">
<h1 class="rm-img-slider-title">Slide Seven</h1>
<a class="rm-img-slider-call-to-action" href="http://georgecodes.com/">
<span>Button 7</span>
</a>
</div>
</li>
<li class="rm-slider-slide slide-8" style="background-image: url(http://www.planwallpaper.com/static/images/11-sea-beach-sand-wallpaper_w80EYH0.jpg);">
<div class="rm-copy-container">
<h1 class="rm-img-slider-title">Slide Eight</h1>
<a class="rm-img-slider-call-to-action" href="http://georgecodes.com/">
<span>Button 8</span>
</a>
</div>
</li>
<li class="rm-slider-slide slide-9" style="background-image: url(http://www.planwallpaper.com/static/images/1080p-wallpapers-new.png);">
<div class="rm-copy-container">
<h1 class="rm-img-slider-title">Slide Nine</h1>
<a class="rm-img-slider-call-to-action" href="http://georgecodes.com/">
<span>Button 9</span>
</a>
</div>
</li>
<li class="rm-slider-slide slide-10" style="background-image: url(http://www.planwallpaper.com/static/images/fire_fist_vs_water_fist-wallpaper-1920x1080_gVipT2G.jpg);">
<div class="rm-copy-container">
<h1 class="rm-img-slider-title">Slide Ten</h1>
<a class="rm-img-slider-call-to-action" href="http://georgecodes.com/">
<span>Button 10</span>
</a>
</div>
</li>
</ul>
</section>
CSS
/* Placeholders */
/* ============ */
a.rm-slider-control {
height: 100%;
width: 100%;
display: block;
transition: all 0.5s; }
.rm-slider, .rm-slider-slide {
height: 100%;
width: 100%;
position: relative;
display: block;
margin: 0;
padding: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat; }
/* Image Slider Styles */
/* =================== */
html, body {
padding: 0;
margin: 0; }
/* Hero */
/* ==== */
.rm-slider {
overflow: hidden;
height: 100vh; }
.rm-slider ul {
position: relative;
width: 100%;
height: 100%;
padding: 0;
margin: 0; }
#media only screen and (min-width: 1024px) {
.rm-slider-copy {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 64px;
text-align: left;
bottom: auto; } }
/* Image Slider */
/* ============ */
.rm-slider-slide {
float: left;
transition: opacity 0.5s linear;
z-index: 0;
opacity: 0;
position: absolute;
display: block; }
.rm-slider-slide .rm-copy-container {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
color: white;
width: 100%; }
.rm-slider-slide.active {
z-index: 1;
opacity: 1; }
/* Slider Controls */
/* --------------- */
a.rm-slider-control {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 2;
background: rgba(42, 42, 42, 0.1);
cursor: pointer;
font-size: 36px;
height: 100px;
width: 30px; }
a.rm-slider-control .rm-slider-icon-container {
color: white;
height: 100%;
width: 100%; }
a.rm-slider-control .rm-slider-icon-container span {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); }
a.rm-slider-control.rm-next {
right: 0; }
a.rm-slider-control.rm-prev {
left: 0; }
a.rm-slider-control:hover {
background: rgba(42, 42, 42, 0.4); }
#media only screen and (min-width: 1280px) {
a.rm-slider-control {
height: 100px;
width: 50px; }
a.rm-slider-control .rm-slider-icon-container span {
font-size: 32px; } }
/* Slider Text */
/* ----------- */
.rm-img-slider-title {
font-size: 22px;
text-transform: uppercase;
letter-spacing: 1px;
margin: 16px 0;
line-height: 1; }
.rm-img-slider-call-to-action {
border: 2px solid white;
border-radius: 40px;
color: white;
margin: 16px auto 0;
display: table;
height: 40px;
position: relative;
margin: 0 auto; }
.rm-img-slider-call-to-action span {
display: table-cell;
vertical-align: middle;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
padding: 0 32px; }
.rm-img-slider-call-to-action:hover {
background: rgba(255, 255, 255, 0.4); }
#media only screen and (min-width: 768px) {
.rm-img-slider-title {
font-size: 56px; } }
/* Testing */
.rm-slider {
overflow: hidden;
height: 500px;
width: 33.33333333%;
float: left; }
/*# sourceMappingURL=style.css.map */
JS
var ramonSlider = function(slider, slides, prev, next, transition) {
var imgSlider = {
slider: $(slider).data('name'),
sliderId: $('#' + $(slider).data('name')),
slides: $(slides),
prev: $(prev),
next: $(next),
transition: transition || 3000,
currentIndex: 0,
interval: undefined,
slideCount: function() {
return this.sliderId.find(slides).length;
},
makeFirstSlideActive: function() {
this.sliderId.find(slides).first().addClass('active');
},
moveItems: function() {
var slideItems = this.sliderId.find(slides);
var currentSlide = slideItems.eq(this.currentIndex);
console.log(currentSlide);
slideItems.removeClass('active');
currentSlide.addClass('active');
},
moveOne: function() {
console.log(this.slideCount());
var thisObject = this;
if (this.currentIndex > this.slideCount() - 1) {
thisObject.currentIndex = 0;
}
this.moveItems();
},
autoSlide: function() {
var thisObject = this;
this.interval = window.setInterval(function() {
thisObject.currentIndex++;
thisObject.moveOne();
}, thisObject.transition);
},
moveToNext: function() {
var thisObject = this;
var nextItem = this.sliderId.find(next);
nextItem.on('click', function(e) {
e.preventDefault();
window.clearInterval(thisObject.interval);
thisObject.currentIndex++;
thisObject.moveOne();
});
},
moveToPrev: function() {
var thisObject = this;
var prevItem = this.sliderId.find(prev);
prevItem.on('click', function(e) {
e.preventDefault();
window.clearInterval(thisObject.interval);
thisObject.currentIndex--;
if (thisObject.currentIndex < 0) {
thisObject.currentIndex = thisObject.slideCount() - 1;
}
thisObject.moveItems();
});
}
}
var init = function() {
imgSlider.makeFirstSlideActive();
imgSlider.moveItems();
imgSlider.moveOne();
imgSlider.autoSlide();
imgSlider.moveToNext();
imgSlider.moveToPrev();
}
return init();
};
This Works (Calling each function with the ID of the slider)
$(document).ready(function() {
ramonSlider('#rm-slider-1', '.rm-slider-slide', '.rm-prev', '.rm-next');
ramonSlider('#rm-slider-2', '.rm-slider-slide', '.rm-prev', '.rm-next');
ramonSlider('#rm-slider-3', '.rm-slider-slide', '.rm-prev', '.rm-next');
});
I want this to work (calling a function once using a class instead of ids)
$(document).ready(function() {
ramonSlider('.rm-slider', '.rm-slider-slide', '.rm-prev', '.rm-next');
});
Any thoughts?

Untested, but should work:
$(document).ready(function() {
$('.rm-slider').each(function(){
ramonSlider(this, '.rm-slider-slide', '.rm-prev', '.rm-next');
});
});
Also, these three lines are actually wrong in your slider plugin:
...
slides: $(slides),
prev: $(prev),
next: $(next),
...
As it is now, they are selecting all elements with those classes in your document, when you probably only want to select the ones in the current slider. For that you probably want to replace them with
...
slides: $(slides, $(slider)),
prev: $(prev, $(slider)),
next: $(next, $(slider)),
...
If it works as it is now, it's probably because you don't actually use this.slides, this.prev or this.next. But... if you don't use them, I don't see any point in defining them as properties of your object. Most likely, your slider will be fine if you remove those lines altogether.

You can try looping it in $.each
$(document).ready(function() {
$('.rm-slider').each(function(){
ramonSlider(this, '.rm-slider-slide', '.rm-prev', '.rm-next');
});
});
Tested and verified

Content Slider Pure CSS

I have code below for a content slider using HTML, CSS and JQuery. Is it possible to get exactly what I have now but using pure CSS only? If its not possible with pure CSS is it possible to do with Vanilla JavaScript with no JQuery? Anything helps, cheers.
$(function(){
var scroller = $('#scroller div.innerScrollArea');
var scrollerContent = scroller.children('ul');
scrollerContent.children().clone().appendTo(scrollerContent);
var curX = 0;
scrollerContent.children().each(function(){
var $this = $(this);
$this.css('left', curX);
curX += $this.outerWidth(true);
});
var fullW = curX / 2;
var viewportW = scroller.width();
// Scrolling speed management
var controller = {curSpeed:0, fullSpeed:2};
var $controller = $(controller);
var tweenToNewSpeed = function(newSpeed, duration)
{
if (duration === undefined)
duration = 600;
$controller.stop(true).animate({curSpeed:newSpeed}, duration);
};
// Pause on hover
scroller.hover(function(){
tweenToNewSpeed(0);
}, function(){
tweenToNewSpeed(controller.fullSpeed);
});
// Scrolling management; start the automatical scrolling
var doScroll = function()
{
var curX = scroller.scrollLeft();
var newX = curX + controller.curSpeed;
if (newX > fullW*2 - viewportW)
newX -= fullW;
scroller.scrollLeft(newX);
};
setInterval(doScroll, 40);
tweenToNewSpeed(controller.fullSpeed);
});
#scroller {
position: absolute;
}
#scroller .innerScrollArea {
overflow: hidden;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#scroller ul {
padding: 0;
position: relative;
}
#scroller li {
padding: 0;
list-style-type: none;
position: absolute;
}
.circle {
width: 250px;
height: 250px;
position: relative;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-radius: 50%;
background-color:transparent;
border-style:solid;
border-width:9px;
border-color:#006850;
}
.circle-text {
color: #1f497d;
font-family:Verdana;
font-size: 20.5px;
text-align: center;
width: 200px;
top: 90px;
left: 10%;
bottom: 0;
position: absolute;
z-index: 99;
}
.arrow {
width:300px;
height:80px;
}
.flipimage {
width:300px;
height:80px;
-moz-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
-ms-filter: fliph; /*IE*/
filter: fliph; /*IE*/
}
.everything {
/*transform: scale(0.6);
}
<div class="everything">
<div id="scroller" style="width: 900px; height: 470px; margin: 0 auto;">
<div class="innerScrollArea">
<ul>
<li>
<br style="line-height:89px;"/>
<div class="circle">
<div class="circle-text">
HR Connect<br/>Service<br/>Representative
</div>
</div>
<img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
</li>
<li>
<img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Specialist
</div>
</div>
</li>
<li>
<br style="line-height:89px;"/>
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Manager
</div>
</div>
<img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
</li>
<li>
<img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
<div class="circle">
<div class="circle-text">
Director, Employee<br/>Relations &<br/>Well-Being
</div>
</div>
</li>
</ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</div>

You may use animation , but to keep the whole thing sliding for ever, you will need to clone (or make a redundant copy in HTML) at least of the elements that you see at first in the slider . Else, it would behave as a marquee , living a blank space untill everything slides off the box.
Example below:
/* all position:absolute removed */
#scroller {
overflow:hidden;
}
#scroller .innerScrollArea {
}
#scroller ul {
padding: 0;
position: relative;
display:flex;/* UPDATE */
}
#scroller li {
padding: 0;
list-style-type: none;
}
.circle {
width: 250px;
height: 250px;
position: relative;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-radius: 50%;
background-color:transparent;
border-style:solid;
border-width:9px;
border-color:#006850;
}
.circle-text {
color: #1f497d;
font-family:Verdana;
font-size: 20.5px;
text-align: center;
width: 200px;
top: 90px;
left: 10%;
bottom: 0;
position: absolute;
z-index: 99;
}
.arrow {
width:300px;
height:80px;
}
.flipimage {
width:300px;
height:80px;
-moz-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
-ms-filter: fliph; /*IE*/
filter: fliph; /*IE*/
}
/* UPDATE for animation */
ul {
animation: slidli 9s infinite linear;
}
ul:hover {
animation-play-state:paused;
}
#keyframes slidli {
100% {
transform:translatex(-133.5%);/* this is to be update to the content with to see every element slide once untill copies/clone comes back at same spot */
}
}
<div class="everything">
<div id="scroller" style="width: 900px; height: 470px; margin: 0 auto;">
<div class="innerScrollArea">
<ul>
<li>
<br style="line-height:89px;" />
<div class="circle">
<div class="circle-text">
HR Connect<br/>Service<br/>Representative
</div>
</div>
<img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
</li>
<li>
<img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Specialist
</div>
</div>
</li>
<li>
<br style="line-height:89px;" />
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Manager
</div>
</div>
<img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
</li>
<li>
<img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
<div class="circle">
<div class="circle-text">
Director, Employee<br/>Relations &<br/>Well-Being
</div>
</div>
</li>
<!-- from here it is a copy of the previous elements . 3 of them might have been enough -->
<li>
<br style="line-height:89px;" />
<div class="circle">
<div class="circle-text">
HR Connect<br/>Service<br/>Representative
</div>
</div>
<img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
</li>
<li>
<img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Specialist
</div>
</div>
</li>
<li>
<br style="line-height:89px;" />
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Manager
</div>
</div>
<img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
</li>
<li>
<img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
<div class="circle">
<div class="circle-text">
Director, Employee<br/>Relations &<br/>Well-Being
</div>
</div>
</li>
</ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</div>
Notice: I used the flex model and droppped the absolute positionning. Main parent can be in absolute if you do need it, children do not.

How to Flip Div's in Randomly

I have created the application where All divs are Flip Vertically on hover. I wanted to make it random without hover. How should I do that?
.vertical.flip-container {
position: relative;
float: left;
margin-left: 50px;
}
.vertical .back {
transform: rotateX(180deg);
}
.vertical.flip-container .flipper {
transform-origin: 100% 50px;
}
.vertical.flip-container:hover .flipper {
transform: rotateX(-180deg);
}
.flip-container {
perspective: 1000;
}
/* flip the pane when hovered */
.flip-container:hover .flipper,
.flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
width: 100px;
height: 100px;
}
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front,
.back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
<div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" style="background: red">
Rushikesh
</div>
<div class="back" style="background:green">
Jogle
</div>
</div>
</div>
<div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" style="background: red">
Rushikesh
</div>
<div class="back" style="background:green">
Jogle
</div>
</div>
</div>
<div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" style="background: red">
Rushikesh
</div>
<div class="back" style="background:green">
Jogle
</div>
</div>
</div>
Any suggestions would be thankful.

I simplified your markup and CSS quite a bit. Also gave it a more 3D look.
You can use setInterval to flip them hover:
http://jsfiddle.net/7x75466y/5/
var $flippers = $(".flip-container"),
qtFlippers = $flippers.length;
setInterval(function () {
$flippers.eq(Math.floor(Math.random()*qtFlippers)).toggleClass('hover');
}, 1000);

Here is a JSfiddle that selects a random tile, and applies an action to it at every second (using setTimeout). You can perform whatever action you like on the tile. Using jQuery
http://jsfiddle.net/7x75466y/2/
var containers = $(".flip-container")
setInterval(function() {
var target = containers.eq(Math.floor(Math.random() * containers.size()))
target.fadeToggle() //DO WHAT YOU WANT TO THE TARGET
}, 1000)

We Keep Coding

JavaScript is the programming language of the Web.

Not able to fetch inline transform scale using jquery - javascript

Related

Use same javascript function for different overlay IDs

Jquery animate() opacity working but animating right does not?

How to use several image sliders on the same page?

Content Slider Pure CSS

How to Flip Div's in Randomly

Categories

Resources