There are a few posts around on how to make a re-sizable div with JQuery. I'm using asp.net and used code from several posts to do this which is appended below.
What I need to do now is have a button which when clicked I get another cloned draggable and re-sizable div, I also need to capture the x, y width and height of each div that is created. The code below captures these for the hard coded one and displays the values in a series of asp.net text boxes.
Cheers for any help and advice
Regards
CM
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs"
Inherits="Default3" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Cloned Divs</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-
ui.css" />
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
#drag {
width: 6em;
height: 6em;
padding: 0.5em;
border: 3px solid #ccc;
border-radius: 0 1em 1em 1em;
background-color: #fff;
background-color: rgba(255,255,255,0.5);
}
#Buttons {
width: 50px;
height: 50px;
left: 50px;
position: absolute;
}
</style>
<script>
$(function () {
$("#drag").draggable(
{
containment: $('body'),
drag: function () {
var offset = $(this).offset();
var xPos = offset.left;
var yPos = offset.top;
var myHeight = $("#draggable").height();
$('#posX').text('x: ' + xPos);
$('#posY').text('y: ' + yPos);
$("#<%=txtX.ClientID%>").val(xPos);
$("#<%=txtY.ClientID%>").val(yPos);
}
}).resizable({
resize: function (event, ui) {
var mywidth = $(event.target).width();
var myHeight = $(event.target).height();
$('#width').text('width: ' + mywidth);
$('#height').text('height: ' + myHeight);
$("#<%=txtWidth.ClientID%>").val(mywidth);
$("#<%=txtHeight.ClientID%>").val(myHeight);
}
});
});
$('#btnAdd').click(function () {
var structure = $('<div id="draggable1" class="ui-widget-content"></div>');
$('#body').append(structure);
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="drag" class="ui-widget-content">
<ul>
<li id="posX"></li>
<li id="posY"></li>
<li id="width"></li>
<li id="height"></li>
</ul>
</div>
<div id="Buttons">
<asp:Label ID="lblX" runat="server" Text="X: "></asp:Label><asp:TextBox
ID="txtX" runat="server"></asp:TextBox>
<asp:Label ID="lblY" runat="server" Text="Y: "></asp:Label><asp:TextBox
ID="txtY" runat="server"></asp:TextBox>
<asp:Label ID="lblWidth" runat="server" Text="Width: "></asp:Label><asp:TextBox
ID="txtWidth" runat="server"></asp:TextBox>
<asp:Label ID="lblHeight" runat="server" Text="Height: "></asp:Label>
<asp:TextBox ID="txtHeight" runat="server"></asp:TextBox>
<asp:Button ID="btnAdd" runat="server" Text="Add Div" />
</div>
</form>
</body>
</html>
Well, you have some serious css issues to deal with. I'm not entering this matter, but I'm going to answer you question about the div add.
The easiest approach would be turning your "$.draggable" event into a separate method, and apply the draggable property by a class, not an id. Then call it on every div add. Also, to append a element using JQuery use $(document.body).append("").
Finally, you shouldn't use a asp:Button for this, but if you must, be sure to add a OnClientClick="return false;" property, otherwise it will submit your page.
Here's the javascript adjustments:
function ApplyDrag() {
$(".draggable").draggable(
{
containment: $('body'),
drag: function() {
var offset = $(this).offset();
var xPos = offset.left;
var yPos = offset.top;
var myHeight = $("#draggable").height();
$('#posX').text('x: ' + xPos);
$('#posY').text('y: ' + yPos);
$("#<%=txtX.ClientID%>").val(xPos);
$("#<%=txtY.ClientID%>").val(yPos);
}
}).resizable({
resize: function(event, ui) {
var mywidth = $(event.target).width();
var myHeight = $(event.target).height();
$('#width').text('width: ' + mywidth);
$('#height').text('height: ' + myHeight);
$("#<%=txtWidth.ClientID%>").val(mywidth);
$("#<%=txtHeight.ClientID%>").val(myHeight);
}
});
}
$(function() {
ApplyDrag();
$('#<%=btnAdd.ClientID %>').click(function() {
var structure = $('<div class="draggable ui-widget-content">BLABLA</div>');
$(document.body).append(structure);
ApplyDrag();
});
});
Related
I have implemented some web-page in ASP.NET. I want to add a progress bar to my page. Because the page takes several minutes to load.
I want to put show Progress bar function at the start of Page_Load function. And hide it at the end of the Page_Load function. How can I implement this?
Please give me some advice. Thank you in advance.
<%# Page Language="C#" AutoEventWireup="true" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript" src="Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style type="text/css">
#loading
{
font-family: Arial;
font-size: 10pt;
border: 5px solid #67CFF5;
width: 220px;
height: 20px;
display: none;
position: fixed;
background-color: White;
z-index: 999;
text-align: center;
line-height: 20px;
}
</style>
<script type="text/javascript">
function ToggleProgressBar() {
var loading = window.jQuery('#loading');
if (loading.is(':visible')) {
loading.hide();
}
else {
var top = Math.max(parseInt($(window).height() / 2 - loading.height() / 2), 0);
var left = Math.max(parseInt($(window).width() / 2 - loading.width() / 2), 0);
loading.css({ top: top, left: left });
loading.show();
}
}
function blahblah(s, e) {
// some blah blah function contents
}
function blahblah2(s, e) {
// some blah blah function contents
}
</script>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
**// TODO: Show Progress Bar**
DelayTime(); // dummy function to delay page load
**// TODO: Hide Progress Bar**
}
protected void DelayTime()
{
txt_delay.InnerText = "";
for (int i = 0; i < 3000; i++)
{
txt_delay.InnerHtml += i.ToString("0000") + ", ";
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<span id="txt_delay" runat="server"></span>
<div id="loading" align="center" runat="server">
Loading...
<%--<img src="/Images/progress-indicator.gif" alt="" />--%>
</div>
</div>
</form>
</body>
</html>
Another way would be to give your css a class. Then put a div as a placeholder where you want the window to show. Give the div an id and assign it's css class the id of your class and set the display attribute to none. Then when you are ready use a bit of jquery to change the display from none to say block. assuming you have done something like div id='myWait' display='none' class='mycssclass'
then jquery along the lines ('#myWait').attr('display','block');
I made a javascript and I need to link it into the aspx-file.
I tried to link it right inside the head content.
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">
<script src="/Fusioncharts/fusioncharts.js"></script>
<script src="/Fusioncharts/themes/fusioncharts.theme.flat.js"></script>
<script src="../Scripts/urlauslesen.js"></script>
But it doesn't work like this,so I tried it inside the div and it worked.
<div id="zwei" style="position: absolute; top: 0; left: 50%; height: 100%; width: 100%; z-index:-1">
<script>
var url = window.location.href;
var params = url.split('?');
var id = params[1].split('=')[1]; //params[1] will contain everything after ?
console.log(id);
if (id == 11) {
$("#zwei").each(function() {
$(this).css("z-index", 0);
});
} else if (id == 31) {
$("#vier").each(function() {
$(this).css("z-index", 0);
});
}
</script>
<asp:Literal ID="ltrRenderChart2" runat="server"></asp:Literal>
</div>
But only the if is working, the else if doesn't work.
Why not?
Thanks
I am displaying a floating feedback form in my website and using JQuery to handle the slide in and out functionality. Following is the code.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="SlidingWindow.Default" %>
<%# Register TagPrefix="ajax" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
<form id="form1" runat="server">
<asp:ScriptManager runat = "server"></asp:ScriptManager>
<div class="feedback-panel">
<asp:UpdatePanel ID="UpdatePanel1" runat = "server">
<ContentTemplate>
<a class="feedback-tab" href="#"></a>
<asp:Panel ID = "panel1" runat = "server">
<table>
<tr style="height:100%;white-space:nowrap;"><td><asp:Label ID="Label1" runat = "server" Text = "Name"></asp:Label></td></tr>
<tr style="height:100%;white-space:nowrap;"><td><asp:TextBox runat = "server" ID = "txtName" CssClass = "feedbacktextbox"></asp:TextBox></td></tr>
<tr style="height:100%;white-space:nowrap;"><td><asp:Label ID="lblEmail" runat = "server" Text = "Email"></asp:Label></td></tr>
<tr style="height:100%;white-space:nowrap;"><td><asp:TextBox runat = "server" ID = "txtEmail" CssClass = "feedbacktextbox"></asp:TextBox></td></tr>
<tr style="height:100%;white-space:nowrap;"><td><asp:Label ID="lblFeedback" runat = "server" Text = "Comments"></asp:Label></td></tr>
<tr style="height:100%;white-space:nowrap;"><td><asp:TextBox runat = "server" ID = "txtFeedback" TextMode="MultiLine" CssClass = "width"></asp:TextBox></td></tr>
<tr style="height:100%;white-space:nowrap;"><td><asp:Button runat = "server"
ID = "btnFeedbackSubmit" Text = "Submit" onclick="btnFeedbackSubmit_Click" />
</td></tr>
</table>
</asp:Panel>
<asp:Panel ID = "panel2" runat = "server"><asp:Label runat = "server" ID = "lblFeedbackMsg"></asp:Label></asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
<script type="text/javascript">
$(document).ready(function () {
var feedbackTab = {
speed: 300,
containerWidth: $('.feedback-panel').outerWidth(),
containerHeight: $('.feedback-panel').outerHeight(),
tabWidth: $('.feedback-tab').outerWidth(),
init: function () {
$('.feedback-panel').css('height', feedbackTab.containerHeight + 'px');
$('a.feedback-tab').click(function (event) {
if ($('.feedback-panel').hasClass('open')) {
$('.feedback-panel')
.animate({ left: '-' + feedbackTab.containerWidth }, feedbackTab.speed)
.removeClass('open');
} else {
$('.feedback-panel')
.animate({ left: '0' }, feedbackTab.speed)
.addClass('open');
}
//event.preventDefault();
});
}
};
feedbackTab.init();
});
</script>
<style type="text/css">
.feedback-panel {
padding:5px;
width: 250px;
background:#C4C4FF;
border: 5 solid #8080FF;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
color: White;
position:fixed;
top:77px;
left:-261px;
}
.feedback-panel a.feedback-tab {
background: url(/images/feedbackbutton.gif) no-repeat scroll 0 0;
display:block;
height:122px;
left:45px;
bottom:5px;
position:relative;
float:right;
text-indent:-9999px;
width:40px;
outline:none;
}
.feedbackformtable
{
width: 215px;
}
.feedbacklabel
{
font-family: Arial Helvetica Sans-Serif;
font-size: medium;
color: Black;
}
.feedbacktextbox
{
width: 200px;
font-family: Verdana;
font-size: 12px;
border: 1px solid #8080FF;
}
</style>
The form is used to send feedback as an email. As soon as the submit button is clicked, the form is closed. Is there any way to keep the form open after clicking the submit button? I want to display a message on the form instead of closing it. Much appreciate any help.
Thanks.
please visit this link and run the code.
http://jsfiddle.net/crisply/mQYVY/
Explain briefly, Green box is added to gray area by clicking [Add box] button.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="../Scripts/jquery-1.8.2.js"></script>
<script src="../Scripts/jquery-ui-1.8.24.js"></script>
<style type="text/css">
.draggable {
position: absolute;
width: 10px;
height: 10px;
background: green;
cursor: move;
}
#canvas {
width: 500px;
height: 400px;
background: #ccc;
position: relative;
margin: 2em auto;
}
#results {
text-align: center;
background: yellow;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(function () {
$(".draggable").draggable({
containment: "parent",
});
$('#btn_add').click(function () {
var htmlData = '<div class="draggable"></div>';
$('#canvas').append(htmlData);
$(".draggable").draggable();
});
});
//]]>
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="canvas">
<div class="draggable"></div>
</div>
<div id="results">coordination</div>
<input type='button' id="btn_add" value='Add box' />
<input type='button' id="btn_getCoord" value="Get Coordination" />
</form>
</body>
</html>
In addition to this code, i want to implement more.
Click the [Add box] button, => point generate random location.
Click the [Get Coordination] button,
=>get the coordination of several points and express result div (yellow area).
Like this.
-Coordination- x:230, y: 222 x:122, y: 233 x:423, y:55
x:50, y:30 ...
Could you please give some components for me?
I really appreciate your help.
http://jsfiddle.net/mQYVY/18/
$(function () {
// This run when the document is ready, so it only effect on first point, it won't effect on new points automatically.
$(".draggable").draggable({
containment: "parent",
});
$('#btn_add').click(function () {
var top = 1 + Math.floor(Math.random() * 390);
var left = 1 + Math.floor(Math.random() * 490);
var htmlData = '<div class="draggable" style="top:'+top+'px;left:'+left+'px;"></div>';
$('.canvas').append(htmlData);
// You need limit draggable containment for new point again.
$(".draggable").draggable({containment: "parent"});
});
$('#btn_getCoord').click(function () {
$('#results').html('-Coordination-');
$('.draggable').each(function(){
var cordInfo = '<br />x: '+$(this).position().left+', y: '+$(this).position().top;
$('#results').append(cordInfo);
});
});
});
Implementation here: http://jsfiddle.net/mQYVY/10/
First part:
var htmlData = $('<div class="draggable"></div>');
var x = Math.floor(Math.random()*501);
var y = Math.floor(Math.random()*401);
htmlData.css({'left': x+'px', 'top': y+'px'});
Second part:
$('#btn_getCoord').click(function() {
var output = '-Coordination-';
$('.draggable').each(function() {
output += '<br />x: ' + $(this).position().left + ', y: ' + $(this).position().top;
});
$('#results').html(output);
});
Updated JS for your first part:
$(function () {
$(".draggable").draggable({
containment: "parent",
});
$('#btn_add').click(function () {
var top = 1 + Math.floor(Math.random() * 390);
var left = 1 + Math.floor(Math.random() * 490);
var htmlData = '<div class="draggable" style="top:'+top+'px;left:'+left+'px;"></div>';
$('.canvas').append(htmlData);
$(".draggable").draggable();
});
});
For the second part follow this link: http://api.jquery.com/offset/
I've followed the code on this link : Using jQuery to center a DIV on the screen and my div isn't centered . Any ideas why ?
in my javascript error console there seems to be no error . Here is my code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="./Scripts/jquery-1.4.1.js" type="text/javascript">
(function ($) {
$.fn.extend({
center: function () {
return this.each(function () {
var top = ($(window).height() - $(this).outerHeight()) / 2;
var left = ($(window).width() - $(this).outerWidth()) / 2;
$(this).css({ position: 'absolute', margin: 0, top: (top > 0 ? top : 0) + 'px', left: (left > 0 ? left : 0) + 'px' });
});
}
});
})(jQuery);
$('#login').center();
</script>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#0066cc">
<form id="form1" runat="server">
<div>
<h1>Welcome to SeeUBook</h1>
</div>
<div id="login">
//some code
</div>
</form>
</body>
</html>
You need to run the plugin on the element once it's in the DOM (on document.ready), like this:
$(function() {
$('#login').center();
});
...currently it's running before there's a id="login" element to find in the page, so it's not centering anything.
You can just write in CSS:
#content {
width: 9999px ;/*how wide you want it or you could set it to auto*/
margin-left: auto ;
margin-right: auto ;
}