Instead of `hide()`, use:

    css(&#39;visibility&#39;,&#39;hidden&#39;)



`hide()` sets the `display` style to `none`, which completely removes the element from the document flow and causes it to not take up space.

`visibility:hidden` keeps the space as it is.

Try setting the `visibility` to `hidden`:

    $(&quot;#id&quot;).css(&quot;visibility&quot;, &quot;hidden&quot;);

`display: none;` will take it out of the content flow so you&#39;ll see your other content move into the empty space left behind. (`display: block;` brings it back into the flow pushing everything out of the way.)

`visibility: hidden;` will keep it within the content flow taking up space but simply make it invisible. (`visibility: visible;` will reveal it again.)

You&#39;ll want to use `visibility` if you want your content flow to remain unchanged.

in another answer it is noted that jQuery&#39;s `fadeTo` does not set `display:none` on completion so might also provide a solution here, rather than using `fadeOut` for example:

&lt;https://stackoverflow.com/questions/6324957/jquery-hide-a-div-without-disturbing-the-rest-of-the-page&gt;

I previously used **`opacity: 0`** before I saw the `visibility: hidden` trick.

But in many cases `opacity: 0` is problematic, because it **lets you interact with the element**, even though you can&#39;t see it! (As pointed out by [DeadPassive][1].)

Usually that&#39;s not what you want.  But perhaps occasionally you might?

  [1]: https://stackoverflow.com/users/781182/deadpassive

I&#39;m getting the following exception:

&gt; Mixed mode assembly is built against version ‘v2.0.50727′ of the runtime and cannot be loaded in the 4.0 runtime without additional configuration information.

as I was trying to export crystal report from my WPF program... 

I have added the following in the app.config already...

    &lt;startup useLegacyV2RuntimeActivationPolicy=&quot;true&quot;&gt;
      &lt;supportedRuntime version=&quot;v4.0&quot; sku=&quot;.NETFramework,Version=v4.0&quot;/&gt;
    &lt;/startup&gt;
    &lt;runtime&gt;
      &lt;NetFx40_LegacySecurityPolicy enabled=&quot;true&quot;/&gt;
    &lt;/runtime&gt;

Any experts can help????

Reference I found: 
http://www.davidmoore.info/2010/12/17/running-net-2-runtime-applications-under-the-net-4-runtime

Mixed mode assembly is built against version ‘v2.0.50727′ of the runtime

In my `settings.py`, I have the following: 

    EMAIL_BACKEND = &#39;django.core.mail.backends.smtp.EmailBackend&#39;

    # Host for sending e-mail.
    EMAIL_HOST = &#39;localhost&#39;

    # Port for sending e-mail.
    EMAIL_PORT = 1025

    # Optional SMTP authentication information for EMAIL_HOST.
    EMAIL_HOST_USER = &#39;&#39;
    EMAIL_HOST_PASSWORD = &#39;&#39;
    EMAIL_USE_TLS = False

My email code:

    from django.core.mail import EmailMessage
    email = EmailMessage(&#39;Hello&#39;, &#39;World&#39;, to=[&#39;user@gmail.com&#39;])
    email.send()

Of course, if I setup a debugging server via `python -m smtpd -n -c DebuggingServer localhost:1025`, I can see the email in my terminal.

However, how do I actually send the email not to the debugging server but to user@gmail.com?

After reading your answers, let me get something straight:

1. Can&#39;t you use localhost(simple ubuntu pc) to send e-mails?

2. I thought in django 1.3 `send_mail()` is somewhat deprecated and `EmailMessage.send()` is used instead?

How to send email via Django?

Is there a way in jQuery where I can hide an element, but not change the DOM when it&#39;s hidden? I&#39;m hiding a certain element but when it&#39;s hidden, the elements below it move up. I don&#39;t want that to happen. I want the space to stay the same, but the element to be shown/hidden at will.

Can I do this?

jQuery hide element while preserving its space in page layout

<p>Is there a way in jQuery where I can hide an element, but not change the DOM when it's hidden? I'm hiding a certain element but when it's hidden, the elements below it move up. I don't want that to happen. I want the space to stay the same, but the element to be shown/hidden at will.</p>
<p>Can I do this?</p>


I am trying to change some old code which uses onclick so that I an use the $(this). The problem is that $(this) is not working when inside the success. Is there anyway to do this without setting it as a var. 

    $(&#39;.addToCart&#39;).click(function() {
		
		$.ajax({
			url: &#39;cart/update&#39;,
			type: &#39;post&#39;,
			data: &#39;product_id=&#39; + $(this).attr(&quot;data-id&quot;),
			dataType: &#39;json&#39;,
			success: function(json) {
											
				if (json[&#39;success&#39;]) {
					
				$(this).addClass(&quot;test&quot;);
					
				}	
			}
		});
		
	});

$(this) inside of AJAX success not working

I&#39;m learning jQuery and was following a tutorial, a very strange error has perplexed me.
Here&#39;s my html : 

    &lt;!doctype html&gt;
    &lt;html&gt;
      &lt;head&gt;
        &lt;title&gt; Simple Task List &lt;/title&gt;
        &lt;script src=&quot;jquery.js&quot;&gt;&lt;/script&gt;
        &lt;script src=&quot;task-list.js&quot;&gt;&lt;/script&gt;
      &lt;/head&gt;
    
      &lt;body&gt;
        &lt;ul id=&quot;tasks&quot;&gt;
         
        &lt;/ul&gt;
          &lt;input type=&quot;text&quot; id=&quot;task-text&quot; /&gt;
          &lt;input type=&quot;submit&quot; id=&quot;add-task&quot; /&gt;
      &lt;/body&gt;
    &lt;/html&gt;
and The jQuery :

    $(document).ready(function(){
        //To add a task when the user hits the return key
        $(&#39;#task-text&#39;).keydown(function(evt){
          if(evt.keyCode == 13)
          {
            add_task(this, evt);
          }
          });
        //To add a task when the user clicks on the submit button
          $(&quot;#add-task&quot;).click(function(evt){
            add_task(document.getElementByID(&quot;task-text&quot;),evt);
            });
        });
    
    function add_task(textBox, evt){
      evt.preventDefault();
      var taskText = textBox.value;
      $(&quot;&lt;li&gt;&quot;).text(taskText).appendTo(&quot;#tasks&quot;);
      textBox.value = &quot;&quot;;
    };
When I add elements By hitting the return key, there&#39;s no problem.
But When I click the Submit Button then firebug shows this error

    document.getElementByID is not a function
    [Break On This Error] add_task(document.getElementByID(&quot;task-text&quot;),evt);
    task-list.js (line 11)

I tried to use jQuery instead replacing it with 

    $(&quot;#task-text&quot;)
This time the error is :

    $(&quot;&lt;li&gt;&quot;).text(taskText).appendTo is not a function
    [Break On This Error] $(&quot;&lt;li&gt;&quot;).text(taskText).appendTo(&quot;#tasks&quot;);
    task-list.js (line 18
    which results in the following error

I&#39;ve been trying to debug this for some time but i just don&#39;t get it. Its probably a really silly mistake that i&#39;ve made. Any help is most appreciated.

Edit :
I&#39;m using jQuery 1.6.1


document.getElementByID is not a function

Every time I want to POST an array of JSON objects with jQuery to Rails, I have this problem.
If I stringify the array I can see that jQuery is doing its work correctly:

    &quot;shared_items&quot;=&gt;&quot;[{\&quot;entity_id\&quot;:\&quot;253\&quot;,\&quot;position\&quot;:1},{\&quot;entity_id\&quot;:\&quot;823\&quot;,\&quot;position\&quot;:2}]&quot;

But if I just send the array it as the data of the AJAX call I get:

    &quot;shared_items&quot;=&gt;{&quot;0&quot;=&gt;{&quot;entity_id&quot;=&gt;&quot;253&quot;, &quot;position&quot;=&gt;&quot;1&quot;}, &quot;1&quot;=&gt;{&quot;entity_id&quot;=&gt;&quot;823&quot;, &quot;position&quot;=&gt;&quot;2&quot;}}

Whereas if I just send a plain array it works:

    &quot;shared_items&quot;=&gt;[&quot;entity_253&quot;]

Why is Rails changing the array to that strange hash? The only reason that comes to mind is that Rails can&#39;t correctly understand the contents because there is no type here (is there a way to set it in the jQuery call?):

    Processing by SharedListsController#create as 

Thank you!

**Update:**
I&#39;m sending the data as an array, not a string and the array is created dynamically using the `.push()` function. Tried with `$.post` and `$.ajax`, same result.

Rails not decoding JSON from jQuery correctly (array becoming a hash with integer keys)

I have an `h1` with id of `toptitle` that is dynamically created, and I am not able to change the HTML.
It will have a different title depends on a page. Now when it is Profile, I want to change it to `New word` with jQuery.

    &lt;h1 id=&quot;toptitle&quot;&gt;Profile&lt;/h1&gt; // Changing only when it is Profile  
    // to
    &lt;h1 id=&quot;toptitle&quot;&gt;New word&lt;/h1&gt;

Note: If the text is `Profile`, then change it to `New word`.

How to change a text with jQuery

I have the below html structure, i want to find the inner html of first div with class as &quot;popcontent&quot; using jQuery

    &lt;div&gt;
    &lt;div class=&quot;popContent&quot;&gt;1&lt;/div&gt;
    &lt;div class=&quot;popContent&quot;&gt;2&lt;/div&gt;
    &lt;/div&gt;

find first occurrence of class in div

I am doing the following:

     &lt;a href=&quot;www.stackoverflow.com&quot;&gt;
       &lt;button disabled=&quot;disabled&quot; &gt;ABC&lt;/button&gt;
     &lt;/a&gt;  

This works good but I get a HTML5 validation error that says &quot;Element &#39;button&#39; must not be nested within element &#39;a button&#39;.

Can anyone give me advice on what I should do?

Can I nest a &lt;button&gt; element inside an &lt;a&gt; using HTML5?

I have this code: 

    &lt;table class=&quot;topics&quot; &gt;
        &lt;tr&gt;
            &lt;td style=&quot;white-space: nowrap; padding: 0 5px 0 0; color:#3A5572; font-weight: bold;&quot;&gt;Test&lt;/td&gt;
            &lt;td style=&quot;padding: 0 4px 0 0;&quot;&gt;1.0&lt;/td&gt;
            &lt;td&gt;abc&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;

            &lt;td style=&quot;white-space: nowrap; padding: 0 5px 0 0; color:#3A5572; font-weight: bold;&quot;&gt;test2&lt;/td&gt;
            &lt;td style=&quot;padding: 0 4px 0 0;&quot;&gt;1.3&lt;/td&gt;
            &lt;td&gt;def&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/table&gt;

The rows are spaced too far apart. I want the lines closer together.

What I did was to add the following CSS but it doesn&#39;t seem to change anything. 

    .topics tr { height: 14px; }

What am I doing wrong?


Setting table row height

Is there any way for the browser to test my websites in resolutions that are higher than my screens?

E.g: I have a 1440 x 900 screen, and I want to test the website in 1920 x 1200, 1920 x 1080, etc.


How to simulate a higher resolution screen?

When appending `div`s to a `div` with a fixed height, the child divs will appear from top to bottom, sticking at the top border.

    ┌─────────────────────────┐
    │ Child Div 1             │
    │ Child Div 2             │
    │                         │
    │                         │
    │                         │
    └─────────────────────────┘

I&#39;m now trying to display them from bottom to top like this (sticking to the bottom border):

    ┌─────────────────────────┐
    │                         │
    │                         │
    │                         │
    │ Child Div 1             │
    │ Child Div 2             │
    └─────────────────────────┘
    ┌─────────────────────────┐
    │                         │
    │                         │
    │ Child Div 1             │
    │ Child Div 2             │
    │ Child Div 3             │
    └─────────────────────────┘
    ┌───────────────────────┬─┐
    │ Child Div 2           │▲│
    │ Child Div 3           │ │
    │ Child Div 4           │ │
    │ Child Div 5           │█│
    │ Child Div 6           │▼│
    └───────────────────────┴─┘
And so on... I hope you get what I mean.

Is this simply doable with CSS (something like `vertical-align: bottom`)? Or do I have to hack something together with JavaScript?

Stacking Divs from Bottom to Top

I am using History API for my web app and have one issue.
I do Ajax calls to update some results on the page and use `history.pushState()` in order to update the browser&#39;s location bar without page reload. Then, of course, I use `window.popstate` in order to restore previous state when back-button is clicked.

The problem is well-known — Chrome and Firefox treat that `popstate` event differently. While Firefox doesn&#39;t fire it up on the first load, Chrome does. I would like to have Firefox-style and not fire the event up on load since it just updates the results with exactly the same ones on load. Is there a workaround except using [History.js](https://github.com/balupton/history.js/)? The reason I don&#39;t feel like using it is — it needs way too many JS libraries by itself and, since I need it to be implemented in a CMS with already too much JS, I would like to minimize JS I am putting in it.

So, would like to know whether there is a way to make Chrome not fire up `popstate` on load or, maybe, somebody tried to use History.js as all libraries mashed up together into one file.

Content Type	Original Author	Original Content on Stackoverflow
Question	slandau	View Question on Stackoverflow
Solution 1 - Jquery	Dr.Molle	View Answer on Stackoverflow
Solution 2 - Jquery	Chad Levy	View Answer on Stackoverflow
Solution 3 - Jquery	Sparky	View Answer on Stackoverflow
Solution 4 - Jquery	lunelson	View Answer on Stackoverflow
Solution 5 - Jquery	joeytwiddle	View Answer on Stackoverflow

jQuery hide element while preserving its space in page layout

Jquery Problem Overview

Jquery Solutions

Solution 1 - Jquery

Solution 2 - Jquery

Solution 3 - Jquery

Solution 4 - Jquery

Solution 5 - Jquery

How to send email via Django?

Mixed mode assembly is built against version ‘v2.0.50727′ of the runtime

Attributions