Toogleble menu left slide appear - javascript

I'm trying to make a toggle window to pop coming from the right to the left.
I have tried this:
$('#menuDiv').show({ direction: "left", easing:"linear" }, 1750 );
But this has 2 problem:
The time 1750 is not having any effect.
The windows pops top to down with half width and right to left at the same time. (In a diagonal way).
Any help appreciated.
I'm using the jQuery UI library.

You made two mistakes:
You didn't specify the type of effect you want, which is the required option effect
You tried to specify the duration as second parameter, while you should have used the option duration
A working version of your code:
$('#menuDiv').show({
effect: "slide",
direction: "left",
easing:"linear",
duration: 1750
});

Related

Swiper slideTo last slide, whilst snapping to left hand side

In Swiper demos, slides snap to the left of the screen until you get to the final slides, which are prevented from snapping to left because (I presume) Swiper doesn't want to show whitespace down the righthand side:
Slide 10 will never snap to the left side
https://swiperjs.com/demos/120-slides-per-view-auto.html
In my opinion it feels like a bug to the user, especially when you trigger slide to slide 10 and it only pops into the right side.
The workarounds I've found are to either add a blank slide, or to add margin-right to the final slide, so then slide will snap to the left side:
.swiper-slide:last-child {
margin-right: calc(100vw - 300px);
}
Add margin-right to last slide
https://codepen.io/kmturley/pen/ExxrGgw
Add blank slide at end
https://codepen.io/kmturley/pen/JjjzKrK
Use loop functionality and then hide duplicates
https://codepen.io/kmturley/pen/oNNVLxL
Is there a better or built-in way to do? this without having to use a workaround?
I want to change this spacing dynamically later and if you change it manually, then you have to call swiper.update() causing layout updates. Also my current workaround requires you to know the width of the slides, or use custom javascript to calculate the widths. So a built-in or responsive solution would be preferable!
try to add loopedSlides: 8, and remove margin-right: calc(100vw - 300px);
var container = document.getElementById('container');
var content = document.getElementById('content');
var swiper = new Swiper('.swiper-container', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
slidesPerView: 'auto',
autoplayDisableOnInteraction: false,
loopedSlides: 8,
});
Your current workaround probably is quite optimal and I don't htink there is any built in way to acheave what you are trying to do. However you could consider to use loop: true option and this could give a better user experience.
https://codepen.io/rentodesign/pen/gOOqNwo

Can i disable fullPage.js if depending on div size?

Sorry if this is stupid question, but i'm not the greatest coder alive (actually i design websites for a living).
My question is: Can i disable fullPage.js depending on a div size?
I've been trying to look this up, but with no luck. I found this, but i don't think i know how to tweak it right, or if it's even possible:
if(.scrollable.width < 480) {
$('#fullpage').fullpage({
autoScrolling: false,
fitToSection: false
}} else {
$('#fullpage').fullpage({
autoScrolling: true,
fitToSection: true
}}
.scrollable = div starting at 0vw and expanding to 50vw.
I want the scroll from fullPage.js to stop when this div is bigger than 1vw.
Is this possible? Much thanks in advance.
You should use the responsive options provided by fullPage.js, such as responsiveWidth and responsiveHeight. You can find all about those options in the fullpage.js docs. And you can find examples online.
Example of usage:
$('#fullpage').fullpage({
responsiveWidth: 900,
responsiveHeight: 600
});
Additionally you can make use of the fp-auto-height-responsive class as in this example, to allow sections bigger than the viewport once in responsive mode.
Also, you can make use of the Responsive Slides extension if you want to convert horizontal slides to vertical sections when reaching the responsive point.

jQuery animation code only running first instruction?

I'm fairly certain I'm being massively stupid here, but how can I run multiple jQuery animation instructions one after the other. The code below causes my box to move away from the left hand side correctly, but does not cause it to expand down.
click : function(){
$(this).not(".break").animate({left: '100%'}, 300);
$(this).slideDown(300);
},
You can split them into two:
$(this).not(".break").animate({left: '100%'}, 300);
$(this).children().slideDown(300).hide();

Responsive setting creates page scrolling issues

I'm having issues with my CarouFredSel carousel.
I have a (tall) one pager with a carousel inside. If I scroll below it, any browser resize will make the page scroll back up about one page (I'm estimating the height of the carousel). I understand a few pixels of twerking, but now that's about 1000...
The problem is, I'd be 'fine' with it if it was only on resize, but this problem reproduces on reaching the bottom of the page on mobile, without any kind of resizing, no screen rotation (on Android, at least, cannot test iOS right now..). And like I explained, I reproduced the problem with slightly resizing a desktop browser on reaching the bottom of the page.
On disabling CarouFredSel, the problem goes away. It also goes away on disabling the responsive option on it.
carouFredSel is initiated like so :
$("#modeles").carouFredSel({
responsive: true,
scroll: {
fx: "crossfade",
duration: 500
},
direction: "left",
items: {
visible: 1,
width: 868
},
auto: false
}, {
transition: true
});
I have created a JS fiddle reproducing the issue here.
Okay so I get alot of these few 'tricky' stuff and what I oftenly do, I back it up with javascript.
In your case, what causes all the problem is Google Maps and the content of the iframe to be more specific.
What I would do in your case - of which does works perfectly - I would set an attribute of the scroll position on scroll, and on resize get me to that scroll position.
That said, we have this:
$(window).scroll(function () {
$("body").attr("xheight",$(document).scrollTop());
});
$(window).on("resize", function(e){
e.preventDefault();
$(document).scrollTop($("body").attr("xheight"))
});
And that's all you need.
Given example:
jsFiddle

Adding animation to this testimonial slider

I have created a slider using CSS3 to display my testimonials.. Now I need to add some animation to this slider using Jquery. But I dont have any idea how to use Jquery with this slider.. and what are the suitable plugin for this. So anybody can tell me How can I add an animation to this slider?
any ideas are greatly appreciated.
Thank you.
Here is a link to the slider code: jsfiddle.net/XJVYj/82
I think it will be very hard to find a Plugin that exactly matches your code. But I could code you the jQuery stuff for it. But then I would have two Questions.
How much of the CSS can I change? Or should it also still work without js activated?
Are you staying with a number of 3 items in the future? Or do you want to change the number of slides dynamically?
// EDIT
OK it works now. I know its not very elegant, but I dont wanted to change too much of your code. So I just had to edit two of your css selectors (I commented the old one out). You also wanna notice, that with this solution your old method still works when javascript is disabled.
The jQuery Code follows...
$("div.one").css({"left":0, "opacity":1});
$("div.two").css({"left":300, "opacity":1});
$("div.three").css({"left":600, "opacity":1});
$("input#first").click(function(){
$("div.one").animate({left:0},600);
$("div.two").animate({left:300},600);
$("div.three").animate({left:600},600);
});
$("input#second").click(function(){
$("div.one").animate({left:-300},600);
$("div.two").animate({left:0},600);
$("div.three").animate({left:300},600);
});
$("input#third").click(function(){
$("div.one").animate({left:-600},600);
$("div.two").animate({left:-300},600);
$("div.three").animate({left:0},600);
});​
jsfiddle.net/mYhEV/2/
Hope it helps.
PS: For a cleaner solution you would have to rethink a bit. One method would be to put all the sliders in a wrapper and just moving this wrapper instead of moving.
Try Using these:
Flex Slider
Timelinr
SmartGallery
Skitter
There is documentation literally right in the script file which has options you can use:
$.tiny.carousel = {
options: {
start: 1, // where should the carousel start?
display: 1, // how many blocks do you want to move at 1 time?
axis: 'x', // vertical or horizontal scroller? ( x || y ).
controls: true, // show left and right navigation buttons.
pager: false, // is there a page number navigation present?
interval: false, // move to another block on intervals.
intervaltime: 3000, // interval time in milliseconds.
rewind: false, // If interval is true and rewind is true it will play in reverse if the last slide is reached.
animation: true, // false is instant, true is animate.
duration: 1000, // how fast must the animation move in ms?
callback: null // function that executes after every move.
}
};
Secifcally: animation: true, // false is instant, true is animate.
Try setting the animation to true when you call the slider on your element (you provided no script code so I can't edit it for you.)
$('YOUR_SLIDERr').tinycarousel({ animation: true });​

Categories