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
Related
Why my javascript not work? When I change the innterHtml of an element, it didn't work?
here is my code:
html
<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>403 没有权限！</title>
<style type="text/css" media="screen">
body {
user-select: none;
background-color: #eeeeee;
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.container { margin: 50px auto 40px auto; width: 600px; text-align: center; }
a { color: #4183c4; text-decoration: none; }
h1 { width: 800px; position:relative; left: -100px; letter-spacing: -1px; line-height: 60px; font-size: 160px; font-weight: 100; margin: 0px 0 50px 0; text-shadow: 0 1px 0 #fff; }
p,m { color: rgba(0, 0, 0, 0.5); margin: 20px 0; line-height: 1.6; }
#suggestions {
margin-top: 35px;
color: #ccc;
}
#suggestions a {
color: #666666;
font-weight: 200;
font-size: 14px;
margin: 0 10px;
}
</style>
</head>
<body>
<div class="container">
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<h1><strong>403</strong></h1>
<p><strong>Request denied</strong></p>
<p><strong>请求被拒绝</strong></p>
<p>
If the file you are accessing is yours, please check your login information.
</p>
<m>You are now login as: </m><f id="ll"></f>
</div>
<script src="get.js"></script>
</body></html>
js
var datac
var user
function get(){
user = localStorage.getItem(datac)
if(user != null){
document.getElementById("ll").innerHtml = user
console.log(user)
}
else {
document.getElementById('ll').innerHtml = 'Please Login.'
}
}
function checklogin(){
$.getJSON('https://text-edit-api-default-rtdb.asia-southeast1.firebasedatabase.app/.json', function ( data ){
datac = data['data']['password']['localstorge']['code']
get()
})}
checklogin()
There is no any errors in console!
but if I get document.getElementById('ll').innterHtml I saw the change, but there is no changes in html!
This page is the 404 page of github page, I changed some codes.
I change innter to inner
Image
I use vscode
And chrome
It is weird you don't have errors in console. Be carfeully about the uppercase letters, the correct attribute is innerHTML instead of innerHtml
You have a syntax problem. Put innerHTML instead of innterHtml
Ref: https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
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.
I am currently making a chrome extension (This is my first chrome extension) that you can take small notes with and want to keep the user input. I am keeping the user input inside of input classes. How would I be able to store the chrome extension state so that when I reopen it, it will stay the same? Here is the code that I have written so far.
//selectors
const addbutton = document.querySelector(".add");
const addlist = document.querySelector(".note-list");
const noteList = document.querySelector(".note-list")
//event listners
addbutton.addEventListener('click', addNote);
//functions
function addNote(event){
//prevent page refresh
event.preventDefault();
//note div
const noteDiv = document.createElement('div');
noteDiv.classList.add('note');
//create li
const newNote = document.createElement('li');
newNote.classList.add('noteitem');
noteDiv.appendChild(newNote);
//create input
const newInput = document.createElement('input');
newInput.classList.add('noteInput')
newNote.appendChild(newInput);
//append to list
noteList.appendChild(noteDiv);
}
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
}
body{
height: 500px;
width: 400px;
}
h1{
font-family: "Montserrat", sans-serif;
font-size: 20px;
font-weight: lighter;
padding-top: 10px;
padding-bottom: 10px;
}
main{
text-align: center;
}
.title{
box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.685);
}
.mainpage{
padding-top: 20px;
}
.add{
font-family: "Montserrat", sans-serif;
font-size: 25px;
font-weight: 400px;
background-color: #00FF33;
width:40px ;
height: 40px;
border-radius: 10px;
border: none;
transition: ease 0.5s;
}
.add:hover{
background-color: #00c026;
}
.note-container{
display: flex;
justify-content: center;
align-items: center;
}
.note-list{
min-width: 30%;
list-style: none;
}
.note{
margin: 0.5rem;
background: whitesmoke;
font-size: 1.5rem;
display: flex;
justify-content: space-between;
border-radius: 7px;
}
.noteitem{
padding: 0.5rem 2rem;
}
.noteInput{
display: block;
margin-right: auto;
margin-left: auto;
border: none;
background-color: whitesmoke;
font-size: 20px;
max-height: 200px;
}
.note li{
flex: 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mini Note</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main>
<div class="title">
<h1>Mini note app</h1>
</div>
<section class="mainpage">
<button class="add">+</button>
<div class="note-container">
<ul class="note-list"></ul>
</div>
</section>
</main>
<script src="/popup.js"></script>
</body>
</html>
Thank you
// uses local storage
chrome.storage.local.set({key: value}, function() {
console.log('Value is set to ' + value);
});
// uses synced storage, hits Chrome backend when being set
chrome.storage.sync.set({key: value}, function() {
console.log('Value is set to ' + value);
});
// to retrieve the data, use 'sync' instead of 'local' if using sync
chrome.storage.local.get(['key'], function(result) {
console.log('Value currently is ' + result.key);
});
You'll still need to figure out how you want to organize the note data. For example, you could store all of the notes in an array on the notes key that looks like the following:
{
notes: [
{ id: 1, body: 'First note' },
{ id: 2, body: 'Second note' }
]
}
you have two options :-
you can use localStorage just like in web page for more check here
you can use chrome.storage for more check here
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>
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!