Coda Slider:
http://jqueryfordesigners.com/coda-slider-effect/
I recently implemented the Coda Slider on my webpage but I came across one issue. What the issue more like a implementation, I was wondering about is, change/disable the left button if the user is on the first slide and change/disable the right button if the user is on the right slide. User cannot press the left button to go to the last slide and the right button to scroll all the way to the first slide. I would like to disable that feature.
I tried to look at the code and see where I would have to change or add the code to but was unable to determine. Can anyone please help?
Example:
I have four slides (0-3) What code would I add so the left button (id=leftb) is hidden when I scroll to slides 0 and the right button (id=rightb) is hidden when I scroll to slide 3. I added the following code:
if (n<0) { //if on first slide make left button hidden and right button visible
if (document.getElementById) {
document.getElementById('leftb').style.visibility = 'hidden';
document.getElementById('rightb').style.visibility = 'visible';
}}
if (n==0 || n==1 || n ==2) { //if on second and third slides make both button visible
if (document.getElementById) {
document.getElementById('leftb').style.visibility = 'visible';
document.getElementById('rightb').style.visibility = 'visible';
}}
if (n>2) { //if on last slide make right button hidden and left button visible
if (document.getElementById) {
document.getElementById('leftb').style.visibility = 'visible';
document.getElementById('rightb').style.visibility = 'hidden';
}}
The above code i think makes sense in terms hiding and showing the navigation button based on the slide number but it's not working.
Any idea?
EDIT:
The files version i currently have are:
jquery-1.2.6.js
jquery.easing.1.3.js
jquery.localscroll-1.2.5.js
jquery.scrollTo-1.3.3.js
jquery.serialScroll-1.2.1.js
coda-slider.js
Which files am i downloading from the github and update ony my server for it to work properly?
I've forked serialScroll to add this feature. You now have a 'wrap' option that you can set to false to disable. You can check my commit on github to see the details:
https://github.com/lperrin/jquery.serialScroll
Basically, I added checkDisableWrap:
function checkDisableControls( pos, limit ){
$(settings.prev).css('visibility', pos <= 0 ? 'hidden' : 'visible');
$(settings.next).css('visibility', pos >= limit ? 'hidden' : 'visible');
};
Which is triggered every time the plugin scrolls.
Related
Title is pretty self explanatory.
I'm creating a website in a single HTML file, where different pages are just divs that go from display:none to display:block, according to an onclick function. In one of those pages I want to use a Slick Slider. Unfortunately, the Slider doesn't load properly the first time that div is shown. It only comes back to life if I press the next/previous button or if I resize the browser. Is there any way to fix the problem?
Here's the Fiddle (sorry that it probably has more code lines than it needs). The relevant CSS is at the end and the relevant javascript is well identified.
https://jsfiddle.net/Santos1600/9xv67aL8/
The progress to get to the slider is: Click on the image below "Sonhar", Open the hamburger Menu, Click on "Episódios", use previous or next button to see how it should load. This is still a work in progress...just random divs with gray background.
Slick.js cannot figure out the width of the slides if you initialize your slideshow while your slide elements are hidden, so it sets the width to zero. One solution is to refresh your Slick instance once you reveal your slideshow. In your case:
function SwapDivsWithClick(div1, div2) {
var d1 = document.getElementById(div1);
var d2 = document.getElementById(div2);
if (d2.style.display == "none") {
d1.style.display = "none";
d2.style.display = "block";
} else {
d1.style.display = "block";
d2.style.display = "none";
}
// Refresh slideshow when Episodios is revealed
if (div2 === 'episodios') {
$(".postwrapper").slick("refresh");
}
}
JS Fiddle: https://jsfiddle.net/vhoejgum/
More information about the slick.js issue: https://github.com/kenwheeler/slick/issues/235
I'm trying to create some sort of info "Scroll Down" button (not clickable) which has to be visible while scroll bar is up on top, fade out when scroll down a few pixels and fade back in when up again.
So far I was able to create the arrow and the message so far as well as the fading part.
Here is a fiddle: https://jsfiddle.net/8b3jL7r0/1/
var btn = $("#button");
$(window).scroll(function() {
if ($(window).scrollTop() < 100) {
btn.addClass("show");
} else {
btn.removeClass("show");
}
});
var btn2 = $("#scrolltxt");
$(window).scroll(function() {
if ($(window).scrollTop() < 100) {
btn2.addClass("showx");
} else {
btn2.removeClass("showx");
}
});
The problem with is that the arrow and the info text 'Scroll Down' does not appear right from the beginning, you have to scroll down a bit so they appear on top and then everything works smooth. Any clue how to make them visible right from the first load of the code?
Any idea how could I transfer all this code into one single code module in WordPress and have it work exactly like in the fiddle ? Because I've tried to insert it but it seems to not work at all, nothing appears on the page, not the arrow nor the info text.
I just added the inital classes to both elements:
https://jsfiddle.net/4e2cafju/
<div id="button" class="show"></div>
<div id="scrolltxt" class="showx">scroll down</div>
for 2:
You should be able to put these elements directly into a template. You should be able to add the css to the style sheet. And you could lnk to an external JS file. That would probably be best practice. You could also put all the code into a single page. I'm not sure how your wordpress install / theme is set up.
I am looking to develop a page where i can have a vertical slide show (cointaining images and text) which changes on scrolling down and once the last slide is reached, parent page starts to scroll. You can see the example on the following page
https://www.mi.com/in/redmi-note5/
I tried with various examples, but all of them are for full page examples. So here I would like to have the vertical slides inside a section on the page.
Hope someone can help me out here.
I am trying to use FSVS code.
You can check the attempted code here
Trial page
you can use slick slider.check the demos you'll get your answer.
http://kenwheeler.github.io/slick/
you can use wheel event and make sure you set infinite: false in slick options.
var $sliderElm = $('.slider');
$sliderElm.on('wheel', function(event) {
event.preventDefault();
if (event.originalEvent.deltaY < 0) {
$(this).slick('slickPrev');
} else {
$(this).slick('slickNext');
}
});
I have a simple CSS created design. Upon click of an arrow-looking CSS div I have another design slide into the frame from left: -9999px.
I can't seem to figure out how to make that div susceptible to more than one click.
this is what i mean:
Imagine the design looks like an X. Upon the click of a div a Y slides in from the right. XY. When the user clicks the button again I want the Y to slide out, and continue the same path to the left. I have the following JS:
topleft.addEventListener('click', function(){
addLeft.classList.replace('out', 'slideLeft')
addRight.classList.replace('out', 'slideLeft')
})
Since i am learning JS I'm looking for a vanilla JS solution, without any frameworks/libraries.
Thanks all
topleft.addEventListener('click', function(){
if (addLeft.classList[1] == 'out'){
addLeft.classList.replace('out', 'slideLeft')
addRight.classList.replace('out', 'slideLeft')
} else if (addLeft.classList[1] == 'slideLeft') {
addLeft.classList.replace('slideLeft', 'slideOut')
addRight.classList.replace('slideLeft', 'slideOut')
setTimeout(function(){
addLeft.classList.replace('slideOut', 'out'),
addRight.classList.replace('slideOut', 'out')
}, 300)
}
})
I have an image scroller that I am trying to implement. The image scrolling works, but it is moving vertically instead of horizontally. Here is what I got so far:
Next Image
$('#btnNext').click(function () {
//Calls new image with value true, meaning next image
newImage(true);
return false;
});
function newImage(direction) {
//Get the current selected item (with selected class), if none was found, get the first item
current_image = $('#imageGallery li.selected').length ? $('#imageGallery li.selected') : $('#imageGallery li:first');
//If determines slideshow direction
if (direction) { //Next image
//Get next sibling
next_image = (current_image.next().length) ? current_image.next() : $('#imageGallery li:first');
} else { //Previous image
//Get previous sibling
next_image = (current_image.prev().length) ? current_image.prev() : $('#imageGallery li:last');
}
//Clear selected class
$('#imageGallery li').removeClass('selected');
//Reassign selected class to current image
next_image.addClass('selected');
//Scroll images
$('#images').scrollTo(next_image, 800);
}
Update: Here are my quesions:
1) How do I edit this to make it move horizontally?
2) Is there a way to make an image scroller like this without using .scrollTo()?
I assume you want to make the gallery move horizontally, not vertically. (You say both in the question.) This is just a CSS issue: change the list to show horizontally (display: inline-block or float: left for instance) and the scrollTo plugin should do that for you.
It is possible to do this without the scrollTo plugin. The plugin uses the jQuery animate function to move around the page and, well, you can do the same if you want. :) Here's a quick jsFiddle that uses animate to move pictures in a gallery. Obviously it needs quite a bit of work (doesn't go back to the beginning at the last pic, only goes 1 way, doesn't calculate picture width, etc.), but it should hopefully give you an idea of how it can be done.
http://jsfiddle.net/meloncholy/KzBzT/