mim_jr
asked on
Swapping of controls on a web form (mirror image) (ASP.NET)
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
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
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
I think COBOLdinosaur's answer would solve your issue
ASKER
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
[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
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.cla ssName='bo xleft';cc. className= 'boxright' ;return false;">
<input type="button" value="switch" onclick="javascript:aa.cla ssName='bo xright';cc .className ='boxleft' ;return false;">
</body>
</html>
<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.cla
<input type="button" value="switch" onclick="javascript:aa.cla
</body>
</html>
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.getEleme ntById('bo d').style. direction= 'ltr';retu rn false;">
<input type="button" value="switch" onclick="document.getEleme ntById('bo d').style. direction= 'rtl';retu rn 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.
<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.getEleme
<input type="button" value="switch" onclick="document.getEleme
</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.
>>>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&
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&
[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_c
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.