How to create a div based on user entered values

Question

0.00/5 (No votes)

See more:

Hi,
I am working on a web development project in asp.net dealing with generating a image based on the user entered length and width.
Mainly we provide them in CSS style
but can we accomplish the same in creating an image with user entered values?
Please Help... any guidance in this regard will be appreciated.
Thanks!!

Posted 8-Oct-12 2:32am

Ash29

Add a Solution

Comments

I.explore.code 8-Oct-12 8:46am

can you not render the image in a default sized div first and then let the user resize the image/div? I suppose that will be easier to achieve and would not really need any server side interactions.

Ash29 8-Oct-12 8:49am

thanks for that wonderful suggestion,
i hav already placed a image based on the css style with specific height and width.
how can that be changed at runtime?

I.explore.code 8-Oct-12 8:56am

u can try using jQuery selectors to read height and width from the controls and then use the css function to apply that width and height to the image. See if that works, coz its been a while since i last used something like that so its really just off the top of my head. Give that a go and i will see if i can find something better but don't count on it :)

Ash29 8-Oct-12 8:59am

Thanks mann.. a sight of relief now :-)
well certainly i wil give a try to the same...
seems like a challenging task though :-\

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

I.explore.code · Accepted Answer · 2012-10-08T03:03:00

Solution 1

I think I found it:

XML

<script language="javascript" src="Scripts/jquery1.7.js" type="text/javascript"></script>
<script language ="javascript" type="text/javascript">
    $(document).ready(function () {
        $("#btnFU").click(function (e) {
            var w = $("#txtW").val();
            var h = $("#txtH").val();
            $("#actualimg").css("width", w);
            $("#actualimg").css("height", h);
            e.preventDefault();
        });
    });
</script>

<img id="actualimg" src="images/abc.png" alt="some image" style="width:200px" />
<asp:label text="height" id="lblht" runat="server" xmlns:asp="#unknown"></asp:label>
<asp:textbox id="txtH" runat="server" clientidmode="Static" xmlns:asp="#unknown"></asp:textbox>
<asp:label text="width" id="Label1" runat="server" xmlns:asp="#unknown"></asp:label>
<asp:textbox id="txtW" runat="server" clientidmode="Static" xmlns:asp="#unknown"></asp:textbox>
<asp:button id="btnFU" runat="server" text="Resize" clientidmode="Static" xmlns:asp="#unknown" />

The jQuery method css() does the trick when you pass in the values provided by the user. See if this works.

Posted 8-Oct-12 3:03am

I.explore.code

Updated 8-Oct-12 3:04am

v2

Comments

Ash29 8-Oct-12 13:07pm

Thanks alot for that....
infact thanks a million
well i did place the .js file and the image in the necessary location
but on click of the button it is not enlarging or changing.
So, just trying the N probabilities of trial and error :-)

I.explore.code 8-Oct-12 13:20pm

:) you're welcome! Glad could help! i just noticed code project seems to have added "xmlns:asp:#unknown" to my ASP.NET markup. I hope you haven't copied that too, that just seems to be some gibberish. If indeed you have copied that too, try removing it and see if it works then.

Ash29 8-Oct-12 13:41pm

Hie,
Its quite relaxing for me as this being my first project since i completed my Masters, was struggling in putting forth the thoughts processed by the peer.
Well with the example provided by you it helped me to atleast assure them that it can be worked out as the way they thought to solve this problem.
And yea i have remove that xmlns
still hard luck :-(

Ash29 8-Oct-12 13:44pm

Well the main aim behind this exercise is that i need to create a test room for a furniture website.
Sounds interesting isnt it :-)
well on first choosing a room, then appears the number of walls that will actually be present in that room, n finally consider that wall which i am working on, as different people will be having different wall sizes.
So we wanna provide flexibility to the user to choose size as per his desire.

Ash29 8-Oct-12 13:50pm

well surprising to notice that if i click on resize button without providing any values hen it automatically increases up
but on entering values nothing happens.

Ash29 8-Oct-12 14:18pm

Sir,
is the code getting executed on your machine sir?
as i m constantly observing the text n wondering y is it not taking effect.
wish there was a debugger in visual studio :-D

I.explore.code 8-Oct-12 14:35pm

can you post your code in the comments? i will take a look.

Ash29 8-Oct-12 14:36pm

Yes sure..

Ash29 8-Oct-12 14:41pm

<%@ Page Language="c#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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>Untitled Page</title>
</head>
<script language="javascript" src="Scripts/jquery-1.2.6.js" type="text/javascript"></script>
<script language ="javascript" type="text/javascript">
$(document).ready(function () {
$("#btnFU").click(function (e) {
var w = $("#txtW").val();
var h = $("#txtH").val();
$("#actualimg").css("width", w);
$("#actualimg").css("height", h);
e.preventDefault();
});
});
</script>

<body>
<form id="form1" runat="server">
<div>
<img id="actualimg" src="images/abc.jpg" alt="some image" />

<asp:label text="height" ID="lblht" runat="server">
<asp:textbox id="txtH" runat="server">
<asp:label text="width" id="Label1" runat="server">
<asp:textbox id="txtW" runat="server">
<asp:button id="btnFU" runat="server" text="Resize" />
</div>
</form>
</body>
</html>

Ash29 8-Oct-12 15:01pm

Well sir, some text here above i guess has not got displayed like closing tags of asp:.....
well on having a look at the formatted code, i do feel that something iz going missing...
:-\

I.explore.code 8-Oct-12 15:10pm

You are missing this: ClientIDMode="Static" property for textboxes and the button. What this property does is tell the server to use the ID that has been provided for e.g. "btnFU" rather than generating its own at runtime when the page is rendered. Since you have not included that property, jQuery cannot find btnFU because its been rendered with an autogenerated ID that looks something like "ctl001_$blahblah". If you put this property back in both the text boxes and the button, it should work.

Ash29 8-Oct-12 23:01pm

Hi, Good Morning Sir,
well I had tried the same code given by u and by removing xmlns:asp="#unknown" too
so here is what i had worked upon.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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 id="Head1" runat="server">
<title>Untitled Page</title>
</head>
<script language="javascript" src="Scripts/jquery-1.2.6.js" type="text/javascript"></script>
<script language ="javascript" type="text/javascript">
$(document).ready(function () {
$("#btnFU").click(function (e) {
var w = $("#txtW").val();
var h = $("#txtH").val();
$("#actualimg").css("width", w);
$("#actualimg").css("height", h);
e.preventDefault();
});
});
</script>

<body>
<form id="form1" runat="server">
<div>
<img id="actualimg" src="images/abc.jpg" alt="some image" style="width:200px" />
<asp:label text="height" id="lblht" runat="server">
<asp:textbox id="txtH" runat="server" clientidmode="Static">
<asp:label text="width" id="Label1" runat="server">
<asp:textbox id="txtW" runat="server" clientidmode="Static">
<asp:button id="btnFU" runat="server" text="Resize" clientidmode="Static" />
</div>
</form>
</body>
</html>
I do feel that the jquery1.2.6.js that i m using might b the reason for not taking effect.
As the solution provided by you uses jquery1.7.js

Ash29 9-Oct-12 0:47am

Well changing the jquery latest version did help.
Thanks alot for the support...
:-)

I.explore.code 9-Oct-12 1:09am

Awesome! You are welcome!

Ash29 23-Nov-12 21:34pm

Hi,
How do I create multiple such divs based on a single button click?
Considering an example of a box having height, width and depth; we have to show each side of that box in which case only two values will be needed everywhere.
That is height and width for front view, then for top it wil be width and depth and so on...
Can you please help me to accomplish the same?
thanks!

Ash29 25-Nov-12 15:05pm

Sir,
this part of code really helped me in my project.
Is it possible to create more than one such div based on user entered height and width?
i mean the next time user will change the image height and width so how do i create another image div next to the earlier created div following the same code.
kindly help
thanks!!

How to create a div based on user entered values

1 solution

Solution 1

Add your solution here

Preview 0

How to create a div based on user entered values

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us