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/
Related
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.
Is it possible to realize a 3D rolling link (click for example) with a different content when rolling? So let's say there is a DIV, and when the user hover over the DIV, the DIV spins (like in the example) and shows another DIV with another (clickable and with different action) content? Do you think this is possible just in CSS, or is there JS needed?
yes, see here an example: demo rotating cube
and here you can find a description description
The example you gave allows it.
JSfiddle
You just have to change the data-title in the HTML...
<div id="reveal">
<a href="http://zsitro.com/" class=" roll">
<span data-title="****CHANGE-ME****">H5BP build script</span>
</a>
</div>
I need to create a set of CSS/JavaScript tab panels.
However, most the examples I have seen put the navigation in a separate DIV from the content. For example:
http://webfx.eae.net/dhtml/tabpane/tabpane.html
http://www.stilbuero.de/jquery/tabs_3/
Is there an CSS tab example where each tab navigation item is in the same div as its corresponding content?
Something like this:
<div id="tab-item=1">
<div id="tab-item-1-nav"> ... </div>
<div id="tab-item-1-content"> ... </div>
<div>
<div id="tab-item=2">
<div id="tab-item-2-nav"> ... </div>
<div id="tab-item-2-content"> ... </div>
<div>
<div id="tab-item=3">
<div id="tab-item-3-nav"> ... </div>
<div id="tab-item-3-content"> ... </div>
<div>
This is possible but, as is, pretty certainly isn't advisable (it's a work in progress and worked like a charm in IE7 yesterday and is broken today in this same browser ...).
The principle is to stick your tab-nav together so you have to remove from the flow your tab-content with position: absolute; (EDIT: you can't float them after the next tab-content).
Thus many problems arise: you can't have other content below your tab-content as you don't know anymore its height (except in JS of course or with max-height/height and a scrollbar created with overflow property). You can have content on the right pretty easily as you control the width of your content.
Here is a functional demo: http://jsfiddle.net/3skpt/1/ (using jQuery and jQueryTools, tested successfully in Fx 3.6.4, Saf 4.0.x, Op 10.54)
I'll update today the results of my IE7 debugging, whether successful or not.
The navigation isn't separated from the content here and is functional out of the box so a body.js class is used not to disrupt display when JS isn't functional.
Links in headings and the .js class shouldn't be hardcoded as in this already too long example but should be added via JS.
Now, though this example work at least in modern browsers with a few constraints (footer?), I'd reorganise the content when JS is functional in order to avoid the absolute positioning. It's pretty fast in jQuery to create a container before the first .tab-item container and then move every h1 in it. I believe it's far more robust ;)
I want to enable an effect on my web app where a user clicks an "Edit" icon and a text box elegantly slides out horizontally immediately to the right of the icon. Currently it is sliding out, but not very elegantly, because when I click on the icon for some reason a new row is created in the browser below where I clicked (and all content below is bumped down). The text box slides out, and then bizarrely jumps back up to where I originally wanted it to go, and the new row created disappears.
Please note, however, that if I put the textbox on its own line so that it is fully left-justified against the margin, that it works just fine. But I want it to scroll it to the right of the icon.
This behavior is the same for IE8 and Firefox.
Here is the HTML:
<img src="../images/edit.gif" onclick="toggleNotebox()" style="cursor:pointer"/>
<span id="AddText" style="display:none">
<input name="AddNoteText" id="TextBox" onkeypress="return addNote(event);" />
</span>
And here is the relevant Javascript:
function toggleNotebox() {
var options = {};
$('#AddText').toggle('slide', options, 500);
}
Here is the jsbin.com URL to see this behavior in action: http://jsbin.com/alopu/edit
Try putting a float: left on both elements.
http://jsbin.com/uzoqo
edit: for some reason the above works but if you try to edit it it doesn't show my changes to the code. not sure what happened.
Inline elements, which spans and inputs are by default, don't honour explicit widths. So jQuery's either changing the display of the animated element to block, or wrapping it in a block element so that that element can be animated.
That's why Samuel's change works - floated elements honour widths.
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>