i have 3 radio buttons, they’re called “easy” “medium” , “hard”. each 1 linked separate javascript function. these functions show 1 div while hiding 2 other divs.
the purpose of user able choose option , see div option, example, if press “easy” radio button “easy” div should shown, , “medium” , “hard” divs should hidden.
i’ve been trying work week , think i’ve tried every related suggestion on stackoverflow, hope there’s small i’m missing.
these radio buttons in html:
<td width="100"><div align="center" class="radio"> <input type="radio" name='thing' value='valuable' id="easy" onclick="showeasy()"/></div> </td> <td width="100"><div align="center" class="radio"> <input type="radio" name='thing' value='valuable' id="medium" onclick="showmedium()"/></div> </td> <td width="100"><div align="center" class="radio"> <input type="radio" name='thing' value='valuable' id="hard" onclick="showhard()"/></div> </td> these divs want show/hide:
<td colspan="8" rowspan="12" align="center"> <div align="center" id="easydiv"><img src="/images/pic1.jpg" alt="if can see this, image didn't load properly." class="distort1" id="sample"/></div> <div align="center" id="mediumdiv"><img src="/images/pic2.jpg" alt="if can see this, image didn't load properly." class="distort2" id="sample1"/></div> <div align="center" id="harddiv"><img src="/images/pic3.jpg" alt="if can see this, image didn't load properly." class="distort3" id="sample2"/></div> </td> and script have @ top of page, each function should show 1 div @ time:
<script> function showeasy() { $("#easydiv").removeclass("displaynone"); //make sure mediumdiv not visible $("#mediumdiv").addclass("displaynone"); //make sure harddiv not visible $("#harddiv").addclass("displaynone"); } function showmedium() { $("#mediumdiv").removeclass("displaynone"); //make sure easydiv not visible $("#easydiv").addclass("displaynone"); //make sure harddiv not visible $("#harddiv").addclass("displaynone"); } function showhard() { $("#harddiv").removeclass("displaynone"); //make sure easydiv not visible $("#easydiv").addclass("displaynone"); //make sure mediumdiv not visible $("#mediumdiv").addclass("displaynone"); } </script> i want medium div shown @ start, have showmedium(); set run once page has finished loading, hides easy , hard divs. problem 3 divs visible second or 2 until every page element finished loading. once everything’s loaded, showmedium(); runs , easy , hard divs hidden.
this looks bad user, i’ve been trying find way have these 2 divs hidden default , have medium div showing @ start.
i’ve tried several methods, i’ve tried hiding 2 divs setting divs <div hidden>
i’ve tried hiding 2 divs setting style display:none this:
<div align="center" id="easydiv" style="display: none;"><img src="" alt="if can see this, image didn't load properly." id="sample"/></div> and show each div tried changing style display: inline , display: block including code inside javascript function above.
these attempts didn’t work, 2 divs hidden (because didn’t appear when page loading) whenever tried clicking on easy or hard radio buttons, while medium div disappeared correctly, replaced empty space, meaning easy , hard divs still hidden.
i can’t work out how working, seems way can have radio buttons working , showing/hiding correct divs, have 3 load/appear on screen second or 2 while page loads. i’d appreciate advice on getting work way i’d to. i’ll try suggestions , thank in advance help!
update
i've created version plugin included:
a couple of notes:
1) i've included plugin in fiddle, code @ bottom of section.
2) plugin you're using old...if need use make sure use jquery migrate on page: https://github.com/jquery/jquery-migrate/#readme (just import along regular jquery).
3) issue being caused plugin's internal code. resolve it, instead of hiding images using display:none, used visibility:hidden. different because whereas display:none renders page though element never there begin with, visibility:hidden hides element, still take space on page.
4) because visibility:hidden leaves blank spaces on page image have been, added wrapper <div> (with class of .container) , used css place 3 images on top of each other. since 1 image displayed @ time, images in expected position (you can play around demo removing new css styles , see effects).
let me know if helps!
i've created jsfiddle demo of solution should know many of techniques you're using out-of-date , not best practice (for example - never use tables display non-tabular information).
in example, i've corrected few of these:
when page loads, i've set css display desired div element.
after that, new div elements dynamically displayed , hidden based on radio button selection. main handler is:
$('.radio input').on('click', function(){ //hide image divs $imagedivs.css('display','none'); //then display image div want see //to find out we'll id of current radio button var radioid = $(this).attr('id'); //and we'll display image div $('#' + radioid + 'div').css('display','block'); }); let me know if answers question :)
Comments
Post a Comment