javascript - jQuery & Bootstrap - Replacing a set of classes with button -


i working on making web-based storyboard video build on twitter bootstrap. consists of container 12 images (4 across 3 down) , chunk of text below each image (for different sections of video's script).

to populate script boxes, using jquery's .text method, , images static links. because storyboard have more 12 frames, want show many on-screen @ time, added button @ bottom of page link next page. planning have button hide first 12 frames, , replace them new set. however, can't seem make work.

i added .set01 class of first 12 frames, , next button hides .set01

html

<div class="row">   <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">      <img src="frames/1.png" class="img-responsive" data-toggle="modal" data-target="#modal1" />   </div>   <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">      <img src="frames/2.png" class="img-responsive" data-toggle="modal" data-target="#modal1" />   </div>   <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">      <img src="frames/3.png" class="img-responsive" data-toggle="modal" data-target="#modal1" />   </div>   <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">      <img src="frames/4.png" class="img-responsive" data-toggle="modal" data-target="#modal1" />   </div> </div>  <div class="row">   <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">      <div class="scriptbox set01 frame01">lorem ipsum dolor sit amet, consectetur adipisicing elit</div>   </div>   <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">     <div class="scriptbox set01 frame02">sed eiusmod tempor incididunt ut labore et dolore magna aliqua</div>   </div>   <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">      <div class="scriptbox set01 frame03"> ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</div>   </div>   <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">      <div class="scriptbox set01 frame04">nisi ut aliquip ex ea commodo consequat</div>   </div> </div>  <input type="button" class="btn btn-warning btn-large nextbutton" value="next page"/>

js

var populate1 = function(){   $(".frame01").text("it worked!");   $(".frame02").text("it worked!");   $(".frame03").text("it worked!");   $(".frame04").text("it worked!");   } $(document).ready(populate1);  $("nextbutton").click(function{ $(".set01").hide(); });

the populate1 function works fine, when add in button's function breaks it, if don't click on button. i'm stumped!

thanks in advance help!

there numerous things can done, starting wrapping in document.ready statement. resolve concerns, did not include "period" before "nextbutton" in click event - button. however, event being triggered because left out open , close parens between function , { in same statement. should be:

var populate1 = function(){     $(".frame01").text("it worked!");     $(".frame02").text("it worked!");     $(".frame03").text("it worked!");     $(".frame04").text("it worked!"); }  $(document).ready(populate1);  $(".nextbutton").click(function(){     $(".set01").hide(); });

Comments

Post a Comment

Popular posts from this blog

apache - Remove .php and add trailing slash in url using htaccess not loading css -

i have add following code htaccess file removing .php extension , add trailing slash urls. worked fine reduced page loading speed , css code not loading @ all. pages ugly. please help rewriteengine on rewritebase / ## hide .php extension snippet # externally redirect /dir/foo.php /dir/foo rewritecond %{the_request} ^[a-z]{3,}\s([^.]+)\.php [nc] rewriterule ^ %1/ [r,l] # add trailing slash rewritecond %{request_filename} !-f rewritecond %{request_uri} !/$ rewriterule . %{request_uri}/ [l,r=301] # internally forward /dir/foo /dir/foo.php rewritecond %{request_filename} !-d rewritecond %{request_filename}.php -f rewriterule ^(.*?)/?$ $1.php [l] we can rewrite urls using .htaccess files. before writing in .htaccess files need verify kind of server using. can check server adding a <?php phpinfo(); ?> in php page. ensure mod_rewrite module enabled in apache server. can identified checking phpinfo included page. common methods used url rewriting follows ...
Read more

javascript - jQuery show full size image on click -

pretty self explanatory not workking . i want display full image when user click on image... yes know there tons of plugins but i want keep simple. any idea ? css : .full { display: none; width: 500px; height: 500px; margin-left: 100px; margin-top: -300px; position: fixed; background-color: #f00; z-index: 6; } .thumbnail { width: 50px; height: 50px; } html: <img class="thumbnail" src="http://4.bp.blogspot.com/-uhbdp2esxng/txneptvi92i/aaaaaaaaaky/upfqis7zto0/s1600/rihanna-wallpaper.jpg"> jquery: $(document).ready(function() { $('.thumbnail').on('click', function() { var img = $('<img />',{src:this.src,'class':'full'}); $('.full').html(img).show(); console.log('done!'); }); }); try looking how jquery works. $(document).ready(function() { $('.thumbnail').on('click', function(...
Read more