We Keep Coding

Removing the content from an svg tag with snapsvg

I'm using http://snapsvg.io/
When the user clicks on a chip to bet it should show an svg image with the chip color, then if the user clicks another chip it shoud show that new chip. And it does but I'm not being able to remove the content before appending a diferent svg content, so what's happening is that svg gets put on top of previous svg.
I don't really want to append more content, I want to replace it. But I don't seem to find any other option besides .append()
That's why I try to .removeData() before appending but is not working. It keeps putting the next svg image on top of the previous one.
I hope I'm making a little sense here.
This is how my code looks like on react.
componentWillReceiveProps () {
if (this.props.chipSelectedSvg) {
const tipChipSnap = snap('#tipChip');
const tipChipSvgContent = Snap.parse(this.props.chipSelectedSvg.content);
tipChipSnap.removeData();
tipChipSnap.append(tipChipSvgContent);
}
}
render () {
return (
<div id="tips-tooltip-container" style={{visibility : tooltip}}>
<svg id="tipChip" className="chip" viewBox="-15 -20 120 120"></svg>
</div>
}

Use the Element.remove() method.
http://snapsvg.io/docs/#Element.remove

Title attribute in Firefox

The title attribute on a particular HTML element is not displayed in my application if viewed in Firefox. There are multiple topics explaining this problem. I was unable to find a sollution that would fit my needs. So I ask if you can please help.
I have a number of divs lined up. On mouseover each of the div's should display a different value(title). The title attribute works fine in Chrome but I need something simillar for Firefox.
The title attribute is set dynamically from Javascript!
My Javascript:
dojo.connect(div, 'mousemove',rasterTimeDisplay);
function rasterTimeDisplay() {
dojo.attr(evt.target, 'title', "some new title");
}

Why not to store the data to be displayed in another attribute ? Because you use javascript to feed your data-storage attribute, you can whatever you want.
For example, with jQuery :
//I feed my data-storage attribute
$("#my_div").attr('my-data', '<h1>my content to be displayed</h1>');
//And then i bind the hover event to toggle displaying of this data
$("#my_div").hover(
function(){
$(this).html($(this).attr('my-data'));
},
function(){
$(this).html('');
}
);
Or with standard JavaScript :
document.getElementById('my_div').my_data = '<h1>my content to be displayed</h1>';
document.getElementById('my_div').onmouseover = function(){
this.innerHTML = this.my_data;
};
document.getElementById('my_div').onmouseoout = function(){
this.innerHTML = '';
};

Sorry if i missunderstood you. However, you are trying to trigger the title attribute on hover? But the title attribute is already triggered by hover on default:
So if you just add the attribute to your desired element, you will get the extra information on hover.
var titles = document.getElementsByClassName('title');
for(var i = 0; i < titles.length; i++)
{
titles[i].title = 'Hover information ' + i;
}
jsFiddle
I you're interesting in the jQuery way to do this:
$('.title').attr('title', 'Hover information');
Still doesn't work?
Step-1: First try to run your firefox client in safe-mode. Your problem might be solved now. If this is the case proceed to step-2. Else... Well i would suggest you to update your grapical driver or install a newer version.
Step-2: Disable your Hardware Acceleration(AH).
Check another answer about this here: https://support.mozilla.org/nl/questions/860902
Now if you just want a work around, to even let the oldest Firefox browsers support this. You can find one here: Tooltips (title="...") won't show in Firefox
I hope this solved your problem.

SImple image replace using Javascript/html

Couldn't find a punctual answer for this simple task and your help is highly appreciated
We have an image we want to switch based on user's color selection.
Tried several methods, none worked.
This is the idea:

$('#YourButton').click(function() {
var oldSrc = 'images/Image1.png';
var newSrc = 'images/Image2.png';
$('img[src="' + oldSrc + '"]').attr('src', newSrc);
});
Just change the image source with javascript by clicking your button with another color
Note: it´s jquery so you have to include the js file..

Just bind a click listener to your button and change the src attribute of your image.
$('#colorButton').click( function() { //choose a new color
$('#imageIcon').attr('src', 'path/to/new/image.png'); //change the img's source
});
EDIT (response to questions):
If you want this code to apply to all of your buttons, give each of your buttons a similar class instead of an ID:
<div class="colorButton"></div>
Then you can use the following selector to apply the above click listener to all of these divs:
$('.colorButton')
Naturally, you want to change your image as simply as possible. You could map all of your colors to their corresponding image file, but as far as design goes this might get messy and unwieldy. I would create a directory that stores all of your image files (for example, /your/color/swatches) and give each of them a name consistent with their color, like 'ff0000.png' for red, '0000ff.png' for blue, etc.
Why would we do this? So that we can switch your image based on the background-color attribute of your buttons. Let's say that you have the following buttons:
<div class="colorButton" style="background-color: '#ff0000'"></div>
<div class="colorButton" style="background-color: '#0000ff'"></div>
You can use the same click listener, but it will have to be modified a bit since we are mapping the background color to an image:
$('.colorButton').click( function() {
var color = $(this).css('backgroundColor');
//(You'll need to modify your color string here)
$('#imageIcon').attr('src', 'your/color/swatches/' + color + '.png');
});
BUT this won't work yet. Since most browsers return "rgb(xx, yy, zz)" from .css('backgroundColor'), you need to convert that string into hex. This post on SO gives a more or less effective way to do so, but you'll need to modify it to fit your model where I have indicated.

How to use variable to display certain content?

When I click the href, I want to display the image and description from the target id. Can someone correct this code for me and show me how to do it right? Thank you very much!
HTML:
<div id="gallery"><img/></div>
Click me
jQuery code:
var datas={
"images":[{ "src":"gallery/panorak.jpg",
"title":"PANORAK",
"date":"28/10/2010 Web Design",
"description":"desc",
"id":"panorak",
},
{
"src":"gallery/kamoa.jpg",
"title":"kamoa",
"date":"28/10/2010 Web Design",
"description":"desc",
"id":"kamoa",
},
]};
$(document).ready(function(){
var gallery=$("#gallery")
//****I don't know how to display it right at this point
var list=$("<ul/>");
gallery.append(list);
datas.images.each(function(i,j){
list.prepend($("<li/>").$("<img/>").attr("src",datas.images[i].src).load(function(){ }));
});
});
Any help is greatly appreciated! Thank you very much!

I have made some changes to your code:
http://jsfiddle.net/T5r6D/
Have a look at my jsfiddle link for all updates.
You had some structure in flow issues and javascript error.
I am adding all image in array using normal for loop. once loop is done, i wrap images with <li> and adding the list to the stage.
Keep in mind that images will not be shown coz it is not on the jsfiddle server. Try it on your side.
UPDATE
http://jsfiddle.net/T5r6D/1/
So the new update does not hide the full container.
The anchor #tag [href] will be matched with the images title tag. So once clicked on a button it will hide the image that matches.

Try this:
$(document).ready(function(){
var gallery=$("#gallery")
//****I don't know how to display it right at this point
$('a').click(function(){
var list=$("<ul/>");
gallery.append(list);
$.each(datas.images, function(i,j){
var img = $("<img/>").attr("src",datas.images[i].src);
list.prepend($("<li/>").append(img));
});
});
});
If you want to trigger events when something is clicked, you can use click() function. And I fixed each() function part. Check this documentation. And I split some code to improve readability.

Text captions on multiple Images with jQuery

I'm new to jQuery so please be patient. I want to create a text caption that slides down on an image when you hover over a link on the page. I can do this when there's just one image with one caption but I have several images with different captions on one page.
I would like to create one function that can handle all of these in seperate instances and not create a function for each image/textcaption. The reason being is that the images and text is dynamic and changing in quantity overtime.
Please see an example of the code below, the .portText is a class of about 7 instances, when I hover over .moreInfo the text for every image slides down. I understand why this is happening, and I think I need to use ($this) somehow, but I also think i need to connect the picture to the text differently that it's done here. Hope this makes sense. Can anyone help? Cheers!
$(function() {
$('.moreInfo').hover(
function() {
$('.portText').slideDown('slow');
},
function() {
$('.portText').slideUp('slow');
}
)
});

You can refer to the element that was hovered over using $(this).
The way I usually do this is to make portText a child of the moreInfo div:
<div class="moreInfo">
<div class="portText">
....
</div>
</div>
Then instead of just $('.portText') you can do $('.portText', this) (i.e. all portTexts that are children of the hovered element).
Edit: Another way to do it would be to use the data attribute and give each portText an ID:
<div class="moreInfo" data-id="1">....</div>
<div class="portText" id="portText-1">...</div>
Then for Javascript:
$('.moreInfo').hover(
function() {
var myId= "#portText-" + $(this).data('id');
$(myId).slideDown('slow');
},
function() {
var myId= "#portText-" + $(this).data('id');
$(myId).slideUp('slow');
}
);