Multiple jQuery Pop-up Forms: Connect a href to <form> divs for user input -
i'm working on digital textbook feature allow student click link open simple div form them input answer specific question. pop-up form simple html/css jquery ui hide, show, , make draggable. here's twist. i've got multiple questions each need attached unique div. no problem, thought. i'll set each href link unique id i've assigned within div. problem is, can't seem target proper div corresponding href. instead same set of questions appear no matter link clicked. seems super simple , i'm overcomplicating it. can here?
html:
<div id="draggable" class="messagepop pop"> <form method="post" id="new_message" action="/answers"> <p><label for="body">what type of person carsten?</label><textarea rows="15" name="body" id="body" cols="55"></textarea></p> <p><label for="body">how know?</label><textarea rows="15" name="body" id="body" cols="55"></textarea></p> <p><center><input type="submit" value="submit" name="commit" id="message_submit"/> or <a id="hide" href="#">cancel</a></center></p> </form> </div> <div id="draggable" class="messagepop pop"> <form method="post" id="new_message" action="/answers"> <p><label for="body">what can learn active volcano photograph?</label><textarea rows="15" name="body" id="body" cols="55"></textarea></p> <p><center><input type="submit" value="submit" name="commit" id="message_submit"/> or <a id="hide" href="#">cancel</a></center></p> </form> </div> <a href="#" id="show">draw conclusions</a> what kind of person carsten? how know? <a href="#" id="show">use text features</a> what can learn active volcano photograph? where first href needs open first div , second href opens second div, etc., etc.
css:
.messagepop { overflow-y: auto; overflow-x: hidden; cursor:default; display:none; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; text-align:left; width:394px; height: 335px; z-index:50; padding: 25px 25px 20px; background-color: #fff; -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); -moz-border-radius: 4px 4px 4px 4px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); -webkit-border-radius: 4px 4px 4px 4px; border-color: #e5e5e5 #dbdbdb #d2d2d2; border-style: solid; border-width: 1px;} js:
$(document).ready(function() { $('.show').click(function() { if ( !$(this).next('div').is(':visible') ) { $(".messagepop").slidefadetoggle(); $(this).next('div').slidefadetoggle(); } }); $('.hide').click(function() { $(this).parent().slidefadetoggle();}); $.fn.slidefadetoggle = function(easing, callback) { return this.animate({ opacity: 'toggle', height: 'toggle' }, "fast", easing, callback);}; $(function() { $("#draggable").draggable();});
thank advice , ironing out poorly written method. seems you've got working.
i've since discovered jquery mobile solution easier trying pull together.
for future viewers, this.
<a href="#popup1" class="popuplink" data-rel="popup">draw conclusions</a> <a href="#popup2" data-rel="popup">use text features</a> <div data-role="popup" id="popup1" class="ui-content" data-position-to="window"> <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">close</a> <p>what kind of person carsten?</p> <input type="text"/> <p>how know?</p> <textarea></textarea> </div> <div data-role="popup" id="popup2" class="ui-content" data-position-to="window"> <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">close</a> <p>what can learn active <mark><b>volcano</b></mark> photograph?</p> <textarea></textarea> </div> the logic here makes lot more sense me , there's added benefit of ensuring work on mobile devices. if want make draggable, drop in:
<script> $(function() { $(".ui-content").draggable(); }); </script> and if want draggable on mobile (remember, jquery ui isn't natively supported on mobile), you'll have call hack of sorts. touch punch.
you may run issues form inputs when using draggable combined touch punch, that's story thread.
Comments
Post a Comment