no error on console, making little circles change colour on refresh - javascript

I have been trying to complete a small exercise and I have it running in codepen but when I put it through sublime and open it in my browser it doesn't show anything! I have tried running it through JSHint, read over and over it. Would love if someone one could please take a moment to have a quick read through.
..This is what it's supposed to do.. http://codepen.io/hellojessicagraham/pen/Ropgob
var htmlDot = "";
var red;
var green;
var blue;
var rgbColor;
function colourSelect() {
return Math.floor(Math.random() * 256 );
}
for(var i = 1; i<=100; i+=1) {
red = colourSelect();
green = colourSelect();
blue = colourSelect();
rgbColor = "rgb(" + red + "," + green + "," + blue + ")";
htmlDot += "<div style=\"background-color:"+ rgbColor + " \"></div>";
}
document.write(htmlDot);
The HTML is as follows
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<script src="script.js"></script>
</body>
</html>
CSS as follows
div{
width: 50px;
height: 50px;
display: inline-block;
border-radius: 50%;
margin: 5px;
}
Thank you in advance

Since it seems to work with all the code on your html document, are you sure the links to your js/css files are correct ? Use the inspector in your navigator (F12) if you're not sure.
Edit : It's just working fine. Like Dejan said, your error is probably in your stylesheet.
var htmlDot = "";
var red;
var green;
var blue;
var rgbColor;
function colourSelect() {
return Math.floor(Math.random() * 256 );
}
for(var i = 1; i<=100; i+=1) {
red = colourSelect();
green = colourSelect();
blue = colourSelect();
rgbColor = "rgb(" + red + "," + green + "," + blue + ")";
htmlDot += "<div style=\"background-color:"+ rgbColor + " \"></div>";
}
document.write(htmlDot);
button {
width:50px;
height: 50px;
border-radius: 50%;
margin: 0px;
display: inline-block;
}
div{
width: 50px;
height: 50px;
display: inline-block;
border-radius: 50%;
margin: 5px;
}

Your javascript code is fine, all u forgot is the css of the div element. Your divs are all collapesed into oneand not displaying. Give them some love :D LIke in the link u posted they created circles with the folowing css.
.div {
width: 50px;
height: 50px;
display: inline-block;
border-radius: 50%;
margin: 5px;
}

There is no
<body>
Also, try to remove
<!doctype html>
Actually, it works fine.Try to make sure about the path and the file name.

Related

Scroll to the bottom doesn't work due to font link

Can someone please explain what's going on here?
As you can see in the example, the scroll does not go all the way down to the bottom
This is of course a problem as it does not behave according to the instructions, which is:
scrollIntoView() or target.scroll (0, target.scrollHeight - target.clientHeight);
Strangely enough, it has something to do with the "font link" in "<head>", because if I use any font other than the one that has been downloaded (Poppins), it works
var html_1 = '<div class="chat_window"><div class="messages"></div></div>';
var html_2 = '<div>hello buddy</div>';
document.body.insertAdjacentHTML('beforeend', html_1);
var target = document.querySelector('.chat_window').querySelector('.messages');
for(var i = 0; i < 9; i++) {
target.insertAdjacentHTML('beforeend', html_2);
//target.scroll(0, target.scrollHeight - target.clientHeight);
target.lastElementChild.scrollIntoView();
}
body
{
font-family: Poppins; /*here, because of this the problem arise*/
}
.chat_window
{
height: 113px;
width: 339px;
border: 1px solid black;
}
.chat_window .messages
{
height: 100%;
overflow: auto;
}
<head>
<link href="http://fonts.googleapis.com/css?family=Poppins:400,300,500,600,700" rel="stylesheet">
</head>
<body></body>
The problem is the time needed to dynamically render the HTML and load the font. There are a few options, but might be seen as a little hacky.
Make sure you are using the same font somewhere else on the page. This will cause the browser to load the font (otherwise the browser may ignore the font until it is needed)
Delay the scroll a little after you render the HTML with JavaScript.
A minor change like this could work:
var html_1 = '<div class="chat_window"><div class="messages"></div></div>';
var html_2 = '<div>hello buddy</div>';
document.body.insertAdjacentHTML('beforeend', html_1);
var target = document.querySelector('.chat_window').querySelector('.messages');
for(var i = 0; i < 9; i++) {
target.insertAdjacentHTML('beforeend', html_2);
}
// A short delay, then jump to last item.
setTimeout(function(){
target.scroll(0, target.scrollHeight - target.clientHeight);
target.lastElementChild.scrollIntoView();
},500);
body{
font-family: Poppins;
}
.chat_window{
height: 113px;
width: 339px;
border: 1px solid black;
}
.chat_window .messages{
height: 100%;
overflow: auto;
}
<head>
<link href="http://fonts.googleapis.com/css?family=Poppins:400,300,500,600,700" rel="stylesheet">
</head>
<body>(forcing the font to load)</body>

Stick a div underneath thumbnails + limit the width

Alright. This might sound a little bit complicated. I've got a script which fetches thumbnails from a JSON. It fetches 9 thumbnails and onclick of the #load it fetches 9 more. How can I set the Load more button underneath the thumbnails and how to make it stick to the bottom of them each time you click it? ( I do not want it like it's now, on the side, but right in the middle and underneath them ).
+BONUS question: How can I fixate the thumbnails so they always show up 3 in a row. Since now, when I resize the window they change ( as you can see in the fiddle, there's only 2 per row now ).
jsfiddle.net/z6ge55ky/
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="twitch">
<script src="js/main.js"></script>
<div id="load">
<img class="hvr-pulse" src="http://i.imgur.com/KHIYHFz.png?1">
</div>
</div>
$(function() {
var i=0;
var twitchApi = "https://api.twitch.tv/kraken/streams";
var twitchData;
$.getJSON(twitchApi, function(json) {
twitchData = json.streams;
setData()
});
function setData(){
var j = twitchData.length > (i + 9) ? (i + 9) : twitchData.length;
for (; i < j; i++) {
var streamGame = twitchData[i].game;
var streamThumb = twitchData[i].preview.medium;
var streamVideo = twitchData[i].channel.name;
var img = $('<img style="width: 250px; height: 250px;" src="' + streamThumb + '"/>')
$('#twitch').append(img);
img.click(function(){
$('#twitch iframe').remove()
$('#twitchframe').append( '<iframe frameborder="0" style="overflow:hidden; margin-left: 25px; width:400px; height:250px; position: fixed; top: 0; margin-top: 23.55%;" src="http://player.twitch.tv/?channel=' + streamVideo + '"></iframe>');
});
}
}
$('#load').click(function() {
setData();
});
});
#twitch {
width: 60%;
position: absolute;
left: 20%;
text-align: center;
}
#twitch img {
border: 5px solid rgba(0,0,0,0);
margin: 0 auto;
cursor: pointer;
}
#load {
bottom: 0;
position: absolute;
}
You have declared the width for #twitch 60% remove that and for #load use top:100%
DEMO on jsfiddle

Using jquery append() puts the appended content outside of the appended background

I'm using the append function to add different divs, images, links and text onto my html. When I do this though, the content that I get from a JSON file that I'm trying to append is being placed outside of the background that I want it to be placed on. Here is what the content is supposed to look like:
http://i.stack.imgur.com/iShVe.png
The image and text is placed onto the gray background when I create this html content myself, but when I try to create all this content with append(), it puts all the content to the left of the background:
Here is also the codepen that I'm doing it on if you needed to see that: http://codepen.io/JaGr/pen/XXMPQY
html:
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
<div>
<div class="header">
<div>
Camper
</div>
<div>
News
</div>
</div>
<div class="stories">
<div class="story">
<img src="http://a5.mzstatic.com/us/r30/Purple5/v4/5a/2e/e9/5a2ee9b3-8f0e-4f8b-4043-dd3e3ea29766/icon128-2x.png" class="profilePicture">
<div class="headline">Test Headline</div>
<div class="author">by - TestName</div>
<div class="likes"><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-heart-128.png" class="heartIcon"> 13</div>
</div>
</div>
</div>
css:
body {
background-image: url("http://s22.postimg.org/bondz7241/grey_wash_wall.png")
}
.header {
font-family: 'Oswald', sans-serif;
font-size: 100px;
float: left;
color: #A9A9A9;
border-right-style: solid;
border-bottom-style: solid;
margin-left: 20px;
margin-top: 10px;
padding-right: 135px;
padding-bottom: 18px;
width: 210px;
margin-bottom: 29px;
}
.story {
text-align: center;
float: right;
background-color: #A9A9A9;
width: 230px;
height: 330px;
margin-bottom: 30px;
margin-right: 30px;
box-shadow: 2px 2px 13px;
}
.headline, .author, .likes {
padding-top: 7px;
font-family: 'Droid Serif', serif;
}
.likes {
vertical-align:middle
padding-top: 5px;
}
a {
text-decoration: none;
color: #0052cc;
}
.profilePicture {
width: 230px;
height: 230px;
}
.heartIcon {
width: 15px;
height: 15px;
}
javascript:
$(document).ready(function() {
$.getJSON("http://www.freecodecamp.com/news/hot", function(json) {
for (var x = 0; x < json.length; x++) {
var headline = json[x].headline;
var headlineLink = json[x].link;
var authorName = json[x].author.username;
var authorNameLink = "http://www.freecodecamp.com/" + authorName;
var authorPicture = json[x].author.picture;
var likes = json[x].rank;
if (headline.length > 15) {
headline = headline.slice(0, 16);
}
var divStory = '<div class="story">'
var profilePic = '<img src="' + authorPicture + '"' + ' class="profilePicture">'
var divHeadline = '<div class="headline">' + headline + '</div>'
var divAuthor = '<div class="author">by - ' + authorName + '</div>'
var divLikes = '<div class="likes"><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-heart-128.png" class="heartIcon">' + likes + '</div>'
var lastDiv = '</div>'
$(".stories").append(divStory, profilePic, divHeadline, divAuthor, divLikes, lastDiv)
}
});
});
I think my html and css is OK, it works alright when I type in the code myself; it's just the javascript that introduces the problem. I've checked the variables and incoming JSON and they both seem fine as well, so I think the problem is just with append() itself, but I don't know exactly whats causing it.
It is the jquery append multiple elements.
$(".stories").append(divStory, profilePic, divHeadline, divAuthor, divLikes, lastDiv)
I haven't found out exactly why it created the issue, but change it to will fix the problem.
$(".stories").append(divStory + profilePic + divHeadline + divAuthor + divLikes + lastDiv)
Check fix here
Did u ever use the devtools? (F12)
They're pretty useful, and you can see on first sight that your elements aren't wrapped into the .story-tags.
I'd do it like this:
var tplStory = '\
<div class="story">\
<img src="{{authorPicture}}" class="profilePicture">\
<div class="headline">{{headline}}</div>\
<div class="author">by - {{authorName}}</div>\
<div class="likes"><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-heart-128.png" class="heartIcon">{{likes}}</div>\
</div>';
$(".stories").append(
divStory
.replace('{{authorPicture}}', authorPicture)
.replace(...)
)

How to stack div elements using JavaScript

I am trying to create a checker board using pure JavaScript, not jQuery.
I have created the first row, but cannot seem to "stack" the rows to create a full board. If there is a better way to go about this than the road I'm going down, please enlighten me.
<!DOCTYPE html>
<html>
<head>
<title>Checkerboard</title>
<style>
.box {
height: 50px;
width: 50px;
border: 1px solid black;
display: inline-block;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
<script type="text/javascript">
var row = function (node, count) {
for (var i = 1; i < count; i++) {
if (i % 2 === 0) {
copy = node.cloneNode(true);
node.parentNode.insertBefore(copy, node).style.backgroundColor = "white";
} else {
copy = node.cloneNode(true);
node.parentNode.insertBefore(copy, node).style.backgroundColor = "red";
}
}
}
row(document.querySelector('.box'), 8);
</script>
</html>
Your code works fine, you just need to actually run the function you've created:
row(document.getElementsByClassName("box")[0], 50);
JSFiddle: http://jsfiddle.net/63dcjsk4/
Edit
If you're talking about the gap that appears between rows, fix this by using float and removing the inline-block display:
.box {
border: 1px solid black;
height: 50px;
float: left;
width: 50px;
}
JSFiddle: http://jsfiddle.net/63dcjsk4/1/

How to add a div into html code using Javascript

I am trying to create a function that is supposed to take the mouse coordinates and draw a small radius using their values and inserting them into CSS left and top positions. I am stuck at the part where I am supposed to add the div that I have created to the html. Please forgive me if I am not being clear enough.
<script type="text/javascript">
function getcoord(event) {
var x=event.clientX ;
var y=event.clientY ;
follow(x,y);
function follow(xcor,ycor) {
folowHTML =
'<div style="'background-color:red;width:30px;height:30px;'
+'border-radius:30px;position:absolute;left:''+xcor;'top:'+ycor';">'
+'</div>';
};}
</script>
<body onmouseover="getcoord(event);">
</body>
Maybe try add this line:
document.body.innerHtml = folowHTML + document.body.innerHtml;
Also You should probably change position absolute to fixed I think.
Edit: This was bad way
Here You have answer:
Instert element before </body> tag with vanilla JavaScript
You could try something like this...
<style>
#follow {
background-color: #fff;
border:1px solid red;
border-radius: 50%;
height: 20px;
margin:-10px 0 0 -10px;
position: absolute;
width: 20px;
z-index: 10;
}
</style>
<script>
function initFollow(){
var follow = document.createElement('div');
follow.setAttribute('id','follow');
document.getElementsByTagName("body")[0].appendChild(follow);
window.addEventListener('mousemove', function(e) {
var left = e.pageX + 'px',
top = e.pageY + 'px';
follow.style.left = left;
follow.style.top = top;
}, false);
}
window.addEventListener('load',initFollow,false);
</script>

Categories