Trying to use ScrollWatch.js to build a web page with infinite scroll but not getting any output. Nothing is being rendered when I run my code, here is a sample of my html
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The Gradient Boost</title>
<link rel="stylesheet" href="{% static 'second/css/app/book.css' %}">
</head>
<body>
<h2><div data-scroll-watch>First Text</div></h2>
<h2><div data-scroll-watch>Second Text</div></h2>
<h3><div data-scroll-watch>Third Text</div></h3>
<script src="{% static 'second/js/app/book.js' %}"></script>
<script src="https://cdn.jsdelivr.net/npm/scroll-watcher#latest/dist/scroll-watcher.min.js"></script>
</body>
</html>
book.js
(function() {
var addElements = function() {
var txt = document.createTextNode('Testing');
var el;
el = document.createElement('div');
el.appendChild(txt);
document.body.appendChild(el);
// If we want newly injected elements to be watched, refresh ScrollWatch. It will re-query the dom and start watching new elements.
swInstance.refresh();
};
var swInstance = new ScrollWatch({
watch: 'div',
infiniteScroll: true,
infiniteOffset: 200,
onInfiniteYInView: addElements
});
})();
and book.css
.watch-container {
font-size: 2em;
width: 75%;
height: 150px;
padding: 20px;
margin: 50px auto;
background-color: #0681CD;
color: #fff;
overflow: auto;
text-align: center;
}
div {
text-align: center;
font-size: 1em;
margin: 200px 0;
opacity: 0;
transition: opacity 1s;
font-weight: normal
}
div.scroll-watch-in-view {
opacity: 1;
}
This is the documentation I am using as guidance
Running this code on codepen seems to give me the error message in my javascript
Uncaught ReferenceError: ScrollWatch is not defined
I think your cdn link is not correct, it's scroll-watcher not scrollwatch, you can try this https://cdn.jsdelivr.net/npm/scrollwatch#2.0.1/dist/ScrollWatch-2.0.1.min.js
It works on CodePen
Related
I'm using a Jekyll website, doesn't really matter because this is a static page, I just write it as additional info.
Desired behavior:
I want to load my stylesheet via javascript, so it can depend of a local stored value, let's say dark and light.
I have done a little test of loading it by JS with the following code (which works).
GREEN
<head>
...
<link rel="stylesheet" href="/assets/css/{{'light'}}.css">
...
</head>
This loads the CSS file called "light" as expected.
But now I want to depend of the localStorage, with a variable theme that has light as value. I tried the following:
RED
<head>
...
<script>
var storedTheme = window.localStorage.getItem('theme'); //Tested and working in console
theme = storedTheme ? storedTheme : 'light'; //global variable (also readable in console)
</script>
<link rel="stylesheet" href="/assets/css/{{theme}}.css"> <!-- cant read global variable -->
...
</head>
Using global variables doesn't work, it gives me a 404 error as the stylesheet path is /assets/css/.css.
After that I thought that maybe creating an element would do the trick and I created one manually to test it:
RED
<head>
...
<p id="theme" style="display:none;">dark</p>
<link rel="stylesheet" href="/assets/css/{{document.getElementById('theme').innerHTML}}.css">
...
</head>
And nope, the path still appears as: /assets/css/.css
If you change styles on the <body> you get FOUC (Flash Of Unstyled Content). Try using a close equivalent like <main> and spread it 100% x 100% and <html> and <body> as well, but give them margin and padding of 0 in order to ensure <main> covers them completely.
The [disabled] attribute for the <link> is the best way of toggling them because they are still loaded but inert. Also, in the example there is a function called loadTheme(e) that is loaded on the 'DOMContentLoaded' event which insures that all of the DOM is loaded before hand. The example below will not work because localStorage is blocked on SO. There is a functioning example on Plunker. To test it:
Click the green Preview button.
Another frame should appear on the right. Within the frame is the webpage example click the ☀️ button.
It should be in dark mode now. Next, click the refresh ⟳ button located in the mini-toolbar within the frame or press ctrl+enter for Windows OS or ⌥+return for Mac OS.
The page should still be in dark mode. 👍
/* night.css
main {
background: #000;
color: #fff;
}
*/
/* default.css */
:root {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font: 1ch/1.5 'Segoe UI';
}
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font-size: 4ch;
}
main {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
color: #000;
}
form {
width: 80vw;
margin: 20px auto;
}
fieldset {
width: max-content;
min-height: 25px;
margin-left: auto;
padding: 0 1.5px 1.5px;
border-radius: 8px;
background: inherit;
color: inherit;
}
button {
display: block;
width: 100%;
height: 100%;
border: 0;
font-size: 4rem;
text-align: center;
background: transparent;
cursor: pointer;
}
#theme::before {
content: '☀️';
}
.night #theme::before {
content: '🌙';
}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='lib/default.css' rel='stylesheet'>
<link class='night' href='lib/night.css' rel='stylesheet' disabled>
<style></style>
</head>
<body>
<main>
<form id='UI'>
<fieldset name='box'>
<legend>Theme</legend>
<button id='theme' type='button'></button>
</fieldset>
<p>Click the "Theme" switch to toggle between `disabled` `true` and `false` on `night.css` and `light.css` `
<link>`s.</p>
</form>
</main>
<script>
const UI = document.forms.UI;
const M = document.querySelector('main');
const L = document.querySelector('.night')
const switchTheme = e => {
const clk = e.target;
if (clk.matches('button')) {
M.classList.toggle('night');
L.toggleAttribute('disabled');
}
let status = M.className === 'night' ? 'on' : 'off';
localStorage.setItem('theme', status);
};
const loadTheme = e => {
let cfg = localStorage.getItem('theme');
if (cfg === 'on') {
M.classList.add('night');
L.removeAttribute('disabled');
} else {
M.classList.remove('night');
L.setAttribute('disabled', true);
}
};
UI.addEventListener('click', switchTheme);
document.addEventListener('DOMContentLoaded', loadTheme);
</script>
</body>
</html>
Ubuntu 18.04
i am customizing the panel, this is the content in .css file
i have added ::first-line part to cusomize first line as shown in the below image. but it is not applied after reboot.
Content of .css file:
#panel .clock-display {
color: blue; }
#panel .clock-display::first-line {
color: green; }
Content of .js file:
var DateMenuButton = new Lang.Class({
Name: 'DateMenuButton',
Extends: PanelMenu.Button,
_init() {
let item;
let hbox;
let vbox;
let menuAlignment = 0.5;
if (Clutter.get_default_text_direction() == Clutter.TextDirection.RTL)
menuAlignment = 1.0 - menuAlignment;
this.parent(menuAlignment);
this._clockDisplay = new St.Label({ y_align: Clutter.ActorAlign.CENTER });
this._indicator = new MessagesIndicator();
let box = new St.BoxLayout();
box.add_actor(new IndicatorPad(this._indicator.actor));
box.add_actor(this._clockDisplay);
box.add_actor(this._indicator.actor);
this.actor.label_actor = this._clockDisplay;
this.actor.add_actor(box);
this.actor.add_style_class_name ('clock-display');
in this last line this.actor.add_style_calss_name ('clock-display'); i guess i have to specify its pseudo_calss or something but i dont have any idea.
in the below image if you see the day with time stamp, it is the default behavior when Ubuntu is freshly installed.
by using Clock Override Extension, it is possible to make our own text..
like in this image..
here is a clue, this Clock Override Extension have special feature to make a next line by adding %n in its settings https://developer.gnome.org/glib/stable/glib-GDateTime.html#g-date-time-format
Clock Override Extension Details: https://extensions.gnome.org/extension/1206/clock-override/
Question:
i am looking to configure both lines independently in .css file to choose the colors, heights, weights, shadows, borders etc.
is it achievable?
all related files here:
https://wetransfer.com/downloads/dd97a53972b17f746225efdfa345a03220181231063516/111ced
Can you try to add a style class to a specific object?
For example: #line 475
this._clockDisplay = new St.Label({ y_align: Clutter.ActorAlign.CENTER, style_class: 'clock-label' });
CSS:
.clock-label { color: #101010; font-weight: bold; background: #fff; }
Try it.
It is working unless your text is considered as one line.
#panel .clock-display {
color: blue;
margin-left: 40px;
margin-right: 40px;
}
#panel .clock-display::first-line {
height: 40px;
width: device-width;
background: blue;}
.barfont {
height: 30px;
width: device-width;
color: blue;
font-size:15px;
font-weight: bold;
line-height:0px;
}
.barbackground {
margin: 0;
padding: 0;
height: 30px;
width: device-width;
background-color: green;
border-top-style: solid;
border-top-color: green;
line-height:0px;
}
<html>
<body background="https://i.stack.imgur.com/80hPG.png" >
<div class="barbackground">
<p class="barfont">data                       day first link </p></div>
</body>
</html>
Changing the first line.
.clock-display {
color: blue;
margin-left: 40px;
text-indent: 40px;
}
::first-line {
color: green;
/* WARNING: DO NOT USE THESE */
/* Many properties are invalid in ::first-line pseudo-elements */
margin-left: 20px;
text-indent: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body >
<pre class="clock-display">
121
data and time</pre>
</body>
</html>
I am having some serious trouble understanding Fancybox. I suppose my initial question is that I am using Fancybox 3 and assume that it has all features of previous versions?
What I am trying to achieve is simply change the caption position to inside rather than the default. I have tried so many different JS options to get a titleposition: 'inside' and it changes absolutely nothing...
<!DOCTYPE HTML>
<head>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="fancybox/jquery.fancybox.js"></script>
</body>
<footer>
<section class="socialmedia">
<a class="sm" href="images/snapcode.png" data-fancybox data-caption="Snapchat"><img src="images/snapchat.png"></a>
</footer>
</html>
I am using the defaults
Of course, it is too late but maybe help someone.
Explanation: copy the caption and put it in the .fancybox-content element. And to the original set display: none. Position the caption bottom of picture using transform: translateY(100%). When initializing the slide, the fancybox box takes the height of the hidden title and sets the padding-bottom to the .fancybox-slide element. Thus, the title will not overlap the image or go beyond window borders.
JS (jquery):
$('[data-fancybox="gallery"]').fancybox({
beforeShow: function() {
$('.caption--image').remove();
},
afterShow: function() {
var caption = $(".fancybox-caption"),
innerCaption = caption.clone().addClass('caption--image');
$(".fancybox-slide--current .fancybox-content").append(innerCaption);
caption.not('.caption--image').addClass('caption--bottom');
}
});
CSS:
.fancybox-caption.caption--image {
width: 100%;
bottom: 0;
padding: 10px;
color: #fff;
transform: translateY(100%);
}
.fancybox-inner > .fancybox-caption {
display: none;
}
My solution:
CSS:
.fancybox-caption {
display: block;
margin-right: auto;
margin-left: auto;
padding: 0;
bottom: 13px;
text-align: right;
}
.fancybox-caption:before {
background: 0 0;
}
.fancybox-caption:after {
border-bottom: 0;
}
.fancybox-caption.none {
display: none;
}
.fancybox-caption>span {
background-color: #343434;
color: #B6B6B6;
display: inline-block;
padding: 5px 15px;
}
Jquery:
$('[data-fancybox="images"]').fancybox({
idleTime: false,
infobar: false,
beforeShow: function() {
$(".fancybox-caption").addClass('none');
},
afterShow: function() {
$(".fancybox-caption").wrapInner("<span/>");
var imageWidth = $(".fancybox-slide--current .fancybox-content").width();
$(".fancybox-caption").css("width", imageWidth);
setTimeout($(".fancybox-caption").removeClass('none'), 200);
}
});
This maybe can help you.
$('[data-fancybox]').fancybox({
protect: true,
afterShow: function() {
var imageWidth = $(".fancybox-slide--current .fancybox-image-wrap").width();
$(".fancybox-caption").css("width", imageWidth);
}
});
I have a website (test page here) using InstafeedJS and SimplyScroll - yet for the life of me I cannot figure out why the feed won't scroll.
I'm a novice so be nice!
<!DOCTYPE>
<html>
<head>
<title>Instafeed Test!</title>
<link rel="Stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/jquery.simplyscroll.css" media="all" type="text/css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.simplyscroll.js"></script>
<script type="text/javascript">
(function($) {
$(function() {
$("scroller").simplyScroll();
});
})(jQuery);
</script>
<script type="text/javascript" src="js/instafeed.min.js"></script>
<script type="text/javascript">
var feed = new Instafeed({
get: 'user',
userId: 'XXXXXXXX',
clientId: 'XXXXXXXXXXXXXXXX',
accessToken: 'XXXXXXXX.XXXXXX.XXXXXXXXXXXXXXXX',
resolution: 'thumbnail',
template: '<img src="{{image}}" />',
sortBy: 'most-recent',
limit: 12,
links: false
});
feed.run();
</script>
</head>
<body>
<div class="simply-scroll simply-scroll-container">
<div class="simply-scroll-clip">
<div id="instafeed" class="simply-scroll-list" style="width: 10000px;"></div>
</div>
</div>
</body>
</html>
I have pass this case as an issue to a thread of InstafeedJS.
There is stated that the case is really an issue with the scrolling library. One other thing - jquery.simplyscroll is no longer supported and hasn't been updated since 2012.
You'd be better off choosing a modern and supported carousel library. As suggested I found a way to make the scrolling works using another one called slick as shown in the picture.
To do it you will need 3 files from the source or simply fork it and use them like the followings:
HTML Head
<link href="slick/slick/slick.css" rel='stylesheet' type='text/css' media="screen" />
<link href="slick/slick/slick-theme.css" rel='stylesheet' type='text/css' media="screen" />
<script type="text/javascript" src="slick/slick/slick.min.js"></script>
HTML Body
<div class="container">
<div class="tweet_txt">
<div id="instafeed"></div>
</div>
<button type="button" id="load-more">Load More</button>
</div>
CSS
.tweet_txt {
width: 600px;
height: 100px;
overflow: hidden;
}
#instafeed {
width: 1200px;
display: block;
margin: 0;
padding: 0;
line-height: 0;
margin-top: 20px;
overflow: hidden;
}
#instafeed div {
float: left;
width: 50%;
display: inline-block;
margin: 0!important;
padding: 0!important;
}
#instafeed img {
height: 100px;
width: 100px;
}
#instafeed .insta-likes {
width: 100%;
height: 100%;
margin-top: -100%;
opacity: 0;
text-align: center;
letter-spacing: 1px;
background: rgba(255,255,255,0.4);
position: absolute;
text-shadow: 2px 2px 8px #fff;
font: normal 400 11px Playfair Display,sans-serif;
color: #0a0a0a;
line-height: normal;
}
JS
// grab out load more button
var loadButton = document.getElementById('load-more');
//var ulfeed = document.getElementById('instafeed');
//var scroll = new simplyScroll();
var feed = new Instafeed({
get: 'user',
limit: 11,
sortBy:'most-recent',
userId: YOUR ID,
resolution: 'standard_resolution',
accessToken: 'YOUR TOKEN',
template: '<div><img src="{{image}}" /><div class="insta-likes"><div style="display: table; vertical-align: middle; height: 100%; width: 100%;"><span style="vertical-align: middle; height: 100%; width: 100%;">{{likes}} <i class="fa fa-heart"></i><br/>{{comments}} <i class="fa fa-comment"></i></span></div></div></div>',
after: function() {
// run slick for scrolling
$('#instafeed').slick({
slidesToShow: 6,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
});
// every time we load more, run this function
if (!this.hasNext()) {
// disable button if no more results to load
loadButton.setAttribute('disabled', 'disabled');
}
},
success: function() {
//called when Instagram returns valid json data
},
});
// bind the load more button
loadButton.addEventListener('click', function() {
feed.next();
});
// run instafeed!
feed.run();
You may follow on how the result will look like by the code.
In the discussion there is the link to JSFiddle and also the place where it Lives.
This code works fine in JSFiddle, but not locally in Chrome or Firefox. Am I doing something wrong in linking the CSS or JavaScript? In the Firefox console, I get an error that $ is undefined. Am I linking jQuery improperly?
index.html:
<!DOCTYPE HTML>
<head>
<title>Digital Etch-A-Sketch</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="wrapper">
</div>
<script src="etch-a-sketch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</body>
</html>
main.css:
//Etch-A-Sketch - CSS
.square {
float: left;
height: 48px;
width: 48px;
background-color: black;
border: 1px solid white;
}
#wrapper {
position: relative;
top: 50px;
margin: 0 auto;
height: 200px;
width: 200px;
}
etch-a-sketch:
$(document).ready(function(){
var wrapper = $('#wrapper');
for (var i = 0;i < 16; i++) {
var div = $('<div class="square"></div>');
wrapper.append(div);
}
});
Include the jQuery library before you include your custom script:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="etch-a-sketch.js"></script>
Otherwise you're trying to use jQuery functionality before you have library available.
JSFIDDLE DEMO
Codepen Demo
The error lies in Jquery ! you have to use .html() to inform the jquery to extract the #wrapper from the HTML document.
By the way, this also works
Jquery :
$(document).ready(function(){
for (var i = 0;i < 16; i++) {
$('#wrapper').append('<div class="square"></div>');
}
});