sIFR3 show text while loading - sifr

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.

Related

Caching visited page in Jquery Mobile

I work on Jquery Mobile/Phonegap app for android.
I´d like my app to "remember" that(if) the user has visited one of my pages. For example if he once visits "page1.html", this action should be cached in the phone memory, so that when the user opens the app again there should be possibility to navigate to this "page2.html" directly from "index.thml".
Please, if you have a code suggestion, tell me also how/where do I use it, because sometimes for starters like me it is realy hard to understand what to do with a little piece code.
Thank you very much!
You can use HTML5 local storage for this purpose.
Each time when a page is shown you can save/update the current page URL to a local storage variable, say 'lastVisit', as below:
$(document).on('pageshow', function (event, data) {
var currentPage = $('.ui-page-active').data('url');
localStorage.setItem("lastVisit", currentPage);
});
If you are not getting $('.ui-page-active').data('url'), then you can use $.mobile.activePage.attr('id') which will give you the current page id.
So next time, when the user opens the app again, you can check whether this local storage variable is set and can action accordingly.
The code will look like as below:
$(document).on('mobileinit', function(){
var lastVisit = '';
if(localStorage.getItem("lastVisit") != null){
lastVisit = localStorage.getItem("lastVisit");
}
if(lastVisit){
document.location.href = lastVisit;
}
});
You can use these codes in the header section scripts.

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.

How to select current page or by page id using jqmData

I have a multi-page document and I'm binding to the pageshow event of page "myId":
$('#myId').live('pageshow', renderMyIdTempalates);
I'm applying my JSON templates with PURE like this
function renderMyIdTempalates(event) {
$.mobile.showPageLoadingMsg();
var $page = $("#myId");
// do ajax call
$page.children( ":jqmData(role=header)" ).directives(...).render(data);
$page.children( ":jqmData(role=content)" ).directives(...).render(data);
$.mobile.hidePageLoadingMsg();
}
Initially I was using
$('#myId').directives(...).render(data);
to apply my templates. This caused problems since the selector didn't include the jqm attributes. So I used the jqmData method to grab the header and content to apply my templates. This works fine, but how do I select the entire document that I'm working with? I would prefer to apply my templates to the entire document once.
I tried:
$(":jqmData(role=page)") // selects all pages
$(":jqmData(id=myId)") // no luck
Any ideas?
the selector
div:jqmData(id="myID")
should work. just remember that myID should not be the id of that div.That page div should have a parameter data-id="myID"

Dijit Tooltip that works on all html tags

So I'm trying to use dijit tooltip.
http://docs.dojocampus.org/dijit/Tooltip
However, they only have the attribute of "connectIds" this seems rather limiting and I'm surprised that it was programmed this way. I don't know how many hyperlinks my pages will have, so wouldn't it be better to have an option like "connectByHTMLtag" so that I can map all "a" tags to a specific tooltip? Or even a "connectClasses" would make a bit more sense.
This means I have to manually enter id="tooltip1" id="tooltip2" etc.
Anyone find a way around this??
You could connect them when the page loads using dojo.query.
Give all of your hyperlinks a class that you can use to select them later:
Etc
Then in your JavaScript you can use something like this:
dojo.addOnLoad(function() {
dojo.query(".link-tooltip").forEach(function(node, index, arr) {
new dijit.Tooltip({
connectId: [node.id],
label: "My tooltip!"
});
});
});
This code is untested, but that's basically how you could do it. dojo.query is very handy for this sort of thing!
As of Dojo Toolkit 1.8, it is now possible to attach a tooltip via a selector:
require(["dojo/ready", "dijit/Tooltip", "dojo/query!css2"], function(ready, Tooltip){
ready(function(){
new Tooltip({
connectId: "myTable",
selector: "tr",
getContent: function(matchedNode){
return matchedNode.getAttribute("tooltipText");
}
});
});
});
http://dojotoolkit.org/reference-guide/1.8/dijit/Tooltip.html#attaching-to-multiple-nodes

Using sIFR in nyroModal lightbox

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/

Resources