This is going to be fairly hard to explain, so I've put together a JsFiddle to help demonstrate. http://jsfiddle.net/j5TKr/
I've tried to include everything that I require without complicating it too much. The overall aim is to have a list of li's which can be selected (single click, ctrl-click, shift-click) or double-clicked to be opened. The selected li's can be dragged around (so that they can be moved into other folders). The JsFiddle doesn't have the li's being grouped together correctly, but I'm not worried about that as it is actually working correctly.
The problem that I have is that in Google Chrome and IE (and possibly other browsers - not Firefox) you can't drag the li's around using the image within the anchor. Or more specifically, in Chrome it doesn't drag until you release the mouse button. If I remove the image (the "This one works" text link) it works. If you drag using the image information below the actual anchor, it works as well.
I gather it's a problem to do with me wanting to be able to click and select li's without actually opening the links.
Sorry if this is all a bit confusing. I'll answer any questions that come up.
Here’s an HTML workaround effective in IE and Google Chrome.
Instead of marking your draggable elements up like so:
<div class="icon">
<a title="assets" href="[link]">
<img src="[image]" />
</a>
</div>
Mark them up like so:
<div
class="icon"
style="width: 90px; height: 90px; background: url('[image]')">
</div>
(You could, of course, separate the added CSS from the HTML.)
Related
After I have implemented "hover one DIV - affecting another inner DIV" I noticed strange misbehavior on iPad/iPhones. Now it takes two taps to click on the link in the DIV with hover code:
HTML:
<div class="portfblock">
<div id="portfblock1_imgdiv"> <a href="http://photoRadosti.com" target="_blank">
<div class="portfblock_imgdiv_txt_dsc_over">Baby & Family Photography</div>
</a>
</div>
<!-- #portfblock1_imgdiv -->
<div id="portfblock_desc"> photoRadosti.com
</div>
</div>
<!-- #portfblock -->
CSS:
.portfblock:hover .portfblock_imgdiv_txt_dsc_over {
visibility: visible;
}
First tap only executes on-hover action (the sub-div with the class .portfblock_imgdiv_txt_dsc_over becomes visible as needed by hover), and only the second tap executes the href link jump.
My whole page to look at the misbehavior from iPad/iPhone is here.
And the snippets of HTML and CSS code with one of the section to check are here at JSFiddle:
http://jsfiddle.net/bubencode/5doLj02e/
It works fine on computer with the mouse, but it takes two taps on touchscreens to go to the links in websites thumbnails.
Might be anyone also faced the same effect? Is it possible to omit hover action while tapping on the div with hover from touchscreen devices, and to have the link href jump right after the first tap?
Would appreciate your help!
#bubencode
This is the way hover works on mobile devices. Since the concept of "hover" doesn't exist if you don't have a cursor the choice was to trigger hover on the first tap and click on the second. The reasoning was most likely to not break sites using hover for example when showing drop-down menus or similar.
If the hover is meaningless on touch-devices, consider detecting this and removing it, making your website responsive.
I'm developing a Cordova project, building the user interface with jQuery Mobile (first project using any of them), and I'm having problems adding a logo image to the header.
Since it makes the header bigger than default, the header overlaps the content in the main div as in this capture:
If I navigate to other page and return to this one, then everything looks like it should:
I've read that when jQuery Mobile initializes the page, the header image is not loaded and the header is much smaller, so I've tried
this is my html for the image:
<div data-role="header" data-id="header" data-position="fixed">
<h1>
<img src="img/flycosette_logo-88cb7efa9f6acfcaf246f8523e87805d.png" alt="FlyCosette"/>
</h1>
</div><!-- /header -->
And this my css in a custom file called after jQM files:
.ui-header img {
width: 100%;
}
I've tried the approach in the quoted link:
$(window).on('load', function () {
$(this).trigger('resize');
});
but it doesn't work for me.
I've also tried placing the image inside a div, instead <h1>, and setting the code for it instead of the image, playing with several properties, but it doesn't solve the problem and the image size does not display as well as in the screencaptures...
So, any idea on how to fix it?
When you get back to the page, JQM internally triggers an event called upateLayout which probably also adapts the content positioning relative to the header. Try triggering this yourself by doing something like:
$([your_page]).trigger("updatLayout");
See if this works. Maybe you need to call it on the header or content instead of the page.
After refactoring my code, I've been trying all different solutions once again, and it turns out that the initial solution:
$(window).on('load', function () {
$(this).trigger('resize');
});
from the post: https://stackoverflow.com/a/11110607/3708095
is what finally solved my problem.
I'm calling the script with that code after the </body> tag, below all the html (not sure about how was it being called before), and now is working.
Sorry for the inconveniences.
I'm trying to create a simple parallax animation with skrollr: my site is working well on Chrome/Mac but I'm seeing unusual behaviour on the ipad..
On ipad (testing on the IOS simulator),
the main body of the page doesn't skroll at all (or may scroll in the background, underneath the animated div?)
the animated background position (origami pattern) scrolls in the opposite direction (down is up) within the bounds defined in data-start / data-top-bottom
On desktop, the effect I can simulate the effect if I hack the div#hero to be position: fixed; in chrome dev tools.
The skrollr examples work as expected in the IOS simulator.
I have <div id="skrollr-body"></div> just before the closing </body> tag
Any suggestions?
You just naively added an empty #skrollr-body element. The documentation says
Starting with skrollr 0.6.0 there's just one thing you need to do: Include an element on your page with the id skrollr-body. That's the element we move in order to fake scrolling.
If that's the element we move for fake scrolling, then all your elements need to be inside of it (unless they're fixed positioned).
The only case were you don't need a #skrollr-body is when using position:fixed exlusively. In fact the skrollr website doesn't include a #skrollr-body element. If you need both fixed and non-fixed (i.e. static) elements, put the static ones inside the #skrollr-body element.
https://github.com/Prinzhorn/skrollr#what-you-need-in-order-to-support-mobile-browsers
So in other words, simply add a <div id="skrollr-body"> tag right after the opening <body> tag, and close this division by adding a </div> right before the </body> tag.
adding a div wrapper with skrollr-body id did absolutely nothing for, scroll just doesn't work on mobile
I'm working on an iOS/PhoneGap project. I have a weird overlap issue in iOS (screenshot from iPad):
The "Select Status" popover is position: absolute, z-index: 35. The website link is doesn't have a position specified (so static) and no z-index specified.
It makes no matter if the address link is random text with no link, or a link (as captured), it still happens.
Here's what it looks like in Chrome (as expected) (taken on a retina Mac, so it's huge):
I have tried tweaking the z-indexes all day long in Safari's console on the iPad with no effect. It does not seem to be a "simple" z-index issue. So please don't just say "adjust z-index."
[edit] To be specific, I have tried setting the z-index of the popover to 5000 and the web address to -10 (giving it several different positions), and I have checked every ancestor of both elements to make sure none of them have z-indexes (and they didn't). I even tried giving a couple of the ancestors of the popover positions and z-indexes. Nothing ever changed. (And lest it is brought up, I did try changing colors and stuff, just to make sure my changes were making it to the page.)
Thanks.
So this has been plaguing our project for about a month, but I think I solved it. I haven't thoroughly tested the theory, but it has solved all of our issues so far.
If you remember way back in the days of IE7, there was a weird z-index bug, and the only way you could fix it was to find ancestors of the offending elements that were siblings and adjust their z-indexes.
For example, let's say this is my markup:
<div class="container">
<div class="header">
<button>
Click Me
<div class="dropdown">
<ul>
<li>This</li>
...
</ul>
</div>
</button>
</div>
<div class="content">
<div class="col1">...</div>
<div class="col2">...</div>
<div class="col3">www.example.com</div>
</div>
</div>
and like in my images, it looks correct in Chrome, but in iOS, www.example.com is above .dropdown.
Their ancestors that are siblings are .header and .content. If I adjust the z-index (while setting the position to relative, of course) of .header to be higher than .content, it fixed the issue.
Hope that makes sense and helps anything that might come to this page...
As I was developing an application with jQuery (latest version), my firefox browser decided to update itself to version 6. Right after that, I got the standard jquery ui "sortable" function not working properly. I tried on the jquery website and same thing. Tried with the demo files downloaded with the jquery ui bundle => same result. No hacks, no custo, just vanilla.
Here are the symptoms: starting the sorting (by clicking and dragging the mouse around), the sortable element sticks to the mouse pointer. Fine until there. But when releasing the left mouse button, the sortable element drops on its final position and suddenly, as I move the mouse elsewhere (no mouse buttons clicked) the last sorted element sticks back to the mouse and moves with the pointer.
Clicking somewhere on the page moves the sortable element back to the final dropped position but as soon as I move again the mouse, that element sticks again and does not drop.
Has anyone come over such a bug with firefox 6?
FYI, this sortable function was working like a charm on FF 5.0
All right guys!! I found the root cause of such a weird behaviour!!! Its name is "FireQuery 1.0" addon for Firefox.
When I saw Guntram telling me that he is using FF6 with the latest version of jQuery + jQuery-UI with no issues at all, I wondered if that could come from an addon. So I disabled everything and re-activated them, one by one, with a restart after each enabling. I found the guilty addon: FireQuery 1.0.
Not saying that this addon is not good but at least, if you ever come with the same issue as mine, at least now you may know the root cause. ;)
to me the sorting works alright.
the elements dont move unexpectedly.
when i have an item in an element, like a button or a textfield, nothing happens.
if i right-click into the field or button the cursor appears (the button is clicked).
and when i escape the windows right-click options menu i can type into the text field...
so still strange behaviour. i don't know how it works on ff5, i am on ff6, latest jquery version.
EDIT:
after i found this:
http://weblogs.asp.net/jeffwids/archive/2011/01/31/jquery-textbox-in-sortable-is-not-clickable-selectable.aspx
i took a closer look at the cancel option provided by the jquery-sortable.
i finally could solve it like this:
<ul id="sortable">
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><input type="text" value="text" ></input></li>
<li class="ui-state-default" style="height: 70px;"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><textarea cols="20" rows="3">textarea</textarea></li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><button>button</button></li>
</ul>
<script>
// initialize the sortable including the cancel option
$( "#sortable" ).sortable({cancel: 'input,button,textarea'});
</script>
I have the same problem. After a day's worth of testing I have found out what the issue is and what kicks this behaviour off.
Let me first show you what we're using the sortable class on.
-----------
| Header |
-----------
| |
|Contents |
-----------
Header is draggable. If you quickly or erratically move the mouse cursor while dragging and the mouse cursor somehow gets moved off the header (e.g. onto the contents), the div sticks to the cursor.
To re-pin the div back onto the page, you can again quickly move the cursor and try to get it back on the header. Then it seems the events are re-attached and you can place the div back on the page.
To sum up, the mouse shifts off the div with the sortable events attached so the object is not seeing the mouseup or click events that place the object back on the page.
Unfortunately, I have no idea how to fix this.
EDIT
We implemented a solution which works for us, but may not be ideal for everyone. Simply .trigger("mouseup") on the draggable element when a click event occurs on any element that should not be dragable. This will snap the draggable element back onto the page.