I'm making a web site and suddenly I ran into a problem. It's not huge, but I would like to fix it. On my site I have many images but there is a glitch. The images are "dragable". I mean when you click on a image and than move your mouse the images are being dragged. How can that be fixed?
http://nitidus-consto.kilu.org/
It is always like this.
Don't find anything weird in it.
Anyway this link can help you:
http://www.redips.net/firefox/disable-image-dragging/
you can use javascript to avoid the image dragging:
html file:
<!-- right image (dragging disabled) -->
<img src="image.png" onmousedown="if (event.preventDefault) event.preventDefault()">
javascript:
// register onLoad event with anonymous function
window.onload = function (e) {
var evt = e || window.event,// define event (cross browser)
imgs, // images collection
i; // used in local loop
// if preventDefault exists, then define onmousedown event handlers
if (evt.preventDefault) {
// collect all images on the page
imgs = document.getElementsByTagName('img');
// loop through fetched images
for (i = 0; i < imgs.length; i++) {
// and define onmousedown event handler
imgs[i].onmousedown = disableDragging;
}
}
};
// disable image dragging
function disableDragging(e) {
e.preventDefault();
}
Related
I am following this tutorial to build a store locator page with a Mapbox map.
I don't want to add custom markers because I already have custom map labels (symbols?), which means I don't need the optional last section of the tutorial and stop right after Add Event Listeners.
Once this is completed, the page should react to clicks in the side panel list, as well as on the map (2 event listeners). However, in the demo provided in the tutorial for that particular step, you can tell the code for the second event listener, the one making the map clickable, is not functioning, which makes me believe there is a mistake in the provided code:
// Add an event listener for when a user clicks on the map
map.on('click', function(e) {
// Query all the rendered points in the view
var features = map.queryRenderedFeatures(e.point, { layers: ['locations'] });
if (features.length) {
var clickedPoint = features[0];
// 1. Fly to the point
flyToStore(clickedPoint);
// 2. Close all other popups and display popup for clicked store
createPopUp(clickedPoint);
// 3. Highlight listing in sidebar (and remove highlight for all other listings)
var activeItem = document.getElementsByClassName('active');
if (activeItem[0]) {
activeItem[0].classList.remove('active');
}
// Find the index of the store.features that corresponds to the clickedPoint that fired the event listener
var selectedFeature = clickedPoint.properties.address;
for (var i = 0; i < stores.features.length; i++) {
if (stores.features[i].properties.address === selectedFeature) {
selectedFeatureIndex = i;
}
}
// Select the correct list item using the found index and add the active class
var listing = document.getElementById('listing-' + selectedFeatureIndex);
listing.classList.add('active');
}
});
Would anyone be able to tell what is wrong with this code?
Turns out the code is incomplete in that the cursor doesn't change to a pointer as you hover over a map label/marker so it doesn't clue you into realising you can click on it, hence my assumption it wasn't working at all. I assume the general users who would then face the map would be equally deceived unless the pointer shows up. So in the tutorial, if you do go ahead and click the marker, it will have the expected behaviour and display the popup, although no pointer is shown.
Here is how to create the pointer, based on this fiddle: https://jsfiddle.net/Twalsh88/5j70wm8n/25/
map.on('mouseenter', 'locations', function(e) {
// Change the cursor style as a UI indicator.
map.getCanvas().style.cursor = 'pointer';
});
map.on('mouseleave', 'locations', function() {
map.getCanvas().style.cursor = '';
});
I am using html5 drag and drop.
When I drag an image or link from any given webpage, the browser-window is recognizing the dragover event.
For example dragging an image over a browser tab, makes the browser switching the window. Same works for example with dragging links to bookmarks.
Now when I drag my custom draggable element, there is no reaction from the browser. Is there a way to change this behavior?
I don't understand what you want to achieve, but it seems that you want to make something happens when you move your custom element outside the document or the window.
You should try binding a handler with a dragleave or something like that. Here is an example from another question:
var dropTarget = $('.dropTarget'),
html = $('html'),
showDrag = false,
timeout = -1;
html.bind('dragenter', function () {
dropTarget.addClass('dragging');
showDrag = true;
});
html.bind('dragover', function(){
showDrag = true;
});
html.bind('dragleave', function (e) {
showDrag = false;
clearTimeout( timeout );
timeout = setTimeout( function(){
if( !showDrag ){ dropTarget.removeClass('dragging'); }
}, 200 );
});
I think that could work for you, but for further help you should extend your issue's description.
Also I ll leave some HTML5 drag and drop docs here
I have this banner that has 3 tabs that would require clickTAGs added to the buttons of each tab section. Currently, the banner works fine with the code attached, but when I try to insert a clickTAG function, everything gets screwy and I end up having a blinking banner. I hope someone here can help me out.
This is the code that I am using:
this.btn_launchsite.addEventListener(MouseEvent.CLICK,f);
function f(e:MouseEvent) : void {
navigateToURL(new URLRequest ("http://kpmginfo.com/cfo/"),"_blank");
}
I tried adding this between the void { and navigateToURL:
var click_url:String = root.loaderInfo.parameters.clickTAG;
if(click_url) {
And this made the whole banner blinking.
i'm not sure entirely what your are trying to achieve ie. do you want to track clicks? within flash? send tracking data to an external php? either way I would firstly created your clickTag function outside your click button function & then call the clickTag function from within the click banner function.
eg. something like.
var URL_Tag = 0;
function ClickTagger (e:Event=null):void {root.URL_Tag = root.URL_Tag + 1;}
this.btn_launchsite.addEventListener(MouseEvent.CLICK, ClickBanner);
function ClickBanner (event:MouseEvent) : void {
navigateToURL(new URLRequest ("http://kpmginfo.com/cfo/"),"_blank");
ClickTagger();
}
trace (URL_Tag); // this line is for testing and debugging.
I am working on a Flash banner ad built with Actionscript 3. It will be embedded into web pages.
The ad needs to have a close button. When the user clicks the button the ad should disappear.
This needs to be done entirely in the banner, as we have no control over the webpages where it will be embedded.
In Actionscript 2 I used to do this by running this code when the user clicked the button:
unloadMovie(this);
This seems to no longer work in Actionscript 3. What can I do to achieve this functionality in AS3?
Thanks for your help.
For documentation purposes, here are the conclusions Andreyu and I reached regarding the issue: unloading/removing a swf file from within the swf to allow users access to the elements under the swf.
One option is to use ExternalInterface to inject js code to:
get the id/name of the swf as registered with the DOM
remove the swf element from the DOM using the found id/name
In terms of code, this is using a technique described on Zeh Fernando's blog
as modified by Andreyu to include the DOM element removal:
// Based on work by Zeh Fernando: http://zehfernando.com/2011/getting-the-swfs-html-objectembed-id-from-within-the-flash-movie-itself/
function getSWFObjectName(): String {
// Returns the SWF's object name for getElementById
// Based on https://github.com/millermedeiros/Hasher_AS3_helper/blob/master/dev/src/org/osflash/hasher/Hasher.as
var js:XML;
js = <script><![CDATA[
function(__randomFunction) {
var check = function(objects){
for (var i = 0; i < objects.length; i++){
if (typeof(eval("objects["+i+"]." + __randomFunction)) != undefined) {
return objects[i].id;
}
}
return undefined;
};
return check(document.getElementsByTagName("object")) || check(document.getElementsByTagName("embed"));
}
]]></script>;
var __randomFunction:String = "checkFunction_" + Math.floor(Math.random() * 99999); // Something random just so it's safer
ExternalInterface.addCallback(__randomFunction, getSWFObjectName); // The second parameter can be anything, just passing a function that exists
return ExternalInterface.call(js, __randomFunction);
}
// Function to remove the SWF from the webpage
function destroyEverything(event:MouseEvent): void {
var js:XML;
js = <script><![CDATA[
function(__SWFContext) {
var element = document.getElementById(__SWFContext);
element.parentNode.removeChild(element);
}
]]></script>;
ExternalInterface.call(js, getSWFObjectName());
}
// Add function to click event of button
close_button.addEventListener(MouseEvent.CLICK, destroyEverything);
If unloadMovie was enough for you, you could simply remove everything from the stage:
//In button click handler, call "removeEverything" function
//function onClickClose(e:MouseEvent):void{
// removeEverything()
//}
//As a result you will get empty stage
function removeEverything():void {
while (stage.numChildren) {
stage.removeChildAt(0);
}
}
I have a problem that I will explain.
I'm doing an animation in HTML5 and CSS3. My idea is that a plane is flying around and it launches a missile after a while. What I want to do is to make the missile appear after that time. I thought about doing that changing the z-Index property of my div (because I have the missile image into a div container) using javascript after a while (any time I choose). For doing that I found the sleep function at the bottom. I created the "appear" function that I know it works because It changes my zIndex value but it doesn't wait the 2 seconds I want.
I also thought I had the solution by using the visibility property, but I have the same problem, sleep function doesn't wait at all.
Any suggestions? Thanks
function sleep(milliseconds) {
var start = new Date().getTime();
for (var i = 0; i < 1e7; i++) {
if ((new Date().getTime() - start) > milliseconds){
break;
}
}
}
function appear(object){
sleep(200000);
var objective = document.getElementById(object);
objective.style.zIndex=1;
You can pass a function to the setTimeout function which will call that function in x milliseconds.
function waitForMe() {
alert('triggered!');
}
// Call waitForMe in 200000ms
setTimeout(waitForMe, 200000);
So for your example, you would want to use 2000 (2 seconds), not 200000 (200 seconds):
function appear(object) {
setTimeout(function () {
var objective = document.getElementById(object);
objective.style.zIndex=1;
}, 2000);
}
Hiding and showing an element
You can hide and show a method in a few ways:
Use z-index as you suggest, probably not the best way as we can actually hide it instead of sending it to the back of the page.
objective.style.zIndex = 1;
Use display, this hide the object completely.
// hide
objective.style.display = 'none';
// show
objective.style.display = 'block';
Use visibility, this will hide the object but it will still take up space in the page. This wouldn't matter if you're using position:fixed or position:absolute.
// hide
objective.style.visibility = 'hidden';
// show
objective.style.visibility = 'visible';
You can either create a div around the objective, and add it in with javascript like this
document.getElementById('objectivespan').innerHTML=imagehere;
Other than that, you can use
objective.style.visibility='hidden';
and change it to
objective.style.visibility='visible';
for the delay, use
function sleep(){
alert('slept');
}
SetTimeout('sleep', 10000);