I'm using the draggable and droppable from jqueryui to fill a slideshow with pictures from a list kinda like an editor.Everything is inside a flexbox that is expanding over the whole page.
Everything works almost perfectly the way I intented it, but theres one circumstance when the drag&drop out of the slideshow acts strange. After switching the slideshow slot I can't drag&drop the img out of it to the left anymore, but weird enough I can drag&drop it on the right. It only seems to happen in some occasions, when the flex boxes are aligned different.
<div class="flex-parent">
<div class="slideshow-container flex-child">
<div class="slideshow-box">
<div>
</div>
<a class="prev">❮</a>
<a class="next">❯</a>
</div>
<br>
<div id="dots" style="text-align:center">
</div>
</div>
<div id="imagesContainer" class="flex-child">
<img src="https://via.placeholder.com/200x100" alt="" width="200" height="100">
<img src="https://via.placeholder.com/200x100" alt="" width="200" height="100">
</div>
</div>
fiddle: https://jsfiddle.net/kilroy_2/cjs4mp96/2/
If anyone could tell me why this is happening, is it a bug inside jqueryui or a strange behavior because the slideshow items occupy the space even though they're hidden? Is it a flexbox problem?
Answering this by myself.
I found a fellow member #kiwhen who seems to be having the problem that was happening for me too and is describing it almost perfectly. As described here: JQuery UI Draggable with hidden Droppable.
When a hidden droppable container is sliding to open, it will push other containers down on the page - or at least, that is what I see. However, when I continue to drag my elements around, it is like some kind of "ghost" is left behind by the droppable containers that were moved down. When I move my draggable element into the spot where one of these "pushed" containers used to be.
In short: Droppables who get hidden are leaving a "ghost" where they used to be.
Answer: To fix this in my situation I simply destroyed the slideshow droppables whenever I switch slides (when they get hidden). And reinitialize only the dropabble slide that is visible.
Related
I have a small issue with a series of non-bootstrap popover made by me that contains social buttons each one and have to be shown when hovering or clicking an element that contains the popover.
The html of one of the items is like this:
<li class="social__list-item js-show-popover">
<div class="media social__popover">
<div class="media-left">
<span class="popover__img"></span>
</div>
<div class="media-body">
<p class="popover__title">Síguenos en Google+</p>
<div class="g-follow" data-annotation="bubble" data-height="20" data-href="https://plus.google.com/104645458102703754878" data-rel="community"></div>
</div>
</div>
</li>
I am hiding .social__popover with opacity: 0; and visibility: hidden; and turn visible with jquery.
Everything works as expected, the problem is when you hover over the area where the iframe embedded buttons are when the popover is hidden and they make the popover to show.
Using display:none on the popover solves the issue, but it makes to break the rendering of some of those embedded buttons (mainly google buttons)
I prepared a Jsfiddle example: https://jsfiddle.net/victorRGS/dcv2g973/1/
It seems that we can live with it but I would like to work as expected, also the area of the facebook widget (not working in the example, idk why) is quite bigger and this one could be a real annoyance.
Any help will be welcome
If I am understanding your problem right, you should try this.
Adjust pointer-events:none; to the popover when they are hidden, and set back to auto when you hover the icon.
See example: https://jsfiddle.net/y6Ldjuwd/
Is this what you want?
I solved this adding the z-index property and worked fine, with no behavior problems in touch devices.
Updated example: https://jsfiddle.net/victorRGS/dcv2g973/2/
I hard coded a Skrollr demo page and it worked great. Hard coding the data tags is tedious so I went with creating the img divs dynamically. But now I can't get it to work!
I need another set of eyes to look at my code. I'm sure I am overlooking something simple.
Ideally when you scroll down the images should appear to animate (by having their visibility toggled) but the div should stay at a fixed position on the page.
http://moto.oakley.com
has a good example of Skrollr in action.
Here is a sample of the img div before the JS runs
<img data--10000-top="display:block;" data-1-top="display:none;" data-anchor-target="#bps_ux" data-src="images/bps/bps0001.jpg" src="images/bps/bps0001.jpg" class="frame preload skrollable skrollable-after" style="display: block;" alt="" >
Then I have a JS function with a for loop that appends to the img div and incrementing the data tags by 20. I think my use of data-- is not quite right.
Once the JS runs the div looks like this but with 75 images.
<img class="frame preload" src="images/bps/bps0001.jpg" data-src="images/bps/bps0001.jpg" data-anchor-target="#bps_ux" data-20-top="display:block;" data-0-top="display:none;" alt="bpsSprite frame 0001">
<img class="frame preload" src="images/bps/bps0002.jpg" data-src="images/bps/bps0002.jpg" data-anchor-target="#bps_ux" data-1-top="display:none;" data--0-top="display:block;" data--20-top="display:none;" alt="bpsSprite frame 0002">
<img class="frame preload" src="images/bps/bps0003.jpg" data-src="images/bps/bps0003.jpg" data-anchor-target="#bps_ux" data-1-top="display:none;" data--20-top="display:block;" data--40-top="display:none;" alt="bpsSprite frame 0003">
Here is my test link with the full code
http://retropunk.com/files/bps-skrollr/
Thanks for any tips
- P
Skrollr doesn't know about your dynamic elements. Two options
Switch the order of the two last script tags (call init after the images have been created)
Call s.refresh() after adding the images.
Not sure how to solve an issue I'm having at the moment. I'm building a Javascript and PHP powered image gallery. The basic div structure is that I have a div that contains the gallery as a whole, one for the image being displayed, and a div containing a "previous button", and another containing a "next button."
The next/previous buttons are positioned on the left/right side at the bottom of the image container div (the gallery container is set to relative position, the button divs to absolute). By default they are made non-visible using jQuery, and become visible when you hover over the image container div. The issue I'm having is when you hover over the container div, and then over the arrows, the transition effect re-plays and I'm not sure how to fix that using HTML/CSS/JS. My current structure for the divs is
<div id="galleryContainer">
<div id="imageContainer">
<img src="img" />
</div>
<div id="leftArrow"></div>
<div id="rightArrow"></div>
</div>
How do I make it so my fadein/out effect stops acting all bugged when I hover over the next/prev buttons? I've tried a bunch of combinations of using "onmouseover" listeners when I establish the div, to using jQuery listeners, to trying to change up the hierarchy of the drivs. Any help would be appreciated!
Edit: Here is my current jQuery code of what I'm trying to do:
$(document).ready(function(){
$("#imageContainer").mouseover(function()
{
$("#leftArrow").fadeIn();
$("#rightArrow").fadeIn();
});
$("#galleryContainer").mouseout(function()
{
$("#leftArrow").fadeOut();
$("#rightArrow").fadeOut();
});
});
When I put the buttons inside of the imageContainer it still does the fade bug/effect.
You probably want to use $.mouseleave and $mousenter A problem is that the mouseout and mouseover events bubble. Then, your handlers are called when those events are fired on #galleryContainer when it happens in any of its descendants
http://jsfiddle.net/z2Y8a/20/
$("#imageContainer").mouseenter(function() {
$("#leftArrow").fadeIn();
$("#rightArrow").fadeIn();
});
$("#galleryContainer").mouseleave(function() {
$("#leftArrow").fadeOut();
$("#rightArrow").fadeOut();
});
It would not flicker if your arrows are inside of your image container. Or maybe put the show arrow effect in the main gallery container. Basically when your mouse laves the image container, it will trigger the mouseout. When I say leave I mean in code sense, visually it does not leave because you have it positioned differently but in code sense, your mouse left the image container and entered the arrow containers
This is how I interpreted your question without seeing any code.. Let me know.
I added colors to the divs so you can see which is located where.
jsFiddle: http://jsfiddle.net/z2Y8a/19/
<div id="galleryContainer" style="width:200px;height:200px;background:green;">
<div id="imageContainer" style="width:50px;height:100px;background:blue;">
<div style="height:75px;">
<img src="img" />
</div>
<div id="leftArrow" style="width:25px;height:25px;background:red;float:left;display:none;">L</div>
<div id="rightArrow" style="width:25px;height:25px;background:yellow;float:left;display:none;">R</div>
</div>
</div>
<script>
$("#imageContainer").hover( function()
{
$("#leftArrow").toggle();
$("#rightArrow").toggle();
});
</script>
-- EDIT --
$("#galleryContainer").hover(function()
{
$("#leftArrow").toggle();
$("#rightArrow").toggle();
});
I am experiencing problem with the layout of a page where my controls are shifting when I attempt to change the class using a javascript event. Can anyone help with some ideas around the problem. It only seems to be a problem in IE when the left scroll bar appears.
Here is an example of the html
<div id="container" style="overflow:auto;">
<div id="control1Container" style="left:17%;top:145px;display:inline;position:absolute;">
<div id="control1" class="listOUT" >I am a control</div>
</div>
<div id="control2Container" style="left:67%;top:145px;display:inline;position:absolute;">
<div id="control2" class="listOUT" >I am a control</div>
</div><!-- more controls here -->
</div>
So now the imagine that the controls within the container div take up enough space that the overflow margin appears on the left i.e. the controls extend below the bottom of the container div. If I attempt to change the listOUT class on control1 to say listIN using javascript the control will shift to the left. To me it almost seems like the browser is readjusting the control1Container to a new location that is 17% if the container div's new width with the scrollbar in place.
Any idea's?
You need to give to the container div position:relative, so that the absolute positioned elements inside it get positioned in relation to it ..
I have a menu bar with hover effects, and now I want to place a transparent image with a circle and a "handdrawn" text over one of the menu items. If I use absolute positioning to place the overlay image above the menu item, the user will not be able to click the button and the hover effect will not work.
Is there any way to somehow disable mouse interaction with this overlay image so that the menu will keep on working just as before even though it's beneath an image?
Edit:
Because the menu was generated with Joomla I could not tweak just one of the menu items. And even if I could, I did not feel a Javascript solution was appropriate. So in the end I "marked" the menu item with an arrow outside the menu-item element. Not as nice as I had wanted it to be, but it worked out okey anyway.
The best solution I've found is with CSS Styling:
#reflection_overlay {
background-image:url(../img/reflection.png);
background-repeat:no-repeat;
width: 195px;
pointer-events:none;
}
pointer-events attribute works pretty good and is simple.
So I did this and it works in Firefox 3.5 on Windows XP. It shows a box with some text, an image overlay, and a transparent div above that intercepts all clicks.
<div id="menuOption" style="border:1px solid black;position:relative;width:100px;height:40px;">
sometext goes here.
<!-- Place image inside of you menu bar link -->
<img id="imgOverlay" src="w3.png" style="z-index:4;position:absolute;top:0px;left:0px;width:100px;height:40px;" \>
<!-- Your link here -->
<a href="javascript:alert('Hello!')" >
<div id="mylinkAction" style="z-index:5;position:absolute;top:0px;left:0px;width:100px;height:40px;">
</div>
</a>
</div>
What I've done:
I've crafted a div and sized it to be what a menu option could be sized to, 100x40px (an arbitrary value, but it helps with illustrating the sample).
The div has an image overlay, and a link overlay. The link contains a div sized to be the same as the 'menuOption' div. This way a user click is captured across the whole box.
You will need to provide your own image when testing. :)
Caveat:
If you expect your menu button to respond to the user interaction (for example, changing color to simulate a button), then you will need extra code attached to the javascript you will invoke on the tag, this extra code could address the 'menuOption' element through the DOM and change it's color.
Also, there is no other way I know of that you can take a click event, and have it register on an element underneath a visible page element. I've tried this as well this summer, and found no other solution but this.
Hope this helps.
PS:
The writeup on events at quirksmode went a long way to help me understand how events behave in browsers.
Give the button a higher z-index property than the hand-drawn image:
<img src="hand_drawn_image.gif" style="z-index: 4">
however, make sure you test it in all major browsers. IE interprets z-index differently from FF.
For somebody to come up with more details, you would have to post more info, a link would be best.
Building on what Pekka Gaiser said, I think the following will work. Taking his example and reworking it:
<a href="#" style="z-index: 5">
<!-- Place image inside of you menu bar link -->
<img src="hand_drawn_image.gif" style="z-index: 4">
<!-- Your link here -->
</a>
Here you should be able to place an event on the underlying a-tag and, unless your image has an event, initiates a capture (!IE browsers) and then kills propagation of the event.
If you need a bit more help, let us know a bit more about the situation.
If the image will be statically positioned, you can capture the click event from the image as it bubbles up, by placing the img tag inside the menu item element.
<div onclick="menuclick()">
<img src="overlay.png" style="position:absolute;" />
</div>