I have a script which will make a simple slider with buttons to navigate.
Now I need to make this slider controllable with scrolling.
When user scroll down will be moved to the next slider also reverse.
Buttons will be available too. So there will be 2 options on how to control it. With buttons next and back also with scrolling down or up.
Is there any option of how to do it in the easiest way?
var lottieone = document.getElementById('lottieone');
var lottietwo = document.getElementById('lottietwo');
var lottiethree = document.getElementById('lottiethree');
var lottiefour = document.getElementById('lottiefour');
$('#lottieone').show();
$('#lottietwo').hide();
$('#lottiethree').hide();
$('#lottiefour').hide();
function missionsSlide() {
$('#lottieone').hide();
$('#lottietwo').show();
$('#lottiethree').hide();
$('#lottiefour').hide();
}
function missionsSlideBacc() {
$('#lottieone').hide();
$('#lottietwo').show();
$('#lottiethree').hide();
$('#lottiefour').hide();
}
function researchSlide() {
$('#lottieone').hide();
$('#lottietwo').hide();
$('#lottiethree').show();
$('#lottiefour').hide();
}
function educationSlide() {
$('#lottieone').hide();
$('#lottietwo').hide();
$('#lottiethree').hide();
$('#lottiefour').show();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="slider">
<div id="lottieone" class="lottieSlide">
<div class="content">
<button onclick="missionsSlide()">HOME</button>
</div>
</div>
<div id="lottietwo" class="lottieSlide mainSliders">
<div class="content">
<h1>MISSIONS</h1>
<button onclick="researchSlide()">Next</button>
</div>
</div>
<div id="lottiethree" class="lottieSlide mainSliders">
<div class="content">
<h1>RESEARCH</h1>
<button onclick="missionsSlideBacc()">Back</button>
<button onclick="educationSlide()">Next</button>
</div>
</div>
<div id="lottiefour" class="lottieSlide mainSliders">
<div class="content">
<h1>EDUCATION</h1>
<button onclick="researchSlide()">Back</button>
</div>
</div>
</section>
Try using this snippet.
$(document).on('mousewheel', '.slider', function (e) {
var delta = e.originalEvent.wheelDelta;
if (delta > 0) alert("scrolled Up");
if (delta < 0) alert("scrolled Down");
e.preventDefault();
});
This is highly repeated question, so you might find multiple solution for it as well
Related
I am trying to hide the div if you click only on the header. But my filter does not seem to work. I get the intended function wherever I click on the div. I want to restrict this to only when you click on the header.
<div class="post" onclick="updatenext()">
<h2>Item3</h2>
</div>
<div class="post" onclick="updatenext()">
<h2>Item4</h2>
</div>
<script>
var index=0;
$(".post").hide();
$(".post").eq(0).show();
// Tried this too: $(".post").filter(":header")....
$(":header.post").on("click",
function () {
index=$(this).index();
//console.log($(this).index());
$(this).hide();
$(".post").eq(index).show();
}
);
</script>
I expect the click to work only when clicking on the header element within each div.
Try using only jQuery for the event listener, like this:
<div class="post">
<h2 onclick="updatenext()">Item3</h2>
</div>
<div class="post">
<h2 onclick="updatenext()">Item4</h2>
</div>
<script>
var index = 0;
$(".post").hide();
$(".post").eq(0).show();
$("h2").on("click", function () {
index = $(this).parent().index();
$(this).parent().hide();
$(".post").eq(index).show();
});
</script>
I recently created a simple image slider here: http://americanbitcoinacademy.com/test2/
Which has basically a next and prev buttons and slides the image. You can check the codes of that here: https://jsfiddle.net/mmytscuz/
And now I am trying to apply these codes to my new element but this time instead of images I am trying to apply it using div elements.
You can check my current progress work here: https://jsfiddle.net/7808uLpv/
So basically when you click the next button it must slide up on the next list item element. For some reason it won't hide the other elements now also it doesn't slide either.
So far here's how I layout my elements:
<ul class="slider">
<li>
<div class="box center">
<h1>What is your name?</h1>
<input type="text" name="name" placeholder="Your Name.."/>
<div id="slider-nav">
<button data-dir="next" >Next »</button>
</div>
</div>
</li>
<li>
<div class="box center">
<h1>How much money do you have?</h1>
<input type="text" name="money" placeholder="Your Money.."/>
<div id="slider-nav">
<button data-dir="next" >Next »</button>
</div>
</div>
</li>
<li>
<div class="box center">
<h1>Your Birthday?</h1>
<input type="text" name="bday" placeholder="Your Birthday.."/>
<div id="slider-nav">
<button data-dir="next" >Next »</button>
</div>
</div>
</li>
</ul>
And here's my javascript:
(function() {
var container = $('div.slider').css('overflow', 'hidden').children('ul'),
slider = new Slider( container, $('#slider-nav') );
slider.nav.find('button').on('click', function() {
slider.setCurrent( $(this).data('dir') );
slider.transition();
});
})();
function Slider( container, nav ) {
this.container = container;
this.nav = nav.show();
this.imgs = this.container.find('img');
this.imgWidth = this.imgs[0].width; // 600
this.imgsLen = this.imgs.length;
this.current = 0;
}
Slider.prototype.transition = function( coords ) {
this.container.animate({
'margin-left': coords || -( this.current * this.imgWidth )
});
};
Slider.prototype.setCurrent = function( dir ) {
var pos = this.current;
pos += ( ~~( dir === 'next' ) || -1 );
this.current = ( pos < 0 ) ? this.imgsLen - 1 : pos % this.imgsLen;
return pos;
};
Any idea what am I doing wrong when I click the 'NEXT' button why the elements are not sliding as well why are they all showing up at once?
There's a lot wrong with your fiddle.
No jQuery loaded.
No div.slider that you refer to for plugin initialization.
You use id slider-nav like a class. Id must be unique.
In css li.slider needs to be .slider li
You're looking for images within js but there are none in the markup.
Consequently, your plugin is throwing errors, trying to detect width of these images that don't exist: this.imgs[0].width;
Imo, just start over, get a solid html and css base and only then try to write the js plugin.
Just add jQuery because without not working.See the Demo here
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
I have a button that toggles the playlistHolder div. In addition, when '.albumImage a' is selected, it also unhides the playlist. I am trying to change the text of the button to 'Show Playlist' if the playlist is hidden and 'Hide Playlist' if it is not hidden. I have tried click functions with if(('.playlist').is(:hidden)) but have not had any luck with getting it to work. I am new to Jquery so I understand that my code below can use much improvement, here is my setup now that works when the album image is selected as well as when the toggle button is selected without changing the text:
HTML
<div class="togglePlaylist">
<button id="togglePlaylistBT">Show/Hide Playlist</button>
<!-- POPUP LAUNCHER -->
</div>
<div class="playlistHolder">
<div class="componentPlaylist">
<div class="playlist_inner">
<!-- playlist items are appended here! -->
</div>
</div>
<!-- preloader -->
<div class="preloader"></div>
</div>
<div class="albumWrapper">
<div class="albumCovers">
<div class="albumImage"> <img class="img-responsive" src="media/music/Album_Covers/Swag_Brothers.jpg" alt="thumb" />
<p class="nowPlaying">Now Playing</p>
</div>
</div>
</div>
Javascript/JQuery
$('#togglePlaylistBT, .albumImage a').on('click', function() {
var $this = $('#togglePlaylistBT');
if($('.playlistHolder').is(':visible'))
{
$('.playlistHolder').hide('slow');
$this.text('Hide Playlist');
}
else
{
$('.playlistHolder').show('slow');
$this.text('Show Playlist');
}
});
Try this snippet of code:
$('.togglePlaylist button').on('click', function() {
var $this = $(this);
if($('.playlistHolder').is(':visible'))
{
$('.playlistHolder').hide();
$this.text('Hide Playlist');
}
else
{
$('.playlistHolder').show();
$this.text('Show Playlist');
}
});
Working JSFiddle
When you hide and show the playlist just run document.getElementById("togglePlaylistBT").value="Show Playlist";
For example:
function change()
{
var elem = document.getElementById("playlistButton");
if (elem.value=="Open Playlist") { elem.value = "Close Playlist"; closeBox(); }
else { elem.value = "Open Playlist"; openBox(); }
}
function openBox() {
alert("open");
}
function closeBox() {
alert("closed");
}
<input onclick="change()" type="button" value="Open Playlist" id="playlistButton"></input>
Make sure to change openBox() and closeBox() functions to your box code!
I'm very new to jQuery and coding in general and have been trying to get this sidebar to work. When you click on the INFO link a sidebar opens up. As of right now you can only close the sidebar by clicking on the X in the corner, but I want to also be able to close the sidebar when you click in the body area (but not when you click in the sidebar area). I got this to work sort of, but then I wasn't able to open any of my links to view my projects (only the second project, Frankenstein eBook, has a functioning link as of now).
Also, why are you able to click on the whole width of the line the X is on instead of just the X to close the sidebar?
I've seen a lot of similar problems on here but could never quite match it up to mine specifically. Any help would be awesome, and i Thank you!
Here is my site: Josh Diaz Portfolio
And here is a JSFiddle: JSFiddle
My HTML:
<div class="wrap">
<!--Sidebar-->
<!--Info Panel-->
<div class="infoPanel">
<nav class="closeBtn"> X
</nav>
<div class="infoText">
<h2>infoPanel</h2>
<p>Copy goes here.</p>
</div>
</div>
<section class="sidebar">
<div class="sidebarNav">
<nav> <a class="infoLink" href="#">INFO</a>
</nav>
</div>
<div class="content">
<section class="projects">
<div class="wrapper">
<ul class="grid">
<li> <a href="prj.html">
<div class="caption"><span>Image Go Here</span></div>
<img src="http://educ.jmu.edu/~diazjr/portfolio_website/images/coming_soon.jpg" />
</a>
</li>
<li> <a href="prj.html">
<div class="caption"><span>Image Go Here</span></div>
<img src="http://educ.jmu.edu/~diazjr/portfolio_website/images/coming_soon.jpg" />
</a>
</li>
<li> <a href="prj.html">
<div class="caption"><span>Images Go Here</span></div>
<img src="http://educ.jmu.edu/~diazjr/portfolio_website/images/coming_soon.jpg" />
</a>
</li>
<li> <a href="prj.html">
<div class="caption"><span>Image Go Here</span></div>
<img src="http://educ.jmu.edu/~diazjr/portfolio_website/images/coming_soon.jpg" />
</a>
</li>
</ul>
</div>
</section>
</div>
</section>
My JS:
$(document).ready(function () {
var menu = "close";
$('.infoLink').click(function () {
if (menu == "close") {
$('.infoPanel').css('-webkit-transform', 'translate(0,0)');
menu = "open";
} else {
$('.infoPanel').css('-webkit-transform', 'translate(100%,0)');
menu = "close";
}
});
$('.closeBtn').click(function () {
if (menu == "close") {
$('.infoPanel').css('-webkit-transform', 'translate(0,0)');
menu = "open";
} else {
$('.infoPanel').css('-webkit-transform', 'translate(100%,0)');
menu = "close";
}
});
});
Also, why are you able to click on the whole width of the line the X is on instead of just the X to close the sidebar?
Because $('.closeBtn') is referring to div and not the link, use $('.closeBtn a') instead.
Anyway, heres another Quick and dirty way ( needs a bit of refactoring ) but the idea is there. I'll add comments to this if it works for you: http://jsfiddle.net/Varinder/RfFSv/
$(document).ready(function () {
var menu = "close";
var $infoLink = $(".infoLink");
var $infoPanel = $(".infoPanel");
var $closeButton = $(".closeBtn a");
var $document = $(document);
$infoLink.on("click.nav",function (e) {
e.preventDefault();
e.stopPropagation();
sidebar("open");
});
$closeButton.on("click.nav",function (e) {
e.preventDefault();
e.stopPropagation();
sidebar("close");
});
$document.on("click.nav", function(e) {
if ( !$infoPanel.is(e.target) && $infoPanel.has(e.target).length === 0 ) {
sidebar("close");
}
});
function sidebar(action) {
if (action == "open") {
$('.infoPanel').css('-webkit-transform', 'translate(0,0)');
menu = "open";
} else if (action == "close") {
console.log("stuff");
$('.infoPanel').css('-webkit-transform', 'translate(100%,0)');
menu = "close";
}
}
});
You can try something like this:
Your HTML
<body>
<div id="content"></div>
<div id="sidebar"></div>
</body>
And your JS
$('body').click(function(){
$('#sidebar').hide(); //hide sidebar when body is clicked
});
$('#sidebar').click(function(e){
e.stopPropagation(); //this call will cancel the execution bubble
});
I hope this help.
I'm trying to show appropriate content using this method: determine id of the clicked div, than open div content with determined id + '-box'. But it doesn't work.
JQuery that doesn't work:
$(".portfolio-apps section").click(function() {
var currentID = '#' + $(this).attr('id');
console&&console.log(currentID);
var currentIDBox = currentID + "-box";
console&&console.log(currentIDBox);
$(currentID).click(function() {
$('.portfolio-entry-text').hide('fast');
var bcn = $(currentIDBox);
if ($('.box-content').is(':visible')) {
$('.box-content').hide();
bcn.show();
}
else {
$('.box-content').hide();
bcn.slideToggle(200);
}
});
});
Similar JQuery that is working:
$("#gterminal").click(function() {
$('.portfolio-entry-text').hide('fast');
var bcn = $('#gterminal-box');
if ($('.box-content').is(':visible')) {
$('.box-content').hide();
bcn.show();
}
else {
$('.box-content').hide();
bcn.slideToggle(200);
}
});
HTML
<div class="portfolio-apps clearfix">
<section class="button" id="gterminal">
<span>Google in Terminal</span>
</section>
<section class="button" id="MySQLToJSON">
<span>MySQL to JSON</span>
</section>
</div>
<div id="wrapper" >
<div class="box-content" id="gterminal-box">
<p>BOX 1</p>
</div>
<div class="box-content" id="MySQLToJSON-box">
<p>BOX 2</p>
</div>
</div>
You're binding a .click event internally, which means that the -box showing/hiding won't be triggered until a second click. This doesn't make sense to me. If you just remove the internal .click binding, it seems to work quite nicely:
http://jsfiddle.net/Th3wT/