I suggest [`Freewall`][1]. It is a cross-browser and responsive jQuery plugin to help you create many types of grid layouts: flexible layouts, images layouts, nested grid layouts, metro style layouts, pinterest like layouts ... with nice CSS3 animation effects and call back events. Freewall is all-in-one solution for creating dynamic grid layouts for desktop, mobile, and tablet.



Home page and document: also found [`here`][2].


  [1]: https://github.com/kombai/freewall
  [2]: http://vnjs.net/www/project/freewall/

I think you can try [&quot;Google Grid Gallery&quot;][1], it based on aforementioned Masonry with some additions, like styles and viewer.


  [1]: http://tympanus.net/codrops/2014/03/21/google-grid-gallery/

I&#39; m trying to implement a `queue` structure using C. My implementation is very simple; the queue can hold only `int`s and nothing else. I was wondering if I could simulate `C++` templates in `C`(probably by using the preprocessor `#define`) so that my `queue` can hold any data type.

**Note:** I do not want to use `void*`. I think it is a bit risky and can easily cause bizarre runtime errors.

Simulation of templates in C (for a queue data type)

Is there any way to limit css3&#39;s `nth-of-type` to a class? I&#39;ve got a dynamic number of `section` elements with different classes designating their layout needs. I&#39;d like to grab every 3rd `.module`, but it seems that `nth-of-type` looks up classes element type and then calculates the type. Instead I&#39;d like to limit it to only `.module`s.

Thanks!

JSFiddle to demonstrate: http://jsfiddle.net/danielredwood/e2BAq/1/

HTML:

    &lt;section class=&quot;featured video&quot;&gt;
        &lt;h1&gt;VIDEO&lt;/h1&gt;
    &lt;/section&gt;
    &lt;section class=&quot;featured module&quot;&gt;
        &lt;h1&gt;NOT A VIDEO&lt;/h1&gt;
    &lt;/section&gt;
    &lt;section class=&quot;featured module&quot;&gt;
        &lt;h1&gt;NOT A VIDEO&lt;/h1&gt;
    &lt;/section&gt;
    &lt;section class=&quot;featured module&quot;&gt;
        &lt;h1&gt;NOT A VIDEO (3)&lt;/h1&gt;
    &lt;/section&gt;
    &lt;section class=&quot;featured module&quot;&gt;
        &lt;h1&gt;NOT A VIDEO&lt;/h1&gt;
    &lt;/section&gt;
    &lt;section class=&quot;featured module&quot;&gt;
        &lt;h1&gt;NOT A VIDEO&lt;/h1&gt;
    &lt;/section&gt;
    &lt;section class=&quot;featured module&quot;&gt;
        &lt;h1&gt;NOT A VIDEO (6)&lt;/h1&gt;
    &lt;/section&gt;

​CSS:

    .featured {
      width:31%;
      margin:0 0 20px 0;
      padding:0 3.5% 2em 0;
      float:left;
      background:#ccc;
    }
      .featured.module:nth-of-type(3n+3) {
        padding-right:0;
        background:red;
      }
      .featured.video {
        width:auto;
        padding:0 0 2em 0;
        float:none;
      }​

css3 nth of type restricted to class

I have just received the following design for a project, for an image grid gallery, with dynamic width &amp; height images (user submitted images). (Screenshot at the end of post)

I have tried [jQuery Masonry][1], [Tympanus Automatic Image Montage][2] and [CSS-Tricks Seemless Responsive Photo Grid][3], but each has their limitation.

 - Jquery Masonry allows for both width and height to be dynamic, however there are gaps generated
 - The latter 2 scripts, generate very nice grids, but with the problem that either width or height must be static

**EDIT:** i came across, [Isotope][4], which is almost perfect and i will probably end up using it, unless there&#39;s something that fixes my needs exactly. Therefore my question still remains the same...

Is there any javascript (preferably jQuery) script that can generate a completely dynamic mosaic (in respect to image size), like the one in the screenshot below?

Thanks for any help

----------


 ![Gallery][5]


  [1]: http://masonry.desandro.com/
  [2]: http://tympanus.net/codrops/2011/08/30/automatic-image-montage/
  [3]: http://css-tricks.com/seamless-responsive-photo-grid/
  [4]: http://isotope.metafizzy.co/index.html
  [5]: http://i.stack.imgur.com/39NiL.jpg

Mosaic Grid gallery with dynamic sized images

I have just received the following design for a project, for an image grid gallery, with dynamic width &#x26; height images (user submitted images). (Screenshot at the end of post)
I have tried <a href="http://masonry.desandro.com/" target="_blank" rel="noopener noreferrer">jQuery Masonry</a>, <a href="http://tympanus.net/codrops/2011/08/30/automatic-image-montage/" target="_blank" rel="noopener noreferrer">Tympanus Automatic Image Montage</a> and <a href="http://css-tricks.com/seamless-responsive-photo-grid/" target="_blank" rel="noopener noreferrer">CSS-Tricks Seemless Responsive Photo Grid</a>, but each has their limitation.
<ul>
<li>Jquery Masonry allows for both width and height to be dynamic, however there are gaps generated</li>
<li>The latter 2 scripts, generate very nice grids, but with the problem that either width or height must be static</li>
</ul>
EDIT: i came across, <a href="http://isotope.metafizzy.co/index.html" target="_blank" rel="noopener noreferrer">Isotope</a>, which is almost perfect and i will probably end up using it, unless there's something that fixes my needs exactly. Therefore my question still remains the same...
Is there any javascript (preferably jQuery) script that can generate a completely dynamic mosaic (in respect to image size), like the one in the screenshot below?
Thanks for any help
<hr>
<img src="http://i.stack.imgur.com/39NiL.jpg" alt="Gallery">

I want to let users easily add and subtract dates using JavaScript in order to browse their entries by date.

The dates are in the format: &quot;mm/dd/yyyy&quot;. I want them to be able to click a &quot;Next&quot; button, and if the date is: &quot; 06/01/2012&quot; then on clicking next, it should become: &quot;06/02/2012&quot;. If they click the &#39;prev&#39; button then it should become, &quot;05/31/2012&quot;.

It needs to keep track of leap years, number of days in the month, etc.

Any ideas?

P.S using AJAX to get the date from the server isn&#39;t an option, its a bit laggy and not the experience for the user that the client wants.

How to add/subtract dates with JavaScript?

I am learning d3. There are [certain ways of loading the data][1] in d3 js. But all of them seem to make a HTTP GET. In my scenario, I already have the json data in a string. How can I use this string instead of making another http request? I tried to look for documentation for this but found none.

This works:

    d3.json(&quot;/path/flare.json&quot;, function(json) {
        //rendering logic here
    }

Now, if I have:

    //assume this json comes from a server (on SAME DOMAIN)
    var myjson = &#39;{&quot;name&quot;: &quot;flare&quot;,&quot;children&quot;: [{&quot;name&quot;: &quot;analytics&quot;,&quot;children&quot;: [{&quot;name&quot;: &quot;cluster&quot;,&quot;children&quot;: [{&quot;name&quot;: &quot;MergeEdge&quot;, &quot;size&quot;: 10 }]}]}]}&#39;; 


How do I use already computed &#39;myjson&#39; in d3 &amp; avoid a async call to server? Thanks.


    
    

  [1]: https://github.com/mbostock/d3/wiki/Requests#wiki-d3_xhr

d3 js - loading json without a http get

Many times I&#39;m using the string `match` function to know if a string matches a regular expression.

&lt;!-- language-all: lang-html --&gt;

    if(str.match(/{regex}/))
    
Is there any difference between this:

    if (/{regex}/.test(str))

They seem to give the same result?

regex.test V.S. string.match to know if a string matches a regular expression

I am developing the front end site for a coupon company, and I have a page where the user only needs to input phone number and $$ spent. We came up with a fun on-screen keyboard built in Javascript, that is easy to use, and fast. However, I am looking for a solution to stop the soft keyboard from popping when the user focuses and enters text/numbers in those fields. 

I know about the &quot;number/phone/email&quot; type attributes that HTML5 came up with. However, at the risk of sounding crazy, I really want to just use my on-screen keyboard.

Note: this web site is mostly targeted to tablets.  

Thanks. 


HTML Mobile -forcing the soft keyboard to hide

I need to parse an RSS feed (XML version 2.0) and display the parsed details in an HTML page.

How to parse an RSS feed using JavaScript?

I have coded like this:

    $.ajax({ cache: false,
        url: &quot;/Admin/Contents/GetData&quot;,
        data: { accountID: AccountID },
        success: function (data) {
            $(&#39;#CityID&#39;).html(data);
        },
        error: function (ajaxContext) {
            alert(ajaxContext.responseText)
        }
    });

But when I look at the jQuery [`.ajax()` documentation][1] at the end it seems to suggest I should be coding like this below or at least it suggests adding a `.done()` and a `.fail()`:

    var request = $.ajax({ cache: false,
        url: &quot;/Admin/Contents/GetData&quot;,
        data: { accountID: AccountID }
    });

    request.done(function (data) {
        xxx;
    });
    request.fail(function (jqXHR, textStatus) {
        xxx;
    });


  [1]: http://api.jquery.com/jQuery.ajax/

**Update**

If I code like this is it the same or is there some advantage to breaking it into three ?

    $.ajax({ cache: false,
        url: &quot;/Admin/Contents/GetData&quot;,
        data: { accountID: AccountID }
    }).done(function (data) {
        xxx;
    }).fail(function (jqXHR, textStatus) {
        xxx;
    });

Should I use .done() and .fail() for new jQuery AJAX code instead of success and error

This is getting annoying &amp;mdash; when I click on an item in a Bootstrap dropdown, the dropdown doesn&#39;t close. I have it set up to open a Facebox lightbox when you click the dropdown item but there is a problem with it. 

![enter image description here][1]

----------

## *What I have tried*
When the item is clicked, I tried doing this: 

        $(&#39;.dropdown.open&#39;).removeClass(&#39;open&#39;);
        $(&#39;.dropdown-menu&#39;).hide();

That hides it, but then for some reason it won&#39;t open again.

As you can see I really need the dropdown to close, because it looks crappy when it stays open (mainly because the `z-index` of the dropdown is higher than the Facebox modal box overlay.

----------

## *Why I&#39;m not using Bootstrap&#39;s built-in modal box*

If you&#39;re wondering why I&#39;m not using the nice-looking modal box *built into Bootstrap*, it is because:

1. It doesn&#39;t have a way to load content into it with AJAX.
2. You have to type HTML each time for the modal; with Facebox you can do a simple: `$.facebox({ajax:&#39;/assets/ajax/dialogs/dialog?type=block-user&amp;id=1234567&#39;});`
3. It uses CSS3 animations to animate (which looks very nice) but in non-CSS3 browsers it just shows, which doesn&#39;t look that nice; Facebox uses JavaScript to fade in so it works in all browsers.


  [1]: http://i.stack.imgur.com/fWZyY.png

How to hide Twitter Bootstrap dropdown

What is the correct way (to this date) to use JQuery Mobile and Phonegap together?

Both frameworks need to load before they can be used. How can I be sure that both are loaded before I can use them?

Correct way of using JQuery-Mobile/Phonegap together?

**What is the best way to check the text area value for line breaks and then calculate the number of occurrences, if any?**

I have a text area on a form on my webpage. I am using JavaScript to grab the value of the text area and then checking its length.

### Example

    enteredText = textareaVariableName.val();
    characterCount = enteredText.length; // One line break entered returns 1

If a user enters a line break in the text area my calculation above gives the line break a length of 1. However I need to give line breaks a length of 2. Therefore I need to check for line breaks and the number of occurrences and then add this onto the total length.

### Example of what I want to achieve

    enteredText = textareaVariableName.val();
    characterCount = enteredText.length + numberOfLineBreaks;

----------

My solution before asking this question was the following:

    enteredText = textareaVariableName.val();
    enteredTextEncoded = escape(enteredText);
    linebreaks = enteredTextEncoded.match(/%0A/g);
    (linebreaks != null) ? numberOfLineBreaks = linebreaks.length : numberOfLineBreaks = 0;

I could see that encoding the text and checking for `%0A` was a bit long-winded, so I was after some better solutions. Thank you for all the suggestions.


How to detect line breaks in a text area input?

I have to use a Grid to implement Photo Browser in Android.
So, I would like to know the **difference between GridView and GridLayout**.

So that I shall choose the right one. 

Currently I&#39;m using GridView to display the images dynamically.

GridView VS GridLayout in Android Apps

Two column layout with a line in the middle. 

    [                      ] | [                      ]
    [                      ] | [                      ]
    [                      ] | [                      ]
    [     Left Column      ] | [    Right Column      ]
    [                      ] | [                      ]
    [                      ] | [                      ]
    [                      ] | [                      ]
    [                      ] | [                      ]

How can I add a line between two columns using Twitter Bootstraps grid system

I have a table that is created using ng-repeat. I want to add validation to each element in the table. The problem is that each input cell has the same name as the cell above and below it. I attempted to use the `{{$index}}` value to name the inputs, but despite the string literals in HTML appearing correct, it is now working.


Here is my code as of now:
      
    &lt;tr ng-repeat=&quot;r in model.BSM &quot;&gt;
	   &lt;td&gt;
		  &lt;input ng-model=&quot;r.QTY&quot; class=&quot;span1&quot; name=&quot;QTY{{$index}}&quot; ng-pattern=&quot;/^[\d]*\.?[\d]*$/&quot; required/&gt;
	      &lt;span class=&quot;alert-error&quot; ng-show=&quot;form.QTY{{$index}}.$error.pattern&quot;&gt;&lt;strong&gt;Requires a number.&lt;/strong&gt;&lt;/span&gt;
		  &lt;span class=&quot;alert-error&quot; ng-show=&quot;form.QTY{{$index}}.$error.required&quot;&gt;&lt;strong&gt;*Required&lt;/strong&gt;&lt;/span&gt;
	   &lt;/td&gt;
    &lt;/tr&gt;

I have tried removing the `{{}}` from index, but that does not work either. As of now, the validation property of the input is working correctly, but the error message is not displayed.

Anyone have any suggestions?

**Edit:** In addition to the great answers below, here is a blog article that covers this issue in more detail: http://www.thebhwgroup.com/blog/2014/08/angularjs-html-form-design-part-2/

How to validate inputs dynamically created using ng-repeat, ng-show (angular)

I am trying to the get my head around this for quite some time now:

Is it possible to create a pinterest Layout with Twitter Bootstrap only?
I know there are jQuery Plugins like Masonry, but is there no way without them?

Thanks

Is it possible to create a pinterest-like layout with Bootstrap only?

Does anyone know of a GUI design app that lets you choose/drag/drop the widgets, and then turn that layout into Python code with the appropriate Tkinter calls &amp; arrangement using the `grid` geometry manager?  So far I&#39;ve turned up a couple of pretty nice options that I may end up using, but they generate code using either `pack` or `place` instead.

=========

**EDIT:  Please note this is not to seek a &quot;recommendation&quot; per se, but rather it is a factual inquiry.  I was asking whether or not such an app exists.**

=====

Before you say it:  Yes, I know Tkinter is easy to learn, and Yes, I&#39;ve found multiple online sources to help me do so, and I&#39;m already on my way with that.  This isn&#39;t about avoiding the effort of learning, it&#39;s about using the right tool for the job.  I found out a long time ago that those drag-and-drop widget environments for coding program logic, are just too klunky and unmanageable when the project gets beyond a certain size -- for bigger stuff, it&#39;s just easier to build and maintain the logic when it&#39;s in plain text.  More recently I&#39;ve found out that the reverse is true for designing a GUI.  Writing text works up to a point, but when you have a main window with 30 or 40 widgets, plus a couple of side windows each with similar complexity, it goes much faster and easier if you can design it graphically rather than typing it all out.

Is there a GUI design app for the Tkinter / grid geometry?

I have been trying for a couple of days now to configure my thumbnail gallery so all the images appear the same height and width. However, when I change the CSS code to,

    max-height: 150px;
    max-width: 200px;
    width: 120px;
    height: 120px;

I get images that are all the same size, but the aspect ratio is stretched, ruining the images. Is there not a way to resize the image container and not the image instead? Allowing me to keep the aspect ratio, but resize the image still. (I don’t mind if I cut off some of the image.)




Changing image sizes proportionally using CSS

I am developing an image filter app. But can&#39;t really try it if i don&#39;t have any images. 

I know that i can test it in the phone, but it&#39;s not the same, since I need the error messages and other stuff.

I just want to access an image from the AVD&#39;s gallery so that I can test my app.
How can I add one?

I am using Android Studio. I saw some examples on how to do it in Eclipse, but i am not using that.

So, how can I add an image to the emulator image gallery?

Content Type	Original Author	Original Content on Stackoverflow
Question	Dogoku	View Question on Stackoverflow
Solution 1 - Javascript	Oleg	View Answer on Stackoverflow
Solution 2 - Javascript	askhat	View Answer on Stackoverflow

Mosaic Grid gallery with dynamic sized images

Javascript Problem Overview

Javascript Solutions

Solution 1 - Javascript

Solution 2 - Javascript

css3 nth of type restricted to class

Simulation of templates in C (for a queue data type)

Attributions