DIR : /home/kozerus/public_html/list_best.html
/home/kozerus/public_html
<html>
<head>
<title>list.html 20200417_2330 tabs</title>
<!--
<title>list.html 20200417_2030</title>
-->
<script id="script_searchlist" >
function searchlist0(args) {
alert( "BUGS_200 startup_searchlist args="+args );
return('');
}
function searchlist(args) {
// alert( "BUGS_200 startup_searchlist args="+args );
var list_default =
`
jtf22
jtf28
jtf29
jtf30
jtf31
jtf32
jtf38
jtf39
jtf32_dogs_heidi1
jtf32_dogs_heidi2
jtf32_dogs_heidi3
jtf32_dogs_heidi4
jtf31_dogs_fiona
jtf31_dogs_fiona2
jtf30_dogs_doogy
jtf30_dogs_doogy2
`;
list = list_default;
if( args != "" ) { list = args; }
// alert( "BUGS_201 searchlist list="+list );
var htmout = ""; var j=0; var k=0;
htmout += '<div id="div_searchlist">';
htmout += ' <h1>div_searchlist</h1>';
htmout += ' <ul id="myUL">';
for( j=0; j<list.split("\n").length; j++ ) {
item = list.split("\n")[j];
htmout += ' <li><a href="#">'+item+'</a></li>';
}
htmout += ' </ul>';
htmout += ' </div>';
document.getElementById('div_searchlist').innerHTML=htmout;
// alert( "BUGS_202 searchlist list="+list );
return('');
}
</script>
<script id="script_sortlist">
// Make a loop that will continue until no switching has been done:
// Start by saying: no switching is done:
function sortlist0(args) {
// alert( "BUGS_300 sortlist args="+args );
}
function sortlist(args) {
// alert( "MSG_300 sortlist args="+args );
var list, i, switching, b, shouldSwitch;
// list = document.getElementById("myUL0");
// list = document.getElementById("myUL0");
list = `
jtf22
jtf28
jtf29
jtf30
jtf31
jtf32
jtf38
jtf39
`;
// alert( "MSG_301 sortlist myUL_list="+list );
if( args != "" ) { list = args; }
switching = true;
while (switching) {
switching = false;
b = list.getElementsByTagName("LI");
// Loop through all list items:
// Start by saying there should be no switching:
// Check if the next item should switch place with the current item:
// If next item is alphabetically lower than current item, mark as a switch and break the loop: */
// If a switch has been marked, make the switch and mark the switch as done:
for (i = 0; i < (b.length - 1); i++) {
shouldSwitch = false;
if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
shouldSwitch = true;
break;
}
}
if (shouldSwitch) {
b[i].parentNode.insertBefore(b[i + 1], b[i]);
switching = true;
}
}
}
</script>
<script id="script_startup_searchlist">
function startup_searchlist(args) {
// alert( "BUGS_101 startup_searchlist args="+args );
var list = `
the
quick
red
fox
jumped
over
the
lazy
brown
dogs
`;
var list1 = `
a
b
c
d
e
f
g
h
i
j
k
l
m
n
o
p
q
r
s
t
u
v
w
x
y
z
`;
searchlist('');
// searchlist(list1);
// searchlist(list);
sortlist(list1);
// sortlist("");
sortListdir('');
}
</script>
</head>
<body bgcolor="wheat" onload="startup_searchlist('');return false;" >
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="search">
<div id="div_searchlist">
<h1>div_searchlist</h1>
</div>
<hr color=white>
<hr color=black>
<ul id="myUL0" hidden >
<li><a href="#">Adele</a></li>
<li><a href="#">Agnes</a></li>
<li><a href="#">Billy</a></li>
<li><a href="#">Bob</a></li>
<li><a href="#">Calvin</a></li>
<li><a href="#">Christina</a></li>
<li><a href="#">Cindy</a></li>
</ul>
<style id="style_list">
#myInput {
background-image: url('/css/searchicon.png'); /* Add a search icon to input */
background-position: 10px 12px; /* Position the search icon */
background-repeat: no-repeat; /* Do not repeat the icon image */
width: 100%; /* Full-width */
font-size: 16px; /* Increase font-size */
padding: 12px 20px 12px 40px; /* Add some padding */
border: 1px solid #ddd; /* Add a grey border */
margin-bottom: 12px; /* Add some space below the input */
}
#myUL {
/* Remove default list styling */
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #ddd; /* Add a border to all links */
margin-top: -1px; /* Prevent double borders */
background-color: #f6f6f6; /* Grey background color */
padding: 12px; /* Add some padding */
text-decoration: none; /* Remove default text underline */
font-size: 18px; /* Increase the font-size */
color: black; /* Add a black text color */
display: block; /* Make it into a block element to fill the whole list */
}
#myUL li a:hover:not(.header) {
background-color: #eee; /* Add a hover effect to all links, except for headers */
}
</style>
<script id="script_list">
function myFunction() {
// Declare variables
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById('myInput');
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName('li');
// Loop through all list items, and hide those who don't match the search query
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
</script>
<script id="script_sortnum">
function sortnum(args) {
if (Number(b[i].innerHTML) > Number(b[i + 1].innerHTML)) {
shouldSwitch = true;
break;
}
}
</script>
<button onclick="sortListdir()">Sort</button>
<ul id="id01">
<li>Oslo</li>
<li>Stockholm</li>
<li>Helsinki</li>
<li>Berlin</li>
<li>Rome</li>
<li>Madrid</li>
</ul>
<script id="script_sortlistdir">
function sortListdir(args) {
// Set the sorting direction to ascending:
// Make a loop that will continue until no switching has been done:
// alert( "BUGS_400 sortlistDir args="+args );
var list, i, switching, b, shouldSwitch, dir, switchcount = 0;
list = document.getElementById("id01");
switching = true;
dir = "asc";
// Start by saying: no switching is done:
// Loop through all list-items:
// Start by saying there should be no switching:
while (switching) {
switching = false;
b = list.getElementsByTagName("LI");
for (i = 0; i < (b.length - 1); i++) {
shouldSwitch = false;
// Check if the next item should switch place with the current item, based on the sorting direction (asc or desc):
if (dir == "asc") {
if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
/* If next item is alphabetically lower than current item,
mark as a switch and break the loop: */
shouldSwitch = true;
break;
}
} else if (dir == "desc") {
if (b[i].innerHTML.toLowerCase() < b[i + 1].innerHTML.toLowerCase()) {
/* If next item is alphabetically higher than current item,
mark as a switch and break the loop: */
shouldSwitch= true;
break;
}
}
}
if (shouldSwitch) {
/* If a switch has been marked, make the switch
and mark that a switch has been done: */
b[i].parentNode.insertBefore(b[i + 1], b[i]);
switching = true;
// Each time a switch is done, increase switchcount by 1:
switchcount ++;
}
else {
// If no switching has been done AND the direction is "asc", set the direction to "desc" and run the while loop again.
if (switchcount == 0 && dir == "asc") {
dir = "desc";
switching = true;
}
}
}
}
</script>
<h1>Custom Range Slider</h1>
<div class="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
<p>Value: <span id="demo"></span></p>
</div>
<script id="script_slider">
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
slider.oninput = function() { output.innerHTML = this.value; }
</script>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
<body style="text-align:center;">
<h2>Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
i <!-- Tab links -->
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'London')">London</button>
<button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
<button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>
<!-- Tab content -->
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
<style id="style_tab">
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons that are used to open the tab content */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
</style>
<script id="script_tab">
// Declare all variables
// Get all elements with class="tabcontent" and hide them
// Get all elements with class="tablinks" and remove the class "active"
// Show the current tab, and add an "active" class to the button that opened the tab
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<br><br><br><br>
<hr color=blue>
<hr color=white>
<hr color=red>
<style id="style_dropdown">
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}
</style>
<button class="accordion">Section 1</button>
<div class="panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 2</button>
<div class="panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 3</button>
<div class="panel">
<p>Lorem ipsum...</p>
</div>
<style id="style_accordian">
/* Style the buttons that are used to open and close the accordion panel */
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
background-color: #ccc;
}
/* Style the accordion panel. Note: hidden by default */
.panel {
padding: 0 18px;
background-color: white;
display: none;
overflow: hidden;
}
</style>
<script id="script_accordian" >
// Toggle between adding and removing the "active" class, to highlight the button that controls the panel
// Toggle between hiding and showing the active panel */
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
}
else {
panel.style.display = "block";
}
});
}
</script>
<!--
<style id="style_parallax">
// The image used
// Set a specific height
// Create the parallax scrolling effect
.parallax {
background-image: url("/imgs/bg/background1.jpg");
// background-image: url("ko.png");
// background-image: url("parallax.jpg");
// background-image: url("/imgs/bg/bg_newton07.jpg");
// background-image: url("/imgs/bg/bg1500_newton07b.jpg");
height: 500px;
// height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<!-- Container element -->
<div class="parallax">
<h1>class_parallax</h1>
</div>
<div style="height:1000px;background-color:wheat;font-size:36px">
parallax
<img src="/imgs/bg/background2.jpg">
</div>
<div class="parallax">
<h1>parallax</h1>
<!--
Scroll Up and Down this page to see the parallax scrolling effect.
This div is just here to enable scrolling.
Tip: Try to remove the background-attachment property to remove the scrolling effect.
-->
</div>
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 10</div>
<img src="/imgs/bg/background3.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 10</div>
<img src="/imgs/bg/background7.jpg" style="width:100%">
<div class="text">Caption two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 10</div>
<img src="/fb/jtfdc/pages/1.jpg" style="width:100%">
<div class="text">Caption three</div>
</div>
<div class="mySlides fade">
<div class="numbertext">5 / 10</div>
<img src="/fb/jtfdc/pages/2.jpg" style="width:100%">
<div class="text">Caption five</div>
</div>
<div class="mySlides fade">
<div class="numbertext">6 / 10</div>
<img src="/fb/jtfdc/pages/3.jpg" style="width:100%">
<div class="text">Caption six</div>
</div>
<div class="mySlides fade">
<div class="numbertext">7 / 10</div>
<img src="/fb/jtfdc/pages/4.jpg" style="width:100%">
<div class="text">Caption seven</div>
</div>
<div class="mySlides fade">
<div class="numbertext">8 / 10</div>
<img src="/fb/konet/pages/1.jpg" style="width:100%">
<div class="text">Caption eight</div>
</div>
<div class="mySlides fade">
<div class="numbertext">9 / 10</div>
<img src="/fb/iperms/pages/1.jpg" style="width:100%">
<div class="text">Caption nine</div>
</div>
<div class="mySlides fade">
<div class="numbertext">10 / 10</div>
<img src="/fb/kitiworks/pages/1.jpg" style="width:100%">
<div class="text">Caption ten</div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
<span class="dot" onclick="currentSlide(6)"></span>
<span class="dot" onclick="currentSlide(7)"></span>
<span class="dot" onclick="currentSlide(8)"></span>
<span class="dot" onclick="currentSlide(9)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<style id="style_slideshow">
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
</style>
<script id="script_slideshow">
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
<script id="script_slideshow_go">
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
</script>
<hr color=blue>
<hr color=white>
<hr color=red>
<img src="koeye.png">
</body>
</html>
//
koh5_pano
Drag mouse to navigate.
Navigation
- Left/Right Mouse drag: Changes camera heading.
- Up/Sown Mouse drag: Changes camera pitch.
- Scroll wheel: Changes camera field of view.
- I-Key: Displays Info panel with canvas size, image size and FPS.
17.Aug.2010, Martin Wengenmayer