I have made a character fighting simulation website, but when you enter in the image for a character, it just makes the image appear as flat and a wallpaper instead of the original resolution. The purpose of this was to test my knowledge of html after a few months of not using it, aswell as to test some features to see if I can incorporate it into another project later on.
This is my script:
<!DOCTYPE html>
<html>
<head>
<script>
document.addEventListener("DOMContentLoaded", function() {
var characterList = [];
var characterListDiv = document.createElement('div');
characterListDiv.id = 'characterListDiv';
document.body.appendChild(characterListDiv);
var characterNameInput = document.createElement('input');
characterNameInput.id = 'characterNameInput';
characterNameInput.placeholder = 'Character Name';
document.body.appendChild(characterNameInput);
var characterImageInput = document.createElement('input');
characterImageInput.id = 'characterImageInput';
characterImageInput.placeholder = 'Character Image URL';
document.body.appendChild(characterImageInput);
var addCharacterButton = document.createElement('button');
addCharacterButton.id = 'addCharacterButton';
addCharacterButton.innerHTML = 'Add Character';
addCharacterButton.onclick = function() {
var characterName = document.getElementById('characterNameInput').value;
var characterImage = document.getElementById('characterImageInput').value;
var character = {
name: characterName,
image: characterImage
};
characterList.push(character);
var characterDiv = document.createElement('div');
characterDiv.innerHTML = character.name;
characterDiv.style.backgroundImage = 'url(' + character.image + ')';
characterListDiv.appendChild(characterDiv);
};
document.body.appendChild(addCharacterButton);
var fightButton = document.createElement('button');
fightButton.id = 'fightButton';
fightButton.innerHTML = 'Fight';
fightButton.onclick = function() {
var characterListCopy = characterList.slice();
var fightResults = [];
while (characterListCopy.length > 1) {
var character1 = characterListCopy.pop();
var character2 = characterListCopy.pop();
var winner = Math.random() > 0.5 ? character1 : character2;
var loser = winner === character1 ? character2 : character1;
fightResults.push({
winner: winner,
loser: loser
});
characterListCopy.push(winner);
}
var fightResultsDiv = document.createElement('div');
fightResultsDiv.id = 'fightResultsDiv';
document.body.appendChild(fightResultsDiv);
fightResults.forEach(function(fightResult) {
var fightResultDiv = document.createElement('div');
fightResultDiv.innerHTML = fightResult.winner.name + ' beat ' + fightResult.loser.name;
fightResultsDiv.appendChild(fightResultDiv);
});
};
document.body.appendChild(fightButton);
});
</script>
</head>
</html>
I have tried messing with the image section but nothing changes. Google doesn't help me.
If you mean that the whole image is not shown, then the cause is that a background image just uses the size of the div and not the size of the image.
You could solve that by giving the div a fixed height. You can also adjust the background size so that it always fills the whole div (cover) or shows the whole image (contain).
characterDiv.style.backgroundImage = 'url(' + character.image + ')';
characterDiv.style.height = "300px";
characterDiv.style.backgroundSize = "cover";
Related
I got a working function, but i think it should become a lot smaller and better but i aint seeing it. can someone help me improve this function make it better:
I am making a new li-item in a unordered list. in there there is omse info in 3 divisions who get a class making them float left to eachother.
this is the code i used, its all listed out, it can probly be make a lot better, and i hope to learn to refactor my code more, so help is apriciated.
// making new li item inn <ul>
function addproduction(){
// getting info from form
var startdatum_form = document.getElementById('startdatum').value;
var uren_form = document.getElementById('uren').value;
var ordernummer_form = document.getElementById('ordernummer').value;
// new li element
var newli = document.createElement('li');
newli.setAttribute('class', 'ui-state-default');
var div1 = document.createElement('div');
div1.setAttribute('class', 'div1');
var sortableicon = document.createElement('span');
sortableicon.setAttribute('class', 'ui-icon ui-icon-arrowthick-2-n-s');
// count current li elements in UL:
var number = 0;
var ullist = document.getElementById('sortable');
for(i=0;i< ullist.childNodes.length;i++){
if(ullist.childNodes[i].nodeName=='LI'){
number++;
}
}
newli.setAttribute('id', 'p'+(number+1));
// text node (item x)
var nrText = document.createTextNode('Item ' + (number+1));
div1.appendChild(sortableicon)
div1.appendChild(nrText);
var div2 = document.createElement('div');
div2.setAttribute('class', 'div1');
var indiv1 = document.createElement('div');
indiv1.appendChild(document.createTextNode('Title'));
var indiv2 = document.createElement('div');
indiv2.appendChild(document.createTextNode('Start'));
var indiv3 = document.createElement('div');
indiv3.appendChild(document.createTextNode('End'));
var indiv4 = document.createElement('div');
indiv4.appendChild(document.createTextNode('Uren'));
div2.appendChild(indiv1);
div2.appendChild(indiv2);
div2.appendChild(indiv3);
div2.appendChild(indiv4);
var div3 = document.createElement('div');
div3.setAttribute('class', 'div3');
var indiv5 = document.createElement('div');
indiv5.appendChild(document.createTextNode(ordernummer_form));
var indiv6 = document.createElement('div');
indiv6.appendChild(document.createTextNode(startdatum_form));
var indiv7 = document.createElement('div');
indiv7.appendChild(document.createTextNode('end'));
var indiv8 = document.createElement('div');
indiv8.appendChild(document.createTextNode(uren_form));
div3.appendChild(indiv5);
div3.appendChild(indiv6);
div3.appendChild(indiv7);
div3.appendChild(indiv8);
newli.appendChild(div1);
newli.appendChild(div2);
newli.appendChild(div3);
// add new production to list
document.getElementById('sortable').appendChild(newli);
saveNewEntry( (number+1), ordernummer_form, startdatum_form, uren_form );
}
A small example which could be applied to other parts of your code as well
var startdatum_form = document.getElementById('startdatum').value;
var uren_form = document.getElementById('uren').value;
var ordernummer_form = document.getElementById('ordernummer').value;
could be
var startdatum_form = get_value('startdatum');
var uren_form = get_value('uren');
var ordernummer_form = get_value('ordernummer');
function get_value( field ) {
return document.getElementById(field).value;
}
I have created an application where elements from the toolbox can be dragged and dropped onto a canvas and their properties can be set as soon as they are dropped. But, I have an instance where when the "stream ui-draggable" element is dropped on the canvas I disable the canvas and the toolbox and display a properties panel where the user can select a predefined stream for the newly dropped element and also give it another name under the "as : " text field. This name should then replace the currently displayed- disabled name "Element" with the name provided bu the user. Is there a way that I can replace this text in the dropped element.
js function:
drop: function (e, ui) {
var dropElem = ui.draggable.attr('class');
droppedElement = ui.helper.clone();
ui.helper.remove();
$(droppedElement).removeAttr("class");
jsPlumb.repaint(ui.helper);
if(dropElem=="stream ui-draggable")
{
var newAgent = $('<div>').attr('id', i).addClass('streamdrop');
//alert("newAgent ID: "+newAgent.attr('id'));
clickedId = newAgent.attr("id");
alert("clicked ID: "+i);
createStreamForm();
$("#container").addClass("disabledbutton");
$("#toolbox").addClass("disabledbutton");
$(droppedElement).draggable({containment: "container"});
var prop = $('<a class="streamproperty" onclick="doclick(this)"><b><img src="../Images/settings.png"></b></a> ').attr('id', (i));
var finalElement= newAgent.text("Element").append('<a class="boxclose" id="boxclose"><b><img src="../Images/Cancel.png"></b></a> ').append(prop);
//Increment the Element sequence number
i++; r++; q++;
var l = ($(finalElement).attr('id'));
alert("Final elm id: "+finalElement.attr('id'));
var connection = $('<div>').attr('id', l + '-' + q).addClass('connection');
finalElement.css({
'top': e.pageY,
'left': e.pageX
});
finalElement.append(connection);
$('#container').append(finalElement);
jsPlumb.draggable(finalElement, {
containment: 'parent'
});
jsPlumb.makeTarget(connection, {
anchor: 'Continuous'
});
jsPlumb.makeSource(connection, {
anchor: 'Continuous'
});
}
The createStreamForm() function:
var importDiv, iStreamtype, br, istreamlbl, istreamtypelbl, iPredefStreamdiv, istreamDefLineDiv, istreamDefDivx, istreamName, importbtn;
var exportDiv,eStreamtype, estreamlbl, estreamtypelbl, ePredefStreamdiv, estreamDefLineDiv, estreamDefDivx, estreamName, exportbtn;
var streamDiv, streambtn;
var definestreamdiv,inputval;
function createStreamForm()
{
$(".toolbox-titlex").show();
$(".panel").show();
//For the Import Form
importDiv = document.createElement("div");
iStreamtype = document.createElement("div");
br = document.createElement("br");
istreamlbl = document.createElement("label");
istreamtypelbl = document.createElement("label");
iPredefStreamdiv = document.createElement("div");
istreamDefLineDiv = document.createElement("div");
istreamDefDivx = document.createElement("div");
istreamName = document.createElement("input");
importbtn = document.createElement("button");
importDiv.className = "importdiv";
importDiv.id = "importdiv";
istreamlbl.className = "lblfloat-left";
br.className = "br-div";
istreamlbl.innerHTML = "Stream:";
iPredefStreamdiv.id = "PredefinedStream1";
istreamDefDivx.className = "streamDefDiv";
istreamDefDivx.id = "streamDefLineDiv";
istreamName.className = "panel-input-streamName";
istreamName.id = "istreamName";
istreamName.placeholder = "as : ";
importbtn.type = 'button';
importbtn.innerHTML = "Import";
importbtn.className = "btn-import";
importbtn.setAttribute("onclick","storeImportStreamInfo()");
importDiv.appendChild(iStreamtype);
importDiv.appendChild(istreamlbl);
importDiv.appendChild(istreamtypelbl);
importDiv.appendChild(iPredefStreamdiv);
importDiv.appendChild(br);
importDiv.appendChild(istreamDefLineDiv);
importDiv.appendChild(istreamDefDivx);
importDiv.appendChild(br);
importDiv.appendChild(istreamName);
importDiv.appendChild(br);
importDiv.appendChild(importbtn);
importDiv.appendChild(br);
//For the Export Form
exportDiv = document.createElement("div");
eStreamtype = document.createElement("div");
br = document.createElement("br");
estreamlbl = document.createElement("label");
estreamtypelbl = document.createElement("label");
ePredefStreamdiv = document.createElement("div");
estreamDefLineDiv = document.createElement("div");
estreamDefDivx = document.createElement("div");
estreamName = document.createElement("input");
exportbtn = document.createElement("button");
exportDiv.className = "exportdiv";
exportDiv.id = "exportdiv";
estreamlbl.className = "lblfloat-left";
estreamlbl.innerHTML = "Stream:";
ePredefStreamdiv.id = "PredefinedStream2";
estreamDefDivx.className = "streamDefDiv";
estreamDefDivx.id = "streamDefLineDiv";
estreamName.className = "panel-input-streamName";
estreamName.id = "panel-input-streamName";
estreamName.placeholder = "as : ";
exportbtn.type = 'button';
exportbtn.innerHTML = "Export";
exportbtn.className = "btn-export";
exportDiv.appendChild(estreamlbl);
exportDiv.appendChild(estreamtypelbl);
exportDiv.appendChild(ePredefStreamdiv);
exportDiv.appendChild(br);
exportDiv.appendChild(estreamDefLineDiv);
exportDiv.appendChild(estreamDefDivx);
exportDiv.appendChild(br);
exportDiv.appendChild(estreamName);
exportDiv.appendChild(br);
exportDiv.appendChild(exportbtn);
exportDiv.appendChild(br);
//For the Stream Form
streamDiv = document.createElement("div");
streambtn = document.createElement("button");
definestreamdiv = document.createElement("div");
inputval = document.createElement("div");
streambtn.type = 'button';
streamDiv.className = "streamdiv";
streamDiv.id = "streamdiv";
streambtn.innerHTML = "Define Stream";
streambtn.className = "btn-define-stream";
streambtn.setAttribute("onclick","createattribute()");
//inputval.innerHTML = "Provide a Stream name and click to add attribute-type pairs to yours stream.";
streamDiv.appendChild(streambtn);
definestreamdiv.appendChild(inputval);
lot.appendChild(importDiv);
createattr();
lot.appendChild(exportDiv);
lot.appendChild(streamDiv);
lot.appendChild(definestreamdiv);
}
storeImportStreamInfo() Function:
var clickcount=1;
function storeImportStreamInfo()
{
var choice=document.getElementById("streamSelect");
var selectedStream = choice.options[choice.selectedIndex].text;
var asName= document.getElementById("istreamName").value;
var StreamElementID = clickcount;
clickcount++;
createdImportStreamArray[clickedId][0]=StreamElementID;
createdImportStreamArray[clickedId][1]=selectedStream;
createdImportStreamArray[clickedId][2]=asName;
y++;
}
Solved it by passing the newly dropped jsPlumb object to the storeImportStreamInfo() as parameters and set the text within the method. Also this parameter needs to be carried through all the functions through which it progresses before achieving the storeImportStreamInfo() method.
Eg:
function createStreamForm(newAgent,i)
within this function->
importbtn.onclick = function() {
storeImportStreamInfo(newAgent,i);
}
and so on. In the storeImportStreamInfo() function, I've added the lines that append the icons and the text to the dropped Element.
var prop = $('<a class="streamproperty" onclick="doclick(this)"><b><img src="../Images/settings.png"></b></a> ').attr('id', (i));
newAgent.text(asName).append('<a class="boxclose" id="boxclose"><b><img src="../Images/Cancel.png"></b></a> ').append(prop);
I ran into a very surprising behaviour and I can't figure out what it comes from : I build 3 nested blank iframes in javascript but the third one is invisible.
Tested in Chrome. Here is the code : (https://jsfiddle.net/44uL3bku/)
(function() {
var i1 = document.createElement('iframe');
i1.width = 315;
i1.height = 300;
i1.addEventListener('load', function() {
this.contentDocument.body.innerHTML = 'IFRAME 1<br>';
var i2 = this.contentDocument.createElement('iframe');
i2.width = '100%';
i2.height = '100%';
i2.addEventListener('load', function() {
this.contentDocument.body.innerHTML = 'IFRAME 2<br>';
var i3 = this.contentDocument.createElement('iframe');
i3.width = '100%';
i3.height = '100%';
i3.addEventListener('load', function() {
this.contentDocument.body.innerHTML = 'IFRAME 3<br>';
});
this.contentDocument.body.appendChild(i3);
var i4 = this.contentDocument.createElement('iframe');
i4.width = '100%';
i4.height = '100%';
i4.addEventListener('load', function() {
this.contentDocument.body.innerHTML = 'IFRAME 3<br>';
});
this.contentDocument.body.appendChild(i4);
var bottom = document.createElement('div');
bottom.innerHTML = 'bottom';
this.contentDocument.body.appendChild(bottom);
});
this.contentDocument.body.appendChild(i2);
});
document.body.appendChild(i1);
})();
Just to be clear : the DOM tree is properly set, and the "IFRAME 3" is actually there. But it is just not displayed.
Also it only concerns blank iframes. As soon as there is a regular src everything works fine again.
Any idea ?
Thank you all !
This is my code:
var i;
var pic = document.getElementById('image');
var picSrc = pic.src;
var fullSrc = picSrc.split('h.jpg')[0] + '.jpg';
pic.src = fullSrc;
document.getElementById('next').onmousedown = function () {
i = 0;
// it works up to here
pic.addEventListener("DOMAttrModified", function(event) {
if (i == 0 && event.attrName == "src") {
pic = document.getElementById('image');
i = 1; // this is to prevent endless loop
picSrc = pic.src;
fullSrc = picSrc.split('h.jpg')[0] + '.jpg';
pic.src = fullSrc;
}
});
return true;
};
It should work on imgur's horizontal layout albums, and replace the low-res images with full-res ones, one image at a time (currently displayed image).
On click of the "next" button, a new image is displayed. However, the script does not load the next full-res image. It only works with the first image loaded.
You're messing up your scope completely, invalidating the entire code after the first run. This should also pop up more than enough errors in your console. Reshuffle assignments to the right spot:
document.getElementById('next').onmousedown = function () {
var i;
var pic = document.getElementById('image');
var picSrc = pic.src;
var fullSrc = picSrc.split('h.jpg')[0] + '.jpg';
pic.src = fullSrc;
pic.addEventListener("DOMAttrModified", function(event) {
if (i == 0 && event.attrName == "src") {
pic = document.getElementById('image');
i = 1; // this is to prevent endless loop
picSrc = pic.src;
fullSrc = picSrc.split('h.jpg')[0] + '.jpg';
pic.src = fullSrc;
}
});
return true;
};
Depending on how the page works specifically (I can't see without having a real world use case) you might have to reassign the entire mousedown event as well.
On every mousedown you are adding a new DOMAttrModified event listener.
Try arranging your code to something like following:
var pic = document.getElementById('image');
var i;
pic.addEventListener("DOMAttrModified", function(event) {
if (i == 0 && event.attrName == "src") {
//pic = document.getElementById('image');
i = 1; // this is to prevent endless loop
picSrc = pic.src;
fullSrc = picSrc.split('h.jpg')[0] + '.jpg';
pic.src = fullSrc;
i = 0;
});
document.getElementById('next').onmousedown = function () {
var picSrc = pic.src;
var fullSrc = picSrc.split('h.jpg')[0] + '.jpg';
pic.src = fullSrc;
});
You should also try using the addEventListener instead of onmousedown
I am trying to make a debugger that will be dynamiaclly created with some variables. The names on the left div need to show a div for the corresponding variables Description,Variable ID, and initial Value as well as another div that will show history and lock status when variables are updated later. Where I am having trouble is properly adding the show/hide to the dom I think. Everything starts hidden and then when I click a name the Variables for that name show up but the next click doesn't hide the values from the former. Also any cleanup/optimization advice?
<script type="text/javascript">
var variableIDArray = {};
function loadVariables(variables) {
if (typeof variables != "object") { alert(variables); return; }
var namearea = document.getElementById('namearea');
var description = document.getElementById('description');
var varid = document.getElementById('varid');
var initialvalue = document.getElementById('initialvalue');
var valuelock = document.getElementById('valuelock');
for (var i = 0; i < variables.length - 1; i++) {
var nameDiv = document.createElement('div');
nameDiv.id = variables[i].variableID + "namearea";
nameDiv.className = "nameDiv";
nameDiv.onclick = (function (varid) {
return function () { showvariable(varid); };
})(variables[i].variableID);
nameDiv.appendChild(document.createTextNode(variables[i].name));
namearea.appendChild(nameDiv);
var descriptionDiv = document.createElement('div');
descriptionDiv.id = variables[i].variableID + "description";
descriptionDiv.className = "descriptionDiv";
descriptionDiv.appendChild(document.createTextNode("Description : " + variables[i].description));
description.appendChild(descriptionDiv);
var varidDiv = document.createElement('div');
varidDiv.id = variables[i].variableID + "varid";
varidDiv.className = "varidDiv";
varidDiv.appendChild(document.createTextNode("Var ID : " + variables[i].variableID));
varid.appendChild(varidDiv);
var initialvalueDiv = document.createElement('div'); ;
initialvalueDiv.id = variables[i].variableID + "initialvalue";
initialvalueDiv.className = "initialvalueDiv";
initialvalueDiv.appendChild(document.createTextNode("Initial Value : " + variables[i].value));
initialvalue.appendChild(initialvalueDiv);
var valuelockDiv = document.createElement('div');
valuelockDiv.id = variables[i].variableID + "valuelock";
valuelockDiv.className = "valuelockDiv ";
valuelockDiv.appendChild(document.createTextNode("Value : " + variables[i].value));
valuelockDiv.appendChild(document.createTextNode("Lock : " + variables[i].locked.toString()));
valuelock.appendChild(valuelockDiv);
variableIDArray[variables[i].variableID];
}
};
function showvariable(varid) {
for (v in variableIDArray)
hide(variableIDArray[v]);
show(varid + "description");
show(varid + "varid");
show(varid + "initialvalue");
show(varid + "valuelock");
}
function show(elemid) {
document.getElementById(elemid).style.display = "block";
}
function hide(elemid) {
document.getElementById(elemid).style.display = "none";
}
Yes. jQuery. Will reduce your code to about 6 lines. :) http://jquery.com