We Keep Coding

Strange firefox issue with innerhtml

I have this piece of code:
document.getElementById("refhome").innerHTML = "<img src='Resources/WeFix Wide Logo.png' style='height:128px;margin-left:auto;margin-right:auto;text-align:center;display:block;' />";
Now this code executes well on all browsers. but in firefox, nope.
I tried manually adding the img in the a, and still no picture.
this is the a:
<a id="refhome" href="index.html"><object id="obj1" style="margin:0 auto;display:block;pointer-events:none;width:320px;" type="image/svg+xml" data="Resources/Wefix2.svg"></object></a>
my javascript should replace the object with an img, but his does not happen in firefox.
even if i manually add the img to the a. But when i do this with a diferrent a tag:
<a id="as" href="#"><img src='Resources/WeFix Wide Logo.png' style='height:128px;margin-left:auto;margin-right:auto;text-align:center;display:block;' /></a>
No problem.
Really don't understand what's going on here.
Why in the other a Tag is doesen't work?
EDIT:
Found the issue but i dont know how to solve it.
When i remove the style attribute from the object it works fine and the other js code is not needed.
for some reason the style hides the svg, this happens only in FF, I tested in Safari,Chrome and IE
Another EDIT:
It appears display:block hides the image... Really strange. How can i center the image? Usually i set it to block and give it a width and then margin:0 auto. How can i center it without the display?

I found a work around, since display block hided the svg i used the following code to center it:
style="display:inline-block;pointer-events:none;width:320px;"
for this to work i inserted my a tag and object tag into a div with textalign center, and all that did the work. Thanks anyways cheers.

Canvas onmousedown causes text cursor no matter what CSS I use

Interesting glitch. It turns out that if you try to use CSS to style the cursor (as in to hide or use a crosshair cursor), when you fire an onmousedown event, the cursor is changed to a text cursor.
Here's a code snippet from the Experiment where I noticed this:
mouse=[[0,0],false];
snap_mouse_by=10;
canvas.onmousedown=function(evt){
var X=evt.clientX,Y=evt.clientY;
mouse[0]=[X-X%snap_mouse_by,Y%Y-snap_mouse_by];
//set mouse coordinates
mouse[1]=true;
//set mouse is down to true
}
Along with this, a self-executing function runs and checks for the mouse coordinates and whether the mouse is down or not. Based on this data, it draws a box.
Of course, when I hit the mouse button, the cursor's style goes to text instead of doing nothing.
No need to answer this question, answer is below.

I did a quick google search to see if I was doing the CSS wrong, or if there's a documented bug.
I found nothing, but then got an idea that should seem pretty obvious.
canvas.onmousedown=function(evt){
...
evt.preventDefault();
return false;
}
I tested that out to see if it was a browser function causing the CSS inconsistency, and it worked like a charm, I now have full control of the cursor's style.
Here's the link, if anyone's curious.
Just thought I'd share this in case anyone else runs into this glitch.

onclick png background color change

I need to design a part of webpage like below the image. In the left side, there is color options. If the user pick any color from the left side and click on the image part, the part of the image should get filled by the picked color. I spent more time to google search. Most of the sites used flash only. But i do not know flash very well. Is it possible to achieve using jquery plugin?

You'll probably want to look into the <canvas> element. As for filling a particular bit of the image when clicked, you may want the floodfill algorithm.

Really this can be done simply, if you have strict control over what png files you use.
For example, you can make the png fully opaque with the exception of the area you want to colour.
Then you can load the image and just set the background colour of the element you are using when a colour is clicked.
Something like this:
$(".ColorOption").click(function(e){
e.preventDefault();
var color = $(this).data("color");
$("#MainImageBackground").css("background-color", color);
});
assuming you set up your colour options using the data attribute like so:
<a data-color="#F00"></a>
with your image something like:
<div id="MainImageBackground">
<img src="whatever"/>
</div>

You can solve this with Javascript, but therefore you need for every color a own image.
<script language="JavaScript" type="text/javascript">
function changePic(picColor)
{
if(picName == "btnRed")
{
document.getElementById(mainPic).src = "mainPicRed.jpg"
}
else if(picName == "btnYellow")
{
document.getElementById(mainPic).src = "mainPicYellow.jpg"
}
}
</script>
HTML for every color button:
<img src="red.jpg" name="btnRed" id="btnRed" onClick="changePic(this.name)">
<img src="mainPic.jpg" name="mainPic" id="mainPic">

Idea 1:
User the canvas element and look at fill methods, this is probably going to be more complex than flash.
Idea 2:
Create transparent PNG where the colourd area is the only part that is transparent.
Create 2 DIVS, 1 at z-index 10 and other at 20, same size, same position
Place image in top div which is z-index 20. Then change the colour of the background in div 1 which is at z-index 10.

To accept any png and fill the middle:
You can find information on the floodfill algorithm in javascript here:
http://jsfiddle.net/loktar/ZLw9m/
However your implementation will have to be more advanced as you need to convert the image to a format javascript understands (0's and 1's for example) and then run the algorithm on that
As #musefan pointed out if you can control the PNG's this is much easier

html5 canvas element disappears

I have a <canvas> element that I put in a div using jQuery. The lines I draw on that canvas appear and then disappear very quickly.
When I put text inside the $('#solutionDiv') div, it appears when the page loads, and then gets covered (briefly) by my canvas, and then reappears when the canvas vanishes. This happens in FireFox and Chrome. I am using a library for sliders called tigra_slider_control. I don't think that's the issue, but it might be.
var solnCanvas=document.createElement('canvas'); // should be accessible through $('#solutionDiv > canvas')
solnCanvas.width = 480;
solnCanvas.height = 480;
var solnContext=solnCanvas.getContext('2d');
solnContext.strokeStyle = '#00f'; // blue lines
solnContext.lineWidth = 4;
solnContext.moveTo(50,16);
solnContext.lineTo(50,5);
solnContext.lineTo(5,5);
solnContext.stroke();
$('#solutionDiv').append(solnCanvas);
The corresponding div is:
<div id="solutionDiv" style="width:580px;height:500px;" class="boxy">
Now you see it ... <br />
Now you don't
</div>
I don't need (or want) text in this div. This is just for experimenting ... Any help would be much appreciated.

So, here is my long-awaited answer to my own question. It seems to have had something to do with the fact that I was dynamically adding the div and the canvas. When I added the div and the canvas in the html at the very outset, the canvas stayed put. This is not exactly a solution -- more of a workaround. Rather than adding the canvas later on, I just made it visible.

If you don't need (or want) the text in the div, take the text out of the div.

Strokes broken or shape going underneath others once clicked - Raphael.js

I made this map, following the demo on Raphaël website.
I want each shape (département) to be clickable and lead to a page.
I put a link, for example, on a yellow shape, more or less in the center of the map.
Here it's how it goes:
Not clicked, the shape looks great, I click it, it leads the page, perfect!
I click the previous arrow on my browser to go back and hover again that same shape, and it behaves really weird. The strokes seem broken or the shape going underneath the other ones (details here). Do you know what's happening?
Also, I would like to have your opinion and feedback about your experience with the map (usability and compatibility with browsers (IE?) mostly).
Thank you in advance for your help.

The reason it looks weird is because by adding a link to the element, Raphael wraps the <path> element (that defines the département shape) inside an <a href="">. But its toFront() method still works on the <path>, so that now just pushes it to the front of the <a>, instead of to the front of the entire set of départements. In other words, .toFront() doesn't work anymore.
That looks like a bug in Raphael to me, actually. I'm not sure how to fix it, other than replacing each occurrence of .toFront() you're using by a function that checks if the node has an <a> parent, and if it does, move that to the front instead (by reinserting it into the DOM).
Also,
It's broken in IE in a different way.
I think whoever made that demo already knew about it, because the if(current) block in the mouseover fixes it on the Australia example. But the scaling and stroke-width animation you added basically also need to be reset there.
If you replace that if(current) block by the following it should work:
if (current && current != departement) {
fra[current].animate({
fill: "#333",
stroke: "#666",
"stroke-width": 1
}, 500);
fra[current].scale(1,1)
document.getElementById(current).style.display = "";
}