Click through iframe with flash in it - javascript

I have a flash inside and iFrame and i want to click through iFrame but not through flash. I have seen that, we can click through iFrame via "pointer-events: none;" but it passes everything inside iframe. Now I just want to know, that can we enable or check the mouse click in flash?
I have added an sample for my question. black dots are in a flash swf file and its in iFrame. Now when I click on transparent area then it should be clicked on underneath area that is Label buttons in this case. otherwise black dots should be clicked.

I think it doesn't matter if you are in iframe in this case, if I understand correctly you want a pass-through click from Flash to the underlying HTML page, but only if the click doesn't satisfy some condition (in this case, only if it's not over the black spots).
An approach would be to do it collaboratively between the Flash part and some JavaScript part in the iframe:
Intercept the click in Flash, get coordinates and verify if it's over a black circle
If it is, handle the corresponding logic in Flash, else proceed with the following steps
Pass the coordinates to a JavaScript function already defined in the iframe through Flash's external interface
Finally in the JavaScript you can do something along the lines of How to simulate a click by using x,y coordinates in JavaScript?

To do list :
Use the CSS attribute pointer-events: none; on iframe
Create a invisible div with ID="event-eater" that covers the elements.
Add Javascript below (uses jQuery) to recognizance where click happened
It will call actionscript method ClickPosition and based on returned result do 1 of following
If black area was clicked - Do nothing, click event was created in actionscript
If background was clicked - Temporally hide current element, and recreate click in javascript
Javascript
$('#event-eater').click(function(evt) {
var posX = $(this).offset().left, posY = $(this).offset().top;
var x = Math.abs(Math.round(evt.pageX - posX));
var y = Math.abs(Math.round(evt.pageY - posY));
var result = "["+x+", "+y+"]";
if(document['flashInterface'].ClickPosition(result)=="true"){
$('#event-eater').css({display:'none'});
starter = document.elementFromPoint(evt.clientX, evt.clientY);
$(starter).click();
$('#event-eater').css({display:''});
};
});
Actionscript
package
{
import fl.events.ColorPickerEvent;
import flash.display.MovieClip;
import flash.external.ExternalInterface;
public class Main extends MovieClip {
//set this variable true if background was clicked last, false otherwise
var wasBackgroundClickedLast:Boolean = new Boolean(true)
public function Main() {
//allows JavaScript to access the ClickPosition() function.
ExternalInterface.addCallback("ClickPosition", clickPosition);
}
public function clickPosition(value:String):String{
var va= str.split(",");
simulateClick(Number(va[0]),Number(va[1]));
return wasBackgroundClicked.toString();
}
public function simulateClick(x:Number, y:Number):void
{
var objects:Array = stage.getObjectsUnderPoint(new Point(x, y));
var target:DisplayObject;
while(target = objects.pop()){if(target is InteractiveObject){ break; }}
if(target !== null)
{
var local:Point = target.globalToLocal(new Point(x, y));
var e:MouseEvent = new MouseEvent(
MouseEvent.CLICK, true, false, local.x, local.y);
target.dispatchEvent(e);
}
}
}
}
Small demo : Javascript eventeater with button array below it.

Related

trying to get onmouseenter and onmouseout working on new img in dom

Environment: Safari 110.0.1, OSX (MacOS) 10.12.6
I am working on an image gallery type of display. There's an element that is loaded with an image by the Javascript; I want that element to have functionality on onmouseenter and onmouseout.
It would appear that I can't add those when I'm creating the img element, because the image is not loaded, and I read (somewhere, lol, it's been a long day) that an element has to be loaded before one can attach functions to it. I did try it in the HTML; no joy.
So I have a timer going, and I am trying to attach it there, but that doesn't work either - the functions are never called.
I tried starting the timer after the page is loaded, but, that doesn't work - the over/out functions still don't fire. The timer is definitely running, that's what forces the redraw if the page scaling changes, and that works. You can see what I want to happen with the mouse over/out by clicking the checkmark below the image.
Here's the page, all the HTML and Javascript code is visible there (lower on the page.) Any insight is appreciated.
The best I've been able to do so far is to get the events to attach to a surrounding div by specifying out in the HTML, where they do pretty much the right thing as far as the div is concerned. But when the mouse is over the image, it is out of the div, so the opposite of what I want happens: the onmouseout fires and the thing I want to have happen over the image goes away.
Is there some reason I can't attach these functions during the timer? Here's the timer code:
function mousingover()
{
console.log('over');
if (dismode == 1) return;
show_image_notes('mypic');
}
function mousingaway()
{
console.log('away');
if (dismode == 0) return;
show_image('mypic');
}
function ticker()
{
// var pic = document.getElementById('mypic'); // get (eventually) ready element
// var eltype = pic.nodeName;
// console.log('eltype:',eltype);
// pic.onmouseenter = function() { mousingover(); }
// pic.onmouseout = function() { mousingaway(); }
// console.log(pic.onmouseout);
// When the display is rescaled, the width of this div changes
// This is used to re-fire the calculation of where the notes go:
var myAnchor = document.getElementById('picdiv');
var xd = myAnchor.offsetWidth;
if (working == 0 && xd != xdim)
{
working = 1;
if (dismode == 1) show_image_notes('mypic');
else show_image('mypic');
xdim = xd;
working = 0;
}
tcounter = tcounter + 1;
if (tcounter > 10 || tcounter < 0) // trying to delay so image has time to load
{
var pic = document.getElementById('mypic'); // get (eventually) ready element
pic.onmouseenter = function() { mousingover(); }
pic.onmouseout = function() { mousingaway(); }
tcounter = 0;
}
}
The console confirms that I am finding the IMG with that ID, which is correct, and also that the functions are attached. They just don't fire.
I'm actively working on this, so the code for the timer will change; the page always displays the code that's in use at the moment.
I'm trying to do this with pure Javascript.
I looked at your HTML, and you have a canvas element in there along with the img element. It looks like the canvas overlays the image, yes? If so, the canvas is going to get the mouse events, and the img won't see them.

Button toggle to switch between images nd the text display on it/ raphael js/ javascript / html

In my current assignment I got:
Create a toggle button on the html page that visually indicates what state it is in by changing the text displayed on it (e.g. changes between “up” and “down”, or “smiling” and “not smiling”) and by switching between two images, as well.
a. Hint: you will have to use a “state” variable outside the button’s listener callback function to re- member the button’s state between event callbacks.
4. Use the toggle button to toggle the mouth between a smile and a frown. In your button ‘click’ listener, check the button’s state with an ‘if’ statement to control whether you are going to make a smile or a frown.
I am quite confused as I searched in web - there are so many ways to create a button, in Html or in css.
Can somebody post a similar example please ?
Use the element.click and provide a callback click function. In this case the callback is the update function.
In the update function, check for the current src, i.e. the source for the image element. Update the src of the image and the text of the button accordingly.
I have also made it interactable in the image part. If not required just remove this line
imageElem.click(update);
var imageElem = document.getElementById('test_Img'),
buttonElem = document.getElementById('test_Btn'),
img1 = 'http://www.fantazia.org.uk/images/600px-Smiley_svg_small.png',
img2 = 'http://www.clipartsgram.com/image/2060213170-sad-smiley-face-clipart-mclpbaqca.png';
imageElem.addEventListener("click", update);
buttonElem.addEventListener("click", update);
function update() {
var src, text;
if (imageElem.src === img1) {
src = img2;
text = 'Sad';
} else {
src = img1;
text = 'Smile';
}
buttonElem.value = text;
imageElem.src = src;
}
<input type = 'button' id="test_Btn" value = 'Smile'/>
<img id="test_Img" src='http://www.fantazia.org.uk/images/600px-Smiley_svg_small.png' />

JavaScript programatically hover mouse over element

I'm writing a vb.net program to automate and manage an online game. I'm using the Awesomium webcontrols to display and manipulate the pages of the game.
There is a point where I need to grab the data that's not shown in the source until the user hovers over a certain element, how can I use javascript (Not jquery please) to hover over it programatically until the data I need becomes available and then grabbed?
I apologise if this has been asked before (Which it has but from the perspective of someone who owns the web page) but I have been searching for hours for a solution and cant find anything.
What I've tried to use but failed is:
function findBpDate(){
document.getElementById('tileDetails').children[1].children[0].children[1].children[0].fireEvent('onmouseover');
return document.getElementsByClassName('text elementText')[0].textContent;
}
This returns "undefined" when it calls back to my application, I'm certain I'm pointing to the right DOM elements though.
This is what I want the javascript to "hover" on:
<span class="a arrow disabled">Send troops</span>
Once this element has been "hovered" on, this elements text changes to the text I need to grab:
<div class="text elementText">Beginners protection until 20/07/13 07:51 am.</div>
I've shown above what the element looks like when the mouse "hovers" on the element I need it to, however this changes a lot depending on which element the user hovers over while playing the game, from what i gather it's where the source keeps the text for each tooltip in the game.
So I need a function that will hover over a certain element and then while it's hovering, grab the text from the tooltip text/"text elementText" element.
Try WebView.InjectMouseMove(x, y).
Something like
public Point GetElementPosition(dynamic element)
{
dynamic rect = element.getBoundingClientRect();
using (rect)
{
return new Point(rect.left, rect.top);
}
}
dynamic element = webView.ExecuteJavascriptWithResult("document.getElementById('id')");
Point pos = GetElementPosition(element);
webView.InjectMouseMove(pos.X, pos.Y);
this is 10x easier with js/dom. http://jsfiddle.net/pA2Vd/
Do this...assuming you can get reference to elements somehow using by Id would have been lot easier.
var elm = document.getElementsByClassName('a arrow disabled')[0];
var txt = document.getElementsByClassName('text elementText')[0];
var evt = new Event('mouseover');
elm.dispatchEvent(evt);
var status = txt.innerText;
(helpfuL stuff down) otherwise you need to capture event, detect who fired it, check if that has this class and tag name. Lot of processing.
var txt,spn,status='';
document.getElementByTagName('span').forEach(function(d){
if (d.tagName=="div" && d.className == 'text elementText'){
var txt = d;
}
}
window.onmouseover = function(e) {
var elm = e.target;
if (elm.tagName=="SPAN" && elm.className == 'a arrow disabled') {
status=txt.innerText;
}
}

JavaScript function apparently not being called

I have a web page with an HTML5 canvas that is displaying a number of images. I have made it possible to drag and drop the images around the canvas by using the kineticJS library.
However, I am using a copy of the library that I have downloaded and saved locally, since there were one or two changes that I wanted to make to its functionality. (For example, before I had altered it, when a click was detected on an image on the canvas, anything that had previously been drawn to the canvas by anything other than the Kinetic library would be cleared from the canvas. I removed this call to clear(), since there were a few other things that I had drawn to the canvas which I wanted to remain there.)
Now, I want to add some functionality to my code, so that when a click is detected on one of the images that has been drawn to the canvas, a textual description of the image that has been clicked will appear on the the web page outside the canvas.
I have the following function, which I am using to detect whether a click has been detected on one of the images:
function isClickOnImage(event){
var clickX = event.clientX;
var clickY = event.clientY;
//var imageCheckIteration = 0;
while(imageCheckIteration < sources.length){
if((clickX > sources[imageCheckIteration].x && clickX < sources[imageCheckIteration].x + imageWidth) &&
(clickY > sources[imageCheckIteration].y && clickY < sources[imageCheckIteration].y + imageHeight)){
/*This is where I need to print the variable that holds the text I want to display, but I need to display its contents
outside the canvas, in the <p></p> tags below. */
console.log("Click on image detected");
document.getElementById("tipsParagraph").innerHTML = tips[imageCheckIteration];
} else {
document.getElementById("tipsParagraph").innerHTML = "";
}
}
}
The images displayed on the canvas are all stored in an array called 'sources'. So, the while loop in this section of my code should check whether the x & y coordinates of the click were in a location that has an image drawn to it, starting with the first image in the array, and going all the way through to the last.
If the loop determines that a click was in a position that has an image drawn to it, then the console should log the message "Click on image detected", and the value of my tipsParagraph variable should be updated to the value of whatever is stored in the 'tips' array, at the same position as that of the image that's been clicked on in the images array (the images array has been called 'sources'). (The text stored in each position of the 'tips' array corresponds to the image at the same position in the 'sources' array).
As I said previously, I am using a local copy of the KineticJS library, and I've edited its 'mousedown' function so that it now looks like this:
_mousedown: function(evt) {
this._setUserPosition(evt);
var obj = this.getIntersection(this.getUserPosition());
if(obj && obj.shape) {
var shape = obj.shape;
this.clickStart = true;
shape._handleEvent('mousedown', evt);
isClickOnImage(evt);
}
//init stage drag and drop
if(Kinetic.DD && this.attrs.draggable) {
this._initDrag();
}
}
i.e. I've added a call to my isClickOnImage function.
However, when I click on an image on the canvas, the text in the 'tipsParagraph' section of my page is not updated. The 'tipsParagraph' is simply the ID I've given to a <p> tag displayed below the canvas.
This is the line of code I have for the 'tipsParagraph':
<p id = "tipsParagraph">This is where the text will be displayed. <script>$('#tipsParagraph').text(tips[imageCheckIteration]);</script></p>
I assumed that the JS I've added to this line would ensure that the text displayed is the text from the tips array, at whatever position the value of the variable imageCheckIteration determines. However, for some reason, the tip being displayed on my page is always the first element from the tips array. This is the element displayed as soon as the page loads (i.e. before a click on an image), and it does not change when a click on an image is detected. So it seems to me that my isClickOnImage function is never being called by the mousedown function in the library, but rather that the value of the tipsParagraph is being set straight away when the page loads, and not being changed after that, regardless of user interaction with the page...
Can anyone point out to my why this is? What is it I'm doing wrong, and what do I need to do to get the text displayed to be the text corresponding to the image that the user clicks on?
Taking a look at
function isClickOnImage(event){
var clickX = event.clientX;
var clickY = event.clientY;
//var imageCheckIteration = 0; // <-- why is this 0 commented out?
while(imageCheckIteration < sources.length){ // <-- imageCheckIteration is never incremented, so it never increases, hence the check never occurs
if((clickX > sources[imageCheckIteration].x && clickX < sources[imageCheckIteration].x + imageWidth) &&
(clickY > sources[imageCheckIteration].y && clickY < sources[imageCheckIteration].y + imageHeight)){
/*This is where I need to print the variable that holds the text I want to display, but I need to display its contents
outside the canvas, in the <p></p> tags below. */
console.log("Click on image detected");
document.getElementById("tipsParagraph").innerHTML = tips[imageCheckIteration];
} else {
document.getElementById("tipsParagraph").innerHTML = "";
}
}
}
try something like: the for loop structure to control incrementing:
for( var i=0; i<sources.length; i++){ // this will go through all items in the sources array
if((clickX > sources[i].x ... ) //and other checks
}

Multiple, unique, popup windows with JPopUp script?

I know this has probably been answered multiple times before, but this is the second time I've worked with JQuery, and I'm not entirely sure what I need to do, since I'm not familiar with this format of coding. I've looked at other, similar, questions, but none of the answers are making sense to me, and I really need this to click in my head so I can keep working.
I'm using Jpopup for this, so the script info is all there, but my question is this:
I have two areas in an image that I need to be clickable, both showing different content, but I can only call one page at a time to pop up, and multiple anchor tags just give me the same content twice. What do I need to add to that script to allow the page to show two different popups?
This is the script in my HTML page
<script language="javascript">
$(document).ready(function() {
//Change these values to style your modal popup
var source = "demo.html";
var width = 920;
var align = "center";
var top = 100;
var padding = 10;
var backgroundColor = "#FFFFFF";
var source = 'popups/demo.html';
var borderColor = "#000000";
var borderWeight = 4;
var borderRadius = 5;
var fadeOutTime = 300;
var disableColor = "#666666";
var disableOpacity = 40;
var loadingImage = "popups/loading.gif";
//This method initialises the modal popup
$(".modal").click(function() {
modalPopup( align,
top,
width,
padding,
disableColor,
disableOpacity,
backgroundColor,
borderColor,
borderWeight,
borderRadius,
fadeOutTime,
source,
loadingImage );
});
//This method hides the popup when the escape key is pressed
$(document).keyup(function(e) {
if (e.keyCode == 27) {
closePopup(fadeOutTime);
}
});
});
</script>
The HTML
<div style="margin-top:200px;margin-left:395px;">
<a class="modal" href="javascript:void(0);"><img src="images/clickmelarge.png" border="0">
</a></div>
I studied the source code of the "plugin" and studied also the invoked source code of the HTML page at runtime. In my eyes this popup plugin doesn't support multiple popups at same time. Why?
Well, I used Firebug to exermine the source code at runtime and I saw only the same divs, added to the DOM tree by this. As far as I did understand when the DOM was complete loaded the author added the main divs to the DOM tree and set they all to 'hide'. If you call your function these divs will set to 'visible'.
Another reason is -in my eyes a very tricky way- the div with the Id 'blockModalPopupDiv' covers the full browser window. If you click on this element, the function of hiding all divs will be executed. You won't be have chance to click outside the div element.
So what can you do?
I think you have only three options :
Ask the author for an opportuniti to add your requirement.
Download the source code and modifiy it your self. Its created in standard Javascript.
Try to use another plugin or change your concept.

Categories