Basically I am designing this mobile app using jQuery mobile. I am quite new, but I've tried different ways with no success. I am trying to write the code, so that when you click on a list view item, a panel opens with the selected listview h1 (that contains the title of the list item) and p (which holds the description text enter code here). This is my HTML:
<div data-role="panel" id="event-details" data-position="right" data-theme="b" data-display="overlay">
<h1>Hello World</h1>
</div>
<ol data-role="listview" id="show-events" data-theme="a" data-filter="true">
<li data-name="3A Cold-rooms & Aircons" class="ui-shadow" data-icon="my-right-white">
<a href="#event-details" class="events-list">
<img src="img/flower.png" class="listImage" alt="" />
<h2>3A Cold-rooms & Aircons</h2>
<p>Patio & Outdoor Furniture</p>
<p>GARDEN & OUTDOOR ROOMS</p>
</a>
</li>
There are various items in the listview.
$('#show-events').children('li').bind('click', function(e) {
var htxt='<h2>' + $(this).attr('data-name') + '</h2>';
var ptxt='<p>' + txt + '</p>';
var stringText =htxt+ptxt;
$("ol#plannerList").append('<li data-icon="false" class="libgPlanner ui-shadow">' + '<a class="planner-btn" href="#map-page">' + stringText + '</a>' + '</li>').listview('refresh');
}
});
Related
In a basic XHTML document which contains some information, I'd like to have a "quick-jump" type menu of sections to be able to go to the relevant section quickly.
This is a static XHTML document, so I want all the dynamic stuff done by the browser, not the server. I figured jQuery was the way to go.
I've looked at the jQuery UI stuff and accordion is the closest thing I can find, but I don't want the sections to collapse away - I want all the content showing and just a floating contents/menu.
From this:
<h2>Section 1</h2>
<p>Some information</p>
<h2>Section 2</h2>
<p>More great info</p>
I'd like to produce something like:
<ul id="menu">
<li>First section</li>
<li>Another section</li>
</ul>
<a name="section1"><h2>First section</h2></a>
<p>Some information</p>
<a name="section2"><h2>Another section</h2></a>
<p>More great info</p>
I don't mind wrapping each individual section in a div with a class or similar, but would like the process as automated as possible, so I only need to change the actual content when I amend the document.
Any ideas?
Thanks, F.
If you want to just be able to call a function to automatically create the wrappers you could do something like this:
<ul id="menu"></ul>
<div id="sectionInfo"></div>
function addSection(name, anchor, info) {
$("#menu").append("<li><a href='" + anchor+ "'>" + name + "</a></li>");
$("#sectionInfo").append("<a name='" + anchor + "'><h2>" + name + "</h2></a><p>" + info + "</p>");
}
The HTML defines the containers for the sections, then the function itself adds the content with the wrappers you want. This would work well for simple text but if your section information has HTML in it as well it could get a bit messy. In that case, you might want to look into storing sections and their info in a database.
Usage:
addSection("First section", "section1", "Some information with great content");
Edit
You could then extend this to traverse the document when it's loaded to auto call this "addSection" function.
You'll need to define your sections with a more rigid structure so it's easier to traverse. I'd suggest something like this:
<ul id="menu"></ul>
<div id="content"></div>
<div id='sections' style='display:none;'>
<div>
<h2>Section 1</h2>
<p>Some information</p>
</div>
<div>
<h2>Section 2</h2>
<p>More great info</p>
</div>
</div>
Then once the page is loaded, loop through the defined sections and call addSection() which transforms their content into what ever you want it to look like:
<script>
$(document).ready(function() {
$("#sections div").each(function() {
addSection($(this).find("h2").first().html(), $(this).find("p").first().html());
});
});
function addSection(name, info) {
var anchor = name.replace(/ /g,'');
$("#menu").append("<li><a href='" + anchor+ "'>" + name + "</a></li>");
$("#content").append("<a name='" + anchor + "'><h2>" + name + "</h2></a><p>" + info + "</p>");
}
</script>
This code is untested, but the concept should work. You could make it more efficient by moving the elements instead of copying their HTML.
Sounds like you are looking for a piece of JavaScript that generates content based on the results of a selector. Doesn't need anything fancy to accomplish, either:
function buildSectionAnchorElement(index, heading) {
var a = $("<a>");
var name = "section" + index;
$(heading).attr("name", name);
a.attr("href", "#"+name);
a.text($(heading).text());
return a;
}
var headings = $("h1,h2,h3,h4");
var sections = headings.map(function(i,e) {
var a = buildSectionAnchorElement(i,e);
var p = $(e).next("p");
var li = $("<li>");
li.append(a);
$("#menu").append(li);
return li;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu"></ul>
<h2>something special</h2>
<p>lorem ipsum</p>
<h2>different thing</h2>
<p>dolor kismet aha bwaha</p>
I have a collapsible set for days of the week, with user's activities inside it that represented as a listview inside the collapsible-set.
<div data-role="collapsible-set" id="calCol" data-collapsed-icon="arrow-d" data-collapsed="true" data-iconpos="right">
<div data-role="collapsible">
<h1 id="day1Header">Sunday<img src="#" /></h1>
<ul id="day1" data-role="listview">
</ul>
</div>
<div data-role="collapsible">
<h1>Monday</h1>
<ul id="day2" data-role="listview">
</ul>
</div>
...
All the content for the user's activities i take from my database so i insert all my content dynamically like this:
var userActivitiesObj = JSON.parse(data.d);
for (var i = 0; i < userActivitiesObj.length; i++) {
for (var j = 0; j < userActivitiesObj[i].time.length; j++) {
var listItem = "<li style='background-color: " + userActivitiesObj[i].hobColor + ";'>";
listItem += userActivitiesObj[i].actName + " - " + userActivitiesObj[i].actAddress + " - ";
listItem += userActivitiesObj[i].time[j].startTime + "-" + userActivitiesObj[i].time[j].endTime;
listItem += " (" + userActivitiesObj[i].time[j].audiance + ")</li>";
$("#day" + userActivitiesObj[i].time[j].day).append(listItem);
$("#day" + userActivitiesObj[i].time[j].day).listview("refresh");
}
}
One last thing that left for me to do is to add image of every activity to the header of that day.
When i have tried to do it in html, it worked flawlessly:
<h1 id="day1Header">Sunday<img src="#" /></h1>
but when trying to do it dynamically, it doesn't work correctly.
That what i have tried to do:
$("#day1Header").html($("#day1Header").html()+"<img src='#'");
and:
$("#day1Header").append("<img src='#'");
I know that i am missing here something like the .list("refresh") function, but i have no idea what is that.
jQuery Mobile adds an anchor tag with class ui-collapsible-heading-toggle within the header and places the collapsible title there. So you can remove previous images and append the new image like this:
$("#day1Header .ui-collapsible-heading-toggle img").remove();
$("#day1Header .ui-collapsible-heading-toggle").append('<img src="https://placeimg.com/44/22/tech" />');
DEMO
I have created a list, which when a item is clicked, a popup is shown.
The problem starts when using the code on a mobile device (where the screen is relatively small). When a list item is hit, very often, also a button in the popop is hit.
What is the best way to deactivate the buttons until the user realizes the popup even did show?
Try the code here.
The HTML code:
<div data-role="page" id="kon">
<div data-role="content">
<ul data-role="listview" id="kon_list" data-icon="false">
</ul>
<div data-role="popup" id="contactMsgBox" data-transition="pop">
<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
<h3 class="ui-title">Ansprechpartner kontaktieren</h3>
Anrufen <br />
E-Mail senden <br />
Abbrechen
</div>
</div>
</div>
</div>
The JS code:
kontakts = JSON.parse('[{"mail":"test#test.de",'+
'"name":"test test","ort":"Stuttgart","tel":"0123 1234-123"},{"mail":"test2#test.de",'+
'"name":"test2 test2","ort":"Lauf","tel":"0123 1234-123"}]');
var listHTML = "";
for(var i=0; i<kontakts.length; i++)
{
//set the menu item
listHTML = listHTML + "<li tel='"+kontakts[i].tel+
"' mail='"+kontakts[i].mail.toLowerCase()+"'><h3>" + kontakts[i].ort +
"</h3><p>" + kontakts[i].name + "<br />Telefon\t" + kontakts[i].tel +
"<br />E-Mail\t" + kontakts[i].mail.toLowerCase() + "</p></li>";
}
//set items and reload
$('#kon_list').html(listHTML);
$('#kon_list').listview('refresh');
//bind list items
$('#kon_list').children('li').bind('touchstart mousedown', function(e) {
//alert('Selected Tel=' + $(this).attr('tel') + 'Mail=' + $(this).attr('mail'));
$("#contactMsgBox").popup("open");
});
You could change
$('#kon_list').children('li').bind('touchstart mousedown', function(e) {
to
$('#kon_list').children('li').bind('vclick', function(e) {
That way the popup won't show until the user lifts his finger or releases the mouse button.
The problem is happening because mobile browsers wait approximately 300ms (apparently 500ms on samsung galaxy s2) from the time that you tap the button to fire the click event. This wait was causing both to be tapped, the item, and the popup button.
The solution is to stop the browser from waiting. This can be accomplished with the fastclick library
I am using the jquery ui tabs to create dynamic tabs on the fly which will start off without any content. From what I can tell my code is building everything and putting it in the proper places, but jquery is not recognizing them as tabs. How would I get it to recognize the new tabs that were created after page load?
The html code:
<div class="main">
<div>
<button id="new">button</button>
</div>
<div id="tabs">
<ul>
<li>View1</li>
<li>View2</li>
<li id="createView">Create New</li>
</ul>
<div id="tabs-1">
<p>something on this page</p>
</div>
<div id="tabs-2">
<div>
<p>something else on this page</p>
</div>
</div>
</div>
</div>
the Javascript:
//Tabs functionality
$('#tabs').tabs();
//Create new view
var tabNum = 3;
$('#new').click(function() {
$('#tabs ul').append('<li>' + '' + 'newitem' + '' + '</li>');
$('#tabs').append('<div id="' + 'tabs-' + tabNum + '">' + '<div>new</div>' + '</div>');
var NewViewNum = 'tabs-' + tabNum;
$(NewViewNum).focus();
tabNum++;
});
The jQuery UI Tabs have a refresh method you can use per the documentation.
Try calling:
$("#tabs").tabs("refresh");
I have built my first jQuery mobile image gallery, but I have a bug I can't seem to fix. When an image is tapped it pops up to full screen and to carousel all the images I can swipe the images or tap prev/next arrows.
Edit: The problem has changed slightly since I wrote this question, therefor I need to make a few changes in my question and my code.
The images now swipe to every other image, according to the order they are shown in the gallery. I'm dynamically adding a data-index to each image, but somehow the result is tabindex="0" for each image that pops up.
<body>
<!-- gallery content -->
<div data-role="content" id="pagecontent" class="gallerycontent">
<a href="#imgshow" data-transition="pop" data-rel="dialog">
<img src="../img/someimage.jpg" alt="someimage.jpg"/>
</a>
<!-- plus more unordered images -->
</div> <!--/content-->
</div><!-- /page -->
<!-- full screen image preview -->
<div data-role="dialog" id="imgshow" data-theme="d">
<div data-role="header" data-theme="d">
<div id="dialoghead"></div>
</div>
<div data-role="content" data-theme="d">
<center><div id="dialogcontent"></div></center>
</div>
<div data-role="footer">
<center>
Previous
Next
</center>
</div>
</div>
</body>
The 'on-touch' function and 'gonext' function in jquery.
//on-touch function
$('.gallerycontent img').bind('tap',function(event, ui){
var src = $(this).attr("src");
var alt = $(this).attr("alt");
$('#dialogcontent').empty().append('<img src="' + src + '" style="width:100%;"/>' );
$('#dialoghead').empty().append('<center><h2>' + alt + '</h2></center>' );
$(this).parent().addClass('selectedimg');
});
function gonext() {
var current = $('a.selectedimg');
if (current.hasClass('last')) {
var next = $('a.first')
} else {
var next = current.next();
}
var src = next.find('img').attr("src");
var alt = next.find('img').attr("alt");
next.addClass('selectedimg');
current.removeClass('selectedimg');
$('#dialogcontent').empty().append('<img src="' + src + '" style="width:100%;"/>' );
$('#dialoghead').empty().append('<center><h2>' + alt + '</h2></center>' );
}
Any thought or hints?
I think the problem might be that the selectedimg class isn't being removed when the popup is opened. Try adding this line
$('.selectedimg').removeClass('selectedimg');
just before the addClass line into this function, like this:
//on-touch function
$('.gallerycontent img').bind('tap',function(event, ui){
var src = $(this).attr("src");
var alt = $(this).attr("alt");
$('#dialogcontent').empty().append('<img src="' + src + '" style="width:100%;"/>' );
$('#dialoghead').empty().append('<center><h2>' + alt + '</h2></center>' );
$('.selectedimg').removeClass('selectedimg');
$(this).parent().addClass('selectedimg');
});