I am using a ul as a contextual menu in a php-file-listing application.
I recently added this piece of code to move the menu when the cursor is too close from the borders of the window, in order to prevent the menu to be drawn partially outside of the window.
if ((PosY + elm.outerHeight()) > $(window).height()) {
PosY = PosY - elm.outerHeight();
}
if ((PosX + elm.outerWidth()) > $(window).width()) {
PosX = PosX - elm.outerWidth();
}
But…
Sometimes the code works, and the menu is moved,
And sometimes it doesn't work, and the menu is displayed as below:
(Let's say it doesn't work like 1 out of 5 times)
I tried consoling the variables but they seem to be correct and I really don't understand why it is happening.
Here is a working snippet, where I managed to reproduce the problem.
(As it is an extract of my code, much of the CSS is missing but that's not important.)
// Global vars
var PosX = 0;
var PosY = 0;
// Mouse mouve
$(document).mousemove(function(e) {
PosX = e.pageX;
PosY = e.pageY;
return;
});
/*
CONTEXT MENU
*/
// Trigger action when the contexmenu is about to be shown
$(document).on("contextmenu", function(event) {
// Avoid the regular one
event.preventDefault();
});
// If the document is clicked somewhere
$(document).on("mousedown", function(e) {
// If the clicked element is not the menu
if ($(e.target).parents(".ContextMenu").length == 0) {
// Hide it
$(".ContextMenu").fadeOut(100);
}
});
// On context menu…
function ContextMenu(id) {
elm = $("#" + id);
/*
console.log("PosY:", PosY);
console.log("elm H:", elm.outerHeight());
console.log("win H:", $(window).height());
console.log("PosX:", PosX);
console.log("elm W:", elm.outerWidth());
console.log("win W:", $(window).width());
*/
// Moves menu if out of screen
if ((PosY + elm.outerHeight()) > $(window).height()) {
PosY = PosY - elm.outerHeight();
}
if ((PosX + elm.outerWidth()) > $(window).width()) {
PosX = PosX - elm.outerWidth();
}
// Hide and reopen the menu required
elm.fadeOut(100, function() {
elm.css({
"top": PosY,
"left": PosX
}).fadeIn(200);
});
//console.log("Context menu on: " + elm);
return false;
}
#charset "UTF-8";
* {
margin: 0;
padding: 0;
}
body {
font-size: 16px;
position: fixed;
color: #000;
}
p,
input,
label,
button,
a {
font-family: "Source Sans Pro", "Trebuchet MS", Helvetica, sans-serif;
display: inline-block;
cursor: inherit;
}
#InTable {
table-layout: fixed;
width: 100%;
border: 0;
border-collapse: collapse;
margin-bottom: 800px;
}
/* Scrollbar */
#Table::-webkit-scrollbar-track-piece {
background-color: #DDD;
}
#Table::-webkit-scrollbar-thumb {
background-color: #000;
}
thead th {
padding: 4px 0;
}
thead th i {
margin-left: 4px;
font-size: 14px !important;
color: #CCC;
}
thead th,
tbody tr {
cursor: pointer;
}
tbody td {
vertical-align: middle;
}
tbody td:first-of-type {
margin: 0 auto;
/*overflow: hidden; */
}
tbody td img {
vertical-align: middle;
height: 32px;
}
tbody tr:nth-of-type(odd) td {
background-color: #EEEEEE;
}
tbody tr:nth-of-type(even) td {
background-color: #DDDDDD;
}
#Table th,
#Table td {
position: relative;
}
#Table p {
padding-left: 4px;
}
.ContextMenu {
position: fixed;
display: none;
background: #f8f8f8;
border: 2px solid #888;
z-index: 2;
color: #333;
/* Smoothy color */
}
.ContextMenu div {
background: #e8e8e8;
height: 16px;
padding: 4px;
border-bottom: 1px solid #CCC;
}
.ContextMenu div:not(:first-child) {
border-top: 2px solid #AAA;
}
.ContextMenu li {
display: block;
height: 20px;
padding: 6px 24px 6px 8px;
cursor: pointer;
list-style-type: none;
transition: all .3s ease;
white-space: nowrap;
}
.ContextMenu img,
.ContextMenu i,
.ContextMenu span,
.ContextMenu p {
display: inline-block;
height: 20px;
vertical-align: middle;
}
.ContextMenu img,
.ContextMenu i,
.ContextMenu span {
width: 20px;
text-align: center;
margin-right: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style media="" data-href="https://use.fontawesome.com/releases/v5.0.6/css/all.css"></style>
<body class="tblr0 bg" id="DropBox" contenttype="text/html; charset=UTF-8" onload="" onresize="">
<div class="abs t40blr0" id="Content" style="top: 100px;">
<div class="abs tblr0 overflow-x-hidden overflow-y-auto" id="Table" style="opacity: 1;">
<table class="tblr0" id="InTable">
<thead class="bg-silver align-l">
<tr style="width: 100%;">
<th data-sort="int" id="Icos" style="width: 68px; min-width: 68px; max-width: 68px;"><p>Icon</p><i class="fa fa-sort"></i></th>
<th data-sort="string" id="Name" style="width: 291.333px;">
<p>Filename</p><i class="fa fa-sort"></i></th>
<th data-sort="string" id="Type" style="width: 218.5px;">
<p>Type</p><i class="fa fa-sort"></i></th>
</tr>
</thead>
<tbody>
<tr onclick="" oncontextmenu="ContextMenu('ContextMenu0');" style="width: 100%;">
<td data-sort-value="0" style="height: 64px;">
<div class="Icons" style="line-height: 64px; font-size: 60px;"></div>
</td>
<td style="height: 64px;">
<div class="Name">
<p>. <i>[Current]</i></p>
</div>
</td>
<td style="height: 64px;">
<p>< Current Directory ></p>
</td>
<td style="height: 64px;">
<ul class="ContextMenu" id="ContextMenu0">
<div onclick="context_menu_close(event);">
<p>Tools</p>
</div>
<li onclick=""><i class="fa fa-folder"></i>
<p>Create new Folder</p>
</li>
<li onclick=""><i class="fa fa-file"></i>
<p>Create new File</p>
</li>
<li onclick=""><i class="fa fa-upload"></i>
<p>Upload files in current folder</p>
</li>
<li onclick=""><i class="fa fa-download"></i>
<p>Download current folder as Zip</p>
</li>
</ul>
</td>
</tr>
<tr onclick="" oncontextmenu="ContextMenu('ContextMenu1');" style="width: 100%;">
<td data-sort-value="1" style="height: 64px;">
<div class="Icons" style="line-height: 64px; font-size: 60px;"></div>
</td>
<td style="height: 64px;">
<div class="Name pr4">
<p>Acces<span class="opac06"> </span></p>
</div>
</td>
<td style="height: 64px;">
<p>< Directory ></p>
</td>
<td style="height: 64px;">
<ul class="ContextMenu" id="ContextMenu1" style="top: 218px; left: 854.625px; display: none;">
<div onclick="context_menu_close(event);">
<p>Tools</p>
</div>
<li onclick=""><i class="fa fa-i-cursor"></i>
<p>Rename</p>
</li>
<li onclick=""><i class="far fa-arrow-alt-circle-right"></i>
<p>Move</p>
</li>
<li onclick=""><i class="far fa-copy"></i>
<p>Copy</p>
</li>
<li onclick=""><i class="far fa-trash-alt"></i>
<p>Delete</p>
</li>
<li onclick=""><i class="fa fa-download"></i>
<p>Download folder as Zip</p>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
Can someone enlighten me?
What is wrong with my code?
Thanks in advance.
I believe the problem lay around .fadeOut(100) and .fadeIn(200). Those are animations and as such, they run asynchronously regarding the rest of the code.
To be honest, I am not qualified to provide you with a thorough explanation as to why and HOW this was happening in your code. Basically: the process of updating posX and posY and the process of hiding and showing the menu were overlapping. Note that with your code as is, if you take your time (~1sec) between each click, the problem never occurs, whereas if you start clicking away repeatedly it breaks more and more often, just another hint that the animation's time is the source of the problem.
The solution: put updating posX and posY inside hiding and showing the menu. Specifically inside the callback after hiding the menu, before showing it again.
LET ME KNOW IF THE LEPRECHAUN RESURFACES!
// Global vars
var PosX = 0;
var PosY = 0;
// Mouse mouve
$(document).mousemove(function(e) {
PosX = e.pageX;
PosY = e.pageY;
return;
});
/*
CONTEXT MENU
*/
// Trigger action when the contexmenu is about to be shown
$(document).bind("contextmenu", function(event) {
// Avoid the regular one
event.preventDefault();
});
// If the document is clicked somewhere
$(document).bind("mousedown", function(e) {
// If the clicked element is not the menu
if ($(e.target).parents(".ContextMenu").length == 0) {
// Hide it
$(".ContextMenu").fadeOut(100);
}
});
// On context menu…
function ContextMenu(id) {
elm = $("#" + id);
/*
console.log("PosY:", PosY);
console.log("elm H:", elm.outerHeight());
console.log("win H:", $(window).height());
console.log("PosX:", PosX);
console.log("elm W:", elm.outerWidth());
console.log("win W:", $(window).width());
*/
// Hide and reopen the menu required
elm.fadeOut(100, function() {
// Moves menu if out of screen
if ((PosY + elm.outerHeight()) > $(window).height()) {
PosY = PosY - elm.outerHeight();
}
if ((PosX + elm.outerWidth()) > $(window).width()) {
PosX = PosX - elm.outerWidth();
}
elm.css({
"top": PosY,
"left": PosX
}).fadeIn(200);
});
return false;
}
#charset "UTF-8";
* {
margin: 0;
padding: 0;
}
body {
font-size: 16px;
position: fixed;
color: #000;
}
p,
input,
label,
button,
a {
font-family: "Source Sans Pro", "Trebuchet MS", Helvetica, sans-serif;
display: inline-block;
cursor: inherit;
}
#InTable {
table-layout: fixed;
width: 100%;
border: 0;
border-collapse: collapse;
margin-bottom: 800px;
}
/* Scrollbar */
#Table::-webkit-scrollbar-track-piece {
background-color: #DDD;
}
#Table::-webkit-scrollbar-thumb {
background-color: #000;
}
thead th {
padding: 4px 0;
}
thead th i {
margin-left: 4px;
font-size: 14px !important;
color: #CCC;
}
thead th,
tbody tr {
cursor: pointer;
}
tbody td {
vertical-align: middle;
}
tbody td:first-of-type {
margin: 0 auto;
/*overflow: hidden; */
}
tbody td img {
vertical-align: middle;
height: 32px;
}
tbody tr:nth-of-type(odd) td {
background-color: #EEEEEE;
}
tbody tr:nth-of-type(even) td {
background-color: #DDDDDD;
}
#Table th,
#Table td {
position: relative;
}
#Table p {
padding-left: 4px;
}
.ContextMenu {
position: fixed;
display: none;
background: #f8f8f8;
border: 2px solid #888;
z-index: 2;
color: #333;
/* Smoothy color */
}
.ContextMenu div {
background: #e8e8e8;
height: 16px;
padding: 4px;
border-bottom: 1px solid #CCC;
}
.ContextMenu div:not(:first-child) {
border-top: 2px solid #AAA;
}
.ContextMenu li {
display: block;
height: 20px;
padding: 6px 24px 6px 8px;
cursor: pointer;
list-style-type: none;
transition: all .3s ease;
white-space: nowrap;
}
.ContextMenu img,
.ContextMenu i,
.ContextMenu span,
.ContextMenu p {
display: inline-block;
height: 20px;
vertical-align: middle;
}
.ContextMenu img,
.ContextMenu i,
.ContextMenu span {
width: 20px;
text-align: center;
margin-right: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style media="" data-href="https://use.fontawesome.com/releases/v5.0.6/css/all.css"></style>
<body class="tblr0 bg" id="DropBox" contenttype="text/html; charset=UTF-8" onload="" onresize="">
<div class="abs t40blr0" id="Content" style="top: 100px;">
<div class="abs tblr0 overflow-x-hidden overflow-y-auto" id="Table" style="opacity: 1;">
<table class="tblr0" id="InTable">
<thead class="bg-silver align-l">
<tr style="width: 100%;">
<th data-sort="int" id="Icos" style="width: 68px; min-width: 68px; max-width: 68px;"><p>Icon</p><i class="fa fa-sort"></i></th>
<th data-sort="string" id="Name" style="width: 291.333px;">
<p>Filename</p><i class="fa fa-sort"></i></th>
<th data-sort="string" id="Type" style="width: 218.5px;">
<p>Type</p><i class="fa fa-sort"></i></th>
</tr>
</thead>
<tbody>
<tr onclick="" oncontextmenu="ContextMenu('ContextMenu0');" style="width: 100%;">
<td data-sort-value="0" style="height: 64px;">
<div class="Icons" style="line-height: 64px; font-size: 60px;"></div>
</td>
<td style="height: 64px;">
<div class="Name">
<p>. <i>[Current]</i></p>
</div>
</td>
<td style="height: 64px;">
<p>< Current Directory ></p>
</td>
<td style="height: 64px;">
<ul class="ContextMenu" id="ContextMenu0">
<div onclick="context_menu_close(event);">
<p>Tools</p>
</div>
<li onclick=""><i class="fa fa-folder"></i>
<p>Create new Folder</p>
</li>
<li onclick=""><i class="fa fa-file"></i>
<p>Create new File</p>
</li>
<li onclick=""><i class="fa fa-upload"></i>
<p>Upload files in current folder</p>
</li>
<li onclick=""><i class="fa fa-download"></i>
<p>Download current folder as Zip</p>
</li>
</ul>
</td>
</tr>
<tr onclick="" oncontextmenu="ContextMenu('ContextMenu1');" style="width: 100%;">
<td data-sort-value="1" style="height: 64px;">
<div class="Icons" style="line-height: 64px; font-size: 60px;"></div>
</td>
<td style="height: 64px;">
<div class="Name pr4">
<p>Acces<span class="opac06"> </span></p>
</div>
</td>
<td style="height: 64px;">
<p>< Directory ></p>
</td>
<td style="height: 64px;">
<ul class="ContextMenu" id="ContextMenu1" style="top: 218px; left: 854.625px; display: none;">
<div onclick="context_menu_close(event);">
<p>Tools</p>
</div>
<li onclick=""><i class="fa fa-i-cursor"></i>
<p>Rename</p>
</li>
<li onclick=""><i class="far fa-arrow-alt-circle-right"></i>
<p>Move</p>
</li>
<li onclick=""><i class="far fa-copy"></i>
<p>Copy</p>
</li>
<li onclick=""><i class="far fa-trash-alt"></i>
<p>Delete</p>
</li>
<li onclick=""><i class="fa fa-download"></i>
<p>Download folder as Zip</p>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
Related
I know there are lots of similar questions but I can't get it to work and hope you can help me.
I have a nested list of items. Mostly simple hrefs but some are links which should call a copy-to-clipboard function and display a success message in as span afterwards.
The message should be displayed above the link and centered. On a desktop with high resolution there is no problem. On mobile,unfortunately showing the span uses space and moves the hrefs + the position is anywhere but above and in the middle.
Using data-tooltip class templates didn't work for me because they normally use "hover". In my case the span should only be displayed after clicking the link and shouldn't mess up the other elements.
function CopyToClipboard(id) {
// do copy stuff here
// [...]
// showing tooltip
var span_element = document.getElementById(id).parentElement.querySelector('span');
if(span_element != null) {
span_element.style.display = "inline";
setTimeout( function() {
span_element.style.display = "none";
}, 2000);
}
}
body {
margin-left: 0px;
}
ul {
padding-left: 20px;
}
div.container {
margin: 10px;
width: 98%;
word-break: break-all;
}
.custom-tooltip {
padding: 4px;
background-color: grey;
color: #fff;
position: relative;
bottom: 2em;
right: 5em;
display: none;
}
<html lang="de" class=" heujtnrdy idc0_345">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=0.90">
<link rel="stylesheet" href="index_tmp.css">
<script type="text/javascript" src="index_tmp.js"></script>
</head>
<body>
<div class="container">
<ul>
<li>
<span>Layer 1</span>
<ul>
<li>
<span>Layer 2</span>
<ul>
<li>
<span>Layer 3</span>
<ul>
<li>
<div>
<table>
<tr>
<td><a id="uGzkLTVmLY" onclick="CopyToClipboard('uGzkLTVmLY');return false;" href="#">Short text to copy</a><span class="custom-tooltip">Copied!</span></td>
</tr>
</table>
</div>
</li>
<li>
<div>
<table>
<tr>
<td><a id="VF5DVP6tVv" onclick="CopyToClipboard('VF5DVP6tVv');return false;" href="#">Looooooooooooooooooong text to copy</a><span class="custom-tooltip">Copied!</span></td>
</tr>
</table>
</div>
</li>
<li>
<div>
<table>
<tr>
<td><a id="VF5DVP6tVv" onclick="CopyToClipboard('VF5DVP6tVv');return false;" href="#">Even loooooooooooooooooooooooooooooooooooooooooooooooooooooonger text to copy</a><span class="custom-tooltip">Copied!</span></td>
</tr>
</table>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
-- Update 05.02.2023 --
Here my modified CSS, based on granite's alternative solution. This looks like this:
.modal {
display: none;
position: fixed;
padding-top: 50%;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
text-align: center;
justify-content: center;
}
.modal-content {
background-color: grey;
border: 0.5px solid grey;
border-radius: 3px;
color: #fff;
text-align: center;
margin: 0 auto;
padding: 2px;
padding-left: 10px;
padding-right: 10px;
font-size: 1.0em;
font-family: monospace;
font-weight: 700;
bottom: 1em !important;
position: fixed;
}
As a secondary option (via modal):
Html: 2 lines code.
CSS: 7 extra lines code.
JS: 10 extra lines code.
Just need to get the JS CopyToClipboard to link up.
<button id="MBtn" id="VF5DVP6tVv" onclick="CopyToClipboard('VF5DVP6tVv');return false;">long text to copy</button>
<div id="Modal" class="modal"><div class="modal-content">Copied!</div></div>
.modal {
display: none;
position: fixed;
padding-top: 25%;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #eff;
text-align:center;
margin: 0 auto;
padding: 3px;
width:4em;
}
var modal = document.getElementById("Modal");
var btn = document.getElementById("MBtn");
btn.onclick = function() {
modal.style.display = "block";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
I'm a senior programmer but novice to javascript and CSS posibilities. Next is the description of what I have and what I want:
Layout
My folders:
Test_portal : contains the iNat_main.html file and 2 subfolders:
• iNat_files: contains html files to be loaded into “submenu” div
or “obs” div according to selection.
• iNat_images: contains images to be loaded within the html file that is loaded into the “obs” div according the selected “submenu” item.
Issues:
When I select a “menu” item it is loaded into the “submenu” div, but it doesn’t use the full area as shown in the layout. The scrollbars are too short.
When I select a “submenu” item it is loaded into an “obs” div, but
it is displayed in submenu area of the layout (left side of the page) instead in the obs area of the layout (right side of the page).
iNat_main.html
function load_menu(htmname){
document.getElementById("submenu").setAttribute("style","height:600px");
document.getElementById("submenu").innerHTML="<object type='text/html' data=" + htmname + "></object>";
}
function load_data(htmname){
document.getElementById("obs").setAttribute("style","height:600px");
document.getElementById("obs").innerHTML="<object type='text/html' data=" + htmname + "></object>";
}
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
header {
background-color: lightgreen;
padding: 2px;
text-align: center;
font-size: 8px;
color: black;
}
.inline-block-child {
float: left;
}
ul {
list-style-type: none;
text-align: right;
margin: 0;
padding: 0;
overflow: hidden;
background-color:yellow;
}
li {
float: right;
border-right: 2px solid #000;
}
li a {
display: block;
font-size: 20px;
padding: 20px;
}
.bggrey {
background-color: lightgrey;
overflow-x: scroll;
}
.bgdata {
background-color: cyan;
}
.float-container {
border: 3px solid #fff;
padding: 5px;
}
.float-child_l {
background-color: lightgrey;
width: 35%;
float: left;
padding: 5px;
border: 2px solid black;
}
.float-child_r {
width: 65%;
float: left;
padding: 5px;
border: 2px solid green;
}
</style>
<body>
<header role="banner">
<h1>My nature pictures</h1>
<h4> Origin=https://israel.inaturalist.org/observations?place_id=any&user_id=shmuelabinun&verifiable=any</h4>
</header>
<br>
<div id="menu">
<p dir="rtl"> Select what to show </p>
<ul>
<li><a href="#submenu" onclick=load_menu("./iNat_files/B_menu.html")>Birds</a></li>
<li><a href="#submenu" onclick=load_menu("./iNat_files/R_menu.html")>Reptiles</a></li>
</ul>
</div>
<section class='container'>
<div class='float-container'>
<div id ="submenu" class='float-child_l bggrey' width=40% scrollHeight="400px";>
<p><dir="rtl" style="center"> ID=SubMenue </p>
</div>
<div id="obs" class='float-child_r bgdata' width=58% >
<h2><text-align="right"> ID=obs for Data Selected </text-align></h2>
</div>
</div>
</section>
</body>
</html>
B_menu.html
function load_data(htmname){
document.getElementById("obs").setAttribute("style","height:600px");
document.getElementById("obs").innerHTML="<object type='text/html' data=" + htmname + "></object>";
}
<body>
<object>
<p align=center><b> List of Birds</p>
<br>
<div>
<div id ="submenu" width=40%>
<section>
<p align=center><b> Select item to display </p>
<ol>
<li> <a href="#obs" onclick=load_data("./BID125.html")>אנפית בקר = Bubulcus ibis</a></li>
<li> <a href="#obs" onclick=load_data("./BID64.html")>אנפת לילה = Nycticorax nycticorax</a></li>
<li> <a href="#obs" onclick=load_data("./BID124.html")>ברכיה = Anas platyrhynchos</a></li>
<li> <a href="#obs" onclick=load_data("./BID72.html")>צוצלת = Streptopelia senegalensis</a></li>
<li> <a href="#obs" onclick=load_data("./BID126.html")>שלדג גמדי = Alcedo atthis</a></li>
</ol>
</section>
<br>
<div id="obs" class='child inline-block-child bgdata' width=58% >
<h2><text-align="right"> ID=obs for Data Selected </text-align></h2>
</div>
</div>
</object>
</body>
BID125.html
<style>
* {
box-sizing: border-box;
}
[class*="col-"] {
border: 1px solid green;
}
.col-1 {width: 60%; padding: }
.col-2 {width: 40%; padding: }
.col-3 {width: 20.0%; padding: 0.5%;}
.zoomA {
width: 20.0%; padding: 0.5%;
height: auto;
transition: transform ease-in-out 0.3s;
}
.zoomA:hover {
transform: scale(5.0);
}
</style>
<body>
<p align=center><b> Selected item data</p>
<div id ="obs" width=65%>
<p align=center><b>Birds</p>
<br>
<colgroup><col width:"50.0%;"/><col width:"50.0%;"/></colgroup>
<table cellpadding="0" cellspacing="0" border="1px" style="width:100%;">
<tr>
<th align="left" class=col1>Bubulcus ibis</th>
<th align="right" class=col2>ציפורים - אנפית בקר</th>
</tr>
</table>
<p align="right" dir="rtl"> #125 אגמון החולה 08/11/2018 בדרגת-מחקר </p><br>
<table cellpadding="0" cellspacing="0" border="3px" style="width:70%;">
<colgroup><col width:"33.3%;"/><col width:"33.3%;"/><col width:"33.3%;"/></colgroup>
<tr>
<img src=../iNat_images/img125.jpg class="zoomA">
<img src=../iNat_images/img125_1.jpg class="zoomA">
</tr>
</table>
<br>
</div>
</body>
Two IBIS images
To load data like that you need to use Ajax. <object> is not intended for loading HTML like that (in an edge case <iframe> could be used, but I would not recommend that either).
Here is a basic example of how external HTML can be loaded into a <div>. I use the Fetch API for loading.
You can see that I'm using plain HTML in the HTML document and use JavaScript and eventlisteners to control what is going to happen.
The content of the document page1.html would just be the snippet of HTML need (so not body, head etc.).
var menu, content;
const loadhtml = href => {
fetch(href)
.then(response => response.text())
.then(html => {
content.innerHTML = html;
});
};
const onmenuclick = e => {
e.preventDefault();
if (e.target.nodeName == 'A') {
let href = e.target.attributes['href'].value;
loadhtml(href);
}
};
document.addEventListener('DOMContentLoaded', e => {
menu = document.getElementById('menu');
content = document.getElementById('content');
menu.addEventListener('click', onmenuclick);
});
<ul id="menu">
<li>Page 1</li>
<!--
here I'm replacing the reference to an external HTML document
with a data URL so that you can see how it works in this Stackoverflow snippet.
-->
<li>Page 2</li>
</ul>
<div id="content"></div>
Thanks to all contributors. With a local help, all issues were solved.
I had to install Microsoft Internet Information Services (IIS), edit the configuration file and launch it. Final working code is attached:
index.html -
function load_menu(htmname) {
fetch(htmname /*, options */)
.then((response) => response.text())
.then((html) => {
document.getElementById("submenu").innerHTML = html;
})
.catch((error) => {
console.warn(error);
});
}
function load_detailed_data(htmname) {
fetch(htmname /*, options */)
.then((response) => response.text())
.then((html) => {
document.getElementById("obs").innerHTML = html;
})
.catch((error) => {
console.warn(error);
});
}
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.top_banner {
background-color: lightgreen;
text-align: center;
}
.top_banner h1 {
font-size: xx-large;
}
.top_banner h4 {
font-size: smaller;
}
.inline-block-child {
float: left;
}
* {
box-sizing: border-box;
}
[class*="col-"] {
border: 1px solid green;
}
.zoomA {
width: 20.0%;
padding: 0.5%;
height: auto;
transition: transform ease-in-out 0.3s;
}
.zoomA:hover {
transform: scale(3.0);
}
ul {
list-style-type: none;
text-align: right;
margin: 0;
padding: 0;
overflow: hidden;
background-color: yellow;
}
.main_menu li {
float: right;
border-right: 2px solid #000;
}
.main_menu li a {
display: block;
font-size: 20px;
padding: 20px;
}
.submenu {
height:100%;
width:100%;
direction:rtl;
}
.submenu p {
padding-right:20px;
}
.submenu li {
width:100%;
direction:rtl;
}
.float-container {
border: 3px solid #fff;
padding: 5px;
}
.main_pane {
width:70%;
height:100%;
float: left;
background-color: cyan;
}
.menu_pane {
width:30%;
height:100%;
float: right;
background-color: lightgrey;
}
.details {
width:100%;
direction:rtl;
}
.details h2 {
padding-right:20px;
}
.details img {
width:25%;
}
</style>
<html lang="he">
<head>
<meta charset="utf-8">
<title>iNat_main_v2.html</title>
<body>
<div class="top_banner">
<h1>Mine nature pictures</h1>
<h4> Origin=https://israel.inaturalist.org/observations?place_id=any&user_id=shmuelabinun&verifiable=any</h4>
</div>
<div id="menu" class="main_menu">
<ul>
<li><a href="#submenu" onclick=load_menu("./iNat_files/P_menu.html")>Plants</a></li>
<li><a href="#submenu" onclick=load_menu("./iNat_files/B_menu.html")>Birds</a></li>
<li><a href="#submenu" onclick=load_menu("./iNat_files/M_menu.html")>Mammals</a></li>
</ul>
</div>
<div class='float-container'>
<div class='main_pane' id="obs">
<h2>ID=obs for Data Selected</h2>
</div>
<div class='menu_pane' id="submenu">
<p>ID=SubMenue </p>
</div>
</div>
</body>
</html>
B_menu.html - Birds menu
<div class="submenu">
<p> Birds to select </p>
<ol>
<li><a href="#obs" onclick=load_detailed_data("./iNat_files/BID125.html")>אנפית בקר = Bubulcus ibis</a></li>
<li><a href="#obs" onclick=load_detailed_data("./iNat_files/BID64.html")>אנפת לילה = Nycticorax nycticorax</a>
</li>
<li><a href="#obs" onclick=load_detailed_data("./iNat_files/BID124.html")>ברכיה = Anas platyrhynchos</a></li>
<li><a href="#obs" onclick=load_detailed_data("./iNat_files/BID68.html")>דרור הבית = Passer domesticus</a>
</li>
<li><a href="#obs" onclick=load_detailed_data("./iNat_files/BID71.html")>דררה קרמר = Psittacula krameri</a>
</li>
<li><a href="#obs" onclick=load_detailed_data("./iNat_files/BID131.html")>חסידה לבנה = Ciconia ciconia</a>
</li>
</ol>
</div>
BID25.html - Ibis data to display:
<div class="details">
<h2> Birds </h2>
<h2> Bubulcus ibis - אנפית בקר </h2>
<img class="zoomA" src="./iNat_images/img125.jpg"/>
<img class="zoomA" src="./iNat_images/img125_1.jpg"/>
</div>
4)Images used to display the Ibis data:
img125.jpg
img125_1.jpg
As I have issue with URL Structure within the tabs. if I have selected the tab-2 and the url is changed to https://example.com/#tab-2 and for tab-3 https://example.com/#tab-3 and so on.
The issue is if I have entered in this https://example.com/#tab-4 or any other, in search bar, it always shows me https://example.com/#tab-1 as current.
But, I would like to do https://example.com/#tab-4 the current shows me tab-4 selected. How would I implement in my current code?
$('.projects_select').click(function(){
var tab_id = $(this).attr('data-tab');
$('.projects_select').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
// window.location.href = window.location.href+"#tab_id";
});
.tab-content {
display: block; /* undo display:none */
height: 0; /* height:0 is also invisible */
overflow: hidden; }
.tab-content.current {
height: auto; /* let the content decide it */ }
.projects_select {
font-weight: 400;
letter-spacing: 1px;
text-align: center;
color: #333;
padding: 17px 0;
width: 16.66%;
float: left;
cursor: pointer;
border-style: solid;
border-width: 1px 1px 1px 0px;
font-style: normal;
font-weight: 700; }
.projects_select.current {
font-weight: 500;
position: relative;
color: #fff;
background: #313641; }
.projects_select.current:after {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: transparent;
border-top-color: #333;
border-width: 20px;
margin-left: -20px;
}
.tab_Menu{
padding: 35px 10.7% 75px;
background: #efefef; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper tab_Menu">
<a class="projects_select tab-link current" data-tab="tab-1" href="#tab-1"> Tab-1 </a>
<a class="projects_select tab-link" data-tab="tab-2" href="#tab-2"> Tab-2 </a>
<a class="projects_select tab-link" data-tab="tab-3" href="#tab-3"> Tab-3 </a>
<a class="projects_select tab-link" data-tab="tab-4" href="#tab-4"> Tab-4 </a>
<a class="projects_select tab-link" data-tab="tab-5" href="#tab-5"> Tab-5 </a>
</div>
<div class="tab-content current" id="tab-1"> Tab-1 </div>
<div class="tab-content" id="tab-2"> Tab-2 </div>
<div class="tab-content" id="tab-3"> Tab-3 </div>
<div class="tab-content" id="tab-4"> Tab-4 </div>
<div class="tab-content" id="tab-5"> Tab-5 </div>
You can get the hash with window.location.hash. So in your script you can do something like this:
$(document).ready(function(){
if($('.tab-link[href=' + window.location.hash + ']')){
$('.tab-link[href=' + window.location.hash + ']').addClass('current');
}
else {
$('.tab-link[href=#tab1]').addClass('current');
}
});
Not tested this code tho. You don't need to set current class in HTML anymore. You can remove it there.
I have been developing github unofficial card. So that, I designed a simple card for this and create little script for toggling language stats and general stats.
After that I realised one problem when I toggle.
I want to it should be like https://github.com/github/developer.github.com
you can check with toggling language colors:
my problematic html is here:
<div class="panel panel-default">
<div class="panel-body" style="min-height:60px;max-height: 60px;">
<ul id="language-stats">
<li>
<span class="color-block language-color" style="background-color:#4F5D95;"></span>
<span class="lang">PHP</span>
<span class="percent">64.5%</span>
</li>
<li>
<span class="color-block language-color" style="background-color:#ccc;"></span>
<span class="lang">Smarty</span>
<span class="percent">19.6%</span>
</li>
<li>
<span class="color-block language-color" style="background-color:#563d7c;"></span>
<span class="lang">CSS</span>
<span class="percent">7.9%</span>
</li>
<li>
<span class="color-block language-color" style="background-color:#f1e05a;"></span>
<span class="lang">JavaScript</span>
<span class="percent">6.4%</span>
</li>
<li>
<span class="color-block language-color" style="background-color:#e44b23;"></span>
<span class="lang">HTML</span>
<span class="percent">1.6%</span>
</li>
</ul>
<ul id="general-stats">
<li><i class="fa fa-history"></i> <small>22 commits</small></li>
<li><i class="fa fa-star"></i> <small>5 stars</small></li>
<li><i class="fa fa-code-fork"></i> <small>3 forks</small></li>
</ul>
</div>
<div class="languages" data-toggle="tooltip" data-placement="bottom" title="Click for language details">
<span class="language-color" aria-label="PHP 64.5%" style="width:64.5%; background-color:#4F5D95;" itemprop="keywords">PHP</span>
<span class="language-color" aria-label="Smarty 19.6%" style="width:19.6%; background-color:#ccc;" itemprop="keywords">Smarty</span>
<span class="language-color" aria-label="CSS 7.9%" style="width:7.9%; background-color:#563d7c;" itemprop="keywords">CSS</span>
<span class="language-color" aria-label="JavaScript 6.4%" style="width:6.4%; background-color:#f1e05a;" itemprop="keywords">JavaScript</span>
<span class="language-color" aria-label="HTML 1.6%" style="width:1.6%; background-color:#e44b23;" itemprop="keywords">HTML</span>
</div>
</div>
CSS
body {
padding:20px;
}
.languages {
padding:0;
}
.languages {
display: table;
width: 100%;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
overflow: hidden;
border: 1px solid #ddd;
border-top: 0;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.languages .language-color {
display: table-cell;
line-height: 7px;
text-indent: -9999px;
}
#general-stats {
padding:0;
display: table;
width: 100%;
table-layout: fixed;
}
#general-stats li {
text-align: center;
display: table-cell;
}
#language-stats {
padding:0;
display: none;
width: 100%;
table-layout: fixed;
}
#language-stats li {
text-align: center;
display: table-cell;
}
li .language-color {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
}
my problematic js is here:
<script>
function toggleLanguages() {
$('#language-stats').toggle( 'slide', {direction:'up'} , 300);
}
function toggleGeneralStats() {
$('#general-stats').toggle( 'slide', {direction:'up'} , 300);
}
$('.languages').click(function() {
if($('#general-stats').css('display') == "none") {
$('#general-stats').toggle( 'slide', {direction:'up'} , 300, toggleLanguages());
} else {
$('#language-stats').toggle( 'slide', {direction:'up'} , 300, toggleGeneralStats());
$('#language-stats').css('display','table');
}
});
</script>
http://jsfiddle.net/fyww2t4n/
Kind Regards.
You could add overflow:hidden to .panel-body
my problem is in my website,when I load the page and click Home,if article is visible on screen, the js I've written hides it smoothly and great with no problem.but when I click the About Us Link,it shows the article but with broken css position while its act is finished.
here is the code:
HTML:
<nav>
<ul class="sf-menu sf-vertical">
<li><a href=# onclick=home()>Home</a></li>
<li><a href=#about onclick=about()>About Us</a></li>
<li><a href=#>Cuisines</a>
<ul>
<li><a href=#starters>Starters</a></li>
<li><a href=#>Main Dishes</a></li>
<li><a href=#>Desserts</a></li>
<li><a href=#>Mezes</a></li>
</ul>
</li>
<li><a href=#>Wine List</a></li>
<li><a href=#gallery>Gallery</a></li>
<li><a href=#contacts>Contacts</a></li>
</ul>
</nav>
<article class=vanished id=about>
<h1>About Us</h1>
<div class="main-wrapper scroll">
<div class="wrapper clearfix">
<img src=img/bazar-place.png alt=bazar-place width=222 height=150 class=about-img>
<h4>Our Restaurant</h4>
<p>Bazar is a restaurant located between the districts Haga and Vasastaden in Gothenburg with a focus on Turkish and Persian food of the best quality that creates opportunities for an exciting mix all the way, from appetizer to dessert.</p>
</div>
<div class="wrapper clearfix">
<img src=img/belly.jpg alt=belly-dancing width=222 height=167 class=about-img id=belly>
<h4>Events</h4>
<p>Every Saturday from 21, we have Belly dancing at Bazar.</p>
</div>
<div class="wrapper clearfix">
<img src=img/food.jpg alt=food-services width=222 height=167 class=about-img id=food>
<h4>Food Services</h4>
<p>Taste our famous pasta dish to the human price of 69 :- We offer 10% discount for take-away at our entire menu.</p>
<p>At lunchtime you can choose from three Turkish pasta dishes or among two or three different main dishes. Ask about vegetarian options! Drinking, salad and coffee / tea included. Lunch can also be picked up.</p>
</div>
<div class="wrapper last clearfix">
<img src=img/extra.jpg alt=extra-services width=222 height=167 class=about-img id=extra>
<h4>Extra Services</h4>
<p>We can help with everything from after work, kick-off to the birthday called with food and drink that lasts all night. Do you want more entertainment we can arrange live music and belly dancing.</p>
</div>
</div>
</article>
JAVASCRIPT:
function home(){
if ($(".active") == [])
{
return ;
}
else
{
var active = $(".active");
active.css("display","inline-block");
active.hide("slide",{direction:"left"},700);
active.attr("class","vanished");
}
}
function about(){
if ($(".active") == [])
{
var hidden = $("#about");
hidden.css("display","inline-block");
hidden.show("slide",{direction : "right"},700);
hidden.attr("class","active");
}
else
{
if ($("#about").attr("class") == "active")
{
return ;
}
else
{
var active = $(".active");
active.css("display","inline-block");
active.hide("slide",{direction:"left"},700);
active.attr("class","vanished");
var hidden = $("#about");
hidden.css("display","inline-block");
hidden.show("slide",{direction : "right"},700);
hidden.attr("class","active");
}
}
}
CSS:
article{
position: absolute;
width: 550px;
height: 100%;
background-image: url("../img/blockBG.png");
z-index: 1;
left: 235px;
border-left: 1px solid #4A4A4A;
border-right-color: #7b7b7b;
border-right-style: solid;
border-right-width: thick;
padding-right: 40px;
padding-left: 40px;
text-align: center;
}
.vanished{
display:none;
}
.main-wrapper{
position:relative;
z-index:1;
width: 100%;
height: 590px;
display:block;
}
.wrapper{
border-bottom:1px solid #4A4A4A;
margin-bottom: 15px;
}
.last{
border: none;
}
h4{
color: #efefef;
text-decoration: none;
text-align: left;
font-family:'Yeseva One',cursive;
font-size: 17px;
font-weight: normal;
margin-bottom: 10px;
margin-top: 0;
line-height: 19px;
}
h1{
position: relative;
font-family:'Yeseva One',cursive;
font-size:60px;
z-index: 2;
color: white;
margin-top: 90px;
padding-bottom: 41px;
margin-bottom: 20px;
font-weight: normal;
border-bottom:1px solid #4A4A4A;
}
p{
color: #efefef;
text-decoration: none;
text-align: left;
font-family:Arial, sans-serif;
font-size: 12px;
}
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/*
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {
*zoom: 1;
}
The problem is with the <h1> margin-top only being correctly applied at the end of the animation.
Try turning the distance top into a padding instead of margin, it should fix it:
h1{
position: relative;
font-family:'Yeseva One',cursive;
font-size:60px;
z-index: 2;
color: white;
margin-top: 0;
padding-top: 90px;
padding-bottom: 41px;
margin-bottom: 20px;
font-weight: normal;
border-bottom:1px solid #4A4A4A;
}
Alternatively, you could give the parent <article> a padding or border top. This will prevent the <h1> margin from collapsing outside it's container while the animation runs.