We Keep Coding

Add popup in jquery mobile

I have added a list in my website like this;
<ul>
<li>Video</li>
</ul>
Currently, when the user click this button the video page opens, however, what I want to do is, along the video page opening up, I also want to add a pop, saying "This is the video page".
I have searched online but I can't seem to find anythiing that I need, I found this but I can't seem to intergrate my list with this code;
Open Popup
<div data-role="popup" id="popupBasic">
<p>This is a completely basic popup, no options set.<p>
</div>
Also, if possible, I want the popup to close automatically after certain amount of time e.g. 3 seconds
I have tried this but only the first link opens;
<div data-role="popup" id="popupBasic">
<p>This is a completely basic popup, no options set.<p>
</div>
<ul>
<li>Video</li>
</ul>

this uses jquery ui to accomplish what you want. it pops up a dialog waits 3 seconds then closes it 3 seconds later
JSFiddle: jsfiddle.net/mcf2280/tbyuys9w/7/
$(function() {
$("#popupBasic").dialog({ autoOpen: false });
$(".navButton").click(function() {
var text = $(this).text();
$("#popupBasic").html('<p>'+text+'</p>');
$("#popupBasic").dialog('open')
window.setTimeout(closeAlert, 3000);
});
function closeAlert(){
$("#popupBasic").dialog('close');
}
});

jQuery select first accordion in each tab

I have a page that uses jQuery tabs. Each tab contains one or more jQuery accordions, which are generated dynamically, in addition to other stuff. Example:
<div id="tab1" class="tab">
<div>
Some stuff
</div>
<div class="accordion">
I am an accordion
</div>
</div>
<div id="tab2" class="tab">
<div class="accordion">
I am also an accordion
</div>
More stuff
<div class="accordion">
I am also an accordion
</div>
</div>
I would like the first accordion in each tab to remain open, while the others (if there are any) are collapsed. I have tried:
$('.tab .accordion:first')
which only selects the first accordion on the page (obviously). I also tried:
$('.tab .accordion:first-child')
This selects the first accordion in tab2 but it doesn't select the one in tab1 because there's some stuff above it. I've also tried:
$('.tab > .accordion').filter(':first-child')
$('.tab').children('.accordion:first-child')
Along with about every combination of selectors I can think of. At this point my brain is fried. Before you point me to a duplicate question, none of these are asking the same question exactly:
JQuery Tab each Selected tab first text box focus
jquery select first child with class of a parent with class
jQuery selector for each first element on every parent
jQuery Selecting the first child with a specific attribute
The difference in my case is I have very little control over what content shows up in these tabs.

I'd suggest:
$('.tab').find('.accordion:first');
JS Fiddle proof-of-concept.

Try this:
$('.accordion:first', '.tab')

using a modal overlay with twitter bootstrap scrollspy - incorrect activation

I have a nav menu bar based on twitter bootstrap that uses scrollspy to for hightlighting.
this works by matching the value after the # in a link (e.g. <a href="#foo"> when <div id="foo"> scrolls into view). pretty basic, here's the doco: http://twitter.github.com/bootstrap/javascript.html#scrollspy
my problem comes when I introduce a link to a bootstrap modal dialogue box within an element that is being spied on. imagine I have:
<ul class="nav">
<li>a link</li>
<li>modal</li>
<li>a different link</li>
</ul>
<p> .. my page .. </p>
<div id="info"><a name="info"></a>info on my product</div>
<div id="products"><a name="products"></a>a list of my products</div>
<div class="modal hide fade" id="demo" tabindex="-1" role="dialog">
<div class="modal-header">my header</div>
<div class="modal-body">some content</div>
<div class="modal-footer"><button>close</button></div>
</div>
<p> .. more page </p>
the div that represents my modal overlay also uses the #id-of-target format for its href, but since it's included inside the nav (of course) then scrollspy ALSO highlights when the (hidden) div is in view. Depending on where the modal code in on the page, this confuses the menu system's highlighting.
I can see that scrollspy should be modified to only link to items that are visible (and therefore not activate when "demo" scrolls into view) but can't work out how to modify the plugin to only fire if the element is visible, or override the event some other way.
can anyone give me some pointers?

funny how typing out a question sometimes makes you think in the right way to solve it, where just thinking about it does not.
to make this work, I modified the scrollspy component of bootstrap so that it tests the target is hidden and bails out of the activate routine (also doesn't raise the activated event, since it's not active)
here it is: around line 1432 for me (+if ..
, activate: function (target) {
var active
, selector
if (target.is(":hidden")) return
this.activeTarget = target

dynamically select jquery UI tabs based on hash ID from a text link inside tabs

I have a set of jQuery UI tabs that is generated by a CMS, so content will be different for every page. Some tabs sets could have two tabs, others could have 5 etc.
I have looked around for a simple solution to this but cant seem to find it. i have looked at the history plugin as well as alternate codes.
Here's my sample markup
<div id="tabs">
<ul>
<li>TAB 1 HEADING</li>
<li>TAB 2 HEADING</li>
<li><a href="#tabs-3">TAB 2 HEADING<a></li>
<li>TAB 3 HEADING</li>
</ul>
</div>
<div id="tabs-1">tab1 content here</div>
<div id="tabs-2">tab2 content here</div>
<div id="tabs-3">tab2 content here</div>
<div id="tabs-4">tab4 content here</div>
I want to create a script that allows the user to alternately select a tab from a text link within the tabbed content. So for example, in the tab content div, have that links to the 3rd tab, as the tab navigation does. I don't want to have to manually code the index of the desired tab in the script.
I know this will work, but want to create something that is more robust across all my tabbed content.
$("#tabs").tabs("select" , "#tab-4");
Here is what i have so far, but doesnt seem to work. I am new to jQuery. I have added an onlick called tabJump to the anchor links.
function tabJump(){
//get href ID as a number
var thisID = Number($(this).attr('href').replace(/#tabs-/, '')) - 1;
// this should trigger the new tab based on this href id.
$("#tabs").tabs("select" , "#tabs-" + thisID);
};
And ideas on how i could get this to work? Essentially i want whatever the id of the tag as the href of the anchor link being clicked, and to target the new tab by this given id. I would want to have multiple instances of a link with these id hrefs.
Thanks in advance.

ok thanks guys, finally figured out what i needed.
I'll share below in case anyone finds this useful.
initiate function on click
<p>my text link</p>
and the script
function tabJump(obj) {
//grab the id in the clicked links href
var thisID = Number($(obj).attr('href').replace(/#tabs-/, ''));
//use this ID to trigger the click on the set of tabs
$("#tabs").tabs("select", "#tabs-" + thisID);
//then scroll to the top of the tabs set
$('html, body').animate({
scrollTop: $("#tabs").offset().top
});
};
So the way i'm using this is once the content in the tabs has been created in articles in my CMS, I'll end up with say 4 or 10 tabs. Then there's some copy in the first tab that needs to link to say, tab 4. So i add an onclick to the link and attach the jQuery script whenever i need it, as illustrated above.
Thanks guys for the help and the tips. If anyone has a cleaner way of doing this, feel free to post.
Peace

Not sure exactly if this is what you need, but see if this works.
Here is a working fiddle.
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
<p>This is tab ONE</p>
<p>Go to next tab</p>
<p>Go to prev tab</p>
</div>
<div id="tabs-2">
<p>This is tab TWO</p>
<p>Go to next tab</p>
<p>Go to prev tab</p>
</div>
<div id="tabs-3">
<p>This is tab THREE</p>
<p>Go to next tab</p>
<p>Go to prev tab</p>
</div>
$("#tabs").tabs();
$("#tabs div a").on("click", function(){
var idx = Number($(this).parent().parent().attr('id').replace('tabs-','')) - 1;
if($(this).attr('class') == 'next'){
$( "#tabs" ).tabs( "option", "selected", idx + 1 );
}
else{
$( "#tabs" ).tabs( "option", "selected", idx - 1 );
}
});

I think your function tabJump might works. Just need to change the call for the method select to use just the number(thisID) instead of concatenating with the String "#tabs-".
Like this:
function tabJump(){
//get href ID as a number
var thisID = Number($(this).attr('href').replace(/#tabs-/, '')) - 1;
// this should trigger the new tab based on this href id.
$("#tabs").tabs("select" , thisID);
};

JQuery Mobile does not update or repost data when navigated away

I have three tabs on the footer: home, promotions and events. I have notification badge implemented such that when a new promotion is loaded in the database, the footer of the mobile page shows 1 and if more are inserted, the number gets incremented in real time. Now, say, if I started with home page, and I see real time notifications on the promotions and events tab. But, when I navigate to the events tab, the notifications go away, but if I click back to the home tab, the notifications show up. I have tried "pageinit" and "pageshow" separately, with the alert message for test as suggested in other stackoverflow questions. Alert messages show up at each click on the tabs. But, when I tried to modify with the append or html, it does not output me with notification badge. I tried adding id to data-role=page for home, promotions and events, alerts show up, but the append or html functions do not give me results as expected. What I am missing here?
<div data-role="page">
<div data-role="header">
........
</div>
<div data-role="content">
.......
</div>
<div data-role="footer" data-position="fixed" >
<div data-role="navbar" >
<ul>
<!---- The notification badge from jquery script get appended in these IDs----->
**<li><div id="home"></div>...........</li>**
**<li><div id="promotion"></div>......</li>**
**<li><div id="event"></div>..........</li>**
</div>
</div>
</div>

I figured that if my first page is the home page, JQuery Mobile stores it in its history, and any other pages visited will be the ajax calls. And, I have been saving notification badges in the page that they belong to. for eg. if a new promotion is being added, it is being appended to promotion.mobile.erb and if a new event is being added, it is being appended to a div element in event.mobile.erb. I would be able to see it only if my current page is the home page. This was my the issue earlier.
How I resolved it?
I unDRY'ed my footer and page elements from the application.mobile.erb and added page ids to home , promotions and events pages. Then, I added different ids to the div elements where the notification badges go.
for div element in the home_page , I added 0 (you can choose any thing that makes it unique)
for div element in the promotion_page I added 1 and
for div element in the event_page I added 2 like in the code below...
<div data-role="footer" data-position="fixed" >
<div data-role="navbar" >
<ul>
<!---- The notification badge from jquery script get appended in these IDs----->
**<li><div id="home0"></div>...........</li>**
**<li><div id="promotion0"></div>......</li>**
**<li><div id="event0"></div>..........</li>**
</div>
</div>
Now, when any real time notification comes up, add it to either promotion0 or event0 div so that whenever we navigate away, we can get the old badge from the that div, and repost it to the navigated page div element using pageinit like in the example below...
$('#promo_page').live('pageinit',function(event){
$('#promotion2').badger(oldBadge0);
$('#event2').badger(oldBadge_e0);
});