I have some data from an API which I'm displaying on my web page. I've also got some simple HTML for an accordion. I have 4 lots of data and I want to display only one lot per slide on the accordion.
How would I do this? I would like to know how to separate the data for each slide based on my code.
$( function() {
$( "#top-stories" ).accordion();
});
fetch('https://api.nytimes.com/svc/topstories/v2/technology.json?api-key='')
.then((resp) => resp.json())
.then(function(data) {
const accordionSlides = document.querySelectorAll(".accordion-slide");
data.results.slice(0, 4).forEach((accordion, i) => {
accordionSlides[i].innerHTML = `
<h1>${accordion.title}</h1>
<p>${accordion.url}</p>
<p>${accordion.abstract}</p>
<p>${accordion.published_date}</p>
<img src="${accordion.multimedia[4].url}"/>`;
})
})
<html>
<head>
<link rel="stylesheet" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="index.js"></script>
</head>
<body>
<div id="top-stories">Top Stories</h1>
<h3 class="accordion">Story 1</h3>
<div class="panel">
<div class="accordion-title"></div>
</div>
<h3 class="accordion">Story 2 - Collapsed</h3>
<div class="panel">
<div class="accordion-title"></div>
</div>
<h3 class="accordion">Story 3 - Collapsed</h3>
<div class="panel">
<div class="accordion-title"></div>
</div>
<h3 class="accordion">Story 4 - Collapsed</h3>
<div class="panel">
<div class="accordion-title"></div>
</div>
</body>
</html>
If you're open to using jquery-ui library, the following should work.
First of all, your HTML should be something as below:
<html>
<head>
<link rel="stylesheet" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="index.js"></script>
</head>
<body>
<div id="top-stories">Top Stories</h1>
<h3 class="accordion">Story 1</h3>
<div class="panel">
<div class="accordion-slide"></div>
</div>
<h3 class="accordion">Story 2 - Collapsed</h3>
<div class="panel">
<div class="accordion-slide"></div>
</div>
<h3 class="accordion">Story 3 - Collapsed</h3>
<div class="panel">
<div class="accordion-slide"></div>
</div>
<h3 class="accordion">Story 4 - Collapsed</h3>
<div class="panel">
<div class="accordion-slide"></div>
</div>
</body>
</html>
I've changed the ID's to classes and replaced buttons with h3 tags. Also, I've added a link to the jquery-ui library.
And then the JS would mostly be as suggested by #marzelin with the addition jquery-ui accordin library initialization:
$( function() {
$( "#top-stories" ).accordion();
});
fetch('https://api.nytimes.com/svc/topstories/v2/technology.json?api-key="."')
.then((resp) => resp.json())
.then(function(data) {
const accordionSlides = document.querySelectorAll(".accordion-slide");
data.results.slice(0, 4).forEach((accordion, i) => {
accordionSlides[i].innerHTML = `
<h1>${accordion.title}</h1>
<p>${accordion.url}</p>
<p>${accordion.abstract}</p>
<p>${accordion.published_date}</p>
<img src="${accordion.multimedia[4].url}"/>`;
})
})
change <div id="accordion"></div> to <div class="accordion-slide"></div> and then:
fetch('https://api.nytimes.com/svc/topstories/v2/technology.json?api-key="."')
.then((resp) => resp.json())
.then(function(data) {
// get all slides
const accordionSlides = document.querySelectorAll(".accordion-slide");
data.results.slice(0, 4).forEach((accordion, i) => {
// insert content into a given slide
accordionSlides[i].innerHTML = `
<h1>${accordion.title}</h1>
<p>${accordion.url}</p>
<p>${accordion.abstract}</p>
<p>${accordion.published_date}</p>
<img src="${accordion.multimedia[4].url}"/>`;
})
})
Related
I'm trying to create a modal activated by jquery. Inside that modal I have a slider created in webflow, but this slider isn't working.
The webflow support suggests to insert, after the modal activator, this line of code: Webflow.require('slider').redraw();
But it's not working.
Here's my code:
$('#plus-1').on('click', function() {
//apri la modal corrispondente
$("#modal-1").css('display', 'flex');
//$('.slider').redraw();
Webflow.require('slider').redraw();
$('#chiudi-1').on('click', function() {
//chiudi la modal corrispondente
$("#modal-1").css('display', 'none');
});});
<script src="https://www.tecmasolutions.com/clients/princype-2/js/configurator-princype-rev002.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://www.tecmasolutions.com/clients/princype-2/css/normalize.css" rel="stylesheet" type="text/css">
<link href="https://www.tecmasolutions.com/clients/princype-2/css/components.css" rel="stylesheet" type="text/css">
<link href="https://www.tecmasolutions.com/clients/princype-2/css/configurator-princype-rev002.css" rel="stylesheet" type="text/css">
<button id="plus-1" type="button">Click Me!</button>
<div id="modal-1" class="modal-prezzi porta-h240 logged">
<div class="info-wrapper-checkout logged">
<a id="chiudi-1" class="chiudi checkout logged">x</a>
<div id="slider-1" class="slider w-slider">
<div class="w-slider-mask">
<div class="img_int-pack-premium-plus a w-slide">
</div>
<div class="img_int-pack-premium-plus b w-slide">
</div>
<div class="img_int-pack-premium-plus c w-slide">
</div>
</div>
<div class="w-slider-arrow-left">
<div class="icon-2 w-icon-slider-left"></div>
</div>
<div class="w-slider-arrow-right">
<div class="icon-3 w-icon-slider-right"></div>
</div>
<div class="slide-nav w-slider-nav w-round"></div>
</div>
</div>
</div>
I found the missing point.
before the Webflow.require('slider').redraw(); I had to put this:
$.fn.redraw = function(){
$(this).each(function(){
var redraw = this.offsetHeight;
});
};
I'm looking for a way to append some JSON results, I'm working with a list (array?) and there's multiple elements, I know I can add some styling directly in the JS code but I'm more comfortable with this method. How can I iterate through elements and implement in some divs, then create similar divs with the next elements.
The only way to achieve that goal afaik is like this:
$("#article").append(data[i].datetime + data[i].headline + "<br />" + "<hr />" + data[i].summary);
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Project JS 02</title>
<link rel="stylesheet" href="assets/main.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="container container-table">
<div class="row vertical-center-row">
<div class="col-md-4 col-md-offset-4">
<button type="submit" class="btn btn-primary" style="width: 100%" class="search" id="getnews">Get News!</button>
<h1 id="headline"></h1><br>
<h3 id="datetime"></h3><br>
<div id="summary"></div><br>
<h6 id="source"></h6><br>
</div>
</div>
</div>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
document.getElementById("getnews").addEventListener("click", function () {
var newsurl = "https://api.iextrading.com/1.0/stock/aapl/news"
$.getJSON(newsurl, function (data) {
for (i in data)
{
$("#headline").append(data[i].headline);
$("#datetime").append(data[i].datetime);
$("#summary").append(data[i].summary);
$("#source").append(data[i].source);
}
})
})
</script>
</body>
</html>
You can do this by creating the elements (with jQuery) as needed, and appending them to a container:
$("#getnews").on("click", function () {
var newsurl = "https://api.iextrading.com/1.0/stock/aapl/news"
$('#data').text("...loading...");
$.getJSON(newsurl, function (data) {
$('#data').html("");
data.forEach(function (article) {
$('#data').append(
$('<h1>').text(article.headline),
$('<h3>').text(article.datetime),
$('<div>').text(article.summary),
$('<h6>').text(article.source)
);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-primary search"
style="width: 100%" id="getnews">Get News!</button>
<div id="data"></div>
First: remove the ids. If you want to create similar containers, the ids will be there multiple times, that won't work.
Second: Take the div with $('.row.vertical-center-row') and clone it.
Third: set the values at the cloned HTMLNode und append it to $('.container.container-table')
Something like that (untested):
<div class="container container-table">
<div class="row vertical-center-row">
<div class="col-md-4 col-md-offset-4">
<button type="submit" class="btn btn-primary" style="width: 100%" class="search" class="getnews">Get News!</button>
<h1 class="headline"></h1><br>
<h3 class="datetime"></h3><br>
<div class="summary"></div><br>
<h6 class="source"></h6><br>
</div>
</div>
</div>
<script>
document.getElementsByClassName("getnews").forEach((el)=>el.addEventListener("click", function () {
var newsurl = "https://api.iextrading.com/1.0/stock/aapl/news"
$.getJSON(newsurl, function (data) {
var $elClone = $('.row.vertical-center-row').clone(true).appendTo($('.container.container-table'));
for (i in data) {
$(".headline", $elClone).append(data[i].headline);
$(".datetime", $elClone).append(data[i].datetime);
$(".summary", $elClone).append(data[i].summary);
$(".source", $elClone).append(data[i].source);
}
})
}));
</script>
Is it possible to only select a subset / subgroup in d3?
right now I have
d3.selectAll(".row")
now below the rows I have cells and I want to select all cells from row 3 as shown in this image subset example.
There is no get(3) or [3] option.
Thank you for your help.
d3.selectAll(".row").selectAll(".cell")
gives me all cells
Lots of ways to do this. My favorite would be using a css :nth-child selector:
d3.select(".row:nth-child(3n)").selectAll(".cell");
Here's some others:
<!DOCTYPE html>
<html>
<head>
<script data-require="d3#4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div class="row">
<div class="cell">a</div>
<div class="cell">b</div>
<div class="cell">c</div>
</div>
<div class="row">
<div class="cell">d</div>
<div class="cell">e</div>
<div class="cell">f</div>
</div>
<div class="row">
<div class="cell">g</div>
<div class="cell">h</div>
<div class="cell">i</div>
</div>
<div class="row">
<div class="cell">j</div>
<div class="cell">k</div>
<div class="cell">l</div>
</div>
</body>
<script>
var w1 = d3.select(document.querySelectorAll(".row")[2]).selectAll(".cell"),
w2 = d3.selectAll(".row").filter((d,i) => i === 2).selectAll(".cell"),
w3 = d3.select(d3.selectAll(".row").nodes()[2]).selectAll(".cell"),
w4 = d3.select(".row:nth-child(3n)").selectAll(".cell");
</script>
</html>
I want to load the columns one by one with gap of few seconds when the page is loaded and to make this working, following the code:
setTimeout(function()
{
$("#box1").removeClass("noDisplay");
},1000);
setTimeout(function()
{
$("#box2").removeClass("noDisplay");
},1200);
setTimeout(function()
{
$("#box3").removeClass("noDisplay");
},1400);
.noDisplay{display:none;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-4 noDisplay" id="box1">Column 1 </div>
<div class="col-xs-4 noDisplay" id="box2">Column 2 </div>
<div class="col-xs-4 noDisplay" id="box3">Column 3 </div>
</div>
</div>
But I think there must be some other way to do it easily and with some effects like fade or something, can anybody please suggest?
thanks in advance
Try this from How to show each div, one by one on jquery?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-4 noDisplay" id="box1">Column 1 </div>
<div class="col-xs-4 noDisplay" id="box2">Column 2 </div>
<div class="col-xs-4 noDisplay" id="box3">Column 3 </div>
</div>
</div>
<style>
.noDisplay{display:none;}
</style>
<script>
$(function() {
showDiv();
});
function showDiv() {
if($('.noDisplay:hidden').length) {
$('.noDisplay:hidden:first').fadeIn();
setTimeout(showDiv, 1000);
}
}
</script>
Try this:
$(document).ready(function() {
var tTimer, count = 0;
tTimer = setInterval(function (){
count++;
$("#box" + count).removeClass("noDisplay");
if (count >= 4) clearInterval(tTimer);
}, 100);
});
You can use interval to do it and also mix it up with some css so here's the code:
Javascript
$(document).ready(function(){
var num = 3; //Number of elements
var currentElem = 1;
setInterval(function () {
if(currentElem <= num) {
$("#box"+currentElem).css('opacity','1');
currentElem++;
}
}, 1000);
});
CSS
.Lazy {
opacity: 0;
transition: 1s;
}
HTML
<div class="container">
<div class="row">
<div class="col-xs-4 Lazy" id="box1">Column 1 </div>
<div class="col-xs-4 Lazy" id="box2">Column 2 </div>
<div class="col-xs-4 Lazy" id="box3">Column 3 </div>
</div>
</div>
You can also make it more dynamic by checking existence of element with "box"+currentElem ID instead!
Do you mean like this?
$(document).ready(function() {
var dispInterval = 750;
$.each($('div.noDisplay'), function(key, divItem) {
setTimeout(function(){
$(divItem).fadeToggle('slow');
}, dispInterval);
dispInterval += dispInterval;
});
});
.noDisplay{display:none;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-4 noDisplay" id="box1">Column 1 </div>
<div class="col-md-4 noDisplay" id="box2">Column 2 </div>
<div class="col-md-4 noDisplay" id="box3">Column 3 </div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How can I use the HTML5 canvas element in IE?
I'm not sure what I'm doing wrong. I did what it said to do but nothing works. I'm using a grid system, but I don't think that's the problem. And I don't think it's my security settings either. Here's my HTML and Javascript if that helps.
HTML
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Zack Vivier</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--[if IE]><script type="text/javascript" src="js/excanvas.js"></script><![endif]-->
<!-- enable HTML5 elements in IE7+8 -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<!-- 1140px Grid styles for IE -->
<!--[if lte IE 9]><link rel="stylesheet" href="styles/ie.css" type="text/css" media="screen" /><![endif]-->
<link href="styles/styles.css" rel="stylesheet" type="text/css">
<link href="styles/1140.css" rel="stylesheet" type="text/css">
<!--css3-mediaqueries-js - http://code.google.com/p/css3-mediaqueries-js/ - Enables media queries in some unsupported browsers-->
<script type="text/javascript" src="js/css3-mediaqueries.js"></script>
<script src="js/js.js"></script>
</head>
<body>
<header>
<h1 class="hidden">Zack Vivier Home</h1>
<div class="container">
<div class="row">
<div class="fivecol">
<div class="logo"><img src="images/logo.png" alt="zack vivier logo"></div>
</div>
<div class="sevencol last">
<nav>
<h2 class="hidden">Site Navigation</h2>
<ul>
<li>Home</li>
<li>Information</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<div class="container">
<div class="row">
<div class="twelvecol last">
<div class="lineone"></div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="twelvecol last">
<div class="caption">
<h4 id="tagLine">Image Number</h4>
</div>
<div class="slideshow">
<canvas id='showCanvas' width='1022' height='397'>Canvas Not Supported</canvas>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="threecol last">
<div class="about"><h2>About Me</h2></div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="twelvecol last">
<div class="linetwo"></div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="sevencol last">
<div class="contenthome">
<p> My Name is Zack Vivier; currently I am 19</p>
<p>years old and attend Fanshawe College for Interactive</p>
<p>Media Design and Production. I am a Designer,</p
<p>Programmer, Musician, Video Editor, and Animator.</p>
</div>
</div>
</div>
</div>
<h1 class="hidden">footer</h1>
<div class="container">
<div class="row">
<div class="twelvecol last">
<div class="footer">
<h3>Copyright © 2012 Zack Vivier. All Rights Reserved.</h3>
</div>
</div>
</div>
</div>
</body>
</html>
Javascript
// JavaScript Document
var imagePaths = new Array("images/photo_1.png", "images/game_web.jpg", "images/tattoo.jpg");
var whichImage = new Array("Graffti Project", "Game WebSite", "Tattoo Project");
var showCanvas;
var showCanvasCtx;
var imageText;
var currentImage = 0;
var currentImageText = 0;
var img = document.createElement("img");
function init() {
imageText=document.getElementById('tagLine');
showCanvas = document.getElementById('showCanvas');
showCanvasCtx = showCanvas.getContext('2d');
img.setAttribute('width','1022');
img.setAttribute('height','397');
switchImage();
setInterval(switchImage, 2500);
}
function switchImage() {
imageText.innerHTML = whichImage[currentImageText++];
img.setAttribute('src',imagePaths[currentImage++]);
img.onload = function() {
if (currentImage >= imagePaths.length) {
currentImage = 0;
currentImageText = 0;
}
showCanvasCtx.drawImage(img,0,0,1022,397);
}
window.onload = init();
Canvas is a HTML5 element which IE8 doesn't supports.
Your doctype is also wrong since you're using HTML5 set it to: "".
As said in the comments: IE8 won't support the canvas tag. However there are some plugins that mimic it's behavior. I've used this one once: http://flashcanvas.net/ and it does the job, there's another called http://code.google.com/p/explorercanvas/. but i have no comment on that one, never used, don't know what to expect.
Just one note: the fallbacks will have their limitations, but as far as 2D drawing concerns, I think these will work out for you