We Keep Coding

SVG <use> tags within Polymer dom-repeat

I'm iterating over an object using dom-repeat, and want to reference different icons from an SVG sprite sheet with each iteration. To add an icon, I'm trying to use the <use xlink:href="sprite.svg#id"> method, mixed with Polymer's computed bindings. Here's the code inside the dom-repeat block:
<template is='dom-repeat' items="{{currentPlan.functionalities}}">
<div class="resourceRow rowParent">
<div class="functionIconContainer columnParent">
<svg><use xlink:href$="{{ _getIconURL(item.id) }}"/></svg>
</div>
</div>
</template>
& the JS logic:
_getIconURL: function(iconID){
var url = "sprite.svg#" + iconID;
return url;
}
This code outputs what I want it to, as far as I can see in Dev Tools, but still the icon doesn't show up. For reference, here's an example of what is written to the DOM:
<svg class="style-scope">
<use class="style-scope" xlink:href="sprite.svg#id"/>
</svg>
Is this a bug or my misunderstanding?

I had exactly the same problem before and ended up using iron-iconset-svg (https://elements.polymer-project.org/elements/iron-icons?active=iron-iconset-svg), which in my opinion provides a cleaner/easier solution. Its simply a wrapper for your SVG sprite sheet, so you define your icons almost the same way and use them with iron-icon.
Defining a custom iconset (put it directly into the page or wrap it inside an element + set a name that describes the icons, here: 'your-iconset-name')
<iron-iconset-svg name="your-iconset-name" size="24">
<svg>
<defs>
<g id="your-icon-name">
<rect x="12" y="0" width="12" height="24" />
<circle cx="12" cy="12" r="12" />
</g>
</defs>
</svg>
</iron-iconset-svg>
If you wrap them, lets say in 'your-custom-iconset', you can include the iconset like this:
<your-custom-iconset></your-custom-iconset>
Using icons
When you need an icon you just include iron-icons (https://elements.polymer-project.org/elements/iron-icons) and place it like this:
<iron-icon icon="your-iconset-name:your-icon-name"></iron-icon>
You can then give it a class to apply styling and don't need to use 'fill' for its color, just use 'color'.
Applied to your example:
<template is='dom-repeat' items="{{currentPlan.functionalities}}">
<div class="resourceRow rowParent">
<div class="functionIconContainer columnParent">
<iron-icon icon$="your-iconset-name:{{item.id}}"></iron-icon>
</div>
</div>
</template>

Ok, not sure if this really counts as an answer, but it fixes my immediate problem. I've attached an on-dom-change event handler to the dom-repeat block, which gets called on well, DOM changes.
Then I loop through each icon container and set its innerHTML to itself. I don't know what it does, but it somehow forces a re-evaluation of that part of the DOM, causing my icons to show up. It's the simplest of code:
_forceRedraw: function(){
var functionIcons = document.querySelectorAll('div.functionIconContainer');
_.each(functionIcons, function(iconContainer){
iconContainer.innerHTML = iconContainer.innerHTML;
})
}
'Lo, it works!

A workaround is to add the attribute statically in addition to the binding
<svg><use xlink:href="" xlink:href$="{{ _getIconURL(item.id) }}"/></svg>
Polymer has issues with creating the attribute, updating it works fine though.

This is a duplicate of: Polymer (1.0) - dynamic use xlink:href$ inside template not working properly
This is a Polymer bug, filed as issue #3060.

Wow slider and fancybox (lightbox) won't work together

Hi, my FancybBox code works but then I start adding wowslider code then only the wowslider works properly. How do I solve this?
Here is the link to the page:
http://makaticitycondo.com/execstud_greenbelthamilton.html
If you click on Inquire Now button, a lightbox iframe is supposed to appear. But instead redirects it to a new page.
How can we solve this?

In link specify the attribute data-fancybox-type="iframe"
Refer the link
HTML:
<a class="fancybox" data-fancybox-type="iframe" href="inqsend_ghes.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','images/inquire.png',1)"><img src="http://makaticitycondo.com/images/inquired.png" name="Image2" width="204" height="120" border="0" id="Image2"></a>

onmouseover change image

I was trying to put a link on an image. When the mouse is over the image, the image changes from login_button_22.jpg to login_button_11.jpg. I am using the following piece of code, which is working for IE but not for chrome and others. Any ideas how to modify it, to work for all explorers? Thanks
<a href="#top"
onmouseover="document.getElementById('myimage1').src='img/login_button_22.jpg';"
onmouseout="document.getElementById('myimage1').src='img/login_button_11.jpg';" >
<img src="img/login_button_11.jpg" id="myimage1" />
</a>

SVG anchor current page highlight

I have an SVG-based menu with links similar to the following. I'd like to highlight the current page's link (e.g., by adding "font-weight:bold"). Any suggestions? Should I do something with Javascript? (Note that I'm linking the SVG in my HTML page via an <object> tag for compatibility, so the solution has to work with that constraint.) Oh, and I'm fine with the highlight only working in modern browsers.
<svg ...>
<style type="text/css">
a text {
fill:#ffffff;
}
a:hover text {
fill:#2020ff;
}
</style>
<g>
<a id="aHome" xlink:href="/" target="_top">
<text id="txtHome">Home</text>
</a>
...
</g>
</svg>

Well, apparently forgetting about this for a week was worth a bronze badge. :-P
Anyways, the code above is actually correct by itself. Go figure - I had other overriding CSS styles that caused the a:hover bit to fail.

How to overlay data on an image

I am a rookie web developer and I am looking to put data points over an image that can be interacted with when hovered over, similar to most common map applications.
From my current understanding, using the Canvas in Javascript seems to be the best way to go, does anyone have any recommendations on how to do this and maybe point me in the right direction?

Does not require canvas although canvas can be used.
Shortest coding would be make a div with a background image being the image you want to place points on.
If it is not an image then you would need to make two divides on the overlay divide (the first one in the HTML code) use position:absolute to place it on top with the same width and height -- then the image content divide that follows will be layered under your absolute positioned divide.
<div style="background:url(image.jpg); width:100px; height:100px">
... material here is on top of the image ...
</div>
or
<div style="position:absolute; width:100px; height:100px">
... material here is on top of the image ...
</div>
<div style="width:100px; height:100px">
... place object here which picks up your map or whatever ...
</div>
The ... material here is on top of the image ... can be a canvas but SVG would be less coding as it has links supported
<div style="background:url(image.jpg); width:100px; height:100px">
<object data="yourOverlay.svg" width="100" height="100" >
</object>
</div>
Here is a sample SVG file posted at http://tutorials.jenkov.com/svg/a-element.html
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<a xlink:href="/svg/index.html">
<text x="10" y="20">/svg/index.html</text>
</a>
<a xlink:href="/svg/index.html" xlink:show="new">
<text x="10" y="40">/svg/index.html
(xlink:show="new")</text>
</a>
<a xlink:href="/svg/index.html" xlink:show="replace">
<text x="10" y="60">/svg/index.html
(xlink:show="replace")</text>
</a>
<a xlink:href="/svg/index.html" target="_blank">
<text x="10" y="80">m/svg/index.html
(target="_blank")</text>
</a>
<a xlink:href="/svg/index.html" target="_top">
<text x="10" y="100">/svg/index.html
(target="_top")</text>
</a>
</svg>
Depending on your application you may want to consider straight HTML for "... material here is on top of the image ..." so it will work in older browsers.
And FYI you could code the background into the SVG and just have a object tag in the html page and use googles "SVGWEB" http://code.google.com/p/svgweb/ to support nearly every browser.

Good resource here: http://dev.opera.com/articles/view/html5-canvas-painting/
But for what you're doing, you don't really need a canvas, imo. If you have an image, and you know where stuff is that you want to overlay (pixel offset), you can provide the pixel offsets from each data point in JSON or XML to your client script, and then just have it use absolute positioning to place them where they need to be on the image.

Another possible solution is to just use an SVG image which i believe supports links ect directly