I've searched and searched but can only find very old posts about this sort of thing. What I am looking to do is create multiple Foundation 6 Reveal modals that open up YouTube videos that will autoplay, and stop video/audio when the modal is closed.
Here is a basic set up. Any help would be great!!
<p><a data-open="videoModal-01">Click me for a modal 01</a></p>
<p><a data-open="videoModal-02">Click me for a modal 02</a></p>
<!-- modal 01 -->
<div class="reveal" id="videoModal-01" data-reveal>
<div class="responsive-embed">
<iframe width="560" height="315" src="https://www.youtube.com/embed/4krs7z2bjlE" frameborder="0" allowfullscreen></iframe>
</div>
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- modal 2 -->
<div class="reveal" id="videoModal-02" data-reveal>
<div class="responsive-embed">
<iframe width="560" height="315" src="https://www.youtube.com/embed/c8aFcHFu8QM" frameborder="0" allowfullscreen></iframe>
</div>
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
Codepen
I would create Reveal modals via JS and use Youtube IFrame Player API to create, load, start and stop video. Here is a partial prototype to get you started (it's missing player functionality).
var $dialog = $('#revealDialog');
if ($dialog.length === 0) {
// init dialog
$dialog = $('<div id="revealDialog" class="reveal dialog" data-reveal><div id="revealDialogContent"></div>');
new Foundation.Reveal($dialog);
// attach to to-be-loaded dialog close button(s)
$(document).on('click', '.button-dialog-close', function () {
//stop player, e.g. player.stopVideo();
$dialog.foundation('close');
return false;
});
}
// set dialog's content
$('#revealDialogContent').html('<div id="player"></div><button class="close-button" data-close aria-label="Close modal" type="button"><span aria-hidden="true">×</span>');
// create player and play it on the ready event
// player = new YT.Player('player'.....
// show it modal
$dialog.foundation('open');
Related
i am new in jquery mobile. i want to change HTML on landscape. if user in portrait it show image and text (rotate to landscape), if user rotate his mobile then the main content is show.
In your page have a DIV for the message in portrait mode and then a separate DIV for the regular content in landscape mode:
<div data-role="page" id="page1">
<div id="head" data-role="header">
<h1>Page 1</h1>
</div>
<div id="cont" role="main" class="ui-content">
<div id="portrait">
<img src="http://lorempixel.com/300/180/technics/1/" />
<p>Please turn your device to Landscape mode</p>
</div>
<div id="landscape">
You are now ready to go!
</div>
</div>
</div>
Then use the orientationchange event to show the appropriate DIV:
$( window ).on( "orientationchange", function( event ) {
if (event.orientation == "portrait"){
$('#portrait').show();
$('#landscape').hide();
} else {
$('#portrait').hide();
$('#landscape').show();
}
});
$(document).on("pagecreate","#page1", function(){
$( window ).trigger("orientationchange");
});
DEMO
If you run the demo on a PC, resize the window to see it change.
Basically the use case is this:
I have a form that the user is filling out a form and accidentally click another link. In the pagebeforehide event, I want to stop the navigation. I tried to do
event.stopPropagation();
event.preventDefault();
but neither of them stop the navigation from happening. Does anyone have any idea how to do this? It's not immediately clear how to handle this.
event.preventDefault(); should work if all your code is in the right places. Here is a simple example:
<div data-role="page" id="page1">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h1>My page</h1>
</div>
<div role="main" class="ui-content">
<label for="text-basic">Type 1 to allow navigation:</label>
<input type="text" name="text-basic" id="text-basic" value="" />
<br /><br />
<a class="ui-btn" href="#page2">Go to page 2</a>
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<h1>My page footer</h1>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h1>My page 2</h1>
</div>
<div role="main" class="ui-content">
page 2
<a class="ui-btn" href="#page1">Go back to page 1</a>
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<h1>My page footer</h1>
</div>
</div>
I have 2 pages and only want the user to go to page 2 if he/she types "1" into the text box.
$(document).on("pagecreate", "#page1", function(){
$( "body" ).on( "pagecontainerbeforetransition", function( event, ui ) {
var currPage = $( "body" ).pagecontainer( "getActivePage" ).prop("id");
if (currPage == "page1"){
var val = $("#text-basic").val();
if (val != "1") {
alert("you must enter 1 in the text box!");
event.preventDefault();
} else {
$("#text-basic").val("");
}
}
});
});
In the pagecontainer widget pagecontainerbeforetransition event, I see which page we are currently looking at, if it is page1, then check what the user has entered in the textbox. If I do not find the string "1", prevent navigation and alert the user.
Here is a working DEMO
In my jQuery mobile app , I have used data-prefetch in order to prefetch Page1 , to increase the performance since each page take time to open and be shown to the user after clicking the link , the problem is that when I click on Page1 link once the app is lunched the pageinit/ pagecreate events for Page1 didn't executed , in this event I return data from the database to be displayed in a popup listview , but when I back to the home Page then click Page1 link a gain the Pageinit event executed and the data returned .
Why the Pageinit/ pagecreate events didn't work when prefetching a page ? How can I solve this problem ? since its very important to return the data in the Pagecreate or Pageinit event
another problem I have faced is that when I back from Page1 to the home Page the Home Page links become not working I click the Page1 link but Page1 didn't open, even if i click on the link many times it didn't open Page1 .. How can i solve this problem also ?? Please help me
Home Page
<div data-role="page" id="home">
<div data-role="header" data-position="fixed">
<h1>Header - Home</h1>
</div>
<div data-role="content"></div>
<a href="Page1.html" data-transition="none" class="ui-btn" data-role="button" data-prefetch="true" >Page1</a>
<a href="Page2.html" data-transition="none" class="ui-btn" data-role="button" data-prefetch="true" >Page2</a>
<div data-role="footer" data-position="fixed">
<h1>Footer</h1>
</div>
</div>
Page 1
<div data-role="page" id="Page1">
<div data-role="header" data-position="fixed">
<h1>Header - Page 1</h1>
</div>
<div data-role="content">
Show Popup
</div>
<div data-role="popup" id="MyPOPUP" data-position-to="window" data- corners="false" data- overlay-theme="a" data-dismissible="false">
<div data-role="header" data-theme="a">
<div style="text-align:center;float:center;padding-top:11px;">
<font size="6px" color="white">Employees</font>
</div>
</div>
<div id="scrollContent" data-role="content">
<ul data-role="listview" id="EmpList" style="margin: 0 !important;">
</ul>
</div>
</div>
</div>
Page1.js
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady()
{
$('#Page1').on('pageinit',function(event){
db.transaction(getAllEmployees, transactionError);
});
}
function getAllEmployees(tx)
{
tx.executeSql('SELECT EmpName,Salary,Gender,Country FROM Employee', [],getEmpSuccess,transactionError);
}
function getEmpSuccess(tx,result)
{
if (result.rows.length)
{
for(var i=0;i< result.rows.length; i++)
{
var row = result.rows.item(i);
$('#EmpList').append('<li>' +'<font class="line1">' + ' '+row['EmpName']+ '</font>' +'<font size="6px" class="line2" > '+ row['Gender'] +'</font>'+'<font size="6px" class="line3"> ' +row['Country']+' </font>'+'<font size="6px" class="line4"> '+ row['Salary']+'</font><BR> '+'<a href="#" >Delete</a></li>' );
}
}
$('#EmpList').listview('refresh');
}
JQM 1.3 Iscrollview 1.3.1
I have a list of links to events using data-iscroll. Each event is also a list (title/date-location/description).
Each time I click on the event list, the event is displayed. If I scroll down the content, when I go back to the event list and then click on another event, the view scrolls to where the previous view was stopped.
I've successfully stopped this by launching an empty() on the event content and then calling updatelayout on the back button of the event content :
$("#bhome").on('vclick', function(e) {
$('#econt').empty().trigger('updatelayout');
$.mobile.loading('show');
e.preventDefault();
$.mobile.changePage("#page1");
});
But, of course, android users don't use a back button and use the back key instead.
I've tried to empty() and updatelayout on the pagebeforehide event but apparently, the position is saved before that event happens :
$('#event').on('pagebeforehide', function(event, data) {
$('#econt').empty();
$('#econt').trigger('updatelayout');
$('#escroll').trigger('updatelayout');
});
I've also tried to use the silentscroll function but it's not working either :
$(document).on('pageshow', '#event', function(){
$.mobile.silentScroll(0);
});
How can I make sure that on viewing a new event, the position is back to the top ?
Here is a snippet of my index.html file :
<div id='container'>
<div data-role='page' id='page1' data-theme="c" style="background: black;">
</div>
<div data-iscroll style='background-color:#ddd;'>
<ul id="el"></ul>
</div>
<div data-role='footer' data-position='fixed' data-theme="a" data-tap-toggle="false">
</div>
</div>
<div data-role="page" id="event" data-theme="c" style="background:black;">
<div data-role='header' data-position='fixed' data-theme="a" style="height:42px;">
<a id="bhome" class="ui-btn-left ret" data-icon="arrow-l" href="#" data-iconshadow="false">Back</a>
<h1 id='eh1'></h1>
</div>
<!-- data-role='content' entraine un scroll horizontal -->
<div data-iscroll style='background-color:white;' id='escroll'>
<ul id='econt'></ul>
</div>
</div>
The answer was given by the iscrollview author (works perfectly) :
$("#escroll").iscrollview("scrollTo", 0, 0, 0, false);
I have a backbone app using jquery mobile. I am trying to use a dialog popup however the problem is when i click the link #popupSuccess it doesn't activate the modal because i assume backbone is trapping it. Any ideas?
This is my modal code
<a class="modalLink" id="modalSuccessTrigger" href="#popupSuccess" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-transition="pop" data-icon="delete" data-theme="b">Success</a>
<div data-role="popup" id="popupSuccess" data-overlay-theme="a" data-theme="c" data-dismissible="false" style="max-width:400px;" class="ui-corner-all modalLinkCont">
<div data-role="header" data-theme="a" class="ui-corner-top">
<h1>Correct!</h1>
</div>
<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content" style="background-color:white">
<h3 class="ui-title">That is correct. Tap to continue to level 2</h3>
Contineu
</div>
</div>
You need to programmatically initiate the popup:
In your backbone view:
events: {
'click #modalSuccessTrigger': 'openPopUp'
},
openPopUp: function(e) {
e.preventDefault()
$('#modalSuccessTrigger').popup('open')
}
for more details refer to doc: http://jquerymobile.com/demos/1.2.0-alpha.1/docs/pages/popup/index.html
To handle this issue I use to prevent the backbone routing and activate the popup handling for links marked as data-rel="popup"
$(document).ready(function(){
($('a[data-rel="popup"]')).on('click', function(event) {
event.preventDefault();
event.stopImmediatePropagation();
var target = $(this).attr("href");
$(target).popup('open');
});
});