Am working on an application whereby I have a sweet alert dialog box to display to a user when h/she clicks on Payment button, I want to display a font-awesome spinner on the sweet alert dialog box besides the text property but it shows the font-awesome code instead on the loading spinner:
Sweet alert code
swal({
title: "Message Sent",
icon: '{{ asset('assets/images/mpesa.png')}}',
imageWidth: 30,
imageHeight: 30,
imageAlt: 'Mpesa Icon',
text: "Please Check your Phone for a payment dialogue" + '<i class="fa fa-spinner fa-spin"></i>',
closeOnClickOutside: false,
buttons:false
});
You must use content option instead of text and set it to some DOM node as described in the documentation. Refer to this question on how to create a DOM node from HTML string.
Related
i have like 4 textbox with required and i have a button name ‘add’ and another button for open a new page ..
the problem is where i’ m clicking at the button who open the new page they tell me to fill the text box .. is there any way to make the required working just for the « add » button ?
ps: í’m using content place holde and i already triyed to use but still not working
set the line width to zero...
series: {
5: {
type: 'line',
lineWidth: 0
}
}
I'm trying to set up a bootstrap tour. I've got two pages (Design.vbhtml and EditHomePage.vbhtml). They both use a layout page called (_DesignerLayout.vbhtml). I've got all the scripts and stylesheets for bootstrap, tour, jquery, etc. listed on the layout page. All that stuff is correct.
My tour starts on the Design page and displays my first 3 steps correctly. However when it gets to the fourth step (called third-step, not to be confused), it goes to the second page but it doesn't continue with the steps. The tour just stops.
My elements are all id's on div tags (welcome-step, first-step, etc.). I know those are all correct. It has to do something with my paths.
I've looked everywhere and can't seem to find anyone else using a layout page with a tour, so I'm wondering if it has anything to do with the steps jumping from the design page to the layout page to the edithomepage page. Any ideas would be appreciated!
Here is my bootstrap tour code---
Design.vbhtml (first page):
$(function () {
// Instance the tour
var tour = new Tour({
backdrop: true,
steps: [
{
element: "#welcome-step",
title: "Welcome!",
content: "Begin this tour to see how you can design the look of your website.",
orphan: true,
path: "/ClubAthleticsTemplate/Organization/Design/" & "#ViewBag.OrganizationId"
// this element is on the design.vbhtml page
},
{
element: "#first-step",
title: "Change the Look",
content: "Use this section to design how your website looks. You can choose which pages you want to include on your website.",
path: "/ClubAthleticsTemplate/Organization/Design/" & "#ViewBag.OrganizationId"
// this element is on the design.vbhtml page
},
{
element: "#second-step",
title: "Edit Pages",
content: "These are the different pages you can edit for your website. Click on each one to customize.",
path: "/ClubAthleticsTemplate/Organization/Design/" & "#ViewBag.OrganizationId"
// this element is on the _DesignerLayout.vbhtml page
},
{
element: "#third-step",
title: "Main Photo",
content: "You can upload a main photo that will appear on your front page.",
path: "/ClubAthleticsTemplate/Organization/EditHomePage/" & "#ViewBag.OrganizationId"
// this element is on the EditHomePage.vbhtml page
},
{
element: "#fourth-step",
title: "Main Photo Display",
content: "You can specify whether or not you want the main photo show at the top of all of your pages.",
path: "/ClubAthleticsTemplate/Organization/EditHomePage/" & "#ViewBag.OrganizationId"
// this element is on the EditHomePage.vbhtml page
},
{
element: "#fifth-step",
title: "Page Headline",
content: "This is where you can set a title for your page.",
path: "/ClubAthleticsTemplate/Organization/EditHomePage/" & "#ViewBag.OrganizationId"
// this element is on the EditHomePage.vbhtml page
},
{
element: "#sixth-step",
title: "Page Content",
content: "Here is where you add all your content for your page. You can add text, images, media, tables, etc.",
path: "/ClubAthleticsTemplate/Organization/EditHomePage/" & "#ViewBag.OrganizationId"
// this element is on the EditHomePage.vbhtml page
},
{
element: "#seventh-step",
title: "Save Changes",
content: "Make sure to hit the 'Save' button when finished!",
path: "/ClubAthleticsTemplate/Organization/EditHomePage/" & "#ViewBag.OrganizationId"
// this element is on the EditHomePage.vbhtml page
}
]
});
// Initialize the tour
tour.init();
// Start the tour
tour.start();
});
;
I discovered that copying and pasting the entire tour onto the second page gets it to work perfectly. It's not the best coding practice seeing as I have the same code in two different places and have to change both locations each time I make a change in it. But, for now, it works.
How can I display a modal dialog from the context menu?
I can show a new window from context menu which opens in its own tab:
var menuItem = {
"id": "rateMenu",
"title": "Rate Item",
"contexts": ["all"],
}
chrome.contextMenus.create(menuItem);
chrome.contextMenus.onClicked.addListener(function (clickData) {
open('index.html');
});
I also know how to show a modal dialog, using bootstrap (for example) on the page itself:
$('#myModal').modal({
backdrop: 'static',
keyboard: false
})
In this particular case I want to show a modal dialog that you cannot close unless you press the "close" button.
However, I have no idea how to show the modal popup window straight away from the context menu.
Does anyone have any idea how this can be achieved?
Thank you!
I have done the same. Just use content script to show modal.
Example : When user clicks the context menu item, send message to content script to let it know about it so that it should open a modal.
background.js:
chrome.contextMenus.onClicked.addListener(function (clickData) {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {type: "openModal"});
});
});
contentscript.js:
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
switch (request.type){
case "openModal":
$('#myModal').modal({
backdrop: 'static',
keyboard: false
});
break;
});
Make sure to include necessary css and js files under content_scripts in manifest.json
"content_scripts": [
{
"matches": ["https://*/*"],
"css":["bootstrap.min.css"],
"js":["jquery.min.js","bootstrap.min.js","contentscript.js"],
"run_at":"document_end"
}
]
NOTE : Using bootstrap.min.css may conflict with the page UI and it may change it. To avoid this, move your modal and the required js and css files in a separate html file(modal.html). Then inject your iframe into the tab using content script.
var iframe = document.createElement('iframe');
iframe.src = chrome.extension.getURL("modal.html");
iframe.frameBorder = 0;
iframe.id = "myFrame";
$(iframe).hide();//necessary otherwise frame will be visible
$(iframe).appendTo("body");
Remember to add modal.html and all the css and js files that are used inside modal.html like modal.js,bootstrap.min.js,bootstrap.min.css under web_accessible_resources:
web_accessible_resources": ["modal.html","modal.js","bootstrap.min.js","bootstrap.min.css"]
Now you can hide or show your iframe using content script but to show and hide modal, it can be done from inside iframe only. So you would need to pass a message from background to iframe to show the modal.The code above mentioned for contentscript will work for iframe also.
In case you want to hide the iframe, just send message from iframe to contentscipt using window.parent.postMessage().
Example:
modal.js:
window.parent.postMessage({ type: "hideFrame" }, "*");
contentscript.js:
window.addEventListener("message", function(event) {
if (event.data.type == "hideFrame") {
$("#myFrame").hide();
}
});
I've created an overlay that loads content dynamically after it opens, but am having issues with VoiceOver in Safari when trying to add ARIA attributes.
After only adding role='dialog' to the overlay container, it is announced as a dialog, but reads the text contents first ("close loading... dialog close button").
When adding a label to the dialog with either aria-label and aria-labelledby the real problem occurs. The overlay is announced nicely ("Overlay dialog close button"), but then the rest of the dialog's contents are inaccessible after being loaded, and it just appears that the close button is the last (and only) item available.
HTML:
<div id="page">
<a id="opendialog" href="#" role="button">Open</a>
</div>
JavaScript:
jQuery(function ($) {
$('#opendialog').click(function (event) {
event.preventDefault();
// Attach the dialog container to the page with a loading placeholder.
$dialog = $('<div id="dialog" role="dialog" aria-labelledby="dialog-label">' +
'<span id="dialog-label">Overlay</span>' +
'close' +
'<div class="content"><span class="loading">Loading...</span></div>' +
'</div>')
.insertAfter('#page');
$dialog.find('.close').focus();
// Hide the other page contents to trap the user in the dialog.
$('#page').hide();
$dialog.find('.close').click(function (event) {
event.preventDefault();
$dialog.remove();
$('#page').show();
$('#opendialog').focus();
});
// Simulate an asynchronous request for the dialog contents.
setTimeout(function () {
$dialog.find('.content .loading')
.replaceWith('<div>Dialog Content</div>');
}, 250);
});
});
http://codepen.io/gapple/pen/FGhzl
Chrome also seems to have some weird issues with the codepen when in an iframe, but loading the iframe url directly seems to work correctly.
VoiceOver is quite persnickety when it comes to dynamic content and focus. This (if run on a page of any size) will not work at all on iOS because the .focus() on dynamic content does not work unless executed in a timeout of at least 500 ms (look here http://unobfuscated.blogspot.com/2013/08/messed-up-ios-focus-management-with.html).
However, for OS X, you can fix your problem by focussing on the dialog itself rather than the close button. Here is the snippet of code modified so it works. Once the focus is on the dialog, hit CTRL-OPTION DOWN to interact with the dialog content
$dialog = $('<div id="dialog" role="dialog" aria-labelledby="dialog-label" tabindex="-1">' +
'<span id="dialog-label">Overlay</span>' +
'close' +
'<div class="content"><span class="loading">Loading...</span></div>' +
'</div>')
.insertAfter('#page')
.focus();
I have been working on an application using sencha touch 2 .
I have a toolbar on top which contains a button .
When i click this button i will have a panel overlay .
In this panel,i want to have two items :
var shareButton = {
xtype : 'button',
ui: 'action',
width:'36px',
height:'36px',
handler : function(){
var panel=Ext.create('Ext.Panel',{
right: 0,
top: 20,
modal: true,
hideOnMaskTap: true,
hidden: true,
width: 260,
height:'70%' ,
styleHtmlContent: true,
scrollable: true,
items: [
{html:'Tweet</body>',},
{html:'<div ><class="fb-like" data-href="http://test.com" data-send="false" data-layout="button_count" data-width="4" data-show-faces="false"></div>'}]});
Ext.Viewport.add(panel);
panel.show();}};
But this is not working.
In fact,i want the first one to direct me to twitter to share the URL (www.google.com).
And the second one to facebook to share "test.com".
Unfortunately ,nothing is displayed in the panel .
Thank you.
Since the overlay is called after the page is loaded, the facebook and twitter buttons should rendered again
This is the code that should be added after the overlay is shown
FB.XFBML.parse();//facebook
$.ajax({ url: 'http://platform.twitter.com/widgets.js', dataType: 'script', cache:true}); //twitter
This works for me. THe only problem is that the Facebook like button has not got a size, so you cannot see it.
Ensure your floating panel is not scrollable. If it is scrollable, give it a fixed width and height.
Update
Here is an example on Sencha Fiddle: http://www.senchafiddle.com/#jgXtj
Ensure you are adding the panel into Ext.Viewport.