Position and Move in Jquery



If you have a page with a space in it, and you want to move a div into that space that is tacked onto the end of the page, you could do this.

<script type="text/javascript">
$(document).ready(function () {
var formTop = $('#chimpform').position().top
var formTopPosn = $('#chimpformPosn').position().top
var formLeft = $('#chimpform').position().left
var formLeftPosn = $('#chimpformPosn').position().left
$('#chimpform').animate({ top: '-=' + (-(formTopPosn - formTop)), left: '-=' + (-(formLeftPosn - formLeft)), width: $('#chimpformPosn').css('width'), height: $('#chimpformPosn').css('height') }, 0);
<!--note: js is used to position the mailchimp form on the page (outside the master form) - see site-->
<div style="position:relative;width:235px;height:158px" id="chimpformPosn"></div>

...later on the page...
<%if(Request.ServerVariables["Script_name"].ToLower().Contains("blog.aspx")){ //must be outside a form tag%>
<div id="chimpform" style="position:relative;top:0px;left:0px;">
<!-- Begin MailChimp Signup Form -->
<link href="http://cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
<div id="mc_embed_signup">
<form action="otherform..." method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<label for="mce-EMAIL">Subscribe to our mailing list</label>
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
<!--End mc_embed_signup--> 
<%} %>

I had to do this in this case, as the form in the master took over the whole site. I had to add this form at the end, then move it into position without creating a nested form.



Leave a Comment