I have 1 JSP page and 1 HTML page. I am including that HTML page in JSP dynamically like below.
<jsp:include page="<%=htmlPageURL%>" flush="true" />
The htmpPageUrl value is /temp/1232334333.html
In 1232334333.html, I have an image tag:
<img width=135 height=48
src="1232334333_files/image003.jpg"> </img>
Here is the folder structure:
MyWebApp/temp/1232334333.html
MyWebApp/temp/1232334333_files/image003.jpg
The problem is when I include the HTML page in JSP, it displays all the text fine, but could not load the image.
My understanding:
As I include HTML in JSP, all image paths should be relative to my JSP and not my HTML. But I really can't change HTML source. Is there any way to handle this scenario?
img tag is in correct.
Wrong: <img width=135 height=48 src="1232334333_files/image003.jpg" </img>
Correct
<img width=135 height=48 src="1232334333_files/image003.jpg"/>
If you don't have access to your .html page to modify the source, then you can try to modify it using jQuery in your .jsp file. If you know the position of the <src /> tag (i supposed it's in the first position after the page is included), when you can do as follows:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("img:first").attr("src","/temp/1232334333_files/image003.jpg");
var src = $("img:first").attr("src");
alert(src);
});
</script>
</head>
<body>
<!-- The following image is inserted after the <jsp:include /> function is processed -->
<img width=135 height=48 src="1232334333_files/image003.jpg" />
</body>
</html>
The alert function will display /temp/1232334333_files/image003.jpg.
I'm not sure if it will work, but it's worth a try.
<base> tag does the trick for me.
e.g. <base href="http://localhost:8080/MyWebApp/temp"></base>
Related
I want to show a hyperlink <a /> component under a html tag and then do some instructions onClick="#command('')" :
<zk>
<html>
<a label="show me" onClick="#command('showMe')" />
</html>
</zk>
but the componet won't show.
I tried adding <zk xmlns:zk="zk" xmlns:z="zul>" and then <z:a> and <zk:a> but it didn't work.
--->If I remove the <html> tag the component appears.
Don't ask me why the html tag I just need to use it or I'll change a lot of things
Do you need the <html> tag to be rendered in the output HTML ?
Maybe try the native namespace :
<zk xmlns:n="native">
<n:html>
<a label="show me" onClick="#command('showMe')" />
</n:html>
</zk>
But it may not keep the <html> tag in the rendered HTML.
I think you have to go with the XHTML Component Set (be aware that as stated in the documentation it has some limitations and lower performances, you should use it only if there is no better way).
Your code would be something like :
<html xmlns:zk="zk" xmlns:z="zul">
<a label="show me" zk:onClick="#command('showMe')" />
</html>
If your file extension is .zul, it will automatically generate <html>, <head>, and <body> tags so it may not help. But if you want to control it by yourself, use .zhtml, .xhtml, .html or .htm file extension.
You also cannot use the HTML component (<![CDATA[ ... ]] notation) as it will replace the <html> tag with a <span>.
I am developing a website , I have an html page which has some contents, have also made a signUp modal in the same page, but the code is getting longer, I just want to know if I keep the code of sign up modal in another file with .html/.htm extension, and on button click that modal is displayed on the same page, not to be redirected to another page, like it is displaying on the home.
I don't want the home contents to be shattered , just the modal to be displayed on above.
You can use jquery to accomplish this task:
Just create a new file "modal.html" and write code for popup there.
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function(){
$("#header").load("modal.html");
});
</script>
</head>
<body>
<div id="header"></div>
<!-- other code -->
</body>
Use w3data and include your file where ever you want. In blow i included signup.html file.
<!DOCTYPE html>
<html>
<script src="http://www.w3schools.com/lib/w3data.js"></script>
<body>
<div w3-include-html="signup.html"></div>
<script>
w3IncludeHTML();
</script>
</body>
</html>
Simple Method to load Html File to main
$(function(){
$('#which').load('test.html');
});
you can write inside document.ready also
Simply use an iframe (inline frame) to load the external webpage. You can style the size of the iframe like you normally would with any HTML element.
<DOCTYPE html>
<html>
<head>
...
</head>
<body>
<iframe src="/your-signup-page.html"></iframe>
</body>
</html>
More information on the iframe element.
I am trying to use phantomjs to turn html into pdf, and I have some html code with image src attributes that have "?" in them so that they can pass in info from the get array.
Example
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<img src="www.somewhere.com/pictures?id=1229384&key=somekey"/>
<div>link</div>
</body>
</html>
When I try to turn the html into a pdf using phantomJS rasterize.js it cuts the href and the src at the "?" and the stuff in the get information is not passed in, and thus the image does not appear.
Does anyone know how I can get passed this?
I was wondering how to add a header (or just any html file) into another html file. I tried using iframes, but it just redirected what was inside of the iframe. Once I finish my website, I will probably have a lot of pages, so it will be very useful to just be able to add a header that can be updated by only changing one file, instead of having to change it on all of the pages. Does anyone know how to do this? Thanks in advance.
With jQuery:
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("b.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
With JavaScript without jQuery:
<html>
<body>
<script src="b.js"></script>
</body>
</html>
b.js:
document.write('\
\
<h1>This is my include file</h1>\
\
');
With PHP:
<?php include('b.html');?>
For this to work you may have to modify the .htaccess file on your web server so php may be interpreted within .html files. You should see, or add, this within your .htaccess file:
RemoveHandler.html
AddType application/x-httpd-php .php .html
With Service Side Includes (SSI):
<!--#include virtual="a.html" -->
With HTML5:
<object name="foo" type="text/html" data="foo.inc"></object>
Alternatively:
<embed type="text/html" src="foo.inc">
I have searched for no javascript way but I couldn't make it work. Here is the simplest way of including HTML
you can create html files for header, footer, content, anything you want to have in a separate file and all you need to do is:
1.put this in your page
<script src="https://www.w3schools.com/lib/w3.js"></script>
you could also download the w3.js and upload it to your server files
<script src="/lib/w3.js"></script>
2.then where ever you want your html code, from the separate file, to be included to your page:
<div w3-include-html="header.html"></div>
for example
Google
<div w3-include-html="footer.html"></div>
<h1>Title of current page</h1>
<div w3-include-html="content.html"></div>
include the next code anywhere after the previous "include" codes
<script>w3.includeHTML();</script>
source w3schools.com How TO - Include HTML
so this is how it can look
<script src="https://www.w3schools.com/lib/w3.js"></script>
<div w3-include-html="header.html"></div>
<script>w3.includeHTML();</script>
How can I create a clickable link that opens multiple images in one page only? I host all my images in photobucket. I was able to create a link to open one image only but not multiple images simultaneously.
Keep all 6 files in same directory
Image1(Name:html1.html)
<html><body>
<img src="/image1.jpg"><br>
</body></html>
Image2(Name:html2.html)
<html><body>
<img src="/image2.jpg"><br>
</body></html>
Image3(Name:html3.html)
<html><body>
<img src="/image3.jpg"><br>
</body></html>
Image4(Name:html4.html)
<html><body>
<img src="/image4.jpg"><br>
</body></html>
Image5(Name:html5.html)
<html><body>
<img src="image5.jpg"><br>
</body></html>
Main html
<html><body>
image1
image2
image3
image4
image5
</body></html>
I am a newbie and just a 12-year old boy.
Apologies for any mistakes
put your images inside a sperated html file like "images.html"
and link the hyperlink to that page
click me
this is HTML sample page: put all images in images folder in the same HTML page root directory
<html>
<head></head>
<body>
<img src="/images/01.jpg"/> <br>
<img src="/images/01.jpg"/> <br>
<img src="/images/01.jpg"/> <br>
<img src="/images/01.jpg"/> <br>
</body>
</html>
Working Example : http://jsbin.com/eluqod/4/
You don't need to be an expert. If you have the basic knowledge of HTML and JavaScript you can do it on your own. The easiest option is to use jQuery framework, it's a less write, do more JavaScript library that makes interactive web design easy.
What you have to do is create a <div> container and put all your images using HTML's <img> now you have to include the jQuery library in your document
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Now use the hide and show or any other effects like FadeToggle, SlideToggle etc. effects (http://api.jquery.com/category/effects/) to toggle hide and show for the image container div. Setup your complete page with the image container and the link, first hide the image container using display:none; and now use the jQuery function to trigger a function on click of that anchor element.
This is the jQuery
$(document).ready(function(){
$('#showimg').on('click',function(){
//Trigger FadeToggle function on click
$('.image-container').fadeToggle();
});
});
And the HTML
<a id='showimg'>Hide/Show Images</a>
<div class='image-container' style='display:none;'>
<img src='images/sample.png'/>
<img src='images/sample.png'/>
<img src='images/sample.png'/>
<img src='images/sample.png'/>
<img src='images/sample.png'/>
</div>
Do remember to add the JavaScript library in your page.
check the code to learn about it: http://jsbin.com/eluqod/4/edit
You have to create different HTML files for all your image sets. You don't only have create the HTML files, you also have to upload those HTML documents online on a server so people can access it from anywhere.
1. Create an HTML file
Open notepad or any plain text editor and paste this in your file
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Your page title</title>
<style type='text/css'>
.image-container {text-align:center;}
img {width:80%;height:auto;display:block;margin:10px auto;border:2px solid black;padding:5px;}
</style>
</head>
<body>
<h2> The first 50 pictures (or whatever title you want)</h2>
<!-- Images below -->
<div class='image-container'>
<!-- Each images are in img tag, put the photobucket images link into the src attribute. Repeat the img tags if you want more images -->
<img src='http://i923.photobucket.com/albums/ad77/kihani_1996/Troll_Face_.png'/>
<img src='http://i923.photobucket.com/albums/ad77/kihani_1996/Troll_Face_.png'/>
<img src='http://i923.photobucket.com/albums/ad77/kihani_1996/Troll_Face_.png'/>
</div>
</body>
</html>
And save it with an understandable name ending with .html [name].html and save type as All Files - Make sure to save the file with encoding UTF-8. Just make the necessary changes and upload it to a server and link it.
Repeat the steps for more other HTML files with different images in it.