I'm using jquery UI to resize a div vertically(I.E. using the n handle). I'm using a helper so it only resizes after the user stops dragging. After a resize is done I call a function which sets dimensions on surrounding elements so they all fit within a container.
This works in both chrome and IE, but in firefox a css property of top is added which blows the div out of the container.
I've tried removing the top value after the fact, which works, but this is kind of a hack and also causes the div to 'jump'.
Is this a bug? Is there a workaround using jquery css html, etc?
To see what I mean check this fiddle and resize the element, if you inspect it in firefox there will a top css property but not in chrome.
Thanks,
Luke
In my opinion it is a bug.
Workaround: if you add a top: 0; to the css rule for #resizable IE, chrome and firefox have the same behavior. Also see the updated example.
=== UPDATE ===
It's a firefox bug. I walked from the jQuery UI resizable method code until the css method of jQuery (main) code to find an answer. At the end of my search I could found that firefox returns for css top value auto for not/static positioned elements, but returns 0px if relative position is set; in both cases top is not defined (they could be set to auto with no difference - it's the default value).
Also see this example.
In the resizable method this result makes the difference (jQuery UI sets the relative position to the DOM element by adding a class). If the bug (which I have reported to mozilla) will be fixed, the behavior of your example in the firefox should be the same as in chrome.
I'll report here if there is something new...
=== UPDATE ===
Now I have a workaround for you:
for the special situation you described set the css position of your resizable element manually to static.
Add to your stylesheets:
#resizable { position: static; }
Also see your updated example.
Related
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
When I load my jQuery Mobile page on an iphone, some of the page extends out of the initial viewport. The space that is out of the initial viewport to begin with is white, not gray which it should be. I've attempted to set the height to 100% using this line of code: [data-role=page]{height: 100% !important; position:relative !important;} however this still does not do the trick.
I always have the same problem with my JQM pages. I use that to make my page height 100%:
$(document).delegate('#yourPage', 'pageshow', function () {
var the_height = ($(window).height() - $(this).find('[data-role="header"]').height() - $(this).find('[data-role="footer"]').height());
$(this).height($(window).height()).find('[data-role="content"]').height(the_height);
});
Hope this helps.
First, don't misuse !important. To diagnose what's wrong with the CSS, you can use Firebug in Firefox / Developer Console in Chrome. ( Safari & IE have similar things ). Some CSS may be overridden, or layers maybe overlapped.
Without your HTML codes & jQuery scripts, I can't really help on this, but normally, to make the content to full height, you have to set html CSS and body CSS to use height: 100%;.
I have been using JQueryUI for various aspects of my site, and a small tabbed menu set was working well, except in firefox. The image below shows the same code rendered in firefox on top, and IE9 below. Note the gap under the tabs and the (possible?) increase in padding inside the tab. I have removed all my stylesheets from the site (the 2nd image) leaving just the base JQuery UI one, but the gaps still appear, and only in firefox.
The js call is as basic as it can be:
$("#menuTabs").tabs();
It's not often I have display issues where IE is better than firefox... Having removed all the CSS I generated, and made sure there's no styles being applied, I'm at a loss as to where to look next!
If you can offer any suggestions as to what might be causing it, I'd be a happy chappie!
[EDIT]
After scaling back the code as far as I could, and using only 'known good' libraries, it turns out that it is caused by it being in a table cell!
Here's some code you can have a play with! http://jsfiddle.net/XVHTk/
It does however work when "Normalized CSS" is checked, so it could be padding inherited from the cell maybe?
[EDIT #2]
Right.
So.
It turns out that CSS styles applied to a table to remove padding and margins and borders and so forth are not enough. You have to include cellpadding="0" and cellspacing="0" in the table definition otherwise the jQuery tabs have some extra padding around them.
Odd.
jsFiddle with table and no extras: http://jsfiddle.net/XVHTk/1/
jsFiddle with table spacing/padding stripped: http://jsfiddle.net/XVHTk/2/
Why the HTML cell properties are being transferred into the tabs, I have no idea. I'm just happy to have fixed it!
This is caused by a bug in the ui-helper-clearfix class. See ticket #8442 and the associated fix. As you can see from the ticket, this was fixed in 1.10.1. I've created a fiddle showing this working properly with 1.10.1 and using 1.8.x with additional CSS to fix the issue. The latter shows that if you can't upgrade to 1.10.1+ right now, you can just include the following CSS:
.ui-helper-clearfix:after {
border-collapse: collapse;
}
I'm trying to apply jQuery UI Selectable to a portion of my website. However, I do not see either the selection box while dragging the mouse, nor does the color of selected li elements change.
So to understand the problem, I went back to the source:
http://jqueryui.com/demos/selectable/
I see (using IE9 developer tools) that a style .ui-selected is applied to selected elements. Using Trace Styles, IE shows that background-color is originally defined in jquery-ui.css but overridden (ultimately) by #selectable .ui-selected. However, IE does not show the source of #selectable .ui-selected. Searching the jQuery UI style sheet I reference, jquery-ui-1.8.18.custom.css, finds no mention of ui-selected, nor do I find it in jquery.ui.selectable.css.
Where exactly is the demo page getting the CSS for the background color?
I found one of the other jQueryUI demos defines the style for those classes in a custom style sheet, so I ended up following that lead.
http://jqueryui.com/demos/selectable/#serialize
It seems odd that those styles are not part of jQueryUI Themeroller. Perhaps that will change in the future.
I love the way jquery mobile renders a form, is it possible to embedded a jquery-mobile-form in a table, div or any container in my webpage?, to be clear: I have a html5 webpage anf the layout is done by divs and css, is it possible to include a jquery-mobile-form in one of the divs.
I have been tried to do that but jquery-mobile-form always takes the 100% of the page, I want to use the form in an specific high/with div container, is that possible?
Thanks!
Yes, you can adjust the size of this forms like any other div elements.
Just wrap the form in a block element and apply the css "width"-attribute on it.
I created a Fiddle for that:
adjust jQueryMobile form size fiddle