javascript - next(), closest() and find() -

-

i have following html markup, 

<section>     <img width="106" height="113" title="key-staff-tim" alt="key-staff-tim" class="attachment-post-thumbnail wp-post-image" src="http://wp-content/uploads/2011/07/key-staff-tim.jpg">                   <article class="biography visible" style="display: block;">         <h3>director</h3>         <p>aliquam sagittis purus vitae turpis elementum sed congue lectus tempor. integer eleifend vestibulum tristique. pellentesque ut risus leo. duis tempus sollicitudin viverra. pellentesque laoreet, justo ut dictum mattis, tellus odio dapibus lacus, convallis lobortis massa dolor nec quam.</p>         <p>aliquam sagittis purus vitae turpis elementum sed congue lectus tempor. integer eleifend vestibulum tristique. pellentesque ut risus leo. duis tempus sollicitudin viverra. pellentesque laoreet, justo ut dictum mattis, tellus odio dapibus lacus, convallis lobortis massa dolor nec quam.</p>     </article>   <img width="107" height="114" title="key-staff-chris" alt="key-staff-chris" class="attachment-post-thumbnail wp-post-image" src="http://wp-content/uploads/2011/07/key-staff-chris.jpg">                    <article class="biography" style="top: 300px;">         <h3>director</h3>             <p>aliquam sagittis purus vitae turpis elementum sed congue lectus tempor. integer eleifend vestibulum tristique. pellentesque ut risus leo. duis tempus sollicitudin viverra. pellentesque laoreet, justo ut dictum mattis, tellus odio dapibus lacus, convallis lobortis massa dolor nec quam.</p>              <p>aliquam sagittis purus vitae turpis elementum sed congue lectus tempor. integer eleifend vestibulum tristique. pellentesque ut risus leo. duis tempus sollicitudin viverra. pellentesque laoreet, justo ut dictum mattis, tellus odio dapibus lacus, convallis lobortis massa dolor nec quam.</p>     </article>  <img width="106" height="113" title="key-staff-nic" alt="key-staff-nic" class="attachment-post-thumbnail wp-post-image" src="wp-content/uploads/2011/07/key-staff-nic.jpg">                   <article class="biography" style="top: 300px;">         <h3>designer</h3>         <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. phasellus aliquet auctor varius. mauris venenatis, enim sit amet faucibus pharetra cras amet. lorem ipsum dolor sit amet, consectetur adipiscing elit. phasellus aliquet auctor varius. mauris venenatis, enim sit amet faucibus pharetra cras amet. lorem ipsum dolor sit amet, consectetur adipiscing elit. phasellus aliquet auctor varius. mauris venenatis, enim sit amet faucibus pharetra cras amet.</p>         <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. phasellus aliquet auctor varius. mauris venenatis, enim sit amet faucibus pharetra cras amet. lorem ipsum dolor sit amet, consectetur adipiscing elit. phasellus aliquet auctor varius. mauris venenatis, enim sit amet faucibus pharetra cras amet.</p>     </article> <img width="109" height="112" title="key-staff-claire" alt="key-staff-claire" class="attachment-post-thumbnail wp-post-image" src="http://wp-content/uploads/2011/07/key-staff-claire.jpg">                   <article class="biography" style="top: 300px;">          <h3>account manager</h3>          <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. phasellus aliquet auctor varius. mauris venenatis, enim sit amet faucibus pharetra cras amet. lorem ipsum dolor sit amet, consectetur adipiscing elit. phasellus aliquet auctor varius. mauris venenatis, enim sit amet faucibus pharetra cras amet. lorem ipsum dolor sit amet, consectetur adipiscing elit. phasellus aliquet auctor varius. mauris venenatis, enim sit amet faucibus pharetra cras amet.</p>          <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. phasellus aliquet auctor varius. mauris venenatis, enim sit amet faucibus pharetra cras amet. lorem ipsum dolor sit amet, consectetur adipiscing elit. phasellus aliquet auctor varius. mauris venenatis, enim sit amet faucibus pharetra cras amet.</p>     </article> </section>

what want jquery below is, when image clicked, want identify next .biography in dom , animate , add class. assume have use, find(), .closest() or .next(). have tried of them below current attempt.

$('.the-team img').click(function(){     //var clickedimage = $(this);     $('.visible').animate({"top" : $('.the-team').height()+10 }, 1000).removeclass('visible').fadeout(5);     $(this).find().next('article.biography').addclass('visible'); });

you do:

$('img').click(function(){     $(this).next('article.biography').addclass('visible').animate({"top" : $('.the-team').height()+10 }, 1000); });

Comments

Post a Comment

Popular posts from this blog

linux - Using a Cron Job to check if my mod_wsgi / apache server is running and restart -

-
my group , running server based upon django , uses mod_wsgi run apache server. not working on project after over, attempting set cronjob similar functionality check if apache server has shut down(system restart or power failure), , if has, restart server me. i've found documentation on how check if apache server down , restart server if is, our server uses https , our start command pretty verbose. can use functionality provided in these examples: https://askubuntu.com/questions/277389/cron-job-to-restart-apache https://www.digitalocean.com/community/tutorials/how-to-use-a-simple-bash-script-to-restart-server-programs or need more complicated process make happen? the command use start server is python manage.py runmodwsgi --host 0.0.0.0 --port 8001 --https-port 8000 --ssl-certificate (certificate location) --server-name (domain name) i'm pretty new linux , using both mod-wsgi apache appreciated. you better off using --setup-only option mod_wsgi-expres
Read more

actionscript 3 - TweenLite does not work with object -

-
i got following problem: i have object called tempscore game. this object blitted canvas renderer via copypixels method. object not display object. it's score-object (self made). score-object extends object called basicblitarrayobject. basicblitarrayobject extends eventdispatcher (therefore no display object). i tried apply several different tweenlite-plugins tempscore-object (i.e. transformaroundcenter, colormatrixfilter, etc.). nothing happens. absolutely nothing. sometimes error messages (when plugin requires display object , object not display object). far good. according greensock (maker of tweenlite) engine can tween numeric property of object. when plugin transformaroundcenter requires display object tweening have modify plugin working non-display object (tempscore). can't because it's way hard me. my game rests upon code: http://www.8bitrocket.com/book/ch11_blastermines.zip try apply tweenlite object called tempmine inside game class blastermines.
Read more

jQuery Ajax Render Fragments OR Whole Page -

-
i'm in throes of building application wraps mess of legacy code. page working on, need substitute fragment divs constructed on back-end -- or else need replace entire page altogether. idea there dynamically controlled flow needs satisfied before can forward legacy product. substituting fragments works fine, seen in below my_body_content swap. trouble comes when i'm trying render not fragment, whole page, in "body" swap. @ point page goes blank. i want similar errors returned server. want nice rest 404 error messages displayed on screen, legacy-product 404s show in legacy-product 404 page. yes, requirements project weird. that's not problem can fix. here's jquery invocation, names changed protect guilty: $.ajax({ url: "places/things", type: "post", data: json.stringify(somebadassobject), datatype: "text", accepts: "text/html", contenttype: "application/json; charset=
Read more