Jquery Mobile, Collapsible set and childrens - jquery-mobile

I'm trying to populate the content of JQM accordions/collapsible sets dynamically. I've had a look at http://the-jquerymobile-tutorial.org/jquery-mobile-tutorial-CH20.php, but the examples seem to be outdated. So I've tried to come up with a working example, but I'm currently stuck and can't see, why this shouldn't work:
<script type="text/javascript">
$(document).ready(function() {
$(".mySet").bind('expand', function (event, ui) {
/* This prints e.g. "This is the first entry\n
I'm the collapsible set content for section 1." */
console.log($(this).text());
/* This should print "This is the first entry" (=the innerText of <h3>)
but it doesn't, it prints "This is the first entry\n
I'm the collapsible set content for section 1." as well */
console.log($(this).next().text());
/* This should just print "I'm the collapsible set content for section 1"
(=the innerText of <p>) but it doesn't, it prints e.g. "This is the
first entry\n I'm the collapsible set content for section 1." as well */
console.log($(this).nextAll("p").text());
});
});
</script>
<div data-role="collapsible-set">
<div data-role="collapsible" class="mySet">
<h3>This is the first entry</h3>
<p>I'm the collapsible set content for section 1.</p>
</div>
<div data-role="collapsible" class="mySet">
<h3>This is the second entry</h3>
<p>I'm the collapsible set content for section 2.</p>
</div>
</div>
Does anyone see, why jQuery won't descend on $(this) (=which points to the currently expanded <div ...class="mySet">? If I debug this code in Opera's DragonFly I can see, that $(this) seems to be the same as $(this).next() (at least they have the same values for innerHTML etc.)
Thanks for your help!

So, after fiddling around a little bit I came up with the following hack/workaround:
$(document).ready(function() {
$(".mySet").bind('expand', function (event, ui) {
/* I'm just creating a new var "myDiv" which points to my current div (so in a
way "myDiv" is just a copy of "this" */
var myDiv = $("#"+$(this).attr('id'));
var myP = myDiv.find('p:first');
// Works as expected, prints "I'm the collapsible set content for section 1."
console.log(myP.text());
});
});

Related

siblings not hiding on a jqueryui slide

here's the function:
$('.popoutlink').on('click', function() {
var box = $('#' + $(this).data('box'));
box.siblings().hide();
box.toggle("slide", { direction: "left" }, 500);
box.siblings().hide();
});
the two siblings.hide statements are because I'm in the middle of trying to figure out why I'm left with two slideouts on screen if I click on two buttons in rapid succession.
The html is:
<div class="col-md-2">
<div class="popoutlink" data-box="p1">1</div>
<div class="popoutlink" data-box="p2">2</div>
<div class="popoutlink" data-box="p3">3</div>
<div class="popoutlink" data-box="p4">4</div>
<div class="popoutlink" data-box="p5">5</div>
</div>
<div class="col-md-10 bb" style="height: 400px;">
<div class="popout" id="p1"><h1>panel 1</h1></div>
<div class="popout" id="p2">
<h1>panel 2</h1>
</div>
If I click on two buttons quickly then two windows are left on screen. I would like the siblings to hide before the selected div appears.
I have tried using promise.done():
box.siblings().hide(200).promise().done(function(){
box.toggle("slide", { direction: "left" }, 500);
});
to no effect. Adding box.toggle to hide as a callback:
box.siblings().hide(200, function(){
box.toggle("slide", { direction: "left" }, 500);
});
was very funny but not useful.
How do I get the siblings to go away reliably before I show the selected div no matter how quickly I click the buttons?
You see it here just click on the numbered boxes quickly
Thanks
If I understand your question, this should help:
https://jsfiddle.net/Twisty/3mbh5p0r/
jQuery UI
$(function() {
$('.popoutlink').on('click', function() {
var box = $('#' + $(this).data('box'));
$(".popout").hide();
//box.siblings().hide();
box.toggle("slide", {
direction: "left"
}, 500);
//box.siblings().hide();
});
});
When any of the "links" are clicked, they are all hidden and then only the one whom was clicked is toggled.
Update
A little more testing of .hide() versus .css("display", "none") revealed that changing the CSS was a faster method. This page talks about how it's immediate but I found that it wasn't as fast.
The matched elements will be hidden immediately, with no animation.
This is roughly equivalent to calling .css( "display", "none" ),
except that the value of the display property is saved in jQuery's
data cache so that display can later be restored to its initial value.
If an element has a display value of inline and is hidden then shown,
it will once again be displayed inline.
And:
Note that .hide() is fired immediately and will override the animation
queue if no duration or a duration of 0 is specified.
I did try using the callback, which made it worse. The callback should be triggered when the hide animation is complete, yet it added the element of animating the hide operation. Even when the speed was 0, it was slower.
So I advise this:
$(function() {
$('.popoutlink').on('click', function() {
$(".popout").css("display", "none");
$('#' + $(this).data('box')).show("fast");
});
});

auto-scroll grid in jqm

I have a simple webapp consisting of a main page that contains a grid with 3 columns.
<div data-role="content">
<div class="ui-grid-b" id="main">
</div>
</div>
At runtime this grid is expanded with new rows by clicking a button.
$(document).on('pageinit', '#page-home', function() {
$('button').on('click', function() {
var table = $('#main');
var blocka = $('<div class="ui-block-a">One</div>');
var blockb = $('<div class="ui-block-b">Two</div>');
var blockc = $('<div class="ui-block-c">Three</div>');
blocka.appendTo(table);
blockb.appendTo(table);
blockc.appendTo(table);
});
});
Now I have the problem that if there are more rows added (let's say 10) then the last rows run out of screen.
Is there a simple way to automatically scroll to the last row everytime a new one is created?
I know that I can get the element by calling table.find('.ui-block-a:last') but I don't know how to scroll to the found element.
Thanks in advance!
As suggested in this answer: How to go to a specific element on page?
Add the following after blockc.appendTo(table) in your click handler:
$('html, body').animate({
scrollTop: blocka.offset().top + 'px'
}, 'fast');
Here is fiddle demo: http://jsfiddle.net/ezanker/5ap48/

Trouble using jQuery UI resizeable and draggable together

I'm trying to allow dropped elements to be both draggable and resizeable within the parent container.
Here is my CSS:
.toolitem {padding:5px 10px;background:#ececec;border:1px solid silver}.labelitem {width:114px;padding:10px 5px;color:#222;background:#fff;border:1px solid silver}
Here is my html:
<header>
<ul>
<li><div id="atool" class="toolitem droppable">A</div></li>
<li><div id="btool" class="toolitem droppable">B</div></li>
</ul>
<div class="clear"></div></header><section id="container"/>
Here is my JS:
$(".toolitem").draggable({
opacity:1,
tolerance:'fit',
helper:'clone'
});
$("#container").droppable({
accept:'.droppable',
drop: function (event, ui) {
// Check for new or already dropped element
var dropped = ui.draggable.data("dropped");
if (dropped == null && dropped != "1") {
// Create new element only once
var label = $('<div class="labelitem droppable">[Label]</div>');
// Set flag as dropped
label.data("dropped", "1");
// Make new element draggable within parent
label.draggable({ containment: 'parent', grid: [2, 2], helper: 'original' });
// Make new element resizable within parent
label.resizable({ containment: 'parent' });
// Append new element to parent
label.appendTo(this);
}
}
});
The above code executes well, except the dropped div is not resizeable. Please help.
I solved it myself. After googling for an hour, I found I was missing the following include
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css" />
It was needed for resizing div's styles. Everything is now working as expected. But, strange it is never mentioned in jQueryUI documentation or did I miss it.

How do I change the theme of my jQuery Mobile application using javascript?

Here is some javascript that I wrote that attempts to change the theme of the header of my jQuery Mobile application. It is in the head element of my web page after jQuery mobile javascript and CSS has loaded.
$(function() {
$("[data-role='header']").attr('data-theme', 'b');
});
Why is it having no effect?
As it turns out, dynamically changing the theme of a header is easy since there is only a single class to change, that goes for buttons as well (if you have buttons in your header).
//store all the classes to remove from elements when swapping their theme
var removeClasses = 'ui-bar-a ui-bar-b ui-bar-c ui-bar-d ui-bar-e ui-btn-up-a ui-btn-up-b ui-btn-up-c ui-btn-up-d ui-btn-up-e';
//when a specific page initializes, find links in the body and add an event
//handler to the click event for them to update the header's theme
$(document).delegate('#my-page', 'pageinit', function () {
$(this).find('a').bind('click', function (event) {
//get the new theme letter, stored in the HREF attribute of the link
var newTheme = $(this).attr('href');
//change the header's class/attr to relfect the new theme letter
$.mobile.activePage.children('.ui-header').attr('data-theme', newTheme).removeClass(removeClasses).addClass('ui-bar-' + newTheme).children('h1').text('My Header (' + newTheme + ')');
//change the header button's classes/attr to reflect the new theme letter
$.mobile.activePage.children('.ui-header').children('a').removeClass(removeClasses).addClass('ui-btn-up-' + newTheme);
return false;
});
});​
Here is a demo: http://jsfiddle.net/jUgLr/1/
After all that I guess I should make sure you know you can just add a data-theme attribute to any element to change it's theme:
<div data-role="page">
<div data-role="header" data-theme="e">
...
</div>
<div data-role="content" data-theme="d">
...
</div>
</div>
This would work
$(document).delegate('[data-role=page]','pageinit',function(){
$('[data-role=header]').attr('data-theme','b').removeClass().addClass('ui-header ui-bar-b');
});

how do i create a function to change header banner when using jquery tabs

i have 3 default jquery tabs loading external content.
However i need the following adding/binding and was wondering if someone can help me with this issue;
Aswell as loading each tabs content, i need a different header banner to display (outsude of the tab countainer..so i basically have an id called #bannerAd) when each tab is selected.
the coding should be set so a user can link directly to each tab from outside the page (and each banner should load acordingly.)
I really hope this makes sense, hope someone can help.
<script type="text/javascript">
$(function(){
// Tabs
$('#tabs').tabs();
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
});
</script>
</head>
<body>
<!-- Tabs -->
<h2 class="demoHeaders"></h2>
<div id="tabs">
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
<div id="tabs-1">Lorem ipsum dolor</div>
<div id="tabs-2">Phasellus mattis tincidunt nibh.</div>
</div>
You could also put data- attributes one each of your tabs.
<li>First</li>
<li>Second</li>
<li>Third</li>
Then in your jQuery
$("#tabs li a").click(function() {
var bannerUrl = $(this).data().bannerurl;
$("#bannerAd").attr("src", bannerUrl);
});
Live in action here: http://jsbin.com/iquluz/5/edit#javascript,html,live
Something like this might be the easiest thing:
$("#tabs li a").click(function() {
switch($("this").attr("href")) {
case "#tabs-1":
//Load First Banner
break;
case "#tabs-2":
//Load Second Banner
break;
case "#tabs-3":
//Load Third Banner
break;
}
});
This will basically set up a click event on the buttons that will fire whenever any of them get clicked. It will then figure out which button was clicked and change the banner accordingly.
And you'd want to put it in your $(function()

Resources