I want to know what is the way of getting elements drawn using the Raphael.js.I tried with getById but it is not at all working.Please help me to overcome this issue.
//When the user clicks on the circle i am getting the Circle ID and wants to get the //rectangle which is also having the same ID as Circle but with different prefix.
function addCircleClick(obj)
{
obj.click(function(event)
{
alert(paper+" getRect ID 1"+this.id);.
var getRect;
try
{
var getRect = paper.getById(this.id);////This below line(paper.getById(this.id)) is not working,even Circle object i am not able to get
}
catch(e)
{
alert(e);//Issue here
}
alert("getRect ID 2 "+getRect);
obj.attr({"stroke":"red"});
});
}
I think your problem is that you're trying to use paper as shown in the example. Hopefully this helps you out.
var paper = Raphael("field1", 240, 400, actions);
var attrs = {
fill: "#FFF"
};
function actions() {
var that = this;
var circle = that.circle(50,50,10);
circle.attr(attrs);
circle.click(function(event) {
console.log(this.id); //elements id
console.log(that.getById(this.id)); //clicked element
console.log(paper.getById(this.id)); //doesn't work
});
};
EDIT: Reread your question and think I may have misunderstood it. Anyway I'm not quite sure what you mean with getting the same id with different prefix. Every element gets unique number id.
Related
Im trying to figure out how to know which Sprite got clicked on
var current_dots:Array<Sprite>= [];
for(i in 0...4){
var page = new Sprite();
current_dots.push(page);
page.on('pointerdown', dot_click);
this.addChild(page);
}
function dot_click(){
trace("CLICKED");
}
since each sprite was declared in the for-loop im not sure how to identify which one is getting clicked
I figured a way to do it was like this
function dot_click(e:InteractionEvent){
for( i in 0...current_dots.length){
if(current_dots[i] == e.currentTarget) {
trace("Clicked")
}
}
}
had to pass the interactive parameter
I'm trying to solve this problem for more than one day now, but I can't find an answer. My problem is that I need to scale an SVG image (responsive design). I need to manipulate the SVG code on the client side, so embedding it via img tag is not an option. Therefore I tried to use an inline image instead. However, to scale it properly it seems that I need to set the viewBox property. The SVG files are generated by some software which can't set the bounding box on it's own, so my idea was to use JavaScript for that purpose.
The problem is that my software uses various tab controls from a library which I can't modify. I can't just get the bounding box, because it's not rendered initially and therefore I just get back zeros (in Chrome) or error messages (in Firefox).
What I need is a way to get the size of the bounding box without actually rendering the object. It is not possible to manipulate the display parameter, which the library uses to show and hide tabs.
Any ideas?
One idea was to copy the SVG into another, visible div, but I don't know if that would solve the problem. And I don't know how to do it.
Best regards
Based on the previous answers, I monkeypatched getBBox on my app init so it will transparently apply the hack.
Now I can call getBBox directly on any element, whether it's attached or not.
_getBBox = SVGGraphicsElement.prototype.getBBox;
SVGGraphicsElement.prototype.getBBox = function() {
var bbox, tempDiv, tempSvg;
if (document.contains(this)) {
return _getBBox.apply(this);
} else {
tempDiv = document.createElement("div");
tempDiv.setAttribute("style", "position:absolute; visibility:hidden; width:0; height:0");
if (this.tagName === "svg") {
tempSvg = this.cloneNode(true);
} else {
tempSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
tempSvg.appendChild(this.cloneNode(true));
}
tempDiv.appendChild(tempSvg);
document.body.appendChild(tempDiv);
bbox = _getBBox.apply(tempSvg);
document.body.removeChild(tempDiv);
return bbox;
}
};
you can clone it to a visible svg and then getBBox.
Add into you html:
<div style="position:absolute;left:-9999cm;top:-9999cm;visibility:hidden;">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg"></svg>
</div>
Add into your javascript:
function getBBox(elem){
var svg1 = document.getElementById('svg1'), e = elem.cloneNode(true);
e.style.display = "inline";
svg1.appendChild(e);
var b = e.getBBox();
svg1.removeChild(e);
return b;
}
cuixiping's answer as a function:
function svgBBox (svgEl) {
let tempDiv = document.createElement('div')
tempDiv.setAttribute('style', "position:absolute; visibility:hidden; width:0; height:0")
document.body.appendChild(tempDiv)
let tempSvg = document.createElementNS("http://www.w3.org/2000/svg", 'svg')
tempDiv.appendChild(tempSvg)
let tempEl = svgEl.cloneNode(true)
tempSvg.appendChild(tempEl)
let bb = tempEl.getBBox()
document.body.removeChild(tempDiv)
return bb
}
I'm trying to solve this problem for more than one day now, but I can't find an answer. My problem is that I need to scale an SVG image (responsive design). I need to manipulate the SVG code on the client side, so embedding it via img tag is not an option. Therefore I tried to use an inline image instead. However, to scale it properly it seems that I need to set the viewBox property. The SVG files are generated by some software which can't set the bounding box on it's own, so my idea was to use JavaScript for that purpose.
The problem is that my software uses various tab controls from a library which I can't modify. I can't just get the bounding box, because it's not rendered initially and therefore I just get back zeros (in Chrome) or error messages (in Firefox).
What I need is a way to get the size of the bounding box without actually rendering the object. It is not possible to manipulate the display parameter, which the library uses to show and hide tabs.
Any ideas?
One idea was to copy the SVG into another, visible div, but I don't know if that would solve the problem. And I don't know how to do it.
Best regards
Based on the previous answers, I monkeypatched getBBox on my app init so it will transparently apply the hack.
Now I can call getBBox directly on any element, whether it's attached or not.
_getBBox = SVGGraphicsElement.prototype.getBBox;
SVGGraphicsElement.prototype.getBBox = function() {
var bbox, tempDiv, tempSvg;
if (document.contains(this)) {
return _getBBox.apply(this);
} else {
tempDiv = document.createElement("div");
tempDiv.setAttribute("style", "position:absolute; visibility:hidden; width:0; height:0");
if (this.tagName === "svg") {
tempSvg = this.cloneNode(true);
} else {
tempSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
tempSvg.appendChild(this.cloneNode(true));
}
tempDiv.appendChild(tempSvg);
document.body.appendChild(tempDiv);
bbox = _getBBox.apply(tempSvg);
document.body.removeChild(tempDiv);
return bbox;
}
};
you can clone it to a visible svg and then getBBox.
Add into you html:
<div style="position:absolute;left:-9999cm;top:-9999cm;visibility:hidden;">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg"></svg>
</div>
Add into your javascript:
function getBBox(elem){
var svg1 = document.getElementById('svg1'), e = elem.cloneNode(true);
e.style.display = "inline";
svg1.appendChild(e);
var b = e.getBBox();
svg1.removeChild(e);
return b;
}
cuixiping's answer as a function:
function svgBBox (svgEl) {
let tempDiv = document.createElement('div')
tempDiv.setAttribute('style', "position:absolute; visibility:hidden; width:0; height:0")
document.body.appendChild(tempDiv)
let tempSvg = document.createElementNS("http://www.w3.org/2000/svg", 'svg')
tempDiv.appendChild(tempSvg)
let tempEl = svgEl.cloneNode(true)
tempSvg.appendChild(tempEl)
let bb = tempEl.getBBox()
document.body.removeChild(tempDiv)
return bb
}
This is the entire function I am working on:
function collapse(){
var i = 0;
var currColors = [];
var currTitles = [];
// Get the color and the course id of all the current courses
$('.course').each(function (){
if (rgb2hex($(this).css("background-color")) !== "#f9f9f9") {
currColors.push(rgb2hex($(this).css("background-color")));
currTitles.push($(this).children(".course-id").text());
$(this).children(".course-delete").remove();
$(this).children(".course-id").text("");
$(this).css('background', "#f9f9f9");
}
});
alert("made it");
// Redistribute the classes
// This is where reverse lookup will eventually happen
i = 0;
$('div.course').each(function (){
if (i>=currTitles.length){
return false;
}
$(this).children(".course-id").text(currTitles[i]);
$(this).css('background', currColors[i++]);
$(this).append("<button id='temp' class='course-delete'>X</button>");
});
var i = currColors.length-1;
};
And this is the problematic section
$('.course').each(function (){
if (rgb2hex($(this).css("background-color")) !== "#f9f9f9") {
currColors.push(rgb2hex($(this).css("background-color")));
currTitles.push($(this).children(".course-id").text());
$(this).children(".course-delete").remove();
$(this).children(".course-id").text("");
$(this).css('background', "#f9f9f9");
}
});
I have this function collapse that is supposed to fill in the blank spot in a list of divs that the user has been adding to the screen if they delete one. This function was working fine at one point, but obviously I have screwed it up some how.
There are only and always will be 6 '.course' items because that is the size of the list. When collapse() is called it stops running after n times where n is the number of '.course' elements currently in use. The loop stops there and the whole function stops there. I have tried putting alert() statements everywhere but still no luck. If someone spots what I am missing I would really appreciate it.
I have figured out a work around for now, but I would like to know why my entire function is crashing in the middle.
I've tried a lot of things, but nothing is working.
When I click on an mage, I want it's z-index to be "9999". When I click to show another image, I want the previous image's z-index to go back to "0".
So basically, I only want one image to show at a time - I want a specific function to run for each image.
http://jsfiddle.net/WarrenBee/a78R7/
PLEASE help me!
Change your JavaScript to this:
$('.char').click(function () {
$('.char img').css({'z-index' : '0'});
$(this).children('img').css({'z-index' : '9999'});
});
This will set the z-index of all imgs inside a char class back to 0, before setting the one that was clicked to 9999.
Just remember the last image and value and put the old value back:
var lastImage, lastZIndex;
$('.char').click(function () {
var thisImage = $(this).children('img');
if (lastImage) {
lastImage.css('z-index', lastZIndex);
}
lastImage = thisImage;
lastZIndex = thisImage.css('z-index');
thisImage.css({'z-index' : '9999'})
});
Updated fiddle
Ideally, avoid creating global variables by wrapping all of that in a function:
(function() {
var lastImage, lastZIndex;
$('.char').click(function () {
var thisImage = $(this).children('img');
if (lastImage) {
lastImage.css('z-index', lastZIndex);
}
lastImage = thisImage;
lastZIndex = thisImage.css('z-index');
thisImage.css({'z-index' : '9999'})
});
})();
Further updated fiddle