Develop Reference

JQuery Mobile - how to use it for ONLY swipe

I am having huge problems with the jquery mobile pack, it broke my entire page by making links go to ajax and showing the loading div etc. I tried fixing them all and I somehow managed it with tons of excess code (I don't know what part exactly hid the loading part and which part undid the ajax).
Basically JQuery mobile made a mess of my page, and all I need is the swipe event, I found the github repository of jquery mobile (Here), but I honestly have no idea which parts to take so I can use the swipe event.
I know people want code, but there is no problem in my code here, JQuery mobile simply wants to open all links in ajax, and because I am using bootstrap and I don't use JQuery mobile for anything else but swipes, I won't be pasting anything.
If anyone can tell me which parts I need to take/modify to make it work that would be awesome.
I tried by only copying the events/touch.js but it didn't work.

If you want to navigate page without using ajax then you should add tag rel=external
Or data-ajax="false"
you can find more information for Jquery mobile HERE
EDITED
I have Another solution but I pesonally not prefer but I also having same issue before so I tried this solution
$(document).ready(function(){
$("a").click(function (){
window.top.location = $(this).attr("href");
return false;
});
});
Try this I hope its work for you too..
this function will force change document location when user click on any Hyperlink

Using Firefox-addon to click a element who has onclick="return:false;"

I try to make some Firefox add-on for one website.
But that website has a HTML & jQuery like this...
HTML+jQUery: (onPage)
<script>
$(document).ready(function() {
$('a').on('click',function(){alert('Yo!');});
});
</script>
SomeEvent
This I cant use $('a').click(); (My add-one is jQuery included)
How can I tell my Firefox add-on to click this ? or clone onClick event ?
I have no idea how to do. Or I just code in Greasemonkey or iMarco only

You didn't really give any details as to your existing code, and whether you use XUL, the add-on SDK (page-mod?) or whatever.
But in general you can just .click(), e.g.
document.querySelector("a").click();
(You'll need to use the correct content document. What is correct depends on what toolkit you're using)

Video.js enter fullscreen on play

I've been searching around for a long time but still haven't found a valid solution for my problem. I just cant seem to get the video player to enter fullscreen. The API does have many examples but none of them seem to work.
The jQuery version included on the page I am currently working on is 1.8.2. Also, I am using parallax-1.1.js and libraries required for it to work properly so that may also be an issue.
The client I am working for wants the site to have responsive design, with the ability of the player to directly go to fullscreen when the "Play" button is clicked. This functionality should be avalable both on desktop, and mobile/tablet browsers. On the video page, there should be 3 video players, each of them has unique IDs, and they also have a common CSS class.
Some of the code I tried didn't work well. Here's an example JS code snippet controlling one of the video HTML tags.
Example:
player1 = _V_('video-1');
player1.on("play",
function () {
this.requestFullScreen();
});
player1.on("ended",
function () {
this.cancelFullScreen();
});
The code generates this error:
Uncaught TypeError: Object [object Object] has no method 'requestFullScreen'
I am working with the latest version of Google Chrome.

There are a two problems to be solved here.
First, you cannot go to full screen inside a 'play' event handler. For security and good user experience, browsers will only let you trigger full screen inside a user-triggered event, like a 'click'. You can't have every web page going to full screen as soon as you visit it, and you can cause a video to start playing automatically, which would violate that rule. So you need to move this to a 'click' handler on the actual play button.
The second is a big problem with Video.js 4.0.x, which is that it's minified using Google Closure Compiler with Advanced Optimizations. So many of the public properties and methods are obfuscated, making them difficult/impossible to use. In this case, requestFullScreen is now player1.Pa(). And, as far as I can tell, cancelFullScreen doesn't exist at all.
Here are some options for how to handle this:
Use the obfuscated method name. I don't recommend this, because a) the name will change with every minor version upgrade (e.g. 4.0.5) and b) it will make your code unreadable, and c) you can't use cancelFullScreen.
Get an un-minified copy video.js and host it yourself. (You can use Uglify or another minifier that won't mess with the method names.) Video.js doesn't provide this file, so you have to clone the git repo and run the build script yourself. And you don't get the advantage of using video.js's CDN for free.
Use an older version of video.js and wait until 4.x is ready for prime time.
Don't use video.js at all. Consider jPlayer and jwPlayer or roll your own.
I recommend 2 or 3.
Update: It looks like this particular issue has been fixed, but it has not made it into release yet.

I personally used a custom link that triggers both play and fullscreen.
<a class="enter-fullscreen" href="#">Play fullscreen</a>
And the js part:
<script type="text/javascript">
$('.enter-fullscreen').click(function(e) {
e.preventDefault();
$('.vjs-play-control').click();
$('.vjs-fullscreen-control').click();
});
</script>
This is improvable but simple and does the job.

One easy way to solve the problem:
document.querySelector('.vjs-big-play-button').addEventListener('click', player.requestFullscreen)
Video goes full screen and the regular event of the play button causes it to start playing.

in video.js file go to this lines
BigPlayButton.prototype.handleClick = function handleClick(event) {
var playPromise = this.player_.play();
and add
BigPlayButton.prototype.handleClick = function handleClick(event) {
var playPromise = this.player_.play();
document.getElementsByClassName('vjs-fullscreen-control')[0].click()
// exit early if clicked via the mouse
if (this.mouseused_ && event.clientX && event.clientY) {
silencePromise(playPromise);
return;
}

adding a time delay inside a javascript function for a fade in effect

I'm looking to make a website that slowly fades in to hide the loading of the images. Now I've managed to get some javascript that does the fade in but it starts immediatly when the page loads so you still see the individual elements loading when you load the page.
What I would like to do is to add a delay of a second or so before it starts fading in.
Here is what i've got now:
<style>fadein{filter:alpha(opacity=0);opacity:0}</style>
<script>
function fadein(){var fade=0, fadein=document.getElementById("index-wrappper").style,ms=(fadein.opacity==0)?0:1, pace=setInterval(Fade,20);
function Fade() {if(fade<100){fade+=1;if(ms)fadein.filter="alpha(opacity="+fade+")";else fadein.opacity=(fade/100)} else clearInterval(pace)}};
window.onload=fadein;
</script>
I suspect that I need to add the delay in Function fade somehow since Fadein is what set the opacity of the div to 0 on load.
But what exactly do i need to put there? I have slim to none javascript knowledge (which i really need to brush up) and would really appreciate any help with this.

First of all, Javascript is not Java.
A simple answer to your question is: use setTimeout and clearTimeout.
But frankly I would urge you not to reinvent the wheel, but to use libraries like jQuery that are built to make such actions easier and support all major browsers. In jQuery you could simply write
$(document).ready(function() {
$("#index-wrapper").delay(1000).fadeIn('fast');
});

Try this:
window.onload = function() {
window.setTimeout(function() {
fadein();
},1000); // 1 sec
}
This delays the fade in with 1 sec, after page load.

window.onload=setTimeout("fadein()",1000);
should do the trick.

Have you considered using the jQuery library?
It's free, easy to use, does exactly what you want and is cross-browser compatible. Many sites (including this one) use it so you'll be able to get help if you can't get it to do what you want.
Note that the script posted in your question would work only on Internet Explorer, used by less than 50% of people as a web browser.

Simple dashboard application

I am trying to have some fun with dashboard widgets, so I tried a simple application :
There will be a button over the widget which when clicked will open
StackOverflow website in safari.
To implement it, I tried this:
Created a custom dashboard widget.
Added a button to it from library.
Associated gotoStackOverflow handler with onclick event.
in body of function gotoStackOverflow, I wrote this code:
window.open('https://stackoverflow.com/','Stackoverflow','width=400, height=300');
When I 'Run' the application I found no browser window appearing on click of the button.
Can anyone suggest me where I may be wrong or/ and some useful links to play with dashcode and dashboard widgets?

Your code runs fine, when I recreate it. Maybe you have pop-ups blocked in Safari?

have you added
<key>AllowNetworkAccess</key>
<true/>
to the plist? if not the outside world will not be available.

I have used following code to solve my problem:
function gotoStackOverflow(event)
{
widget.openURL("http://stackoverflow.com/");
}
cheers... :)
Miraaj