Develop Reference

Drag and Drop <object> tag, Data is missing in <object> tag in asp.net

I am dragging and dropping 3 div's(div tag). one div tag contain object tag in side div tag, in that object tag i'm displaying PDF file. when page loads object tag display's PDF file, after drag and drop object tag will not show pdf file, object tag is blank.
HTML CODE
/* Display Box1*/
<div class="parent">
<div class="box child" id="child3">
<div class="box-header">
<h3 class="box-title">Information From Document Archive</h3>
</div>
<div class="box-body table-responsive no-padding" style="overflow: auto; padding-left: 5px; max-height: 250px;">
<div style="z-index: -999;">
<object data="file/DRAG.pdf" id="objpdf" class="col-sm-12">
</object>
</div>
</div>
</div>
</div>
/* Display Box2 */
<div class="row">
<div class="col-sm-6">
<div class="parent">
<div class="box child" id="child1">
<div class="box-header">
<h3 class="box-title">Information From AI Engine</h3>
<div class="box-tools">
<div class="input-group input-group-sm" style="width: 150px;">
</div>
</div>
</div>
<div class="box-body table-responsive no-padding" style="overflow: auto; max-height: 300px;">
<table class="table table-hover">
<tbody>
<tr>
<th style="width: 200px;">Field</th>
<th>Value</th>
</tr>
<tr>
<td>Permission Note</td>
<td><span class="text-red">
<asp:Label ID="lblPermissionNote" runat="server" Text="abcd"></asp:Label>
</span></td>
</tr>
<tr>
<td>Customer Comments</td>
<td><span class="text-red">
<asp:Label ID="lblCustomerComments" runat="server" Text="Test comments"></asp:Label>
</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="parent">
<div class="box child" id="child2">
<div class="box-header">
<h3 class="box-title">Information From Mainframe Engine</h3>
<div class="box-tools">
<div class="input-group input-group-sm" style="width: 150px;">
</div>
</div>
</div>
<div class="box-body table-responsive no-padding" style="overflow: auto; height: 300px;">
<table class="table table-hover">
<tbody>
<tr>
<th>Field</th>
<th>Value</th>
</tr>
<tr>
<td>Consignment Number</td>
<td><span class="text-black">
<asp:Label ID="lblMainFrameConsigmentNumber" runat="server" Text="1234556789"></asp:Label>
</span></td>
</tr>
<tr>
<td>Account Number</td>
<td><span class="text-black">
<asp:Label ID="lblMainFrameTntAccountNumber" runat="server" Text="123456"></asp:Label>
</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
JQuery Code
$("document").ready(function () {
$(".child").draggable({
revert: true
});
$(".parent").droppable({
accept: '.child',
drop: function (event, ui) {
if ($(this).children().length > 0) {
var move = $(this).children().detach();
$(ui.draggable).parent().append(move);
}
$(this).append($(ui.draggable));
}
});
});
CSS
.parent {
/*float: left;*/
cursor: move;
border: 2px dotted silver;
}
Web Page Before Dragging
Web Page after dragging
Please suggest any solution.

Found solution. Instead of using <object> tag i used <iframe> tag. it worked for me.
Before:
<object data="file/DRAG.pdf" id="objpdf" class="col-sm-12">
</object>
Changed To:
<iframe src="file/DRAG.pdf" class="col-sm-12" style="height:300px;" frameborder="0"></iframe>

Clickable link inside UI Sortable field

I am making a custom field for the Advanced Custom Fields plugin for wordpress.
Now I have been able to allow javascript to be used inside of the field but the field has UI-sortable active which makes my anchor tag not firering but instead clicks the sortable anchor.
Is there a way to make sure that my click event gets fired inside a sortable element?
So I created this link, to be placed inside a element :
<a id="addTable" href="#">Voeg tabel toe</a>
Which gets turned into an element like this :
<div id="normal-sortables" class="meta-box-sortables ui-sortable">
<div id="acf-group_5a93d53605864" class="postbox acf-postbox seamless">
<button type="button" class="handlediv" aria-expanded="true">
<span class="screen-reader-text">paneel Bridge verbergen</span>
<span class="toggle-indicator" aria-hidden="true"></span>
</button>
<h2 class="hndle ui-sortable-handle">
<span>Bridge</span>
<a href="{link}/wp-admin/post.php?post=12695&action=edit"
class="dashicons dashicons-admin-generic acf-hndle-cog acf-js-tooltip"
title="Bewerk groep">
</a>
</h2>
<div class="inside acf-fields -top">
<div class="acf-field acf-field-Bridge acf-field-5a93d538671c7"
data-name="bridge"
data-type="Bridge" data-key="field_5a93d538671c7">
<div class="acf-label">
<label for="acf-field_5a93d538671c7">Bridge</label>
</div>
<div class="acf-input">
<!-- Here is the anchor tag -->
<a id="addTable" href="#">Voeg tabel toe</a>
<div id="ContentWrapper">
<div id="North"></div>
<div id="East"></div>
<div id="Middle">
<table bgcolor="#c0c0c0">
<tbody>
<tr>
<td colspan="3" align="center"><strong>N</strong></td>
</tr>
<tr>
<td align="left"><strong>W</strong></td>
<td> </td>
<td align="right"><strong>O</strong></td>
</tr>
<tr>
<td colspan="3" align="center"><strong>Z</strong></td>
</tr>
</tbody>
</table>
</div>
<div id="South"></div>
<div id="West"></div>
</div>
</div>
</div>
<script type="text/javascript">
if ( typeof acf !== 'undefined' ) {
acf.postbox.render({
"id": "acf-group_5a93d53605864",
"key": "group_5a93d53605864",
"style": "seamless",
"label": "top",
"edit_url": "http:\/\/{link}\/wp-admin\/post.php?post=12695&action=edit",
"edit_title": "Bewerk groep",
"visibility": true
});
}
</script>
</div>
</div>
</div>
(function($) {
$("#addTable").click(function () {
alert( "Click" );
});
})(jQuery);

modal popup not showing on top of another modal popup

Updated
I am trying to use modal as confirmation prompt on another modal but confirmation modal is not vissible on onclick. Here is the modals properties I set.
Parent Modal.
I am calling my parent modal in my asmx file and then I am calling my child modal function in an asmx file as well.
<div id="ShowDetails" class="popup" tabindex="-1" style="position:absolute;" role="dialog">
<div class="panel panel-green">
<div class="panel-heading">Parchase Request Details</div>
<div class="panel-body">
<div class=" col-md-12">
<div class="form-inline">
<input id="pdid" style="display: none; width: 90PX; margin: 2px;" type="hidden" />
<%--<asp:HiddenField ID="PDId" runat="server" />--%>
<table class="table table-condensed">
<tr>
<td>
<input id="item" style="display: none; width: 90PX; margin: 2px;" /></td>
<td>
<input id="quantity" style="display: none; width: 90PX; margin: 2px;" />
</td>
<td>
<input id="eprice" style="display: none; width: 90PX; margin: 2px;" />
</td>
<td>
<input id="make" style="display: none; width: 90PX; margin: 2px;" />
</td>
<td>
<input id="discription" style="display: none; width: 90PX; margin: 2px;" />
</td>
<td>
<a id="DoneEditingbtn" role="button" onclick="DoneEditing()" style="color: #72c02c; display: none; width: 100PX; margin: 2px;">Update</a>
</td>
<td><a id="cancleediting" role="button" onclick="cancleeditingdetail()" style="color: #72c02c; display: none; width: 100PX; margin: 2px;">cancel</a>
</td>
</tr>
</table>
<table class="table table-condensed">
<thead>
<tr style="background-color: #01cc66;">
<th>Item Name</th>
<th>Quantity</th>
<th>Estimated Price</th>
<th>Make</th>
<th>Discription</th>
<th>Options</th>
</tr>
</thead>
<tbody id="tblgetdetails">
</tbody>
</table>
<div id="Alert"></div>
</div>
</div>
</div>
<span class="popup-btn-close" data-dismiss="modal">close</span>
</div>
</div>
Confirmation Modal.
<div id="ApproveMod" class="popup" style=" z-index:2; position:absolute; left: 50%; width: 40%; border: 10px solid #666;">
<div class="col-lg-6">
<i>Are you sure to Approve this data?</i>
</div>
<i id="pheadIdApp"></i>
<i id="pbdIdApp"></i>
<div class="col-lg-6">
<a class="btn-u btn-u-red" href="#" role='button' style="text-align: center; width: 45%;" onclick="Approve()">Yes </a>
<button class="btn-u btn-u-green-custom " style="text-align: center; width: 45%;" data-dismiss="modal">NO</button>
</div>
</div>
The Parent modal is showing properly but when I click on parent modal button which should toggle child modal, is not working, In ASMX I have defined my child modal function on onclick as following.
<a role='button' class='form-control' onclick='AppModal(PHId+","+PBDId)'>Approve</a>
Here is the child calling approach I used in script.
function AppModal(phid,pbdid) {
$("#pheadIdApp").val(phid);
$("#pbdIdApp").val(pbdid);
$("#ApproveMod").modal("show");
}
It should work properly I have used it many times but now I am stuck and have no idea where I might have missed the trick any kind of help is much much apriciated.

Its Really Funny Yesterday I got an answer to my problem by you which was about the same problem and now I find you stuck here.
Change your child modal position to relative and assign z-index value greater then 1040 which is for default layer.

Manipulating the height of a div class in an HTML table using CSS and a wicket

I have the following CSS code:
.Divider {
padding-top:0px;
padding-bottom:500px;
}
and the following HTML
<tr>
<td align="left">
<a wicket:id="button">
<img wicket:id="buttonImg" align="center" style="width:70%"/>
</a>
</td>
<td align="left" >
<div class="Divider"/>
</td>
</tr>
I would have expected 500px to be added as padding at the bottom of the image. Instead it adds it top and bottom. I've tried fiddling with height - same result. Obviously I'm a stupid newbie but can anone give me a clue what form my stupidity is taking pls. Would be most grateful

Try closing the Divider div this way.
<div class="Divider"></div>
Original Code Example <div class="Divider" /> http://jsfiddle.net/rrBXU/1/
Example with <div class="Divider"></div> http://jsfiddle.net/rrBXU/2/

You should be applying the padding to the same cell that the image is in.
You can do it with the <div> or apply the padding-bottom property to the <img>.
<table>
<tr>
<td align="left">
<a wicket:id="button">
<img id="buttonImg" align="center" style="width:70%"></a>
<div class="Divider"></div>
</td>
</tr>
</table>
Also, if you give the containing table a class you'll have greater control over all elements within it by using CSS. Example:
<table class="container">
<tr>
<td>
<a><img src="..."></a>
</td>
</tr>
</table>
.container { }
.container td { }
.container td img { }

You can put the img tag in a div and give it the same style.Or to make it easier just add a new div with the "Divider" class and put the image in it.
The code will be like this:
<td>
<div class="Divider">
..image or other content..
</div>
</td>
If there are other styling attributes in Divider:
<td>
<div class="Divider2" style="padding-top:0px;padding-bottom:500px;">
..image or other content..
</div>
</td>

Overlaying multiple external pages or divs with multiple links

I have a group of images with captions (from http://www.hongkiat.com/blog/css3-image-captions/) and would like to be able to click on them and have them overlay either a hidden div or load an external page as an overlay (I'm not fussed on either as long as it works!). I'd also like each image to link to a different page/div. I've tried lots of things without success so much help would be appreciated. Here's my code for the images (and yes one appears twice for testing purposes):
<div id="mainwrapper">
<table>
<tr>
<td>
<div id="box-1" class="box">
<img id="image-1" src="img/agent.png"/>
<span class="caption full-caption">
<h3>Agent Demo</h3>
<p>Java Group Project</p>
</span>
</div>
</td>
<td>
<div id="box-2" class="box">
<img id="image-2" src="img/wizardsbook.png"/>
<span class="caption full-caption">
<h3>The Wizard's Book</h3>
<p>Java Game</p>
</span>
</div>
</td>
<td>
<div id="box-3" class="box">
<img id="image-3" src="img/wizardsbook.png"/>
<span class="caption full-caption">
<h3>The Wizard's Book</h3>
<p>Java Game</p>
</span>
</div>
</td>
</tr>
</table>
</div>

per your 2nd question in the comments "I can't even get a simple a link to bring up the popup. I'm kinda new to JQuery so how should I link to JQuery, where should I put the script and how do I implement the img and attr things you're on about?", here is a screenshot that shows everything you need.

I built a fiddle for you that does what you're trying to do. Without knowing which unique values of the images you intend to use to load the related page, i provided some sample code:
working fiddle is here:
http://jsfiddle.net/acturbo/YVBpj/
javascript:
$().ready(function() {
$("#close").on("click", function(){
$("#popup").hide();
});
// uncomment this line to attach this "showWindow" to all the images
// then, use $(this) to access the specific image that was clicked
//$("img").on("click", function(){
$("#showWindow").on("click", function(){
// when you switch to images, you can access unique attributes
// of the clicked image using attr()
// this will let you load unique pages for each image
// eg. can use 1 or 2
// var value1 = $(this).attr( "src" );
// var value2 = $(this).attr( "id" );
//$("#popup").load( value1 );
$("#popup").show();
});
});
html:
<div id="popup">
<p>this is hidden until the image is clicked</p>
Close Window
</div>
<a href="#" id="showWindow">Show Window - mimic an image click</p>
<div id="mainwrapper">
<table>
<tr>
<td>
<div id="box-1" class="box">
<img id="image-1" src="img/agent.png"/>
<span class="caption full-caption">
<h3>Agent Demo</h3>
<p>Java Group Project</p>
</span>
</div>
</td>
<td>
<div id="box-2" class="box">
<img id="image-2" src="img/wizardsbook.png"/>
<span class="caption full-caption">
<h3>The Wizard's Book</h3>
<p>Java Game</p>
</span>
</div>
</td>
<td>
<div id="box-3" class="box">
<img id="image-3" src="img/wizardsbook.png"/>
<span class="caption full-caption">
<h3>The Wizard's Book</h3>
<p>Java Game</p>
</span>
</div>
</td>
</tr>
</table>
</div>
css
#popup{
top: 10px;
left: 10px;
width: 300px;
height: 100px;
position: absolute;
background: red;
display: none;
}

That is easy with CSS only.
Take a llok at this fiddle : http://jsfiddle.net/VgLVq/
To make the div clickable, just wrap it in a <a> tag with the URL you want.
Then make the .box in position: relative and every of his children in position: absolute. I used the selector .box>*.
Then make the .caption in display:none and add this CSS to detecte the hover :
a:hover .caption{
display:block;
}