I have a HTML page with a horizontally scrolling div. The swipe gesture works perfectly on my device and I can scroll horizontally through my images. I however cannot scroll horizontally with the track-pad. I'm testing on a BB Bold. Could anyone please explain to me how I get this to work, if it is possible.
Sample:
<div class="row">
<div class="col-xs-12" style="overflow-x: scroll; -webkit-overflow-scrolling: touch; white-space:nowrap; padding: 10px 0" x-blackberry-focusable="true">
<img src="toDeleteImages/1.jpg" height="100" style="display: inline-block" x-blackberry- focusable="true" />
<img src="toDeleteImages/2.jpg" height="100" style="display: inline-block" x-blackberry-focusable="true" />
<img src="toDeleteImages/3.jpg" height="100" style="display: inline-block" x-blackberry-focusable="true" />
<img src="toDeleteImages/1.jpg" height="100" style="display: inline-block" x-blackberry-focusable="true" />
<img src="toDeleteImages/2.jpg" height="100" style="display: inline-block" x-blackberry-focusable="true" />
<img src="toDeleteImages/3.jpg" height="100" style="display: inline-block" x-blackberry-focusable="true" />
</div>
</div>
Related
I'm trying out angular material and using the md-tabs but some reason when applying md-dynamic-height the tabs plus content if the content exceeds the length of the screen. I just what the content to scroll can't figure out what I'm doing wrong. Here's an example of what I am doing.
<md-tabs md-dynamic-height md-border-bottom md-center-tabs md-stretch-tabs md-swipe-content>
<!--First Tab-->
<md-tab md-dynamic-height label="First INFO">
<div class="">
<div class="bold">
</div>
<hr />
<img src="images/map-pin.png" width="45" height="45" class="left up10" />
<button class="btn-icon right up10"/>
<img src="images/compose.svg" width="25" height="25" />
</button>
<span></span>
<div >
</div>
<div style="clear: both"></div>
</div>
</md-tab>
<!--Second Tab-->
<md-tab md-dynamic-height label="Second INFO">
<div class="">
<div class="bold">
</div>
<hr />
<img src="images/map-pin.png" width="45" height="45" class="left up10" />
<button class="btn-icon right up10"/>
<img src="images/compose.svg" width="25" height="25" />
</button>
<span></span>
<div >
</div>
<div style="clear: both"></div>
</div>
</md-tab>
<!--Third Tab-->
<md-tab md-dynamic-height label="Third INFO">
<div class="">
<div class="bold">
</div>
<hr />
<img src="images/map-pin.png" width="45" height="45" class="left up10" />
<button class="btn-icon right up10"/>
<img src="images/compose.svg" width="25" height="25" />
</button>
<span></span>
<div >
</div>
<div style="clear: both"></div>
</div>
</md-tab>
Sample layout :
<md-tabs md-dynamic-height md-border-bottom md-center-tabs md-stretch-tabs md-swipe-content>
<md-tab label="1">
<md-content style="height:100%">
tab content here
</md-content>
</md-tab>
<md-tab label="2">
<md-content style="height:100%">
tab content here
</md-content>
</md-tab>
<md-tab label="3">
<md-content style="height:100%">
tab content here
</md-content>
</md-tab>
</md-tabs>
Try md-dynamic-height="" in md tabs
<md-tabs md-dynamic-height="">
Hi i am new for jquery mobile.I am developed a mobile app which use together with jquery mobile and phonegap i facing a problem nw. When keyboard is popup , it block my textbox. Please c my code below
phonegap AndroidManifest.xml
<activity
android:name="com.example.smartrealtor.MainActivity"
android:label="SmartRealtor"
android:windowSoftInputMode="adjustPan"
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale"
android:hardwareAccelerated="true"
>
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
Jquery mobile.html
<!-- Tab 1 -->
<div id="nPersonal">
<!-- POP UP-->
<div data-role="popup" id="popupGallery" data-overlay-theme="b" style="background-color:white">
<p class="note2">Choose to take photo with camera or take picture from gallery</p>
<div class="ui-grid-a">
<div class="ui-block-a">
<a href="#" class="ui-btn-transparent ui-btn-icon-top ui-icon-takephoto ui-nodisc-icon" id="cameraBtn">
<br>
<br>
Take Photo<br>
</a>
</div>
<div class="ui-block-b">
<a href="#" class="ui-btn-transparent ui-btn-icon-top ui-icon-opengallery ui-nodisc-icon" id="galleryBtn">
<br>
<br>
Open Gallery<br>
</a>
</div>
</div>
</div>
<div data-role="popup" id="popupPhotoPortrait" class="photopopup" data-overlay-theme="a" data-corners="false" data-tolerance="30,15">
Close<img id="imgLarge" alt="Photo portrait">
</div>
<!-- /POP UP-->
<div data-role="popup" id="popupSave" data-overlay-theme="b" style="width: 250px; height: 150px; align-content: center;">
<div data-role="header">
<h1>Record</h1>
</div>
<p class="note">Are you confirm to save?</p>
<div class="ui-grid-a">
<div class="ui-block-a">
<a class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-a">Cancel</a>
</div>
<div class="ui-block-b">
<a class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-a" id="btnSave" data-transition="none">Confirm</a>
</div>
</div>
</div>
<!-- /POP UP-->
<!-- Agent Detail -->
<div class="ui-grid-a loan">
<ul data-role="none" data-inset="true" class="login_from transparentForm">
<strong>Contact Information</strong>
<div style="text-align: center; display: block; width: 100%; height: 120px; border-bottom: 1px solid #dbdbdb">
<span style="font-size: 12px; text-align: center; color:#fff">Take Picture</span>
<div class="file-upload">
<img id="imgContactPic" style="width: 100px; height: 100px" />
</div>
</div>
<li>
<label>Name </label>
<span>
<input type="text" name="customername" id="txtCustomerName" data-role="none" required />
</span>
</li>
<li>
<label>Contact No. </label>
<span>
<input type="number" name="customerhpcontact" id="txtCustomerHPcontact" data-role="none" required>
</span>
</li>
<li>
<label>Date of birth </label>
<span>
<input type="date" data-role="none" id="txtDOB">
</span>
</li>
<li>
<label>Email</label>
<span>
<input type="email" name="customeremail" id="txtCustomerEmail" data-role="none">
</span>
</li>
<li>
<label>Address</label>
<span>
<input type="text" name="txtAddress" id="txtAddress" data-role="none">
</span>
</li>
<li>
<label>Occupation</label>
<span>
<input type="text" name="customeroccupation" id="txtCustomerOccupation" data-role="none">
</span>
</li>
<li>
<label>Category</label>
<span>
<div class="ui-field-contain">
<select name="select-native-1" id="ddlCategory" data-role="none" class="infoSelect" required>
<option value>Select Categories</option>
<option value="B">Buyer</option>
<option value="T">Tenant</option>
<option value="S">Seller</option>
<option value="I">Investor</option>
</select>
</div>
</span>
</li>
</ul>
</div>
<!-- /Agent Detail -->
</div>
<!-- /Tab 1 -->
</form>
</div>
I also try setting android:windowSoftInputMode="adjustResize" but, the adjustresize break my page css. My page, header and footer will jumping , once the keyboard appear
Please help. thanks
Can you please tell me how to resize the text area? Actually the problem is that I open the pop up screen on button click. In my pop up screen I have one text area (having small area).
<textarea cols="40" rows="8" name="textarea-12" id="text-12" class="caseTextArea_h" autocorrect="off"></textarea>
I write many characters on that text area and than close it. Again I open this and it has the same area that was before closing(large area)? How to resize that text area so that it starts with same starting size.
My code:
<div data-role="popup" id="CaseInformationScreen" data-close-btn="none" data-overlay-theme="a" data-dismissible="false">
<div data-role="header" data-theme="b"> Cancel
<h1>Case Information</h1>
Add
</div>
<div data-role="content">
<div>
<img src="img/Documents.png" />
</div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:top;margin-left: 0px;">Case Name:</label>
<input name="text-12" id="text-12" value="" type="text" class="caseName_h" autocorrect="off">
</div>
<div data-role="fieldcontain">
<label for="caseDate" style="text-align:left;margin-left: 0px;">Case Date:</label>
<input name="caseDate" id="caseDate" value="" type="date" class="caseDate_h">
<!--input name="mydate2" id="mydate2" type="date" data-role="datebox" class="caseDate_h" data-options='{"mode": "calbox","useNewStyle":true,"zindex":1200}'/-->
</div>
<div data-role="fieldcontain">
<label for="textarea-12">Case Notes :</label>
<textarea cols="40" rows="8" name="textarea-12" id="text-12" class="caseTextArea_h" autocorrect="off"></textarea>
</div>
</div>
</div>
Working example: http://jsfiddle.net/Gajotres/7JqRG/3/
Just use this CSS:
#text-12 {
width: 100% !important;
height: 50px !important;
max-height: 50px !important;
}
It will lock textarea height. !important must be used to override default values.
$('#text-12').css('width','whatyouwant');
or
$('#text-12').attr('cols','whatyouwant'); //for the width
$('#text-12').attr('rows','whatyouwant'); //for the height
I've fixed footer with 4 buttons. when any listitem is coming under this footer (behind footer), and clicking on footer button.
Expectation - Footer button click event must be fired.
Actual - ListItem behind the footer is triggering.
Update -
index.html page
<div data-role="header" data-position="fixed" data-theme="f">
<a href='#'><img class="back"/></a>
<div class="logo"><img class="logoimg"/></div>
<img class="btn_toplogout"/>
</div><!-- /header -->
<div data-role="content">
<div class="ui-caption"><span id="txt_airtime_topup"></span></div>
<form name="topup" autocomplete="off">
<h4><span id="txt_operator"></span>:</h4>
<div class="ui-droplist" id="topup_operatordroplist">
<select id="t_operator" name="t_operator" data-theme="drop" data-icon="circle_d">
</select>
</div>
<h4><span id="txt_recptmsisdn"></span>:</h4>
<div class="ui-droplist" id="topup_persondroplist">
<select id="topup_person" name="topup_person" data-theme="drop" data-icon="circle_d" onChange="topup_update_contacts();">
</select>
</div>
<div class="input-contain">
<input type="tel" id="t_number" maxlength="14" name="t_number" placeholder="IDNO: (leave empty for yourself)" autocomplete="off"/>
</div>
<fieldset class="ui-grid-a">
<div class="ui-block-a">
<h4><span id="txt_amount2"></span>:</h4>
<div class="input-contain amount-margin">
<input type="number" id="ppamount" name="ppamount" maxlength="8" class="ui-amount" min="0" autocomplete="off"/>
</div>
</div>
<div class="ui-block-b">
<h4><span id="txt_currency"></span>:</h4>
<div class="ui-droplist">
<select id="p_currency" data-theme="drop" data-icon="circle_d">
<option value="EUR">EUR</option>
</select>
</div>
</div>
</fieldset>
</form>
</div><!-- /content -->
<div data-role="footer" data-id="btmmenu" data-position="fixed" data-theme="f" class="postlogin">
<div data-role="navbar"><ul>
**<li>Home</li> //this is footer
<li>Send Money</li>
<li>Pay Bills</li>
<li>Manage Accounts</li>**
</ul></div>
</div><!-- /footer -->
dropdown list coming under footer -
<h4>Currency:</h4>
<div class="ui-droplist">
<select id="request_currency" data-theme="drop" data-icon="circle_d">
<option value="EUR">EUR</option>
</select>
</div>
CSS -
.ui-droplist .ui-btn-active {
border: 1px solid #808080;
background: #fdfdfd;
font-weight: bold;
color: #111111;
text-shadow: 0 1px 1px #ffffff;
background-image: url(images/arrow_down.png),
-webkit-gradient(linear, left top, left bottom, from( #eee ), to( #fdfdfd )); /* Saf4+, Chrome */
background-image: url(../../exclusive/images/arrow_down.png),
-webkit-linear-gradient(#eee , #fdfdfd ); /* Chrome 10+, Saf5.1+ */
background-image: url(../../exclusive/images/arrow_down.png),
-moz-linear-gradient(#eee , #fdfdfd ); /* FF3.6 */
background-image: url(../../exclusive/images/arrow_down.png),
-ms-linear-gradient(#eee , #fdfdfd ); /* IE10 */
background-image: url(../../exclusive/images/arrow_down.png),
-o-linear-gradient(#eee , #fdfdfd ); /* Opera 11.10+ */
background-image: url(../../exclusive/images/arrow_down.png),
linear-gradient(#eee , #fdfdfd );
background-position: right center !important;
background-repeat: no-repeat !important;
}
footer css -
.postlogin.ui-footer .ui-navbar li.ui-block-a a .ui-btn-inner {
background-image: url(images/icon-home.png);
background-repeat: no-repeat;
background-position: 50% 0;
}
I didn't get the problem you mentioned while doing the following:
Example of index.html:
<html>
<head>
<meta name='viewport' content='minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no'/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile.structure-1.1.1.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<!-- THIS FILE CONTAINS THE CSS YOU POSTED -->
<link rel="stylesheet" href="./css/test.css" />
</head>
<body>
<!-- THIS PAGE CONTAINS THE HTML CODE YOU POSTED + SEVERAL DROP DOWN LIST IN QUESTION -->
<div data-role="page" id="mine">
<div data-role="header" data-position="fixed" data-theme="f">
<a href='#'><img class="back"/></a>
<div class="logo"><img class="logoimg"/></div>
<img class="btn_toplogout"/>
</div><!-- /header -->
<div data-role="content">
<div class="ui-caption"><span id="txt_airtime_topup"></span></div>
<form name="topup" autocomplete="off">
<h4><span id="txt_operator"></span>:</h4>
<div class="ui-droplist" id="topup_operatordroplist">
<select id="t_operator" name="t_operator" data-theme="drop" data-icon="circle_d"></select>
</div>
<h4><span id="txt_recptmsisdn"></span>:</h4>
<div class="ui-droplist" id="topup_persondroplist">
<select id="topup_person" name="topup_person" data-theme="drop" data-icon="circle_d" onChange="topup_update_contacts();"></select>
</div>
<div class="input-contain">
<input type="tel" id="t_number" maxlength="14" name="t_number" placeholder="IDNO: (leave empty for yourself)" autocomplete="off"/>
</div>
<fieldset class="ui-grid-a">
<div class="ui-block-a">
<h4><span id="txt_amount2"></span>:</h4>
<div class="input-contain amount-margin">
<input type="number" id="ppamount" name="ppamount" maxlength="8" class="ui-amount" min="0" autocomplete="off"/>
</div>
</div>
<div class="ui-block-b">
<h4><span id="txt_currency"></span>:</h4>
<div class="ui-droplist">
<select id="p_currency" data-theme="drop" data-icon="circle_d">
<option value="EUR">EUR</option>
</select>
</div>
</div>
</fieldset>
</form>
<!-- DROP DOWN LISTS IN QUESTION -->
<h4>Currency:</h4>
<div class="ui-droplist">
<select id="request_currency" data-theme="drop" data-icon="circle_d">
<option value="EUR">EUR</option>
</select>
</div>
<h4>Currency:</h4>
<div class="ui-droplist">
<select id="request_currency" data-theme="drop" data-icon="circle_d">
<option value="EUR">EUR</option>
</select>
</div>
<h4>Currency:</h4>
<div class="ui-droplist">
<select id="request_currency" data-theme="drop" data-icon="circle_d">
<option value="EUR">EUR</option>
</select>
</div>
<h4>Currency:</h4>
<div class="ui-droplist">
<select id="request_currency" data-theme="drop" data-icon="circle_d">
<option value="EUR">EUR</option>
</select>
</div>
<!-- DROP DOWN LISTS IN QUESTION -- END -->
</div><!-- /content -->
<div data-role="footer" data-id="btmmenu" data-position="fixed" data-theme="f" class="postlogin">
<!-- YOUR FOOTER'S BUTTONS -->
<div data-role="navbar"><ul>
<li>Home</li>
<li>Send Money</li>
<li>Pay Bills</li>
<li>Manage Accounts</li>
</ul></div>
</div><!-- /footer -->
</div>
<!-- THE LINK REFERENCES OF YOUR FOOTER'S BUTTON -->
<div data-role="page" id="home">
<div data-role="content">
1 - HOME
</div>
</div>
<div data-role="page" id="transfer">
<div data-role="content">
2 - TRANSFER
</div>
</div>
<div data-role="page" id="paybill">
<div data-role="content">
3 - PAYBILL
</div>
</div>
<div data-role="page" id="manage">
<div data-role="content">
4 - MANAGE
</div>
</div>
<!-- THE LINK REFERENCES OF YOUR FOOTER'S BUTTON -- END -->
</body>
</html>
Your CSS, included in test.css:
.ui-droplist .ui-btn-active {
border: 1px solid #808080;
background: #fdfdfd;
font-weight: bold;
color: #111111;
text-shadow: 0 1px 1px #ffffff;
background-image: url(images/arrow_down.png),
-webkit-gradient(linear, left top, left bottom, from( #eee ), to( #fdfdfd )); /* Saf4+, Chrome */
background-image: url(../../exclusive/images/arrow_down.png),
-webkit-linear-gradient(#eee , #fdfdfd ); /* Chrome 10+, Saf5.1+ */
background-image: url(../../exclusive/images/arrow_down.png),
-moz-linear-gradient(#eee , #fdfdfd ); /* FF3.6 */
background-image: url(../../exclusive/images/arrow_down.png),
-ms-linear-gradient(#eee , #fdfdfd ); /* IE10 */
background-image: url(../../exclusive/images/arrow_down.png),
-o-linear-gradient(#eee , #fdfdfd ); /* Opera 11.10+ */
background-image: url(../../exclusive/images/arrow_down.png),
linear-gradient(#eee , #fdfdfd );
background-position: right center !important;
background-repeat: no-repeat !important;
}
.postlogin.ui-footer .ui-navbar li.ui-block-a a .ui-btn-inner {
background-image: url(images/icon-home.png);
background-repeat: no-repeat;
background-position: 50% 0;
}
When clicking on a footer's button, while the drop down list is behind the footer, the button / link triggers normally and redirects to the associate page.
For example, if I click on the footer's button / link called Manage as shown below:
The drop down list is not triggered and I am redirected to the Manage page as expected:
I don't know if your problem is related to the jQuery Mobile version, or the device (Android, iPhone, Blackberry, etc ?) you're using...
For your information, I used jQuery Mobile version 1.1.1 and I tested the example above with iPhone 5.
Even if I tested your code using jQuery Mobile version 1.1.1, I suggest you to use the latest version (1.2 at the moment, check http://jquerymobile.com/blog/2012/10/02/announcing-jquery-mobile-1-2-0-final/ ), which corrected many bugs found in older versions.
Hope this will work for you.
How to change a link inside the flash element? I have SWF file with set a link inside and I want to change to mine on the website. This thing I need to control the advertisment system.
Trying this, but not working:
<style>
#content {
position: absolute;
z-index:2;
}
#flash {
position: relative;
z-index:1;
}
</style>
<div id="content" onclick="window.open('http://mylink.com','_blank');"><img src="no" width="100" height="100" border="0"></div>
<div id="flash"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://active.macromedia.com/flash4/cabs/swflash.cab#version=4,0,0,0" width="100" height="100">
<param name="movie" value="111.swf">
<param name="play" value="true">
<param name="loop" value="true">
<param name="quality" value="high">
<embed src="111.swf" play="true" loop="true" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" width="100" height="100"></embed>
</object></div>
Right now found this exapmle:
<div style="border: #FF9900 3px dotted; width: 400px; height: 200px;">
<object id="swf">
<embed src="/uploads/storys_files/2006.03.15_15.55.30/123.swf" loop="true" quality="high" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" height="200" width="400">
</object><img src="http://yapro.ru/uploads/users/1/2010/12/16/782d4b5d3c55bdc50619b8aa141b4ecc.gif" height="170" width="350" style="border: #99FF00 3px dotted; position: relative; top: -190px; left: 20px; margin-bottom: -170px; z-index: 1;">
</div>
But you need everytime to put top, left, margin-bottom parameters. Can someone modify it to make working correct without pointing top, left, margin-bottom parameters?
You need the .FLA file to edit the source and recompile, unless the SWF is XML-driven. But it doesn't sound like it's something you built.
Here's how you can do a div overlay...
HTML Code:
<div>
<div id="content">Insert content here</div>
<div id="flash">Insert flash here</div>
</div>
CSS code:
#content {
background-color:#0099ff;
height:200px;
width:300px;
position:fixed;
margin-left:100px;
z-index:2;
}
#flash {
background-color:#ccff33;
height:300px;
width:600px;
position:fixed;
margin-top:100px;
}
Here is a decision how to put any link on the SWF (Flash) file ignoring its internal programm link:
<div style="position:relative;">
<div style="z-index:822; position:absolute; width:inherit; height:inherit; cursor:hand; cursor:pointer;">
<img src="transparent.gif" width="100" height="100" onclick="location.href='http://webproverka.com';">
</div>
<object >
<embed src="111.swf" loop="true" wmode="opaque" quality="high" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" height="100" width="100">
</object>
</div>