I was wondering if possible to add external javascript or css inside an iframe, I have an iframe on our website generated from 3rd party application zendesk chat and I need to change the icon and text inside of it.
<iframe id="webWidget" tabindex="0">
<html>
<head></head>
<body>
<div id="Embed">
<div class="src-component-Launcher-wrapper u-isActionable u-textLeft u-inlineBlock u-borderNone u-textBold u-textNoWrap Arrange Arrange--middle u-userLauncherColor ">
<!-- This is the icon -->
<span class="src-component-Icon-container src-component-Launcher-icon src-styles-components-Icon-Icon Arrange-sizeFit u-textInheritColor u-inlineBlock Icon" type="Icon">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<path d="M11,12.3V13c0,0-1.8,0-2,0v-0.6c0-0.6,0.1-1.4,0.8-2.1c0.7-0.7,1.6-1.2,1.6-2.1c0-0.9-0.7-1.4-1.4-1.4 c-1.3,0-1.4,1.4-1.5,1.7H6.6C6.6,7.1,7.2,5,10,5c2.4,0,3.4,1.6,3.4,3C13.4,10.4,11,10.8,11,12.3z"></path><circle cx="10" cy="15" r="1"></circle><path d="M10,2c4.4,0,8,3.6,8,8s-3.6,8-8,8s-8-3.6-8-8S5.6,2,10,2 M10,0C4.5,0,0,4.5,0,10s4.5,10,10,10s10-4.5,10-10S15.5,0,10,0 L10,0z"></path>
</svg>
</span>
<!-- This is the text -->
<span class="src-component-Launcher-label Arrange-sizeFit u-textInheritColor u-inlineBlock ">
Support
</span>
</div>
</div>
</body>
</html>
</iframe>
I successfully change the text from "Support" to "Contact Sales" by this code
$(document).ready(function(){
zE(function(){
$zopim(function(){
$("#launcher").css('width', 'auto');
$("#launcher").contents().find("span.src-component-Launcher-label").text('Contact Sales');
});
});
});
But the problem now is the icon is svg
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<path d="M11,12.3V13c0,0-1.8,0-2,0v-0.6c0-0.6,0.1-1.4,0.8-2.1c0.7-0.7,1.6-1.2,1.6-2.1c0-0.9-0.7-1.4-1.4-1.4 c-1.3,0-1.4,1.4-1.5,1.7H6.6C6.6,7.1,7.2,5,10,5c2.4,0,3.4,1.6,3.4,3C13.4,10.4,11,10.8,11,12.3z"></path><circle cx="10" cy="15" r="1"></circle><path d="M10,2c4.4,0,8,3.6,8,8s-3.6,8-8,8s-8-3.6-8-8S5.6,2,10,2 M10,0C4.5,0,0,4.5,0,10s4.5,10,10,10s10-4.5,10-10S15.5,0,10,0 L10,0z"></path>
</svg>
Is there's a way to change it using jQuery or javascript?
Is there's a way to add bootstrap/font-awsome inside of this iframe and replace svg to something like that?
PS: I am aware that I can inject css and js to an iframe, however, the problem is zendesk has security stuff that not allowing to do it.
Thanks!
Within an svg tag, there multiple image elements, showing thumbnail images. Because of the large number of images, the page loading tooks a long time. So I want to implement an easy lazy load like David Walsh’s Simple Image Lazy Load and Fade. For img elements it works fine. But for image elements of an SVG area, the load will not be done.
Example:
<div>
<img id="myimg" height="20" width="20" data-src="img1.jpg"/>
</div>
<div>
<svg width="10%">
<image id="myimage" height="20" width="20" xlink:href="img1.jpg"/>
</svg>
</div>
And the JS coding:
// This works fine
var img = jQuery("#myimg");
img.attr('src', img.attr('data-src'));
img.on("load", function () {
img.removeAttr('data-src');
});
// This doens't work, onload will not be processed, image will not be not shown
var image = jQuery("#myimage");
image.attr('xlink:href', image.attr('data-href'));
image.on("load", function () {
image.removeAttr('data-href');
});
The scripting will leave the page in this way:
<div>
<img id="myimg" height="20" width="20" data-src="img1.jpg"/>
</div>
<br>
<div>
<svg width="10%">
<image id="myimage" height="20" width="20" data-href="img1.jpg" xlink:href="img1.jpg"/>
</svg>
</div>
Why is onload not working for this SVG image element?
You have several small mistakes:
<image/> is a self-closing tag,
xlink:href should be used without xlink: prefix,
it's better to set eventListener before you changing attribute.
See the snippet:
var image = jQuery("#myimage");
image.on("load", function () {
console.log('loaded');
image.removeAttr('data-href');
});
image.attr('href', image.attr('data-href'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg>
<image id="myimage" width="150" height="150" data-href="https://pbs.twimg.com/profile_images/843090368837042176/Nl-rCb9c_400x400.jpg"/>
</svg>
Here is my solution to the same problem where I keep using the xlink:href attribute for the raster image to show inside the SVG, but still lazy-load on click. I'm using different lazy-load plugin (jquery.lazy.js) but it's very similar:
<svg>
<image id="lazy-img" class="lazy" width="" height="" data-source="myimage.jpg" />
</svg>
$('.someElement').on('click', function() {
var image = $('#lazy-img");
image.attr('xlink:href', 'myimage.jpg');
image.attr('href', 'myimage.jpg');
});
The idea is that the initial HTML markup is for the lazy-loading images and on click event we are swapping the markup back to work with SVG, after the image is lazy-loaded.
I have created an SVG image which I am using within our website.
The SVG is displayed by inserting the XML into the HTML file, however, when loaded like this the SVG displayed differently compared with being displayed within an img tag.
<img src="http://elbrus.ecommercesuite.co.uk/Customisation Tool/SVG Templates/Bookmark.svg" />
I am just trying to reduce the line height within the following SVG:
https://jsfiddle.net/fahc2vvq/
I have to load in the XML version to edit the SVG within the website, Any ideas?
If you want a <foreignObject> to function correctly, you need to include a <body> element.
Note: I've removed the image from this demo to make it smaller.
<img src="http://elbrus.ecommercesuite.co.uk/Customisation Tool/SVG Templates/Bookmark.svg" />
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="73mm"
height="150mm"
viewBox="0 0 73 150"
version="1.1"
id="svg4523">
<g
id="layer1"
transform="translate(0,-147)">
<foreignObject
x="15"
y="150"
width="40"
height="60">
<body>
<p id="credit-card-text" style="font-size: 4px;text-align:center;text-anchor:middle;fill-opacity:1;font-weight:bold;line-height: 1;">Customise with your own message here.</p>
</body>
</foreignObject>
</g>
</svg>
I have certain images all in blogspot.com, and i want to append class name to it via Javascript which are under particular div.
for an instance :-
<div class="outer-post">
<img src="http://1.bp.blogspot.com/1.jpg" width="200" height="200" />
<!-- more images -->
<img src="http://1.bp.blogspot.com/100.jpg" width="200" height="200" />
</div>
and i want to convert all to :-
<div class="outer-post">
<img src="http://1.bp.blogspot.com/1.jpg" class="myPic" width="200" height="200" />
<!-- more images -->
<img src="http://1.bp.blogspot.com/100.jpg" class="myPic" width="200" height="200" />
</div>
Is this possible?
using jQuery $("div.outer-post img").addClass("myPic")
You can use .addClass()
$(selector).addClass(className);
As per your requirement use
$("div.outer-post img").addClass("myPic");
Edit: As per your comments use
$("div.outer-post").find("img").addClass("myPic");
JSFiddle Demo
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