Develop Reference

Manipulate mouse cursor with javascript

I'm doing a presentation in my University about click-jacking, and i saw a very great example that i wanted to create however i didn't know how. The concept is very hard i think please check this video to understand more:
https://www.youtube.com/watch?v=O83P0umh0b0
Basically, on this video the cursor is manipulated, whenever the user point it to the play button, it will be pointed automatically to an advertisement below.i have tried to look for something similar I couldn't find anything. Please can anyone can provide me an example like this one.
I have tried this code, but as you can see the video, the mouse appear in two places. However, with the code that i tried, it just handle clicks!
<div id="firstData">Here is a text first to be hover</div>
<div id="secondData">Here is a text Two</div>
window.addEventListener("click", clickjacking, false);
function clickjacking() {
document.getElementById('secondData').click();
}

I didn't watch the video but here's something to look at. Note, use mouseover not hover.
document.getElementById("firstData").addEventListener("mouseover", clickjacking, false);
document.getElementById("firstData").addEventListener("mouseout", function() {
document.getElementById("secondData").style.backgroundColor = "inherit";
});
function clickjacking() {
document.getElementById("secondData").style.backgroundColor = "red";
}

How to change background image of body element on click with jQuery

I have implemented an background image in the body section via CSS file and it worked. However I needed this image to change depending on what tab the user clicks.
Now I thought this would be simple enough and after reading and trying the solutions in many posts here I can't figure out where I go wrong.
So basically my main setup was:
CSS:
body {
background-image: url(/bg04.png);
}
This works as it displays the background image.
Now I tried in to change the bg image in the part of the code that changes the whole scene when someone clicks on a tab:
var activate_doodle = function(e) {
if (e) {
e.preventDefault();
}
$("#text_input_container").css("display", "none");
$("#doodle_input_container").css("display", "block");
$("#change_keyboard").removeClass("active");
$("#change_doodle").addClass("active");
document.getElementById("colorPicker").click();
$('body').css('background-imgage','url(http://example.com/bg04-2.png');
};
But it does not change the image. I tried copying and pasting the absolute URL into my browser and the path to the pic is correct.
I also tried taking it away from my CSS putting the whole thing in my initializing JS sequence and then the same lines in the click events.
I really appreciate your help guys.
Thanks.

'background-imgage'
Remove g from the attribute — it should be background-image:
$('body').css('background-image','url(http://example.com/bg04-2.png');

Maybe you type error
$('body').css('background-image','url(http://example.com/bg04-2.png)');

document.getElementById("colorPicker").click( function(e) {
if (e) {
e.preventDefault();
}
$("#text_input_container").css("display", "none");
$("#doodle_input_container").css("display", "block");
$("#change_keyboard").removeClass("active");
$("#change_doodle").addClass("active");
$('body').css('background-image','url(http://example.com/bg04-2.png');
};)
may be try to add an event listener.

Button change color on toggle using jQuery

I'm looking to change the color of the button or in this case the image of the button each time the button is selected on the toggle of the jQuery. Here's what I have so far for jQuery.
jQuery(document).ready(function () {
jQuery('#occupation').hide();
jQuery('#occupationshow').on('click', function (event) {
jQuery('#occupation').toggle();
});
});
And here's what I have for the button:
<button id="occupationshow">
<img src="../SiteAssets/images/RAC/askcut/Occupation.jpg">
</button>
How can I get it so another image is displayed on the button when the button has been clicked?

The best way to do this is I think the following:
Create a sprite image of the two backgrounds for this button - so, one image file, with the two images side by side.
Set this image as the background-image of the element using CSS
Giving your button#occupationshow a fixed width/height, have the jquery modify the background-position of the image depending on the state of the button - simply put, depending on the current state of the button, the image will move left/right within button#occupationshow and you will only be able to see the relevant part at any one time.
You can as suggested modify the src attribute dynamically, but do bear in mind that with this approach the new image might take a moment to load once the button is clicked; with my approach both images are preloaded (as they are one image) and it's simply moving around, and so is instant.
Sprites are a great way of working, I'd recommend looking into them :-)

You can use the css function of jquery to change the background image of a button on every click.

toggle() by default is for showing/hiding. Use attr() with a callback function
jQuery('#occupationshow').on('click', function (event) {
jQuery(this).find('img').attr('src', function(){
var src = $(this).attr('src') == 'img1' ? 'img2' : 'img1';
return src;
});
});

I guess you only have two images, right?
So what you can do is put two tags, corresponding to both of your images, ont being set as "display: none".
<button id="occupationshow">
<img src="../img1.jpg">
<img src="../img2.jpg" style="display: none;">
</button>
And in jQuery your code will be :
jQuery('#occupationshow').on('click', function (e) {
jQuery('#occupationshow img').toggle();
});
Edit: I re-read the first post again and don't know what made me guess OP only had two images... (the fact he wants to use "toggle", I guess)

Unable to show the div on body load

This is my code posted in a jsfiddle Demo.
As you can see when you click on the
Hyderabad.
Visakhapatnam.
Then a Horizontal Image slider is shown ( YOu can slide throgh the Pictures )
Now my requirement is I need to also show the Image slider on body load itself also
I have tried using body onload function to show the div , and also in Jquery ready function , and by commenting all the hide() functions in javascript , but none of them really worked .
Could anybody please tell me what is the way to do this .

I just tested it.. first I thought that you should just do this:
jQuery(document).ready(function() {
$fp_galleries.first().click();
});
but poorly this will only show the first image and not all images.
I don't know why but it looks like you should do this.
$(window).load(function() {
/* your code */
$fp_galleries.first().click();
});
Maybe because you need to wait until the images are loaded.

perhaps use document on ready to call the function: http://api.jquery.com/ready/
$(document).ready(function() {
openGallery(galleryname){
})
;

The problem is not that it is hidden, its rather that the content are only generated by som javascript when the user clicks one of your links.
You could add something like
$("li",$fp_galleries).first().click()
at the bottom of your script.
This will trigger the click event on one of the links.

Expanding videoplayer like CNN-website, prerably jQuery-based

I'm wondering if anyone knows of a script/plugin, jquery-based or otherwise, which could be used to achive the effect that can be found on CNN.com.
I'm talking about the videos that are representet by a small thumbnail, that when clicked expands in to the text and plays.
I'm by no means a JS-guru, and me and flash isn't the bestest of friends, but I'm not completly cluess.
Essentially, what im looking for is a way to click a thumbnail, expand a swf, and stop it if i contract it again. something like that.
ANY ideas, tips or insights are welcome!

A simple approach would be replacing the content of a div with the Flash video when clicked:
HTML
<div id="video-001">
<img src="video-thumb.jpg" />
</div>
jQuery
$('#video-001').toggle(function() {
$(this).html('<object whatevergoeshere...></object>');
}, function() {
$(this).html('<img src="video-thumb.jpg" />');
});
This is a simple example but it can be improved a lot, maybe by inserting the image as the div background, saving the code in the cache of the element (with .data()), adding the click event to all div with a specific class...
Hope it helps :)