I am trying to embed Bokeh plots in to portable html slideshows using WebSlides (note that Reveal.js doesn't suit my needs).
The problem is illustrated below with the toolbar being misaligned:
My steps were:
1) I downloaded the source code for WebSlides
2) ran a simple Bokeh plot obtaining the div and script components
3) Inserted the relevant html links, div and scripts components in to 'index.html' from the WebSlides folder. The components were inserted using the Component Instructions for Bokeh 0.12.10. The div was inserted in to a blank component of the WebSlides.
Does anyone know how I might prevent the toolbar misalignment? Any advice, however vague is appreciated as I am loathe to dropping Bokeh for this application.
A copy of the html doc is here and a snippet without the javascript is below:
<!doctype html>
<html lang="en" prefix="og: http://ogp.me/ns#">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link
href="http://cdn.bokeh.org/bokeh/release/bokeh-0.12.10.min.css"
rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.10.min.js"></script>
<BOKEH SCRIPT IS PLACED HERE>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&subset=latin-ext" rel="stylesheet">
<!-- CSS WebSlides -->
<link rel="stylesheet" type='text/css' media='all' href="static/css/webslides.css">
<!-- Optional - CSS SVG Icons (Font Awesome) -->
<link rel="stylesheet" type='text/css' media='all' href="static/css/svg-icons.css">
</head>
<body>
<main role="main">
<article id="webslides" class="horizontal">
<section>
<div class="bk-root">
<div class="bk-plotdiv" id="dac8b20e-c981-49a6-8c18-cf0ca0ddc43a"></div>
</div>
</section>
</article>
</main>
<script src="static/js/webslides.js"></script>
<script>
window.ws = new WebSlides();
</script>
<script defer src="static/js/svg-icons.js"></script>
</body>
</html>
Toolbars were reimplemented almost from scratch in bokeh 0.12.11dev1 and they don't use fragile float positioning anymore, so this shouldn't be an issue. You can follow our developer guide to get you started with dev version of bokeh. However, if the issue persists in 0.12.11dev1, please submit an issue with a complete, reproducible example.
Related
I am currently trying to figure out why my dialog boxes are not working. I took code directly from jQuery UI and put it into my own new file too see if I could troubleshoot the problem, but the code from the website doesn't even work correctly when I copy and paste it into a new HTML file. The code in question (directly from jQuery UI):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#dialog" ).dialog();
} );
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog
window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>
It is supposed to be simple and straightforward but it is driving me crazy at the moment. Any help fixing this would be fantastic.
I just tried the code on codepen and it works fine
But when I tried it on my computer, the css format did not appear in front of me, due to a simple reason
Focus on the following code
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
As you can see, there is only // without https:, so to solve the problem, we just add this https: to the format, so the format becomes as follows:
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
The problem is solved, of course, if this is your problem, but if it is not, please explain the problem more with an example of a picture
I hope I am asking it correctly, I am creating a website and saved an HTML and CSS files for my navbar and footer.
I am trying to load those files from different pages on the site.
My index page isn't loading anything, it has the navbar and footer inside the index.html and index-style.css.
However, when I am using the load function on the other pages there is some kind of delay and you can see on the top left side of the page some kind of a "jump" where you see the HTML for half a second then the navbar and footer are loaded.
This is how my code looks like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" type="image/png" href="../images/logo/soup.png">
<title>Souplease - Gallery</title>
<link rel="stylesheet" type="text/css" href="../css/gallery-style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<!--Font Awesome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<script src="https://kit.fontawesome.com/44f557ccce.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
</head>
<body>
<!-- Navigation Bar -->
<nav class="load-navbar"></nav>
<!-- more code here -->
<!-- Footer -->
<footer id="load-footer"></footer>
<script type="text/javascript">
$(document).ready(function() {
$(".load-navbar").load("navbar.html");
$("#load-footer").load("footer.html");
});
</script>
</body>
</html>
You can also check this short video to understand the problem better. Pay attention to the top left side of the screen
The load() will always execute asynchronously, so it'll get painted as you see it in the video, there's no way to change that using jquery's load().
If you really want to use it though, I'd use some kind of transition or loading element.
On the other hand I would never load components like that on a project of my own, I'd rather use an iframe even if not elegant, at least it'll load (or try) as the page is painted.
I am pretty new to Grails/ Bootstrap/ HTML and webprogramming in general. I am not an IT-guy but I have to implement a little monitoring website for a research project. I am pretty sure there is a simple solution to my problem - I would really appreciate if someone could help me!
I am using IntelliJ with Grails 3 and I am trying to integrate the SB Admin2 Bootstrap template from Start Bootstrap into my project.
My problem is, that the Website is not displayed as it should. First I tried to follow this tutorial http://grails.asia/how-to-apply-a-commercial-bootstrap-theme-to-your-grails-application/ but it didn't work for me - don't know where I failed. Then I just copied the index.html content into my gsp file. First only the text was shown, then I followed an answer from this post Bootstrap template not getting displayed and added a link to BootstrapCDN - It worked.. but not correctly. Screenshot
Now the head of my layout gsp file looks the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin 2 -Bootstrap Admin Template</title>
<!-- Bootstrap Core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="../vendor/metisMenu/metisMenu.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="../dist/css/sb-admin-2.css" rel="stylesheet">
<!-- Morris Charts CSS -->
<link href="../vendor/morrisjs/morris.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="../vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
Hope someone can help me!
Thank you in advance!
edit1: If I use the IntelliJ preview in the html file it works perfect.
First of all, I saw you use relative paths in your links to the javascripts etc.
<link href="../dist/css/sb-admin-2.css" rel="stylesheet">
I would prefere to use absolute ones like
<link href="${request.contextPath}/css/sb-admin-2.css" rel="stylesheet">
I use a few Bootstrap-Layouts in different Grails Applications (in one application even the sb-admin). Let me try to explain my way (btw. seems that it's nearly the same as your first link, but another description might help out a bit) ...:
copy the index.html to views->layout->main.gsp
place the e.g. g:layoutBody in apropriate places in the main.gsp page and remove the elements which are not useful for your app.
<div id="page-wrapper">
<g:layoutBody/>
</div>
<!-- /#page-wrapper -->
copy the javascripts, images etc. to the web-app directory and check the references in the main.gsp layout that they refer to the javascripts etc. via
<script src="${request.contextPath}/js/bootstrap.min.js"></script>
after that, your views could look like this:
<%# page import="urlaub.Employee" %>
<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="main">
<g:set var="entityName" value="${message(code: 'employee.label', default: 'Employee')}" />
<title><g:message code="default.list.label" args="[entityName]" /></title>
</head>
<body>
<g:if test="${session.user.admin}">
<div class="row">
<g:link class="btn btn-primary btn-flat" action="create"><g:message code="default.new.label" args="[entityName]" /></g:link>
</div>
</g:if>
<g:render template="/flash_message" bean="${flash}" />
<div class="row">
<h1><g:message code="default.list.label" args="[entityName]" /></h1>
<hr>
</div>
Grails 3 comes with Asset pipeline plugin to manage static assets, minimize them, etc,...
Check its documentation. In your case you should move your assets to the corresponding asset folder (javascripts, stylesheets, images) into de assets folder.
For example, for including a css placed in assets/stylesheets/bootstrap/bootstrap.min.css you have to include in you gsp the following:
<asset:stylesheet href="bootstrap/bootstrap.min.css"/>
Other example with javascript and assetPath:
<script type="text/javascript" src="${assetPath(src:'register.js')}"></script>
I've been struggling for hours to include the Bootstrap CSS file into my file. My code snippet is as follows:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-
1">
<link rel="stylesheet"
href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" type="text/css"> <!--Works fine now, but not with local path -->
<title>Welcome</title>
</head>
<body>
<section>
<div class="jumbotron">
<div class="container">
<h1> Hello </h1>
<p> world </p>
</div>
</div>
</section>
</body>
</html>
This works perfectly and the Bootstrap shows up just fine. However, I wish to include the localized files. The moment I change the link in the head of the code to <link rel="stylesheet" href="resources/bootstrap.css" type="text/css">, The bootstrap disappears.
Just to make sure and convince you that the bootstrap.css is indeed there at resources/bootstrap.css I included <%# include file="/resources/bootstrap.css"%> at the top of the code and it actually showed me the entire content of the file.
What am I missing? How do I resolve this?
If you have this project structure (I suggest trying this,because resource folder content is not used for static web contentnt ):
|_webapp
|_css
|_bootstrap.css
you can load the css by
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/bootstrap.css" type="text/css">
I've been trying to make a simple static web page with some Bootstrap functionality in it. I set up a LAMP server on an AWS ec2 instance to accomplish this.
To try some things out, I just wanted to use a jumbotron to make sure I was able to connect the bootstap library to my html page. I accomplished this at some point, but I stopped working on this and came back a few weeks later to continue. I picked up where I left off, with the same exact code, but this time, the jumbotron I had working was no longer present. Basically, the html page I made was a typical html page with normal fonts and no jumbotron effect. My code is below:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<!--meta tag viewport purpose is to scale screen correctly-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css" >
<link href="custom.css" rel="stylesheet" >
</head>
<body>
<div class = "jumbotron">
<div class = "container">
<h1>Welcome to landing page!</h1>
<p>This is an example for jumbotron.</p>
</div>
</div>
</body>
</html>
I mentioned this is being done in an AWS ec2 instance. So assume that the path to my html file is /var/www/html. the html directory holds my .html file which is my static web page, and also holds the js,fonts,and css directories downloaded from bootstrap. So... once again, html directory contents are:
css custom.css fonts js Will.html
I'm confused as to how I left the code alone and after coming back a couple of weeks later, the jumbotron was no longer working. Initially there was a master bootstrap directory that held the css, fonts, and js directories, but I just got rid of that master directory and put the three directories inside on the same level as the html page. That shouldn't matter though, I just changed the path to those directories. I updated my LAMP server on the aws ec2 instance, so maybe thats causing an issue. Not sure though, any help on how to get this jumbotron working would be great.
Thanks.
try this
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<!--meta tag viewport purpose is to scale screen correctly-->
<meta name="viewport" content="width=device-width, initial-cale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
<link href="custom.css" rel="stylesheet" >
</head>
<body>
<div class = "jumbotron">
<div class = "container">
<h1>Welcome to landing page!</h1>
<p>This is an example for jumbotron.</p>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</html>