Good Morning,
I hope to get help for a simple problem but that caused too much damage to me.
I'm building a video library for users where one profile can upload a video and another can play it in a browser.
The html page that diplays the video player has next code:
<!DOCTYPE html>
<html
lang="en"
xmlns:th="http://www.thymeleaf.org"
xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity5"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout_navigation.html}">
<head>
<meta charset="UTF-8">
<title>OBR-VIDEOTHEQUE</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" href="styles.css"> -->
<style type="text/css">
#video-player {
display: none;
}
#video-form {
width: 60%;
}
.error {
color: red;
}
.success {
color: green;
}
</style>
</head>
<body>
<section layout:fragment="content">
<meta charset="utf-8">
<div class="container mt-1">
<h3>Video streaming1...</h3>
<video src=""
type="video/mp4" width="720" height="480" controls preload="none" id="video-screen" autoplay loop>
</video>
</div>
</section>
<section layout:fragment="footer">
<footer class="container py-5 text-center footer">
<div class="row">
<div class="col-md-12">
<p class="text-muted">©</p>
</div>
</div>
</footer>
</section>
<section layout:fragment="scripts">
<script th:src="#{/js/jQuery-min.js}"></script>
<script
type="text/javascript"
th:src="#{/js/dropdown.js}"></script>
<script th:src="#{/js/bootstrap.bundle.js}"></script>
<script th:src="#{/js/bootstrap.min.js}"></script>
<script th:src="#{/js/select2.min.js}"></script>
<script type="text/javascript">
var xyz = jQuery.url.param("id");
if (xyz) {
const videoScreen = document.querySelector('#video-screen');
videoScreen.src = "video/?id=${xyz}";
console.log(videoScreen.src);
}else{
console.log("No Id found in search url");
}
</script>
</section>
</body>
</html>
For instance, if i change <h3>Video streaming1...</h3> with <h3>Another heading text</h3>
the browser keeps showing previous content that is Video streaming1... even if i save the html changes and reload the Spring Tool Suite 4 that i'm using to develop the application.
How can I solve this headache? I have put theses lines in application.properties file:
spring.thymeleaf.cache=false
spring.thymeleaf.mode=HTML
thinking that no cache shall be kept but in vain.
Problem number two:
The <video src="" /> src attribute gets populated dynamically using the javascript code found on the bottom of the file but is prepending localhost before the endpoint. For instance, videoScreen.src = "video/?id=${xyz}" causes the src attribute to get http://localhost:8087/video/?id=movie when I want it to take on video/?id=movie only. This causes browsers calling my application remotely to experience an error because localhost is going to look the video url on their local PC which is wrong.. How can I solve this problem as well?
Thanks for your help.
Related
enter image description hereI created a website with a video as my background for my front page. My problem is that when I enter new set of codes supposedly for another tab in the same page but below it, it does not work. i tried using div class container but it does not work. How to fix it?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Lakad Dalampasigan</title>
</head>
<body>
<section class="showcase">
<header>
<h2 class="logo">LAKAD DALAMPASIGAN</h2>
<div class="toggle"><img src="log1.png" width="90" height="90"></div>
</header>
<video src="ocean.mp4" muted loop autoplay></video>
<div class="overlay"></div>
<div class="text">
<h2>Lakad Dalampasigan </h2>
<h3></h3>
<p>Climate has always changed and is always changing.
Climate change was reframed from an environmental concern to a public health issue prior to and during this ongoing crisis, and it may soon be deemed a public health emergency. </p>
<a href="sec.html
" target="_blank">Learn more</a>
</div>
</section>
</body>
</html>
First, I know this is very simple and I'm as baffled as you are that I can't figure it out on my own. I have no background in web development and need to use github pages to document a project. I've been spinning my wheels on this for an embarrassing amount of time.
The crux of the problem is that I'm trying to use nested iframes, but with each layer I get another scroll bar and nothing scrolls quite in sync. If I set scrolling="no" content is hidden. This is exacerbated when I use a frames for the side bar.
Index.html
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="./styles/main_style_sheet.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="mainheader">
<b> My Project Name
</b>
</div>
<body>
<div class="topnav">
Overview
Model Concepts/Patterns
Data Lineage
Entity Details
Jargon Glossary
Example Demos
</div>
<!-- This creates a frame in the lower body, with an unwanted scroll bar, but it's not too bad. -->
<iframe name="main_body" src="overview.html" height="100%" width="100%">
</body>
</html>
It gets more problematic is trying to do the left sidebar. It looks like I just don't understand how heights are inherited between frames. The image shows how the sidebars keep stacking up, and the scrolling is just not quite in sync. I've tried bumping up the height to 100000 and hiding scrolling, but then horizontal scroll is also eliminated.
<!DOCTYPE html>
<html>
<link href="./styles/main_style_sheet.css" rel="stylesheet" type="text/css">
<body>
<div class="container" style="display: flex; height:100%;">
<div style="display:inline-block;">
<iframe
src="cs_entity_sidebar.html"
name="cs_entity_sidebar"
frameborder="0"
scrolling="no"
width="100%"
align="left">
</iframe>
</div>
<iframe class="second-row"
name="main_overview_content"
scrolling = "yes"
height=10000
align="left"
>
</iframe>
</div>
</html>
This site has a tutorial that is almost what I need, just a simple layout without frames
https://usefulangle.com/post/61/html-page-with-left-sidebar-main-content-with-css
Operative snippet:
<div id="main-container">
<div id="sidebar">
Link 1
Link 2
Link 3
Link 4
Link 5
</div>
<div id="content">Content Area</div>
</div>
But how to I get "Content Area" to populate with the linked html? When I try to do this in my own html is just brings me to a separate window without the top navigation.
This question also gets pretty close, but doesn't cover how to get the links and navigation working.
Furthermore, I have read the jquery/ajax is the better approach here, but none of what I'm doing in ajax has an effect. I'm on a corporate vpn so I'm thinking there is some proxy issue.
Any help is appreciated.
Edit: Jquery/Ajax approach which is not working. It doesn't fail, the click just doesn't do anything. I've tried various sources, including the google library, but src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js" is what I've seen working on other projects in my company.
Note the screenshot, nothing loaded above "Above this is from the script"
<html>
<head>
<!-- load ajax, file can also be loaded locally -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link href="./styles/main_style_sheet.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script>
/* create event handler that loads content into main area when navigation link is clicked */
$(document).ready(function () {
$('#link1').click(function(){
$('#main_body').load('test.html');
});
});
</script>
</head>
<body>
<div class="mainheader">
<h3>My Project Name</h3>
</div>
<div class="topnav">
<a id="link1">Overview</a>
</div>
<!-- where you want the page to load -->
<div id="main_body"></div>
<div>Above is loaded from script</div>
<div>Below is loaded from a frame</div>
<iframe src="test.html" ></iframe>
</body>
</html>
edit2: Inspect view error
If I'm understanding correctly, you are trying to make a website that lets users navigate to a new page without triggering a page refresh. This is a modern feature of dynamic websites.
For this purpose, it is definitely preferable to use jquery/ajax over iframe because of the many styling issues related to iframes (think about responsive mobile webpages). Here's a simple snippet for implementation using jquery/ajax
index.html:
<html>
<head>
<!-- load ajax, file can also be loaded locally -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
/* create event handler that loads content into main area when navigation link is clicked */
$(document).ready(function () {
$('#link1').click(function(){
$('#main_body').load('overview.html');
});
});
</script>
</head>
<body>
<div class="mainheader">
<h3>My Project Name</h3>
</div>
<div class="topnav">
<a id="link1">Overview</a>
</div>
<!-- where you want the page to load -->
<div id="main_body"></div>
</body>
</html>
overview.html:
<html>
<style>
#wrapper {
background-color: yellow;
height: 200px;
}
</style>
<div id="wrapper">
<p>Dynamically loaded webpage</p>
</div>
</html>
link to a demo
Note that there are some security concerns to consider when you dynamically load content. You can read more about this in this question: Dynamic html page creation with jquery
Edit: Your code works fine on an online text editor. Ajax only works if you host the webpages on a server where the page can be loaded with supported protocol schemes such as http/https.
I've been trying to develop a web application with Bootstrap 4.3.1 and the Spotify API, and all I wish to accomplish at this moment is to center a element on the screen (vertically and horizontally) that contains the authenticated user's username. Apparently, I am unable to do this if the div is within a script tag - is there any way around this? I've included the relevant excerpt of my index.html file and my style.css file.
Index.html
<script id="user-info-template" type="text/x-handlebars-template">
<div class="container h-100 d-flex justify-content-center">
<div class="jumbotron my-auto text-center">
<h1 class="display-4">Welcome, {{display_name}}.</h1>
<h4 class="display-5">Select one of your playlists to get started.</h4>
</div>
</div>
</script>
Style.css
html,
body {
height: 100%;
}
EDIT
Thank you all for the suggestions, but many of you have said that I shouldn't have tags within my tags, but I'm trying to follow an example created by Spotify. Their code has embedded JS in the index.html, and uses Handlebars like this:
From their Index.html
<script id="user-profile-template" type="text/x-handlebars-template">
<h1>Logged in as {{display_name}}</h1>
<div class="media">
<div class="pull-left">
<img class="media-object" width="150" src="{{images.0.url}}" />
</div>
<div class="media-body">
<dl class="dl-horizontal">
<dt>Display name</dt><dd class="clearfix">{{display_name}}</dd>
<dt>Id</dt><dd>{{id}}</dd>
<dt>Email</dt><dd>{{email}}</dd>
<dt>Spotify URI</dt><dd>{{external_urls.spotify}}</dd>
<dt>Link</dt><dd>{{href}}</dd>
<dt>Profile Image</dt><dd class="clearfix">{{images.0.url}}</dd>
<dt>Country</dt><dd>{{country}}</dd>
</dl>
</div>
</div>
</script>
At the bottom of their Index.html
<script>
(function() {
/**
* Obtains parameters from the hash of the URL
* #return Object
*/
function getHashParams() {
...
}
var userProfileSource = document.getElementById('user-profile-template').innerHTML,
userProfileTemplate = Handlebars.compile(userProfileSource),
userProfilePlaceholder = document.getElementById('user-profile');
...
$.ajax({
url: 'https://api.spotify.com/v1/me',
headers: {
'Authorization': 'Bearer ' + access_token
},
success: function(response) {
userProfilePlaceholder.innerHTML = userProfileTemplate(response);
$('#login').hide();
$('#loggedin').show();
}
});
...
}
If you wanted to do this all on one page, without importing the app.js file, it will look like this using your divs
You can then insert any javascript you have between the script tags. If you want {display_name} to be a dynamic input you will need to create a function within the script tag referencing this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./index.css" />
<title>Spotify</title>
</head>
<body>
<div class="container h-100 d-flex justify-content-center">
<div class="jumbotron my-auto text-center">
<h1 class="display-4">Welcome, {{display_name}}.</h1>
<h4 class="display-5">Select one of your playlists to get started.</h4>
</div>
</div>
<script>
</script>
</body>
</html>
You can then move all of the divs and classes around in your css
I am new to AngularJS and trying to fix the issue where some of the HTML code displays before ng-if condition gets evaluated. I am using ng-cloak as mentioned in many other stack over flow URLs but it still doesn't work for me. I am trying to load default image if actual image on URL is blank and when page loads, even if actual URL is there, it first blinks with default image and then loads the actual image because ng-cloak doesn't work correctly.
Please help.
I have below code and CSS etc.
Index.html
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<base href="/">
<title>Some App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.min.js"></script>
<script src="https://code.angularjs.org/1.4.7/angular-sanitize.min.js"></script>
<style type="text/css">
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
</style>
</head>
<body ng-app="app">
some code here
<div ng-view></div>
</body>
</html>
other.html
<div class="content">
<div style="width: 100px; height: 40px;">
<div ng-if="image.small">
<img src="{image.small}}">
</div>
<div ng-if="!image.small" ng-cloak>
<img src="image/default.png">
</div>
</div>
You can apply ng-cloak in your body tag. So, you whole body will be displayed only after angular's compilation.
<body ng-cloak ng-app="app">
..
</body>
This will solve your issue.
I did it always on my <html> tag. Like <html ng-app="someApp" ng-cloak>
The timeout function will do what you want:
// timeout function will give some time for page load.
$timeout(function () {
//your page load
$("#panelTask").html(res);
});
the best solution is to have a loader while your app is waiting for the data. Instead of putting the ng-if on the flickering element, put in on the parent component and show a loader (it could like FB does a sort of mock of your UI).
I had to add :
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
to my css file for ng-cloak to work.
Like here :How to correctly use ng-cloak directive?
<div ng-if="image.small">
<img src="{image.small}}">
</div>
<div ng-if="!image.small" class="ng-cloak">
<img src="image/default.png">
</div>
i am working on multipage application by loading mainpage.html into index.html by using tag i need background image different one for different html pages such as mainpage,page1,page2 etc.can any one help ??
index.html
<html>
<head>
<meta charset="UTF-8">
<title>wsdl Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="css/main.css">
<script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body style="display: none;">
<!-- This is static header, it will be shown always -->
<div id="header">
<h1>WS DEMO</h1>
</div>
<div id="wrapper">
<!-- This is a placeholder for dynamic page content -->
<div id="pagePort"></div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
function wlCommonInit(){
busyIndicator = new WL.BusyIndicator();
// Special case for Windows Phone 8 only.
if (WL.Client.getEnvironment() == WL.Environment.WINDOWS_PHONE_8) {
path = "/www/default/";
}
$("#pagePort").load(path + "pages/MainPage.html", function(){
$.getScript(path + "js/MainPage.js", function() {
if (currentPage.init) {
currentPage.init();
}
});
});
}
body{
background: red;
}
<!-- begin snippet: js hide: false -->
//mainpage.html
<script>
$.getScript(path + "js/MainPage.js");
</script>
<p id="currentPage"></p>
<div class="container">
<label>username</label> <input type="text" id="username"><br><br>
<label>password</label> <input type="text" id="userpwd"><br><br>
<input type="submit" value="login" class="appButton" onclick="validate();">
</div>
<p id="mytable"></p>
If you mean you want a different background image applied to the body element but you only have control of a fragment of the page, a style element should work - you might need !important to override the default:
<div id="pageport">
<style>
body { background-image: url('images/newbg.jpg') !important; }
</style>
</div>
In connection with the comment I made I have decided to post my solution as an answer. My solution is rather simple, add a class to the body tag and then change the background using an external CSS file - based on the classes used.
e.g:
...
<body class="index">
...
//in the CSS:
body.index {
background: #F00;
}
Then simply in each of the different HTML pages, change the class of the body tag to suite the background you want.
Check this Plunk for live example
If you need any clarification, drop a comment and I'll get back to ya!