Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: ASP.NET
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 3:32am
Ash29470
Comments
gladiatron at 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 at 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?
gladiatron at 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 at 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

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

I think I found it:
 
<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.
  Permalink  
v2
Comments
Ash29 at 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 :-)
gladiatron at 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 at 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 at 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 at 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 at 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
gladiatron at 8-Oct-12 14:35pm
   
can you post your code in the comments? i will take a look.
Ash29 at 8-Oct-12 14:36pm
   
Yes sure..
Ash29 at 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 at 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...
:-\
gladiatron at 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 at 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 at 9-Oct-12 0:47am
   
Well changing the jquery latest version did help.
Thanks alot for the support...
:-)
gladiatron at 9-Oct-12 1:09am
   
Awesome! You are welcome!
Ash29 at 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 at 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!!

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



Advertise | Privacy | Mobile
Web01 | 2.8.150301.1 | Last Updated 8 Oct 2012
Copyright © CodeProject, 1999-2015
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100