My jquery draggable is working fine in a plane html page (where reveal.js is not present).
In my reveal js presentation I use embed=true [means I didn't use the full page for each slide. I used only a part of the full page for each slide].
Inside any Reveal js slide the draggable item is not moving with the cursor. It's only accurate when the cursor and draggable item is in it's beginning position. But when I pick draggable item and move cursor, the draggable item moves far from cursor.
Finally I found the bug after three days of panic. The jQuery draggable is fetching problem inside auto scaled elements. And the Reveal.js slides are auto scaled by default. I just put the bellow code inside Reveal.initialize. This solved my problem.
minScale: 1,
maxScale: 1,
By the way, after solving the draggable issue, now all my slides contents changed their sizes and positions. Now I need to fix them.
Happy coding :)
Related
All, I'm developing a circular carousel that will be used eventually as an Elementor Page Builder widget.
The carousel lays out correctly and animates correctly for the first click. Afterwards the grid containing the individual cards does not rotate to the correct new position. This throws off the cards' orientation.
Positions are stored in element's data attributes. They are being updated correctly on the click events
I've uploaded a sample of the code onto Code Pen: [https://codepen.io/aGeekonaBike/pen/VwMQMea]
Could someone to take a look and let me know if my logic is leading down a dark path.
I have recently worked on a site that is effectively a series of long scrolling pages. It has some large background images the make use of a parallax effect as well as some carousels and regular text content. I am using [slick] by ken wheeler for the carousels. 1 I Live demo site here
My question is, is anyone aware of a way to create a carousel of large images (like the one pictured below)that also makes use of a parallax effect? the effect is currently achieved using the Parallax.js plugin (http://pixelcog.github.io/parallax.js/) but I am open to other plugins/approaches. Thanks in advance for any ideas or pointers in the right direction.
Screenshot of current carousel that I wish to add parallax effect scrolling to:
*edit: I have tried creating multiple slides within the carousel using the parallax.js method to add a background image. However this just keeps the first image used as a constant background and does not slide off screen when the arrow is clicked
I'm using the wow.js framework based on JQuery Animate on this site I just completed: (http://adrenalinetv.com/). Problem is I noticed on the animations I have that slide up, the animated element slides above the div underneath the element I'm sliding. So you see the element in the next div or div's. So I thought, OK...I'll just make the z-index of that div higher and my problem will be gone. However, no matter what z-index I set that div, the animated element always appears on top of it as it slides into place. I'm not sure if that's because of the wow javascript, the animate.css or script or what. Anyone familiar with this framework know how to correct this? Or is it correctable?
The element that you are giving a z-index cannot have a position static. So give it a position relative and the z-index fix should work.
From CSS-tricks (http://css-tricks.com/almanac/properties/z/z-index/)
As in, which one appears as if it is physically closer to you. z-index only effects elements that have a position value other than static (the default).
I need some help using this jQuery Carousel: http://coolcarousels.frebsite.nl/c/50/
On the page is a draggable image slider, however my wish is for when the drag has stopped (i.e. the user has lifted their finger of the left click), the slider doesn't snap to an image (the slider stays put at its current location).
i suggest
Swiper, if you use it in 'Free' mode then you can get the effect your after
I am a bit new to this part of JQuery/JavaScript.
I know I can use a jquery plugin or slider from somewhere but I think my requirements are a bit different.
I created content with background images and text on top of them and the content is prepared. I need to use jquery to make the content change to the next content when an image on top is clicked and when the left/right options are clicked. Similar to the way a slider would work. I also need to go it left and right options to back and forth.
How can I get started on this?
The idea is to wrap the whole content in a division with a fixed width, then you can use the jQuery animate api to change the width of the content dynamically to left or right using jquery animate option.
example to move content to left
$('#innerscroll').animate({"left": "+=150px"}, 500);
example to move content to right
$('#innerscroll').animate({"left": "-=150px"}, 500);
innerscroll is the parent division id to which slider is wrapped
The detail step is given in this jQuery image slider tutorial, make sure you use li tags instead of img for your contents.. you can improvise on the same.