I am a JQM newbie and need to put a linked image in the collapsible content header so that when it is clicked the user will be able to access the associated href. I also need to be able to get the header to expand and collapse as needed. Here is my code so far
<h3><em><?=$agent_row['prefix'] . ' ' . $agent_row['first'] . ' ' . $agent_row['last'] . ' ' . $agent_row['suffix']?>
<a class="vcard" id="vcard" href="http://vcard.parascript.com/<?=$agent_row['first']?>_<?=$agent_row['last']?>.vcf"><img src="images/vcard.png" style="vertical-align:middle;width:30px;" /></a>
<a id="email" href="mailto:<?=$agent_row['email']?>"><img src="images/mail.png" style="vertical-align:middle;width:30px;" /></a>
<a id="mobilephone" href="tel://<?=$agent_row['cell']?>"><img src="images/mobile_phone.png" style="vertical-align:middle;width:30px;" /></a>
</em></h3>
I appreciate any suggestions provided.
Check out: http://jquerymobile.com/demos/1.2.0/docs/content/content-collapsible.html
Example: http://jsfiddle.net/Twisty/tJyeQ/
HTML
<html>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>page1</h1>
</div>
<div data-role="content">
<div data-role="collapsible">
<h3><em>First Last</em></h3>
<a class="vcard" id="vcard" href="http://vcard.parascript.com/first_last.vcf">
<img src="images/vcard.png" style="vertical-align:middle;width:30px;" />
</a>
<a id="email" href="mailto:f.last#example.com"><img src="images/mail.png" style="vertical-align:middle;width:30px;" />Email</a>
<a id="mobilephone" href="tel://4155551212"><img src="images/mobile_phone.png" style="vertical-align:middle;width:30px;" />Phone</a>
</div>
</div>
</div>
</body>
</html>
Here is a rough example using Layout Grids: http://jsfiddle.net/Twisty/tJyeQ/6/
HTML
<html>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>page1</h1>
</div>
<div data-role="content">
<div class="ui-grid-c ui-btn ui-bar-c ui-corner-all">
<div class="ui-block-a">
<span class="ui-btn-inner">
<span class="ui-icon ui-icon-plus ui-icon-shadow"> </span>
<span class="ui-btn-text">First Last</span>
</span>
</div>
<div class="ui-block-c">
<a class="vcard" id="vcard" href="http://vcard.parascript.com/first_last.vcf">
<img src="images/vcard.png" style="vertical-align:middle;width:30px;" />
vcard
</a>
</div>
<div class="ui-block-c">
<a id="email" href="mailto:f.last#example.com">
<img src="images/mail.png" style="vertical-align:middle;width:30px;" />
Email
</a>
</div>
<div class="ui-block-d">
<a id="mobilephone" href="tel://4155551212">
<img src="images/mobile_phone.png" style="vertical-align:middle;width:30px;" />
Phone
</a>
</div>
</div><!-- /grid-c -->
</div>
</div>
</body>
</html>
This allows you to set a unique focus or button for each image and you could have the Name Show/Hide other content like a collapsible block, with just a little extra code.
Related
I am using Cordova with JQuery mobile, it working fine on android, but when made build for Windows Phone 8, the JQM Toolbar(Header and footer) not getting fix, Toolbar little goes up when I am scrolling up page and when I am scrolling down the toolbar little goes down, like below screenshots
http://159.100.223.157/screens/IMG_0712.JPG
http://159.100.223.157/screens/IMG_0713.JPG
here is the code
<div role="main">
<div id="SearchRides" data-role="page" class="page innerPage">
<div class="ui-header ui-bar-a ui-header-fixed header" data-position="fixed">
<h1 aria-level="1" role="heading" class="ui-title">Search</h1>
</div>
<!--end header-->
<div class="projects ui-content content">
<form method="post" action="#">
<div class="ui-field-contain">
<label for="txtFrom" style="text-align: center">Source</label>
<input type="text" name="txtFrom" id="txtFrom" placeholder="To">
</div>
</form>
</div>
<!--end body-->
<div data-theme="a" class="footer" data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li> </li>
</ul>
</div>
<!--end footer-->
</div>
</div></div>
I have try to include a footer with a navbar inside a dialog page, however, the navbar gets bigger than the dialog window. I did try to just include the navbar without the data-role="footer" but is doing the same. Looks like the navbar inside the dialog doesn't inherent the css properties from the dialog parent. Here is the code.
<div id="addCourse" data-role="page" data-dialog="true" data-close-btn="none">
<div role="dialog">
<div data-role="header" role="banner">
<h1>Add course</h1>
</div>
<div class="ui-content">
<div class="ui-field-contain">
<label for="add-course">New course</label>
<input type="text" name="add-course" id="add-course" placeholder="Enter new course" value="">
</div>
</div>
<div data-role="navbar">
<ul>
<li>Cancel</li>
<li>Save</li>
</ul>
</div>
</div>
anybody with sugestions??
It looks like the borders on the navbar buttons are not considered when setting width. You can fix it with a little CSS
<div id="addCourse" data-role="page" data-dialog="true" data-close-btn="none">
<div data-role="header" role="banner">
<h1>Add course</h1>
</div>
<div role="main" class="ui-content">
<div class="ui-field-contain">
<label for="add-course">New course</label>
<input type="text" name="add-course" id="add-course" placeholder="Enter new course" value="" />
</div>
</div>
<div data-role="navbar">
<ul>
<li>Cancel</li>
<li>Save</li>
</ul>
</div>
</div>
.ui-dialog-contain .ui-navbar {
padding-right: 4px;
border-bottom-left-radius: 0.3125em;
border-bottom-right-radius: 0.3125em;
}
Working DEMO
I did found another way to work around this issue. I just added a overflow:hidden to the data-role="navbar"
<!-- Dialog Add Course Footer -->
<div data-role="navbar" style="overflow:hidden;">
<ul>
<li>Cancel</li>
<li>Save</li>
</ul>
</div>
<!-- End Dialog Add Course Footer -->
Hi can you please tell me how to hide and show a div in query mobile.
May be i have two solution use hide and show function.
Or use toggle class ?
here is my fiddle.
http://jsfiddle.net/ravi1989/3LEdJ/2/
I need to show or hide on click of "openclosebutton" .This div
<div class="ui-grid-c">
<div class="ui-block-a">
<input name="text-12" id="text-12" value="" type="text" class="textSearchvalue_h">
</div>
<div class="ui-block-b">
<a href="#" data-role="button" data-corners="false" data-inline="true" class="searchButtonClickText_h" >Search</a>
</div>
<div class="ui-block-c">
Next
</div>
<div class="ui-block-d">
Previous
</div>
<div class="ui-block-e">
close
</div>
</div>
The probem you have is the width of the text field. I suggest you to use a grid layout to achieve the desired effect:
<div class="ui-grid-c">
<div class="ui-block-a">
<input name="text-12" id="text-12" value="" type="text" class="textSearchvalue_h">
</div>
<div class="ui-block-b">
<a href="#" data-role="button" data-corners="false" data-inline="true" class="searchButtonClickText_h" >Search</a>
</div>
<div class="ui-block-c">
Next
</div>
<div class="ui-block-d">
Previous
</div>
</div>
See the documentation here.
I have one page and one pop up page i want to show pop up screen on clicking a button .I have header on both pop up screen and page but when i click the button the pop up is display but it css is not well as actual .
I am using jquery mobile .
Here is my fiddle
<div data-role="page" id="Home" >
<div data-role="header" data-theme="b" data-position="fixed" >
<h1 class="ui-title" id="hdr" style="text-align:left;margin-left: 20px;">My Cases</h1>
<div class="ui-btn-right" id="addbuttons" data-role="controlgroup" data-type="horizontal">
Setting
<a href="#" data-role="button" data-iconpos="notext" data-inline="true" data-icon="plus" data-theme="b" data-rel="popup" id="Add" >Add</a>
Edit
</div>
</div>
</div>
</div-->
<ul data-role="listview" data-inset="true" id="here_table" >
</ul>
</div>
</div>
<!-- Page two Case Information Screen-------------------------->
<div data-role="popup" id="CaseInformationScreen" data-close-btn="none">
<div data-role="header" data-theme="d" data-position="fixed">
Cancel
<h1>Case Information</h1>
Add
</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">
</div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:left;margin-left: 0px;">Case Date:</label>
<input name="text-12" id="text-12" value="" type="text">
</div>
<div data-role="fieldcontain">
<label for="textarea-12">Textarea:</label>
<textarea cols="40" rows="8" name="textarea-12" id="textarea-12"></textarea>
</div>
</div>
Here's a demo : http://jsfiddle.net/hungerpain/HesVd/3/
What I've changed in your demo
I changed your HTML structure a lil bit :
<div data-role="page" id="Home">
<div data-role="header"></div>
<div data-role="content"></div>
</div>
<div data-role="popup" id="CaseInformationScreen"></div>
| |
| |
\ /
\ /
\ /
<div data-role="page" id="Home">
<div data-role="header"></div>
<div data-role="content">
<div data-role="popup" id="CaseInformationScreen"></div>
</div>
</div>
The reason is because popup has to lie inside page. Only then will the styling remain.
I removed the code you'd put for popup to fire and added it inline in the HTML like this:
Add
Note that I've added only the changed attributes. The rest of the attributes are in demo.
I found a question with my exact problem that nobody answered:
https://stackoverflow.com/questions/11218707/jquery-mobile-data-rel-dialog-not-firing
I have a dialog that should open when the user presses on a button. It works fine on ALL desktop browsers and Android browser. It does NOT work in Safari on iPhone or iPad. If you refresh the page on the iDevice, it works.
Here is my button:
#Model.selectedDate.ToShortDateString()
Here is my dialog:
<div data-role="dialog" id="popup">
<div data-role="header" data-theme="b">
<h1>Production Date</h1>
</div>
<div data-role="content" data-theme="b">
#using (Html.BeginForm()) {
<div data-role="fieldcontainer">
#Html.LabelFor(model => model.selectedSystem, "Select a date for System " + Model.selectedSystem)
#Html.HiddenFor(model => model.selectedSystem)
#Html.LabelFor(model => model.selectedDate, "Date:")
#Html.TextBoxFor(model => model.selectedDate, new { type = "date" })
</div>
<button type="submit" data-theme="b">Select</button>
}
</div>
Here is the page source for the rendered page:
<div data-role="page" id="mainpage" data-theme="b">
<div data-role="header" data-theme="b" data-position="fixed">
<center>
<a href="/Home/Main">
<img src="/mobileDemo/Images/company_header_logo_mobile.png" border="0" /></a>
</center>
</div>
<div style="text-align: center; padding-top: 5px">
<center>
<a href="/mobileDemo/Home/Main">
<img src="/mobileDemo/Images/menu_home.png" style="width: 40px" border="0" /></a>
<a href="/mobileDemo/Counts">
<img src="/mobileDemo/Images/menu_prodcounts.png" style="width: 40px" border="0" /></a>
<a href="/mobileDemo/Inventory">
<img src="/mobileDemo/Images/menu_inventory.png" style="width: 40px" border="0" /></a>
<a href="/mobileDemo/Vehicle">
<img src="/mobileDemo/Images/menu_vehicle.png" style="width: 40px" border="0" /></a>
<a href="/mobileDemo/SSAR">
<img src="/mobileDemo/Images/menu_ssar.png" style="width: 40px" border="0" /></a>
<a href="/mobileDemo/STAR">
<img src="/mobileDemo/Images/menu_star.png" style="width: 40px" border="0" /></a>
<a href="/mobileDemo/EXECDASH">
<img src="/mobileDemo/Images/menu_dashboard.png" style="width: 40px" border="0" /></a>
</center>
</div>
<div style="padding-left: 20px; padding-top: 10px">
<strong>Body Dashboard for System 1</strong>
</div>
<div style="padding-right: 15px; padding-left: 15px; padding-top: 10px">
<a href="#popup" data-role="button" data-rel="dialog" data-icon="gear" data-iconpos="right"
data-transition="pop">11/7/2012</a>
<hr />
<ul data-role="listview" data-inset="true">
<li>Production</li>
<li>Body OEE</li>
<li><a href="/mobileDemo/ExecDash/BodyDKS?system=1&date=11-07-2012">Doukie-Seisan
KPI</a></li>
<li>Down Time</li>
</ul>
</div>
</div>
Production Date
Select a date for System 1
Date:
Select
Also worth noting, I am passing a parameter to the view. The URL looks like this:
http://internal-server/mobileDemo/ExecDash/Body/1
Which goes to this when the dialog IS being displayed is:
http://internal-server/mobileDemo/ExecDash/Body/1#&ui-state=dialog
When is DOES NOT work (prior to refresh) on an iDevice, this is what is displayed when I hold down on the button and it gives me the OPEN/OPEN IN NEW TAB option:
http://internal-server/mobileDemo/ExecDash/Body/1#popup
What am I doing wrong?
I got your example working with some small tweak.
Created new project using VS2012 selected the mobile template.
Then in my Home/Index.cshtml I added your tag i.e. the button that fires the popup. Change the code to text be #DateTime.Now.ToShortDateString() since I didnt have your model.
I took your dialog and pasted it in the _Layout.cshtml immediately after the closing for the data-role="page" see code below:
<body>
<div data-role="page" data-theme="b">
<div data-role="header">
#if (IsSectionDefined("Header")) {
#RenderSection("Header")
} else {
<h1>#ViewBag.Title</h1>
#Html.Partial("_LoginPartial")
}
</div>
<div data-role="content">
#RenderBody()
</div>
</div>
<div data-role="dialog" id="popup">
<div data-role="header" data-theme="b">
<h1>Production Date</h1>
</div>
<div data-role="content" data-theme="b">
#using (Html.BeginForm()) {
<div data-role="fieldcontainer">
<label>hello world</label>
</div>
<button type="submit" data-theme="b">Select</button>
}
</div>
</div>
#Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
#RenderSection("scripts", required: false)
As you can see I also took out some of your code as I don't have your model, so I substituted my "hello world" label instead. So why did I do it all that way? Well, I tried to put the dialog in the index.cshtml BUT that meant the dialog HTML was getting output inside data-role="page" . So it wasn't firing for me. Once I moved it outside the data-role="page" div it worked. Tested out on iPhone5 and it worked (without refresh). The one thing I did notice about your markup in this post was that you were missing one closing DIV. So I'm not sure it was a copy/paste error or what. Try my exact steps and you should see it working on and iDevice just fine.