Modal menu issues using ratchet framework (twitter-bootstrap) - javascript

I'm building a mobile app using ratchet, and I love the toolset so far, but I'm running into an issue using a modal as a menu.
Here's the live index page.
This is the only custom js I'm using:
$(document).ready(function() {
if ((navigator.userAgent.match(/Android/i))) {
$('head').append('<link rel="stylesheet" href="css/ratchet-theme-android.min.css" type="text/css" />');
var plainAddress = $("#appAddress").text().replace(/\s+/g, "+");
var paramAddress = encodeURI(plainAddress);
var urlAddress = ('geo:0,0+?q=' + paramAddress);
$('#appLink').attr('href', urlAddress);
} else {
$('head').append('<link rel="stylesheet" href="css/ratchet-theme-ios.min.css" type="text/css" />');
var plainAddress = $("#appAddress").text().replace(/\s+/g, "+");
var paramAddress = encodeURI(plainAddress);
var urlAddress = ('http://maps.apple.com/?q=' + paramAddress);
$('#appLink').attr('href', urlAddress);
};
});
$.get('modal/qrModal.html', function(qr) {
$("#loadedModals").append(qr);
});
$.get('modal/menuModal.html', function(qr) {
$("#loadedModals").append(qr);
});
The rest is ratchet.js from goratchet.com. I'm pulling in the menu and the qr code via js because they're not unique to every page. The menu though when launched works fine, and when a selection is made the first time, it follows through, loads the page, and closes the modal.
After that it get's finicky.
Sometimes the modal won't load, sometimes it's unresponsive, sometimes it loads, loads a newpage but doesn't exit the modal.
Is this because I've exported it to external pages? Or is something else the matter?

It looks like your loadedModals container is being cleared out, and not repopulated after a new page is loaded via push.js.
<div id="loadedModals">
...
</div>
You can reload the modals after each push event by firing a callback.
var loadModal = function(){
$.get('modal/qrModal.html', function(qr) {
$("#loadedModals").append(qr);
});
$.get('modal/menuModal.html', function(qr) {
$("#loadedModals").append(qr);
});
};
loadModal();
window.addEventListener('push', loadModal);

Related

How to embed Youtube video in Javascript alert popup?

I'm trying to work out how best to embed a Youtube video into a Javascript function so it will appear (and be playable) in a popup alert box.
This is the code I'm using:
<script>
function myFunction12() {
alert("");
}
</script>
And the video I'm trying to insert is here: https://www.youtube.com/watch?v=bWdQbxNEFEs&frags=pl%2Cwn
I've been trying to use the embed code provided by Youtube in the alert quotations, but it doesn't recognize HTML there and I'm not sure how to proceed. The video needs to appear and play in a popup box.
Thanks much in advance for any tips! I'm pretty new at writing Javascript and may ask follow up questions.
EDIT: I'm now working on creating a modal box that pops up with the video in it when the user clicks "1" on the imagemap. I think the components are correct, but I can't quite get the two to connect. Any suggestions would be greatly appreciated!
My code is here: w3schools.com/code/tryit.asp?filename=FXKTC5KYZEEL
You Can't; Use a Modal Instead
To my knowledge, it is not possible to embed a video in the alert popup as it only displays plaintext. Youtube embeds are created by using an iframe element which means that the video can't be placed in a traditional Javascript alert() popup.
Instead, if you want to have a video you should probably have some Javascript that either creates or unhides an element that contains the video you want. If the video isn't constant, you can set it's url with javascript as well.
You can use ALertifyJS. You can click outside. You have to use the Youtube Dialogue Alert. I used the CDN in the snippet below. Download Link --
https://alertifyjs.com/build/alertifyjs.zip
alertify.YoutubeDialog || alertify.dialog('YoutubeDialog', function() {
var iframe;
return {
// dialog constructor function, this will be called when the user calls alertify.YoutubeDialog(videoId)
main: function(videoId) {
//set the videoId setting and return current instance for chaining.
return this.set({
'videoId': videoId
});
},
// we only want to override two options (padding and overflow).
setup: function() {
return {
options: {
//disable both padding and overflow control.
padding: !1,
overflow: !1,
}
};
},
// This will be called once the DOM is ready and will never be invoked again.
// Here we create the iframe to embed the video.
build: function() {
// create the iframe element
iframe = document.createElement('iframe');
iframe.frameBorder = "no";
iframe.width = "100%";
iframe.height = "100%";
// add it to the dialog
this.elements.content.appendChild(iframe);
//give the dialog initial height (half the screen height).
this.elements.body.style.minHeight = screen.height * .5 + 'px';
},
// dialog custom settings
settings: {
videoId: undefined
},
// listen and respond to changes in dialog settings.
settingUpdated: function(key, oldValue, newValue) {
switch (key) {
case 'videoId':
iframe.src = "https://www.youtube.com/embed/" + newValue + "?enablejsapi=1";
break;
}
},
// listen to internal dialog events.
hooks: {
// triggered when the dialog is closed, this is seperate from user defined onclose
onclose: function() {
iframe.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
},
// triggered when a dialog option gets update.
// warning! this will not be triggered for settings updates.
onupdate: function(option, oldValue, newValue) {
switch (option) {
case 'resizable':
if (newValue) {
this.elements.content.removeAttribute('style');
iframe && iframe.removeAttribute('style');
} else {
this.elements.content.style.minHeight = 'inherit';
iframe && (iframe.style.minHeight = 'inherit');
}
break;
}
}
}
};
});
//show the dialog
alertify.YoutubeDialog('GODhPuM5cEE').set({
frameless: true
});
<!-- JavaScript -->
<script src="//cdn.jsdelivr.net/npm/alertifyjs#1.13.1/build/alertify.min.js"></script>
<!-- CSS -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs#1.13.1/build/css/alertify.min.css" />
<!-- Bootstrap theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs#1.13.1/build/css/themes/bootstrap.min.css" />
<!-- Default theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs#1.13.1/build/css/themes/default.rtl.min.css" />
AlertifyJS by Mohammad Younes

How to print webpages with iframe and css

I have to print the contents of a dialog. I'm adding a empty iframe then i add contents to it in javascript.
this is my js code where i add html and css as children of iframe
var layoutCSS = new String('<link href="css/ReportPageOne.css" rel="stylesheet" type="text/css">');
var pageOneCSS = new String('<link href="css/ReportLayout.css" rel="stylesheet" type="text/css">');
var pageTwoCSS = new String('<link href="css/ReportPageTwo.css" rel="stylesheet" type="text/css">');
var materialityCSS = new String('<link href="css/MaterialityMatrix.css" rel="stylesheet" type="text/css">');
window.frames.print_frame.document.head.innerHTML = layoutCSS + pageOneCSS + pageTwoCSS + materialityCSS;
window.frames.print_frame.document.body.innerHTML = $('#__dialog1-cont').html();
window.frames.print_frame.window.focus();
window.frames.print_frame.window.print();
opens the print dialog properly but css is not applied quite well.
On print page in options i checked in 'Background graphichs' and i am using google chrome.
You are calling frame.print() before the styles have loaded.
"The load event fires once the stylesheet and all of its imported content has been loaded and parsed, and immediately before the styles start being applied to the content."
Try this:
head.lastChild.addEventListener("load", function (event) {
// In IE, you have to focus() the Iframe prior to printing
// or else the top-level page will print instead
frame.focus();
frame.print();
}, 0);
References
https://github.com/abbotto/teleprint/blob/master/src/components/print.js
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#Stylesheet_load_events

Dynamically adding Metro JS Tiles with Javascript

I have a blog that I am using metro js on
My blog
Metro JS
I am attempting to put a button at the bottom of the page that will load 5 posts at a time.
Everything was going swimmingly until I attempted to dynamically load Metro.js tiles.
The javascript function below is just a demo. I planned on doing an ajax call but I cant even get the demo working yet.
what loads on start
<div class="tiles">
<div id="id#" class="live-tile four-wide" data-mode="none" data-bounce="true">
<div style="background-color:orange;">
<table><tr><td><img src="textsym.png" width="50"/></td>
<td><h1>title</h1></td></tr>
</table>
</div>
</div>
</div>
This is what I tried
function loadmore() {
var tiles = document.getElementById("tiles").innerHTML;
tiles = tiles + "<div class=\"tiles\"><div id=\"\" class=\"live-tile four-wide\" data-mode=\"none\" data-bounce=\"true\"><div style=\"background-color:orange;\"><table><tr><td><img src=\"textsym.png\" width=\"50\"/></td><td><h1>title</h1></td></tr> </table></div></div>";
document.getElementById("tiles").innerHTML = tiles;
}
The problem is that it is adding the tile but it isn't making it clickable like the other tiles. Is there something I am missing?
So the answer to this question is pretty easy
The JS file needs to be told that there are new elements on the page.
When the page is loaded initially, according to the metro js documentation, you run this JQuery Function
$(".live-tile").liveTile({
click: function ($tile, tileData) {
var id = $tile.attr("id");
window.location = "postpage.php?name=" + id;
return false; // or return true;
}
});
As far as I can tell this some how ties the class live-tile to the click handler that I have here. postpage.php....
So all I did was add this JQuery call into my button click function above. This refreshes the page and makes everything work.
function loadmore() {
var tiles = document.getElementById("tiles").innerHTML;
tiles = tiles + "<div class=\"tiles\"><div id=\"\" class=\"live-tile four-wide\" data-mode=\"none\" data-bounce=\"true\"><div style=\"background-color:orange;\"><table><tr><td><img src=\"textsym.png\" width=\"50\"/></td><td><h1>title</h1></td></tr> </table></div></div>";
document.getElementById("tiles").innerHTML = tiles;
$(".live-tile").liveTile({
click: function ($tile, tileData) {
var id = $tile.attr("id");
window.location = "postpage.php?name=" + id;
return false; // or return true;
}
});
}

How to combine ContentFlow and ColorBox

I am trying to combine ContentFlow (http://jacksasylum.eu/ContentFlow/) and ColorBox (http://www.jacklmoore.com/colorbox/): when the user clicks on an image in ContentFlow I want an HTML page to be displayed in ColorBox.
I have tried using the code provided by the ColorBox examples' section to no avail. The HTML page is loaded by the browser as a normal link (not in ColorBox.)
I have even tried creating a ContentFlow addon (using the LightBox addon as an example) without any luck - nothing is displayed, not even simple images:
onclickActiveItem: function (item) {
var content = item.content;
if (content.getAttribute('src')) {
if (item.content.getAttribute('href')) {
item.element.href = item.content.getAttribute('href');
}
else if (! item.element.getAttribute('href')) {
item.element.href = content.getAttribute('src');
}
if (item.caption)
item.element.setAttribute ('title', item.caption.innerHTML);
colorbox.show(item.element);
}
}
Edited on 01/Oct/2013
The problem only manifests itself when an item contains an href. To prove this I changed the code above to show a static web page:
$.colorbox({open:true, href:"http://mysite.gr/colorbox/content/static.html"});
It the item is just a simple image the static web page is displayed in ColorBox. But if the item contains an href to the web page I want displayed in ColorBox the browser follows the link and loads the specified page. Any ideas on how to stop this from happening?
Thank you in advance for your help!
I have finally solved the problem I have described in my question. The solution involves creating a ContentFlow addon as follows:
new ContentFlowAddOn ('colorbox', {
init: function () {
var colorboxBaseDir = this.scriptpath+"../colorbox/";
var colorboxCSSBaseDir = colorboxBaseDir;
var colorboxImageBaseDir = colorboxBaseDir;
this.addScript(colorboxBaseDir+"jquery.colorbox.js");
this.addStylesheet(colorboxCSSBaseDir+"example3/colorbox.css");
},
ContentFlowConf: {
onclickInactiveItem: function (item) {
this.conf.onclickActiveItem(item);
},
onclickActiveItem: function (item) {
var content = item.content; // ContentFlow's content class
var theItem = item.item; // ContentFlow's item class - if you need access to it
var hrefToDisplay = '';
if (content.getAttribute('src')) {
if (content.getAttribute('href')) {
hrefToDisplay = item.content.getAttribute('href');
}
else if (!item.element.getAttribute('href')) {
hrefToDisplay = content.getAttribute('src');
}
$.colorbox({iframe:true, href:hrefToDisplay, title:item.caption});
}
}
}
});
The secret is to open the HTML page in an iframe.
Hope this helps!

JavaScript previous and next buttons to cycle through an array of .js files

I am having difficulty writing some JavaScript that will cycle through an array of .js files.
I have some JavaScript widgets saved in .js files.
I want to be able to click a "Next" or "Previous" button to cycle through an array of those .js files and have the widgets called and displayed on my HTML page. They can be displayed in an iFrame if that would be a better solution.
I will continue researching until a kind soul helps out. Thanks a bunch in advance!
I have tried:
<script>
function onWindowLoad(){
document.getElementById('js_type').innerHTML = ****.settings.type;
var widget_arr = [1column.js,2column.js,1row.js,modal.js]; //etc..etc..
var currentWidget = 0;
theBtn.onRelease = function(){
currentWidget++;
if(currentWidget == widget_arr.length){
currentWidget=0;
}
var selectedWidget = widget_arr[currentWidget];
//now you have a variable pointing to the next widget..
//what you do with it is up to you.. add the code you need..
}
and this
<SCRIPT LANGUAGE="JavaScript">
<!--
// Use the following variable to specify
// the number of widgets
var NumberOfWidgets = 4
var widget = new Array(NumberOfWidgets)
// Use the following variables to specify the widget names:
widget[0] = "1column.js"
widget[1] = "2column.js"
widget[2] = "1row.js"
widget[3] = "modal.js"
var widgetNumber = 0
function NextWidget()
{
widgetNumber++
if (widgetNumber == NumberOfWidgets)
widgetNumber = 0
document.widgets["VCRWidget"].src = widget[widgetNumber]
}
function PreviousWidget()
{
widgetNumber--
if (widgetNumber < 0)
widgetNumber = NumberOfWidgets - 1
document.widgets["VCRWidget"].src = widget[widgetNumber]
<IMG SRC="modal.js" NAME="VCRWidget">
}
//-->
</SCRIPT>
Code for the previous and next buttons:
<A HREF="javascript:PreviousWidget()">
<IMG SRC="prev.png" BORDER=0></A>
<A HREF="javascript:NextWidget()">
<IMG SRC="next.png" BORDER=0></A>
One idea can be to use the fact thst even a static page can have parameters in the url. You can for example:
create the html page that will be opened in the <iframe> with any js include you need (e.g. jquery)
add to this page a js function that given a widget js filename will create a <script> tag loading the widget creation code.
extract the name of the js file to use to call the function in (2) from document.location.href by looking at the part of the string after ?
in your main page create dinamically the iframe using for example contdiv.innerHTML = "<iframe src=\"widgetpage.html?" + widgetname + ".js\"></iframe>";
With this approach the widgets will be shown in a separate html page without interferring with your main page.

Categories