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;
Related
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/
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).
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 made a div draggable with $("#divID").draggable(); and it works.
Inside this div I have a second div. I'd like to have the inner div not draggable,
so that the user can drag the whole thing using a "frame" around the inner div.
The inner div contains a ScrollBar and other elements that conflict with the "draggable" feature.
Is it possibile?
Thank you.
Edit:
I made a test page: TEST
The user should be able to drag everything (including "other elements") only in the upper or lower strip, where the cursor become a cross of arrows. I want the user to be unable to drag where the cursors become a pointer.
Thanks again.
I had a vaguely similar issue when working with accordions, I wanted links in the accordion headers and they conflicted with the accordion behaviour.
I fixed it by attaching an event handler to the inner element, and all it did was call evt.stopPropagation() to prevent the parent element(s) from getting the conflicting events.
Try position fixed
div#notDraggable{
position:fixed;
}
I have a div that uses jQuery to expand / contract on a click. This works great for images but fails for embedded Youtube videos. Is there any way to get a click on a div that contains a video so that I might change the dimensions of the div?
Note: I intend to use this only to expand the div: once the div is expanded I will let the clicks to the div be caught by the Flash player as so not to interfere with the video controls.
Example fiddle. Note how difficult it is to click on the div containing the video in order to expand it.
i created an example here: http://jsfiddle.net/RASG/aZvqN/
see if you want something similar.
if not, you will have to setup a jsfiddle to help us help you :)