I am new to HTML and have been reverse engineering code to suit my own needs for developing an updated internal website for my work.
Currently I have my code linking to different .htm pages that simulate being on the same page. Obviously this is entirely too tedious to change if I need to add or change documents.
I know that I can change the source for an iframe, but every solution I have seen doesn't work for me. I'm so inexperienced I don't even know where to start. I've tried the onclick function, but it just breaks my buttons and does nothing beyond that.
Any help is appreciated.
Here is my current code:
<!DOCTYPE html>
<!---Version: 2.x FOUNDATION--->
<html>
<head>
<title align="center">MainPage</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.dropdown {
top: 7px;
position: center;
display: inline-block;
}
.dropdown-menu {
background-color: white;
color: black;
padding: 12px;
font-size: 14px;
border: none;
left: -100%;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
.navbar {
background-color: #C0C0C0;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
border-bottom: 0px;
}
/* Links inside the navbar */
.navbar a {
float: left;
position: center;
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change background on mouse-over */
.navbar a:hover {
background: #ddd;
color: black;
}
/* Main content */
.main {
margin-top: 59px; /* Add a top margin to avoid content overlay */
}
iframe {
display: block;
border-style:none;
}
</style>
</head>
<body>
<!---Creates a Navbar at the top of the screen. Will scroll with site if content of the "Main" section is long enough.--->
<div class="navbar">
<p align="center" style="font-size:100%;"><b>Main Page</b></p> <!---Creates a "button" that links to the main page.--->
<div class="dropdown"> <!---The start of the buttons and drop down menus inside the Navbar.--->
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">On Air</a>
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="button1.htm">Example1</a></li>
<li class="dropdown-submenu"><!---Creates a submenu inside of the parent menu.--->
<a class= "test" tabindex="-1" href="#">Weather<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex"-1" href="submenuButton1.htm">Example 2</a><li>
<div class="main"> <!---Creates the Main section of the page that the navabar sits over.--->
<p align="center">Welcome to the new and improved sampleURL.</p>
<!---Creates an iframe that displays the sampleURL.--->
<p align="center"><iframe name="mainframe" width="100%" height="770" src="sampleURL.htm?wmode=transparent" frameborder="0" allowfullscreen wmode="transparent"></iframe></p>
</div>
</a>
<script><!---A script that allows the submenu functions to work properly.--->
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
Set a custom class to each tag that changes the iframe like this:
<a class="iframe-change" tabindex"-1" href="submenuButton1.htm">Example 2</a>
Now, catch the click event with this javascript script:
$(".iframe-change").on("click", function(event) {
event.preventDefault(); // Prevents the <a> event
$("[name=mainframe]").attr("src", $(this).attr("href")); // Changes the iframe "src" property to the url setted in the clicked <a>
});
Related
When I try to size down my desktop screen navigation size of 1440px(90em) to any lower width screen, my navigation bar links start dropping off the screen. I have tried using some media query combinations, but nothing to show for it.I haven't got much experience with frontend, so I am a little bit thin on this side. Any long-term fixes to this one?Any hint on this one will be highly appreciated.
HTML header code:
<!--header-->
<header>
<nav class="nav__bar">
<a href="#" class="logo">
<img src="./images/logo.svg" alt="Sunnyside logo">
</a>
<ul class="nav__links">
<li class="nav__item">
About
</li>
<li class="nav__item">
Services
</li>
<li class="nav__item">
Project
</li>
Contact
</ul>
<img src="./images/icon-hamburger.svg" alt="toggle menu icon" class="toggle__menu">
</nav>
</header>
CSS header styles:
header {
height: 5em;
position: absolute;
left: 0;
right: 0;
}
.nav__bar {
height: 100%;
width: 90em;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
flex: 1 1 auto;
padding: 0 2em;
}
.nav__links {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
list-style: none;
}
.nav__item {
margin: 1em;
}
.nav__link {
text-decoration: none;
font-size: 1.125em;
color: hsl(0, 0%, 100%);
font-family: 'Barlow', sans-serif;
transition: all 350ms ease-in-out;
}
.nav__link:hover {
color: hsl(232, 10%, 55%);
}
.toggle__menu {
cursor: pointer;
display: none;
}
In your example code, you set the color of the link text to white... it's white on white. But that's not fully the problem... you should also remove width:90em from the .nav_bar... it's unnecessary. see this codepen https://codepen.io/aequalsb/pen/jOmyJNp
Just simply allow the <nav> to "be itself"... which is a block level element and naturally attempts to stretch out to fit available width.
padding in CSS Sizes the margin inside a button or element. Try using margin: (how many 'px' it's going off the screen); and I've had this problem before:
SOLUTION 1:
use margin-*left or top*: *px is going off screen*
<style>
#button {
width: 100px; /* the width of the button */
position: absolute;
left: 50%; /* always 50% when centering */
margin-left: -50px; /* minus half the size of the element */
}
</style>
<button id="button">Center of page</button>
SOLUTION 2
i've had this problem before, and in best situations, use position: absolute instead of relative if you are positioning the element.
<head>
<style>
.background {
position: relative;
}
.overlap {
position: absolute;
left: 30px;
}
</style>
</head>
</style>
</head>
<body>
<!-- background-element -->
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b4/Circle_Rufous_Solid.svg/1200px-Circle_Rufous_Solid.svg.png" class="background" width="10.5%" />
<!-- Overlap element -->
<img src="https://cdn.onlinewebfonts.com/svg/img_24930.png" class="overlap" width="10%" />
</body>
SOLUTION 3
if none of the above works, consider using javascript: device tester command and redirect to an error page with unsupported devices.
This example will detect a handful of mobile-devices, and if so, it'll redirect to 𝘩𝘵𝘵𝘱://𝘨𝘰𝘰𝘨𝘭𝘦.𝘤𝘰𝘮
<script>
if( /Android|webOS|iPhone|iPad|Mahc|Macintosh|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
window.location.href = "http://google.com";
} else {
}
</script>
NOTE: if there is big problem you cannot solve, and none of these work, its best to do research or find some articles to find your answer. Then consider using stackoverflow.
I'm new to HTML and CSS, and my first website is about Python programs, that the user can write into the editbox and then save it as Python file ( .py ). Right now I only created a navigation bar, editbox and also a Python icon.
I have some problems with my code, my Python icon is under the navigation bar and I can't see it, also, my navigation bar is not all over the screen, in the left side of the screen, I can see some space, and my last problem is with my editbox, I can only write from the middle and not from the beginning.
How can I set my Icon to be on top of the navigation bar ?
How can I modify the size of my navigation bar and set it all over the screen ?
How can I write from the beginning and not from the center in my editbox ?
HTML:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="description" content="This is an awesome website">
<title>Make Python - Online Python Editor</title>
<style>
body {
background-color: lightslategray
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0px;
width: 100%;
}
li {
float: left;
}
.text {
display: block;
color: white;
text-align: center;
padding: 16px 18px;
background-color: teal;
text-decoration: none;
}
li a:hover {
background-color: black;
}
</style>
</head>
<body>
<a title="Main Page" href=""> <!-- Main Page Link -->
<img style="border: 0px; width: 50px; height: 50px;" src="python.png" alt="Python Image">
</a>
<ul>
<li><a class="text" href="">Home</a></li>
<li><a class="text" href="">About</a></li>
<li><a class="text" href="">Contact</a></li>
</ul>
<form>
<input type="text" style="width: 1500px; height: 750px;">
</form>
</body>
</html>
Use z-index: 1; to place the img tag on top of the ul tag.
Right now your navbar is stretched to all of your page width. To use all of your
page width. I guess you want your navbar links to spread within it.
Use display: flex; and justify-content: space-between for ul to
achieve this.
Use text-align: left; to write from the beginning.
I have a footer menu but the issue is that everytime i try to hover on the menu it goes away... it shows up fine when i hover over the link but goes away when I try to hover on the menu item. How can I fix this? I tried using padding but didn't work.
.footer-links {
display: inline-block;
font-size: 1.8rem;
padding: 0 0 0 10px;
cursor: pointer;
}
.wrapper {
position: fixed;
left: 0;
bottom: 0;
padding: 0;
}
.footer-links:hover+.drop-up {
display: block;
}
.drop-up {
top: auto;
bottom: 100% !important;
left: auto;
right: 0;
padding: 5px 0;
}
.drop-up::after {
border-top: 6px solid #FFFFFF;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
content: "";
display: inline-block;
left: 45%;
position: absolute;
bottom: -6px;
}
.drop-up li {
padding: 10px;
}
<div class="wrapper">
<div class="footer-links">+Links</div>
<ul class="dropdown-menu drop-up" role="menu">
<li>Test</li>
</ul>
</div>
JSFiddle Demo
UPDATE:
.wrapper:hover + .drop-up {
display: block;
}
Referring to your specific example, you only display:block your .drop-up when .footer-links is hovered:
.footer-links:hover+.drop-up {
display: block;
}
You probably want to also display it when .drop-up is hovered:
.footer-links:hover+.drop-up,.drop-up:hover {
display: block;
}
Note this is a very poor design decision and it will break if/when there is as much as 1px distance between them. The way to go here is to have a wrapper around both and trigger the menu open on hover state of the wrapper (which extends to both and allows space between them). Another popular option is to add a class to open the menu and remove it after a short timeout from leaving the opener or the menu (javascript).
Another rather fragile solution is to use transform delays (pure CSS solution, however, it's not what i'd call solid code).
Leaving all that aside, it appears you're trying to use Bootstrap.
First of all, do not use Bootstrap v3.0.0! If you want to use v3, use the latest available version for v3 (v3.3.7). It's the same as v3.0.0, without the bugs discovered after it was launched.
Also, stick to their markup (html) even if it looks bloated. Everything is there for a reason. Remove some of it and your dropdown will stop working on some devices or on some responsiveness interval.
Here's a fully working example:
$('footer .dropup').on('mouseenter', function() {
$(this).addClass('open')
}).on('mouseleave', function(e) {
var du = $(e.target).closest('.open');
setTimeout(function() {
if (du.is('.open') && !du.is(':hover')) {
du.removeClass('open')
}
}, 321)
})
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
main {
flex-grow: 1;
}
footer {
min-height: 60px;
line-height: 60px;
background-color: #f5f5f5;
}
footer .dropup {
display: inline-block;
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<main role="main" class="container"></main>
<footer class="footer">
<div class="container">
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropup
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
</div>
</footer>
You don't need the custom CSS (I added it for the sticky footer). The jQuery is added to make it open on hover. If you want the default behavior (open on click, don't use the js):
This is the code I'm working with
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Place Bid</title>
<!-- Bootstrap -->
<link href="../stylesheets/bootstrap.min.css" rel="stylesheet">
<link href="popover.css" rel="stylesheet">
</head>
<body>
<div class="container">
<ul class="list-unstyled">
<button class ="bidpopover"><a data-placement="bottom" data-toggle="popover" data-title="Place Bid" data-container="body" type="button" data-html="true" href="#" id="bid">Place Bid</a></button>
<div id="popover-content" class="hide">
<form class="form-inline" role="form">
<div class="form-group">
<div class="input-group" type ="wage">
<span class="input-group-addon">$</span>
<input type="text" class="form-control"/>
</div>
<br><br>
<button type="submit" class="btn btn-primary">Submit</button>
<button type="cancel" class="btn btn-primary">Cancel</button>
</div>
</form>
</div>
</ul>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<!-- Popover UI functionalities-->
<script src="popover.js"></script>
</body>
</html>
CSS
.grey-box /* background of popover box*/
{
background-color: gray;
height: 200px;
margin-bottom: 10px;
font-size: 2em;
text-align: center;
padding: 80px;
}
.form-control { /* popover text field*/
width:120px;
}
.popover { /* popover responsiveness*/
max-width:300px;
}
button[type="submit"]{ /* Submit button */
border: 0;
padding: 8px;
background: #45AD00;
color: white;
border-radius: 5px;
margin-left: 20px;
margin-right: 30px;
}
button[type="cancel"]{ /* Cancel button */
border: 0;
padding: 8px;
background: #FC3838;
color: white;
border-radius: 5px;
margin-right: 20px;
}
.bidpopover{ /* Place Bid button*/
margin-top: 50px;
padding: 6px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
background-color: white;
border: 2px solid #4CAF50;
border-radius: 5px;
}
.bidpopover:hover { /* hovering over "Place Bid" button */
background-color: #4CAF50;
color: white;
}
ANGULAR.JS*
$( function() /* popover action */
{
$("[data-toggle=popover]").popover({
html: true,
content: function() {
return $('#popover-content').html();
}
});
} );
$('body').on('click', function (e) { /* closes popover when clicked outside of it */
//only buttons
if ($(e.target).data('toggle') !== 'popover'
&& $(e.target).parents('.popover.in').length === 0) {
$('[data-toggle="popover"]').popover('hide');
}
});
I ran it through the browser and the popover would only function if the mouse click was done above the popover box. Also on a side note, are HTML buttons capable of functioning if clicked anywhere on the button rather than just the button label? My "Place Bid" button would only open the popover if the mouse click happens specifically in the middle area where the button label is.
First of all, it's not recommended to place <a> tags inside <button>s.
I transferred the popover functionality to the <button>. There were quite a few other minor issues, some related to HTML markup, some to CSS, which I cleaned and prefixed.
I also fixed a logic error in your jQuery code, which was preventing the popover from opening on first click after it had been closed with a click outside the popover.
And I colored the popover arrow same as the background color of the popover header (I never understood why it's not default, since the popover opening on bottom will always have the arrow adjacent to its header.)
jsFiddle
Cheers!
I'd like to add a png frame over a kwicks image slider, but when I do, I lose the interactivity.
How can I add a png frame over an element without losing the interactivity of the element below?
You can see the example here: www.jujumamablog.com/jujumama/dev.html
Below is the code for the dev page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<title>Kwicks Examples: Example 1</title>
<script src="http://jmar777.googlecode.com/svn/trunk/js/jquery-1.2.6.js" type="text/javascript"></script>
<script src="http://jmar777.googlecode.com/svn/trunk/js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="http://kwicks.googlecode.com/svn/branches/v1.5.1/Kwicks/jquery.kwicks-1.5.1.pack.js" type="text/javascript"></script>
<style type="text/css">
/* defaults for all examples */
.kwicks {
list-style: none;
position: relative;
margin: 5px 0;
padding: 0;
}
.kwicks li{
display: block;
overflow: hidden;
padding: 0;
cursor: pointer;
}
/* example 1 */
#example1 .kwicks li{
float: left;
width: 96px;
height: 200px;
margin-right: 2px;
}
#example1 #kwick1 {
background-color: #53b388;
}
#example1 #kwick2 {
background-color: #5a69a9;
}
#example1 #kwick3 {
background-color: #c26468;
}
#example1 #kwick4 {
background-color: #bf7cc7;
}
#example1 #kwick5 {
background-color: #bf7cc7;
margin-right: none;
}
#sliderFrame{
background: transparent url('sliderFrame.png') no-repeat scroll 0 0;
display: block;
height: 206px;
position: absolute;
// top: 150px;
width: 504px;
z-index: 99;
margin-top: -4px;
}
</style>
<script type="text/javascript">
$().ready(function() {
$('.kwicks').kwicks({
max : 205,
spacing : 5
});
});
</script>
</head>
<body>
<div id="example1">
<div id="sliderFrame"></div> <!-- This blocks ineteractivity -->
<ul class="kwicks">
<li id="kwick1"></li>
<li id="kwick2"></li>
<li id="kwick3"></li>
<li id="kwick4"></li>
<li id="kwick5"></li>
</ul>
</div>
<div style="clear:both;"></div>
<div id="example1">
<ul class="kwicks">
<li id="kwick1"></li>
<li id="kwick2"></li>
<li id="kwick3"></li>
<li id="kwick4"></li>
<li id="kwick5"></li>
</ul>
</div>
<div style="clear:both;"></div>
</body>
</html>
Thanks in advance
Unfortunately using z-index to 'layer' elements will cause the below elements to become non-interactive, but they are still obviously visible.
Therefore, there's two options here:
JavaScript - much like the coloured boxes below (layer 1), place a further element (layer 3) over the 'rounded corners' image (layer 2) but making the background-color: transparent for those interactable boxes, then referencing the JavaScript to move the 1st layer boxes as well as the 3rd layer boxes.
CSS - slice the rounded corner image to be used within those interactive boxes, and use them as background images. This would be a fair amount of work, trial and error to get it right but would mean no extra javascript or messing around with z-index.
Hope that helps, and doesn't confuse matters further :)
You can't place one element over another and retain the lower-level's interactivity. At least, not without using Javascript; and I can't think of a plugin or script that achieves what you want.
Could you use the image as some form of background for the element for which you want to retain the functionality?