* 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()...
Related
I've written a function that should produce a random image from an array in Javascript.
I'm wanting to execute the function with an html button. I've written the code but it doesn't work. The image should be directed to a flex box div.
Code
var myImages=
["https://picsum.photos/536/354","Images/IMG_4830.jpeg","Images/IMG_4338.jpeg",
"Images/IMG_4096.JPG"];
function randomImages(){
var rnd = Math.floor(Math.random()*myImages.length);
if(rnd == 0){
rnd = 1;
}
var image = document.createElement("img");
var div=document.getElementById("flex-box-create").src = myImages[rnd]
div.appendChild(image)
}
button = <div><button class="btn btn-primary" id="image-Generator"
onclick="randomImages()">Click</button></div>
thanks
The source should be set on the image not the div, try this:
var image = document.createElement("img");
image.src = myImages[rnd];
var div = document.getElementById("flex-box-create");
div.appendChild(image);
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;
I am able to render a tree using YAHOO.widget.TreeView yui 2.9.
Using pre made tags
<ul> <li> Products </li> </ul>
I am able to get the label i.e Products using node.label
YAHOO.util.Event.on('allProductSaveButton','click',function() {
var hiLit = rightProductTree.getNodesByProperty('highlightState',1);
if (YAHOO.lang.isNull(hiLit)) {
YAHOO.log("None selected");
} else {
var labels = [];
for (var i = 0; i < hiLit.length; i++) {
var node = hiLit[i];
if(node.children.length<=0) {
labels.push(hiLit[i].label); }
}
alert("Highlighted nodes:\n" + labels.join("\n"), "info", "example");
}
});
I want to insert id of the Products in the html and get the id of label as well. so where should I place id attribute inside or where?
I am not sure you can set your own id on the markup. TreeView is one of the oldest widgets in YUI 2 and it uses a particularly funny markup because the supported CSS styles in those days were quite pathetic, thus, what part of that funny markup are you going to apply that id to?
If what you want is to give a tree-node an identifier that you can later use to retrieve it, then use custom properties. Then, calling getNodesByProperty will allow you to retrieve the node by the value of that extra property.
I got a solution. I inserted the label element inside the span element that was inside the li element i.e
<ul>
<li> <span> <label id="444" > Product </label> </span>
</li>
</ul>
then using YAHOO.util.Dom I traversed and got the id attribute of label element.
YAHOO.util.Event.on('GroupsProductSaveButton', 'click', function() {
var hiLit = rightProductTree2.getNodesByProperty('highlightState', 1);
if (YAHOO.lang.isNull(hiLit)) {
alert("None selected");
} else {
var labels = [];
for (var i = 0; i < hiLit.length; i++) {
var node = hiLit[i];
if(node.children.length<=0) {
labels.push(YAHOO.util.Dom.get(hiLit[i].contentElId).getElementsByTagName('label')[0].getAttribute("value")); }
}
alert("Highlighted nodes:\n" + labels.join("\n"), "info", "example");
ProductGroupDWR.displaySelectedNodes(labels, function(data) {
});
}
});
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.
Aloha Stockoverflow.
In advance, thank you!
I am trying to modify my randomly changing background on my webpage, to add a FADE effect, so the change from 1 background to another is not so sudden and sharp.
I have tried to search through the web endlessly for a solution to my issue, but it all points towards adding a jQuery plugin which I would preferably avoid if it is possible.
My working code is as follows and needs to have added some kind of fadein / fadeout effect.
<script type="text/javascript">
var num;
var temp=0;
var speed=5000; /* this is set for 5 seconds, edit value to suit requirements */
var preloads=[];
/* add any number of images here */
preload(
'images/bg1.jpg',
'images/bg2.jpg',
'images/bg3.jpg',
'images/bg4.jpg',
'images/bg5.jpg'
);
function preload(){
for(var c=0;c<arguments.length;c++) {
preloads[preloads.length]=new Image();
preloads[preloads.length-1].src=arguments[c];
}
}
function rotateImages() {
num=Math.floor(Math.random()*preloads.length);
if(num==temp){
rotateImages();
}
else {
document.body.style.backgroundImage='url('+preloads[num].src+')';
temp=num;
setTimeout(function(){rotateImages()},speed);
}
}
if(window.addEventListener){
window.addEventListener('load',rotateImages,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',rotateImages);
}
}
</script>
Thank you very much for taking the time to look at it. :)
How to do it without plugins:
Use 2 layers for the background image, position them on top of each other.
Init the page with the first image on the bottom layer, make the top layer invisible (using CSS opacity property, make sure to Google this, different browsers use different approaches).
When fading:
Set the new image for the top layer.
Use a short, looping (frameduration < 40ms) setTimeout to increment the opacity of your top layer to 1. Use increments of 1/(speed/frameduration).
When comletely faded in, set the bottom layer to use the new (now visible) image, and set the top layer to opacity 0.
Like this:
<html>
<head>
<script type="text/javascript">
var num;
var current=0;
var speed=5000; /* this is set for 5 seconds, edit value to suit requirements */
var fps = 25;
var fadeDuration = 1000;
var opacityIncrement = 1/(fadeDuration/(1000/fps));
var preloads=[];
var topLayerOpacity = 0;
var topLayer = document.createElement("div");
var bottomLayer = document.createElement("div");
setOpacity(topLayer, 0);
/* add any number of images here */
preload(
'images/bg1.jpg',
'images/bg2.jpg',
'images/bg3.jpg',
'images/bg4.jpg'
);
function loadComplete(){
//add layers to background div
document.getElementById('backgroundContainer').appendChild(bottomLayer);
document.getElementById('backgroundContainer').appendChild(topLayer);
rotateImages();
}
function preload(){
//preload images
for(var c=0;c<arguments.length;c++) {
preloads[preloads.length]=new Image();
preloads[preloads.length-1].src=arguments[c];
}
}
// selecte new random image from preloads and start fade-in
function rotateImages() {
num=Math.floor(Math.random()*preloads.length);
//don't select current image
if(num==current){
rotateImages();
}
else {
topLayer.style.backgroundImage = 'url('+preloads[num].src+')';
current=num;
//start fade-in
fadeIn();
setTimeout(function(){rotateImages()},speed);
}
}
// fade in topLayer
function fadeIn(){
if (topLayerOpacity < 1){
topLayerOpacity += opacityIncrement;
setOpacity(topLayer, topLayerOpacity);// opacityIncrement);
setTimeout(fadeIn, 1000/fps);
}else{
fadeInComplete();
}
}
//return opacity for element
function getOpacity(el){
alert (el.style.opacity);
return el.style.opacity;
}
//sets opacity on element
function setOpacity(el, val){
el.style.opacity = val;
el.style.filter = 'alpha(opacity=' + val*100 + ')';
}
//called when fadeIn completed
function fadeInComplete(){
bottomLayer.style.backgroundImage = topLayer.style.backgroundImage;
topLayerOpacity = 0;
setOpacity(topLayer, topLayerOpacity);
}
if(window.addEventListener){
window.addEventListener('load',loadComplete,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',loadComplete);
}
}
</script>
<style type="text/css">
#backgroundContainer{
width:100%;
height:100%;
position:absolute;
/*background-color:green;*/
}
#backgroundContainer div{
width:100%;
height:100%;
position:absolute;
top:0;
}
.page {
width:100%;
text-align:center;
position:absolute;
}
.contents{
width:400px;
margin:0 auto;
background-color:lightblue;
}
</style>
</head>
<body>
<!-- holds background layers -->
<div id="backgroundContainer"></div>
<!-- substitutes for 'body' on this webpage -->
<div class="page">
<!-- contents for your webpage, through css centered within page-div -->
<div class="contents">
<p>Contents</p>
</div>
</div>
</body>
</html>
OR
Use jQuery/mootools/script.aculo.us/...
Best of luck!