I have an HTA that has this structure:
<html>
<head>
<!--head elements-->
</head>
<body>
<div id="toolbar">
<!--toolbar elements-->
</div>
<div id="mainframe">
<!--main frame elements-->
</div>
</body>
</html>
When I zoom (for example by holding the CTRL key down and scrolling), it changes the zoom in the whole document, including in the toolbar. I want it to only zoom in the main frame, and always leave the toolbar at 100% zoom. Is there a way to do this?
You can do like this:
<body onmousewheel="javascript:if(window.event.ctrlKey){return false}">
Related
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'm using the Bulma CSS Framework and I simply cannot get my site to be as responsive as their homepage.
The site is live. My < html > has the same font-size, and my dom structure is identical to bulma's main page. Yet mine looks awful on mobile.
Here's a snippet of my HTML page:
<html>
<body>
<section class="hero">
<div class="hero-body has-text-centered">
<div class="container">
<div>
<h1 class="title">Tiny Text!</h1>
</div>
</div>
</div>
</section>
</body>
</html>
<html class="route-index">
<body class="layout-default" style="zoom: 1;">
<section class="hero is-medium">
<div class="hero-body has-text-centered">
<div class="container">
<h1 class="title">Somehow big text?</h1>
</div>
</div>
</section>
</body>
</html>
Bulma's page:
My page:
You can test this through developer tools on chrome setting the viewport to mobile on both sites' main pages.
try adding this meta tag
<meta name="viewport" content="width=device-width, initial-scale=1">
This tells the browser to fit the page to the mobile screen, otherwise it gives you a 'desktop site' which is wider
So, I don't know how to explain this really well. My website has a banner (it's a picture) at the top and then a menu underneath the banner, and I want the menu and above to have a dark gray background, with the rest a really light grey background. How would I do this?
This is what my website layout currently looks like (excuse the horrible art):
This is what I want the website to look like: (notice the background colors)
<html>
<body>
<div style='background:#123'>
your banner
</div>
<div style='background:#567'>
your text
</div>
</body>
</html>
or
<html>
<head>
<link rel=stylesheet type="text/css" href="my.css">
</head>
<body>
<div class='banner'>
your banner
</div>
<div class='main'>
your text
</div>
</body>
</html>
and in my.css
.banner {background:#123}
.main {background:#456}
I am using animate.css but it don't seem to work in firefox. The code I am using is:
<html>
<head>
<link rel="stylesheet" href="animate.css"/>
</head>
<body>
<div class="rotateIn"> content</div>
</body>
</html>
I want this div to show rotate in effect when we load the page but it don't seem to work.
you have to use animated class if you want to show animations try this
<html>
<head>
<link rel="stylesheet" href="animate.css"/>
</head>
<body>
<div class="animated rotateIn"> content</div>
</body>
</html>
Long story short: http://jsfiddle.net/3ZLLm/
You MUST use the animated class provided.
So, to add further, it should be:
<div class="animated rotateIn"> content</div>