jquery - Change function “document.getElementById” to “document.getElementsByClassName” & add fade in/out - JavaScript -


my knowledge of javascript incredibly limited , hope able me out!

i have code below, i'm trying make code work class rather id , add fade in/out effect on these functions. i've added class , id set try make clear possible i'm trying do.

<!doctype html> <html>   <head>     <style>           .sub1, .sub2 {         float: right;         background-color: blue;         width: 250px;         height: 250px;         display: none;         }          #sub1, #sub2 {         float: right;         background-color: red;         width: 250px;         height: 250px;         display: none;         }      </style>     <script language="javascript" type="text/javascript">     // class         function settabshidden(tabtohide)         {          document.getelementsbyclassname('.sub1').style.display = "none";          document.getelementsbyclassname('.sub2').style.display = "none";          }           function settabsvisible(tabtoshow)         {          document.getelementsbyclassname('.sub1').style.display = "none";          document.getelementsbyclassname('.sub2').style.display = "none";           document.getelementsbyclassname(tabtoshow).style.display = "block";          }      // id         function settabshidden(tabtohide)         {          document.getelementbyid('sub1').style.display = "none";          document.getelementbyid('sub2').style.display = "none";                                   $(tabtohide).fadeout("slow");         }           function settabsvisible(tabtoshow)         {          elements = document.getelementbyid('sub1').style.display = "none";          elements = document.getelementbyid('sub2').style.display = "none";           elements = document.getelementbyid(tabtoshow).style.display = "block";          $(tabtoshow).fadein("slow");          }          </script>     </head>   <body>      <div id="main">     <input type=button name=type value='class1' onclick="settabsvisible('.sub1');";>     <input type=button name=type value='class2' onclick="settabsvisible('.sub2');";>     <input type=button name=type value='id1' onclick="settabsvisible('sub1');";>     <input type=button name=type value='id2' onclick="settabsvisible('sub2');";>      <input type=button name=type value='hide' onclick="settabshidden();";>       <div class="sub1" id="sub1"></div>      <div class="sub2" id="sub2"></div>    </body> </html>

your getelementsbyclassname won't work because don't want include period before class name (you'll notice byid doesn't include #. same idea) change sub1 or sub2 or whatever , should start working.

you have 4 functions defined have same names, isn't going work.

you'll have name them different "settabsvisiblebyclass" ....or can use 2 functions pass in parameter letting know whether it's class or id want use.

your example code uses jquery fading. if you're planning on using jquery don't need logic. can handle you:

$(".sub1, .sub2").hide()

or, if they're contained do:

$(tabtoshow).siblings().hide()

and don't have remember different class names.

if you're not planning on using jquery fading use css transitions. like:

.sub1, .sub2, .sub3 {     opacity: 0; }  .sub1.active, .sub2.active, .sub3.active {   opacity: 1;  -webkit-transition: opacity 1s linear;   -moz-transition: opacity 1s linear;   -ms-transition: opacity 1s linear;   -o-transition: opacity 1s linear;   transition: opacity 1s linear; }

annnd

document.getelementbyid(tabtoshow).setattribute("class", "active")

of course, method means not using display: none, might important you. in case may want add event listeners transitionend know when add display: none.


Comments

Post a Comment

Popular posts from this blog

ios - iPhone/iPad different view orientations in different views , and apple approval process -

i force app's home screen portrait , other views landscape. apple rejects app if this? if not , how force first screen launch in portrait mode? , force other screens launch in landscape. this not duplicate question search every possible answer in website. i force app's home screen portrait , other views landscape. apple rejects app if this? no apple not reject app this. have lot of apps doesn't support orientation. forcing on 1 screen won't cause app reject. if not , how force first screen launch in portrait mode? , force other screens launch in landscape. can on write : -(nsuinteger)supportedinterfaceorientations; function.
Read more

java Extracting Zip file -

i'm looking way extract zip file. far have tried java.util.zip , org.apache.commons.compress, both gave corrupted output. basically, input zip file contain 1 single .doc file. java.util.zip: output corrupted. org.apache.commons.compress: output blank file, 2 mb size. so far commercial software winrar work perfectly. there java library make use of this? this method using java.util library: public void extractzipnative(file filezip) { zipinputstream zis; stringbuilder sb; try { zis = new zipinputstream(new fileinputstream(filezip)); zipentry ze = zis.getnextentry(); byte[] buffer = new byte[(int) ze.getsize()]; fileoutputstream fos = new fileoutputstream(this.tempfolderpath+ze.getname()); int len; while ((len=zis.read(buffer))>0) { fos.write(buffer); } fos.flush(); fos.close(); } catch (filenotfoundexception e) { // todo auto-generated catch block ...
Read more

C# WinForm - loading screen -

i ask how make loading screen (just picture or something) appears while program being loaded, , disappears when program has finished loading. in fancier versions, have seen process bar (%) displayed. how can have that, , how calculate % show on it? i know there form_load() event, not see form_loaded() event, or % property / attribute anywhere. all need create 1 form splash screen , show before main start showing landing page , close splash once landing page loaded. class splashform { //delegate cross thread call close private delegate void closedelegate(); //the type of form displayed splash screen. private static splashform splashform; static public void showsplashscreen() { // make sure launched once. if (splashform != null) return; thread thread = new thread(new threadstart(splashform.showform)); thread.isbackground = true; thread.setapartmentstate(apartmentstate.sta); thread....
Read more