Whenever I navigate on my Card slider, my half slider (separate carousel) also moves. But it's interesting that it does not happen the other way around. When I navigate my half slider, my Card slider does not move. I think it has something to do with my Javascript but I don't know how to separate them in classes so they work separately since the half slider has a separate code for navigation.
Attached are the code, I just put parts of my html code for the half slider and card slider and the javascript that I think is causing the problem.
Half Slider.html
Card Slider.html
JScript.js
In the JavaScript, your jQuery click event handlers trigger a function which targets any element with the class 'carousel' which exists in both sliders.
The reason why your half slider doesn't do the same thing is because it uses data-slide instead of the jQuery click event (which targets the 'next' and 'previous' classes).
Related
I have a list of projects in an object, for which I create cards through JS so they're added dynamically to the DOM. I want to add an animated loading background on each card before they display their content, and this animation should only start once the user has scrolled past the Projects heading.
I have a createProjectCard(projects) function to create the card element for each project and then add the animated-bg class to them. So my first thought to try and trigger the animated-bg on scroll was to call window.addEventListener('scroll', () => {createProjectCard(projects)}).
Now, the animation is indeed triggered when desired, but the other effect of this is that once scrolling past the trigger line, the cards keep on being created over and over with each scroll under that line.
The reasoning I made so far:
The only way (that I see) to add the animated-bg class to the card is after the cards are created.
The cards can only be created within createProjectCard().
Because the animation should begin only when the user wants to check the projects, it means the cards (together with their animation) need to be created once we scroll past the project section heading on the page.
However, once past that trigger line, the condition in the if statement remains true, so the cards get created anew on each scroll below that trigger line.
Link to the pen: https://codepen.io/awelie_go/pen/XWemQwp
(To demonstrate the issue, it shows only 3 project cards, and as you can see once you scroll a bit down, they multiply on each scroll)
Does someone have any pointers as to how I should approach this?
NB: this needs to be in Vanilla Javascript only
I'm making portfolio site, where I have a slider for each project and inside it there is second slider for different images.
Sliders working fine but can't make the button "myBabel" disappear when viewing "myBerlin".
Also, I can't add second button to make the "myBerlin" slider work.
I want to add one button that either controls all the inside sliders (the slidshow that contains are controlled by left and right screen buttons) by one button in the middle or one button per inside slider that moves with it.
I tried adding "myBerlin" to the onclick="myBabel();..." but then my sliderscript doesn't work anymore and skips most of my images. I also tried adding the button in the slider itself but doesn't work.
Anyone has a solution? I tried different solutions already.
https://jsfiddle.net/r87dc1j5/
I like letting my popovers stay open until the user explicitly closes them.
One of the nice features of the new Bootstrap Popovers is that they automatically re-position when the user changes device orientation, scroll or resize the window. They even follow along as the content re-flows - e.g. as a paragraph is wrapped and the element grows or shrinks in length while you resize the window - all the popovers on the screen will keep re-positioning to be near their target.
How does the Popover plugin know that the page is being re-flowed so that it triggers the popover re-positioning?
My webapp is dynamic, user actions cause elements to grow/shrink, toggle on/off, etc. At the moment, when I change the page via code, the popovers get left behind - they don't get re-positioned near their target.
One workaround to this, as a user, is to just scroll the screen a little bit and Bootstrap will re-position the popovers and everything looks right again.
I'm trying to figure out a way to re-position the popovers when I change the page layout via code.
Hence the question: how does Popover re-positioning work (and can I hook into it so I can trigger it automatically).
EDIT: I've just noticed that the popovers will re-position just fine if the "dynamic" content happens to be the Bootstrap navbar collapsing/expanding because of a tap on the navbar-toggler.
There's two parts to this question.
How does popper.js know when to update the popovers?
How does the popover change position?
Answering these backwards:
2: How does the popover change position?
You need the update method of the popover:
$('#element').popover('update')
I've done a quick demo here:
https://jsfiddle.net/pktyptyp/
First, click the green button to open the popover. Then use button 2 to move the popover toggle. Now the toggle and the popover no longer line up. So finally use button 3 to reposition the popover by its toggle.
The docs for this are tucked under the popover methods section here:
http://getbootstrap.com/docs/4.0/components/popovers/#methods
If you wanted to update every popover on your page and not just a specific one, then you could do:
$('[data-toggle="popover"]').popover('update')
How does popper.js know when to update the popovers?
Popper will be subscribing to events like window.scroll and window.resize. You can see this in a bit of their source code:
https://github.com/FezVrasta/popper.js/blob/master/packages/popper/src/utils/setupEventListeners.js
The update method won't be called immediately in that event handler - there'll be something that gets passed back to the Boostrap widget, which in turn will call the popover update method.
I am fairly sure Popper & the Popover widget will not be looking at the position of the individual toggles. This is partly because unless the toggles are positioned, their left/top properties will always be 'auto' so it will be hard to work out if they are moving. Or to put it another way, when the window scrolls, the toggle has not moved within the document, but the popover (which is absolutely positioned) needs updating. So this is a bit of a broad brush - they are looking out for the entire window changing, assuming the popovers are out of position, then triggering more events to update them.
If anyone knows more about this, though, please tell me in the comments!
You have a bit of an advantage in that you know when you change your UI, so you can call 'update' on all the Popovers at will. This to me seems like the ideal approach.
However, if your toggles are absolutely positioned, you could do this a bit more automatically by watching their position. Here's an example with an absolutely-positioned toggle and in this example, the popover moves automatically without the third button click.
https://jsfiddle.net/pktyptyp/1/
I don't know how the logic work behind that because on Bootstrap we use Popper.js to handle that so if you want to understand the logic behind that you can browser this : https://github.com/FezVrasta/popper.js
I am building an audio player in a SPA and have a main player widget that shows the currently playing track along with controls at the bottom of the page. The desired UI is to hide all controls but the play/pause button until the user hovers near the play/pause button. At this point the extra information, seek bar, volume controls etc. will be animated onto the screen.
Excuse my shoddy drawing
I should add that the controls are positioned fixed to the bottom of the screen.
Initially, I tried adding an extra fixed positioned div on top of everything (high z-index) and using that to trigger the hover event. Obviously, this doesn't allow for clicking the buttons below it so I tried pointer-events: none on the element but then no hover event is registered.
I then tried putting the hover region underneath the control elements and adding the hover trigger to both the hover region and the controls. This causes strange behavior when moving the cursor between the hover region and any controls (i.e. to click pause/play).
My next thought is to scrap the hover region HTML element and use a pure JS solution. I could register a mousemove event to the document body and detect when the cursor is within the hover region, triggering control animations. However, I am worried this might cause performance issues as seems a bit heavy.
I hope someone has some input/improvements on the things I have tried or comes up with something I haven't thought of!
BTW: I am using angular2 for the animation if that sparks some bright ideas to use that.
Update 1
Here's a jsFiddle showing the first two attempts. Change the z-index of hover-region to see the effect of it being on top of the play button or below.
I've created a working version for you at http://jsfiddle.net/6wk69fvo/1/. You already did what I was going to suggest, which is to use onmouseenter and onmouseleave.
But rather than just checking the hover area, you also need to check the toolbar area, and then just OR the two values together.
Also note that I put the play / pause button as a child of the hover area. If you don't want to do that, you'd need to create a third check for mouseenter or mouseleave for that div.
You can alter the control's opacity make it visible/invisible. Here is a simple example done in pure html/js to avoid the overhead of setting up an ng2 app, yet, I'm sure you can quickly adapt it to your code.
I have a slider on my page.
What I want to do is, to remove this slider on video thumb click event and stop all functions related with this slider.
Please take a look at this page with Firefox.
Click on video thumbnail, you'll see what I'm talking about.
The problem is, I'm removing the div (in which jQ functions working inside) on video thumbnail click event. But all slider functions are working after removing slider container div.
Question
How can I stop all functions related with removed slider container div and all it's child divs?
Try to put this at the top of the involved functions a(),aa(),b() and c()
if(!$('.slider_box').length)return;