Develop Reference

How to dynamically change the css style in javascript

I need to dynamically change the css padding. So every tenth number, I want to increase the padding. Here is my code
var padding = 200
Object.keys(MassAddressDict).forEach(function(key) {
console.log(key + " " + MassAddressDict[key]);
var recieverData = MassAddressDict[key]
var senderInfo = combineSenderInfo();
var receiverInfo = combineReceiverInfo(recieverData);
var index = Object.keys(MassAddressDict).indexOf(key);
if (index % 10 === 0){
padding = padding + 20
console.log("Padding increased to ", padding)
}
printWindow.document.write('<div style="display:flex;justify-content:space-between">');
printWindow.document.write(senderInfo);
printWindow.document.write('</div>');
printWindow.document.write(receiverInfo);
printWindow.document.write("<p style='padding-bottom: 200px'></p>")
});
what I want to do is at every tenth item in the dictionary, increase the padding by say 20px. How can I implement this?

Try this, I think this will solve your problem
var padding = 200;
Object.keys(MassAddressDict).forEach(function(key) {
console.log(key + " " + MassAddressDict[key]);
var recieverData = MassAddressDict[key]
var senderInfo = combineSenderInfo();
var receiverInfo = combineReceiverInfo(recieverData);
var index = Object.keys(MassAddressDict).indexOf(key);
if (index % 10 === 0){
padding = padding + 20
console.log("Padding increased to ", padding)
}
printWindow.document.write('<div style="display:flex;justify-content:space-between">');
printWindow.document.write(senderInfo);
printWindow.document.write('</div>');
printWindow.document.write(receiverInfo);
printWindow.document.write(`<p style='padding-bottom: ${padding}px'></p>`)
});

here is some way of the dynamic CSS style
1 var div = document.getElementById('div1');
// Clear Value
div.setAttribute('style','');
// OR
div.removeAttribute('style');
// Set Style / Append Style
2 div.style.backgroundColor = '#ff0000';
3 document.getElementById('#div1').style += "padding-top:40px";
4 $("#div1").css("property",'value');
5 Var Value=25;
<div id='div1' style='padding: ${Value}px'></div>
you should read this for complete reference
https://www.w3.org/wiki/Dynamic_style_-_manipulating_CSS_with_JavaScript

The easiest way is to use CSS and not JS. In this case, you need to use :nth-child();
Inside of nth-child you put the formula you want, in order to select the elements you want. In this case I use 3n+1. So the elements that are selected are:
3x0+1 = 1;
3x1+1 = 4;
3x2+1 = 7;
3x3+1 = 10;
html,
body {
height: 100%;
width: 100%;
}
#container {
width: 50%;
display: flex;
flex-direction: column;
}
.item {
background-color: red;
border: 1px solid black;
padding: 0 10px
}
.item:nth-child(3n+1) {
background-color: orange;
padding: 0 20px
}
<div id="container">
<div class="item"> item1 </div>
<div class="item"> item2 </div>
<div class="item"> item3 </div>
<div class="item"> item4 </div>
<div class="item"> item5 </div>
<div class="item"> item6 </div>
<div class="item"> item7 </div>
<div class="item"> item8 </div>
<div class="item"> item9 </div>
<div class="item"> item10 </div>
</div>

First you'll need to get your padding out of your forEach, now it's resetting to 200 for each new object.
Then simply add your padding in your style (you can easily add a variable in a string in javascript using backticks and putting your var inside ${} `This is your var => ${myVar}`).
Your code should look like that :
var padding = 200
Object.keys(MassAddressDict).forEach(function(key, index) {
console.log(key + " " + MassAddressDict[key]);
var recieverData = MassAddressDict[key]
var senderInfo = combineSenderInfo();
var receiverInfo = combineReceiverInfo(recieverData);
if (index % 10 === 0){
padding = padding + 20
console.log("Padding increased to ", padding)
}
printWindow.document.write('<div style="display:flex;justify-content:space-between">');
printWindow.document.write(senderInfo);
printWindow.document.write('</div>');
printWindow.document.write(receiverInfo);
printWindow.document.write(`<p style='padding-bottom: ${padding}px'></p>`)
});

When scrolling add a new class when the new right element is fully visible

Trying to a create a timeline box with scroll that has overflown items. When scrolling all items fully visible should get the visible class and whenever a new item becomes fully visible should get the visible class. Im missing some math or logic here, to make it accurate. Any tips or alternative methods would be very helpful.
Codepen: https://codepen.io/rKaiser/pen/BaKZgoX
<div id="wrapper" class="history">
<div class="history-inner">
<div class="item i1 wide"></div>
<div class="item i2"></div>
<div class="item i3 wide"></div>
<div class="item i4"></div>
<div class="item i5"></div>
<div class="item i6 wide"></div>
<div class="item i7"></div>
<div class="item i8"></div>
<div class="item i9"></div>
<div class="item i10 wide"></div>
<div class="item i11"></div>
<div class="item i12"></div>
<div class="item i13"></div>
<div class="item i14 wide"></div>
<div class="item i15"></div>
<div class="item i16 wide"></div>
<div class="item i17"></div>
<div class="item i18"></div>
<div class="item i19 wide"></div>
<div class="item i20"></div>
<div class="item i21 wide"></div>
<div class="item i22"></div>
<div class="item i23"></div>
</div>
</div>
.history {
position: relative;
overflow-y: hidden;
}
.history-inner {
display: inline-flex;
}
.item {
width:120px;
height:300px;
display:inline-block;
border:1px solid #ccc;
background: #777;
transition: all .3s ease;
&.wide {
width:170px;
}
&.visible {
background: green !important;
}
}
.item:nth-child(even){
background: #666;
}
js
var historyW = $('.history').outerWidth();
var historyInnerW = $('.history-inner').outerWidth();
var currentHiddenItem = historyW + 5; // bigger than history
var historyPxScr = $('.history').scrollLeft();
var entryNum = 1;
var itemMargin = 0;
$('.history').on('resize scroll', function() {
historyW = $('.history').outerWidth();
historyPxScr = $('.history').scrollLeft();
console.log( historyW + historyPxScr + ' sum');
console.log( currentHiddenItem + ' curr');
// console.log( historyInnerW + ' iii');
if ( historyW + historyPxScr < currentHiddenItem - itemMargin) {
$('.item.i'+entryNum).addClass('visible');
} else {
currentHiddenItem += $('.item.i'+entryNum).outerWidth();
itemMargin = $('.item.i'+entryNum).outerWidth();
//console.log(itemMargin + 'IM');
entryNum += 1;
console.log(entryNum);
console.log(currentHiddenItem);
}
});

I would go for something like this, tried to do it in the jQuery way ;-).
var isFullyVisible = function(elem) {
return elem.getBoundingClientRect().right - window.innerWidth < 0;
}
var checkItemVisibility = function () {
$('.history .item').each(function (index, elem) {
if (isFullyVisible(elem)) {
$(elem).addClass('visible');
} else {
$(elem).removeClass('visible');
}
});
}
$(document).ready(function() {
checkItemVisibility();
$('.history').on('scroll', checkItemVisibility);
});
Tested this code in your codepen and it worked.

Can't get the temperature to change from Celsius to Fahrenheit in my local weather app

User Story: I can see the weather in my current location.
User Story: I can see a different icon or background image (e.g. snowy mountain, hot desert) depending on the weather.
User Story: I can push a button to toggle between Fahrenheit and Celsius.
These are the user stories for the website. I have managed to complete 1 and 2 but I am completely stuck on 3, I have a good idea of how I would manage to do this but I can't manage to make it work with various methods(not just the one in my code) but I think I may of coded this badly but it is the only way I know because I am new. Someone suggested to me to use an if but it doesn't work as it would only be able to change the text on document load and not continuously. This is the example. Any advice on a better way about this would be greatly appreciated and sorry for the long post.
Html:
<div class="main">
<div class="title">
<h1>Weather!</h1>
<hr />
</div>
<div class="search">
<div class="row">
<div class="col-xs-6">
<input type="text" class="form-control" placeholder="City">
</div>
<div class="col-xs-3">
<button type="button" class="btn btn-default" id="searchBtn">Search</button>
</div>
<div class="col-xs-3 checkbox" id="degrees">
<label><input type="checkbox" value="" id="fCheck">View in °F</label>
</div>
</div>
<hr />
</div>
<div class="row">
<div class="col-xs-6 content" id="temp">
<h2></h2>
<h3></h3>
<h4></h4>
<p></p>
<img src="" alt="weather icon" />
</div>
<div class="col-xs-6 info">
<h2 id="humidity"></h2>
<h2 id="windspeed"></h2>
<br>
<h2 id="sunrise"></h2>
<h2 id="sunset"></h2>
</div>
</div>
</div>
Css:
html, body {
margin: 0;
padding: 0;
font-family: 'Dosis', sans-serif;
background-color: #3f3f3f;
}
.main{
position: relative;
margin: 10% auto auto auto;
width: 75%;
text-align: center;
background-color: #8E9EBC;
padding: 10px;
border-width: 3px;
border-style: solid;
border-color: black;
border-radius: 5px;
}
.main h1 h2 h3 h4{
margin: 0;
}
.main img {
width: 100px;
}
.title hr {
border-width: 2px;
}
#degrees h4 {
text-align: left;
}
#searchBtn {
width: 100%;
}
Js:
$(document).ready(function() {
var api = "secretAPIKey";
$.getJSON("http://ip-api.com/json", function(json) {
var userCity;
userCity = JSON.stringify(json.city);
userCity = userCity.replace(/\"/g,"");
makeElementsFromCity(userCity);
});
var celsius;
var name;
var faren;
function makeElementsFromCity(userCity) {
$.getJSON("http://api.openweathermap.org/data/2.5/weather?q=" + userCity + "&units=metric&appid=" + api, function(json) {
name = JSON.stringify(json.name + ", " + json.sys.country);
celsius = JSON.stringify(json.main.temp);
faren = celsius * 9 / 5 + 32;
var icon = JSON.stringify(json.weather[0].icon);
var type = JSON.stringify(json.weather[0].main);
var humidity = JSON.stringify(json.main.humidity)
var windS = JSON.stringify(json.wind.speed);
var sunR = JSON.stringify(json.sys.sunrise);
var sunS = JSON.stringify(json.sys.sunset);
icon = icon.replace(/\"/g,"");
type = type.replace(/\"/g,"");
celsius = Math.round(celsius);
faren = Math.round(faren);
//get sunset and sunrise unix into time
function formatSunR(date) {
var date = new Date(date*1000);
var hours = date.getHours();
var minutes = "0" + date.getMinutes();
var seconds = "0" + date.getSeconds();
var formattedTime = hours + ':' + minutes.substr(-2);
return formattedTime;
};
//update h2 with city, country and temperature and testing to see what weather.icon is but comes back as undefined
//updates h3 with the type of weather & city is placeholder for testing the city variable
$("#temp h3").text(type);
//display image of weather type from https://openweathermap.org/weather-conditions
$("#temp img").attr("src", "http://openweathermap.org/img/w/" + icon + ".png");
$(".info #humidity").text("Humidity: " + humidity + "%");
$(".info #windspeed").text("Wind Speed: " + windS + " MPH");
$(".info #sunrise").text("Sunrise: " + formatSunR(sunR));
$(".info #sunset").text("Sunset: " + formatSunR(sunS));
if($("#fCheck").is(":checked")) {
$("#temp h2").text("The temperature in " + name + " is " + faren + "°F");
} else {
$("#temp h2").text("The temperature in " + name + " is " + celsius + "°C");
console.log(faren);
}
});
};
});

You can try this HTML
temp
with this JS and adapt it to your situation.
var temp = 25;
var celsius = temp;
var fahr = (1.8 * temp + 32);
var switch_ = new Boolean(false);
$("#toggle").on("click", function() {
switch_ = !switch_;
var temp = switch_ == true ? celsius + " °C" : fahr + " °F";
$(this).text(temp);
});

What am I missing? Getting data from a JSON API URL to display on bootstrap

Trying to teach myself javascript and having trouble converting the JSON from this link https://www2.shapeshift.io/crowdsales to display on a bootstrap page using javascript, HTML, and CSS. I can't seem to get it working and I'm not sure why, can someone please help?
Here is the javascript:
$.get( "http://www2.shapeshift.io/crowdsales", function( data ) {
var sold = data['sold.toFixed(2)'];
var left = data['remaining'];
var total = sold + left;
var ratebtc = data['rateT'];
var percent = sold/total * 100;
var raised = data.toFixed(2) + 'BTC';
var percentsold = data.toFixed(2) + '%';
var orders = data['backers'];
$('.progress-bar').css('width', percentsold);
$('.percentage-label').html( percentsold + " \(" + sold + " sold out of " + total + " \)");
$('.ratebtc').html( ratebtc );
$('.orders').html( orders);
$('.raised').html( raised);
});
Here is the HTML:
<div class="shapeshift">
<div class="col-md-1 col-md-offset-5 object-non-visible"
data-animation-effect="fadeIn">
<div class="orders"></div>
<div class="raised"></div>
</div>
</div>
<div class="banner-buynow">
<div class="col-md-1 col-md-offset-5 object-non-visible"
data-animation-effect="fadeIn">
<a class="btn btn-info" href="javascript:void(0);" onclick=
"opentac();">Buy Now<br>
<div class="ratebtc"></div></a>
</div>
</div>
<div class="progress">
<div class="progress-bar active progress-bar-striped" style=
"width:50%">
<div class="percentage-label"></div>
</div>
</div>
Here is the CSS
}
.banner-buynow {
position: absolute;
top: 65%;
width: 100%;
z-index: 2;
}
.shapeshift {
position: absolute;
top: 75%;
width: 100%;
z-index: 2;
}
.progress {
position: absolute;
top: 90%;
width: 100%;
z-index: 2;
}

$.get( "http://www2.shapeshift.io/crowdsales", function( data ) {
var sold = parseFloat(data['sold']).toFixed(2);//problem
var left = data['remaining'];
var total = parseFloat(sold + left).toFixed(2);//problem
var ratebtc = data['rateT'];
var percent = sold/total * 100;
var raised = parseFloat(data['raised']).toFixed(2) + 'BTC';//problem
var percentsold = parseFloat(data['sold']).toFixed(2) + '%';//problem
var orders = data['backers'];
$('.progress-bar').css('width', percentsold);
$('.percentage-label').html( percentsold + " \(" + sold + " sold out of " + total + " \)");
$('.ratebtc').html( ratebtc );
$('.orders').html( orders);
$('.raised').html( raised);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="shapeshift">
<div class="col-md-1 col-md-offset-5 object-non-visible"
data-animation-effect="fadeIn">
<div class="orders"></div>
<div class="raised"></div>
</div>
</div>
<div class="banner-buynow">
<div class="col-md-1 col-md-offset-5 object-non-visible"
data-animation-effect="fadeIn">
<a class="btn btn-info" href="javascript:void(0);" onclick=
"opentac();">Buy Now<br>
<div class="ratebtc"></div></a>
</div>
</div>
<div class="progress">
<div class="progress-bar active progress-bar-striped" style=
"width:50%">
<div class="percentage-label"></div>
</div>
</div>
Problems:
You need to use the data which are present in json var raised = data.toFixed(2) + 'BTC';
var percentsold = data.toFixed(2) + '%'; seems useless for me. because data is an object.
toFixed() will only work with floats.
try putting this code and check.

To get json response from URL use $.getJSON
var url = "https://www2.shapeshift.io/crowdsales";
$.getJSON(url , function (json) {
var status= json.status;
console.log(status);
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

why manual scrolling stop when i added auto scrolling in my page query

I am facing one problem .Actually I am working with socket programming in which I am getting data from server after a reqular interval of time.In beginning I am able to scroll my div when data is coming from server .But I add auto scroll code it start auto scrolling and stop manual scrolling.I will explain more i detail When data come from server I save that data in html or text file .When i click button for review it only show data upto the height of div..so i can solve problem with me,,
Here is css..!!
div.left, div.right {
float: left;
padding: 10px;
}
#realTimeContents {
overflow - y: scroll;
}
Hers is my html
<div data-role="fieldcontain" class="sliderContend_h" style="display: none; padding-top:10px;">
<input type="range" name="slider-2" id="slider-2" value="15" min="15" max="25" class="slider_h" data-highlight="true" />
</div>
<img src="img/ajax_loader_blue_512.gif" id="loadingImg" style='vertical-align: middle ;margin-left: 150px; margin-top: 200px; visibility:visible;'>
<div data-role="content" data-theme="d">
<div class="container">
<div id="realTimeContents" class="left realtimeContend_h" style="width:100%;height:1100px;"></div>
<!--div id="realTimeContents" class=" right realtimeContend_h">
</div-->
<div class="cursor" style="font-size:23px;">|</div>
</div>
</div>
Here is my js..
function nativePluginResultHandler(result) {
var isappend = window.localStorage.getItem("isAppendButtonClick");
if (isappend == 'true') {
$('#loadingImg').hide();
var currentTime = new Date()
var hours = currentTime.getHours()
var minutes = currentTime.getMinutes()
if (minutes < 10) {
minutes = "0" + minutes
}
var lines = result.split('<br/>');
$.each(lines, function () {
var text = "<span style='margin-left: 50px;'>" + this + "</span>";
$('#realTimeContents').append("<b>" + hours + ":" + minutes + " " + "</b> " + text + "<br/>");
});
var elem = document.getElementById('realTimeContents');
elem.scrollTop = elem.scrollHeight;
// $('#realTimeContents').prepend('<p>'+result+'</p>');
console.log(result + "************naveen***************");
// $('#realTimeContents' ).append('<p>'+result+'</p>');
}
}
How to start scrolling (manually when user scroll that actually div is not responded.It stand straight without any change state