We Keep Coding

Inserting rect element inside anchor in svg with javascript doesn't work

I am trying to create a clickable image using svg. Inside the svg I would have multiple rect elements (the parts of the image that I want to be clickable) and around them I would put anchor elements to make them clickable.
When I do this using only html, it works without an issue:
<a href="test.html">
<rect
style="fill:#00ff00;stroke-width:0.264583"
id="rect142"
width="33.816833"
height="24.259901"
x="172.39232"
y="63.95792" />
</a>
However, I need to do this dynamically, so I want to use javascript in order to insert the rect element and the anchor. Inserting the element alone works, but when I try to insert it inside an anchor, nothing shows up. Here is my javascript code:
console.log("in")
// make a simple rectangle
var newRect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
newRect.setAttribute("id", "rect604-1");
newRect.setAttribute("x", "172.39232");
newRect.setAttribute("y", "63.95792");
newRect.setAttribute("width", "33.816833");
newRect.setAttribute("height", "24.259901");
newRect.setAttribute("fill", "#00ff00");
newRect.setAttribute("opacity", "0.66");
newRect.setAttribute("fill-opacity", "1");
newRect.setAttribute("fill-rule", "evenodd");
newRect.setAttribute("stroke-width", "0.264583");
var aTag = document.createElement('a');
aTag.setAttribute('href',"test.html");
var svg = document.getElementById("svg12");
console.log(svg)
// append the new rectangle to the svg
aTag.appendChild(newRect);
svg.appendChild(aTag);
//$("#rect604-1").wrap("<a href='https://mail.google.com/mail/u/0/#inbox'></a>");
Any ideas why my code doesn't work?

For creating a link with an svg object, you should use an svg anchor rather than an html anchor. So replace
var aTag = document.createElement('a');
by
var aTag = document.createElementNS("http://www.w3.org/2000/svg", "a")

How to add height and width to Jquery function

I am working with a jquery script i found online for my ticketing software. It adds the functionality of adding videos to a WIKI. the problem is it does not set a height or width to the video is it possible that it can be done with this code?
if ($('#idEditArticle')) {
var videos = $('a[href$=".m4v"], a[href$=".mp4"]');
$.each(videos, function(i, video) {
$(video).parent().prepend('<video src="'+$(video).attr('href')+'" controls></video><br/>');
});
}
here is the output in html
<p>
<a border="0" class="fb_attachment" href="default.asp?pg=pgDownload&pgType=pgWikiAttachment&ixAttachment=136818&sFileName=Paragon%20Invoice%203.mp4" rel="nofollow" title="">Paragon Invoice 3.mp4</a></p>
Even if its possible to manually add it to the html. I can't add inline css to the elements. I tried wrapping it into a div but it won't take an inline style it just deletes it upon submission.
Can i add a height and width to the jquery code to automatically set the height and width of videos.

This should work. Please note I am using max-width but any style will do.
if ($('#idEditArticle')) {
var videos = $('a[href$=".m4v"], a[href$=".mp4"]');
$.each(videos, function(i, video) {
// Added a style attribute here.
$(video).parent().prepend('<video src="'+$(video).attr('href')+'" controls style="max-width: 100%;"></video><br/>');
});
}
A clearer (from a coding perspective) way would be:
if ($('#idEditArticle')) {
// Search for all matching elements. Returns an array of jQuery objects.
var videos = $('a[href$=".m4v"], a[href$=".mp4"]');
// Simply use the array.each to iterate over the preceeding array.
videos.each(function(){
// now create a link, video and source element
var link = $(this);
var video = $('<video />');
var source = $('<source />').attr('src', link.attr('href'));
// append the element correctly to create a tree
video.append(source);
// Heres where you apply multiple style elements
video.css({'max-width':'100%'});
// prepend the tree to the desired location
link.parent().prepend(video);
});
}
The implementation works (might have had an extra space in < source /> - its supposed to be <source />:
// Search for all matching elements. Returns an array of jQuery objects.
var videos = $('a[href$=".m4v"], a[href$=".mp4"]');
// Simply use the array.each to iterate over the preceeding array.
videos.each(function(){
// now create a link, video and source element
var link = $(this);
var video = $('<video />');
var source = $('<source />').attr('src', link.attr('href'));
// append the element correctly to create a tree
video.append(source);
video.css('max-width','100%');
// prepend the tree to the desired location
link.parent().prepend(video);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
Test

Appending code to the contents of an svg in an <object>

I have an <object> that holds an svg file. I want to be able to add animations to it via javascript / jQuery, because the values that I would like to animate are not selectable via CSS transistions (specifically, the r value of <circles>. I would love to be proven wrong, though!). Here's what I'm trying to use:
//create the object to hold the svg
$(selProject).append('<object id="circleCont" data="imgs/circles-01.svg" type="image/svg+xml"></object>')
var a = document.getElementById("circleCont");
a.addEventListener("load",function(){
var svgDoc = a.contentDocument; //get the inner DOM of .svg
var circ = svgDoc.getElementsByClassName('circ');
$(circ[0]).append('<animate attributeName="r" from="0.01" to="300" dur="0.2" begin="0s" fill="freeze"/>');
},false);
However, this doesn't seem to work. What is the better method to handle this?

Add link to image in javascript

I'm replacing one image with another in javascript, then adding a link to it, but it doesn't seem to be working. Any suggestions?? Please and thank you!!
function showImage2(){
document.getElementById("tbc").src = "images/s2.jpg";
var elem = document.getElementById("Slideshow");
elem.style.display = "none";
document.getElementById('tbc').style.display='block';
document.getElementById('tbc').style.usemap='ss2Map';
var link = document.createElement('a'); // create the link
link.setAttribute('href', 'wastewater.html'); // set link path
link.appendChild("images/s2.jpg"); // append to link
}

link.appendChild("images/s2.jpg"); // append to link
This line won't do anything. You can only append an element, not a text string. You need to append document.getElementById("tbc") instead if I understand your markup correctly.
If that's not what you're trying to append, you can use var el = document.createElement('img') to create an img tag and then set the src attribute using el.setAttribute('src','images/s2.jpg')
After this, the above line would become link.appendChild(el); which would work.

I think all you really need is to have one image with a link and one image without the link. Onload, the image without the link is shown and the other image with the link is hidden. Once click on a button or something, then hide the image without the link and show the image with the link correct?
<img id="image1" src="http://us.123rf.com/400wm/400/400/tonygers/tonygers1108/tonygers110800022/10200687-manipulated-nasa-photographs-of-the-earth-and-moon-isolated-together-on-a-black-background.jpg" />
<a style="display:none;" id="image2" href="http://www.google.com" target="_blank"><img src="http://d1jqu7g1y74ds1.cloudfront.net/wp-content/uploads/2011/08/us-astronaut-bruce-mccandless-space-walk.jpg" /></a>
Click Me
<script>
function showImage2(){
var imageOne = document.getElementById('image1');
var imageTwo = document.getElementById('image2');
imageTwo.style.display = 'block';
imageOne.style.display = 'none';
}
</script>
You can see the working code here. http://jsfiddle.net/QbbJU/1/

appendChild() can only take a DOM node, not a string.
To set the text of an element, you can either set innerHTML or textContent, or append a text node (from document.createTextNode())
You also probably want to put the link somewhere in your page.

using javascript for changing dynamically created ASP.NET image control

I've created a table in my ASP.NET (C#,VS2010) web app whose rows and cells should be created dynamically (read from DB), I have an image in each row which is being created dynamically (in codebehind file), how can I change its image (display a hover) with mouse over? it is easy using a small JavaScript function for statically created controls, but how can it be done for dynamically created controls? can I use inline JS functions? how should I implement it?
thanks

Give the images you create dynamically a class, using their CssClass property:
// Dynamically create the image control in code behind
Image image = new Image();
Image.CssClass = "change-on-hover";
Image.ImageUrl = "image.jpg"; // Of course, this is dynamic from the database
// Save the alternative image URL in a data-attribute
Image.Attributes["data-alternate-image"] = "image-over.jpg";
parent.Controls.Add(image);
This will render each image like this:
<img src="image.jpg" class="change-on-hover"
data-alternative-image="image-over.jpg" />
Then in jQuery, you can find all the images with this class to bind the behavior:
$("img.change-on-hover")
.on("mouseover", function(e) {
// Save original src (image.jpg)
$(this).data("original-image") = this.src;
// Change src to alternative (image-over.jpg)
this.src = $(this).data("data-alternate-image");
})
.on("mouseout", function(e) {
// Change src back to original
this.src = $(this).data("original-image");
});
The data-alternative-image attribute is a nice way to store some information inside the image tag from code behind, that you can then later read in your JavaScript event handler. You can make your own data-attributes any way you like.
Some more info about the data-attribute: http://ejohn.org/blog/html-5-data-attributes/