IFrame or Hidden Div is suitable for sliding content?

Question

i am bad at explanation , so bear with me for a moment. I would like to ask on some opinion. Refer to the image i drawn , the Black border is fixed and would not change. What i am trying to achieve is by clicking at Button A/B/C will look into different content.
1)A/B/C Button what technique should i use as i wanted an arrow to stick to the button i click.Should i use Radio button and make it like button ? What is this technique call ?
2)the Blue border is where my content will change according to the button click. Should i use IFRAME or should i use DIV and Hidden it ?

I'm new to web designing. Trying to learn as much as possible.

Please refer the image

enter image description here

my suggestion is for hiding and showing content you can use `divs` with slideUp/slideDown and for arrow use an image below the button. — yashhy, Dec 31 '13 at 06:24
@Yashhy would it be simple to use IFRAME without border ? as the webadmin can change the content easily by just modifying the linked html file ? — user2982110, Dec 31 '13 at 06:29
it depends on how much the content is. If the content is small you can go for `div` else an `iframe` http://stackoverflow.com/questions/6000987/dynamically-set-iframe-src refer to change `src` of `iframe` dynamically — yashhy, Dec 31 '13 at 06:34
Ok , now i decided to make it on landing the default was Button A Checked and the Content as IFRAME will get the content from Content A.Where should i refer for tutorial on making the Radio button into an Buton and a Arrow sticking to it ? — user2982110, Dec 31 '13 at 06:45

deepak · Answer 1 · 2013-12-31T07:07:49.100

0

if you use iframe it will take time to call to server and page load and as request goes higher so it won't remain efficient too use jquery to show hide here is an example of mine

$(function(){
    $('.tabbox_1').show();
    $('.tab').click(function(){
        var tabid = $(this).attr('id').replace('tab_','');
        $('.tab').removeClass('active');
        $(this).addClass('active');
        if($('.tabbox_'+tabid).is(':visible')){
             $('.tabbox').hide();
        }
        $('.tabbox_'+tabid).fadeIn();

    });

});

Then there is html code for div

<div>
    <ul class="tabpan">
        <li class="tab" id="tab_1">One</li>
        <li class="tab" id="tab_2">One</li>
        <li class="tab" id="tab_3">One</li>
    </ul>
    <div>
         <div class="tabbox tabbox_1">
              tab 1 content
         </div>
         <div class="tabbox tabbox_2">
              tab 2 content
         </div>
         <div class="tabbox tabbox_3">
              tab 3 content
         </div>
</div>

dont forget style

<style>
.tabbox{display:none}
.tabpan li{float:left;padding:5px;background:#ddd;color:#fff;font-weight:bold;border:1px solid #ddd}
.tabpan .active{background:#fff;color:#ddd;border:1px solid #ddd}
</style>

Hope this works for you

If you still want to stick with iframe and radio button there is a css code which i have tried with two images it works you can change that background image on check of radio button

.checkbox_wrapper{position: relative;width:45px;height:101px;margin:10px auto;}
.checkbox_wrapper input[type="checkbox"] {opacity:0;width:45px;height:101px;position: absolute;top: 0;left: 0;z-index: 2;}
.checkbox_wrapper input[type="checkbox"] + label{background:url('../imgs/off.png') no-repeat;width:45px;height:101px;display:inline-block;padding: 0 0 0 0px;position: absolute;top: 0;left: 0;z-index: 1;}
.checkbox_wrapper input[type="checkbox"]:checked + label{background:url('../imgs/onn.png') no-repeat;width:45px;height:101px;display:inline-block;padding: 0 0 0 0px;}

here is the html code use your images for check and uncheck and yes there is one onother css class for horizontal representation. Its very random so forgive me if you find mistake

.checkbox_wrapper{float:left;margin:4px;}
<div class="checkbox_wrapper">
        <input type="checkbox" id="chk_btn" />
        <label></label>
    </div>

edited Dec 31 '13 at 07:07

answered Dec 31 '13 at 06:48

deepak

346
1
5

will try this method , but can you show me a way to make the radio button look like a horizontal menu ? and the arrow sticking to it when selected ? TQ – user2982110 Dec 31 '13 at 06:56
see my post again it have both solutions for you – deepak Dec 31 '13 at 07:08
http://jsfiddle.net/UpLs9/6/ refer to the jsfiddle. if i click 3 of the box , the 3 content will be loaded out. But i wanted it to work as radio just one can be choosen :) – user2982110 Dec 31 '13 at 07:53
i don't have much idea about radio button but you can try my example of radio button over there instead of background image try background color then my be you will find what you want – deepak Dec 31 '13 at 09:17
Well it worked as well with check box.} btw , what is the "checkbox_wrapper" doest ? could't figure out – user2982110 Dec 31 '13 at 10:00
http://jsfiddle.net/uU9XZ/17/ thing that i am trying to achieve is similar to this. is there any way to make the word at center of the LIST ? and how do i make an active arrow ? TQ – user2982110 Dec 31 '13 at 10:09
checkbox_wrapper nothing but a wrapper to wrap checkbox and lable so we not need to give extra label for them and for your second comment instead of giving height width you can try padding try this if need any changes then give padding only in top and bottom, put text-align center and make width as you want like you did in your example (300px) see this fiddle http://jsfiddle.net/deepak_datwani/Nh8sj/2/ – deepak Dec 31 '13 at 10:30
thought that there is a way to centered it auto , now i know that it need to be adjusted with padding. Thank You. Btw , how do i modify the script by making it to different iframe src ? but not the
– user2982110 Dec 31 '13 at 10:49
great ! thanks alot ! one more request. i wanted the tab_1 to be default on page load. what should i do ? thank you – user2982110 Dec 31 '13 at 11:35
just figured out adding active beside tab will do the job ! :D – user2982110 Dec 31 '13 at 11:55
are you talking about iframe so i don't know about that but in js you can make it show with name of particular id as i have done in my fiddle example before you can see over there (happy new year) :) – deepak Dec 31 '13 at 13:33

IFrame or Hidden Div is suitable for sliding content?

1 Answers1