It is easier to see what I mean by looking at this image:
http://postimg.org/image/fcmo6pbvp/
I am trying to let the user input the address using the google maps places auto-complete JS function like this example.
It works, but the autocomplete text field, is blocked by the jQuery Mobile popup, just like the picture shown.
The HTML Look something like this:
<li>
<a href="#popupLocation" data-rel="popup" data-position-to="window"
class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-a" data-transition="pop">
<h3>Location</h3>
<p id="locationSelectionString">London, UK</p>
</a>
<div data-role="popup" id="popupLocation" data-theme="a" class="ui-corner-all">
<div style="padding:10px 20px;">
<h3 style="margin-top: 0px; margin-bottom: 0px;">Location</h3>
<hr>
<table width="100%">
<tr>
<input id="locationSelectionInput" onFocus="geolocate()" type="text" name="location" value="" placeholder="Enter a location" data-theme="a" style="margin-top: 0px; margin-bottom: 0px;">
</tr>
<tr>
<td width="50%">
<button style="margin-top: 0px; margin-bottom: 0px;" onclick="changeLocationCanceled();">Cancel</button>
</td>
<td width="50%">
<button style="margin-top: 0px; margin-bottom: 0px;" onclick="changeLocation();">OK</button>
</td>
</tr>
</table>
</div>
</div>
</li>
I will be so happy if someone can tell me what went wrong.
BTW, don't laugh at my code, this is my first JS app :p
It's too late for Christina. I hope to help other people struggling this issue.
My solution is just in you css file add code.
.pac-container{
z-index: 9999 !important;
}
Related
I've built a feedback function to be used on the bottom of pages on our company website. The visitor can vote YES or NO on the question, "Was this information useful to you?" The click show a div (feedbackDiv1/feedbackDiv2) via Javascript.
The function works, but I want the question and the answer buttons to disappear after the visitor has voted, I.e. hide the div #pagefeedback.
I've tried all my tools, but I cant get this to work.
Help would be very much appreciated!
This is the JavaScript used:
function showFeedback1() {
document.getElementById('feedbackDiv1').style.display = "block";
function showFeedback2() {
document.getElementById('feedbackDiv2').style.display = "block";}
This is the HTML used:
<div class="greycontentbox">
<div id="pagefeedback">
<h4 style="text-align: center;">Was this information useful to you?</h4>
<table align="center" width="70%" border="0" cellspacing="2" cellpadding="5">
<tbody>
<tr>
<td align="center"><a class="knappfeedbackyes knappsmall" href="#" onclick="showFeedback1()"><i style="margin-right: 10px;" class="fa fa-thumbs-up"></i>YES</a></td>
<td align="center"><a class="knappfeedbackno knappsmall" href="#" onclick="showFeedback2()"><i style="margin-right: 10px;" class="fa fa-thumbs-up"></i>NO</a></td>
</tr>
</tbody>
</table></div>
<div align="center"><div id="feedbackDiv1" style="display:none;" class="negativefeedback answer_list">POSITIVE FEEDBACK</div></div>
<div align="center"><div id="feedbackDiv2" style="display:none;" class="positivefeedback answer_list">NEGATIVE FEEDBACK</div></div>
</div>
Kind regards,
Pete
Based on Robert's answer, you could do a simple function which receive the ID of the element that has to be shown.
function showFeedback(feedback) {
document.getElementById(feedback).style.display = "block";
document.getElementById('options').style.display = "none";
}
<div class="greycontentbox">
<div id="pagefeedback">
<h4 style="text-align: center;">Was this information useful to you?</h4>
<table align="center" width="70%" border="0" cellspacing="2" cellpadding="5">
<tbody id="options">
<tr>
<td align="center"><a class="knappfeedbackyes knappsmall" href="#" onclick="showFeedback('feedbackDiv1')"><i style="margin-right: 10px;" class="fa fa-thumbs-up"></i>YES</a></td>
<td align="center"><a class="knappfeedbackno knappsmall" href="#" onclick="showFeedback('feedbackDiv2')"><i style="margin-right: 10px;" class="fa fa-thumbs-up"></i>NO</a></td>
</tr>
</tbody>
</table></div>
<div align="center">
<div id="feedbackDiv1" style="display:none;" class="negativefeedback answer_list">POSITIVE FEEDBACK</div></div>
<div align="center"><div id="feedbackDiv2" style="display:none;" class="positivefeedback answer_list">NEGATIVE FEEDBACK</div>
</div>
</div>
If you give your table an ID it's fairly easy to just change it's display css to none. Also you can accomplish the same with 1 function and simply pass an argument to it that you can use in a conditional statement to show your appropriate feedback.
function showFeedback(feedback) {
if (feedback == 'yes') {
document.getElementById('feedbackDiv1').style.display = "block";
} else {
document.getElementById('feedbackDiv2').style.display = "block";
}
document.getElementById('options').style.display = "none";
}
<div class="greycontentbox">
<div id="pagefeedback">
<h4 style="text-align: center;">
Was this information useful to you?
</h4>
<table align="center" width="70%" border="0" cellspacing="2" cellpadding="5">
<tbody id="options">
<tr>
<td align="center">
<a class="knappfeedbackyes knappsmall" href="#" onclick="showFeedback('yes')">
<i style="margin-right: 10px;" class="fa fa-thumbs-up"></i>YES
</a>
</td>
<td align="center">
<a class="knappfeedbackno knappsmall" href="#" onclick="showFeedback('no')">
<i style="margin-right: 10px;" class="fa fa-thumbs-up"></i>NO
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div align="center">
<div id="feedbackDiv1" style="display:none;" class="negativefeedback answer_list">
POSITIVE FEEDBACK
</div>
</div>
<div align="center">
<div id="feedbackDiv2" style="display:none;" class="positivefeedback answer_list">
NEGATIVE FEEDBACK
</div>
</div>
</div>
Updated
I am trying to use modal as confirmation prompt on another modal but confirmation modal is not vissible on onclick. Here is the modals properties I set.
Parent Modal.
I am calling my parent modal in my asmx file and then I am calling my child modal function in an asmx file as well.
<div id="ShowDetails" class="popup" tabindex="-1" style="position:absolute;" role="dialog">
<div class="panel panel-green">
<div class="panel-heading">Parchase Request Details</div>
<div class="panel-body">
<div class=" col-md-12">
<div class="form-inline">
<input id="pdid" style="display: none; width: 90PX; margin: 2px;" type="hidden" />
<%--<asp:HiddenField ID="PDId" runat="server" />--%>
<table class="table table-condensed">
<tr>
<td>
<input id="item" style="display: none; width: 90PX; margin: 2px;" /></td>
<td>
<input id="quantity" style="display: none; width: 90PX; margin: 2px;" />
</td>
<td>
<input id="eprice" style="display: none; width: 90PX; margin: 2px;" />
</td>
<td>
<input id="make" style="display: none; width: 90PX; margin: 2px;" />
</td>
<td>
<input id="discription" style="display: none; width: 90PX; margin: 2px;" />
</td>
<td>
<a id="DoneEditingbtn" role="button" onclick="DoneEditing()" style="color: #72c02c; display: none; width: 100PX; margin: 2px;">Update</a>
</td>
<td><a id="cancleediting" role="button" onclick="cancleeditingdetail()" style="color: #72c02c; display: none; width: 100PX; margin: 2px;">cancel</a>
</td>
</tr>
</table>
<table class="table table-condensed">
<thead>
<tr style="background-color: #01cc66;">
<th>Item Name</th>
<th>Quantity</th>
<th>Estimated Price</th>
<th>Make</th>
<th>Discription</th>
<th>Options</th>
</tr>
</thead>
<tbody id="tblgetdetails">
</tbody>
</table>
<div id="Alert"></div>
</div>
</div>
</div>
<span class="popup-btn-close" data-dismiss="modal">close</span>
</div>
</div>
Confirmation Modal.
<div id="ApproveMod" class="popup" style=" z-index:2; position:absolute; left: 50%; width: 40%; border: 10px solid #666;">
<div class="col-lg-6">
<i>Are you sure to Approve this data?</i>
</div>
<i id="pheadIdApp"></i>
<i id="pbdIdApp"></i>
<div class="col-lg-6">
<a class="btn-u btn-u-red" href="#" role='button' style="text-align: center; width: 45%;" onclick="Approve()">Yes </a>
<button class="btn-u btn-u-green-custom " style="text-align: center; width: 45%;" data-dismiss="modal">NO</button>
</div>
</div>
The Parent modal is showing properly but when I click on parent modal button which should toggle child modal, is not working, In ASMX I have defined my child modal function on onclick as following.
<a role='button' class='form-control' onclick='AppModal(PHId+","+PBDId)'>Approve</a>
Here is the child calling approach I used in script.
function AppModal(phid,pbdid) {
$("#pheadIdApp").val(phid);
$("#pbdIdApp").val(pbdid);
$("#ApproveMod").modal("show");
}
It should work properly I have used it many times but now I am stuck and have no idea where I might have missed the trick any kind of help is much much apriciated.
Its Really Funny Yesterday I got an answer to my problem by you which was about the same problem and now I find you stuck here.
Change your child modal position to relative and assign z-index value greater then 1040 which is for default layer.
I want to display a particular section of very large HTML page (say, "page1.html") through another HTML page (say, "page2.html"), which will contain the links to every section of page1.html. How can I achieve this using simple javascript, jquery, etc. page1.html is actually being rendered through splunk and page2.html is a normal html page that has links to various sections of page1.html. Can this be achieved?
Sorry, couldn't provide pictures as my reputation is below 10.
Let me clarify. There are a range of applications(over 100) on different servers. each application contains a master page like page1.html. There is a search box in page2.html where I type in or select the application whose statistics I want to view.
The sections refer to particular statistics I want to view, suppose I want view only server statistics on which the app is running, then I will click on a link or button (on page2.html) that will take me to that section of the master page (i.e., page1.html) where the relevant information is shown. Similarly if I want to see the application statistics I will click on a link or button (on page2.html) that will take me to that section of the master page where the application statistics are being displayed.
Here is the code for page2.html:
<body class="simplexml preload locale-en">
<a class="navSkip" href="#navSkip" tabindex="1">Screen reader users, click here to skip the navigation bar</a>
<div class="header splunk-header">
<div id="placeholder-splunk-bar">
splunk<strong>></strong>
</div>
<div id="placeholder-app-bar"></div>
</div>
<a id="navSkip"></a>
<div class="dashboard-body container-fluid main-section-body" data-role="main">
<div class="dashboard-header clearfix">
<h2>Application Dashboard HTML</h2>
</div>
<div class="fieldset">
<div class="input input-text" id="input1">
<label>Application</label>
</div>
</div>
<div id="row1" class="dashboard-row dashboard-row1">
<div id="panel1" class="dashboard-cell" style="width: 100%;">
<div class="dashboard-panel clearfix">
<div class="panel-element-row">
<div id="element1" class="dashboard-element html" style="width: 100%">
<div class="panel-body html">
<center><h1 class="golden_gradient">$tok_application$ Application Status Dashboard</h1></center>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="row2" class="dashboard-row dashboard-row2">
<div id="panel2" class="dashboard-cell" style="width: 100%;">
<div class="dashboard-panel clearfix">
<div class="panel-element-row">
<div id="element2" class="dashboard-element html" style="width: 100%">
<div class="panel-body html">
<table cellspacing="5" cellpadding="5" border="0" width="100%">
<tr>
<td width="50%">
<pre><a style="text-decoration: none" onclick="loadURL()"><font size="4"><p align="center"><b>Website Availability</b></p></font></a></pre>
</td>
<td width="50%">
<pre><a style="text-decoration: none" onclick="loadDBStat()"><font size="4"><p align="center"><b>Database Availability</b></p></font></a></pre>
</td>
</tr>
<tr>
<td width="50%">
<pre><a style="text-decoration: none" onclick="loadBM()"><font size="4"><p align="center"><b>Batch Jobs</b></p></font></a></pre>
</td>
<td width="50%">
<pre><a style="text-decoration: none" onclick="loadIT()"><font size="4"><p align="center"><b>Infrastructure Dashboard</b></p></font></a></pre>
</td>
</tr>
<tr>
<td width="50%">
<pre><a style="text-decoration: none" onclick="loadBusiness()"><font size="4"><p align="center"><b>Business Dashboard</b></p></font></a></pre>
</td>
<td width="50%">
<pre><a style="text-decoration: none" onclick="loadCMRegression()"><font size="4"><p align="center"><b>Capacity Management Regression</b></p></font></a></pre>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="content"></div>
</div>
</body>
I want the section of the master page to printed inside
<div id="content"></div>
Also I am a newbie, so please kindly provide a little detailed explaination. Thanks in advance.
http://www.w3schools.com/html/html_iframe.asp has a method using iframes to display a web link.
<iframe width="100%" height="300px" src="demo_iframe.htm" name="iframe_a"></iframe>
<p>W3Schools.com</p>
<p>When the target of a link matches the name of an iframe, the link will open in the iframe.</p>
[code taken from w3scools.com]
i am using bootstrap class= well-large, inside i have a table.
i don't know why but the table goes to the middle center of the well.
what i actually want is that the table will be at the top of the well as i assume it should noramlly be.
this is my code:
<div collapse="!isCollapsedDebts">
<div class="well well-huge">
<table class="table table-condensed">
<tr>
<th>..</th>
<th>..</th>
<th>..</th>
<th>..</th>
</tr>
<tr ng-repeat="debt in user.debts">
<td>{{formatDate(debt.date)}}</td>
<td>{{debt.hour}}</td>
<td>{{debt.courtId}}</td>
<td>{{paymentText(debt.payment)}}
<div class="btn-group">
<a class="btn btn-info btn-mini dropdown-toggle" data-toggle="dropdown" href="#/debts"><i class="icon-edit icon-white"></i></a>
<ul class="dropdown-menu">
<li ng-repeat="choice in items">
<a ng-click="changePayment(user, debt, choice)">{{choice}}</a>
</li>
</ul>
</div>
</td>
</tr>
</table>
</div>
</div>
i have changed well-large to well-hude which i added in the bootstrap css.
this makes my problem even worser.
i have changed the padding to 200 from 24.
.well-huge {
padding: 200px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
i am not that strong in css and styles so i suppose there is a quick fix for the table to be at the top of the well and not in the center page of it.
http://getbootstrap.com/components/#wells
Wells are supposed to appear inset. I'm not sure why you're using a well if you don't want your table to styled like that. Since it isn't clear what you want, I'm assuming the fix is:
.well-huge {
padding-top: 0px;
}
I am trying my hand at jQuery Mobile and I find it a bit confusing because it's a mark-up driven framework.
I created a test page in which I am just trying to align one button to the right, but I am not able to do that. I tried float: right but it's not working. Although margin-left is working by giving a particular percentage, the same is not working when I resize the page.
Here is my Fiddle code. Any help would be great.
<div data-role="page">
<div data-role="header" data-theme="b" data-position="fixed">
<h1 style="font-size: 1.5em; text-align: left; margin-left: 70px;"
data-role="none">Test</h1>
</div>
<div id="contentLogin" align="center" name="contentConfirmation" data-role="content">
<p style="font-size: 0.85em; color: #000000">
<b>Welcome to my page</b>
</p>
<br>
<div class="ui-grid-b responsive">
<div style="margin: 0px; margin-top: 0px; margin: 0px;" class="ui-block-a">
<div data-role="fieldcontain">
<label for="url" class="alignleft">Username:*</label>
<input id="userId1" class="required" name="uid_r" placeholder="" type="text">
</div>
<div data-role="fieldcontain">
<label for="url" class="alignleft">Password:*</label>
<input id="Password1" class="required" name="pwd_r" value="" type="password">
</div>
<button id="login" data-theme="a" type="button" href="home.html" data-mini="false" data-inline="true" >Login</button>
</div>
<div class="ui-block-b">BLOCK A ADS</div>
<div class="ui-block-c" style="margin-top: 0px;">
BLOCK C
</div>
</div>
</div>
<div data-role="footer" data-theme="b" data-position="fixed">
</div>
</div>
Why not place your button inside a div and right align the div? everything inside the parent div including the button will be right aligned.
<div align="right"><button id="login" data-theme="a" type="button" href="home.html" data-mini="false" data-inline="true" >Login</button></div>
Check out the fiddle http://jsfiddle.net/mayooresan/96s59/2/
Use ui-btn-right. It's easier, less verbose and (I think) the jquery way to do things.
Login
The previous answer is correct, but you should use CSS styles instead (aling="" is deprecated)
<div style="text-align: right;">
<button data-inline="true">Login</button>
</div>
You can run into problems if you want multiple buttons...
Try:
<div style="float:right">
<button data-inline="true">Login</button>
</div>
if you want to have multiple buttons (both left and right aligned).
If you use:
<div style="text-align: right;">
<button data-inline="true">Login</button>
</div>
the div will start a new block below any existing buttons, so you can't have other icons on the left hand side.
Class ui-btn-icon-left|right lets you align the buttons left|right but I've found that using two buttons with ui-btn-icon-right will overlap them.
The template below worked for me for two left aligned buttons and two right in a footer:
Home
Intro
<div style="float:right">
Review
Exit
</div>