CODEWITHSUNDEEP
javascripthtmlcss
Ha_Riddler
Ha_Riddler

Reputation: 49

how do I make margins work on divs created dynamically in my JS?

HTML:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"/>
 <link rel="stylesheet" type="text/css" media="all" href="css/animate.min.css"/>
  <link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"/>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
 <link rel="stylesheet" href="css/thisProject.css"/>
 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
  <h1 class="text-primary">Wiki Article Search</h1>

  <div>
    <input type="text" id="input"/>
    <button id="search">Search</button>
    <a id="random" class="btn btn-primary" target="_blank" href="http://en.wikipedia.org/wiki/Special:Random">Press For Random</a>
  </div>
 </br>
  <div id="bodyDiv">
  </div>
   <script src="wikiViewer.js"></script>
</body>
</html>

JavaScript:

(function(){
var searchBtn = document.getElementById('search');
//var body = document.getElementsByTagName('body')[0];
var input = document.getElementById("input");
var bodyDiv = document.getElementById('bodyDiv')
$(document).ready(function(){
  searchBtn.addEventListener('click', searchWiki);
  function searchWiki(){
    bodyDiv.innerHTML = "";
    var url = 'https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch='
    if (input.value === ""){
        return;
    }
    var searchTerm = input.value.replace(/\s/g, '%20');
    url = url + searchTerm + '&callback=?';
    $.getJSON(url, domMod); //change fileName to be whatever we wish to search
      function domMod(json){ //what to do with dom based on json file  NOTE WE NEED TO FIRST CHECK ANDREMOVE PREVIOUS SEARCH CONTENT
        var entry;
        if (!json.hasOwnProperty('query')){
            return;
        }
        if (!json.query.hasOwnProperty('pages')){
            return;
        }
        json = json.query.pages;
        var keys = Object.keys(json);
        var keysLength = keys.length;
        for (var i = 0; i < keysLength; i++){ 
            entry = json[keys[i]];
            var outterDiv = document.createElement('div');
            outterDiv.className = "entry";
            var imageDiv = document.createElement('div');
            imageDiv.className = "entryImg";
            var entryDiv = document.createElement('div');
            entryDiv.className = "entryTxt";
            outterDiv.appendChild(imageDiv);
            outterDiv.appendChild(entryDiv);
            entryDiv.innerHTML = '<h2>' + entry.title + '</h2>' + '<p>' + entry.extract + '</p>'
        if (entry.hasOwnProperty('thumbnail')){ //add image to our imageDiv child of entryDiv
            imageDiv.style.backgroundImage = "url('" + entry.thumbnail.source + "')"
        }
        var br = document.createElement('br');
        bodyDiv.appendChild(outterDiv); //appendChild to the Body 
        bodyDiv.appendChild(br);
    }
   }
 } 

  });
}())

CSS:

input{
    width:180px;
}
.entry{
    width:90%;
    margin-left:auto;
    margin-right:auto;
    height: 140px;
}
.entryTxt{
    margin-left: 5px;

}
.entryImg{
    width:125px;
    height:125px;
    margin-right: 5px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    float:left;
}
#bodyDiv{
    width: 100%;
    height: 1600px;
}

The javascript code runs through each return object that a wikipedia API returns based on a user's search term. It then puts the image in a div with class "entryImg" and the entry text in a div called "entryTxt". It then puts each of these in a div labeled outterDiv which is appended to the div already in my HTML with id "bodyDiv." My question is, in each outterDiv why are the picture and the text divs so close to each other regardless of how much I change the margins. I put 5px on the texts left margin and 5 px on the picture divs right margin as can be seen and the change isn't appearing in the browser. Why is this and how can I fix it?

Upvotes: 1

Views: 73

Answers (1)

Venugopal
Venugopal

Reputation: 1896

based on your javascript code the generated html would be

<div id="bodyDiv">
    <div class="entry">
        <div class="entryImg"></div>
        <div class="entryTxt">
            <h2>lorem ipsum</h2>
            <p>lorem ipsum</p>
        </div>
    </div>
</div>

and, with your css, you ca increase the space between image and text by

increasing margin-right on .entryImg

.entryImg {
    margin-right: 10px;
}

or, by increasing margin-left on .entryTxt after adding overflow: hidden; on it.

.entryTxt {
    margin-left: 10px;
    overflow: hidden;
}

check this fiddle

Upvotes: 1

Related Questions