How to Create Image with text inside a div..

Posted by Manorama under jQuery on 5/10/2013 | Points: 10 | Views : 3222 | Status : [Member] | Replies : 5
hi.....

here My requirement is Simple... Once I drag a column from table i can able to see div with dragged Column Name assume that div Name is drag Div.For that drag Div i need to add images Dynamically;like When i drop the Element on droppable Area's i need to display Green Color Tick Mark Image. and for remaining Places Banned Image with Red Color Image.How to map these two Images for div.and div is created Dynamically in Datatable.js file...I am confused how to Map with my functionality....

Please Guide me...



Thanks in advance........

ManoRama


Responses

Posted by: Learningtorise on: 5/10/2013 [Member] Starter | Points: 25

Up
0
Down
you can do this using .insertAfter in JQuery.

Suppose you add a div
Then write this:

$('Your Selector/Div').insertAfter("<img src='GreenColorTick'>");

If Jquery can't find selector in HTML, then it wont add image after selector tag.


;)

http://hashtagakash.wordpress.com/

Manorama, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Manorama on: 5/10/2013 [Member] Starter | Points: 25

Up
0
Down
Thanks for your Reply....

this.dom.drag = $(this.s.dt.nTHead.parentNode).clone(true)[0];
this.dom.drag.style.position = "absolute";
this.dom.pointer = document.createElement('div'); ....//div i can't Modify ..because it is in DataTables.js file...
this.dom.pointer.className = "DTCR_pointer";
document.body.appendChild(this.dom.pointer);
document.body.appendChild(this.dom.drag);
var img = document.createElement('img');
img.src = '../Images/tickImg.JPG';
img.style.height = 20;
img.style.width = 10;
this.dom.pointer.appendChild(img);
I given Like this I got image also...But my problem is When i use revert=true;that time it has to display with red color banned Image.How can i modify..How can i bring JqueryUI revert function into Data Table ColReOrder.js file for data Table...


ManoRama

Manorama, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Learningtorise on: 5/10/2013 [Member] Starter | Points: 25

Up
0
Down
Hope this helps ;)

http://stackoverflow.com/questions/5735270/revert-a-jquery-draggable-object-back-to-its-original-container-on-out-event-of

http://hashtagakash.wordpress.com/

Manorama, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Learningtorise on: 5/10/2013 [Member] Starter | Points: 25

Up
0
Down
Now debug your jQuery code

Firebug(http://getfirebug.com/), Internet Explorer Developer Toolbar(http://www.microsoft.com/en-us/download/default.aspx),and
Chrome Developer Tools(https://chrome.google.com/webstore/detail/jquery-debugger/dbhhnnnpaeobfddmlalhnehgclcmjimi?hl=en).

All are good ways for the respective browsers.

:)


http://hashtagakash.wordpress.com/

Manorama, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Manorama on: 5/10/2013 [Member] Starter | Points: 25

Up
0
Down
Thanks for reply...Now my question is In revert function how can i call Dynamically created div in ColReOrder.js Js file..even it do not have id also..and for that div I need to append Image..and Image also has to change Dynamically...They assigned div element to this.dom.pointer ... In Js File It is this.dom.pointer = document.createElement('div');When I used this for my code Its throws Exceptions.

ManoRama

Manorama, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response