Im creating a web app and would like to know why the following code is not working. It first creates a element which is then added to the body. I then create another Div element which i would like to place inside the first div element that i created.
Im using MooTools classes to create and initialize objects and it works fine but i just cant seem to get the following code to work. The code is inside aninitialize: function() of a class:
this.mainAppDiv = document.createElement("div");
this.mainAppDiv.id = "mainBody";
this.mainAppDiv.style.width = "100%";
this.mainAppDiv.style.height = "80%";
this.mainAppDiv.style.border = "thin red dashed";
document.body.appendChild(this.mainAppDiv); //Inserted the div into <body>
//----------------------------------------------------//
this.mainCanvasDiv = document.createElement("div");
this.mainCanvasDiv.id = "mainCanvas";
this.mainCanvasDiv.style.width = "600px";
this.mainCanvasDiv.style.height = "400px";
this.mainCanvasDiv.style.border = "thin black solid";
document.getElementById(this.mainAppDiv.id).appendChild(this.mainCanvasDiv.id);
As you can see it first creates a div called "mainBody" and then appends it the document.body, This part of the code works fine. The problem comes from then creating the second div and trying to insert that usingdocument.getElementById(this.mainAppDiv.id).i(this.mainCanvasDiv.id);
Can anyone think of a reason the above code does not work?
Instead of:
document.getElementById(this.mainAppDiv.id).appendChild(this.mainCanvasDiv.id);
Just do:
this.mainAppDiv.appendChild(this.mainCanvasDiv);
This way you are appending the mainCanvesDiv directly to the mainAppDiv. There is no need to getElementById if you already have a reference to an element.
Do like this:
this.mainAppDiv.appendChild(this.mainCanvasDiv);
why do you use mootools yet revert to vanilla js?
this.mainAppDiv = new Element("div", {
id: "mainBody",
styles: {
width: "100%",
height: "80%",
border: "thin red dashed"
}
});
this.mainCanvasDiv = new Element("div", {
id: "mainCanvas",
styles: {
width: 600,
height: 400,
border: "thin black solid"
}
}).inject(this.mainAppDiv);
this.mainAppDiv.inject(document.body);
Related
I need to render an image on which I have put some HTML text on it and then the user to be able to download the image with the text as an image or even better as a pdf.
The certText element is taken from a TinyMCE variable, where the user each time uses different HTML tags within the text.
So it could be
"Hello user, how are you"
or
"Hi there, great that you succeed on the certification".
Starting from the image option I have created below code but Canvas do no translate the HTML tags.
I have read that with Canvas it's not possible to render the HTML tags, but is there any other alternative to succeed this.
The code is used on a Laravel project that I have made.
var p = document.getElementById("certificate");
var ptx = p.getContext("2d");
var imgp = document.getElementById("certificateEmpty");
var txtp = document.getElementById("certText").innerHTML;
imgp.onload = function(){
ptx.drawImage(imgp, 0, 0);
ptx.font = "48px Nunito";
ptx.fillText(txtp, 150, 1000);
};
imgp.src = "{{$attendees[0]->certBLocation}}";
What are you trying to achive when you say "render html tags"?
Do you mean you want to style the text that is drawn on the canvas?
If so, you have to use canvas functions to set what the text will look like.
In the below example using your code, I use "fillStyle" to set the drawing fill colour in which the text will be drawn.
var p = document.getElementById("certificate");
var ptx = p.getContext("2d");
var imgp = document.getElementById("certificateEmpty");
var txt = document.getElementById("certText");
var txtp = txt.innerHTML;
imgp.onload = function(){
ptx.drawImage(imgp, 0, 0, p.width, p.height);
var styles = window.getComputedStyle(txt);
ptx.fillStyle = styles.color;
//ptx.font = styles.font; // Doesn't seem to work in firefox.
ptx.font = styles['font-weight']+" "+styles['font-size']+" "+styles.fontFamily; // Access properties array style because of hyphens.
ptx.fillText(txtp, 0, 100);
};
imgp.src = "https://www.gravatar.com/avatar/7b67c827ee1671ba3b43f4aebf6794fb?s=200";
img, canvas {
width: 200px;
height: 200px;
}
#certText {
color: #ff0000;
font-weight: bold;
font-size: 40px;
}
<img id="certificateEmpty"/>
<canvas id="certificate"></canvas>
<div id="certText">
some text
</div>
Text drawn on the canvas looks squashed on my screen (Ubuntu/Chrome), not sure why.
Can you add attributes to an element within an append, something like this:
var video = $("<video>").append("<source>", {
src: 'https://www.youtube.com/',
width: 100,
height: 200
});
I'm asking because I think I have seen something like this before, but can't quite remember how it was written. I know you can do this with jQuery and attr(), but I'm looking for a way without using attr() or similar methods.
I think it was written with jQuery, but might have been something like underscorejs aswell, I'm not sure. Anyone know?
You're close, but missing the jQuery wrapper when creating the child element:
var video = $("<video />").append($("<source />", {
src: 'https://www.youtube.com/',
width: 100,
height: 200
}));
No but what you can is:
var video = $("<video />");
$("<source />", {
src: 'https://www.youtube.com/',
width: 100,
height: 200,
appendTo : video
});
I have created multiple iframes, and for printing all of them together, I want to append those to one div, so that it can be used for printing. Could you please provide JavaScript or jQuery code for accessing code.
Code for creating iframe dynamically at run-time
var contentDiv = document.createElement("contentDiv" + count++);
var iframe = $('<iframe>', {
src: 'blank.htm',
id: 'printFrame',
frameborder: '0',
border: '0',
width: '100%',
height: '100%',
scrolling: 'no'
}).appendTo(contentDiv);
var frameNode = contentDiv.lastElementChild;
frameNode.setAttribute("src", url.getURL());
var printFrameDiv = document.getElementById("printContentDiv");
$(printFrameDiv).append(contentDiv);
Code for Printing the content
function onPrint(){
document.getElementById('printTag').hidden = true;
var dummyContent = document.getElementById("printContentDiv");
var iFrame = document.getElementById("printFrame");
dummyContent.innerHTML = iFrame.contentWindow.document.body.innerHTML;
window.print();
window.parent.closeMe();
}
This code currently printing only first iframe I have created dynamically.
how to make picture fly to the browser window and then fade out. I need that one picture fly into the browser window from left side,and then fade out. and then next picture. I have five picture. I need them do this one by one, over and over. Followed is my code: It is not work fine.
Method 1: Five pictures in five and with id as "#Slogan0", "#Slogan1", ...,etc. At the beginning, "left" is "-1000px", and the first one is "display" as "block", the others "none", so that I can change them to make them disappear."moveNext" is to change pictures.
var sloganidPre = "#Slogan";
var slogannum = 0;
sloganid = sloganidPre + slogannum;
window.onload = function(){
moveNext();
}
function moveNext(){
cf.moveTo("next");
if($(sloganid).css("display") == "block") {
slogannum = (slogannum+1)%5;
$(sloganid).css("display","none");
sloganid=sloganidPre+slogannum;
$(sloganid).css("display","block");
$(sloganid).animate({left:"30px"});
$(sloganid).css("opacity","0.2");
}
setTimeout(moveNext, 1500);
}
Method2:
Create new element to the parent node.
var sloganidPre = "Slogan";
var slogannum = 0;
var sloganid = "#"+sloganidPre + slogannum;
window.onload = function(){
$("#sloganparent").append("<div id=\""+sloganid+"\" style=\"width:744px;height:296px;position:absolute;left:-1000px;border:1px solid #0FF;overflow:hidden;display:block;\"\"><img src=\"img/"+sloganidPre+slogannum+".png\" /></div>");
$(sloganid).animate({left:'30px',opacity:'0.2'});
moveNext();
}
function moveNext(){
cf.moveTo("next");
$("#sloganparent:first-child").empty();
slogannum = (slogannum+1)%5;
sloganid= "#"+sloganidPre+slogannum;
$("#sloganparent").append("<div id=\""+sloganid+"\" style=\"width:744px;height:296px;position:absolute;left:-1000px;border:1px solid #0FF;overflow:hidden;\"><img src=\"img/"+sloganidPre+slogannum+".png\" /></div>");
var i=0;
for (i=-1000; i<30; i++) {
document.getElementById(new String(sloganid)).style.left= new String("\""+i+"px\"");
}
setTimeout(moveNext, 1500);
}
Jquery seems not to get the element which is created dynamically. Two methods are not work fine. Anyway I just want to know how to deploy the pictures as the titile said. Any method is fine. tks for ur consideration.
I am attempting to style a hover state of a variable I have created. I'm pretty new to javascript, so hopefully one of you can help me out.
here is the script:
controlDiv.style.padding = '5px';
var controlUI = document.createElement('DIV');
controlUI.style.height = '19px';
controlUI.style.backgroundColor = '#F9F9F9';
controlUI.style.background = 'linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%)';
controlUI.style.boxShadow = '2px 2px 2px 1px #999';
controlUI.style.borderRadius = '2px';
controlUI.style.borderStyle = 'solid';
controlUI.style.borderWidth = '1px';
controlUI.style.borderColor = '#9BADCF';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click Me';
controlDiv.appendChild(controlUI);
what I am wanting to do is to write script to set different style properties for the div created by the variable controlUI, when the mouse hovers over said div.
Since you are working purely with JavaScript, instead of with CSS, you will need to do this the hard way, namely with events. With jQuery, it would be:
$(controlUI).hover(
function onMouseEnter() {
this.style.backgroundColor = "blue";
},
function onMouseLeave() {
this.style.backgroundColor = "#F9F9F9";
}
);
Without jQuery, you would need to use DOM events, which is a pain because they are not cross-browser compatible with IE less than 9, as discussed extensively in this MDC article. The code ends up looking something like:
var crossBrowserAEL = controlUI.addEventListener ? "addEventListener" : "attachEvent";
controlUI[crossBrowserAEL]("mouseover", function () {
controlUI.style.backgroundColor = "blue";
});
controlUI[crossBrowserAEL]("mouseout", function () {
controlUI.style.backgroundColor = "#F9F9F9";
});
Try to avoid setting inline styles
Setting inline styles is very bad practice because it's hard to maintain while you have to look inside code to decipher where certain styles are set. I'm not even trying to touch browser differences that may become a real pain if you'll be using pure DOM+Javascript.
A better approach: use CSS classes
Instead of setting particular individual styles on your created element (and writing several lines of code) it's much simpler and better to just apply a CSS class to your element:
controlDiv.className = "some-class";
and then define everything about this class in the CSS file that defines all styles. This will also make it very simple to define related styles (like hover, visited, ::before etc.)