I have a problem with Safari and a map create with Leaflet: this is a little demo http://jsfiddle.net/DBJb7/ .
The CSS property 'hover' works except in Safari. I try to solve it with z-index but it doesn't work.
Does anyone have an idea ?
Edit : http://bost.ocks.org/mike/leaflet/ This project seems have the same problem.
You might try implementing the following code into your D3.js JavaScript instead of using CSS:
var feature = g.selectAll("path")
.data(collection.features)
.enter().append("path").attr('style','z-index:9999')
.on("mouseover", function() {
d3.select(this).css("fill", "green").css("stroke", "red");
})
.on("mouseout", function() {
d3.select(this).css("fill", "").css("stroke", "");
});
I have found that using the JavaScript to apply styles has been much more efficient and easier to maintain than trying to use CSS to do so, unless you are specifically using classes. In which case, I would use the .classed() method (https://github.com/mbostock/d3/wiki/Selections#wiki-classed) to manage the adding and removal of classes.
Hope this helps! If not, sorry. :-/
EDIT 1
I edited to include the mouseout functionality. After looking into this more deeply, the Leaflet thing just pulls in new images, not redrawing an SVG, which is what D3.js does. My only guess is that Safari is ignoring the z-index of your path element. This is apparent whenever you right-click on the path area and then select Inspect Element from the dropdown. On Chrome, it will show you the HTML for the path element, but on Safari, it shows you the HTML for the image being pulled in by the Leaflet stuff.
Related
This one is getting tricky for me.I have the google map in my page which is working properly ,above it lies a canvas. I need to make the google map clickable .i.e when i click on the canvas ,the map should behave normally .I have added pointer-events:none;attribute.It works properly in Firefox ,chrome and IE11.
However my requirement is I need to make it clickable in IE9 on wards,which am unable to replicate. How to do that?
If any one can replicate the behavior in a fiddle ,that will be really helpful to me.
There's an old jQuery hack that simulates pointer-events:
Listen for a click event on the canvas and in the click handler:
Hide the canvas: $(this).hide();
Ask the document to get the element at the clicked xy: var $map=$(document.elementFromPoint(event.clientX,event.clientY); (Adjust clientX/Y by any offset to the map/canvas elements) If the map is the only element under your canvas, you could define $map at the start of your app and avoid this step.
trigger the same event on the google map: $map.trigger(event);
redisplay the canvas: $(this).show();
Using PhantomJS V 1.8.1
Thanks in advance.
I am trying to run some tests on a website that I am developing which is using backbone.js.
One of my tests involve checking to see if a Canvas is present and clicking on it. My problem is that whatever selector I use to get the Canvas Element I cannot get the selector to find it. I use the same CSS selector in Google Chrome when viewing the page and all is OK. At first I thought that the issue may have been due to the element not being present on the page but other elements which are inserted with the canvas are present so I am 99% sure that this is not the problem.
The selectors I have tried to use are:
document.querySelectorAll('#idOfCanvas');
document.querySelectorAll('canvas#idOfCanvas');
Also if I use .classClassName:nth(1) to select the tyre selector, it still fails to work (works in Google Chrome though as does the other examples provided)
The canvas has a class name which is picked up by the selector by I would rather not use a class selector.
Any help would be much appreciated.
Cheers :)
Also
Like I mentioned I am almost certain that the Canvas exists as the container div for it exists. Also I have four elements on the page with the same className (two of which are canvases) and four elements are being returned when I run
return document.querySelectorAll('.className').length = 4;
Assuming you have something like this:
<canvas id="idOfCanvas"></canvas>
This should work:
canvas = document.getElementById("idOfCanvas");
// or
canvas = document.querySelector("#idOfCanvas"); // Only get the first match, ID's should be unique, any way.;
// or
canvas = document.querySelectorAll("#idOfCanvas")[0];
// or
canvas = document.getElementsByTagName("canvas")[0]; // Get the first <canvas> element.
However, you'll have to make sure your canvas element is actually loaded when the script is executed. Have a look at this onload tutorial, for example.
Try this :
canvas = document.getElementById(#IdOfCanvas:nth-child(1));
I just use following code to add an image to my project,
var paper = Raphael("mpdraw_div", 1920, 1080);
var img = paper.image("temp.jpg", 150, 10, 710, 653);
When FF, IE8 is showing my image, Chrome is insisting to not show my image in my project, when I create a new page and use the code above, there is no problem.
My project have lots of divs recursively, but I've tried to write mpdraw_div to just after body tag, this is a problem also.
What may be the possible cause of this situation?
Thanks in advance.
I reailized that it's because of loading an image before raphael is reason to fail.
Solution is to load an image after some ms(I use 100ms) later.
Hope this help to you all.
I have trying to achieve SVG element's animation while adding dynamic DOMs for its animation with jQuery.
I generate DOMs with JS, so HTML page does not have any elements for this animation.
When I add it dynamically, animation will not start in Chrome(16), however it works with FF(8)
The animation would perfect is I remove that dynamic doms which are generated with JS and put them static into HTML page.
I have created fiddle for it at : http://jsfiddle.net/cjP6K/7/
where I have put one svg dom static into HTML page, then I have cloned that element with jQuery on document ready,
In this scene, the one which was added later with JS will not Animate at all !!(this works with FF)
Please help...
Thanks,
Chetan.
There is a chrome bug in the animateMotion tag, it has been an issue for ages..
refer to the bug report here http://code.google.com/p/chromium/issues/detail?id=13585
There isn't much that can be done to get around it in chrome while still maintaining an svg dom..
Hope this helps..
I´m creating a website for a photographer who would like a fine fadein on his images. I have excluded flash as a solution and would like to use those fine-looking effects of mootools fx. But the problem is that I'm really lousy when it comes to javascript. So if anyone could give me an easy solution for fading in one single image onload and when the image is loaded I would be really happy. I know there is a lot of different people out there who have this. But the problem is that i don't know how the code works even if it is a complete solution. So most important. If anyone has got the time to explain what every single line of code does i would be more than grateful. Thanks!
A simple fade-in is surely the simplest thing one can imagined:
// set-up an event on the browsers window
window.addEvents({
// be sure to fire the event once the document is fully loaded
load: function(){
// assing 'singleImage' variable to the image tag with the 'image' ID
var singleImage = $('image');
// set a bunch of CSS styles to the aforementioned image
singleImage.set('styles', {
'opacity': 0,
'visibility': 'visible'
});
// fade in the image
singleImage.fade('in');
}
});
Working example: http://jsfiddle.net/oskar/RNeS5/ (HTML, CSS, MooTools)