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";
}
Related
I am having issues with implement something with JavaScript using Snippets in WordPress Theme. I am using Elementor to edit pages, I think is relevent to mention.
This is what I am doing; trying to implement MouseOver and MouseOut in a landing page, so the user can play videos only if they have mouse over one section that contains specific video while they're scrolling. I think is relevent to mention too, that the videos are background (like a header with background video) in each section, so, if is better to put them just like a "pure video" (not background) to not have problems with deep selection classes, would appreaciate the advice too.
Here is my code:
<?php
add_action( 'wp_head', function () { ?>
<script>
let clip = document.querySelectorAll('.elementor-background-video-hosted .elementor-html5-video');
console.log(clip);
for ( let i = 0; i < clip.length; i++) {
clip[i].addEventListener('mouseover', function() {
console.log(clip[i]);
clip[i].play();
})
clip[i].addEventListener('mouseout', function() {
clip[i].pause();
})
}
</script>
<?php } );
The thing is that when I try to see something in console (that's why I have some console.log), dont' even show me the NodeList, it's empty, also the MouseOver and MouseOut is not working, I don't know if I am selecting the wrong class (I checked lot of times) or if my code is wrong.
[EDIT]
An image of the html structure to understand better if I am using the right class.
Link to image
I'll really appreciate all the help.
I have GA on my website and i'm trying to track every click on the website. The following JavaScript must be used, it acts like an overlay on the page:
<script type="text/javascript">
var tile = new HTMLLiveTile.TileController();
window.onmousedown = function() {
tile.openStoreProduct("var1", "var2", "var3");
}
</script>
What would be the HTML equivalent code to track this?
Right now i have:
<a id="tile" onClick="ga('send', 'event', 'click1', 'click2', 'sample');"><img src="./images/image.png"> </a>
I'm very new to this, sorry if it's redundant. My assumption was to track the variable and add it to the onClick.
I guess you are asking for a solution that does not require much hassle and much changing in code and moreover without any need to change your previous code.
you can use event.target.+ things you need to know to get info.
function mouseTrack(){
var element_name = event.target.tagName;
alert("mouse click was detecteted at: "+ element_name);
}
window.addEventListener('click', mouseTrack(), false);
this code will alert the Tag Name of Element clicked (like DIV, a, SPAN etc you know the list.). But this code is awful.It wont work in Mozilla FF, It wont work In IE 9 below. I took some time to create a fiddle on JSFiddle.net you can view example I made Here
I am struggling with onmouseover and onmouseout.
Every site I have been to shows this syntax almost exactly. I practically copied pasted it from Mozilla. The problem I’m having is that it calls the largeDiv and smallDiv functions immediately. (Eventually, I am hoping to apply a new class to the div when during the mouseover event, and return to the old class when mouseout.) I am pretty sure that my mouse events are to blame. I was also wondering if my onload function caused any problems, but when I commented it out, the only thing that changed was the small div did not load, as expected.
I tried to use an event listener, thinking I wasn’t calling the event properly, but that did not work at all, although I am not sure I coded it properly, and didn’t spend more than an hour on the damn thing! I have tried numerous tweaks, camelcasing onmouseover, using parenthesis, etc… Anyway, here is the code:
var introEl = document.getElementById("intro");
//display large div by default and
//use small div with js enabled
window.onload = function(){
introEl.className = "small";
}
function largeDiv(){
console.log("It Worked");
};
function smallDiv(){
console.log("Mouse Out!");
};
introEl.onmouseover = largeDiv();
introEl.onmouseout = smallDiv();
I coded this in my browser and when I copied it to jsFiddle to ask this question it wouldn’t load the small div on load, but it did log the statements. I put it on CodePen and it worked as I have described. Not sure what caused this but this is the second time this has happened.
By the way, if you go to CodePen or jsFiddle, I know my design skills are lacking. I am just doing this for a playground, and for a place to keep code that works, like a notebook. I promise you it will get much much worse.
As always, any help is appreciated.
var introEl = document.getElementById("intro");
//display large div by default and
//use small div with js enabled
window.onload = function(){
introEl.className = "small";
}
function largeDiv(){
console.log("It Worked");
};
function smallDiv(){
console.log("Mouse Out!");
};
introEl.onmouseover = largeDiv; // here you don't need "()" with your defined functions
introEl.onmouseout = smallDiv; // here you don't need "()" with your defined functions
Please go to following fiddle i have made some small changes and its working fine for me
fiddle
Also You could have used
<div id="intro" onmouseover="largeDiv();" onmouseout="smallDiv();">
Mouse over this text
</div>
See working example here fiddle 2
I'm looking for a way too display images like google does. when someone hovers over an image, an larger view is shown I would like to know how I can achieve this.
Something like this?
http://jsfiddle.net/roXon/HmTrw/
There are tons of plugins out there if you still aren't very good at jQuery yet. The imgPreview plugin seems like it would fit your needs. Another really slick looking one is ZoomerGallery.
On the other hand, if you want to do it exactly like Google, just go to the page where it does what you want, view source, and grab the script they are using.
$("img").hover(
function () {
//mouse enter
//do animations
},
function () {
//mouse leave
//do animations
}
);
Thats what i'd look at. Also see here:
http://api.jquery.com/hover/
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 :)