We Keep Coding

Creating a marquee using anything? Javascript, Jquery, CSS

I'm trying to build a blog using HTML and CSS. Now I've integrated API's for certain stocks using PHP and using the data I've created multiple widgets.
Now I'm trying to create a marquee similar to stock markets (endless and infinite without any gaps). I found a few examples on the but failed to understand its implementation.
Can anyone tell how the marquee like feature works in either of these websites
https://nse.com/ (at the top of the website)
https://www.gdax.com/
$('document').ready(function(){
refreshData();
})
function refreshData() {
$('#container-table').load("data.php", function(){
setTimeout(refreshData, 10000);
});
$('#container-tablel').load("datanike.php", function(){
setTimeout(refreshData, 10000);
});
$('#container-tabled').load("datamsft.php", function(){
setTimeout(refreshData, 10000);
});
$('#container-tablee').load("dataaapple.php", function(){
setTimeout(refreshData, 10000);
});
$('#container-tablex').load("dataamzn.php", function(){
setTimeout(refreshData, 10000);
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container1">
<div id="container-table"></div>
<div id="container-tablel"></div>
<div id="container-tabled"></div>
<div id="container-tablee"></div>
<div id="container-tablex"></div>
</div>
I would like to implement these like the one in GDAX. But any other implementation will also be greatly appreciated.
Thanks in advance.

You can use simple html <marquee> tag for infinite moving.
See example:
#container-table, #container-tablel, #container-tabled, #container-tablee, #container-tablex {
float: left;
padding: 0 20px 0 0;
}
<div class="container1">
<marquee>
<div id="container-table">test</div>
<div id="container-tablel">test1</div>
<div id="container-tabled">test2</div>
<div id="container-tablee">test3</div>
<div id="container-tablex">test4</div>
</marquee>
</div>

Try this
This is continuous marquee
// polyfill
window.requestAnimationFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
var speed = 5000;
(function currencySlide(){
var currencyPairWidth = $('.slideItem:first-child').outerWidth();
$(".slideContainer").animate({marginLeft:-currencyPairWidth},speed, 'linear', function(){
$(this).css({marginLeft:0}).find("li:last").after($(this).find("li:first"));
});
requestAnimationFrame(currencySlide);
})();
.slider{
width:100%;
overflow:hidden;
position:relative;
margin:0;
}
.edge{
left:0;
right:0;
top:0;
bottom:0;
position:absolute;
height:100%;
display:block;
}
.edge:before{
content:'';
position:absolute;
left:0;
background:-webkit-linear-gradient(left, white 10%, rgba(0,0,0,0) 100%);
width:25%;
height:100%;
}
.edge:after{
content:'';
position:absolute;
right:0;
background:-webkit-linear-gradient(right, white 10%, rgba(0,0,0,0) 100%);
width:25%;
height:100%;
}
ul{
background:#ddd;
overflow:hidden;
width:1000%;
margin:0;
}
li{
list-style:none;
display:inline-block;
padding:0 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='slider'>
<div class="edge"></div>
<ul class="slideContainer" id="money_start">
<li class="slideItem" >
EUR
</li>
<li class="slideItem">
USD
</li>
<li class="slideItem">
JPY
</li>
<li class="slideItem">
CNY
</li>
<li class="slideItem">
VD
</li>
<li class="slideItem">
GBP
</li>
<li class="slideItem">
AUD
</li>
<li class="slideItem">
CAD
</li>
<li class="slideItem">
CHF
</li>
<li class="slideItem">
XAU
</li>
</ul>
</div>

The NSE site is using custom-stock-ticker (A Word Press Plugin). A good place to start there is looking at stock_ticker_script.js.

how can I append divs with seperative classes on click dynamically?

I have a div with a link inside of it. as you see in snippet when the link is clicked it appends a new div beside. it is working!
but what i want is when every time link is clicked a new seperative class should be dynamically adding to 'project-list'.
$(".click").click(function () {
$(".container").append('<div class="project-list"><div class="projects-name"> div1</div><div class="project-box">Content</div></div>');
});
.container{
width:100%
}
.project-list{
width:100px;
background:#e8e8e8;
border-radius:5px;
padding:10px 20px;
display:inline-block;
margin:8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="project-list">
<div class="projects-name"> div1</div>
<div class="project-box">Content</div>
<div class="ProjectSetting">
<a class="click" href="#">click</a>
</div>
</div>
</div>
if it is not clear ask me below.

var i=0;
$(".click").click(function () {
i++;
var toAppend = '<div class="project-list newClass'+i+'"><div class="projects-name"> div1 [newClass'+i+']</div><div class="project-box">Content</div></div>';
$(".container").append(toAppend);
});
.container{
width:100%
}
.project-list{
width:100px;
background:#e8e8e8;
border-radius:5px;
padding:10px 20px;
display:inline-block;
margin:8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="project-list">
<div class="projects-name"> div1</div>
<div class="project-box">Content</div>
<div class="ProjectSetting">
<a class="click" href="#">click</a>
</div>
</div>
</div>

javascript - display:block onclick function won't work

For some reason my onclick function won't display the menu, here's my code:
function showmenu(){
document.getElementById("mobile-menu").style.display = "block";
}
#mobile-menu{
background:red;
height:160px;
display:none;
}
<div onclick="showmenu()" id="nav-toggle">MENU</div>
<div id="mobile-menu">
<ul>
<li><p>ABOUT</p></li>
<li><p>WORK</p></li>
<li><p>SERVICES</p></li>
<li><p>CONTACT</p></li>
</ul>
</div>

Cannot hide message box when I close modal overlay

I'm trying to create my own modal overlay. If you don't know what that is, it is an effect where you if you activate a certain element by clicking on it an black opaque overlay will show up on your screen, and usually a message box will be in the center of the overlay. I think I have successfully done the modal overlay. However, whenever I click out of the overlay the overlay will become hidden but the message box will still be shown. I looked into my debugging tools and the css says the message box is supposedly hidden. However, I still see it on the screen.
CSS
div.overlay{ height:100%; width:100%; margin:0; padding:0; background:rgba(40, 0, 77,0.7); position:fixed;
z-index:100; top:0; left:0; display:none;}
div.rela{height:100%; width:100%; margin:0; padding:0; position:relative; z-index:101;}
div.rela span{ position:absolute; top:0; left:98%; font-weight:bold; font-size:36px; }
div.rela span a{ color:white; text-decoration:none; z-index:152;}
div#message{width:40%; height:20%; background:white; text-align:center;
border:1px solid black; font-weight:bold;display:none; z-index:102;}
div#message h5{font-size:18px;}
HTML
<div class="overlay">
<div class="rela">
<span>X</span>
</div>
</div>
<div id="ex3"><h2>Example 3</h2><p></p><h4>results:</h4>
<button id="overlay-on">Open up the overlay</button>
<div id="message">
<h5>Title</h5>
<p>Width is:</p>
</div>
</div>
Javascript
/* This is for clicking off the overlay */
(function removeOverlay(){
document.querySelector('div.overlay span a').onclick = function()
{
document.querySelector('div.overlay').style.display ="none";
console.log('I am closing')
};
document.querySelector('div.overlay').addEventListener('click', function(){
this.style.display ="none";
console.log('Im closing with overlay');
});
})();
document.querySelector('button#overlay-on').addEventListener('click',function(){
var overlay = document.querySelector('div.overlay');
overlay.style.display = "block";
var message = document.querySelector('div#message').outerHTML;
var relative = document.querySelector('div.rela');
document.getElementById('message').setAttribute('style','position:absolute; display:block; top:10%; ');
var text = document.createTextNode(document.getElementById('message').offsetWidth);
document.querySelector('div#message p').appendChild(text);
console.log(message);
relative.innerHTML = relative.innerHTML + message ;
});

You just need to put the message box inside the modal.
<div class="overlay">
<div class="rela">
<span>X</span>
</div>
<div id="message">
<h5>Title</h5>
<p>Width is:</p>
</div>
</div>
<div id="ex3">
<h2>Example 3</h2>
<p></p>
<h4>results:</h4>
<button id="overlay-on">Open up the overlay</button>
</div>
Or wrap the modal around the message box.
<div id="ex3">
<h2>Example 3</h2>
<p></p>
<h4>results:</h4>
<button id="overlay-on">Open up the overlay</button>
<div class="overlay">
<div class="rela">
<span>X</span>
</div>
<div id="message">
<h5>Title</h5>
<p>Width is:</p>
</div>
</div>
</div>
Fiddle

Overriding z-index with button click

Here is my code:
<html>
<head>
<style type="text/css">
#div1
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
width:100px;
height:100px;
background-color:#F00;
}
#div2
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
width:100px;
height:100px;
background-color:#000;
}
#div3
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
width:100px;
height:100px;
background-color:#ccc;
}
#div4
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
width:100px;
height:100px;
background-color:#999;
}
#links
{
position:absolute;
left:0px;
top:200px;
}
</style>
</head>
<body>
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>
<div id="div4">Div 4</div>
<div id="links">
<input type="button" value="Link1" onclick="resetAll(); up('div1');">
<input type="button" value="Link2" onclick="resetAll(); up('div2');">
<input type="button" value="Link3" onclick="resetAll(); up('div3');">
<input type="button" value="Link4" onclick="resetAll(); up('div4');">
<script>
function reset(id)
{
document.getElementById(id).style.zIndex = 1000;
}
function up(element)
{
element.style.zIndex = 1;
}
function resetAll()
{
for (var i = 1; i <= 4; i++)
{
reset('div' + i);
}
}
</script>
</div>
</body>
</html>
So that works, when you click Link 2 button to display div2, it overrides the zindex of div1 just fine, as I'd like.
However, when you click Link 1 (which is supposed to display div1), it doesn't go back to div1. I'd like whichever button I click to display the div it is linked to.

you should reset all your divs to their original state... then mark your selected. do..upgrade your html to this version:
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>
<div id="div4">Div 4</div>
<div id="links">
<input type="button" value="Link1" onclick="resetAll(); up('div1');">
<input type="button" value="Link2" onclick="resetAll(); up('div2');">
<input type="button" value="Link3" onclick="resetAll(); up('div3');">
<input type="button" value="Link4" onclick="resetAll(); up('div4');">
</div>
and add this JS functions:
function reset(id)
{
document.getElementById(id).style.zIndex = 1000;
}
function up(element)
{
element.style.zIndex = 1;
}
function resetAll()
{
for (var i = 1; i <= 4; i++)
{
reset('div' + i);
}
}
and here comes the fiddle: http://jsfiddle.net/ymzrocks/5604wmtc/

you need to set the first one back to 0
<script>
var shown;
function show(){
if(shown) shown.style.zIndex = 0;
shown = this;
shown.style.zIndex = 1;
}
</script>
then
<input type="button" value="Link1" onclick="show()">
<input type="button" value="Link2" onclick="show()">
<input type="button" value="Link3" onclick="show()">
<input type="button" value="Link4" onclick="show()">

it is the correct behavior because step by step you are giving z-index=1 to all divs. Id div4 is visible with z-index=1 and you execute document.getElementById('div1').style.zIndex='1' the correct behavior is show div4. You should give an higher z-index to div1 or a lower z-index to other divs