So, this script creates an easing swift effect when you click on the button (id="enter") and what I want is that when you click it once again it will reverse the effect and go back to the beginning. Also, another solution can be with 2 buttons so one can do the first part and the other can reverse the action.
Here is the code:
jQuery('#enter').click(function() {
$('#slide2').fadeIn(1000, 'linear', function(){
$('#slide3').fadeIn(1000, 'linear');
});
});
There are three images: slide1, slide2 and slide3. I actually found this code here: http://jsfiddle.net/e6hUr/1/ and this is how it should look but I only need reverse now.
Here you have more than one slide so fadeToggle can not give you exact reverse
Fine below code that can give you exact reverse of fadeIn effect
var forward = true;
$('#enter').click(function() {
if(forward == true){
$('#slide2').fadeIn(1000, 'linear', function(){
$('#slide3').fadeIn(1000, 'linear');
});
forward = false;
}else{
$('#slide3').fadeOut(1000, 'linear', function(){
$('#slide2').fadeOut(1000, 'linear');
});
forward = true;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="slides">
<li id="slide1" style="width: 100%; float: left; margin-right: -100%; display: list-item; ">
<img alt="Panoramic view from the window of one of the penthouses" src="http://tritonpenthouses.uwpistol.net/images/bg/drawing.jpg">
</li>
<li id="slide2" style="width: 100%; float: left; margin-right: -100%; display: none; ">
<img alt="Panoramic view from the window of one of the penthouses" src="http://tritonpenthouses.uwpistol.net/images/bg/cgi-day-time.jpg">
</li>
<li id="slide3" style="width: 100%; float: left; margin-right: -100%; display: none; ">
<img alt="Panoramic view from the window of one of the penthouses" src="http://tritonpenthouses.uwpistol.net/images/bg/cgi-night-time.jpg">
</li>
</ul>
<button id="enter" type="button">Click Me!</button>
There is two way you can do that with fadIn,fadeOut and fadeToogle for reverse effect change slide order in jquery see below code. For identify fade effect we are manage data-fade attribute in button.
$('#enter').click(function() {
var fade_type = $(this).data('fade');
if (fade_type == "in") {
$('#slide2').fadeToggle(1000, 'linear', function() {
$('#slide3').fadeToggle(1000, 'linear');
});
$(this).data('fade', 'out');
} else {
$('#slide3').fadeToggle(1000, 'linear', function() {
$('#slide2').fadeToggle(1000, 'linear');
});
$(this).data('fade', 'in');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="slides">
<li id="slide1" style="width: 100%; float: left; margin-right: -100%; display: list-item; ">
<img alt="Panoramic view from the window of one of the penthouses" src="http://tritonpenthouses.uwpistol.net/images/bg/drawing.jpg">
</li>
<li id="slide2" style="width: 100%; float: left; margin-right: -100%; display: none; ">
<img alt="Panoramic view from the window of one of the penthouses" src="http://tritonpenthouses.uwpistol.net/images/bg/cgi-day-time.jpg">
</li>
<li id="slide3" style="width: 100%; float: left; margin-right: -100%; display: none; ">
<img alt="Panoramic view from the window of one of the penthouses" src="http://tritonpenthouses.uwpistol.net/images/bg/cgi-night-time.jpg">
</li>
</ul>
<button id="enter" type="button" data-fade="in">Click Me!</button>
You should handle it using CSS transition and in jQuery, you just toggle a class:
-jsFiddle-
$('#enter').click(function() {
$('#slide2, #slide3').toggleClass('fadeIn');
});
#enter {
position: relative;
z-index: 9;
}
#slide2, #slide3 {
opacity: 0;
transition: opacity 1s linear;
}
#slide2.fadeIn, #slide3.fadeIn {
opacity: 1;
}
#slide2:not(.fadeIn), #slide3.fadeIn
{
transition-delay: 1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="slides">
<li id="slide1" style="width: 100%; float: left; margin-right: -100%; display: list-item; ">
<img alt="Panoramic view from the window of one of the penthouses" src="http://tritonpenthouses.uwpistol.net/images/bg/drawing.jpg">
</li>
<li id="slide2" style="width: 100%; float: left; margin-right: -100%;">
<img alt="Panoramic view from the window of one of the penthouses" src="http://tritonpenthouses.uwpistol.net/images/bg/cgi-day-time.jpg">
</li>
<li id="slide3" style="width: 100%; float: left; margin-right: -100%;">
<img alt="Panoramic view from the window of one of the penthouses" src="http://tritonpenthouses.uwpistol.net/images/bg/cgi-night-time.jpg">
</li>
</ul>
<button id="enter" type="button">Click Me!</button>
Use this:
$('#enter').click(function() {
$('#slide2').fadeToggle(1000, 'linear', function(){
$('#slide3').fadeToggle(1000, 'linear');
});
});
Just Toggle your fade effect.
Related
i have a toggle button to allow user to select 1 or 2 rows
So when user click on the id it will remove or add the class and show diferents rows, so i need to add an opacity on the toggle button, how?, i need to show an opacity on the actual selected toggle button.
jQuery("#one-row").click(function () {
$('.product-list').removeClass('-two-columns');
$('.product-list').addClass('-one-columns');
});
jQuery("#two-rows").click(function () {
$('.product-list').removeClass('-one-columns');
$('.product-list').addClass('-two-columns');
});
.toggle-one{
background-image: url(images/toggle_1.svg);
width: 30px;
height: 10px;
float: right;
display: inline-block;
cursor: pointer;
}
.toggle-two{
background-image: url(images/toggle_2.svg);
width: 30px;
height: 10px;
float: right;
display: inline-block;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggle-rows" style="top: 118px;
right: 30px;
position: absolute;">
<nav>
<ul>
<li style="display: inline-block;">
<div class="toggle-one " id="onw-row">
</div>
</li>
-
<li style="display: inline-block;">
<div class="toggle-two" id="two-rows">
</div>
</li>
</ul>
</nav>
</div>
I'd say, add two lines each for the buttons similar to this:
jQuery("#one-row").click(function () {
$('.product-list').removeClass('-two-columns');
$('.product-list').addClass('-one-columns');
$("#one-row").css("opacity", "1");
$("#two-rows").css("opacity", "0.3");
});
jQuery("#two-rows").click(function () {
$('.product-list').removeClass('-one-columns');
$('.product-list').addClass('-two-columns');
$("#one-row").css("opacity", ".0.3");
$("#two-rows").css("opacity", "1");
});
I'm currently doing responsive design for the website using media queries with (max-width: 480px). Now, I have an issue of making slideToggle on jQuery from left to right. Basically, I'm adding class to element by using jQuery and styling this in CSS. However, I might assume there are other ways to make it...
But this is my approach. Please guys help me out, maybe you have some other recommendations how to solve this.
So, here is my html:
<div class="header">
<div class="logo">Sport-concept.ru - интернет-магазин спортивных товаров</div>
<div class="contacts">
<p class="phone">+7(499)394-46-03<br />
+7(985)427-48-55<br />
</p>
<a id="js-close" class="js-close"></a>
<p class="email">sport-concept#yandex.ru</p>
</div>
<a id='js-phone' class='js-phone'></a>
<a id="js-cart" class="js-cart" href="/basket"></a>
<a id='js-mnu' class='js-mnu'></a>
<a id="js-cat" class="js-cat"></a>
<div class="mainmenu">
<a id='js-cross' class='js-cross'></a>
<ul>
<li><a href="/" ><span></span></a></li>
<li><a href="/menu/16" ><span></span></a></li>
<li><a href="/menu/3" ><span></span></a></li>
<li><a href="/menu/5" ><span></span></a></li>
<li><a href="/articles" ><span></span></a></li>
<li><a href="/menu/21" ><span></span></a></li>
<li><a href="/menu/22" ><span></span></a></li> </ul>
</div>
</div>
this is CSS
#js-close {display:block;display:none;width:35px;height:35px;margin:17px 10px; position: absolute;
right: 0;}
.js-close{background:url(images/close-icon.png) center center no-repeat; opacity: 0.75; }
and this is media
#media screen and (max-width: 480px) {
p.phone._opened {
position: fixed;
top: 0;
background-color: #fff;
width: 100%;
height: 100%;
transform: translateX(-100%);
overflow-x: hidden;
overflow-y: auto;
-webkit-transition: all 0.3s ease-out;
display: block;
}
}
And my jQuery:
$(document).ready(function(){
$("#js-phone").click(function(){
$('p.phone').addClass("_opened");
});
$("js-close").click(function(){
$('p_phone').removeClass("_opened");
});
});
you have some problems with your code .
in JQ you are not writing the selectors correctly ( js-close needs to have # before it , and p_phone needs to be p.phone instead )
in CSS you need to hide your p.phone with transform:translateX(-100%) and then show it when has class opened with transform:translateX(0%) . Also add transition to the p.phone so when you close it , it will have transition
check snippet below ( Open = open button , Close = close button )
i changed the JQ a bit so it's more readable and easier to change, using selector caching ( the variables ) and event targeting. hope you don't mind
P.S i removed the media query so it will work in the snippet .
check fiddle with media query > jsFiddle
var open = $("#js-phone"),
close = $("#js-close"),
phone = $('p.phone')
$("body").on("click", function(e) {
var target = $(e.target)
if (target.is(open)) {
$(phone).addClass("opened")
}
if (target.is(close)) {
$(phone).removeClass("opened")
}
})
p.phone {
transform: translateX(-120%);
position: fixed;
top: 0;
transition: 0.3s;
-webkit-transition: all 0.3s ease-out;
overflow-x: hidden;
overflow-y: auto;
width: 100%;
background-color: #fff;
display: block;
}
.contacts {
margin-top: 100px;
}
/*#media screen and (max-width: 480px) {*/
p.phone.opened {
transform: translateX(0);
}
/*}*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
<div class="logo">Sport-concept.ru - интернет-магазин спортивных товаров</div>
<div class="contacts">
<p class="phone">+7(499)394-46-03
<br /> +7(985)427-48-55
<br />
</p>
<a id="js-close" class="js-close">Close</a>
<p class="email">sport-concept#yandex.ru</p>
</div>
<a id='js-phone' class='js-phone'>Open</a>
<a id="js-cart" class="js-cart" href="/basket"></a>
<a id='js-mnu' class='js-mnu'></a>
<a id="js-cat" class="js-cat"></a>
<div class="mainmenu">
<a id='js-cross' class='js-cross'></a>
<ul>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
</ul>
</div>
</div>
Use style='display:none' for first load. And After Link click show your div and add class using addClass.
$("#js-phone").click(function() {
$('.contacts').show();
$('p.phone').addClass("_opened");
});
$(".js-close").click(function() {
$('.contacts').hide();
$('p_phone').removeClass("_opened");
});
#media screen and (max-width: 480px) {
p.phone._opened {
position: fixed;
top: 0;
background-color: #fff;
width: 100%;
height: 100%;
transform: translateX(-100%);
overflow-x: hidden;
overflow-y: auto;
-webkit-transition: all 0.3s ease-out;
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header" >
<div class="logo" >Sport-concept.ru - интернет-магазин спортивных товаров</div>
<div class="contacts" style='display:none'>
<p class="phone">+7(499)394-46-03<br /> +7(985)427-48-55
<br />
</p>
<a id="js-close" class="js-close">Close</a>
<p class="email">sport-concept#yandex.ru</p>
</div>
<a id='js-phone' class='js-phone'>Phone</a>
<a id="js-cart" class="js-cart" href="/basket">2</a>
<a id='js-mnu' class='js-mnu'>3</a>
<a id="js-cat" class="js-cat">4</a>
</div>
Someone has built a carousel for our webshop, but it is not functioning correctly. When you click one of the arrow buttons, the images will move to the left or right. But as you might have noticed already, the images just disappear into the void.
Obviously it should move to the first image when the last one has been reached and someone clicks on "next", and to the last image when the first one has been reached.
Note: the reason he used "jQuery" instead of "$" is because "$" is in conflict with Magento.
This is the code that is used:
HTML
<div class="gallery">
<div id="moveleft"><</div>
<ul class="gallery-content">
<li>
<a href="http://test.prestaq.nu/media/catalog/product/cache/27/image/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_1_24.jpg" data-lightbox="roadtrip">
<img src="http://test.prestaq.nu/media/catalog/product/cache/27/image/300x/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_1_24.jpg" alt="">
</a>
</li>
<li>
<a href="http://test.prestaq.nu/media/catalog/product/cache/27/image/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_2_9.jpg" data-lightbox="roadtrip">
<img src="http://test.prestaq.nu/media/catalog/product/cache/27/image/300x/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_2_9.jpg" alt="">
</a>
</li>
<li>
<a href="http://test.prestaq.nu/media/catalog/product/cache/27/image/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_3_1_2.jpg" data-lightbox="roadtrip">
<img src="http://test.prestaq.nu/media/catalog/product/cache/27/image/300x/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_3_1_2.jpg" alt="">
</a>
</li>
<li>
<a href="http://test.prestaq.nu/media/catalog/product/cache/27/image/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_4_15.jpg" data-lightbox="roadtrip">
<img src="http://test.prestaq.nu/media/catalog/product/cache/27/image/300x/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_4_15.jpg" alt="">
</a>
</li>
<li>
<a href="http://test.prestaq.nu/media/catalog/product/cache/27/image/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_5_15.jpg" data-lightbox="roadtrip">
<img src="http://test.prestaq.nu/media/catalog/product/cache/27/image/300x/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_5_15.jpg" alt="">
</a>
</li>
</ul>
<div id="moveright">></div>
</div>
CSS
ul, li { list-style: none; }
.gallery {
min-height: 340px;
overflow:hidden;
margin-top: 40px;
}
.gallery ul.gallery-content {
margin-left: 55px;
margin-right: 55px;
max-height: 300px;
overflow:hidden;
margin-top: -300px;
}
.gallery img {
float:left;
padding: 3px;
margin: 0 10px;
}
.gallery #moveleft {
height: 300px;
width: 50px;
line-height: 300px;
border: #CCC solid 1px;
margin-left: 0px;
font-size:45px;
padding-left: 2px;
}
.gallery #moveright {
height: 300px;
width: 50px;
line-height: 300px;
font-size:45px;
float: right;
margin-top: -300px;
padding-left: 2px;
border: #CCC solid 1px;
}
JS
jQuery(document).ready(function() {
jQuery('.gallery #moveleft').click(function() {
jQuery('.gallery li').animate({
'marginLeft' : "-=300px" //moves left
});
});
jQuery('.gallery #moveright').click(function() {
jQuery('.gallery li').animate({
'marginLeft' : "+=300px" //moves right
});
});
});
I would recommend using OwlCarousel for simple jQuery Carousel on Magento. This jQuery plugin also support touch slide (work very well on mobile), which is a plus if your Magento website is responsive.
Hope this help
First time user and in need of help.
I have three li li li elements, each has their own <img> inside it. I would like to animate the individual <img> inside outwards while overlapping other sibling elements (in this expanding effect, the siblings shouldn't be moving,)when the selected element is clicked.
The HTML markup i have:
<div class="wrapper">
<ul>
<li class="card">
<div class="content">
<img src="some-img.jpg">
</div>
</li>
<li class="card">
<div class="content">
<img src="some-img.jpg">
</div>
</li>
<li class="card">
<div class="content">
<img src="some-img.jpg">
</div>
</li>
</ul>
</div>
CSS Markup:
.card {
position: relative;
width: 28%;
height: 100px;
float: left;
margin: 2.5%;
overflow: hidden;
}
.content {
position: absolute;
width: 100%;
height: 100%;
top: -50%;
left: 0;
transition: all 1s ease-in;
}
img {
width: 100%;
}
JS:
$('.card').on('click','.content',function(){
$(this).css({
'position':'fixed',
'z-index':'10'
});
});
I've done different iterations of this code back and forth, but setting the position of the .content to fixed does somewhat close to what i'm trying to do, it overlaps the other siblings... but without any smooth transitions flowing outwards.
Here is a link to the code in codepen: http://codepen.io/broham89/pen/WrJmyB
I very very much appreciate any help on this.
z-index and position are not technically animatable properties, so whatever solution would have to be a little hacky. You can accomplish this by fiddling with CSS classes and jQuery toggle. I changed the code a bit so the primary animation/transition occurs on the parent li rather than the .content element. In order for all three lis to remain in the same position, I changed them to absolutely positioned elements with different :nth-child positioning declarations and gave the ul a position of relative. Currently, it's designed around three elements, but you can play around with the values if you need more (or use JS to determine the math).
The jQuery code here toggles .cardhover class which moves the element to left position of 0 -- the start of the ul container -- to prevent any overflow. And it also adds .cardactive for z-index which makes sure that the element is on top of other elements during the bigger/smaller transitions. (And it removes the class from any other siblings at the beginning.)
https://jsfiddle.net/nn454trm/11/
$('.card').on('click', '.content', function() {
$(this).parent().siblings().removeClass('cardactive');
$(this).parent().addClass('cardactive').toggleClass('cardhover');
});
ul {
position: relative;
}
.card {
position: absolute;
width: 28%;
height: 100px;
transition: 2s;
margin: 2.5%;
overflow: hidden;
}
.card:nth-child(1) {
left: 0;
}
.card:nth-child(2) {
left: 33.3%;
}
.card:nth-child(3) {
left: 66.66%;
}
.content {
position: absolute;
width: 100%;
height: 100%;
left: 0;
transition: all 1s ease-in;
}
img {
width: 100%;
}
.cardhover {
width: 95%;
left: 0% !important;
}
.cardactive {
z-index: 20;
background: blue; //for demo purposes
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="wrapper">
<ul>
<li class="card">
<div class="content">
<img src="some-img.jpg" alt="" />
</div>
</li>
<li class="card">
<div class="content">
<img src="some-img.jpg" alt="" />
</div>
</li>
<li class="card">
<div class="content">
<img src="some-img.jpg" alt="" />
</div>
</li>
</ul>
</div>
For smooth transitions, don't you want animate instead of css?
http://api.jquery.com/animate/
I have a drop down menu on a page and want the menu to drop down from the main item to the left. It presently drops down to the right.
I have a jsfiddle for it here.
As you can see it presently drops down to the right and resizes the page to fit. I want the menu to drop to the left and keep all the dimensions in tact. Is there an easy way. I know the jQuery menu widget can do it, but I had other issues with that.
The button is somewhere in the middle of the page, so ideally I want the drop down to be to drop down relative to the parent, not just as the jsfiddle shows which is fixed against the right hand side. Hope this clarifies.
CODE:
IN DOC READY
$(document).ready(function () {
// Menus
$('ul.menu').hide();
$('ul#viewMenu li').hover(function () {
$(this).children('ul.menu').animate({ opacity: 'show' }, 'slow');
}, function () {
$(this).children('ul.menu').animate({ opacity: 'hide' }, 'fast');
});
});
CSS
ul#viewMenu { overflow: hidden; }
ul#viewMenu li { float:left; display: block; text-align: left; line-height: 40px; }
ul#viewMenu li a { line-height: 40px; }
ul#viewMenu ul.menu { position: absolute; }
ul#viewMenu ul.menu li { float: none; }
HTML
<div style="display: inline-block; float: right;">
<ul id="viewMenu" style="list-style: none; margin: 0; padding: 0;">
<li style="display: block; float: left;"> <a class="nav-button view-type-button" style="text-align: center;" href="#"
title="Change the things.">
<span>
<img src="~/Content/themes/base/images/empty.png" style="height: 48px; width: 49px;" alt="Things" />
</span>
</a>
<ul class="view-menu-item view-menu-bottom-right menu"
style="width: 170px !important">
<li> <a class="nav-button" href="#" title="View data.">
<span class="thing1-calendar-button"></span>
<span>This 1</span>
</a>
</li>
<li> <a class="nav-button" href="#" title="View data.">
<span class="thing2-calendar-button"></span>
<span>This 2</span>
</a>
</li>
<li> <a class="nav-button" href="#" title="View data.">
<span class="thing3-calendar-button"></span>
<span>This 3</span>
</a>
</li>
</ul>
</li>
</ul>
Turns out all I needed to do was get hold of the current drawn position from the jQuery offset value. Then set the CSS position for the absolute element. Simples... when you know how!
var position = $('ul#viewMenu ul.menu').offset();
$('ul#viewMenu ul.menu').css({ top: (position.top) + 'px', left: (position.left - 160) + 'px' });
$('ul.menu').hide();
$('ul#viewMenu li').hover(function () {
$(this).children('ul.menu').animate({ opacity: 'show' }, 'slow');
}, function () {
$(this).children('ul.menu').animate({ opacity: 'hide' }, 'fast');
});
Simple. Just give this:
ul#viewMenu ul.menu {
position: absolute;
right: 0;
}
Fiddle: http://jsfiddle.net/praveenscience/T8hFW/1/