I used the answer to this question to auto-scroll a combat log for my HTML5 game to the bottom:
How to auto-scroll to end of div when data is added?
If I want to briefly disable this while a person clicks to scroll up and view the log, how would I do so?
The Code I'm using is:
//autoscroll combat log
window.setInterval(function() {
var elem = document.getElementById('log');
elem.scrollTop = elem.scrollHeight;
}, 500);
Best regards,
Cobwebs
Edit: the code above is connected to a simple span in a div:
<div>
<span id='log'></span>
</div>
Stylized to have a scrollbar:
span#log {
display: block;
font-family: courier, sans;
margin: auto;
border:1px solid black;
width:600px;
height:200px;
overflow:auto;
background-color:black;
color: lime;
text-align: left;
}
setInterval() returns an ID, with that ID you can use clearInterval() to stop it
var intervalID = window.setInterval(function() {
var elem = document.getElementById('log');
elem.scrollTop = elem.scrollHeight;
}, 500);
and then this
window.clearInterval(intervalID);
small DEMO
Related
everytime I make a new tab in my nav menu, I need to edit all my html files.
How do I make a remote file with all the nav items, that I then call to show up?
Simple: make your navigation into a separate HTML file and use an iframe to call it.
Another way is to make it one whole HTML file and use the following:
var d = {
e: function(id){
return(document.getElementById(id) || "err:404");
},
v: function(id){
return(document.getElementById(id).value || "err:404");
}
};
var System = {
tabs: {
init: function(){
try{
var tabs = d.e("tabs").querySelectorAll("tab");
for(var i = 0; i < tabs.length; i++){
var e = tabs[i];
e.onclick = function(){
System.tabs.activate(this);
};
}
System.tabs.activate(tabs[0]);
}catch(err){
alert(err.stack);
}
},
activate: function(name){
try{
var tabs = d.e("tabs").querySelectorAll("tab");
for(var i = 0; i < tabs.length; i++){
tabs[i].setAttribute("active","false");
}
name.setAttribute("active","true");
var contents = d.e("content").querySelectorAll("pane");
for(var i = 0; i < contents.length; i++){
contents[i].style.display = "none";
}
contents[Array.from(tabs).indexOf(name)].style.display = "block";
}catch(err){
alert(err.stack);
}
}
}
};
window.onload = function(){
System.tabs.init();
};
tab{
display: inline-block;
background: #000000;
color: #888888;
height: 20px;
border-right: 1px solid #444444;
border-left: 1px solid #444444;
border-bottom: 1px solid #222222;
}
tab[active="false"]:hover{
background: #000000;
color: #ffffff;
}
tab[active="true"]{
background: #080808;
color: #ffffff;
border-bottom: 1px solid #000000;
}
tab[active="true"]:hover{
background: #181818;
color: #ffffff;
}
<div id="tabs">
<tab>Tab name</tab><tab>Another tab name</tab>
</div>
<div id="content">
<pane>
<p>Hi there! Welcome to some tab program I made! Please click the tab labeled <code>Another tab name</code> to test out the feature.</p>
</pane>
<pane>
<p>The best part is: no need for element IDs or JQuery or any of that difficult stuff! Feel free to click as many times as you want to see how perfect the tabs work.</p>
</pane>
</div>
I realized that the first option might not work with the current knowledge I know. It is still possible though. Meanwhile the second is obviously gonna work very good even though all I know is that it can work in Chrome, but I can't test it in other browsers because this is a school Chromebook that I am on and my dad is refusing to repair mine and my brother's shared PC.
I am new to css. How can I add a status button which changes color depending on chat availability on top of another button?
You can use the position property.
See an example code here.
Some resources:
https://www.w3schools.com/css/css_positioning.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/position
From the picture i can tell you don't have to use 2 html elements on top of each other, but you can use css properties like border and background-color to achieve exactly as the button in your picture.
I posted how in the code below with even a little bit of javascript to toogle the button status (not needed for styling, so if you don't know any javascript yet, you can skip that part).
let isOpen = false;
const btn = document.querySelector("#btn");
const dot = document.querySelector(".dot");
const txt = document.querySelector("#text");
btn.addEventListener("click", () => {
if (isOpen) {
dot.style.backgroundColor = "red";
txt.innerHTML = "The chat is now closed";
} else {
dot.style.backgroundColor = "green";
txt.innerHTML = "The chat is now open";
}
isOpen = !isOpen;
});
.dot {
height: 25px;
width: 25px;
background-color: red;
border-radius: 50%;
display: inline-block;
border: 5px solid gray;
}
#wrapper {
border: 1px solid black;
text-align: center;
padding: 10px;
}
#btn {
margin-top: 10px;
}
<div id="wrapper">
<span class="dot"></span>
<p id="text">The chat is now closed</p>
</div>
<button id="btn">Toogle</button>
I am trying to create simple jquery App, but i ran over small problem, which i can't solve, I want to search in textarea box form input field, if input form value will match textarea value, i want to marked matched text, picture below shows what i want to done, any suggestion?
$('#search').on('input', function(e) {
e.preventDefault();
var searchTxtBox = $('#search');
searchTxtBox.val(searchTxtBox.val().replace(/(\s+)/, "(<[^> ]+>)*$1(<[^> ]+>)*"));
var textarea = $('#editor');
var enew = '';
if (searchTxtBox.val() != '') {
enew = textarea.html().replace(/(<mark>|<\/mark> )/igm, "");
textarea.html(enew);
var query = new RegExp("(" + searchTxtBox.val() + ")", "gim");
newtext = textarea.html().replace(query, "<mark>$1</mark>");
newtext = newtext.replace(/(<mark>[^<>]*)((<[^> ]+>)+)([^<>]*<\/mark>)/, "</mark><mark>");
textarea.html(newtext);
} else {
enew = textarea.html().replace(/(<mark>|<\/mark> )/igm, " ");
textarea.html(enew);
}
});
mark {
background-color: red;
color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input placeholder='search' id='search'>
<div id="editor" rows="4" cols="50">
</div>
The simplest way I can think of is positioning a transparent element behind the textarea
and adding the results there:
Key features to program this:
The elements must render the same (size, font, line ect..)
The textarea must have a transparent background.
Whenever the textarea is changed (resized) we need to match the size of the result container.
Here is my implementation:
$(function(){
//Simple helper function to match the size of the elements:
function matchSize($base, $target) {
$target.css({
width : $base.outerWidth(),
height : $base.outerHeight()
});
}
//Attach whenever serach field changed run the query:
$("#search").keyup(function(){
let $search = $(this),
$input = $('#input');
let $result = $input.prev('code');
//Match size:
matchSize($input, $result)
//Search
let marked = $input.val().replace(
new RegExp("(" + $search.val().trim() + ")", "g"),
"<mark>$1</mark>"
);
//Set marked transparent text:
$result.html(marked);
});
//textarea can be resized so always match the size:
$('#input').bind('mouseup', function(){
let $input = $('#input');
let $result = $input.prev('code');
matchSize($input, $result)
});
});
.wrap {
position: relative;
display:block;
}
/* match the two */
.wrap code,
.wrap textarea {
position:absolute;
text-rendering: auto;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-align: start;
appearance: textarea;
flex-direction: column;
white-space: pre-wrap;
overflow-wrap: break-word;
margin: 0em;
font: 400 13.3333px Arial;
border-width: 1px;
border-style: solid;
padding: 2px;
background-color:transparent;
z-index: 2;
box-sizing: border-box;
}
.wrap code {
z-index: 1;
top:0;
left:0;
border-color:transparent;
color:transparent;
background-color: white;
}
.wrap code mark {
color: transparent;
background-color: yellow;
padding:0;
margin:0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<code></code>
<textarea id="input">the easiest way to do this and the quickest.</textarea>
</div>
<br/><br/><br/><br/>
Search: <input id="search" placeholder='Search' />
What would be the best way to display a hover popup with a 20-30 words definition of each word in a foreign-language text?
Right now I am using an iframe:
<span class="tooltip">foreign-language-verb
<span class="tooltiptext">
2nd pers. sing. past tense, active mood.
<iframe class="tooltip" src="general_dictionary_definition_of_the_verb.html"></iframe>
</span>
</span>
It works but the page is then very slow to load and there seems to be a limit to the number of possible iframe's: they don't display anymore if the text is too long.
Any other solution, using javascript to load the text or something?
Thanks.
EDIT:
Following up on Richard P's remark: does that mean replacing iframe with javascript loading by hand, does that make sense, is that best practices? Would that be faster than the iframe's which are very slow to load?
Taking Javascript - read local text file into account:
<script type="text/javascript">
function loadDictionaryDefinitions()
{
var elements = document.getElementsByClassName("DictionaryDefinition");
for (var i = 0; i < elements.length; i++)
elements[i].innerHTML = readTextFile("file://" + elements[i].getAttribute("filename_of_dic_definition"));
}
function readTextFile(file)
{
var rawFile = new XMLHttpRequest();
rawFile.open("GET", file, false);
rawFile.onreadystatechange = function ()
{
if(rawFile.readyState === 4)
{
if(rawFile.status === 200 || rawFile.status == 0)
{
var allText = rawFile.responseText;
alert(allText);
}
}
}
rawFile.send(null);
}
</script>
and add:
<body onload="loadDictionaryDefinitions()">
what about css hover ? Try this one:
https://jsfiddle.net/maky/0h0ekhj6/
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
/* If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}
You could use a popover in Bootstrap if you don't mind adding it to your project. It would require a bit of javascript but should be pretty simple. Most of the functionality of it is handled by Bootstrap.
Is it possible to display a progressbar in a Google Spreadsheet while a script is running (until it is finished)?
Something like JQuery progressbar would be fine, but on which selector?
Thanks in advance for any help!
$(document).ready(function(){
$('#Mydiv').progressbar({value: false} );
})
the script you have is ok but if you want something intricate or complex, it will calculate percentages while the script is running
the CSS:
#progressbox {
border: 1px solid #0099CC;
padding: 1px;
position:relative;
width:400px;
border-radius: 3px;
margin: 10px;
display:none;
text-align:left;
}
#progressbar {
height:20px;
border-radius: 3px;
background-color: #003333;
width:1%;
}
#statustxt {
top:3px;
left:50%;
position:absolute;
display:inline-block;
color: #000000;
}
JQuery:
$(document).ready(function() {
var options = {
target: '#output',
beforeSubmit: beforeSubmit,
uploadProgress: OnProgress, //upload progress callback
success: afterSuccess,
resetForm: true
};
$('#MyUploadForm').submit(function() {
$(this).ajaxSubmit(options);
return false;
});
});
The function below captures the arguments passed by form plugin, changing the width and text of progressbar real-time.
function OnProgress(event, position, total, percentComplete)
{
//Progress bar
progressbar.width(percentComplete + '%') //update progressbar percent complete
statustxt.html(percentComplete + '%'); //update status text
if(percentComplete>50)
{
statustxt.css('color','#fff'); //change status text to white after 50%
}
}
#ref: http://www.sanwebe.com/2012/05/ajax-image-upload-with-progressbar-with-jquery-and-php
this deals with image uploads, but you can substitute it for scripts running in the background.