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
Related
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 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)
}
})
after a little advice. I'm working on my portfolio and I'm using a css transition to animate an element with some contact information which becomes active when the user scrolls up.
Within this element there is a figure class element called '.top-bar-avatar' which I have added a tool-tip and bounce animation too. This is all working but what I would like to achieve is for the tool-tip to automatically display and animation to fire when the figure is displayed within the web browser.
HTML
<li><figure class="top-bar-avatar"><img src="img/nick_avatar.png" alt="Top Bar Avatar Image Of Nick" title="Find Out More About Me" data-toggle="tooltip" data-placement="bottom"></figure></li>
JS
$('[data-toggle="tooltip"]').tooltip();
var lastScrollPosition = 0;
window.onscroll = function() {
var newScrollPosition = window.scrollY;
if (newScrollPosition < lastScrollPosition){
//upward code here
$('.top-bar').addClass('top-bar-animate');
}else{
//downward - code here
$('.top-bar').removeClass('top-bar-animate');
}
lastScrollPosition = newScrollPosition;
}
Tried a few different ways of doing this with yet to succeed. Any advice would be appreciated. Cheers in advance
I seem to have resolved this myself, i simply added and removed the display attribute and modified it's value within my existing code, see below.
Oh I also added a div id called 'profile-pic' to the image element, rather than focus on the figure class it's contained within.
var lastScrollPosition = 0;
window.onscroll = function() {
var newScrollPosition = window.scrollY;
if (newScrollPosition < lastScrollPosition){
//upward code here
$('.top-bar').addClass('top-bar-animate');
// display tool-tip when top-bar animates in
$('#profile-pic').tooltip('show');
}else{
//downward - code here
$('.top-bar').removeClass('top-bar-animate');
// hide tool-tip when top-bar animates out
$('#profile-pic').tooltip('hide');
}
lastScrollPosition = newScrollPosition;
}
I'm working on a new portfolio for myself, using Bootstrap framework and I want to animate my slider based on the direction that the user is scrolling.
For example I already have an animation to slide the navbar class in. But as the user scrolls down the page I want to hide the navbar this is to give the user more visibility on the screen when browsing content. Then when they attempt to scroll back up the page I want to slide the .navbar class back in again.
Now I can easily get this to work if I target a specific element or pixel height, but that doesn't help me. I know it's achievable as I've seen it on several websites (LinkedIn for example).
So I'm wondering if it's a case of targeting positive or negative values on the y axis or something?
var lastScrollPosition = 0;
window.onscroll = function() {
var newScrollPosition = window.scrollY;
if (newScrollPosition < lastScrollPosition){
//upward - code here
}else{
//downward - code here
}
lastScrollPosition = newScrollPosition;
}
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.