I am trying to figure out how to do some HTML. Basically what I want is: if the user clicks on "coupon" a section of the page displays it. But only if it is clicked on. I have no idea where to look for this or what the name of what I'm trying to do is. Can someone point me in the right direction? I have tried the <a name=""> but that takes me to a spot that is already there.
On most cases, this requires JavaScript. But you can still do it without script with the exception that the section must be visible at all time. The actual contents would be placed in separate HTML pages (i.e.: files). Below is a simple example:
main.html file:
<HTML>
<BODY>
Content 1<BR />
Content 2<BR />
Content 3<BR />
<BR />
<IFRAME ID="section" WIDTH="800" HEIGHT="600" />
</BODY>
</HTML>
content1.html file:
<HTML>
<BODY>
This is content 1
</BODY>
</HTML>
content2.html file:
<HTML>
<BODY>
This is content 2
</BODY>
</HTML>
content3.html file:
<HTML>
<BODY>
This is content 3
</BODY>
</HTML>
The above main.html content section will be blank when the page is loaded. To set the initial content, change the IFRAME tag so it would be like this:
<IFRAME SRC="content1.tml" ID="section" WIDTH="800" HEIGHT="600" />
If you don't want to display the section when the page is loaded, you must use JavaScript like this example:
main.html file:
<HTML>
<BODY>
<SCRIPT>
function showSection() {
document.getElementById('section').style.display='';
}
</SCRIPT>
Content 1<BR />
Content 2<BR />
Content 3<BR />
<BR />
<IFRAME ID="section" WIDTH="800" HEIGHT="600" style="display:none" />
</BODY>
</HTML>
Related
I tried to add two local html file (as frame, inside one html code) in two different iframe, but its not working. Output showing the same html file in both frame.[I guess, screenshot will help to understand my problem]
Here my html code.
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>Frame1:</h1>
<iframe src="frame1.html" frameborder="1" width="100%" height="250px" name="frame1">
</iframe>
<br /><br /><br />
<h2>Frame 2:</h2>
<iframe src="frame2.html" frameborder="1" width="100%" height="250px" name="frame2">
</iframe>
</body>
</html>
frame1.html file:
<!DOCTYPE html>
<html>
<head></head>
<body>
<h2>This is a separate frame than others</h2>
</body>
</html>
frame2.html file:
<!DOCTYPE html>
<html>
<head></head>
<body>
<h3>Frame 3:</h3>
<iframe src="" frameborder="1" width="90%" height="180px">
</iframe>
</body>
</html>
Screenshot, describing my problem
I just try copy pasting your code in 3 different file in same folder, and i got what you need to have
Maybe this is a cache problem. Have you try to clear your cache browser?
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 currently have a peculiar problem with the IE11; it seems like it removes all my script tags in the body tag.
For instance I receive the following HTML from the server:
<html>
<head>
<title></title>
<script type="text/javascript" src="somehost.com/somescript.js"></script>
</head>
<body>
<div>
<!--some content here-->
</div>
<div>
<!--some content here-->
</div>
<script type="text/template" class="someclass">
<div>
<!--some dynamic content here-->
</div>
</script>
</body>
</html>
The rendered result:
<html>
<head>
<title></title>
<script type="text/javascript" src="somehost.com/somescript.js"></script>
</head>
<body>
<div>
<!--some content here-->
</div>
<div>
<!--some content here-->
</div>
</body>
</html>
My use-case is the following:
I have an image with clickable areas. Each area opens a lightbox on click, which has its html provided from script tags in the body since it is dynamic content from the server. I am using jquery to query the corresponding script tag with the proper html. It works properly in Firefox and Chrome, only the IE11 is giving me a headache by removing the script tags.
What am I missing? Why is IE11 removing script tags from the body? Is there a security setting to configure this behavior?
I am working with frames for the first time. Here is
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<frameset rows="20%,*">
<frame name="top" src="top.html" name="topmenu" />
<frame name="main" src="content.html" name="content" />
<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>
</frameset>
</html>
top.html
<html>
<head></head>
<body>
<div id="container">
<!-- begin navigation -->
<nav id="navigation">
<ul>
<li>Contact</li>
</ul>
</nav>
<!-- end navigation -->
</div>
</body>
</html>
content.html
<html>
<head></head>
<body>
Some Content
</body>
<html>
contact.html
<html>
<head></head>
<body>
Contact page
</body>
<html>
With this, the output is as under
Now when I click on the Contact link, instead of displaying the content in the content.html, it opens in a new tab as under
What is the mistake I am making. I believe there is some problem from my side in choosing the proper target.
Frames are not supported in HTML5 ^, it is deprecated, and to get it working the <!DOCTYPE> must be set to either HTML Frameset DTD or XHTML Frameset DTD.
If you check the HTML setting in this jsFiddle you'll see that I had set the DOCTYPE to "HTML 4.01 Frameset" in order to make it works, as in this image:
** Also Note that you have used the name attribute twice in each frame tag and there should be only one!
<frame name="top" src="top.html" name="topmenu" />
<frame name="main" src="content.html" name="content" />
^ Sources:
https://developer.mozilla.org/en/docs/Web/HTML/Element/frame
http://www.w3schools.com/tags/tag_frame.asp
I have no idea how to add an image in Google Search.
I just want to add the image of the page in Google Search.
<body>
<div>
<img height="180" src="http://2.bp.blogspot.com/-ARWw3b8l8RI/VQ_gW2mIHtI/AAAAAAAABQc/tuzJvua7o5Q/s1600/Bisan%2BAsa%2BKo.jpg" width="320" />
</div
</body>
You must use the following code:
Method 1
<meta itemprop="image primaryImageOfPage" content="e.g./pic.jpg" />
Method 2
<body>
<div itemscope itemtype="https://schema.org/WebPage">
<img src="e.g./pic.jpg" itemprop="primaryImageOfPage" />
</div>
</body>
Also referer to:
https://schema.org/docs/gs.html
https://schema.org/primaryImageOfPage