I have to add image on the header and background I added header image using following code
<div data-role="header" data-nobackbtn="false" data-theme="a" style="height:30px;background-image:url(test.jpg);background-repeat:no-repeat;">
the image perfectly fixed in the portrait but when the screen changed to the landscape, image not fixed perfectly there will be some blank space added after the image. So how to set the image same for both portrait and landscape screen orientation. This problem occur in Android,iphone ,blackberry ,etc. For more clarification please check the image header.
actually when set the width: auto or 100% is not working ,because the image has some fixed width for example I set image width as 360 px in portrait ,when change to the landscape the image width still same thats the problem. We can't set the width large for landscape because we can't say that all platforms landscape mode screen size is same. that may be varying in Android,iphone etc.
You can set a div tag to hide overflow, then set a regular img tag inside the div and set both to have a width of 100%...
<div data-role="header">
<a data-icon="arrow-l" data-rel="back" href="#" style="z-index:1001;">Back</a>
<div style="overflow:hidden; position:relative; width:100%; height:45px;">
<img src="test.jpg" style="width:100%; height:auto; position:relative;">
</div>
</div>
Some Notes:
the "height:auto;" sytle on the image can be removed if you are ok with distorting the aspect-ratio of the image when it scales.
the "z-index:1001;" style on the back button link is necessary because the header is given a z-index of 1000 (so the div around the image is also given a z-index of 1000 unless specified).
Related
Is it possible to fit a jQuery mobile dialog to the height and width of a page, especially during orientation change on a tablet? I've tried wrapping a div inside the dialog and setting its height and width to percentages, but that has not worked for some reason. Setting that div to a static width and height works fine, but then looks bad on orientation change.
I have problems to set the width of my XUL button. I have this code:
<button label="Ok" width="16" maxwidth="16" height="16" maxheight="16"/>
By with that code, the size of my entire window is changed and not only the button.
And when I write that :
<button label="Ok" width="16" height="16"/>
Only the height is changed. Why is that?
XUL uses the flexible box model for positioning. The width and height attributes define the intrinsic size of the element, not the size at which they are displayed. Your button is apparently placed in a vertical box (not necessarily the actual vbox element, rather any element with orient="vertical"). By default, the align attribute of a box is assumed to have the value stretch - so a vertical box will always stretch the elements inside it horizontally:
<vbox>
<!-- this button is stretched horizontally to match the width of its container -->
<button label="Ok" width="16" height="16"/>
</vbox>
You can set the align attribute explicitly to avoid this:
<vbox align="center">
<!-- this button is centered inside its container -->
<button label="Ok" width="16" height="16"/>
</vbox>
By default form elements (input) in jQuery Mobile span over the full width of the screen.
How can I make them fit to the size of their content ?
You can use data-inline="true" on buttons and selects to make them span to the width of their content.
I've got jQuery UI draggable div (near 10000 px width) and I want to make such constraints so the left side of draggable div won't go ahead of left side of screen and right side of div won't go off right side. I tried to show it on the picture.
It seems that rectangular constraints won't fit this case and I'm lost in that
To be more clear, here is example: http://full-demo.megaplan.ru/vacation/diagram/
There you can't go futher jan 2013 and before july 2007
You could add a container between my_DIV and the draggable and set that container's width to $('html').width() to make it as wide as the screen; then position the container so that it's position matches the screen. The result would be a <div> that matches the inner rectangle on your diagram. Once that's in place you could use the normal containment option to keep the draggable on-screen.
For example:
<div class="draggable">
<div id="container">
<p class="ui-widget-header">Draggable</p>
</div>
</div>
Then size and position #container and use this:
$("#draggable").draggable({ containment: "#container" });
Demo: http://jsfiddle.net/ambiguous/SG9KS/
Using CSS3 columns to take a somewhat large text document and make it scroll horizontally. I want each column to be close to the size of the iPad screen, as I am displaying the content in a UIWebView.
If I make the -webkit-column-width: property a relatively small number, everything works great. The text stops at the max-height set for the containing and columns out horizontally.
If I make -webkit-column-width anything larger than about 300px, though, this css seems to get completely ignored. The text displays vertically as it would without styling. Any fixes?
Display when -webkit-column-width is 325px. The view scrolls to the right normally:
Display when -webkit-column-width is 500px. Text appears as one column and the view scrolls downward to the end of the document, ignoring max-height:
You are trying to divide, let's say, 600px wide container into X 500px wide columns. Browser renders only one column because it can't put 2 (or more) 500px wide columns in 600px wide container. First of all - by default, the browser will stretch your content vertically, to make it stretch it horizontally you have to specify fixed height for the container and width needs to be set to auto (which is default). Of course you need to adjust this values so columns will fit iPads viewport.
Here is demo of code, that should work properly - http://jsfiddle.net/wojtiku/bFKpa/
#container {
height: 300px;
-webkit-column-width: 150px;
-webkit-column-gap: 20px;
}
NOTE: I don't have iPad, tested on desktop.