Im trying to create a simple content slider with jQuery and css.
The slider has two columns :
the right one acts as a slider pager
the left one contains current content
I've managed to create html, css and jQuery function which changes active tab and related content. but I want function to repeat itslef and by hovering to pagers slider stop paging, then by mouseout slider continue.
HTML
<div id="slider">
<div id="rightcol">
<div class="content" id="content1">
</div>
<div class="content" id="content2">
</div>
<div class="content" id="content3">
</div>
</div>
<div id="leftcol">
<ul>
<li id="1" class="active">a</li>
<li id="2">b</li>
<li id="3">c</li>
</ul>
</div>
</div>
CSS
#slider
{
width: 600px;
height: 300px;
}
#leftcol
{
width: 300px;
height: 300px;
float: left;
}
#rightcol
{
width: 300px;
height: 300px;
float: right;
background-color: #F0F0F0;
}
#leftcol ul li
{
width: 300px;
height: 100px;
}
#leftcol ul li.active
{
background-color: #F0F0F0;
}
.content
{
width: 300px;
height: 300px;
display: none;
}
jQuery
$(document).ready(function () {
sd(3);
});
function sd(currentId) {
var currentcontent = "content";
s = "#" + String(currentcontent) + String(currentId);
$("#leftcol ul li").removeClass("active");
$(".content").hide();
$("#" + String(currentId)).addClass("active");
$(s).show();
}
What should be added to js?
jsfiddle demo
I have tried in simple jQuery content slider in the below way & its working even in responsive.
Demo link: jsfiddle.net/b54c38hj/1/
<div class="container">
<div class="slider">
<ul>
<li>Slider-1</li>
<li>Slider-2</li>
<li>Slider-3</li>
</ul>
</div>
<a class="prev" href="javascript:void(0)">Prev</a>
<a class="next" href="javascript:void(0)">Next</a>
body{
margin:0;
padding:0;
}
.container{
width: 100%;
height: 300px;
background: rgba(0,0,0,.45);
margin: 0 auto;
}
.container .slider{
overflow: hidden;
height: 300px;
}
.container .slider ul{
position: relative;
padding:0;
margin:0;
list-style-type: none;
height: 300px;
}
.container .slider ul li{
background: #efefef;
float: left;
color: #000;
font-size: 22px;
text-align: center;
height: 300px;
line-height: 300px;
}
.container a{
text-decoration: none;
position: absolute;
}
.container a.prev{
left: 0;
}
.container a.next{
right: 0;
}
var Slider = {};
Slider = {
_globalvar: function(){
var self = this;
self.Ele = $('.slider');
self.EleList = this.Ele.find('li');
self.Elelength = this.EleList.length;
self.Elewidth = this.Ele.outerWidth(true);
self.EleSetUl = this.Elelength * this.Elewidth;
self.current = 0;
},
_assignvar: function(){
Slider.Ele.find('ul').width(Slider.EleSetUl);
Slider.EleList.width(Slider.Elewidth);
Slider.Ele.find('li:first-child').addClass('active');
},
_prev: function(){
var prevlength = Slider.Ele.find('li.active').prev().length;
console.log(prevlength)
if(prevlength != 1){
Slider.current = null;
}
else{
Slider.Ele.find('li.active').removeClass('active').prev().addClass('active');
Slider.current = "+="+Slider.Elewidth;
}
Slider.Ele.find('ul').animate({
left: Slider.current
});
return false;
},
_next: function(){
var nextlength = Slider.Ele.find('li.active').next().length;
if(nextlength){
Slider.Ele.find('li.active').removeClass('active').next().addClass('active');
Slider.current = "-="+Slider.Elewidth;
}
else{
Slider.current = null;
Slider.Ele.find('li.active').removeClass('active').parent().find('li:first-child').addClass('active');
}
Slider.Ele.find('ul').animate({
left: Slider.current
});
return false;
},
_bind: function(){
$('.prev').on('click', function(){
Slider._prev();
});
$('.next').on('click', function(){
Slider._next();
});
},
_init: function(){
var self = this;
self._globalvar();
self._assignvar();
self._bind();
}
};
$(document).ready(function(){
Slider._init();
});
https://jsfiddle.net/b54c38hj/1/
To make it to reapeat you can use the setTimeout() and to make it stop whenever your mouse goes over the content you can use the hover() jquery event! Here's a Demo
Related
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
My Code:
window.addEventListener('scroll', scrollWhere);
function scrollWhere(e) {
var windowScroll = $(window).scrollTop();
var idScroll = $('.me').offset().top;
var height = $("#half-who").height();
if (windowScroll > idScroll) {
$('.me').addClass('me-fixed');
} else {
$('.me').removeClass('me-fixed');
}
}
I want to add a class when the scroll is past a certain point and remove it when is smaller than that certain point.
Get your idScroll value outside scrollWhere function as because it re-initiate calculation again and again and returns different values each time as because it has a fixed position. check below snippet for reference.
window.addEventListener('scroll', scrollWhere);
var idScroll = $('.me').offset().top;
function scrollWhere(e) {
var windowScroll = $(window).scrollTop();
//var height = $("#half-who").height();
if (windowScroll > idScroll) {
$('.me').addClass('me-fixed');
} else {
$('.me').removeClass('me-fixed');
}
}
.container {
height: 300vh;
width: 100%;
background-color: grey;
padding: 0;
margin: 0;
}
.content {
height: 100px;
width: 100%;
background-color: cyan;
}
.me {
height: 50px;
width: 100%;
background-color: red;
}
.me-fixed {
position: fixed;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="content"></div>
<div class="me"></div>
</div>
Here's a simple example to add a class when scroll passing a certain point. Hope you can get an idea. >>> JSFiddle
$(window).scroll(function(){
var winH = $(window).scrollTop();
var ruler = $('.ruler').position().top;
if(ruler < winH){
$('.nav').addClass('me-fixed');
}
else{
$('.nav').removeClass('me-fixed');
}
});
body{
height: 1500px;
}
.nav{
height: 50px;
background: #a1bfbe;
color: #000;
width: 100%;
position: relative;
top: 250px;
text-align: center;
}
.nav.me-fixed{
background: #c2debf;
}
p{
font-size: 20px;
display: none;
}
.me-fixed p{
display: block;
}
.ruler{
position: fixed;
top: 150px;
border-bottom: 1px solid red;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
<p>
Fixed
</p>
</div>
<div class="ruler">
</div>
Also if you can provide the html and css structure, it will be easy to identify the issue.
I am linking to sections on the page that are inside collapsed fieldsets.
When a user clicks this link, I want to scroll down the page and open the fieldset to show the content.
I have all the scrolling set up, and it works until I hide the target inside a collapsed fieldset, then functionality breaks.
Section 1
<fieldset class="collapsed">
<div id="section1">
..content
</div>
</fieldset>
And then my jQuery for scrolling...
(function ($) {
var $root = $('html, body');
$('a').click(function() {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top
}, 500, function () {
window.location.hash = href;
});
return false;
});
}(jQuery));
How do I get the click on the anchor to open the fieldset, and then scroll down to it?
Add the <legend> element inside the <fieldset> and target the <legend> as #section1.
Add this to jQuery to toggle the class .collapsed and .expanded:
var exp = $(href).parent();
exp.toggleClass('collapsed', 'expanded');
You need to use CSS as well to create the .collapsed and .expanded states:
.collapsed {
height: 0;
border: none;
}
.expanded {
height: 300px;
}
#section1 {
height: 36px;
position: relative;
z-index: 1;
background: #000;
color: #fc2;
border-radius: 6px;
width: 100%;
}
.collapsed > .content {
font: 400 0/0 'Verdana';
height: 0;
line-height: 0;
opacity: 0;
}
.content {
position: relative;
top: 0;
left: 0;
height: 100%;
width: auto;
font: 400 16px/1.4 'Verdana';
}
The HTML is modified so you can click the <legend> of the <fieldset> and toggle .collapsed and .expanded as well.
<fieldset class="collapsed">
<legend id="section1">Heading</legend>
<div class="content">
..content XXXXX xxxxxxxxxxxnnnnnnnnnnnnn hbyigyugvyibrgh fwgewg wefgeh bbbbb uhuhouihoijpiok erhtru efwgwrhnj
</div>
</fieldset>
Snippet
(function($) {
var $root = $('html, body');
$('a').click(function() {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top
}, 500, function() {
window.location.hash = href;
});
var exp = $(href).parent();
exp.toggleClass('collapsed', 'expanded');
return false;
});
}(jQuery));
body {
font: 400 16px/1.4 'Verdana';
}
fieldset {
width: 400px;
position: relative;
}
legend {
margin-top: 25%;
text-align: center;
font-size: 24px;
}
a {
width: 100%;
text-decoration: none;
display: inline-block;
}
.collapsed {
height: 0;
border: none;
}
.expanded {
height: 300px;
}
#section1 {
height: 36px;
position: relative;
z-index: 1;
background: #000;
color: #fc2;
border-radius: 6px;
width: 100%;
}
.collapsed > .content {
font: 400 0/0 'Verdana';
height: 0;
line-height: 0;
opacity: 0;
}
.content {
position: relative;
top: 0;
left: 0;
height: 100%;
width: auto;
font: 400 16px/1.4 'Verdana';
}
.spacer {
height: 700px;
clear: both;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
Section 1
<!--For demo-->
<div class="spacer"></div>
<fieldset class="collapsed">
<legend id="section1">Heading</legend>
<div class="content">
..content XXXXX xxxxxxxxxxxnnnnnnnnnnnnn hbyigyugvyibrgh fwgewg wefgeh bbbbb uhuhouihoijpiok erhtru efwgwrhnj
</div>
</fieldset>
(function ($) {
var $root = $('html, body');
$('a').click(function() {
var href = $.attr(this, 'href');
$(href).parent().show(); //updated line
$root.animate({
scrollTop: $(href).offset().top
}, 500, function () {
window.location.hash = href;
});
return false;
});
}(jQuery));
Just made a simple change. Which you can see on, commented line above.
I am extremely new to JQuery, I just started looking into it today. I have searched all around for what might be causing this bit of code to not work. When you scroll down, I want the h1 to move to the side and a menu button to appear. That works, but when I scroll back up again, it takes an extremely long time to reverse itself. I have tried to fine anything that might be causing it like a delay or something, but as far as I can see, there isn't any problems.
Link to website: http://www.dragonmath.net/rockets
Here is my code:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles/main.css" />
<title>Rockets</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<header>
<img id="menu" src="images/menu1.png" />
<div id="headerdiv">
<h1>Rockets</h1>
<img id="logo" src="images/logo1.png" />
</div>
</header>
<nav>
<ul>
<li>
<a>Space Race</a>
</li>
<li>
<a>SpaceX</a>
</li>
</ul>
</nav>
<script>
$( document ).ready(function() {
var $menu = $('img#menu');
var $headerdiv = $("div#headerdiv")
var $nav = $('nav');
$(window).on('scroll', function () {
if ($(window).scrollTop() > 40) {
$headerdiv.addClass("testheaderdiv");
$menu.delay(800).slideDown(800);
$nav.addClass('testnav');
}
if ($(window).scrollTop() < 40) {
$menu.slideUp(800, function () {
$headerdiv.removeClass('testheaderdiv');
});
$nav.removeClass('testnav');
}
});
});
</script>
</body>
</html>
CSS
* {
margin: 0px;
padding: 0px;
color: #00AAFF;
font-family: Arial;
}
body {
height: 800px;
}
header {
position: fixed;
top: 0px;
left: 0px;
height: 100px;
width: 100%;
background-color: #333;
z-index: 1;
}
div#headerdiv {
display: inline;
transition: all 1s;
}
h1 {
display: inline;
margin-left: 40px;
font-size: 40px;
}
header > img#menu {
position: fixed;
top: 20px;
left: 40px;
width: 40px;
height: 40px;
display: none;
}
header > div > img#logo {
display: inline;
width: 60px;
height: 60px;
position: relative;
top: 18px;
left: 20px;
transition: height 1s, width 1s;
}
nav {
position: relative;
top: 100px;
height: 40px;
width: 100%;
background-color: #333;
}
nav > ul {
list-style: none;
}
nav > ul > li {
display: inline-block;
height: 40px;
width: 200px;
text-align: center;
border-right: 1px solid #00AAFF;
}
nav > ul > li > a {
position: relative;
top: 6px;
}
.testheaderdiv {
margin-left: 80px;
transition: all 1s;
}
.testnav {
display: none;
}
The main problem I could see with the code is how scroll is handled, for every scroll event you are adding delay to the menu element.
So try
$(document).ready(function () {
var $menu = $('img#menu');
var $headerdiv = $("div#headerdiv")
var $nav = $('nav');
var flag;
$(window).on('scroll', function () {
if (flag !== 1 && $(window).scrollTop() > 40) {
$headerdiv.addClass("testheaderdiv");
$menu.stop(true, true).delay(800).slideDown(800);
$nav.addClass('testnav');
flag = 1;
}
if (flag !== 2 && $(window).scrollTop() < 40) {
$menu.stop(true, true).slideUp(800, function () {
$headerdiv.removeClass('testheaderdiv');
});
$nav.removeClass('testnav');
flag = 2;
}
});
});
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>