I have a site that will have several Youtube videos embedded using the standard Youtube iframe code.
I would like for these to be triggered via text link such as:
<p>Click Here to watch a puppy do something.</p>
<iframe width="420" height="315" src="http://www.youtube.com/embed/1AH9VEM_qC0?rel=0" frameborder="0" allowfullscreen></iframe>
Where the iframe is hidden by default but when the link is clicked the video shows in a jQuery UI modal window.
There will be multiple videos on a page.
Any direction is appreciated.
jsFiddle: http://jsfiddle.net/2Ur9M/38/
<div id="vid1" class="play">vid1</div>
<div id="vid2" class="play">vid2</div>
<div id="vid3" class="play">vid3</div>
<div id="ifvid1" style="display:none">1<iframe width="420" height="315" src="" frameborder="0" allowfullscreen></iframe></div>
<div id="ifvid2" style="display:none">2<iframe width="420" height="315" src="" frameborder="0" allowfullscreen></iframe></div>
<div id="ifvid3" style="display:none">3<iframe width="420" height="315" src="" frameborder="0" allowfullscreen></iframe></div>
<script>
$(function()
{
$(".play").each( function( index )
{
$(this).click( function()
{
$("#if"+$(this).attr("id")).dialog(
{
modal: true
});
});
});
});
</script>
Related
I work on MVC5 project.
In my web config I have this key value:
<add key="WebLayoutPath" value="../../data/reuno/?WEBLAYOUT={0}" />
I want to use the key value above in iframe element that inside cshtml,view page.
So I change this:
<div class="tab-pane fade in active" id="mgArea">
<iframe id="iframeMgMap"
src="#(string.Format("../../data/reuno/?WEBLAYOUT={0}",Model.MgPath))"
frameborder="0"
scrolling="no"
style="width:100%;height:100%;"></iframe>
</div>
to this:
<div class="tab-pane fade in active" id="mgArea">
<iframe id="iframeMgMap"
src="#(string.Format(System.Configuration.ConfigurationManager.AppSettings["WebLayoutPath"],Model.MgPath))"
frameborder="0"
scrolling="no"
style="width:100%;height:100%;"></iframe>
</div>
But when I make changes above I get this error:
"Value cannot be null.\r\nParameter name: format"
I think the the problem with the syntex os the src attribute.
Any idea how to fix the problem?
You can consider passing that down to the view from the action itself in the ViewBag
//...
var format = System.Configuration.ConfigurationManager.AppSettings["WebLayoutPath"];
var path = string.Format(format, model.MgPath);
ViewBag.MgPath = path;
return View(model);
and access it in the View
<div class="tab-pane fade in active" id="mgArea">
<iframe id="iframeMgMap"
src="#((string)ViewBag.MgPath)"
frameborder="0"
scrolling="no"
style="width:100%;height:100%;"></iframe>
</div>
I'm trying to dynamically add a popup to my page, whith nice JQM content (buttons, etc). The popup is added, but no styles applied.
Here's the code (it's not so long, so I copied here):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> </head>
<body>
<div id='page' data-role='page'>
<div data-role='header'>
<h1> Header </h1>
</div>
<div data-role='content'>
<p>Code sample</p>
<a id='add' data-role='button'> Add popup </a>
<a href='#popup' data-role='button' data-rel='popup'> Show dynamic popup </a>
<a href='#popup2' data-role='button' data-rel='popup'> Show static popup </a>
</div>
<div id="popup2" data-role='popup'>
<div data-role="header">
<h1>Popup Header</h1>
</div>
<div data-role="content">
<p>Some content</p>
</div>
</div>
</div>
<script>
$(document).ready( function(){
$('#add').bind( 'click', function(ev){
var
page = $('#page');
var
popup = $('<div id="popup" data-role="popup"></div>').appendTo( page )
, header = $('<div data-role="header"> <h1>Popup Header</h1> </div>').appendTo( popup )
, content = $('<div data-role="content"> <p>Some content</p> </div>').appendTo( popup );
popup.popup();
});
});
</script>
</body>
</html>
there's a JsBin version, to play around with it.
So if I click to the Show static popup it displays the header nicely, but If I click Add popup, than show this newly added popup with Show dynamic popup the content of the popup looks differently.(using chrome)
So the question is: How can I enchanced the dynamically added popup content?
I found the solution, you can insert the popup in the same level as content, for ex.
<div data-role="page" >
<div data-role="content" ></div>
<div data-role="popup"></div>
</div>
Well with this way the popup function is good, but when you insert code for example from ajax request you have to insert the popup in the page and recall the method popup of the component.
ex .js file in the ajax call (the response is only the code of popup):
$('#page').append(response).trigger('create');
$("#popup").popup();
Remember that when you declare some popup in the principal page and it is not the same level as content. JQM automatically puts the popup in this place and it doesn't generate a problem.
You have to repaint the dynamically added content. To do this add page.page('destroy').page(); after popup.popup();.
working example: http://jsbin.com/orehuv/3/
When I put
<iframe width="560" height="349" src="<%= #video.link %>"></iframe>
Everything shows up fine. But the actual video won't play.. what am I doing wrong?
<iframe width="560" height="349" src="http://youtu.be/PF9-lstnLvo">
<html lang="en" dir="ltr">
</iframe>
HELP!!
Wrong src at iframe, it need to be like:
http://www.youtube.com/embed/PF9-lstnLvo
You need to add code:string to you Video model.
Or method code, which return you this code from #video.link like this:
def code
self.link.split('/').last if self.link
end
And replace erb:
<iframe width="560" height="349" src="<%= "http://www.youtube.com/embed/"+#video.code %>"></iframe>
I have a dialog (not external html), which is displayed when I click on a button on the page, it works fine if the html containing the dialog is the first page to be accessed , but if that file is opened by clicking on an href from another page, the dialog doesn't show up when I click the button.
Here is the code for the page containing the dialog ... The alert in the click event of the button is showing up even when this is the not the first page to be accessed, but the dialog doesn't show up.
<!DOCTYPE html>
<html>
<head>
<title>Create Team</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<!-- Page starts here -->
<div data-role="page" data-theme="b" id="page1">
<div data-role="header" id="hdrMain" name="hdrMain"
data-nobackbtn="true">
<h1>Test screen</h1>
</div>
<div data-role="content" id="contentMain" name="contentMain">
<div id="fullnamediv" data-role="fieldcontain">
<label for="fullname" id="fullnameLabel" name="fullnameLabel">Team
Name*</label> <input id="fullname" name="fullname_r" type="text" />
</div>
<div id="submitDiv" data-role="fieldcontain">
<a id="buttonSave" name="buttonSave" href="#" data-role="button"
data-inline="true">Save</a>
</div>
</div>
<!-- contentMain -->
<div data-role="footer" id="ftrMain" name="ftrMain"></div>
<script>
$("#page1").bind("pagecreate", function() {
$('#buttonSave').click(function() {
alert("aaaa");
$.mobile.changePage('#successdiv', {
transition: 'pop',
reverse: false,
changeHash: true
});
alert("after change");
return true;
});
});
</script>
</div>
<!-- page1 -->
<div data-role="dialog" data-theme="a" id="successdiv">
<div data-role="header" data-theme="f">
<h1>Error</h1>
</div>
<div data-role="content">
<p>This is Page 2</p>
<button type="submit" data-theme="e" name="successok"
value="submit-value" id="successbutton">Close Dialog</button>
</div>
</div>
<!-- Page ends here -->
</body>
</html>
You use jQuery Mobile v1.0 but at the same time you pass incorrect arguments to $.mobile.changePage like if it were say v1.0 alpha. Not sure if it solves your problem but worth trying:
$.mobile.changePage('#successdiv', {
transition: 'pop',
reverse: false,
changeHash: true
});
When I jump from one jquery mobile page to another via a hrefs, I have to set the rel attribute to external, like this:
page2
dfsq is right, only the div[data-role="page"] is loaded when you link to this page from another page. I'd suggest moving the dialog into its own html file and opening it either via
open dialog
or
$.mobile.changePage('your_dialog.htm', {role: 'dialog', transition: 'pop'});
I am very new to jquery-mobile. Could someone please help with the following problem regarding a multi-page app?
My app has two pages, split into two different files - index2_1.html and index2_2.html given below. When I use $.mobile.changePage("index2_2.html", "slide"); to change to the second page, none of the events in the second page get bound. Actually, none of the Javascript on the second page gets executed. However, if move to the second page using the link
Link to 2nd page that works1
it works fine.
Could someone please tell me what I am doing wrong here?
Thanks,
Dilip
index2_1.html
<!DOCTYPE html>
<html>
<head>
<title>Account Diary Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<script>
alert("Trying to register events on page 1.");
$(function() {
$(".category_item").bind("tap", function(event) {
selected_category = $(this).text();
$("#selected_category").text(selected_category);
$.mobile.changePage("index2_2.html", "slide");
});
});
</script>
</head>
<body>
<div data-role="page" id="select_category">
<div data-role="header" data-backbtn="false">
<h1>Select Category</h1>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-theme="g">
<li class="category_item">Grocery</li>
<li class="category_item">Car</li>
<li class="category_item">Recreation</li>
<li class="category_item">Health</li>
</ul>
<div>
Link to 2nd page that works1
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
index2_2.html
<!DOCTYPE html>
<html>
<head>
<title>Account Diary Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<script>
alert("Trying to register events on page 2.");
$(function() {
$(".description_item").bind("tap", function(event) {
selected_description = $(this).text();
$("#expense_description").val(selected_description);
description = $("#expense_description").val();
$.mobile.changePage($("#enter_amount"), "slide");
});
});
</script>
</head>
<body>
<div data-role="page" id="enter_description">
<div data-role="header" data-backbtn="false">
<h1>Enter/Select Description</h1>
</div><!-- /header -->
<div data-role="content">
<label for="name">Description:</label>
<input type="text" name="expense_description" id="expense_description" value="" />
<a id="n_button" href="#" data-role="button" data-theme="b" data-inline="true" >Next</a>
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
<li data-role="list-divider">Recent Expenses</li>
<li><a class="description_item" href="">Safeway</a></li>
<li><a class="description_item" href="">Gas</a></li>
<li><a class="description_item" href="">Cell phone bill</a></li>
<li><a class="description_item" href="">rent</a></li>
</ul>
<div data-role="controlgroup" data-type="horizontal">
<center>
<a class="cancel_button" href="index.html" data-role="button" rel="external">Cancel</a>
</center>
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
In contrast to Pravat Maskey's answer, it's possible (and dependent on the use case also intended) to have seperate HTML files. Just imagine a huge application with lots of pages, it would be counterintuitive to load everything up front.
I think the problem you are having is the placement of the JavaScript code. I would try including the page specific code (the script tag and everything it contains) in the page section, just above the closing div of the page. For more details, take a look at this guide: http://jqx.ca/nav/, and check the section "Scripts in jQuery Mobile Pages".
By having the tag in the body, your code is executed once when the sub-page is created for the first time. For your case this should work, as you are binding an event to a DOM node, which only needs to run once.
You could also try registering your code with the pagebeforeshow event if you want to run it everytime the page is shown.