Expiring Today—Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Swapping of controls on a web form (mirror image) (ASP.NET)

Posted on 2004-10-20
9
Medium Priority
?
193 Views
Last Modified: 2010-04-06
HI All!!
 I am developing an application in ASP.NET (code behind VB.NET) and one of the main functionality of the page is that on clicking of a button on the page, a mirror image of the page is shone (all the controls on the page are swapped eg. All controls from right to left will now be left to right).
 Could you pls give me the codes for doing this? it would be great if I could get codes in VB.NET
0
Comment
Question by:mim_jr
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
9 Comments
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
ID: 12374812
When you generate the page give the body an id:

<body id="bod">

Then the control looks like this:

<input type="button" value="mirror image"
onclick="document.getElementById('bod').style.direction='rtl'">


Cd&
0
 
LVL 5

Expert Comment

by:crimson117
ID: 12386663
Do you mean make the text you enter have its direction reversed, or do you mean:

[button1] [button2] [input3]

when you click the switch button/link, it becomes:

[input3] [button2] [button1]

?

You could probably use a div around each form element, then position each div with CSS.  

   <div class='css_class1' id='div1'><input type='text'></div>

When you want to reposition the fields, use javascript:

   div1.class='reversed_css_class1';


Note: this wouldn't be very scalable - you'd have to change the code if you changed the number of elements on the page.

A better implementation would be to parse the DOM of the page, then rewrite it with the form elements in backwards order, but I'm not a DOM expert so css is how I'd do it :-)

And actually, if you're of the "css=layout" "html=data" school of thought, then my first solution is actually better than messing with the DOM with javascript.
0
 
LVL 2

Expert Comment

by:udayms
ID: 12387053
I think COBOLdinosaur's answer would solve your issue
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

Author Comment

by:mim_jr
ID: 12387321
Thank !! well yes i want it 2 b like ..
[button1] [button2] [input3]

when you click the switch button/link, it becomes:

[input3] [button2] [button1]

Can you pls let me know the contents of the 'reversed_css_class1'...
....
I will also try the solution given by  COBOLdinosaur's today... thanks to all
0
 
LVL 5

Expert Comment

by:crimson117
ID: 12388718
As I said, this isn't very scalable, but it works:


<html>
<head>

<style type="text/css">
.boxleft
{
position: absolute;
top: 100px;
left: 50px;
background-color: blue;
color: white;
}

.boxmiddle
{
position: absolute;
top: 140px;
left: 100px;
}

.boxright
{
position: absolute;
top: 180px;
left: 150px;
background-color: red;
color: black;
}

}
</style>

</head>

<body>
<input size=10 id="aa" type="text" class="boxleft" value="a">
<input size=10 id="bb"  type="text" class="boxmiddle" value="b">
<input id="cc"  type="button" class="boxright" value="c button">

<input type="button" value="orig" onclick="javascript:aa.className='boxleft';cc.className='boxright';return false;">

<input type="button" value="switch" onclick="javascript:aa.className='boxright';cc.className='boxleft';return false;">


</body>
</html>

0
 
LVL 5

Expert Comment

by:crimson117
ID: 12388767
Actually cobols works pretty darn well too, as long as you don't have elements positioned with CSS:

<html>
<head>

<style type="text/css">
.boxleft
{

background-color: blue;
color: white;
}

.boxmiddle
{
color: purple;
font-weight: bold;
}

.boxright
{

background-color: red;
color: black;
}

}
</style>

</head>

<body id="bod">
 <input size=10 id="aa" type="text" class="boxleft" value="a">
<input size=10 id="bb"  type="text" class="boxmiddle" value="b">
<input id="cc"  type="button" class="boxright" value="c button">

<input type="button" value="orig" onclick="document.getElementById('bod').style.direction='ltr';return false;">

<input type="button"  value="switch" onclick="document.getElementById('bod').style.direction='rtl';return false;">

</body>
</html>


If you have elements positioned with CSS, the CSS will override the style.direction, and instead only the text-direction inside the input boxes will change.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12389870
>>>If you have elements positioned with CSS, the CSS will override the style.direction, and instead only the text-direction inside the input boxes will change.

Break the inheritance; of course.  If you have cascades, you have to maintain them.  It is no different for any CSS property they have scope, contraints and inheritance characteristics.


You can scope it from a single element to a page, and you can overlay the styles to ge twhatever effect you want.  That is a primary reason for using CSS.

Cd&
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Preface In the first article: A Better Website Login System (http://www.experts-exchange.com/A_2902.html) I introduced the EE Collaborative Login System and its intended purpose. In this article I will discuss some of the design consideratio…
It's sometimes a bit tricky to use date functions in Oracle BPEL. I'll explain quickly how you can add N days to the current date. In a BPEL process this can be useful, and you can adapt it to fit your needs. First of all, let's see how to add 1 …
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

718 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question