adding html image using jquery to div/table - javascript

i'm new to JQuery and currently using it in Visual Studio 2013.
I want to ask how do I add img tag into a table or div using JQuery?
Ie. i have a div and i want to dynamically create image using jquery. OR
i have a dynamically created table in a dynamically created div, and I want to add an image to one of its row.
I've tried this in jsfiddle (http://jsfiddle.net/3C7UD/1/)
$("#divid").append('<table>
<tr>
<td>asdasdasd</td>
<td><img src:"https://www.google.com/images/srpr/logo11w.png" width:"225px" height:"225px" /></td>
</tr>
</table>');
$('#divid').append('<img src:"' + imgLink + '" width:"225px" height:"225px" />');
but no image.. I also have tried that in visual studio project but the same (no image).
I can't found any tutorial about adding image, and the solutions I found in this forum haven't work for me by far....

You wrote <img src:"..." /> instead of <img src="..." /> which is the reason why your code isn't showing the image:
Corrected fiddle : http://jsfiddle.net/Zword/3C7UD/3/
Corrected part of code:
$("#divid").append('<table><tr><td>asdasdasd</td><td><img src="http://blog.sckyzo.com/wp-content/google-small.png" width:"225px" height:"225px" /></td></tr></table>');
$('#divid').append('<img src="' + imgLink + '" width:"225px" height:"225px" />');

HTML attributes are specified with =, not :.
$("#divid").append('<table><tr><td>asdasdasd</td><td><img src="http://blog.sckyzo.com/wp-content/google-small.png" width="225px" height="225px" /></td></tr></table>');
$('#divid').append('<img src="' + imgLink + '" width="225px" height="225px" />');
Updated demo: http://jsfiddle.net/3C7UD/5/

try changing this 2 lines:
var img = "<img src='"+imgLink+"' />";
and the last one:
$('#divid').append(img);

Change your code to :
$("#divid").append('<table>
<tr>
<td>asdasdasd</td>
<td><img src:"https://www.google.com/images/srpr/logo11w.png" style="width:225px; height:225px" /></td>
</tr>
</table>');
$('#divid').append('<img src:"' + imgLink + '" style = "width:225px;height:225px" />');

Change your:
><img src:"
to
><img src="

Related

drag and drop into textbox

I'm trying create a textbox and a draggable button.
At the moment when I click on the button a certain text is added to the begging of the textbox (JavaScript and HTML).
I want to add an option to drag the button into the textbox which will cause the same text from when I click on the button to be added into the textbox.
If it possible I also would like to choose where to add this text. I.e if I drag the button and drag in middle of a sentence in the textbox, it will add the text to the middle of the sentence where I dropped the text and not at the start of the textbox.
Thanks from advance.
Edit:
Here is part of the code i already did, sorry it a little messy (for what i'm doing i need all to put all in string).
var emoticon1 = "<input title='curious' onclick='add_tag("+'"curious"'+");' type='image' id='cur' src='/content/modules/dev/emoticons/curious.png' style='height:48px;width:48px;' />";
var emoticon2 = "<input title='confused' onclick='add_tag("+'"confused"'+");' type='image' id='con' src='/content/modules/dev/emoticons/confused.png' style='height:48px;width:48px;' />";
var emoticon3 = "<input title='helpful' onclick='add_tag("+'"helpful"'+");' type='image' id='help' src='/content/modules/dev/emoticons/helpful.png' style='height:48px;width:48px;' />";
var emoticon4 = "<input title='intersted' onclick='add_tag("+'"intersted"'+");' type='image' id='inte' src='/content/modules/dev/emoticons/interested.png' style='height:48px;width:48px;' />";
var tmp = "var txt=document.getElementById('commentTB').value;txt='#' + type + ' ' + txt ;document.getElementById('commentTB').value=txt;";
var fun = "<script> function add_tag(type) {"+tmp+"} </script>";
var emoticonsList = fun + emoticon1 + emoticon2 + emoticon3 + emoticon4;
The result at the moment:
how the current code looks
At the moment (I work in ubuntu if it matters), if run it in chrome, it let me drag the buttons (the pictures) and put them in the text, but it put the "src" in the textbox instead of the text i want. On the other hand, in firefox the buttons can't be dragged, even if add draggable="true".
You can do it with Drag & Drop-API.
document.addEventListener('dragstart', function (event) {
event.dataTransfer.setData('Text', event.target.innerHTML);
});
#buttons p {
appearance:button;
-moz-appearance:button;
-webkit-appearance:button;
display: inline-block;
padding: 2px 5px;
}
<div id="buttons">
<p draggable="true" id="1">This</p>
<p draggable="true" id="2">is</p>
<p draggable="true" id="3">a</p>
<p draggable="true" id="4">simple</p>
<p draggable="true" id="5">Drag'n'Drop-Test</p>
</div>
<textarea></textarea>
Tested in Chrome & Firefox.
Not sure what you've done so far so it's difficult to help but it sounds like jQuery UI could be useful here
Check out the Draggable and Droppable functions

Adding an image via pure JS

I am new in JS,please help me.I have 4 images with the same class name and a hidden div which is displayed when one of 4 images is clicked. How i can add to my div the image which one is clicked? I do not want to write a function for every image.Is it possible with my code?
<img onClick="show()"class="img" src="css/images1/img1.png">
<img onClick="show()"class="img" src="css/images1/img2.png">
<img onClick="show()"class="img" src="css/images1/img3.png">
<img onClick="show()"class="img" src="css/images1/img4.png">
<div class="gallery"></div>
<script>
function show(){
var x=document.getElementsByClassName('gallery')[0];
x.style.display="block";
x.innerHTML='<img src=css/images1/img1.jpg>';
};
</script>
Pass in the "src" of the element that was clicked:
function show(src){
var x=document.getElementsByClassName('gallery')[0];
x.style.display="block";
x.innerHTML = '<img src="' + src + '">';
}
Then for your html <img/> tags pass in their src to show:
<img onClick="show(this.src)"class="img" src="css/images1/img1.png">
Edit: if you must select "gallery" by className, use getElementsByClassName as you originally had.

Troubles trying to add attributes with jquery

I need to add dynamically a row in jquery, this is my code:
var row = $('<tr />')
.append($('<td />'))
.append($('<td>' + response.nome + '</td>'))
.append($('<td />', {
style: "text-align:center"
}).append($('<input />', {
type: 'image',
src: 'nienteico.png',
'class': 'ajaxEdit',
id: '1.' + response.row_id
}).css({
cursor: 'pointer',
width: '40px',
height: '40px',
}).click(function() {
cambiastato('1.' + response.row_id);
})));
In particular, as regards the last element i'm expecting to get 'id' attribute and one 'onclick function'. Something like:
<tr>
<td></td>
<td>uytredsgfh</td>
<td style="text-align:center">
<input type="image" src="nienteico.png" style="cursor:pointer; width:40px; height:40px" id="1.15" class="ajaxEdit" onclick="cambiastato(1.15)">
</td>
</tr>
The first two elements are correctly written, but unfortunally this is what i get for the last one (id attribute and onclick function missed!)
<td style="text-align:center">
<input type="image" src="nienteico.png" class="ajaxEdit" style="cursor: pointer; width: 40px; height: 40px;">
</td>
Any help or suggestions? Thanks
This is what you would expect.
Your id is invalid because it starts with a number - see w3.org. jQuery is probably rejecting it because of this.
The click event is not written as an attribute of the tag. Instead it is hooked up as a property of the DOM element the tag represents. You will probably find that it works if you put the input on the page and click it.
If you do want to explicitly output the onclick and other attributes into the tag, you can just set them in the initial tag creation call:
var row = $('<tr />')
.append($('<td />'))
.append($('<td>' + response.nome + '</td>'))
.append($('<td style="text-align:center" />')
.append($('<input onclick="cambiastato(1.' + response.row_id + ');" type="image" src="nienteico.png" class="ajaxEdit" id="1.' + response.row_id + '" />')
.css({
cursor: 'pointer',
width: '40px',
height: '40px',
})
));
Your code is correct. jQuery is not adding attributes to the element it is adding an Event Listener to the DOM. In other words it will not show up in the markup even when it is working. Try adding a console.log statement to the listener and trying it out - it should work.
On a side note there are a few best practices that might help keep your code cleaner and more maintainable.
When working with jQuery elements in JavaScript people usually use a $ to prefix variable names. In your example this would be $row.
Since you are composing nested elements it is often much cleaner to create a variable to each of the major ones and bring them together at the end. This reduces the surface area effected when you have to do refactors. In your example I might pull the $input element into it's own variable.
Inline styles and particularly styles written in JavaScript are considered bad practice. If possible you should try and add a class then style the class in your stylesheet.
Best of luck!

Add space before image, javascript

I am trying to put some space to the left of the radio-play.gif button. What can add to this code to achieve that?
Thanks!
// Last (only one on Mac) row has the VCR buttons.
//
s += '<td>';
s += '<img border="0" src="/images/dot.gif" width="81" height="' + gPreBtnVertSpace + '"><br>';
s += '<img alt="PLAY" src="' + imageDir + 'radio-play.gif" width="72" border="0" padding="5" height="61" style="cursor:pointer; cursor:hand" onclick="HandleAction(\'playnow\')">';
if (player != 'MP3')
s += '<img alt="STOP" src="' + imageDir + 'radio-stop.gif" width="72" border="0" height="61" style="cursor:pointer; cursor:hand" onclick="HandleAction(\'stop\')">';
s += '</td></tr>';
document.write(s);
// removing mute button
var myEl = document.getElementsByName("mute");
var elP = myEl[0].parentNode.parentNode;
elP.removeChild(myEl[0].parentNode);
Either set a margin to the img tag (it needs to be display:inline-block; for this) or add
a (No breaking space).
Probably the margin would be my preferred way, e.g.
img{
display:inline-block;
margin-left:5px;
}
or
s += ' <img alt="PLAY" ...
Btw.: The correct way would be, to create the <td> and <img> elements via document.createElement and then attach them to the dom. (Or use jquery, it's a bit simpler there)
You can literally put a space character infront of it. I would do it using CSS. Give the image a class class="whatever" and then in CSS:
.whatever {
margin-left: 10px;
}
Since you're doing it inline already, you could just add the margin in the inline css.
s += ' <img alt="PLAY" src="' + imageDir + 'radio-play.gif" width="72" border="0" padding="5" height="61" style="cursor:pointer; cursor:hand" onclick="HandleAction(\'playnow\')">';
OR, more correctly,
s += ' <img alt="PLAY" src="' + imageDir + 'radio-play.gif" width="72" border="0" padding="5" height="61" style="cursor:pointer; margin-left:5px;" onclick="HandleAction(\'playnow\')">';
If "space" means visually rendered space to the left of the rendered button element, this would typically be done with CSS. A common implementation would be that the image tag itself, or a container of the image tag, has a CSS class attribute that assigns space appropriately. For the CSS to do this, look into things like padding, margins, absolute vs relative positioning, the left or right attributes, etc.

Open URL inside a div tag

I have a div tag inside a table cell and and a hyperlink tag in another cell and on i want open a specific url onmouseover on hyperlink inside the div tag.the url is to my pdf file.Please anyone tell me how can i do this thorugh Javascript or anyother method
Something like this:
<table>
<tr>
<td>
google
</td>
<td>
<div id="div1" style="width:400px;height:200px;border:1px solid #ddd;"></div>
</td>
</tr>
</table>
<script>
function previewUrl(url,target){
//use timeout coz mousehover fires several times
clearTimeout(window.ht);
window.ht = setTimeout(function(){
var div = document.getElementById(target);
div.innerHTML = '<iframe style="width:100%;height:100%;" frameborder="0" src="' + url + '" />';
},20);
}
</script>
If you mean you want to open a new page on mouse over, then:
//add onmouseover to your hyperlink
<a href="#" onMouseOver="open_new_window(url);">Open Hover Window
//then js
function open_new_window(url) {
window.open(url,"some_name","width=300,height=200,left=10,top=10");
}
Did you mean something like that

Categories