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');
}
});

Click functionality to be called in html

I have js functionality where a html tag is generated in js and a click function is associated with it. Right now I am trying to attach my js functionality to my generated html, but I don't know how to implement it. I have provided my code below.
When I click the select button the animation effect should take place, but I don't know how to associate the function UversePlanSelector.prototype.click with the select button.
Not working code
Working code
<div class="plan">
<div class="plan_head"><span class="hdr">Max plus</span><span class="tag">$54.95</span>
</div>
<div class="plan_spec"><span class="hdr">18 / 3</span> Mbps</div>
<button>Select</button>
</div>

jQuery Mobile objects stay in memory

I am currently developing a jQuery mobile app. On one page there is a chart created (highcharts) which then can be exported (canvg and canvas2ImagePlugin). However, I noticed that the chart object stays in memory. This has the effect that if the page is opened multiple times and the export button is then pressed, all the previously generated graphs will be exported.
Having a look at Chrome Dev Tool's heap snapshot, I noticed that all the objects stay in memory. To demonstrate this, I made a very basic app on jsfiddle, leaving all the highchart and canvg code out: http://jsfiddle.net/dreischer/Lt4Xw/ --> just click on the button to go to the second page. If you click the export button a pop-up will open. However, if you go back to page one and then page two and click the button again, two pop-ups will open (you might need to allow pop-ups).
I also tried setting analyseGraph null or undefined or using .remove() on pagebeforehide but it didn't help.
Thank you for your help!
Here is the code, for this example:
HTML:
<div data-role="page" id="p1">
<div data-role="header"><h1>Header Page 1</h1></div>
<div data-role="content">
<p>Page 1</p>
Go To Page 2
</div>
</div>
<div data-role="page" id="p2">
<div data-role="header" data-rel="back"><h1>Header Page 2</h1></div>
<div data-role="content">
<p>Page 2</p>
Go To Page 1
<a id="export_graph" data-role="button" style="max-width: 300px;" data-mini="true">Export</a>
</div>
</div>
Javascript:
$(document).on('pagebeforeshow', '#p2', function (){
var Graph = function (){
this.drawGraph = function(){};
this.exportCanvas = function(){
window.open();
};
}
var analyseGraph = new Graph();
analyseGraph.drawGraph();
$(document).on('click', '#export_graph', function(){
analyseGraph.exportCanvas();
});
});

Every time you show page 2 you bind a click event to document. So I think you must use 'off' once in a while, like this
$(document).on('click', '#export_graph', function(){
analyseGraph.exportCanvas();
$(document).off('click');
});

JQuery slidetoggle

I am currently building a website for an indie game development team I am working with.
Right now I am writing the alpha sign up page and I have created layout which needs to make use of the slideToggle() and fadeToggle() methods, however after a few hours of faffing around in my editor I cannot seem to fathom a solution for the behavior I want.
When the page loads I want the form container to be in its slid up position and when the user clicks on the div I want the form container to animate down.
I have tried to animate the display property from hidden to block and I have also tried to hide the element when the document loads and then re-show it on click, however when I did that I noticed a strange behavior as the div would slide down and then up, which would cause the user to have to press the button again to view the sign-up form.
The code below handles the click event,
<a href="#" >
<div onclick="$('#showForm .inner').fadeToggle({queue:false});$('#showForm').slideToggle();" id="alpha-container" class="alpha-off"></div>
</a>
And this is the div I want to be hidden and re-appear
<div id="formContainer" class="form container">
<div id="showForm" class="outer">
<div class="inner">
<form method="post" action="verify.php">
<table>
<tr>
<td class="intro">
<h1 class="header-orange">Liberico Alpha Application</h1>
<p class="body-text">So you think you have what it takes to brave the battlefield?
</p>
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
I have created a jsfiddle demonstrating how my page currently renders - http://jsfiddle.net/alexmk92/54EUC/ - any pointers would be greatly appreciated.

Firstly, i removed the javascript code from html and added a class "clickable" to the clickable element:
<a class="clickable" href="#" >
<div id="alpha-container" class="alpha-off">CLICK ME FOR ANIMATION</div>
</a>
And then, i've created a custom javascript toggle function with slideDown and up:
$('.clickable').click(function(){
var showFormObj = $('#showForm');
if(showFormObj.hasClass('active')){
showFormObj.removeClass('active');
showFormObj.slideUp();
}else{
showFormObj.addClass('active');
showFormObj.slideDown();
}
});
On the css part i hid the 'showForm' element:
#showForm {display:none;}
Here is the fiddle: http://jsfiddle.net/Karzin/54EUC/2/

If you need to hide the form when page loads. For form container use
display : none
Eg:
http://jsfiddle.net/54EUC/1/

jQuery Toggle modification

I am using the below javascript (jQuery) to toggle open two DIVs. The DIVs open fine and open one at a time, which is what I am after. However, I also want the DIVs to close when they are clicked a second time, which doesn't happen despite my best efforts!
Javascript:
$(document).ready(function() {
$('.info_tab').click( function() {
var currentID = $(this).next().attr("id");
$('.toggle_info[id!=currentID]').hide(); /* the intention here is to hide anything that is not the current toggling DIV so as to close them as a new one is opened. I thought this would leave the currently selected DIV uninterrupted to toggle closed (below), but it doesn't */
$(this).next().toggle();
return false;
});
});
HTML:
<div class="info_tab">
<h1>Person One</h1><br />
<p>click for less info</p>
</div>
<div id="person_one_info" class="toggle_info">
<p>More information about Philip Grover</p>
</div>
<div class="info_tab">
<h1>Person Two</h1><br />
<p>click for less info</p>
</div>
<div id="person_two_info class="toggle_info">
<p>More information about Roy Lewis</p>
</div>
If any more info is needed, just ask and I'll be happy to edit the question.
Cheers,
Rich

you have the concept down, but not using the "currentID" correctly. You need to remember it's a variable, and can't be in another string if you want it evaluated.
With that said, try this:
$('.toggle_info[id!='+currentID+']').hide();
This makes the variable get evaluated in the selector, then passes it off to jQuery to find.
it looks like you're going to an accordian effect though. And jQuery UI has just such a control that you can use (if you're interested). if you're going for experience, then carry on. ;-)