i"ve been hunting the docs and can't seem to find a way to make a scrollable horizontal navbar in jQuery mobile has anybody accomplished this yet ?
here's what i have for navbar so far
<div data-role="header" data-scroll="x">
<ul>
<li class="logo"><img src="img/iphoneheader.gif" alt="Penn State Live" /></li>
<li id="link">Colleges</li>
<li>Campuses</li>
<li>Faculty and Staff</li>
<li>Of Interest</li>
<li>Photos</li>
<li>Video</li>
<li>Newswire Subscription</li>
<li>PSUTXT</li>
</ul>
</div>
I guess this is what you want.
HTML.
<div class="categories">
<ul>
<li><span>ABC</span></li>
<li><span>DEF</span></li>
<li><span>GHI</span></li>
<li><span>JKL</span></li>
</ul>
</div>
JQuery
$(function(){
var step = 1;
var current = 0;
var maximum = $(".categories ul li").size();
var visible = 2;
var speed = 500;
var liSize = 120;
var height = 60;
var ulSize = liSize * maximum;
var divSize = liSize * visible;
$('.categories').css("width", "auto").css("height", height+"px").css("visibility", "visible").css("overflow", "hidden").css("position", "relative");
$(".categories ul li").css("list-style","none").css("display","inline");
$(".categories ul").css("width", ulSize+"px").css("left", -(current * liSize)).css("position", "absolute").css("white-space","nowrap").css("margin","0px").css("padding","5px");
$(".categories").swipeleft(function(event){
if(current + step < 0 || current + step > maximum - visible) {return; }
else {
current = current + step;
$('.categories ul').animate({left: -(liSize * current)}, speed, null);
}
return false;
});
$(".categories").swiperight(function(){
if(current - step < 0 || current - step > maximum - visible) {return; }
else {
current = current - step;
$('.categories ul').animate({left: -(liSize * current)}, speed, null);
}
return false;
});
});
Also, try out: http://kryops.de/jqm/tabs/demo
This looks really promising and performance is great on mobile.
I know it's not what you're looking for but:
Live Example: http://jsfiddle.net/9zuxH/10/
<div data-role="page" data-theme="b" id="jqm-home">
<ul >
<li data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<div class="logo"><img src="img/iphoneheader.gif" alt="Penn State Live" /></div>
<div id="link">Colleges</div>
Campuses
Faculty and Staff
Of Interest
Photos
Video
Newswire Subscription
PSUTXT
</fieldset>
</li>
</ul>
</div>
Documentation: jquerymobile.com/demos/1.0a4.1/docs/lists/lists-forms-inset.html
UPDATED the example: http://jsfiddle.net/9zuxH/21/
A little better
This is after ypur lst comment, so I'll be addressing the need to scroll the navbar with a finger.
You pointed to an implementation that has problems. There are others.
I have used this once:
http://plugins.jquery.com/project/jQclickNScroll
for a desktop touchscreen. (not sure how it behaves on mobile)
It worked with a hrefs and it has an option allowHiliting:true that turns off preventing other events passing through
And there's this:
http://digitalillusion.altervista.org/wordpress/pages/dragscroller/viewport-test.html
Stumbled across this while researching the same issue. Haven't tried it yet but it looks pretty handy
http://darsa.in/sly/
Related
I got this error. I tried to dinamicly add some html tags by JS.. And there is a ID name is well what I need for addEventListener. But I dont know how to fix it.. If I change '#answer-' + i to .answers is working.. But this is not solution because I could click for any button without get the clicked ID..
Questions.prototype.displayQuestion = function() {
let answer = [];
questionDOM.innerHTML = this.question;
let correct = this.correct;
for(let i = 0; i < this.answer.length; i++){
answer.push(
`
<div id="answer-${i}" class="answer">
<h5>${this.answer[i]}</h6>
<div class="check"></div>
</div>
`
);
document.querySelector('#answer-' + i).addEventListener('click', function() {
if(i === correct) {
document.querySelector('#answer-' + correct).classList.add('animate__animated', 'animate__heartBeat');
} else if (i !== correct) {
document.querySelector('#answer-1').classList.add('animate__animated','animate__headShake')
}
})
}
answerDOM.innerHTML = answer.join('');
}
index.html
<body>
<div class="container">
<div class="question">
<div class="questionbox animate__animated animate__bounce">
<h2 id="question"></h2>
</div>
</div>
<div class="answers"></div>
</div>
<script src="app.js"></script>
You are pushing to your answers array but not actually adding the nodes to the dom. You want to do something like document.body.innerHTML += answer[i] before you try to get the element by id. I can also see that your loop won't execute because the length of answer is initially zero before you add to it within the loop. You need to add to answer before the loop or change the loop condition to <= this.answer.length <--- but that is an infinite loop
I have a typical scenario where there is a list view and then there's a details view. You get to the details view by selecting a list item. There's data in the record that of course will inform the layout view of the details. What I see is that the subtemplate's helper function is being called too soon (during the list view rendering) to have the data for the list details . Furthermore, it's not being called when I click an item in the list. What am I doing wrong? I'm using Meteor 0.8.2 with jQM 1.4.3.
The HTML looks as follows:
<!-- details page -->
<div data-role="page" data-theme="q" id="listdetail">
<div data-role="header" data-position="fixed">
<a data-rel="back" href="#" data-transition="slideleft" class="baack fa fa-arrow-left"></a>
<div id="detailTitle" class="headertitle"></div>
</div>
<!-- /header -->
<div data-role="content" class="ma-req-detail" id="details">
{{> qDetails}}
</div>
</div>
<!-- /details page -->
<template name="qList">
{{#each items}}
{{>qListItems}}
{{/each}}
</template>
<template name="qListItems">
<li>
<div id="msg-container-{{requestId}}" class="processing-msg">
<i class="fa fa-2x fa-times-circle"></i>
<p class="msg-text-{{requestId}}">Action pending...</p>
</div>
<a id="requestId" href="#listdetail" data-name="{{additionalProperties}}" data-transition="slide" class="{{#if isProcessing}}ui-disabled{{/if}}">
<p class="requestor">{{additionalProperties.requestedForUid}}</p>
<p class="description">week of {{additionalProperties.workWeekOf}}</p>
<p class="reqdate">total hours: </p>
</a>
</li>
</template>
<template name="qDetails" >
<div role="main" class="q-details">
<div data-role="navbar" class="week-nav">
<ul>
{{#each days}}
{{>navElements}}
{{/each}}
</ul>
</div>
</div>
<div class="ma-buttons ui-fieldcontain ui-footer-fixed">
<div data-role="controlgroup" data-type="horizontal" class="" data-position-fixed="true" data-position="bottom">
<a data-mini="true" href="#" id="approve-request"
class="ui-btn ui-btn-c ui-corner-r ui-icon-check ui-btn-icon-left ma-btn approve">Approve</a>
</div>
</div>
</template>
<template name="navElements">
<li><a id="{{day}}Nav" href="#{{day}}">{{day}}<br><span class="digital-date">{{date}}</span></a></li>
</template>
The JS bits are:
Template.qDetails.rendered = function() {
$('#details').trigger('create');
};
Template.qDetails.helpers({
days: function() {
//TODO need a way to delay this function to call when details template is shown
var dt = Session.get("record").additionalProperties.workWeekOf;
var days = [];
var weekday = new Array(7);
weekday[0] = "SAT";
weekday[1] = "SUN";
weekday[2] = "MON";
weekday[3] = "TUE";
weekday[4] = "WED";
weekday[5] = "THU";
weekday[6] = "FRI";
var dtVal = dt.getDate();
for (var i = 0; i < 7; i++) {
var dayObj = {};
dayObj.date = dtVal + i;
dayObj.day = weekday[i];
days.push(dayObj);
}
return days;
}
});
Template.qDetails.record = function () {
return Session.get("record");
};
In the code above the "days" helper function is being called when the list page is shown which results in an error because it is trying to pull the "workWeekOf" date from a record that hasn't been selected yet. How can I get to this only call once a record has been selected?
This is slightly confusing, since there's nothing in the above that shows how yourqDetails template gets rendered in the first place. However, assuming it does, you can just use:
var dt = Session.get("record") ? Session.get("record").additionalProperties.workWeekOf : [default date]
[default date] could be anything sensible (like new Date()), but you need to return something to avoid the error being thrown. This is a pretty common but very easily solved problem in Meteor - you just need a suitable default for when your Session variable or Collection isn't yet ready.
Hi i'm developping a simple listView that lists the column "firstname" of my table : i want to get the selected value (name) , i found this link but it shows he how to get the index and not the value of the selected item http://jsfiddle.net/w2JZU/
here's my code :
HTML:
<div id="popup-bg">
</div>
<div id="popup-box">
<div data-role="page" id="home">
<div data-role="header">
<h1>Players</h1>
</div>
<div data-role="content">
<ul data-role="listview" id="artiste" >
</ul>
</div>
</div>
</div>
</section>
js :
function successCB()
{
db.transaction(queryDB, errorCB);
}
function queryDB(tx)
{
tx.executeSql('SELECT * FROM Players ', [], querySuccess, errorCB);
}
function querySuccess(tx, results)
{
var len = results.rows.length;
var dataset= results.rows;
$("#artiste").empty();
for (var i = 0; i < len; i++)
{ item = dataset.item(i);
$("#artiste").append( "<li data-theme='c'><a href='game.html'>
<img src='images/avatar.jpg'><h3>"+item['firstName']+"</h3></a></li>" );
}
There isn't a "value" for an item in a list using the li tag. However, you can get the text of what's in that list element using the jQuery .text() method. I've modified the jsfiddle you referenced to do exactly that: http://jsfiddle.net/Cht2e/
You might want to consider adding another attribute to the li tag, such as data-name (you can make up the attribute) and then you can get that via the jQuery .attr() method. For example, you might change you append code to do:
$("#artiste").append( "<li data-theme='c' data-name='"+item['firstName']+"'><a href='game.html'>
<img src='images/avatar.jpg'><h3>"+item['firstName']+"</h3></a></li>" );
And then attach your click handler like this:
$('#artiste').children('li').on('click', function () {
alert('Selected Name=' + $(this).attr('data-name'));
});
I don't think this is necessarily the best structure or approach to take, but it will accomplish what you're asking.
So the issue at hand is to have a constantly moving slider in jQuery Mobile alpha 4.1 as if listening to a song or watching a show. Basically a progress bar in which the user can also enter input. Much like one on a regular mobile device's music player. Does anyone have an idea on how to do this?
Example:
(Not sure if this will work with Alpha 4.1 but might give you and idea on how to make yours work)
http://jsfiddle.net/zPVVq/
JS
$('#movingSlider').live('click', function() {
var started = false;
var speed = 1500;
var duration = new Array();
for(i = $(this).val(); i <= $(this).attr('max'); i++){
duration.push(i);
}
$.each(duration,function() {
var moveSlider = function() {
newValue = parseInt($('#movingSlider').val(), 10) + 1;
$('#movingSlider').val(newValue).delay(speed).slider('refresh');
}
setTimeout(moveSlider,0);
});
});
$('#resetSlider').click(function() {
$('#movingSlider').val(0); });
HTML
<div data-role="page" id="home">
<div data-role="content">
<label for="slider-0">Click slider value to start --></label>
<input type="range" name="slider" id="movingSlider" value="0" min="0" max="1000" />
Reset Slider
</div>
</div>
So I am pretty new to JQuery and just spent 5 hours getting this working. If anyone has a better approach please I would love to hear.
That is my basic question how can it be done cleaner, more streamline?
What I did was used the minitabs plugin and what the code below will do is toggle custom tabs back and forth. I needed a way to have the one tab blue and the other gray depending what tab I was on. What I hit against was tab1 would stay blue even when I clicked on tab2, just was funky until this fixed it. As you can see it's not the cleanest approach but it works. I am sure if you want to try this out the minitab plugin can be had here.
http://minitabs.googlecode.com/files/jquery.minitabs.js
JQuery:
$(document).ready(function(){
$("#tabs").minitabs('slow', 'fade');
$("#tab1").click(function()
{
var $this = $(this);
if( $this.is('.removed') )
{
$this.removeClass('removed');
$this.addClass('selected');
$('#tab2').removeClass('selected');
$("#tab2").addClass('removed');
} else {
$('#tab2').removeClass('selected');
}
return false;
});
$("#tab2").click(function()
{
var $this = $(this);
if( $this.is('.removed') )
{
$this.removeClass('removed');
$this.addClass('selected');
$("#tab1").removeClass('selected');
$("#tab1").addClass('removed');
} else {
$('#tab1').removeClass('selected');
}
return false;
});
});
Body:
<div id="tabs">
<ul>
<li>tab-l</li>
<li>tab-r</li>
</ul>
<div id="quick-links">
<ul>
<li>Look at me getting myself all in a frenzy!</li>
</ul>
</div>
<div id="newsletter-link">
Sometimes it's would be nice if they reported the fun news!
</div>
</div>
I looked at this briefly, and didn't see any problems with this less-complex setup which takes advantage of minitabs automatically applying the class "current" to the currently selected tab:
<head>
<style type="text/css">
.tabs a {
background: grey;
}
.tabs a.current {
background: blue;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#tabs").minitabs('slow', 'fade');
});
</script>
</head>
<body>
<div id="tabs">
<ul class="tabs">
<li>tab-l</li>
<li>tab-r</li>
</ul>
<div id="quick-links">
<ul>
<li>Look at me getting myself all in a frenzy!</li>
</ul>
</div>
<div id="newsletter-link">
Sometimes it's would be nice if they reported the fun news!
</div>
</div>
</body>
For me that handles the case you describe perfectly.