You can use

&lt;!-- language: lang-css --&gt;

    background-clip: content-box;

Also make sure to use `background-color` property, not `background`.

If you are able to access the HTML try:
   

&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-css --&gt;

    .mgmtError {
      width: 716px;
      float: left;
      padding: 10px;
      text-align: center;
      background-color: blue;
    }

    .mgmtError div {
      background-color: #FF0000;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;mgmtError&quot;&gt;
      &lt;div&gt;Content&lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;



I have a set of rectangles and I would like to &quot;reduce&quot; the set so I have the fewest number of rectangles to describe the same area as the original set. If possible, I would like it to also be fast, but I am more concerned with getting the number of rectangles as low as possible. I have an approach now which works most of the time.

Currently, I start at the top-left most rectangle and see if I can expand it out right and down while keeping it a rectangle. I do that until it can&#39;t expand anymore, remove and split all intersecting rectangles, and add the expanded rectangle back in the list. Then I start the process again with the next top-left most rectangle, and so on. But in some cases, it doesn&#39;t work. For example:
![enter image description here][1]


With this set of three rectangles, the correct solution would end up with two rectangles, like this:
![enter image description here][2]

However, in this case, my algorithm starts by processing the blue rectangle. This expand downwards and splits the yellow rectangle (correctly). But then when the remainder of the yellow rectangle is processed, instead of expanding downwards, it expands right first and takes back the portion that was previously split off. Then the last rectangle is processed and it can&#39;t expand right or down, so the original set of rectangles is left. I could tweak the algorithm to expand down first and then right. That would fix this case, but it would cause the same problem in a similar scenario that was flipped.



**Edit:** Just to clarify, the original set of rectangles do not overlap and do not have to be connected. And if a subset of rectangles are connected, the polygon which completely covers them can have holes in it.


  [1]: http://i.stack.imgur.com/XUvZs.png
  [2]: http://i.stack.imgur.com/6FI93.png

Algorithm for finding the fewest rectangles to cover a set of rectangles without overlapping

I&#39;m using jQuery [draggable][1] and [droppable][2] for a work-planning system I&#39;m developing. Users drag jobs to a different day or user, and then data is updated using an ajax call.

Everything works fine, except when I scroll down the main page (Jobs appear on a large week planner that exceeds the bottom of my browser window). If I try and drag a draggable element here, the element appears above my mouse cursor the same amount of pixels as I&#39;ve scrolled down.. The hover state still works fine and the functionality is bang on but it doesn&#39;t look right. 

I&#39;m using jQuery 1.6.0 and jQuery UI 1.8.12.

I&#39;m sure there&#39;s a offset function I need to add but I don&#39;t know where to apply it, or if there&#39;s a better way. Here&#39;s my `.draggable()` initialisation code:

    $(&#39;.job&#39;).draggable({
      zIndex: 20,
      revert: &#39;invalid&#39;,
      helper: &#39;original&#39;,
      distance: 30,
      refreshPositions: true,
    });

Any idea what I can do to fix this?


  [1]: https://jqueryui.com/draggable/
  [2]: https://jqueryui.com/droppable/

jQuery draggable shows helper in wrong place after page scrolled

I have this class on CSS :

    .mgmtError{ 
      width:716px; 
      float:left; 
      background-color:#FF0000; 
      padding:10px; 
      text-align:center;
    } 

and I&#39;d like to color the background not in the padding area. 
I tryed with margin, but seems that it have some troubles with IE.

Any others solution?

How to background a div without the padding area

I have this class on CSS :
<pre><code class="hljs language-css">.mgmtError{ 
 width:716px; 
 float:left; 
 background-color:#FF0000; 
 padding:10px; 
 text-align:center;
} 
</code></pre>
and I'd like to color the background not in the padding area.
I tryed with margin, but seems that it have some troubles with IE.
Any others solution?

Using plain JavaScript (not jQuery), Is there any way to check if an element _contains_ a class?

Currently, I&#39;m doing this:

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    var test = document.getElementById(&quot;test&quot;);
    var testClass = test.className;

    switch (testClass) {
      case &quot;class1&quot;:
        test.innerHTML = &quot;I have class1&quot;;
        break;
      case &quot;class2&quot;:
        test.innerHTML = &quot;I have class2&quot;;
        break;
      case &quot;class3&quot;:
        test.innerHTML = &quot;I have class3&quot;;
        break;
      case &quot;class4&quot;:
        test.innerHTML = &quot;I have class4&quot;;
        break;
      default:
        test.innerHTML = &quot;&quot;;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div id=&quot;test&quot; class=&quot;class1&quot;&gt;&lt;/div&gt;

&lt;!-- end snippet --&gt;

The issue is that if I change the HTML to this...

    &lt;div id=&quot;test&quot; class=&quot;class1 class5&quot;&gt;&lt;/div&gt;

...there&#39;s no longer an exact match, so I get the default output of nothing (`&quot;&quot;`). But I still want the output to be `I have class1` because the `&lt;div&gt;` still _contains_ the `.class1` class.

Check if an element contains a class in JavaScript?

I have a problem with a webview which may access to the localStorage by an HTML5 app. The test.html file informs me that local 
storage is&#39;nt supported by my browser (ie. the `webview`). If you have any suggestion.. 

```java
package com.test.HelloWebView; 
import android.app.Activity; 
import android.content.Context; 
import android.os.Bundle; 
import android.util.Log; 
import android.view.KeyEvent; 
import android.webkit.WebChromeClient; 
import android.webkit.WebSettings; 
import android.webkit.WebStorage; 
import android.webkit.WebView; 
import android.webkit.WebViewClient; 

public class HelloWebView extends Activity { 

    WebView webview;

    public void onCreate(Bundle savedInstanceState) { 
        super.onCreate(savedInstanceState); 
        setContentView(R.layout.main); 
        webview = (WebView) findViewById(R.id.webview); 
        webview.getSettings().setJavaScriptEnabled(true); 
        webview.setWebViewClient(new HelloWebViewClient()); 
        webview.loadUrl(&quot;file:///android_asset/test.html&quot;); 
        WebSettings settings = webview.getSettings(); 
        settings.setJavaScriptEnabled(true); 
        settings.setDatabaseEnabled(true); 
        String databasePath = this.getApplicationContext().getDir(&quot;database&quot;, Context.MODE_PRIVATE).getPath(); 
        settings.setDatabasePath(databasePath);
        webview.setWebChromeClient(new WebChromeClient() { 
        public void onExceededDatabaseQuota(String url, String databaseIdentifier, long currentQuota, long estimatedSize, long totalUsedQuota, WebStorage.QuotaUpdater quotaUpdater) { 
                quotaUpdater.updateQuota(5 * 1024 * 1024); 
            } 
        }); 
    }

    public boolean onKeyDown(int keyCode, KeyEvent event) { 
        if ((keyCode == KeyEvent.KEYCODE_BACK) &amp;&amp; webview.canGoBack()) { 
            webview.goBack(); 
            return true; 
        } 
        return super.onKeyDown(keyCode, event); 
    }

    private class HelloWebViewClient extends WebViewClient { 
        public boolean shouldOverrideUrlLoading(WebView view, String url) { 
            view.loadUrl(url); 
            return true; 
        } 
    }
}
```



Android webview &amp; localStorage

The W3 docs have a [nested list example][1] prefixed by `DEPRECATED EXAMPLE:`, but they never corrected it with a non-deprecated example, nor explained exactly what is wrong with the example.

So which of these ways is the correct way to write an HTML list?

**Option 1**: the nested `&lt;ul&gt;` is a child of the parent `&lt;ul&gt;`

    &lt;ul&gt;
        &lt;li&gt;List item one&lt;/li&gt;
        &lt;li&gt;List item two with subitems:&lt;/li&gt;
        &lt;ul&gt;
            &lt;li&gt;Subitem 1&lt;/li&gt;
            &lt;li&gt;Subitem 2&lt;/li&gt;
        &lt;/ul&gt;
        &lt;li&gt;Final list item&lt;/li&gt;
    &lt;/ul&gt;

**Option 2**: the nested `&lt;ul&gt;` is a child of the `&lt;li&gt;` it belongs in

    &lt;ul&gt;
        &lt;li&gt;List item one&lt;/li&gt;
        &lt;li&gt;List item two with subitems:
            &lt;ul&gt;
                &lt;li&gt;Subitem 1&lt;/li&gt;
                &lt;li&gt;Subitem 2&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;Final list item&lt;/li&gt;
    &lt;/ul&gt;


  [1]: http://www.w3.org/TR/html401/struct/lists.html#h-10.2

Proper way to make HTML nested list?

I&#39;d like to clarify whether it&#39;s possible or not to make a div fit its size based on the content&#39;s size without having to make elements float or having to make their position absolute. Is it possible?

Is it really impossible to make a div fit its size to its content?

I am looking for the name of the &quot;forbidden/cancel&quot; cursor.

I can&#39;t seem to find it.

Forbidden cursor?

I have an element that is position:fixed and so scrolls with the page how i want it to however. when the user scrolls up I want the element to stop scrolling at a certain point, say when it is 250px from the top of the page, is this possible? Any help or advice would be helpful thanks!

I had a feeling that I would need to use jquery to do so. I tried getting the scrolling or location of the where the user is but got really confused, is there any jquery solutions?

Stopping fixed position scrolling at a certain point?

When using multiple css files on the same page and they collide, how do i know which one is going to be used? For example, if one says blue body background and the other one says red.

Order of prioritization when using multiple contradictory css files

**How do I resize an iframe from another domain**

-Edit


Scroll down for some solutions.. or read on how NOT to do this :D

After many hours of code hacking- the conclusion is that anything inside the iframe is not accessible, even the scrollbars that render on my domain. I have tried many techniques to no avail.

***To save you time don&#39;t even go down this route just use  sendMessages for cross domain communications.***
There are plug ins for HTML &lt; 5 that I use- Go to the bottom for a nice example :)


 ----


Past few days I have been trying to integrate an iframe into a site. This is a short term solution while the other side develops and API(could take months...) 
And because this is as short term solution we done want to use easyXDM- I have access to the other domain but its difficult enough asking them to add p3p header as it is.....

**3 iframes**

The closest solution I found was the 3 iframes- but it goes mental of chrome and safari so I cannot use that.

open in chrome

http://css-tricks.com/examples/iFrameResize/crossdomain.php#frameId=frame-one&amp;height=1179

**Measure the scrollbars**

I found a another post on how to use the scrollheight to try and resize the form.. in theory it works well but I could not apply it properly using the iframes scroll height.. 

    document.body.scrollHeight

That obvoisly uses the bodies height (cannot access these properties 100% is based on the clients display canvaz and not the x-domains document height)

I tried using jquery to get the iframes height

    $(&#39;#frameId&#39;).Height()

    $(&#39;#frameId&#39;).clientHeight

    $(&#39;#frameId&#39;).scrollHeight


return values different in chrome and ie - or just don&#39;t make sense at all.
The problem is that everything inside the frame is denied- even the scrollbar...

**Computed Styles**

But if I inspect and element in chrome of the iframe it bladdy shows me the documents dimensions inside the iframe (using jquery x-domain to get iframe.heigh - access denied)
There is nothing in the computed CSS ![enter image description here][1]


  [1]: https://i.stack.imgur.com/wox5C.jpg

Now how does chrome calculate that?  (edit- browser re-renders the page using its build in rendering engine to calcualte all these settings - but are not attached anywhere to prevent cross-domain fraud.. so..)

**HTML4**

I read specification of HTML4.x and it says there that there should be read-only values exposed via document.element but it&#39;s access denied via jquery

**Proxy Frame**

I went down the route of proxying the site back and calculating which is OK.. until a user logs in through the iframe and the proxy gets a login page instead of the actual content. Also to some calling the page twice is not acceptable 

http://www.codeproject.com/KB/aspnet/asproxy.aspx

http://www.johnchapman.name/aspnet-proxy-page-cross-domain-requests-from-ajax-and-javascript/

**Re-Render the page**

I did not go this far but there are jscript engines out there that will look at the source and re-render the page based on the source file . but it would require hacking those jscripts.. and thats not an ideal situation for commercial entities...
and some invole pure java applets or server side rendering

http://en.wikipedia.org/wiki/Server-side_JavaScript

http://htmlunit.sourceforge.net/ &lt;-java not jscript

http://maxq.tigris.org/

----

EDIT 09-2013
**UPDATE**

All this can do done with HTML5 sockets. But easyXDM is  great fallback for non HTML5 complaint pages.


**Solution 1** Very Great Solution! 

Using easyXDM

On your server you set up a page in the form of

    &lt;html&gt;
    &lt;head&gt;
    &lt;script src=&quot;scripts/easyXDM.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot; language=&quot;javascript&quot;&gt;

        var transport = new easyXDM.Socket(/** The configuration */{
        remote: &quot;http://www.OTHERDOMAIN.com/resize_intermediate.html?url=testpages/resized_iframe_1.html&quot;,

        //ID of the element to attach the inline frame to
        container: &quot;embedded&quot;,
        onMessage: function (message, origin) {
            var settings = message.split(&quot;,&quot;);
            //Use jquery on a masterpage.
            //$(&#39;iframe&#39;).height(settings[0]);
            //$(&#39;iframe&#39;).width(settings[1]);

            //The normal solution without jquery if not using any complex pages (default)
            this.container.getElementsByTagName(&quot;iframe&quot;)[0].style.height = settings[0];
            this.container.getElementsByTagName(&quot;iframe&quot;)[0].style.width = settings[1];
        }
    });

    &lt;/script&gt;
   
    &lt;/head&gt;

    &lt;body&gt;
        &lt;div id=&quot;embedded&quot;&gt;&lt;/div&gt;
    &lt;/body&gt;


and on the callers domain they just need to add the intermiedate_frame html and easyXDM.js  in the same place. Like a parent folder - then you can access relative directories or a contained folder just for you.

OPTION 1
-
**If you don&#39;t want to add scripts to all pages look at option 2!**

Then they can just add a simple jscript to the end of each the pages you need the resize to occur. No need to include the easyxdm in each of these pages.

     &lt;script type=&quot;text/javascript&quot;&gt;
    			window.onload = function(){ parent.socket.postMessage( (parseInt(document.body.clientHeight)) + &quot;,&quot; + ( document.body.clientWidth ) );  };
            &lt;/script&gt;

I have modified the parameters it sends. If you want the width to work properly then the pages on the otherdomain need to include the width of the page in a style somwhere that look something similar to:

    &lt;style type=&quot;text/css&quot;&gt;
                html, body {
                    overflow: hidden;
                    margin: 0px;
                    padding: 0px;
                    background-color: rgb(75,0,85);
    				color:white;
    				width:660px
                }
    			a {
    			color:white;
    			visited:white;
    			}
            &lt;/style&gt;

This works great for me. If the width is not included then the frame behaves a bit strange and kind&#39;of tries to guess what it should be .. and will not shrink down if you need it to.


OPTION 2
-
**Modify the intermediate frame to poll for changes**

Your intermediate frame should look something like this..

 

        &lt;!doctype html&gt;
    &lt;html&gt;
        &lt;head&gt;
    	
            &lt;title&gt;Frame&lt;/title&gt;
            &lt;script type=&quot;text/javascript&quot; src=&quot;easyXDM.js&quot;&gt;
            &lt;/script&gt;
            &lt;script type=&quot;text/javascript&quot;&gt;
                var iframe;
                var socket = new easyXDM.Socket({
                    //This is a fallback- not needed in many cases
    				swf: &quot;easyxdm.swf&quot;,
                    onReady: function(){
                        iframe = document.createElement(&quot;iframe&quot;);
                        iframe.frameBorder = 0;
    					document.body.appendChild(iframe);
                        iframe.src = &quot;THE HOST FRAME&quot;;
    			iframe.onchange = messageBack();
    					
                    },
                    onMessage: function(url, origin){
                        iframe.src = url;
                    }
                });
    			
    			//Probe child.frame for dimensions.
    			function messageBack(){
    				socket.postMessage ( iframe.contentDocument.body.clientHeight + &quot;,&quot; + iframe.contentDocument.body.clientWidth); 
    			};
    			
    			//Poll for changes on children every 500ms.
    			setInterval(&quot;messageBack()&quot;,500); 
    				
            &lt;/script&gt;
            &lt;style type=&quot;text/css&quot;&gt;
                html, body {
                    overflow: hidden;
                    margin: 0px;
                    padding: 0px;
                    width: 100%;
                    height: 100%;
                }
                
                iframe {
                    width: 100%;
                    height: 100%;
                    border: 0px;
                }
            &lt;/style&gt;
        &lt;/head&gt;
        &lt;body&gt;
    	 
        &lt;/body&gt;
    &lt;/html&gt;


The interval could be made more efficient to chaeck if size has change and only send if the dimensions changes isntead of posting messaging every 500ms. If you implement this check then you can change the polling as low as 50ms! have fun

----

Work across browsers and is fast. Great debugging features !!

    Excellent Work to  Sean Kinsey  who made the script!!!


----


**Solution 2** (Works but not great)

So basically if you have a mutual agreement with the other domain then you can add a library to handle sendmessage.  If you do not have any access the the other domain.. Keep on looking for more hacks- because I could not find or fully justify these I found.

So the other domain will include these in there Head tag

    &lt;script src=&quot;scripts/jquery-1.5.2.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;scripts/jquery.postmessage.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;scripts/club.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;

In the club.js is just some custom calls i made for resize calls and contains..

     $(document).ready(function () {   
        var parent_url = decodeURIComponent( document.location.hash.replace( /^#/, &#39;&#39; ) ),link;
	//Add source url hash to each url to authorise callback when navigating inside the frame.Without this clicking any links will break the communication and no messages will be received
	$(&#39;a[href]&#39;).each(function(){ 
         this.href = this.href + document.location.hash ;
	});
	//Get the dimensions and send back to calling page.
	var h1 = document.body.scrollHeight;
	var w1 = document.body.scrollWidth;
	$.postMessage({ if_height: h1, if_width: w1 }, parent_url, parent );
      });

And your page will do all the hard work and has a nice script...

      //This is almost like request.querystring used to get the iframe data
      function querySt(param, e) {
             gy = e.split(&quot;&amp;&quot;);
             for (i = 0; i &lt; gy.length; i++) {
                 ft = gy[i].split(&quot;=&quot;);
                 if (ft[0] == param) {
                     return ft[1];
                 }
             }
         }


         $(function () {
             // Keep track of the iframe dimensions.
             var if_height;
             var if_width;
             // Pass the parent page URL into the Iframe in a meaningful way (this URL could be
             // passed via query string or hard coded into the child page, it depends on your needs).
             src = &#39;http://www.OTHERDOAMIN.co.uk/OTHERSTARTPAGE.htm&#39; + &#39;#&#39; + encodeURIComponent(document.location.href),
             // Append the Iframe into the DOM.
             iframe = $(&#39;&lt;iframe &quot; src=&quot;&#39; + src + &#39;&quot; width=&quot;100%&quot; height=&quot;100%&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot;&gt;&lt;\/iframe&gt;&#39;).appendTo(&#39;#iframe&#39;);

             // Setup a callback to handle the dispatched MessageEvent event. In cases where
             // window.postMessage is supported, the passed event will have .data, .origin and
             // .source properties. Otherwise, this will only have the .data property.
             $.receiveMessage(function (e) {
                 // Get the height from the passsed data.
                 //var h = Number(e.data.replace(/.*if_height=(\d+)(?:&amp;|$)/, &#39;$1&#39;));
                 var h = querySt(&quot;if_height&quot;, e.data);
                 var w = querySt(&quot;if_width&quot;, e.data);


                 if (!isNaN(h) &amp;&amp; h &gt; 0 &amp;&amp; h !== if_height) {
                     // Height has changed, update the iframe.
                     iframe.height(if_height = h);
                 }
                 if (!isNaN(w) &amp;&amp; w &gt; 0 &amp;&amp; w !== if_width) {
                     // Height has changed, update the iframe.
                     iframe.width(if_width = w);
                 }
                 //For debugging only really- can remove the next line if you want
                 $(&#39;body&#39;).prepend(&quot;Recieved&quot; + h + &quot;hX&quot; + w + &quot;w .. &quot;);
                 // An optional origin URL (Ignored where window.postMessage is unsupported).
               //Here you must put the other domain.com name only! This is like an authentication to prevent spoofing and xss attacks! 
             }, &#39;http://www.OTHERDOMAIN.co.uk&#39;);
         });



----

OPTION 3
-
Their is now a small JS library for managing resizing cross-domain iFrames, it still requires the iFrame to have a bit of JavaScript in it, however, this is just 2.8k (765 bytes Gzipped) of native JS that does not have any dependancies and it doesn&#39;t do anything until called by the parent page. This means it&#39;s a nice guest on other people systems. 

This code uses mutationObserver to detect DOM changes and also looks out for resize events, so that the iFrame remains sized to the content. Works in IE8+.

https://github.com/davidjbradshaw/iframe-resizer


Content Type	Original Author	Original Content on Stackoverflow
Question	kwichz	View Question on Stackoverflow
Solution 1 - Html	Yacine Zalouani	View Answer on Stackoverflow
Solution 2 - Html	DanielB	View Answer on Stackoverflow

How to background a div without the padding area

Html Problem Overview

Html Solutions

Solution 1 - Html

Solution 2 - Html

jQuery draggable shows helper in wrong place after page scrolled

Algorithm for finding the fewest rectangles to cover a set of rectangles without overlapping

Attributions