PDA

View Full Version : radio group button problem


hussam81
11-14-2012, 08:38 AM
i have job form that consistes 4 radiobutton and the name is same for all "radiogroup1"


i need when i check radiobuttton for ex button1 :go to page1 that displayed in fram on (form page ) button 2 :go to page2 that displayed in fram and hidden page 1 etc pls see the attachment may be describe the problem

gentleone
11-14-2012, 01:23 PM
In browsers that support the :checked pseudo class and the general sibling selector (~) you can do this purely with CSS.
Example: http://cssdeck.com/labs/full/8frlsjio/0


<input type="radio" name="control" value="control-01" id="control-01">
<label for="control-01">1</label>
<input type="radio" name="control" value="control-02" id="control-02">
<label for="control-02">2</label>
<input type="radio" name="control" value="control-03" id="control-03">
<label for="control-03">3</label>
<input type="radio" name="control" value="control-04" id="control-04">
<label for="control-04">4</label>

<div id="content">

<p id="content-01">content 01</p>

<p id="content-02">content 02</p>

<p id="content-03">content 03</p>

<p id="content-04">content 04</p>

</div>

CSS:

#content {
position: absolute;
width: 50%;
left: 0;
top: 0}

input:first-child {
margin-left: 60%}

#content p {
position: absolute;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
padding:0;
margin: 0;
border:0;
height: 1px;
width: 1px;
overflow: hidden}

#content-01 { color: blue }
#content-02 { color: green }
#content-03 { color: black }
#content-04 { color: red }

#control-01:checked ~ #content #content-01,
#control-02:checked ~ #content #content-02,
#control-03:checked ~ #content #content-03,
#control-04:checked ~ #content #content-04 {
position: static;
clip: auto;
height: auto;
width: auto;
overflow: auto}


For browsers that don't support the :checked pseudo class (IE8 and below) you will need selectivzr together with a javascript library/framework (eg. jQuery) as polyfill.
http://selectivizr.com/

The general sibling selector is also buggy in IE7 and IE8 you can read more about that here:
http://reference.sitepoint.com/css/generalsiblingselector#compatibilitysection

If you still have problems with the above browsers, then a fallback solution completely written in JavaScript is the next option.

hussam81
11-14-2012, 01:30 PM
>
thnxx boss
iam already sloved the problem by calling onclick behavirs which mean when click radio button open file in fram but thnkxx again

iam inermediate for develope web sites can you help me
or post your email here or add me khashanhossam@yahoo.com

gentleone
11-14-2012, 01:52 PM
thnxx boss
iam already sloved the problem by calling onclick behavirs which mean when click radio button open file in fram but thnkxx again
Of course this is an option (if you have your onclick behaviors external), but still I would serve the pure CSS solution for browsers that support this and for those that don't, a JavaScript fallback solution. Why would you make something dependent on, and load, JavaScript while it's not necessary in certain browsers?

iam inermediate for develope web sites can you help me or post your email here or add me
If you have questions, just post them here on the forum and help is (most of the time) on the way.