cannot load <img> to <div> - javascript

I'm implementing as simple image gallery.
This is what I got for now
function init(){
var elem = document.createElement("img");
elem.scr='upload/creative-design-modern-furniture.jpg';
elem.setAttribute("height", "768");
elem.setAttribute("width", "1024");
elem.setAttribute("alt", "furniture");
document.getElementById("imagegal").appendChild(elem);
}
<body onload='init();'>
<div id="imagegal" ></div>
Now, I know this is easy, but I dont get any errors in the console.
I see a white square with the word "furniture" inside (the alt text). I dont see the image.
The folder "upload" that contains all the images is inside the file that contains the script files (apache/htdocs/myproject/upload)
The images get uploaded by the user using website's interface. In the "upload" file, all the thumbs of the images have a little golden padlock on the side. What is that? What symbolizes? I dont know
Any help/tips?
Thanks in advance
EDIT
Yes , it was a typo. Thanks guys. I guess I deserve the down votes
But, anyway, whats with the golden padlock on the side of every thumbnail?
Thanks again


you have a typo in your code:
elem.src='upload/creative-design-modern-furniture.jpg';
// ^---- was 'scr' in your code


You have made typo
elem.scr='upload/creative-design-modern-furniture.jpg';
should be
elem.src='upload/creative-design-modern-furniture.jpg';


You have probably made a typo, using scr="..." instead of src="....".
I highly suggest that you use some element inspectors in browsers such as firebug (Mozilla Firefox), DragonFly (Opera) or Chrome built-in tool to check how the code is finally formed in the page when loaded and easily locate those types of errors. They are easy to use, they allow you to test and make such modifications in html/js/css on-the-fly and they can save you a lot of time.


You have a typo when you're setting the source. Instead of elem.scr it should be elem.src.

Related

Proper usage of <script language="javascript" type="text/javascript">

So, Im currently developing a prototype system for a requirement in my degree.
My question is how do you use the code ? it seems like it only caters to one html file that I originally coded it.
To be more specific:
I already called the code to power my real time calendar and clock for this specific schedule.html file
I used the same line to another adddate.html file to produce a confirm box but for some reason the confirmation box is working on the schedule.html file not in the adddate.html file
can anyone help? please go easy on me im still learning its only been 1 and half weeks of coding...
FAQS:
Yes, They are in the same file folder for anchor href purposes (prototype still)
No, I haven't read everything there is to know about javascripting (sorry...)
thanks in advance!

If you are writing the js code inline all you need is
<script>
// code goes here
</script>
Otherwise you need the source (src) attribute if you are pointing to a file
<script src="/file-name.js"></script>
Javascript is the default so you don't need the type or language attributes. Also the src attribute is the relative location so if you need to change directories, ../directory/file-name.js - as an example.
Hope that helps.

Exporting a div's content to PDF

I know that there are a number of points regarding this question, but I just can't find what I'm looking for so I hope someone can answer me. So, what I'm trying to do is:
imagine you have a div that is 400 X 400 px. The user uploads an image and enters text via input[type="text"] and all of it is shown inside that div. I want to export all of the content of that div in a PDF, possibliy by JavaScript (jQuery) od PHP. What would be the best way to do it?
If anyone could show a small example (code), I would appreciate it!

You can use these jquery plugins
https://github.com/mozilla/pdf.js
https://github.com/MrRio/jsPDF

Maybe you could combine the PHP-Printer functions-api (http://www.php.net/manual/en/book.printer.php) with a software like, for example, PDF-Creator (http://sourceforge.net/projects/pdfcreator/).
But this would imply that PDF-Creator is installed on the system of the user.
It's just a general idea ...

You can generate a PDF since a HTML page, with the WeasyPrint package. It's very easy to use and its most speed that javascript.

resize images using NicEdit

I am testing and looking for a wysiwyg editor and I found a pretty functional one called nicEdit. Problem is that using firefox all functions are working properly but using chrome, when image is placed, resize option frame doesn't work! How to solve it? If not, any other similar one? Some functions of Tiny MCE are not working with chrome too. Thank you.

Use nicEdit and alter code this way in nicEdit.js:
var nicImageButton=nicEditorAdvancedButton.extend({addPane:function(){this.im=this.ne.selectedInstance.selElm().parentTag("IMG");this.addForm({"":{type:"title",txt:"Add/Edit Immagine"},width:{type:"text",txt:"Width",style:{width:"150px"}},src:{type:"text",txt:"URL",value:"http://",style:{width:"150px"}},alt:{type:"text",txt:"Alt Text",style:{width:"100px"}},align:{type:"select",txt:"Align",options:{none:"Default",left:"Left",right:"Right"}}},this.im)},submit:function(B){var C=this.inputs.src.value;if(C==""||C=="http://"){alert("You must enter a Image URL to insert");return false}this.removePane();if(!this.im){var A="javascript:nicImTemp();";this.ne.nicCommand("insertImage",A);this.im=this.findElm("IMG","src",A)}if(this.im){this.im.setAttributes({width:this.inputs.width.value,src:this.inputs.src.value,alt:this.inputs.alt.value,align:this.inputs.align.value})}}});nicEditors.registerPlugin(nicPlugin,nicImageOptions);
you have to add simply
,width:{type:"text",txt:"Width",style:{width:"150px"}}
and
width:this.inputs.width.value,
to add the option to insert width parameter.

Here is a full code with height edit option, in addition to the width
based on what Yuri Refolo explained
var nicImageButton=nicEditorAdvancedButton.extend({addPane:function(){this.im=this.ne.selectedInstance.selElm().parentTag("IMG");this.addForm({"":{type:"title",txt:"Add/Edit Image"},width:{type:"text",txt:"Width",style:{width:"150px"}},height:{type:"text",txt:"Height",style:{width:"150px"}},src:{type:"text",txt:"URL",value:"http://",style:{width:"150px"}},alt:{type:"text",txt:"Alt Text",style:{width:"100px"}},align:{type:"select",txt:"Align",options:{none:"Default",left:"Left",right:"Right"}}},this.im)},submit:function(B){var C=this.inputs.src.value;if(C==""||C=="http://"){alert("You must enter a Image URL to insert");return false}this.removePane();if(!this.im){var A="javascript:nicImTemp();";this.ne.nicCommand("insertImage",A);this.im=this.findElm("IMG","src",A)}if(this.im){this.im.setAttributes({width:this.inputs.width.value,height:this.inputs.height.value,src:this.inputs.src.value,alt:this.inputs.alt.value,align:this.inputs.align.value})}}});nicEditors.registerPlugin(nicPlugin,nicImageOptions);

How to view all html content using Javascript?

I am trying to find a way to save all html content from a webpage to a variable. This should work even if the webpage has frames in it. By current best solution is:
javascript: alert(document.body.outerHTML);
Just paste the code into the control in your browser where the url is placed and push enter to see the result. Any idea how to do this?

You should cycle over all the frames and ajax-load the content.
Somethings like
document.getElementsByTagName('frame')[0].src
to get the source. But I strongly suggest you to use library to help you out. In jquery can be quite simple task. Cycle over all frames, than $.ajax request all the externals source and build it (replacing the relative section)
But, as pointed by smeg4brains, innerHTML can be your way.

Here is the direct answer to "how to do this":
Having this in the address bar just press Enter and you'll see the contents in alert dialog.
To see contents of frames you'll have to iterate them separately it won't be part of the HTML.

Does this work?
var copyOfHtml = document.documentElement.outerHTML
alert(copyOfHtml)

Anyone know of a javascript removal tool for html

I am having issues with an Ebay template, if I try to upload it get's kicked back to me saying that it cannot contain javascript, I'm assuming that it's in the picture rollover option (mouseover pic enlarging tool) Any help would be greatly appreciated, I'm not real Java intuitive.

Just delete anything between the <script> and </script> tags. Or perhaps post the code snippet here so we can tell you what to remove.

The template should have a HTML file inside.
Search for ... parts and remove them as mentioned before.
Search for instances of onmouseover="...", onmouseout="..." and generally anything that looks like , removing the onsomeevent="dosomething" part.

Categories

Resources