I have a local server running on Tomcat.
There is currently a single landing page, which is some HTML with a simple CSS style.
My problem is, when I try to send the CSS file as a resource from my JAX-RS server, it shows up in the browser, however, it is not used by the browser to style the HTML.
Here is how it looks:
As you can see, the CSS is there, it's really simple, but it doesn't change the background.
Now, I tried to do the simplest version possible, where I just put the HTML and CSS in the same folder, and exclude the localhost request, just link it together, and it worked.
I send script files via this function:
#GET
#Path("/{scriptName}")
#Produces(MediaType.TEXT_HTML)
public InputStream getScript(#PathParam("scriptName") String scriptName) {
return ScriptService.getScript(scriptName);
}
In my HTML, the way I put it together in the <head> part is this:
<head>
<title>Home</title>
<link rel="stylesheet" href="http://localhost:8080/WebProject/scripts/mycss.css" type="text/css">
</head>
<body>
<div class="hello">
This is some text
</div>
<div class="hello2">
It is nice to meet you sir.
</div>
</body>
Do you guys have any idea on why this is happening?
Btw, as a side note, I use the same code to fetch my Vue.js scripts, and they work perfectly fine.
Related
I am a newbie and just want to go from route->view for one image.
The image name is Frozen_Ophelia_800x.png
Here is my route:
Route::get('/products', function(){
return view('/pages/product');
});
Here is my product.blade.php
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1> <img src="public/images/product/Frozen_Ophelia_800x.png"></img></h1>
</body>
</html>
However, when I access either http://localhost:8000/products or http://127.0.0.1:8000/products I just get a tiny little icon in the top left:
I used command line to move the image to that folder from my Desktop in Ubuntu 18.04.
Here is what my project structure looks like with said image displayed:
You can access images form public folder.
(1) pass path with APP_URL
<img src="http://127.0.0.1:8000/images/product/Frozen_Ophelia_800x.png">
(2) pass path without APP_URL
<img src="/images/product/Frozen_Ophelia_800x.png">
Most likely it's an issue with the image URL being determined relative to the current page, so it would be trying to fetch:
http://localhost:8080/products/public/images/product/Frozen_Ophelia_800x.png
You can confirm that by looking at the developer console in the browser, then the network traffic.
If so, you can rewrite the img tag as:
<img src="/public/images/product/Frozen_Ophelia_800x.png">
Adding the / to the start makes the browser look for the image starting at the site root, so:
http://localhost:8080/public/images/product/Frozen_Ophelia_800x.png
How Load asset only once. if i open dashboard, all asset will be load and then i open other page, not load asset second time..
how to make load asset only once in blade template?
ex:
template.blade.php
#yield('css')
#yield('js')
dashboard.blade.php
#section('css')
//some code here
#endsection
group.blade.php
#section('css')
//some code here
#endsection
any help me?
thanks
That's not how the HTTP protocol works. The HTTP protocol is stateless, meaning it does not remember that a user visited the dashboard before they visited group.
The only assurance you have is that when a user visits the dashboard the CSS of the dashboard will be cached so subsequent requests for them will load them from the cache and not from the webserver.
However you must assume that a user could visit group first so all required CSS for group must be included in the group template, even if that means that means you'll be replicating some CSS for each page.
If you really want to load each asset only once then you should use a JavaScript library like jquery mobile to specify different sections that are loaded via AJAX. However the how and why is way too broad a question to cover here.
Why you loading asset with #yield? Just load it on your layouts.
For example app.blade.php which in layouts folder.
app.blade.php
<html>
<head>
<link rel="stylesheets" href="{{asset('css/style.css')}}"/>
<title>title goes here</title>
</head>
<body>
#yield('content')
<script src="{{asset('js/jquery.js')}}"></script>
</body>
</html>
Then load layout on any view for example dashboard
dashboard.blade.php
#extends('layouts.app) //it loads all template data from layouts(app.blade.php)
#section('content')
content for dashboard
#endsection
Is it possible to run ckeditor on an IFrame so that can encapsulate a full html page? I have tried various methods but nothing seems to work.
What I am looking for is to have a ckeditor wrapper page say Editor.htm which contains an editable IFrame linked to my real html page say test.htm. Something line:
Editor.htm
<!DOCTYPE html>
<html>
<head>
<script src="http://cdn.ckeditor.com/4.5.10/standard-all/ckeditor.js"></script>
</head>
<body>
<iframe contenteditable="true" src="test.htm" id="editor1" name="editor1"></iframe>
</body>
</html>
You can set ckeditor to use "fullPage" mode, allowing you to edit everything from the opening tag to the closing tag. See the official sample here.
You will still need to get the content into the editor (e.g. the html page you want to edit) and save the result on the server, but this is something specific to your site, language, platform etc.
I am working with CKEditor 4.4.5 and its plugin Stylesheet Parser 4.4, but I get empty list from the style drop-down.
To make my question easier to understand, please try this code (download from its example site: http://sdk.ckeditor.com/samples/styles.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<title>Stylesheet Parser plugin</title>
<script src="http://cdn.ckeditor.com/4.5.2/standard-all/ckeditor.js"></script>
</head>
<body>
<textarea cols="80" id="editor2" name="editor2" rows="10" ><p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p>
</textarea>
<script>
CKEDITOR.replace( 'editor2', {
extraPlugins: 'stylesheetparser',
height: 300,
// Custom stylesheet for editor content.
contentsCss: [ 'http://sdk.ckeditor.com/samples/assets/stylesheetparser/stylesheetparser.css' ],
// Do not load the default Styles configuration.
stylesSet: []
} );
</script>
</body>
</html>
It doesn't really work. But the sample on that site works well.
I also find another sample site:
http://ckeditor.com/ckeditor_4.3_beta/samples/plugins/stylesheetparser/stylesheetparser.html
I tried to copy all the sources code from this demo site, but get no luck.
Did anyone else have the same problem?
How can I make the codes above work? It basically uses the source codes from CDN site so I don't think the version of source code matters.
You should try with this version: http://ckeditor.com/addon/stylesheetparser-fixed
The official plugin has some problems since very long ago but they don't seem to plan to fix them.
This problem is caused by Cross-domain request. The CSS file is in HTTP server, and my application is running with a port number. So they are treated as cross domain request.
I also tested the HTML page and CSS file in the local files. However, file://...path is still treated as Cross Domain request in Chrome, but FF and IE works with that properly though.
When I tried this in server, it works properly with Chrome. Unfortunately, there seems no way to make cross domain request work in Chrome and Firefox.
I am using Spring roo and STS Insight server. I want to create a javascripts folder to add my javascript files and link them in my JSP. however, I don't know where to put the javascript files because, my JSP never can find it.
More interestingly, the dojo.js is located with no fuss. I looked in my sts directory. It appears insight.war could be housing the dojo.js. but I still can't figure out how the path is setup.
resources/dojo/dojo.js is located.
in file system, we have insight.war/dojo/dojo/dojo.js. So clearly, resources is pointed to insight.war/dojo/dojo.js. Where is this configuration? I want to change it, Preferably best load it from within my application.
Can someone help me please?
You can put all your files (images, css, javascript ...) in src\main\webapp
include a css like
<style type="text/css">
#import "${pageContext.request.contextPath}/your_dir_in_src_main_webapp/your_css.css";
</style>
include a js like
if you js contains jsp tag then
<script type="text/javascript" charset="utf-8">
<%# include file="/your_dir_in_src_main_webapp/your_js.js" %>
</script>
if you js doesnt contant jsp tag than
<script type="text/javascript" charset="utf-8" src="/your_dir_in_src_main_webapp/your_js.js"></script>