i have created this slider with jQuery and javascript but I can't make this work with the outplay and with next-previous button.
I need this slider for image as title said, could you help me with left/right side animation?
$(document).ready(function(){
$('.sp').first().addClass('active');
$('.sp').hide();
$('.active').show();
$('.active').removeClass('active').addClass('oldActive');
if ( $('.oldActive').is(':last-child'))
{
$('.sp').first().addClass('active');
}
else
{
$('.oldActive').next().addClass('active');
}
$('.oldActive').removeClass('oldActive');
setTimeout('.active', 1000);
$('.sp').fadeOut();
$('.active').fadeIn();
the other part of the code is in jsfiddle link
this is the code https://jsfiddle.net/ghy14p0f/1/
Easiest way to do the slide is to include the jquery-ui module, to allow for effects and easing. I've added it below, and created the transitions. Also, in your fiddle, you never actually tell it to use jquery -- so yeah, it would never work. I didn't actually change much, the only lines I edited were the fadeout/fadein to make them transitions. Best of luck!!
$(document).ready(function() {
$('.sp').first().addClass('active');
$('.sp').hide();
$('.active').show();
$('#button-next').click(function() {
$('.active')
.removeClass('active')
.addClass('oldActive');
if ($('.oldActive').is(':last-child')) {
$('.sp').first().addClass('active');
} else {
$('.oldActive').next().addClass('active');
}
$('.oldActive').hide("slide", { direction: "right" }, 600).removeClass('oldActive');
$('.active').delay(400).show("slide", { direction: "left" }, 600);
});
$('#button-previous').click(function() {
$('.active').removeClass('active').addClass('oldActive');
if ($('.oldActive').is(':first-child')) {
$('.sp').last().addClass('active');
} else {
$('.oldActive').prev().addClass('active');
}
$('.oldActive').hide("slide", { direction: "left" }, 600).removeClass('oldActive');
$('.active').delay(400).show("slide", { direction: "right" }, 600);
});
});
#slider-wrapper {
width: 500px;
height: 200px;
}
#slider {
width: 500px;
height: 200px;
position: relative;
}
.sp {
width: 500px;
height: 200px;
position: absolute;
}
img {
height: 200px;
}
#nav {
margin-top: 20px;
width: 100%;
}
#button-previous {
border: 1px dotted blue;
background-color: #ccc;
float: left;
}
#button-next {
border: 1px dotted blue;
background-color: #ccc;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id="slider-wrapper">
<div id="slider">
<div class="sp">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/32/Bianco_e_Rosso_(Croce)_e_Rosso.png">
First Image
</div>
<div class="sp">
<img src="https://upload.wikimedia.org/wikipedia/commons/f/f0/600px_Rosso_e_Giallo.PNG">
Second Image
</div>
<div class="sp">
<img src="https://upload.wikimedia.org/wikipedia/en/4/4c/Flag_of_Sweden.svg">
Third Image
</div>
</div>
</div>
<div id="nav"></div>
<div id="button-previous">prev</div>
<div id="button-next">next</div>
Related
I have a div2 that fades away after 3 seconds and appears again on div1 or itself hover.
The problem is that it fades away again after 3 seconds and I want it to remain active while the mouse is over it.
Here's my code:
$(document).ready(function(){
// div2 fades away after 3s
setInterval(function(){
$(".div2").addClass("fade-away");
}, 3000);
// div2 pops up on hover
$(".div1, .div2").hover(function(){
$(".div2").removeClass("fade-away")
});
});
.div1 {
width: 300px;
height: 200px;
background: pink;
}
.div2 {
position: absolute;
width: 300px;
height: 50px;
margin-top: -70px;
background: lightblue;
opacity: 1;
}
.fade-away {
opacity: 0;
}
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<div class="div1"></div>
<div class="div2"></div>
Is there a way to make the div2 remain active while the mouse is over it with javascrit and css only? Sorry for my english.
You can use a boolean flag to do it.
Set the boolean to true when mouseenter and set it to false on mouseleave event.
https://jsfiddle.net/ramseyfeng/0nc2bw8f/
$(document).ready(function() {
let mouseIn = false;
// div2 fades away after 3s
setInterval(function() {
if (!mouseIn) {
$(".div2").addClass("fade-away");
}
}, 3000);
$('.div1').on('mouseenter', () => {
mouseIn = true;
});
$('.div1').on('mouseleave', () => {
mouseIn = false;
});
// div2 pops up on hover
$(".div1, .div2").hover(function() {
$(".div2").removeClass("fade-away")
});
});
.div1 {
width: 300px;
height: 200px;
background: pink;
}
.div2 {
position: absolute;
width: 300px;
height: 50px;
margin-top: -70px;
background: lightblue;
opacity: 1;
}
.fade-away {
opacity: 0;
}
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<div class="div1"></div>
<div class="div2"></div>
Here is a quick and easy way to do it.
You can do it by hovering over any class, I just did it in text for the example.
.hide {
display: none;
}
.myDIV:hover + .hide {
display: block;
color: red;
}
<body>
<h2>Display an Element on Hover</h2>
<div class="myDIV">Hover over me.</div>
<div class="hide">I am shown when someone hovers over the div above.</div>
</body>
I am trying to set up the following page where:
If you click the button, you can see a div.
If you click the div, you can see the next div.
If you move the button, there is no »click« (desired behaviour)
The problem I am having is that if you move the div, the next div appears - this is not what I want. The "next div" should not be displayed after a drag event finishes on it.
Here is my code:
$(function() {
$("#button").draggable({
stack: 'div',
containment: "body"
});
});
$('#button').on('mouseup', function() {
if (!$(this).hasClass('ui-draggable-dragging')) {
// click function
$("#content").toggle();
}
});
$(function() {
$("#content").draggable({
stack: 'div',
containment: "body"
});
});
let containers = $('.trip').hide();
let firstContainer = containers.first().show();
containers.on('click', function() {
//Get current element and next sibling
let elem = $(this);
let next = elem.next('.trip');
//Does sibling exist?
if (next.length) {
next.show();
} else {
firstContainer.show();
}
elem.hide();
});
body {
width: 100vw;
height: 100vh;
padding: 0;
margin: 0;
left: 0;
top: 0;
background-color: grey;
}
#button {
width: 100px;
height: 100px;
background-color: cyan;
}
#content {
display: none;
cursor: all-scroll;
top: 10%;
left: 10%;
position: absolute;
}
.trip {
width: 200px;
height: 200px;
background-color: blue;
color: white;
}
<div id="button">Button</div>
<div id="content">
<div class="trip">div 1</div>
<div class="trip">div 2</div>
<div class="trip">div 3</div>
</div>
<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="https://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="https://raw.githubusercontent.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script>
Is there a way to solve this? :)
(a possible problem is also that pure JavaScript is mixed with jQuery)
Thanks
The main problem to solve here is in distinguishing a regular click event on #content, from other "click like events" that are also triggered during completion of the element being dragged.
You're code currently has a method of doing that which you could re purpose for the desired behaviour:
if (! $(this).hasClass('ui-draggable-dragging')) {
/* This was a "regular click event"
}
So in the case of your code, you could revise it as follows:
$(function() {
/* Combine on ready logic into one place */
$("#button").draggable({
stack: 'div',
containment: "body"
});
$("#content").draggable({
stack: 'div',
containment: "body"
});
/* Hide all trip elements except for first */
$('.trip', '#content').not(':first').hide();
});
$('#button').on('mouseup', function() {
if (!$(this).hasClass('ui-draggable-dragging')) {
$("#content").toggle();
}
});
$('#content').on('mouseup', function() {
/* Reuse same logic in #button mouseup handler */
if (!$(this).hasClass('ui-draggable-dragging')) {
/*
If content element if not dragging, treat mouse up as conclusion
of click event and rotate visibility of trip elements like this
*/
let trip = $('.trip:visible', '#content');
let next = trip.next().length === 0 ?
$('.trip:first', '#content') : trip.next();
trip.hide();
next.show();
}
});
body {
width: 100vw;
height: 100vh;
padding: 0;
margin: 0;
left: 0;
top: 0;
background-color: grey;
}
#button {
width: 100px;
height: 100px;
background-color: cyan;
}
#content {
display: none;
cursor: all-scroll;
top: 10%;
left: 10%;
position: absolute;
}
.trip {
width: 200px;
height: 200px;
background-color: blue;
color: white;
}
<div id="button">Button</div>
<div id="content">
<div class="trip">div 1</div>
<div class="trip">div 2</div>
<div class="trip">div 3</div>
</div>
<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="https://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="https://raw.githubusercontent.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script>
Actually, all you need is this bit of readable code,
Assign a class .draggable to all your draggable elements
Use the new class as stack: '.draggable'
Register click to your '#container', not on your .trip elements
Use only one Event, the "click" one:
Hide all .trip but first using CSS .trip~.trip {display:none;}
jQuery( $ => {
const $cont = $('#content');
const $bttn = $('#button');
const $trip = $('.trip');
const tripL = $trip.length;
let i = 0;
$('.draggable').draggable({stack:'div', containment:'body'});
$bttn.on('click', function() {
if (!$(this).hasClass('ui-draggable-dragging')) $cont.toggle();
});
$cont.on('click', function() {
$trip.eq(++i % tripL).show().siblings($trip).hide();
});
});
html, body { height:100%; margin:0;}
body {
background-color: grey;
}
#button {
width: 100px;
height: 100px;
background-color: cyan;
}
#content {
display: none;
cursor: all-scroll;
top: 10%;
left: 10%;
position: absolute;
}
.trip {
width: 200px;
height: 200px;
background-color: blue;
color: white;
}
.trip ~ .trip {display: none;}
<!-- PS: Add class="draggable" to draggable elements -->
<div id="button" class="draggable">Button</div>
<div id="content" class="draggable">
<div class="trip" id="a">div 1</div>
<div class="trip" id="b">div 2</div>
<div class="trip" id="c">div 3</div>
</div>
<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="https://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="https://raw.githubusercontent.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script>
EDIT
For more contents see this answer: https://stackoverflow.com/a/57351517/383904
HTML: It's really simple, just the slide with the buttons to change the image.
<img src="https://i.ytimg.com/vi/QJg2z3rRgSE/maxresdefault.jpg" id="myslides">
<ul id="mylist">
<li><button class="btns" id="btn1">Previous</button></li>
<li><button class="btns" id="btn2">Next</button></li>
</ul>
CSS: I don't need help here, I'm not much into design.
#myslides {
height: 100%;
width: 100%;
margin-left: auto;
margin-right: auto;
}
#mylist,
li {
display: inline-block;
position: relative;
top: -5px;
left: -20px
}
.btns {
height: 50px;
width: 200px;
background: #666666;
color: white;
font-size: 20px;
}
JQuery: I have no clue what I'm doing wrong here. "image" can't be undefined because it's not "img" so why isn't the src change working?
$(docuent).ready(function() {
var slide = $("#myslides");
$("#btn2").click(function() {
if (slide.attr("src") == "https://i.ytimg.com/vi/QJg2z3rRgSE/maxresdefault.jpg") {
slide.attr("src", "https://techgage.com/wp-content/uploads/2015/11/The-Witcher-3-Wild-Hunt-at-3440x1440-Resolution.jpg");
}
});
});
$(docuent).ready(function() {
var slide = $("#myslides");
$("#btn2").click(function() {
if (slide.attr("src") == "https://i.ytimg.com/vi/QJg2z3rRgSE/maxresdefault.jpg") {
slide.attr("src", "https://techgage.com/wp-content/uploads/2015/11/The-Witcher-3-Wild-Hunt-at-3440x1440-Resolution.jpg");
}
});
});
#myslides {
height: 100%;
width: 100%;
margin-left: auto;
margin-right: auto;
}
#mylist,
li {
display: inline-block;
position: relative;
top: -5px;
left: -20px
}
.btns {
height: 50px;
width: 200px;
background: #666666;
color: white;
font-size: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://i.ytimg.com/vi/QJg2z3rRgSE/maxresdefault.jpg" id="myslides">
<ul id="mylist">
<li><button class="btns" id="btn1">Previous</button></li>
<li><button class="btns" id="btn2">Next</button></li>
</ul>
You misspelled document. If you're looking for a more scalable way to make a slider, you could try something like this:
$(document).ready(function () {
var visibleSlide = $("#myslides");
var slideList = [
"https://i.ytimg.com/vi/QJg2z3rRgSE/maxresdefault.jpg",
"https://techgage.com/wp-content/uploads/2015/11/The-Witcher-3-Wild-Hunt-at-3440x1440-Resolution.jpg"
];
var currentSlideIndex = 0;
$("#btn1").click(function () {
changeSlide('previous');
});
$("#btn2").click(function () {
changeSlide('next');
});
function changeSlide(direction) {
switch(direction) {
case 'previous':
if (currentSlideIndex > 0) {
currentSlideIndex--;
}
break;
case 'next':
if (currentSlideIndex < slideList.length - 1) {
currentSlideIndex++;
}
break;
default:
// no-op
}
visibleSlide.attr('src', slideList[currentSlideIndex]);
}
});
See CodePen.
In the event that you don't have jQuery loaded onto the page, I've added it to the bottom of your HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
your code is properly working but you need to change only $(docuent) to $(document)
hear you can see Click to see
$(document).ready(function() {
you write here like below
$(docuent).ready(function() {
I created a image slider in Jquery, as I move my image clicking the forward or backward button the image which has to change comes down and then fades out. Its like a small fluctuation. Why is this happening ?
JSfiddle link - https://jsfiddle.net/76xjmfjo/2/
HTML
<div class="container">
<img class="back" src="http://placehold.it/50x20/000000"></img>
<div class="slide-container">
<div class="slide">
<img src="http://placehold.it/940x350">
</div>
<div class="slide ">
<img src="http://placehold.it/940x350">
</div>
<div class="slide">
<img src="http://placehold.it/940x350">
</div>
</div>
<img class="forward" src="http://placehold.it/50x20/000000"></img>
</div>
CSS
*{
margin: 0;
padding: 0;
}
.container{
width: 980px;
margin: 0 auto;
}
.slide-container{
position: relative;
margin : 0 auto;
width: 958px;
height: 368px;
}
.slide{
width: 940px;
position: absolute;
padding: 4px;
border: 5px solid black ;
z-index: 1;
}
.active{
position: relative;
}
.back,.forward{
top: 150px;
position:absolute;
z-index: 10000;
cursor: pointer;
}
.forward{
left: 950px;
}
jQUERY
$(document).ready(function () {
var speed = 500;
//showing the first image (adding class active)
$('.slide').first().addClass('active');
$('.slide').hide();
$('.active').show();
//assigning events for the forward and backward buttons
$('.forward').on('click', function () {
nextSlide();
});
$('.back').on('click', function () {
prevSlide();
});
//next Slide function
function nextSlide() {
$('.active').removeClass('active').addClass('oldActive');
if ($('.oldActive').is(':last-child')) {
$('.oldActive').removeClass('oldActive');
$('.slide').first().addClass('active');
}
else {
$('.oldActive').next().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.slide').fadeOut(speed);
$('.active').fadeIn(speed);
}
//Previous slide function
function prevSlide() {
$('.active').removeClass('active').addClass('oldActive');
if ($('.oldActive').is(':first-child')) {
$('.oldActive').removeClass('oldActive');
$('.slide').last().addClass('active');
}
else {
$('.oldActive').prev().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.slide').fadeOut(500);
$('.active').fadeIn(500);
}
});
Just fadeIn $('.active') on complete function of $('.slide');
$('.slide').fadeOut(speed, function(){
$('.active').fadeIn(speed);
});
I have this code:
#main {
max-width: 500px;
height: 900px;
margin: auto;
background: green
}
.menu1 {
height: 30px;
background: red
}
.menu2 {
display: none;
}
<div id="main">
<div class="menu1">COntent 1</div>
<div class="menu2">Content 2</div>
</div>
How to: When I'm scroll down div .menu2 display sticky in top as css
.menu2 {
height: 30px; background: blue; position: fixed
}
My code: http://jsfiddle.net/rh1aLnxs/
Thanks
this can be accomplished with css's position:fixed, as long as you don't need additional behavior regarding the parent div (position:fixed is ignorant to the parent in css)
here's an example:
.menu1 {position:fixed; height: 30px; background: red; max-width: 500px; width:100%}
http://jsfiddle.net/rh1aLnxs/
If you need for example, for menu1 to go away when the user scrolls below main, then you need to use jquery's scroll event and handle the positioning manually (http://api.jquery.com/scroll/)
try this:
var headerTop = $('.menu1').offset().top;
// var headerBottom = headerTop + 120; // Sub-menu should appear after this distance from top.
$(window).scroll(function () {
var scrollTop = $(window).scrollTop(); // Current vertical scroll position from the top
if (scrollTop > headerTop) { // Check to see if we have scrolled more than headerBottom
if (($(".menu2").is(":visible") === false)) {
$('.menu1').hide();
$('.menu2').fadeIn('slow');
}
} else {
if ($(".menu2").is(":visible")) {
$('.menu2').hide();
$('.menu1').fadeIn('slow');
}
}
});
#main {
max-width: 500px;
height: 900px;
margin: auto;
background: green
}
.menu1 {
height: 30px;
background-color: red
}
.menu2 {
background-color: blue;
max-width: 500px;
width: 100%;
top: 0;
display: none;
/*display: none*/
position: fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main">
<div class="menu1">Content1</div>
<div class="menu2">Content2</div>
</div>
Here are some improvements on your fiddle along with a simplified version of the script to add/remove a fixed class on scroll.
http://jsfiddle.net/rh1aLnxs/2/
jQuery(window).bind("scroll", function() {
if (jQuery(this).scrollTop() > 100) {
jQuery(".menu1").removeClass("no-fixed").addClass("fixed");
} else {
jQuery(".menu1").removeClass("fixed").addClass("no-fixed");
}
});
#main {max-width: 500px; height: 900px; margin: auto; background: green}
.menu1 {height: 30px; background: red}
.menu2 {display: none}
#main {
width:100%;
position:relative;
}
.no-fixed {
position: relative;
}
.fixed {
position: fixed;
width:100%;
max-width: 500px;
}
<div id="main">
<div class="menu1"></div>
<div class="menu2"></div>
</div>