javascript - Turning two elements visible/hidden in the same div -


i having problem turning 1 element on , other off in same div. seems create object supposed this, , when click on it, hides entire div instead of turning 1 element on , 1 off. else need add make work?

css

#test1 {     width:804px; margin-left:auto; margin-right:auto; height:250px; float:left; overflow:hidden; display:none; }  #test2 {     width:804px; margin-left:auto; margin-right:auto; height:250px; float:left; overflow:hidden; display:block; }  .mydiv {  }  #test {     width:804px; margin-left:auto; margin-right:auto; height:250px; float:left; overflow:hidden; }  #labor{     float:left; width:38px; height:125px; }  #odc {     float:left; width:32px; height:125px; }

html

 <div id="test">  <div class="mydiv" id="test1">     <script src="../../dashboard/charts/fusioncharts.js" type="text/javascript"></script>     <div id="line3chartcontainer" style="display:normal">         <asp:literal id="literal9" visible="true" runat="server"></asp:literal></div>  </div>  <div class="mydiv" id="test2">     <script src="../../dashboard/charts/fusioncharts.js" type="text/javascript"></script>     <div id="popchartcontainer"  style="display:normal">         <asp:literal id="literal3" visible="true" runat="server"></asp:literal></div>  </div>  </div>   <img src="../../images/labortab.png" id="labor" onmousedown="document.test1.visibility='false';document.test2.visibility='true';"/>  <img src="../../images/odctab.png" id="odc" onmousedown="document.test1.visibility='true';document.line3chartdiv.visibility='false';"/>

hope better looking.

the common method accomplishing this

you should using jquery , not pure javascript. follow these steps:

  1. create class called hidden , inside it, add style value display:none
  2. use toggleclass or addclass/removeclass on element change visibility.

here code example of jquery:

$(function(){     $('#labor').click(function(){         $('div[name=test1]').addclass('hidden');         $('div[name=test2]').removeclass('hidden');     });      $('#odc').click(function(){         $('div[name=test1]').removeclass('hidden');         $('div[name=test2]').addclass('hidden');     }); });

and here demonstration (i tried use of code, there missing images):

how speed javascript code

a practice create class hiding elements within page (for example, 'hidden') , use purposes throughout page. toggling value of specific css styles less efficient, , recommended toggle classes instead.

here enlightening lecture google font-end engineer nicholas zakas on javascript optimization (this opened eyes on few things in jscript):

how implement jquery

in order use (and countless other) jquery methods, must first install jquery application. unfortunately beginners, can sound little overwhelming.

the secret installing jquery . . .

the secret realize installing jquery doesn't involve installation per se. needs happen able use jquery in application, reference jquery code file. tip: jquery code file created copy/pasting jquery code text file, , changing file extension .js. then, reference jquery code, place reference link in header. here example of 1 of own website headers:

screenshot of

what means . . .

here see references 3 different javascript code files. the first file provides intelli-sense visual studio developer environment. the second references jquery code file (this 1 you'll need, have change actual address of file of course). the third reference jquery ui code file.

where code file . . .

the latest jquery code file can downloaded from jquery home page or referenced using 1 of google's coding libraries; host many of these source code online easy access. can find directory of these hosted code files in google hosted libraries - developer guide.

video tutorial illustrating steps above . . .

i haven't watched myself, has apparently helped lot of budding web designers grasp concept:

what ".min" mean?

you may notice of these files include .min in names. indicates file has been "minified". means code has been refractored in way makes small possible, unreadable humans. you'll see done downloaded jquery files; they'll come 1 normal version (for viewing pleasure) , 1 minified version more practical use.


Comments

Post a Comment

Popular posts from this blog

How to mention the localhost in android -

i trying call localhost in android application. unfortunately not possible used several methods emulator local host http://10.0.2.2/android/dbconnection.php and network ip address http://192.168.1.xx/android/dbconnection.php also http://localhost:8080/android/dbconnection.php but nothing connected localhost. purpose refer stackoverflow answers not working i facing same problem when worked on localhost. referred stackoverflow answer got solution create new emulator works fine in new emulator.
Read more

php - Calling a template part from a post -

i include iframe within post in wordpress. located inside content of post, meaning cannot in post template file, otherwise either before or after. i'd add facebook plugin within posts: <div id="socialwrap"><div class="fb-like" data-href="http://onlinearizonahomes.info" data-send="true" data-width="450" data-show-faces="true" data-font="arial"></div></div> i thinking of calling template part within post <?php get_template_part( 'social' ); ?> cannot use php within post without plugin (i'd avoid using plugin this). an alternative using javascript create html in post, seems unnecessary use of javascript. what best way add html within wordpress post? you can use shortcode. add functions.php function cudjex_fbshare( $atts, $content = null ) { global $post; $link = get_permalink($post->id); return '<div id="socialwrap...
Read more