YQL request and javascript : displaying everything - javascript

For a project, i need to get the dome of some websites and parse it. I find a solution with YQL. The request seems to work well on this site.
https://developer.yahoo.com/yql/
But when i use it on my local website with the following javascript :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>BabylonJS - HexaGrid</title>
<style>
body, html {
margin:0;
padding: 0;
border: 0;
overflow: hidden;
width: 100%;
height: 100%;
}
canvas { width: 100%; height: 100%; }
#vr {
position: absolute;
top: 10px;
left: 10px;
padding: 10px 15px;
border: 2px solid #ddd;
background: #4587ea;
color: #fff;
transition: all 0.3s;
}
#vr:hover {
transition: all 0.3s;
background: #449fff;
cursor: pointer;
}
</style>
</head>
<body>
<script type="text/javascript">
var url = 'https://www.brainpickings.org/2016/06/09/strange-trees/';
$.getJSON("http://query.yahooapis.com/v1/public/yql?"+
"q=select%20*%20from%20html%20where%20url%3D%22"+
encodeURIComponent(url)+
"%22&format=json'&callback=?", function(data){
// if there is data, filter it and render it out
if(data.results[0]){
var test = data.results[0];
alert(test);
} else {
var errormsg = "<p>Error: can't load the page.</p>";
alert(errormsg);
}
});
</script>
</body>
</html>
It only display a part of the request. I don't really what went wrong, if it's because the yql request is big and is not finish or i lack some knowledge for getting what remain.
Thanks in advance for your answers.

Your code is using but missing the jQuery library, and doesn't wait for the document to be ready. Here is the code fixed and working:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>BabylonJS - HexaGrid</title>
<style>
body,
html {
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
width: 100%;
height: 100%;
}
canvas {
width: 100%;
height: 100%;
}
#vr {
position: absolute;
top: 10px;
left: 10px;
padding: 10px 15px;
border: 2px solid #ddd;
background: #4587ea;
color: #fff;
transition: all 0.3s;
}
#vr:hover {
transition: all 0.3s;
background: #449fff;
cursor: pointer;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
var url = 'https://www.brainpickings.org/2016/06/09/strange-trees/';
$.getJSON("http://query.yahooapis.com/v1/public/yql?"+
"q=select%20*%20from%20html%20where%20url%3D%22"+
encodeURIComponent(url)+
"%22&format=json'&callback=?", function(data){
// if there is data, filter it and render it out
if(data.results[0]){
var test = data.results[0];
alert(test);
} else {
var errormsg = "<p>Error: can't load the page.</p>";
alert(errormsg);
}
});
});
</script>
</body>
</html>

Related

Div changes size once another div is loaded?

So, i am having an issue with a div, when another div is generated (via javascript) below it, it is changing the size of the div.
// for the side nav message list
const chatList = function(list) {
let br = document.createElement("br")
for (let index in list) {
try {
let chat = list[index]
let chatBodyParent = document.createElement("div")
chatBodyParent.onclick = function() {
$("#message-list").empty()
api.listMessages(chat.chat.id)
document.getElementById("message-list").channelId = chat.chat.id
}
chatBodyParent.id = `chat-body-${chat.chat.id}`
let chatBody = document.createElement("div")
chatBody.className = "chat-body"
let chatImg = document.createElement("img")
chatImg.src = chat.chat.cover
if (!chat.chat.cover && chat.chat.type == 1) {
chatImg.src = "/dump/pfp.svg"
}
if (!chat.chat.cover && chat.chat.type == 3) {
chatImg.src = "/dump/public.png"
}
chatImg.className = "chat-img"
chatImg.setAttribute("align", "left")
chatBody.appendChild(chatImg)
let chatInfoContainer = document.createElement("div")
chatInfoContainer.className = "chat-info-container"
let chatName = document.createElement("span")
chatName.className = "chat-name"
chatName.innerText = chat.chat.title
chatInfoContainer.appendChild(chatName)
chatInfoContainer.appendChild(br.cloneNode(true))
let chatMessageContent = document.createElement("span")
chatMessageContent.className = "chat-message-content"
chatMessageContent.id = `chat-message-content-${chat.chat.id}`
let messageContent
if (chat.message) {
let long = false;
if (chat.message.text.length >= 30) {
long = true
}
messageContent = chat.message.text.substring(0, 30)
if (long) {
messageContent += "..."
}
} else if (chat.type == "file") {
messageContent = chat.user.nick + " sent a file"
}
chatMessageContent.innerText = messageContent
chatInfoContainer.appendChild(chatMessageContent)
chatBody.appendChild(chatInfoContainer)
chatBodyParent.appendChild(chatBody)
document.getElementById("chat-list").appendChild(chatBodyParent)
} catch {
console.log(list[index])
}
}
}
.sidenav {
height: 100%;
width: 15%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: var(--lightish-grey);
overflow-x: hidden;
padding-top: 20px;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}
.sidenav a:hover {
color: #f1f1f1;
}
.main {
margin-left: 15%;
padding: 0px 10px;
overflow-x: hidden;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
::-webkit-scrollbar {
color: var(--grey);
}
::-webkit-scrollbar-corner {
color: var(--grey);
}
::-webkit-scrollbar-track {
color: var(--grey);
}
.menu {
width: 90%;
min-width: 90%;
height: 200px;
margin-left: 5%;
margin-right: 5%;
background-color: var(--menu-grey);
padding-top: 10px;
padding-bottom: 5px;
font-family: "FontRegular";
}
.chat-bar {
position: fixed;
bottom: 1%;
width: 50%;
height: 3.5%;
padding: 0px 5px;
margin: 8px 0;
display: inline-block;
border-top: hidden;
border-left: hidden;
border-right: hidden;
border-bottom: solid var(--light-grey);
box-sizing: border-box;
background-color: var(--grey);
color: var(--light-grey);
font-family: "FontRegular";
}
.chat-bar:focus {
outline-width: 0;
}
.chat-body {
width: 90%;
height: 50px;
margin-left: 5%;
border: 3px;
border-top: hidden;
border-left: hidden;
border-right: hidden;
/*border-bottom: solid var(--light-grey);*/
padding-top: 10px;
padding-bottom: 5px;
font-family: "FontRegular";
}
.chat-body:hover {
opacity: 0.8;
cursor:pointer;
}
.chat-body:focus {
opacity: 0.8;
}
.chat-img {
height: 50px;
width: auto;
border-radius: 50%;
}
.chat-info-container {
position:relative;
top: 10%;
}
<!DOCTYPE html>
<html>
<head>
<title>iFChat - Dashboard</title>
<link rel="stylesheet" href="/css/index.css">
<link rel="stylesheet" href="/css/dashboard.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/utils.js"></script>
<script type="text/javascript" src="/js/api.js"></script>
<script type="text/javascript" src="/js/dashboard.js"></script>
</head>
<div class="sidenav">
<div id="menu" class="menu">
</div>
<div>
</div> <br><br>
<div id="chat-list">
</div>
</div>
<div class="main" id="main">
<div id="message-list" class="message-list">
</div>
<input type="text" name="chat..." id="chat-bar" class="chat-bar" placeholder="chat..." maxlength="500">
</div>
</html>
Here is an image before the chat list is loaded
Then menu is loaded with the correct size and margin
pre-load
after the chat list loads, it changes the width or margin of the div above some how, and im not sure how or why its doing that, but i cant figure it out, heres an image of after the chat list is loaded post-load
i have tried different margins and positioning settings but cant seem to get it to work, any help is greatly appreciated :)
edit: One possible solution may be to change the css with javascript every time the chat list is loaded, but i would like to avoid that if at all possible.
OK, so i figured out the issue, the issue occurs when enough elements pop up to trigger the scrollbar, so the fix for me was this
::-webkit-scrollbar {
display: none;
}
Because i want a user to beable to scroll, but i dont want there to be a scrollbar, My next plan is to make this static, so that it doesnt move on scroll at all. Still the issue was arising when my (invisible scroll bar, that still had a width) was appearing. Gotta watch out for hidden elements.

How to play random video in a chrome extension?

Hello i am trying to make a chrome extension so i will list 2 things i have!
This is my popup.html
<!DOCTYPE html>
<html>
<head>
<title>NFKRZ</title>
<style>
body {
width: 150px;
}
.blaze {
margin: auto;
display: block;
width: 144px;
height: 144px;
}
.button {
margin: auto;
background-color: #62009F;
padding: 8px 16px;
text-align: center;
color: #FFFFFF;
font-size: 18px;
display: block;
cursor: pointer;
border-radius: 4px;
transition-duration: 0.1s;
border: none;
width: 140px;
}
.button:hover {
background-color: #A240DF;
}
</style>
<script src="Video.js"></script>
</head>
<body>
<img src="blaze.png" alt="Kill yourself m9" class="blaze"><br>
<button id="anotherOne" class="button">Another one</button>
</body>
</html>
next is my javascript
var video = new Video();
function playRandomVideo() {
if(video != null) {
video.pause();
}
var num = Math.floor(Math.random() * 90) + 1;
//var video = new Video();
Video.src = num + ".mp4";
Video.load();
Video.play();
}
document.addEventListener('DOMContentLoaded', function() {
playRandomVideo();
document.getElementById('anotherOne').addEventListener('click', playRandomVideo);
});
Thank you for any replies i really just want to finish this now! Also im very new so u will have to tell me hoe to do it! Thanks!

Why doesn't my browser make a difference between classes and ids in my thread?

Well this is a kind of a hard question to ask, but i guess you will see why:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="jquery.min.js"></script>
<link href="jquery-ui/jquery-ui.css" rel="stylesheet">
<script src="jquery-ui/external/jquery/jquery.js"></script>
<script src="jquery-ui/jquery-ui.js"></script>
<style type="text/css">
#player {
border-radius: 50%;
width: 150px;
height: 150px;
background-color: green;
margin-left: 10px;
margin-top: 100px;
}
.obstacle {
border-radius: 1em;
background-color: #663300;
width: 100px;
height: 75px;
margin-left: 30px;
margin-top: 200px;
}
</style>
</head>
<body>
<div id="player"></div>
<div class="obstacle"></div>
<script>
$('body').css('cursor', 'none');
/*$("#player").click(function() {
var position = $("#circle").offset();
alert(position);
});
$("#player").draggable(); */
$(document).mousemove(function(event){
var X = event.pageX;
var Y = event.pageY;
$("#player").css('margin-top', Y-75);
$("#player").css('margin-left', X-75);
//alert(X+" "+Y);
});
</script>
</body>
</html>
This code should create a div with an id of "player", then place it wherever your cursor currently is. (that works just fine) But then there is the "obstacle" which for some reason moves along with the player, although it shouldn't.
Why is this happenning? Could someone explain it to me?
A picture:
https://jsfiddle.net/fq4y4r41/
$('body').css('cursor', 'none');
/*$("#player").click(function() {
var position = $("#circle").offset();
alert(position);
});
$("#player").draggable(); */
$(document).mousemove(function(event){
var X = event.pageX;
var Y = event.pageY;
$("#player").css('top', Y-75);
$("#player").css('left', X-75);
//alert(X+" "+Y);
});
and css
#player {
position: absolute;
border-radius: 50%;
width: 150px;
height: 150px;
background-color: green;
margin-left: 10px;
margin-top: 100px;
}
you changing margins which affects that block size, so bottom blocks moving too. try to change top and left instead and set it's position to absolute
that way you move that element away from flow - https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
Since you want to move a block based on mouse movement, I think you might have to use a different position value, like absolute
#player {
border-radius: 50%;
width: 150px;
height: 150px;
background-color: green;
margin-left: 10px;
margin-top: 100px;
position: absolute;
}
$('body').css('cursor', 'none');
/*$("#player").click(function() {
var position = $("#circle").offset();
alert(position);
});
$("#player").draggable(); */
$(document).mousemove(function(event) {
var X = event.pageX;
var Y = event.pageY;
$("#player").css('margin-top', Y - 75);
$("#player").css('margin-left', X - 75);
//alert(X+" "+Y);
});
#player {
border-radius: 50%;
width: 150px;
height: 150px;
background-color: green;
margin-left: 10px;
margin-top: 100px;
position: absolute;
}
.obstacle {
border-radius: 1em;
background-color: #663300;
width: 100px;
height: 75px;
margin-left: 30px;
margin-top: 200px;
}
<script type="text/javascript" src="//code.jquery.com/jquery-2.2.3.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<div id="player"></div>
<div class="obstacle"></div>
Demo: Fiddle
You only need to change the css
#player {
border-radius: 50%;
width: 150px;
height: 150px;
background-color: green;
margin-left: 10px;
margin-top: 100px;
position: absolute;
}
here is the jsFiddle. Checkit out :)

Simple Cookie Bar Notice

I am using the script from http://cookie-bar.eu/ but for some reason when I set the script to be shown on top of the page, after you dismiss the Cookie Notice, the text from the top of the page is truncated. You can see here how Hello disappears or is truncated:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>cookieBAR</title>
<script type="text/javascript">
var expirationDate = new Date();
expirationDate.setDate(128);
document.cookie = "dummy=1; expires="+expirationDate.toUTCString()+"; path=/";
</script>
</head>
<body>
<h1>Demo</h1>
<script type="text/javascript" src="//cdn.jsdelivr.net/cookie-bar/1/cookiebar-latest.js?forceLang=EN&top=1"></script>
</body>
</html>
Any ideas?
Solved by the developer with a new version.
The same approach can be achieved easily by using the code below.
Styles: Add the following code to your HTML <head></head> section.
<style>
#cookie-notice {
display: none;
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 999;
max-width: 450px;
margin: auto;
padding: 0.5rem;
border: 1px solid #eee;
background-color: #fefefe;
box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.05);
font-family: Arial, Helvetica, sans-serif;
line-height: 22px;
font-size: 15px;
text-align: center;
color: #555;
}
.cookie-notice-more {
margin: 0 0.25rem;
text-decoration-style: dashed;
color: inherit;
}
.cookie-notice-close {
padding: 0 0.5rem;
border: 1px solid #ddd;
border-radius: 0.125rem;
line-height: 20px;
text-decoration: none;
color: #888;
}
#media only screen and (min-width: 768px) {
#cookie-notice {
bottom: 1rem;
border-radius: 0.25rem;
}
.cookie-notice-close {
float: right;
}
}
</style>
Notice block: Add the following code to your HTML <body></body> section.
<div id="cookie-notice">
We use cookies to deliver better experience.
More info...
OK
</div>
Script: Add the following code to your HTML footer before the </body> closing tag.
function closeCookieNotice() {
const nowDate = new Date();
const expireDate = new Date(nowDate.setDate(nowDate.getDate() + 30)).toUTCString();
document.cookie = "cookie_notice=0;path=/;expires=" + expireDate + ";";
document.getElementById("cookie-notice").style.display = "none";
};
document.addEventListener("DOMContentLoaded", function() {
const cookie_notice = ('; ' + document.cookie).split('; cookie_notice=').pop().split(';')[0];
if (cookie_notice !== "0") {
document.getElementById("cookie-notice").style.display = "block";
}
});
</script>
Source code, include files, 1-file script install & themes available here: https://cookienotice.js.org

Trying to get Mobile Menu Shelf to work

I'm trying to get a simple mobile navigation to work, but nothing happens when I click the trigger button. Any help would be much appreciated! My first steps in JS, so I apologise if I made a really stupid mistake...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<title>Mobile Menu</title>
<script>
// When trigger is clicked, check if menu is currently hidden or shown
// Choose what action to perform
$('#trigger').click( function() {
if ($('#menu').hasClass('menu-hide')) {
showMenu();
}
else {
hideMenu();
}
});
function showMenu() {
$('#menu').removeClass('menu-hide').addClass('menu-show');
}
function hideMenu() {
$('#menu').removeClass('menu-show').addClass('menu-hide');
}
</script>
<style>
#menu {
position: fixed;
top: 0px;
left: -200px;
width: 200px;
height: 100vh;
transition: left 0.2s ease-in-out;
background-color: #484848;
}
.menu-show {
left: 0px;
}
#trigger {
position: absolute;
top: 0;
right: 0;
cursor: pointer;
width: 50px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div id="trigger"></div>
<div id="menu" class="menu-hide"></div>
</body>
Thanks
Andreas
First, the main code had to be inside ready function in order to trigger:
"$(document).ready(function(){}"
And secondly for the CSS to work you have to move the left style to menu-hide
Working example:
$(document).ready(function() {
$('#trigger').click(function() {
if ($('#menu').hasClass('menu-hide')) {
showMenu();
} else {
hideMenu();
}
});
});
function showMenu() {
$('#menu').removeClass('menu-hide').addClass('menu-show');
}
function hideMenu() {
$('#menu').removeClass('menu-show').addClass('menu-hide');
}
#menu {
position: fixed;
top: 0px;
width: 200px;
height: 100vh;
transition: left 0.2s ease-in-out;
background-color: #484848;
}
.menu-show {
left: 0px;
}
.menu-hide {
left: -200px;
}
#trigger {
position: absolute;
top: 0;
right: 0;
cursor: pointer;
width: 50px;
height: 50px;
background-color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<title>Mobile Menu</title>
</head>
<body>
<div id="trigger"></div>
<div id="menu" class="menu-hide"></div>
</body>
</html>

Categories