How to have collapsible slideshow collapsed by default rather than sliding up? - javascript

I would like the slideshow to be collapsed by default. Right now when going to this page http://dev-caal.gotpantheon.com/membership we can see the slideshows for a split second and it then slides up. I would like it to be collapsed by default.
This is the js code:
$(document).ready(function(){
$('.jcarousel-clip').slideUp();
$(".jcarousel-prev, .jcarousel-next").hide();
$('.updown3').click(function() {
$('.jcarousel-clip ').slideToggle(300, function() {
$('.updown3').toggleClass('arrow-up');
$(".jcarousel-prev, .jcarousel-next").toggle();
return false;
});
});});

Render it off the page, collapse it, then inject it into the area you would like
or you can try doing element.hide().slideUp(function(){this.show();});

You can add a display: none to .jcarousel in your css file and only show it afterwards.

Related

Fading text+icon when scrolling down. Appears while again on top

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.

Vertical scrollable Slider inside a container

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');
}
});

BUG with href containing Anchor #id - hits top of page for split second before jumping to Anchor

I have a bug in my site and I’m having trouble finding an elegant solution. I bet there’s a simple way to fix this .. I’m just not seeing it. I would appreciate any suggestions.
example: http://robbroadwell.com/portfolio/ios-apps/rainylectures/
The detail pages on my portfolio have a main nav and then below that a sub nav. If the user has scrolled down below the main nav where it’s out of sight, I’m using jQuery to append the href of the left/right arrows with an anchor tag so that the main nav is hidden on the page they navigate to.
The problem is about 25% of the time the browser hits the destination page at the TOP for a SPLIT SECOND before it jumps down to the anchor tag, so you see the top nav for just a second. It looks buggy and bad.
Thoughts… should I use CSS transitions to hide it? Should I pass a value in the URL and then pick up on it on the destination page to set the main nav to display: none, and then if the browser is at the top of the window and the user scrolls up, add it back in?
Any help would be appreciated!
You already pass a value in the url: #local-nav
I didn't test it... But I think this could work:
if(location.hash){
$(".navbar-absolute-top").css("visibility","hidden");
setTimeout(function(){
$(".navbar-absolute-top").css("visibility","visible");
},500);
}
-------
EDIT based on comment
Okay then...
What if you set the non-visibility in CSS?
.navbar-absolute-top{
visibility=hidden;
}
Then we decide when to set it visible.
If there a hash in the url ==> wait... If not ==> Don't wait!
;)
if(location.hash){
// Holds on before setting the main nav visible
setTimeout(function(){
$(".navbar-absolute-top").css("visibility","visible");
},500);
}else{
// Sets the main nav visible right now
$(".navbar-absolute-top").css("visibility","visible");
}
500ms may need to be adjusted
;)
-------
EDIT based on comment
About "choppy effect"... Maybe animate() will give a smoother effect using opacity:
body{
opacity=0;
}
if(location.hash){
// Holds on before setting the main nav visible
setTimeout(function(){
$("body").animate({"opacity":1},200);
},50);
}else{
// Sets the main nav visible right now
$("body").animate({"opacity":1},200);
}
to complete the effect... You should add a $("body").animate({"opacity":"0"},200); in a paddle-nav-item a .click() handler that will redirect on .animate callback:
$(".paddle-nav-item a").click(function(e){
// Hold the click event
e.preventDefault();
// Opacity effect
$("body").animate({"opacity":"0"},200,function(){
// Callback retreive the href and redirect AFTER the animation has completed
redirectTo = $(this).attr("href");
location.assign(redirectTo);
});
});
;)

Scrolling issues with multiple bootstrap modals

I have a page with a modal with a lot of info so you need to scroll. This modal contains a link to a second modal.
When I
open modal 1
click on link to open modal 2 (modal 1 stays in background)
and then close modal 2 so that I am back on modal 1
modal 1 looses scrolling (there is still a scroll bar but it doesn't do anything). Instead the modal stays in the position it was at the time of opening modal 2.
I played around with closing the background modal with js first (but that messes up scrolling on the second modal). It appears that every time I try to open/close more than one modal I always get some issue with the scrolling.
Any suggestions on how to handle this?
Add
.modal { overflow: auto !important; }
To your CCS.
Without your code I went ahead and created this jsFiddle that recreates your issue, or at least a very similar one. Add your code and I will test if this works or not.
Adding that line to the CSS fixed the issue as demonstrated with this jsFiddle.
Solution taken from this thread on github which offers other solutions as well.
The solution that worked for me was:
$('.modal').on("hidden.bs.modal", function (e) {
if ($('.modal:visible').length) {
$('body').addClass('modal-open');
}
});
$(document).on('hidden.bs.modal', '.modal', function () {
$('.modal:visible').length && $(document.body).addClass('modal-open');
});
this is the solution:
<script>
$('#id_ofyou_secondary_modal').on('hidden.bs.modal', function (e) {
$('body').addClass('modal-open');
});
</script>
take care that "#idofyousecondarymodal" is the id of the secondary or tertiary or infinite modal. but NEVER write the ID of the first modal.
example i have 2 modal:
<div id="mymodal1" class="modal fade in" style="display:none;">
.
.
.
.
</div>
<div id="mymodal2" class="modal fade in" style="display:none;">
.
.
.
.
</div>
then the script will be:
<script>
$('#mymodal2').on('hidden.bs.modal', function (e) {
$('body').addClass('modal-open');
});
</script>
jus add this code and work fine.
I tried the previous solutions, and not working for my use case:
just adding css .modal { overflow: auto !important; }
This will cause the content below modal become scrollable. Not good when you want to keep the previous content position. especially in mobile browser.
Use javascript to track opened modal and keep the 'modal-open' class in body element using this jQuery selector $('.modal:visible').length. This is not working when there are multiple modal opened and closed fast. I use BS modal for my ajax spinner, so the $('.modal:visible') is not accurate.
This is the working one for me:
Use JS global variable to keep track/count of opened modal; instead of just using :visible selector
And I added css style so I don't have to recalculate backdrop z-index
https://stackoverflow.com/a/63473738/423356
var bootstrapModalCounter = 0; //counter is better then using visible selector
$(document).ready(function () {
$('.modal').on("hidden.bs.modal", function (e) {
--bootstrapModalCounter;
if (bootstrapModalCounter > 0) {
//don't need to recalculate backdrop z-index; already handled by css
//$('.modal-backdrop').first().css('z-index', parseInt($('.modal:visible').last().css('z-index')) - 10);
$('body').addClass('modal-open');
}
}).on("show.bs.modal", function (e) {
++bootstrapModalCounter;
//don't need to recalculate backdrop z-index; already handled by css
});
});
.modal {
/*simple fix for multiple bootstrap modal backdrop issue:
don't need to recalculate backdrop z-index;
https://stackoverflow.com/questions/19305821/multiple-modals-overlay/21816777 */
background: rgba(0, 0, 0, 0.5);
}
This is modified fiddle from #Keeleon for the fix https://jsfiddle.net/4m68uys7/
This is github issue https://github.com/nakupanda/bootstrap3-dialog/issues/70
Add following to your CSS :
.modal
{
overflow: scroll !important;
}

jQuery .hide() -- sliding elements left

I'm fixing my nav to the top of the page. I'm using Bootstrap (CSS only). I'm using jQuery to hide one logo (img class .logo) and show another (img class .logo-sm), on scroll.
Everything basically works, except for one thing. The hiding function slides the main logo to the left as it fades out, but I'd like it to slide up. I'm pretty sure this is not .hide() function's default behavior, but I don't know jQuery very well so I'm not sure how to change it.
I built a JSFiddle to demonstrate the behavior. It doesn't work consistently for some reason (it does locally), but you can see the logo sliding left the first time you scroll down.
JSFiddle
The script:
$(document).ready(function() {
// nav fixing
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$(".logo").hide(100);
$(".logo-sm").show(200);
} else {
$(".logo").show(100);
$(".logo-sm").hide(200);
}
});
});
This is happening because .show() is applying display: inline-block when what you need is display: block.
To fix this, you need to find what's setting the header .logo css display value to be inline and change it to block. From the jquery api, show will set the display property to whatever it was set to initially. In this case, it's inline-block which is why your logo is moving to the left.
$.hide() only sets the display of the element to none. It doesn't animate. That behavior is probably caused by having transitions in your CSS.
If you want to animate the element with jQuery, you can use .slideUp() and .slideDown().
$(document).ready(function() {
// nav fixing
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$(".logo").slideUp(100);
$(".logo-sm").slideDown(200);
} else {
$(".logo").slideUp(100);
$(".logo-sm").slideDown(200);
}
});
});
But you've got some other stuff going on in your fiddle that is causing some weirdness so this won't work much better. I would suggest not animating with jQuery, but use it to change classes on the elements and handle the animation with CSS transitions. Something like this:
$(document).ready(function() {
// nav fixing
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$(".logo").removeClass("showing");
$(".logo-sm").addClass("showing");
} else {
$(".logo-sm").removeClass("showing");
$(".logo").addClass("showing");
}
});
});
And then style the .showing class with transitions.

Categories