All geek questions in one place

Why does my dynamic HTML seem to be randomly placed?

I want my dynamically generated html to align, but what I get is a little weak-headed:

enter image description here

Here is my jQuery:

function getNatlBookCritics() { var htmlBuilder = ''; $.getJSON('Content/NBCCJr.json', function (data) { $.each(data, function (i, dataPoint) { if (IsYear(dataPoint.category)) { htmlBuilder += '<div class=\"yearBanner\">' + dataPoint.category + '</div>'; } else { htmlBuilder += '<section class=\"wrapper\" ><a id=\"mainImage\" class=\"floatLeft\" href=\"' + dataPoint.imghref + '\"' + ' target=\"_blank\"><img height=\"160\" width=\"107\" src=\"' + dataPoint.imgsrc + '\"' + dataPoint.imgalt + '></img></a>' + '<div id=\"prizeCategory\" class=\"category\">' + dataPoint.category + '</div><br/><cite id=\"prizeTitle\" class=\"title\">' + dataPoint.title + '</cite><br/><div id=\"prizeArtist\" class=\"author\">' + dataPoint.author + '</div><br/>'; if (dataPoint.kindle.length > 2) { htmlBuilder += '<button><a href=\"' + Urlize(dataPoint.kindle) + '\"' + ' target=\"_blank\">Kindle</a></button>'; } if (dataPoint.hardbound.length > 2) { htmlBuilder += '<button><a href=\"' + Urlize(dataPoint.hardbound) + '\"' + ' target=\"_blank\">Hardbound</a></button>'; } if (dataPoint.paperback.length > 2) { htmlBuilder += '<button><a href=\"' + Urlize(dataPoint.paperback) + '\"' + ' target=\"_blank\">Paperback</a></button>'; } htmlBuilder += '</section>'; } }); //each $('#BooksContent').append(htmlBuilder); $('#BooksContent').css('background-color', 'black'); }); //getJSONNBCCJr } // getNatlBookCritics()

... and here is the related CSS:

 .yearBanner { font-size: 2em; color: white; font-family: Verdana, Arial, Helvetica, sans-serif; float: left; padding-top: 100px; } .floatLeft { float: left; padding-right: 20px; padding-left: 5px; } section.wrapper { min-width: 360px; overflow: hidden; display: inline-block; } .category { display: inline-block; font-family: Consolas, sans-serif; font-size: 2em; color: Orange; width: 160px; } .title { display: inline-block; font-family: Calibri, Candara, serif; color: Yellow; width: 160px; } .author { display: inline-block; font-family: Courier, sans-serif; font-size: 0.8em; color: White; width: 160px; }

UPDATE

In the corresponding note, is there a reason why I should change this code:

  }); //each $('#BooksContent').append(htmlBuilder); $('#BooksContent').css('background-color', 'black'); $('button').button(); }); //getJSONNBCCJr

... in:

  }); //each }); //getJSONNBCCJr $('#BooksContent').append(htmlBuilder); $('#BooksContent').css('background-color', 'black'); $('button').button();

UPDATE 2

Well, the glorified but erroneous HTML finally appeared here; I know this is not very, but there is also a jsfiddle here: http://jsfiddle.net/clayshannon/cMYEH/1/ I got it through console.log (htmlBuilder);

 <div class="yearBanner">2012</div> <section class="wrapper"> <a id="mainImage" class="floatLeft" href="http://rads.stackoverflow.com/amzn/click/B00655KLOY" target="_blank"> <img height="160" width="107" src="http://images.amazon.com/images/P/B00655KLOY.01.MZZZZZZZ.jpg" alt="Ben Fountain book cover"></img> </a> <div id="prizeCategory" class="category">Fiction</div> <br/> <cite id="prizeTitle" class="title">Billy Lynn's Long Halftime Walk</cite> <br/> <div id="prizeArtist" class="author">Ben Fountain </div> <br/> <button> <a href="http://rads.stackoverflow.com/amzn/click/B00655KLOY" target="_blank">Kindle</a> </button> <button> <a href="http://rads.stackoverflow.com/amzn/click/0060885599" target="_blank">Hardbound</a> </button> <button> <a href="http://rads.stackoverflow.com/amzn/click/0060885610" target="_blank">Paperback</a> </button> </section> <section class="wrapper"> <a id="mainImage" class="floatLeft" href="http://rads.stackoverflow.com/amzn/click/B007EDOLJ2" target="_blank"> <img height="160" width="107" src="http://images.amazon.com/images/P/B007EDOLJ2.01.MZZZZZZZ.jpg" alt="Andrew Solomon book cover"></img> </a> <div id="prizeCategory" class="category">General Nonfiction </div> <br/> <cite id="prizeTitle" class="title">Far From the Tree: Parents, Children, and the Search for Identity</cite> <br/> <div id="prizeArtist" class="author">Andrew Solomon </div> <br/> <button> <a href="http://rads.stackoverflow.com/amzn/click/B007EDOLJ2" target="_blank">Kindle</a> </button> <button> <a href="http://rads.stackoverflow.com/amzn/click/0743236718" target="_blank">Hardbound</a> </button> <button> <a href="http://rads.stackoverflow.com/amzn/click/0743236726" target="_blank">Paperback</a> </button> </section> <section class="wrapper"> <a id="mainImage" class="floatLeft" href="http://rads.stackoverflow.com/amzn/click/B0062B0844" target="_blank"> <img height="160" width="107" src="http://images.amazon.com/images/P/B0062B0844.01.MZZZZZZZ.jpg" alt="Robert Caro book cover"></img> </a> <div id="prizeCategory" class="category">Biography</div> <br/> <cite id="prizeTitle" class="title">The Passage of Power: The Years of Lyndon Johnson</cite> <br/> <div id="prizeArtist" class="author">Robert Caro </div> <br/> <button> <a href="http://rads.stackoverflow.com/amzn/click/B0062B0844" target="_blank">Kindle</a> </button> <button> <a href="http://rads.stackoverflow.com/amzn/click/0679405070" target="_blank">Hardbound</a> </button> <button> <a href="http://rads.stackoverflow.com/amzn/click/0375713255" target="_blank">Paperback</a> </button> </section> <section class="wrapper"> <a id="mainImage" class="floatLeft" href="http://rads.stackoverflow.com/amzn/click/B0072NWK88" target="_blank"> <img height="160" width="107" src="http://images.amazon.com/images/P/B0072NWK88.01.MZZZZZZZ.jpg" alt="Leanne Shapton book cover"></img> </a> <div id="prizeCategory" class="category">Autobiography</div> <br/> <cite id="prizeTitle" class="title">Swimming Studies</cite> <br/> <div id="prizeArtist" class="author">Leanne Shapton </div> <br/> <button> <a href="http://rads.stackoverflow.com/amzn/click/B0072NWK88" target="_blank">Kindle</a> </button> <button> <a href="http://rads.stackoverflow.com/amzn/click/0399158170" target="_blank">Hardbound</a> </button> </section> <section class="wrapper"> <a id="mainImage" class="floatLeft" href="http://rads.stackoverflow.com/amzn/click/B008G16HVG" target="_blank"> <img height="160" width="107" src="http://images.amazon.com/images/P/B008G16HVG.01.MZZZZZZZ.jpg" alt="Marina Warner book cover"></img> </a> <div id="prizeCategory" class="category">Criticism</div> <br/> <cite id="prizeTitle" class="title">Stranger Magic: Charmed States and the Arabian Nights</cite> <br/> <div id="prizeArtist" class="author">Marina Warner </div> <br/> <button> <a href="http://rads.stackoverflow.com/amzn/click/B008G16HVG" target="_blank">Kindle</a> </button> <button> <a href="http://rads.stackoverflow.com/amzn/click/0674055306" target="_blank">Hardbound</a> </button> <button> <a href="http://rads.stackoverflow.com/amzn/click/0099437694" target="_blank">Paperback</a> </button> </section> <section class="wrapper"> <a id="mainImage" class="floatLeft" href="http://rads.stackoverflow.com/amzn/click/1555976050" target="_blank"> <img height="160" width="107" src="http://images.amazon.com/images/P/1555976050.01.MZZZZZZZ.jpg" alt="DA Powell book cover"></img> </a> <div id="prizeCategory" class="category">Poetry</div> <br/> <cite id="prizeTitle" class="title">Useless Landscape, or A Guide for Boys</cite> <br/> <div id="prizeArtist" class="author">DA Powell </div> <br/> <button> <a href="http://rads.stackoverflow.com/amzn/click/1555976050" target="_blank">Hardbound</a> </button> </section> <div class="yearBanner">2011</div> <section class="wrapper">(etc.)</section>

And BTW, "float-left" in yearBanner matters: I forgot to increase the version number of the CSS file, and therefore it did not show me the terrible consequences of leaving it (I returned it).

Other key parts of my CSS:

 * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* This added 7/12/2013 to allow for jQueryUI buttons without them being oversized - the fiddle for it: http://jsfiddle.net/RFUsW/1/ */ .ui-button-text-only .ui-button-text { padding: .2em .5em; line-height: 1.2; font-size: 0.8em; }

I updated fiddling: http://jsfiddle.net/clayshannon/cMYEH/1/

UPDATE 3

This (from http://addyosmani.com/blog/building-spas-jquerys-best-friends/ ) looks like an interesting alternative way to do this:

 <ul id="albumList"></ul> var albums = [ { Title: "My Vacation In Malibu", AlbumYear: "1993" }, { Title: "A Trip To The Sea-side", AlbumYear: "1992" } ]; //define the markup for our template var template_markup = " <ul> <li><b>${Title}</b> (${AlbumYear})</li> </ul> "; //compile our markup above as a template called //'albumTemplate' $.template( "albumTemplate", template_markup ); //render the template using 'albums' as our data //source then insert the HTML thats rendered under //the albumList element $.tmpl( "albumTemplate", albums ) .appendTo( "#albumList" );

... but https://github.com/BorisMoore/jquery-tmpl says that it is "BETA. NO MORE IN ACTIVE DEVELOPMENT OR SERVICE. Problems remain open, but not working." which is a little scary.

Another problem: I can still have my own conditional logic, where, if a certain value was such, create an element, otherwise not.

The temptation to consider changing my code is partly due to codemania (an avid, indelible drive to mess around with), but partly for a better reason: because this method can be more efficient.

0
source share
2 answers

First of all, I would clear the first book. You can do it with

 section.wrapper:first-child{ clear: left; }

Then you should probably find out the heights of all the elements that you dynamically create and set all the elements to the height of the largest element, otherwise everything will become messy. When one of them is too high on the left, two elements will be located to the right of it, floating against the left side.

I wrote something to find the height of the largest element:

 largest = 0; $(".wrapper").each(function () { if ($(this).height() > largest) { largest = $(this).height(); } }); $(".wrapper").css("height", $largest);

Put this code right after this line: }); //getJSONNBCCJr }); //getJSONNBCCJr

Finally, you really have to float all .wrapper sections .wrapper left, and display: block

+3
source

Make the following changes to css:

 .ui-button-text-only .ui-button-text { padding: .2em .5em; line-height: 1.2; font-size: 0.8em; float: left;

}

 .yearBanner { font-size: 2em; color: white; /*font-family: Verdana, Arial, Helvetica, sans-serif;*/ font-family: 'Segoe UI Light', Candara, Calibri, Consolas, sans-serif; width:500px; padding-top: 50px; margin-left:50px; padding-bottom:20px;

}
Add the following css:

 .wrapper{ float: left; width: 500px; margin-left:20px; padding-bottom:20px;

}
Note. make sure that the width of .yearBanner and .wrapper should be the same, if you change the width of one class, then you must change the other one too. set according to your screen resolution because I tested in jsfiddle, so I set it to 500 pixels, you can change it.

+3
source

Source: https://habr.com/ru/post/949702/

More articles:


All Articles