I used grails3.1.2 to create my app. It's normal but now it isn't. My app contains a sub-app which is just html, js, css and so on. I put this sub-app under src/main/webapps folder. From my browser, I found all js and css used by html is not available.
I tried to adjust location of sub-app to src/main/resource/public , but it doesn't work for me.
My app has a gsp contains html as follow:
<%# page contentType="text/html;charset=UTF-8" %>
<html>
<head>
<title></title>
</head>
<body>
%{--<iframe height="100%" width="100%" src="<asset:assetPath src='events-list.html?t=${java.lang.System.currentTimeMillis()}' />" frameborder="0" />--}%
<iframe height="100%" width="100%" src="${resource(dir:'admin',file:'events-list.html')}" frameborder="0" />
</body>
</html>
The html used some js and css:
<link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css"/>
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css"/>
But those js and css is not accessed by browser(browser cannot find them)
I don't understand why it got worse. Hope you could submit some advises
Related
I have built a livestream server for our church that is pushing the live feed to a video-js player on a page which I can then embed in our main website. This is working fine except I would like the stream to start playing automatically once it goes live (so if people are sitting on our site waiting for the live stream, they don't have to keep refreshing to get it to start playing).
I have seen mention of writing into the code for the player to keep querying the server every so many seconds and then start automatically, but I'm unsure how this gets written into the page.
Current code for live.html:
<!DOCTYPE html> <html> <head> <script src='https://bacstream.live/videojs/video.js'></script>
<script
src="https://bacstream.live/videojs/videojs-http-streaming.js"></script> <meta charset=utf-8 />
<title>LiveStream</title> <link href="https://bacstream.live/videojs/video-js.min.css"
rel="stylesheet"> <!-- <link
href="https://bacstream.live/videojs/videojs-sublime-skin.min.css" rel="stylesheet"> --> <!--
<link
href="https://bacstream.live/videojs/videojs-sublime-skin.css" rel="stylesheet"> --> <!-- <link
href="https://bacstream.live/videojs/video-js.css" rel="stylesheet"> --> <!-- <link
href="https://bacstream.live/videojs/videojs-skin-twitchy.css" rel="stylesheet" type="text/css">
--> </head> <body>
<center> <video-js id="live_stream" class="video-js vjs-fluid vjs-default-skin vjs-big-play-
centered" controls
autoplay preload="auto" autoplay="true" width="auto" height="auto" poster="https://thechurchco-
production.s3.amazonaws.com/uploads/sites/2101/2020/06/Static-stream-page.png"> <source
src="https://bacstream.live/live/stream/index.m3u8" type="application/x-mpegURL">
<p class='vjs-no-js'>
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href='https://videojs.com/html5-video-support/' target='_blank'>supports HTML5 video</a>
</p> </video-js>
<script>
var player = videojs('live_stream', {errorDisplay: false});
player.play();
</script> </center> </body> </html>
I am trying to make web application and i need to add an icon to my title bar with a name.
I am making the web application using empty project in MVC with web form included. I am doing the coding using Visual studio 2017. I have tried my layout as below so far.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link href="~/Content/nav.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="icon" type="image/svg" href="~/Content/img/download.png" />
<script src="~/Scripts/layout.js"></script>
<title>#ViewBag.Title</title>
</head>
<body>
<navbar>
<div class="topnav" id="myTopnav">
Home
Login
Payment
Customer Registration
<a href="javascript:void(0);" class="icon" onclick="myfunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div>
#RenderBody()
</div>
</navbar>
</body>
</html>
I have tried to link the image before title but it took a wrong turn. Since I am new to MVC, please give me some method to add an icon to title bar.
What you are looking for is called a favicon. You can generate it from png or whatever and then include it in your page like this:
<link rel="icon" href="/favicon.ico" type="image/x-icon">
Here's a favicon generator (one of many):
https://www.favicon-generator.org/
The problem lays in this code:
<link rel="icon" type="image/svg" href="~/Content/img/download.png" />
You are specifying that the type is image/svg while instead it is a image/png.
Be sure that a png image exists in Content/img folder.
I am currently working on a node app using express, and rendering html page using ejs.
When I used bootstrap in my .ejsfile, the .col-xs-*, .col-sm-* breakpoints worked well, but the breakpoints for the larger width cannot work as expected.
While I used bootstrap in the .html file and opened it in the browser, all breakpoints worked fine. And I've tried include bootstrap from both CDN and local, it resulted in the same situation. Can't figure what went wrong.
Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel='stylesheet' type='text/css' href='/bootstrap.min.css'>
<title>
TEST
</title>
<style>
.eight{
background-color: red;
}
.four{
background-color: blue;
}
</style>
</head>
<body class='container-fluid'>
<article class='row'>
<div class='col-sm-8 eight'>
8
</div>
<div class='col-sm-4 four'>
4
</div>
</article>
</body>
</html>
I want the red div to occupy three-fourths of the row, the blue one occupy the rest.
Suggestions and solutions to the problem are appreciated.(Not a native English speaker, sorry for the unclear expression if any.)
There is a page, http://www.getbootstrap.sk/customize/index.html, but after you finish and compile and download the completed zip file - NOWHERE is anything giving even a clue as what to do with the darn files. ( I just installed the standard package though bower ).
SO what am I supposed to do with the downloaded customize files?
ALl I'm really trying to do is to stop my navbar items from disappearing when the width falls below 768px - I don't want them ever to disappear.
Bootstrap. How to make the navbar never collapsed
In the Grid system set the field #grid-float-breakpoint value of 0.
Click the Compile and Download button at the bottom of the page.
Extract the files bootstrap.css and bootstrap.min.css from the resulting archive.
Use them instead of the standard files bootstrap.css and bootstrap.min.css on your site.
you don't need to download the library. You can use online libraries.
For example:
<!DOCTYPE html="en">
<html>
<head>
<meta charset="utf-8">
<meta name=viewport content="width=device-width, initial-scale=1.0">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Course</title>
<!-- Normalize -->
<link rel="stylesheet" href="https://yui.yahooapis.com/3.18.1/build/cssnormalize/cssnormalize.css" type="text/css">
<!-- CSS BOOTSTRAP -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- YOUR OWN CSS LIBRARY -->
<link rel="stylesheet" type="text/css" href="css/main.css">
<!-- JQUERY If you need it -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- JS BOOTSTRAP -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- YOUR OWN JS LIBRARY -->
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
....
</body>
</html>
However, if you want to download the library, you just have to move the bootstrap.min.css and bootstrap.min.js to the folders where you keep your CSS and your JS files, and reference them in the header of your web page.
For example:
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/bootstrap.min.js"></script>
...
</head>
UPDATE:
Based on Bootstrap's documentation, I suggest that, in order to avoid collapsing of the navbar, delete the class navbar-collapse from any element of your navigation bar.
If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the .navbar-collapse. The responsive navbar requires the collapse plug-in to be included in your version of Bootstrap.
Additionally, you have to delete the button that is shown every time the navbar collapses.
Something like jsfiddle
I will need to see your source code to help you in a better way. Meanwhile, I hope this help you.
I'm playing around with Polymer 0.4. I'm trying to do a jsonp request using polymer-jsonp component which I've installed using bower.
But it's not working, it looks to me like the polymer-jsonp component is not compatible with Polymer 0.4 and it has been deprecated according to this https://github.com/PolymerLabs/polymer-jsonp/releases/tag/0.3.0
I can see in my network panel that the polymer-jsonp comoponent is being correctly imported but even though it has the "auto" parameter it does not make the request at all. I'm not running it throug any JS code, I'm expecting it to run automatically because of the auto param and to bind it results to the results param value.
May I wait for a compatible version to be released or is there any way to use it or some alternative?
EDIT:
Here is an example:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Polymer WebApp</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild-->
<script src="bower_components/platform/platform.js"></script>
<!-- build:vulcanized elements/elements.vulcanized.html -->
<link rel="import" href="bower_components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="bower_components/polymer-jsonp/polymer-jsonp.html">
<link rel="import" href="elements/elements.html">
<!-- endbuild-->
<style>
#drawer {
background-color: #CCC;
}
#main {
background-color: #EBFA6F;
}
#main site-table {
padding: 20px;
}
</style>
</head>
<body unresolved>
<template>
<polymer-jsonp url="http://127.0.0.1/abmonitor-server/Ajax.class.php?callback=" auto response="{{ sitelist }}"></polymer-jsonp>
</template>
<core-drawer-panel>
<div id="drawer" drawer>
<sites-menu></sites-menu>
</div>
<div id="main" main>
<header>
<core-toolbar>Toolbar</core-toolbar>
</header>
<site-table></site-table>
</div>
</core-drawer-panel>
<!-- build:js scripts/app.js -->
<script src="scripts/app.js"></script>
<!-- endbuild-->
</body>
</html>
Thank you very much.
The jsonp element really should be updated for core, it's just a nuisance that is hasn't been yet. However, I looked at the code, and I believe the old one should work just fine. It's possible you just have a simple problem in your setup.
I can see in the browser console that it is not being imported.
Make sure you have a <link> tag in your application that imports the element. Probably something like:
<link rel="import" href="bower_components/polymer-jsonp/polymer-jsonp.html>