i have an embedded SVG, using js to change 20 path fill colors, all having the same class.
<script>
function svgMod(){
//var links = document.getElementById("tornado5").getSVGDocument().
// getElementsByClassName('SVGlogo');
var links = document.getElementById("tornado5").contentDocument.
getElementsByClassName('SVGlogo');
for (var i=0;i<links.length;i++) { links[i].style.fill="00ff00"; }
}
</script>
<object type="image/svg+xml" id="tornado5" data="bitmaps/frames/tornado2.svg">
</object> <!-- cant use img -->
<button onclick="svgMod();" >Click to change</button>
It works in Chrome, but not firefox.
ive tried both contentDocument and getSVGDocument(), but no help. links.length is 20, even in firefox, so the problem seems to be in links[i].style.fill
any ideas?
Can you try changing this line:
for (var i=0;i<links.length;i++) { links[i].style.fill="00ff00"; }
to this:
for (var i=0; i < links.length; i++) {
links[i].setAttribute("fill", "#00ff00");
}
OR
for (var i=0; i < links.length; i++) {
links[i].style.fill = "#00ff00";
}
Hope this helps.
Related
I'am trying to use Highchart in my MVC project.
I set containerId name for placing chart on the page, using next code:
#model MyProjectModel
#using Highsoft.Web.Mvc.Charts;
...
for (int i = 0; i < Model.Machines.Count; i++)
{
<div id="#Model.Machines[i].containerName"></div>
#(Html.Highsoft().Highcharts(
new Highcharts ({...}, Model.Machines[i]);
}
and Chart don't place in div
but then I set containerId next way
...
new Highcharts({...}, "container");
...
It's ok.
How I can set containerId in code?
Thank's for help
Perhaps I'm wrong, but why the div id is set as id="#Model.Machines[i].containerName" and then you are passing just Model.Machines[i] to Highcharts constructor? Try to provide the containerName:
#model MyProjectModel
#using Highsoft.Web.Mvc.Charts;
...
for (int i = 0; i < Model.Machines.Count; i++)
{
<div id="#Model.Machines[i].containerName"></div>
#(Html.Highsoft().Highcharts(
new Highcharts ({...}, Model.Machines[i].containerName);
}
i new start a video in a specific position when the web is loading, i get the position using a eloquent var coming from the controler.
I also use jquery for other functions in the same view.
I have checked the variables arrive correctly so I do not know where is the error.
The strange thing is this method only works if I show a alert popup before in firefox. (not work in chrome or other browser).
This is my code:
<video id="video" style="display:none; width:100%; height:100%;" autoplay>
<source src="/files/convert/videos/{{$moviesNow->url}}" type="video/mp4" />
Su navegador no soporta el tag video.
</video>
<script>
var vid = document.getElementById("video");
var time = {{$difTime}};
var isPlaying = {{$playNow}};
var moviesArr = [];
};
var j = jQuery.noConflict();
j(document).ready(function() {
if(time >= 0 && isPlaying == 1){
//vid.currentTime = time;
}
});
function setCurTime() {
vid.currentTime = time;
};
</script>
Also i trying use:
document.getElementById('video').addEventListener('loadedmetadata', function() {
this.currentTime = time;
}, false);
But the problem is not solved.
The loadedmetadata event is helpful, but it doesn't ensure that the section of video you are trying to access is seekable yet. You could try a simpler solution using Media Fragments:
Just add #t=120 to the end of the video url to have it auto-forward to that spot. Like this:
video {
height: 180px;
width: 320px;
}
<video src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4#t=120" controls autoplay></video>
I'm creating the the image cropper by using fengyuanchen cropper library it is work as well but I want to use it for multiples images as the below screenshot But it'm simply difficult for me to reinitialize this plugin because it support only one avata images.
CropperJs supports that feature.
You can do it in javascript like this:
<script>
window.addEventListener('DOMContentLoaded', function () {
var images = document.querySelectorAll('img');
var length = images.length;
var croppers = [];
var i;
for (i = 0; i < length; i++) {
croppers.push(new Cropper(images[i]));
}
});
</script>
This code snippet could be found on the official Github repository
https://github.com/fengyuanchen/cropperjs/blob/35c6ce5bc345317c1acfb39e1ceab8af6dee1247/examples/multiple-croppers.html
A button is clicked to trigger LoadImages method to load a series of pictures into the web page. I want to add an onclick event for each picture so when user click it, the picture name is displayed. How to use Dojo to achieve this?
LoadImages(PictureNames){
var resultUl = new Builder('<ul />');
for (i = 0; i < PictureNames.length; i++){
resultUl.append('<li><img id=' + PictureNames[i] + ' src="./images/' + PictureNames[i] + '.jpg" height="200" width="250" class="photo"/></li>');
}
dom.byId('Pictures').innerHTML = resultUl;
}
DisplayPictureName(picturename)
{
dom.byId('PictureName').value = picturename;
}
<label id="PictureName">here displays picture name</label>
<div id="Pictures"></div>
Make the elements using dojo/dom-construct and attach events using dojo/on.
var resultUl = domConstruct.create('ul');
for (i = 0; i < PictureNames.length; i++){
var image= domConstruct.create('img', {
id: PictureNames[i]',
src: "./images/"+ PictureNames[i],
style: {"height: 200px; width: 250px"},
class: "photo"});
var li= domConstruct.create('li');
domConstruct.place(li, resultUl);
domConstruct.place(image, li);
dojo.on(image, 'click', this.DisplayPictureName());
}
dom.byId('Pictures').innerHTML = resultUl;
* problem solved please ignore *
I'm trying to remove and add images with D3.js, and I cannot figure out how to add. Grateful for an idea where I'm going wrong. Here is the jsfiddle and code below:
html
<h3>Click on the images - they should be replaced by new ones</h1>
<div id="image_gallery">
<img class="image_gallery" src="http://imgs.xkcd.com/comics/weather.png" width="200" height="300"/>
<img class="image_gallery" src="http://imgs.xkcd.com/comics/rejection.png" width="200" height="300"/>
</div>
javascript
var data = [
["http://imgs.xkcd.com/comics/protocol.png", "http://imgs.xkcd.com/comics/walmart.png"],
["http://imgs.xkcd.com/comics/theft.png", "http://imgs.xkcd.com/comics/questions_for_god.png"]
];
var image_gallery = d3.select("#image_gallery").on("mousedown", function () { transition();});
var index = 0;
function transition() {
image_gallery.remove();
for (var i = 0; i < data[index].length; i++) {
image_gallery.append("img").attr("class", "image_gallery").attr("src", data[index][i])
.attr("width", 200).attr("height", 300);
}
index++;
d3.select("body").append("h3").text("but they aren't");
}
OK figured it out. image_gallery.remove() needs to be image_gallery.selectAll("img").remove()...