Is it possible to rule out a script load only when viewing site on Apple devices? For example I don't want this file to be loaded on iPhone/iPad:
<script type="text/javascript" src="js/jquery.skinned-select.js"></script>
Will be grateful for any help.
There may be an easier way, but try the following:
<script type="text/javascript">
if ('ontouchstart' in document.documentElement) // check for touch screen
{ }
else {
// run code for mouse device
var s = document.createElement("script");
s.setAttribute("type", "text/javascript");
s.setAttribute("src", "js/jquery.skinned-select.js");
var nodes = document.getElementsByTagName("*");
var node = nodes[nodes.length - 1].parentNode;
node.appendChild(s);
};
</script>
Hope it helps.
Related
Having a struggle, I have created a Modal Popup for a mail signup however it has become annoying showing everytime on a page load so I am wanting to just show this once per session and no matter how I adjust the script I cannot get this to happen. Please can anyone help?
The code is as follows for the popup:
<script type="text/javascript">
window.onload = function() {
OpenBootstrapPopup();
};
function OpenBootstrapPopup() {
$("#simpleModal").modal('show');
}
</script>
<script>
$('#simpleModal').on('click', 'button.close', function(eventObject) {
$('#simpleModal').modal('hide');
});
</script>
I just want the modal popup to show once per session
So I'm learning Riot JS, following a guide. Gives an example explaining step by step.
And adds a "this.update()" to update the riot js variables. Now, it is working for him, but not for me. Can you guys tell me why?
Here's the code.
This is the index.html
<body>
<script src="bower_components/riot/riot.min.js" type="text/javascript"></script>
<script src="tags/all.js" type="text/javascript"></script>
<contact-list></contact-list>
<script>
riot.mount('contact-list', {callback: tagCallback});
function tagCallback(theTag) {
console.log('callback executed');
var request = new XMLHttpRequest();
request.open('GET', 'people.json', true);
request.onload = function() {
if(request.status == 200) {
var data = JSON.parse(request.responseText);
console.log(data);
theTag.trigger('data_loaded', data);
}
}
setTimeout(function() {
request.send();
},2000);
}
</script>
</body>
And this is my contact-list.tag
<contact-list>
<h1>Contacts</h1>
<ul>
<li each={p in opts.people}>{p.first} {p.last}</li>
</ul>
<script>
this.on('mount', function() {
console.log('Riot mount event fired');
opts.callback(this);
})
this.on('data_loaded', function(peeps) {
console.log(peeps);
opts.people = peeps;
this.update();
})
</script>
</contact-list>
After debugging with the console.logs I can see i'm retrieving data correctly from my JSON file, my contact list data is there. But the bullet list isn't updated. It's displayed empty.
Is there any reason for using a callback function?
If not, move your callback function into the tag and update it directly after assigning your fetched data to your tags variable.
Look at the sources in riotgear:
https://github.com/RiotGear/rg/blob/master/tags/rg-include/rg-include.tag
For me it was a perfect example.
Oh nevermind guys, sorry. Don't know how actually the example of the guy in the video worked. Because I had to pass data.people on the html trigger event. Otherwise i was passing a plane Object with an Array in it.
I want to inject some CSS and JavaScript files via a preprocessor.
In my preprocessor I inject the html template to the body element.
I printed the result out via console.log(document.body) - you can see the result at the bottom. It looks good, but the script is not evaluated.
If I run console.log(window.foobar) in my test, it's undefined.
Actually I don't want to to inject simple scripts, I want to load some files via
<script src="build/app.js"></script>
I need it in every test, so I don't want to refactor every single test for the same code injection, that's the reason why I tried to put it into the html generated by karma.
<body><script> window.foobar = 'miau!';</script>
<!-- The scripts need to be at the end of body, so that some test running frameworks
(Angular Scenario, for example) need the body to be loaded so that it can insert its magic
into it. If it is before body, then it fails to find the body and crashes and burns in an epic
manner. -->
<script type="text/javascript">
// sets window.__karma__ and overrides console and error handling
// Use window.opener if this was opened by someone else - in a new window
if (window.opener) {
window.opener.karma.setupContext(window);
} else {
window.parent.karma.setupContext(window);
}
// All served files with the latest timestamps
window.__karma__.files = {
'/base/node_modules/mocha/mocha.js': '253e2fdce43a4b2eed46eb25139b784adbb5c47f',
'/base/node_modules/karma-mocha/lib/adapter.js': '3664759c75e6f4e496fef20ad115ce8233a0f7b5',
'/base/test/custom-test.js': 'abf5b0b3f4dbb62653c816b264a251c7fc264fb9',
'/base/test/build/build.css': 'df7e943e50164a1fc4b66e0a0c46fc86efdef656',
'/base/test/build/build.js': '9f0a39709e073846c73481453cdee8d37e528856',
'/base/test/build/test.js': '0ccd4711b9c887458f81cf1dedc04c6ed59abe43'
};
</script>
<!-- Dynamically replaced with <script> tags -->
<script type="text/javascript" src="/base/node_modules/mocha/mocha.js?253e2fdce43a4b2eed46eb25139b784adbb5c47f"></script>
<script type="text/javascript" src="/base/node_modules/karma-mocha/lib/adapter.js?3664759c75e6f4e496fef20ad115ce8233a0f7b5"></script>
<script type="text/javascript" src="/base/test/custom-test.js?abf5b0b3f4dbb62653c816b264a251c7fc264fb9"></script></body>
Karma introduces the page scripts/html just like ajax, so it wont execute once the append has finished.
You will need to append the files for each spec. I have a helper for this job:
function appendCSS(path){
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href='base/' + path;
document.body.appendChild(link)
}
function appendScript(path){
var link = document.createElement('script');
link.type = 'javascript';
link.src='base/' + path;
document.body.appendChild(link)
}
function loadAssets(page){
document.body.innerHTML = __html__['_site/' + (page || 'index') + '.html'];
appendCSS('_site/styles/demo.css');
appendCSS('_site/styles/' + page + '.css');
appendScript('_site/scripts/vendor.js');
appendScript('_site/scripts/' + page + '.js');
}
module.exports = {
loadAssets: loadAssets
};
In my spec i then simply call the helper, passing the name of the html page to be tested.
require('../helper').loadAssets('tested-page-name');
As you can see, i use the borwserify plugin, but i hope this helps.
I'm working on my mobile site, I already have this code:
<script type="text/javascript"> // <![CDATA[
if ( (navigator.userAgent.indexOf('Android') != -1) ) {
document.location = "android.html";
} // ]]>
</script>
which diverts android users away from the current page on to androids own dedicated page.
what I would like to do is the same thing but for an iphone / ipad. I would like iphone / ipod touch to land on iphone.html and ipad to land on ipad.html displaying different content for both. How can I do this?
thank you.
You can just expand your current approach to the other user agents:
var iphone = ((window.navigator.userAgent.match('iPhone'))||(window.navigator.userAgent.match('iPod')))?true:false;
var ipad = (window.navigator.userAgent.match('iPad'))?true:false;
if(iphone){
document.location = 'iphone.html';
}
if(ipad){
document.location = 'ipad.html';
}
I'm trying to prevent the back button from working on one of my asp.net mvc pages.
I've read a couple of places that if i put "window.history.forward(1);" in my page it will prevent the back button from working on a given page.
This is what I did in my page:
<script type="text/javascript">
$(document).ready(function () {
window.history.forward(1);
});
</script>
It doesn't seem to be working. Am I using this incorrectly or is this approach wrong? thanks.
The way I've seen this trick used is to put history.forward() on every page before the page where you don't want the back button to work, then every time the user hits the back button it forwards them back to where they were. The common use is to prevent others from returning to a page (usually in a given, linear sequence) once they have progressed. This is sometimes used in the sign-in sequence for banking websites, for example.
As far as I know, there is no way to actually disable the back button. Sometimes people get around this by opening the page in a new window, which will not have a history of pages preceding it, and thus nothing to go back to. Others simply display a warning message before going back to inform a user that they may lose unsaved data, if that is the main concern.
That said, maybe this will help you: http://viralpatel.net/blogs/disable-back-button-browser-javascript/
maybe:...
<script type="text/javascript">
function disableBackButton()
{
window.history.forward();
}
setTimeout("disableBackButton()", 0);
$(document).ready(function () {
disableBackButton();
});
</script>
Use on the page in which you don't want back button to work.
window.history.forward(1);
This is working for me... Hope it helpful for you..
<script type="text/javascript">
window.history.forward();
function noBack(){
window.history.forward();
}
</script>
$(document).ready(function() {
noBack();
});
You can use
history.go(index)
index =0 //for the current page.
index>0 //e.g 1,2 for forward navigation
index<0 //e.g -1,-2 for backward navigation
history.go(-2)
<SCRIPT type="text/javascript">
window.history.forward();
function noBack() { window.history.forward(); }
</SCRIPT>
And in html Body tag write the following code.
<body onload="noBack();" onpageshow="if (event.persisted) noBack();" onunload=" " >
Try this, it worked for me.
Not sure if this is relevant but I found it and it might be worth a try:
<script type="text/javascript">
function preventBack() {
window.history.forward();
}
setTimeout("preventBack()", 0);
window.onunload = function() {
null
};
</script>
<script>
function preventBack() {
window.history.forward();
}
setTimeout("preventBack()", 0);
window.onunload = function () {
null
};
</script>
window.history.forward();
function noBack()
{
window.history.forward();
}
function setit() {
noBack();
}
<script>
function preventBack() {
window.history.forward();
}
setTimeout("preventBack()", 0);
window.onunload = function () {
null
};
</script>
The code needs to be on the page infront as well as the page you require for it to work