Using sIFR in nyroModal lightbox - sifr

I'm using sIFR in a page that's being popped up in a nyroModal lightbox, but when the page is displayed, the sIFR objects aren't being shown. What do I need to do to get them to show?

The idea will be to use the endShowContent callback from nyroModal to sIFR your text.
$.fn.nyroModal.settings.endShowContent = function(elts, settings) {
$('YOUR SELECTOR', elts.content).media(function(el, options) {
// What you need to do
});
};
Hope it will help.
If you still have some trouble, come on the google code page to post your issue: http://code.google.com/p/nyromodal/

Related

Cross browser compatibility issue for showing and hiding div

I have MVC app.
I have written below code in the JS in Create view.
Basically on the basis of selection on drop down I show and hide the div.
Now the problem is below code works perfectly in Google chrome and Mozilla Firefox.
but now working in IE 8.
What should I do ?
$('#PaymentType').change(function(){
var ptype=document.getElementById("PaymentType").value;
if(ptype=="On Account")
{
$(".InvoiceDiv").hide();
}
else
{
$(".InvoiceDiv").show();
}
});
I am not sure what real issue is but since you are using jQuery why don't you use it for your ptype, too? With this, cross-browser issue will be minimized (if not completely avoided).
$('#PaymentType').change(function(){
var ptype = $(this).val();
...
});
Hope this helps.
If your Js files has full of references to a method called document.getelementbyid
Or order of your Js files and Css files which you import to program with < Link / > Tag ,
Reorder them and test it in IE
i think that the reason your code breaks right at the beginning of the function.

Using HTML in a Dialog's title in jQuery UI 1.10

http://jqueryui.com/upgrade-guide/1.10/#changed-title-option-from-html-to-text
jQuery UI 1.10 made it so that the dialog title can only be text (no html) to prevent scripting vulnerabilities. I'm not allowing user input to generate this title, so I would still like to use HTML, mainly to display an icon to the left of the title.
I'm going to post my solution to this problem because I haven't seen anyone else ask or answer this yet. Hopefully it will help someone else, or someone else may have a better approach.
More info as to why they did it: http://bugs.jqueryui.com/ticket/6016
This will override the function used when setting jQuery UI dialog titles, allowing it to contain HTML.
$.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
_title: function(title) {
if (!this.options.title ) {
title.html(" ");
} else {
title.html(this.options.title);
}
}
}));
If you hesitate to override jQuery's _title method, you can use the html, append, or similar methods on the title element at the jQuery dialog's open event, like so:
$("#element").dialog({
open: function() {
$(this).find("span.ui-dialog-title").append("<span class='title'>" + subtitle + "</span>");
}
});
The above parses the HTML correctly while bypassing jQuery's title method. And since it happens at the open event, the user experience remains seamless. Just did this on a project, and it worked beautifully.
This will modify the title after init the dialog
$('#element').dialog(options);
var dialogTitle = $('#element').closest('.ui-dialog').find('.ui-dialog-title');
dialogTitle.html('<strong>hello world</strong>');

Closing jQuery Mobile new popup cause page to refresh uselessly

I'm using the new jqm popup with the 1.2.0 alpha release and my problem is that my page from which I call the popup is refreshed uselessly when closing the popup using esc key or clicking on the screen... This refresh happen only the first time I close it. If I reopen and close again the popup the page is not refreshed...
It seems that for some reason jqm history mecanism get messed up....
It don't seem to be a built-in feature because this does not happen for any popup in the jqm demo page.
Any idea how to solve this issue?
Thanks
Etienne
I had a similar problem and, as I did not need to use history in my case, I solved it disabling globally popup history like this:
$.mobile.popup.prototype.options.history = false;
Found this post while having a similar problem on IE11 with jQuery Mobile 1.4.5
I found that I could prevent the "reload" when closing the popup by declaring the popup with the data-history="false" attribute in my HTML.
Ex:
...
Per my comment, here's a temporary workaround to the issue. Just appropriately bind to the navigate event and call preventDefault. This will prevent the reloading of the page. I ended up binding to the popupafterclose, only when it's been opened:
$('.my-popup-selector').on('popupafteropen', function () {
$(this).one('popupafterclose', function () {
$(window).one('navigate.popup', function (e) {
e.preventDefault();
});
});
});
I had a similar problem and I fixed it with using history: false:
$("#selector").popup({ transition: 'slidedown', history: false, overlay: true });
$("#selector").popup("open");
Add data-history="false" to popup div. thus when popup closes it doesn't redirect to another page .

jQueryMobile - conditionally allow hash if "page" exists?

I saw a lot of related questions, but none that directly have this issue...
I have a very large site for which I am building a jquery mobile theme. I don't have much control over the content though, and when it was built for desktop, a lot of #anchor tags were used to move to positions on the page.
I have fixed this for links on the same page with the following (jqm is a stand-in for the jquery object, I need to clean up the $/jqm references...
This is bound into the mobileinit event, and works if there are anchors on the page:
jqm('div').live('pagebeforecreate', function(e, data)
{
if(location.hash.length>0){
if($(location.hash).length>0){
if ($(location.hash).attr("data-role") != "page")
{
$.scrollTo(location.hash, 800);
};
}
}
//Check to see if there are any internal links on page
$("a[href*='#']").each(function()
{
//make sure they aren't legit jqm pages
if($(this.hash).length){
if ($(this.hash).attr("data-role") != "page")
{
//Disable jqm behavior, instead scroll down the page
$(this).click(function(event)
{
event.preventDefault();
$.scrollTo(this.hash, 800);
return false;
});
};
}
else {
$(this).attr('data-ajax','false');
}
});
});
});
So, if a user is on foo.php, and there's a link to #bar and #baz, it will nicely scroll to them, knowing that they aren't data-role="page"
But if the user is on foo.php and there's a link on that page to qux.php#bar it chokes because when the page loads, it is trying to to a changePage to #bar, but #bar on qux.php is really just an id for a regular old div.
It seems to me that something like the on-page solution above would work for this as well, but maybe I would need to bind to the actual page load instead of the pagebeforecreate?

sIFR3 show text while loading

I am using sIFR3 on a website. I remember in sIFR2 you coul use this sIFR.bHideBrowserText = false; to show the text before sIFR kicks in.
How do you do this in sIFR3 and where do you put the code?
Thanks for your help.
C
The feature as it existed in sIFR 2 no longer exists in sIFR 3. You could achieve the same affect like this, though:
sIFR.autoInitialize = false;
sIFR.activate(movie);
sIFR.removeFlashClass();
sIFR.replace(movie, { selector: 'h1' });
window.onload = function(){
sIFR.setFlashClass();
sIFR.initialize();
};
Where, of course, movie is the appropriate variable that references the Flash movie. You might want to connect to the onload event through another JavaScript framework. You must wait until full page load, things like $(document).ready() (jQuery) will not work reliably cross-browser.

Resources