I have an HTML webpage with a specialized purpose. However, I also have a HTML page with a generic set of actions used elsewhere in my site/app.
Specific Page
<html>
<head><title>Specific Page</title></head>
<body>
<h1>My Specific Action</h1>
<div id="NameAction">
<!-- Action HTML goes here... -->
</div>
</body>
</html>
Generic Action
<html>
<body>
Please tell me your name...
<input id="NameText" type="text" size="50" />
<input id="NameSubmit" type="submit" />
</body>
</html>
The question is, I would like to inject the Generic Action HTML into the NameAction div in the Specific Page. What are some ways I would go about doing this?
Use an iframe
<html>
<head><title>Specific Page</title></head>
<body>
<h1>My Specific Action</h1>
<div id="NameAction">
<iframe src="Path-to-generic-html" />
</div>
</body>
</html>
You could use an iframe, which is a way to embed one html document into another, however this makes it difficult for the two html fragments to interact on the front end (Javascript, etc.). Depending on what templating engine you're using (jsp, php, asp) you should be able to include html fragment into a page as follows (server side include):
Generic Action Fragment
Please tell me your name...
<input id="NameText" type="text" size="50" />
<input id="NameSubmit" type="submit" />
Specific Page
<html>
<head><title>Specific Page</title></head>
<body>
<h1>My Specific Action</h1>
<div id="NameAction">
<% include generic action fragment here using engine specific code %>
</div>
</body>
</html>
Related
I'm trying to use the jquery css stylesheet, but I can't seem to get it to format anything at all. I'm using the live preview extension in VSCode, and the css is from the jquery website.
<!DOCTYPE html>
<html>
<head>
<title>Physics Simulator App</title>
<link rel="stylesheet" href="css\jquery.mobile-1.4.5.min.css">
<script src="scripts\jquery-3.5.1.min.js"> </script>
<script src="scripts\jquery.mobile-1.4.5.min.js"> </script>
<script type='text/javascript' src='scripts\Week 2 homework.js'> </script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div data-role="page">
<div data-role="navbar">
<ul>
<li> Information </li>
<li> Interface </li>
</ul>
</div>
<div data-role="header">Binary Operators Demo</div>
<div data-role="content">
<label for="input">A</label>
<input type="checkbox" name="inputA" id="inputA">
<br />
<label for="input">B</label>
<input type="checkbox" name="inputB" id="inputB">
<br />
<button onclick="AND();">AND</button>
<button onclick="OR();">OR</button>
<button onclick="NOT();">NOT</button>
<button onclick="XOR();">XOR</button>
</div>
<table id="data">
<tr>
<td>Result: </td>
<td id="resultA"></td>
</tr>
</table>
<div data-role="footer">
<small>binary operations demo app</small>
</div>
</div>
</body>
</html>
I don't think I'm missing anything in terms of brackets, and the file paths work for my own css files. I've tried adding 'data-theme="a"' to my page bracket, but nada. I just get this.
result
Is it a version issue or?
Friend, I may have misunderstood you for not mastering English very well. But as I understand it, your problem is with jquery.mobile.css?
Try using the CDN. I copied your code and replaced the with the CDN (I didn't find this Week 2 homework.js).
Replace the with the CDN and do this test:
Insert this code block:
<div class = "ui-grid-d">
<div class = "ui-block-a">
button <br>
<span> any info </span>
</div>
</div>
It uses the style of jquery.mobile.css, if it works the problem could be in your import of the files.
Two tips, avoid spaces in the file names, (Week 2, it could be Week_2_homework), and in the <label for = ""> do not point "input", point the name you gave to the input or the id.
If I was wrong about your problem, answer that I try to help you.
Reggards
MY SERVER IS TOO BASIC TO SUPPORT PHP/JAVASCRIPT, ANY SUGGESTIONS?
I have a HTML website with multiple pages. I am using an identical menu on all pages and when I add a page I have to each page and edit the code.
I am wondering is there a way of adding a menu page that can be called?
I am using CSS/HTML is it possible to do anything to help? I have researched a bit and I think it involves PHP, but can PHP be used in conjuncion with CSS/HTML?
You can have the code for your menu in a separate html and call it in all your other html files
<html>
<head>
<title>test page</title>
<script src="http://code.jquery.com/jquery-3.0.0.min.js"></script>
</head>
<body>
<div id="header">
<div id="menu">
</div>
Rest of the Header Content
</div>
<br />
<div id="content">
Main Content
</div>
<br />
<div id="footer">
Footer Content
</div>
<script>
$("#menu").load("menu.html");
</script>
</body>
</html>
You have to use php to be able to do that.
Do 2 separate files, one will be your index.php and the other menu.php
To include menu.php you have to add :
<?php include '../elements/menu.php'; ?>
in your index.php.
All your other elements still can be coded in HTML even if your new extension is .php
You include this menu on all your website pages and if you want to add a page, you just have to add the link in menu.php and it will appear everywhere.
just use #Html.Render("pagename.html");
How I'm trying to create a survey and out the answers to a text or xml file.
is that possible in HTML?
<html>
<head>
<title>Testing the Survey Application</title>
</head>
<body bgcolor="#E6E6FA">
<font color=black size=+3>Modifying Sentiment</font>
<hr>
Add positive adjective:
<img Adjective src="http://findicons.com/files/icons/2776/android_icons/96/ic_question_mark.png" alt="question" title="Adjective: is a word naming an attribute of a noun, such as sweet, red, or technical."
width=20 />
<br>
<textarea cols=40 rows=3 name=textBox1></textarea>
<p>
<hr>
<input type=submit value=Submit>
<input type=reset value=Clear>
<br>
</form>
</body>
</html>
HTML is a markup language. It is used to describe the elements of a web page.
If you want functionality, such as submitting and processing forms, for example. You will need to add a server-side language, such as Python, PHP, Ruby, among many others.
I'm probably thinking about this 'oldschool' but what am I missing?
I am writing an HTML5 app and using JQuery mobile. In the top left I have a menu button that slides out the menu panel. Great. Now I want multiple pages in the app... Ideally, I'd like to use a multipage HTML file, but I can't make the menu common, and if I update the menu, I have to edit it in every 'page' - not good.
I then found a couple links about $.mobile.loadPage(), for example this one and this one, but I can't get anything to work. The manual page doesn't help me either, although it looks like there is an iframe in their example - which I don't really want either.
In the example below, I get the alert so the load should have taken place, but the content has not updated and there are no updates in the java console.
My main page is below, but the 2nd page I'm trying to load has been various combinations of a full page with html tags, to just the raw content to get replaced, then I found some place that said it has to be wrapped in a page div, so this is where I stopped:
<div data-role="page">
<div data-role="header">
<h1>MyApp</h1>
</div>
<div data-role="content">
<center>
<p>This is page 2. Click me</p>
</center>
</div>
</div>
Here is my demo code:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script>
function handlePageLoaded() {
$('#loadPage2').on("click",function(){
$.mobile.loadPage("pages/page2.php", {pageContainer: $('#main_content')});
// Tried these as well:
//$.mobile.loadPage("pages/page2.php");
//$('#main_content').load("pages/page2.php");
alert ("#loadPage2.onClick()");
return false;
});
};
$(document).ready(handlePageLoaded);
</script>
<title>MyApp</title>
</head>
<body>
<div data-role="page" id="application">
<div data-role="panel" id="menu" data-display="overlay">
<center>
Close<br />
<a id="loadPage2" href="pages/page2.php" data-role="button" data-inline="true">Page 2</a><br />
</center>
</div><!-- /panel -->
<div data-role="header">
<h1>MyApp</h1>
Me
</div>
<div id="main_content" data-role="content">
<center>
<p>This is the landing page.</p>
</center>
</div>
<div data-role="footer"><span class="ui-title" /></div>
</div>
</body>
</html>
I have also looked at using a standard HTML5 multipage jquery mobile app and extracting out the menu components writing the outlines of the menu in each page then incuding the common menu components in PHP, and this is pretty much as close as I got, but I'd rather not trasition the whole page if I can help it, but that's no biggy, the main problem with this approach is that I need PHP to do the include, and I'd rather have a native HTML5 app that can be served on any web server.
So my question again, is what am I missing? or how can I change my thinking to adapt to this new-fangled stuff?
you can use $.get to get common header
$.get('header.html', {}, function(response){
$('div#nav').append(response);
});
it will load common header in this div
<div id="nav" class="navcontain">
</div
i am using html to create a page. but the problem i am facing is i am not geeting the image. my code is as:
<html>
<head runat="server">
<title>Untitled Page</title>
</head>
<body style = " background:#FFA500">
<form id="form1" runat="server">
<div>
<h1>
header_picture
</h1>
<img src="C:/Documents and Settings/All Users/Documents/My Pictures/Sample Pictures/Water lilies.jpg" />
</div>
<div>
<h1>
here comes the content
</h1>
</div>
<div>
<h2>
footer_picture
</h2>
<img src="C:/Documents and Settings/All Users/Documents/My Pictures/Sample Pictures/Blue hills.jpg" />
</div>
</form>
</body>
</html>
but it is not showing me the images when i run this html file in browser..
please help me out..
is this possible to give image url on run time in <img src> tag in html file.. if yes how can we do that..
You should change C:/Documents and Settings/All Users/Documents/My Pictures/Sample Pictures/Water lilies.jpg to file:///C:/Documents and Settings/All Users/Documents/My Pictures/Sample Pictures/Water lilies.jpg and the same with your other URL too.
Referencing local files from a non-file:// location (even if it's localhost) is no longer possible in many modern browsers for security reasons.
Chrome for example will throw the following error in its console:
Not allowed to load local resource: file:///C:/path/to/filename
You would have to put the HTML file into a local folder (which is probably not what you want because you have server-side code in it) or move the images to a location that you can call through your web server.