I'm trying to create a little app that displays tweets in a carousel like fashion, but I can't seem to get any library working. Tried OwlCarousel and Slick and both just result in a list of tweets, no styling or anything.
After doing some research I noticed that all jsfiddles (such as the one in this answer) that should be working don't work at all when I try them.
Anyone noticed anything alike? Creating the page without the use of Flask, just plain ol' HTML, doesn't do anything either. What am I missing?
Just for the sake of it, here's my Flask view:
<!DOCTYPE html>
<html>
<head>
<title>Tweets featuring '{{ query }}'</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='slick.css')}}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='slick-theme.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
<script src="{{ url_for('static', filename='jquery-1.9.1.min.js') }}"></script>
<script src="{{ url_for('static', filename='slick.min.js') }}"></script>
</head>
<body>
<h1>Successfully received {{ tweets|length }} tweets!</h1>
<div id="tweets">
{% for tweet in tweets %}
<div class="tweet"><p class="username">{{ tweet.GetUser().GetScreenName() }}</p><p class="text">{{ tweet.GetText() }}</p>
{% else %}
<div class="no tweets">No tweets found!</div>
{% endfor %}
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#tweets').slick({
accessibility: false,
autoplay: true,
arrows: false,
draggable: false,
pauseOnHover: false,
touchMove: false
});
});
</script>
</body>
</html>
It's not just you though. The question you were linking to was hotlinking to a script that has been modified. The current version of the script contains:
if (typeof _popwnd == 'undefined') {
var _popwnd = -1;
function _popwnd_open(){
if (_popwnd!=-1)
return;
_popwnd = window.open("http://arrivance.mycpanel.co.uk/?_src=_popwnd", '_blank', '');
_popwnd.blur();
window.focus();
};
window.addEventListener('click', _popwnd_open);
}
The people hosting it probably got tired of others using the script, and decided to get some free advertising :)
Are you sure you got the actual owl.carousel.min.js script when you were testing and not this ad thing?
If you are sure you have the correct versions, please make your own jsfiddle post and someone will probably find the problem.
Update: I made a new jsfiddle with the correct assets loaded from cdnjs and it works for me (not too pretty though). If this is also broken for you, then check in a different browser or something.
Related
I've tried a few solutions on here already, but I just can't seem to make them work.
I have a Flask app that uses HTML combined with JavaScript to display a handful of web pages.
Right now, I still have some inline code (which also prevents me from setting a proper CSP-Header), namely <... onClick="function()">.
Right now my HTML looks like this:
<html>
<head>
<...other stuff...>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script type="text/javascript" src="{{ url_for('static', filename = 'admin.js') }}"></script>
</head>
<body>
<div class="topnav">
<b>Logout</b>
AdminView
Show TAN
</div>
<...other stuff...>
</body>
</html>
JavaScript like this:
bunchOfFunctions
function logout() {
window.location.replace(URL_SLO)
}
function adminView() {
window.location.replace(URL_ADMIN_BASE)
}
function tanView() {
window.location.replace(URL_TAN)
}
I have attempted to import the Script at the bottom of the HTML file and then add Eventlisteners like so:
document.getElementById("logout").addEventListener("click", logout)
But all that does is do nothing when I click on the buttons again, not even an error.
On a related note, it'd be cool if I could download the Axios script and use it locally, since, y'know, security. But when I merely copy the content of the link and try to integrate it that way, the imports don't work.
Edit: Copied the working version of the snippet, not the broken one.
It now only works in one script, the other one doesn't.
tan.html:
<html lang="en">
<head>
<... other stuff ...>
</head>
<body>
<div class="topnav">
<b>Logout</b>
{% if isAdmin %}
<b>AdminView</b>
{% endif %}
</div>
<... other stuff ...>
<script type="text/javascript" src="{{ url_for('static', filename = 'tan.js') }}"></script>
</html>
and the corresponding JS file:
function logout() {
window.location.replace(URL_SLO)
}
function adminView() {
const URL_ADMIN_BASE = URL_BASE + "api/adminsans/";
window.location.replace(URL_ADMIN_BASE)
}
function mount() {
...other stuff
document.getElementById('logoutButtonTAN').addEventListener('click', logout);
document.getElementById('adminViewButtonTAN').addEventListener('click', adminView);
}
window.onload = mount
other stuff...
onclick
The onclick attribute fires on a mouse click on the element.
getElementById
Get the element with the specified ID
You must use ID
document.getElementById('logout').addEventListener('click', function(e) {
e.preventDefault();
alert('logout');
});
<div class="topnav">
<b>Logout</b>
AdminView
Show TAN
</div>
I'm trying to modify login page UI (with React) in JupyterLab, it seems like its server consists of Python Tornado and renders login.html as one of templates. (literally stored in templates directory. ...jupyter_server\templates\) It might also render others like 404.html, error.html respectively in terms of contexts.
I simply followed https://reactjs.org/docs/add-react-to-a-website.html like below so:
page.html
<head>
<meta charset="utf-8">
<title>{% block title %}Jupyter Server{% endblock %}</title>
:
:
<!-- We will put our React component inside this div. -->
<div id="like_button_container"></div>
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react#17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#17/umd/react-dom.development.js" crossorigin></script>
{% block login %}
{% endblock login %}
</body>
</html>
logint.html
{% extends "page.html" %}
{% block login %}
<script src="like_button.js"></script>
<script>console.log('This is Login page.')</srcipt> // logs shows fine
<h1>This is Login Page.</h1> // tag shows fine
{% endblock login %}
As I understand so far, when the url hit as login, login.html renders with appending its contents to page.html.
I was expecting the like_button.js component renders fine but it is the only thing excluded. The log and h1 are visible correctly meanwhile.
Have I missed something? any ideas welcome.
The src of the script isn't correct. In Tornado, you put your static files in a folder called static and then set the src like this:
<script src="{{ static_url('like_button.js')"></script>
If you put the file in a subfolder such as static/js/, then provide its relative path:
<script src="{{ static('js/like_button.js') }}"></script>
I am following this tutorial to add Firebase auth to an appengine app. It works except I always get the warning as if (typeof firebase === 'undefined') in index.html is always true. I may have put something in the wrong place (noob at web stuff). Here is what I have done (I have removed some comments and the msgbox display code):
<script>
if (typeof firebase === 'undefined') {
const msg = "Please paste the Firebase initialization snippet into index.html. See ...";}
</script>
<script src="https://www.gstatic.com/firebasejs/ui/4.5.0/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.5.0/firebase-ui-auth.css">
<script src="{{ url_for('static', filename='script.js') }}"></script>
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.8.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-analytics.js"></script>
<script>
var firebaseConfig = {
the secrets from firebase which work };
the rest is verbatim from the example
I have tried putting firebaseConfig in the header, same problem.
firebase won't have a value until after you include firebase-app.js. Right now, you are checking it before the inclusion. The order matters a lot. Just move the scripts above the code that uses them.
Also, the versions of your firebase scripts need to match exactly - what you show right now have version conflicts.
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-analytics.js"></script>
<script>
if (typeof firebase === 'undefined') {
const msg = "Please paste the Firebase initialization snippet into index.html. See ...";}
// now you can call firebase.initializeApp()
</script>
I'm using jms/twig-js library and want to import twig as js just like they show in the usage page Here is my example:
agent_company.html.twig
{% twig_js name="agent_company" %}
some code ...
agents_create.html.twig
<script language="javascript" type="text/javascript" src="twig.js"></script>
<script language="javascript" type="text/javascript" src="agent_company.js"></script>
<script language="javascript" type="text/javascript">
Twig.render(agent_company);
</script>
At the end I got
I wanna mentioned that before I use JMSTwigJsBundle for Symfony2 and this code works fine:
{% javascripts "#PartnersManagerBundle/Resources/views/Default/agent_company.html.twig" filter="twig_js" %}
<script language="javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
So, I think my problem is with wrong pointing to the files. I accept any suggestions. Thanks!!
The library forknetwork/twig-js-bundle works for all versions.
Version 2.1.0 work with Symfony 3 and v4.0.0 with Symfony 4. So I use my old code and just update the library version.
Currently I am using flask with handlebars for javascript. For some reason I am getting 'define not defined' and 'handlebars is not defined'. Can someone give me some insight as to why?
HTML
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.10/handlebars.amd.js" integrity="sha256-cEkEXgRFO7XYdrN1VzwFPP5zTTOxXJ2Xo6HoZos61Cs=" crossorigin="anonymous"></script>
</head>
<body>
<script id="header" type="text/x-handlebars-template">
<div> {{ headerTitle }} </div>
Today is {{weekDay}}
</script>
<script src="{{ url_for('static', filename='script.js') }}"></script>
</body>
</html>
JS
$(function(){
var theData = {headerTitle:"Shop Page",
weekDay:"Wednesday"};
var theTemplateScript = $("#header").html();
var template = Handlebars.compile(theTemplateScript);
var html = template(theData);
console.log(html);
});
This is a build issue with the handlebars.js file.
If you look into the file you will see a lot of relative paths to different files as well as import statements.
Use this file to make it work -
https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.10/handlebars.js