I'm struggling with a detail on a project and I can't see any solution. We're getting datas writen by an Ai from a MySQL bdd and showing them as text in a fancy way http://82.223.18.239/writing.php
As you can see, the text isn't properly justified in the begining, it is when the writing process hit the bottom of the page, and I don't know how to fix this. When "white-space: pre-wrap" isn't used, everything work fine but I lose the line jump. Any help ?
Our wip code
<head>
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
<script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style type="text/css">
#myTable{
width:"90%";
min-width:250px;
white-space: pre-wrap;
word-wrap:break-word;
position:absolute;
border:solid 0px;
top:200px;
left:720px;
right:720px;
bottom:50px;
font-family:"Times New Roman", Times, serif;
text-align:justify
}
#body {
padding-bottom:60px;
height:2px;
}
</style>
</head>
<body>
<div id="myTable"> <div>
<script type="text/javascript">
var skip = 0;
function get_data(index) {
$.ajax({
url : 'getData.php',
type : 'POST',
data: ({"skip":skip}),
success : function(data) {
if(data && data.trim()!='') {
skip = skip+1;
showText("#myTable", data, 0, 2);
}
else {
setTimeout(function () { get_data(skip); }, 30000);
}
},
error : function(request,error)
{
alert("Request error : "+JSON.stringify(request));
}
});
}
function showText(target, message, index, interval) {
if (index < message.length) {
$(target).append(message[index++]);
setTimeout(function () { showText(target, message, index, interval); }, interval);
}
else {
get_data(skip);
}
}
//var period = 10000; //NOTE: period is passed in milliseconds
get_data(skip);
//setInterval(page_refresh, period);
</script>
</body>
Related
This code will turn the bulb on/off but i want to make the lightbulbs keeps flashing. I've tried different methods and nothing works
<!DOCTYPE html>
<html>
<body>
<img id="bulb" onclick="switch()" src="off.png" width="100" height="180">
<p>On/Off</p>
<script>
function
switch () {
var image = document.getElementById('Bulb');
if (image.src.match("on")) {
image.src = "off.png";
} else {
image.src = "on.png";
}
}
</script>
</body>
</html>
Here is an example, using setInterval(). I have swapped the image to a div thats background changes color, but same principal applies.
I think its also worth pointing out that you could also do this with a css animation and then just use javascript to toggle the class onto the element. But assuming you just wanna stick to JS for now:
let flashInterval = null;
let flashSpeed = 100;
let bulb = document.getElementById('bulb');
function toggleBulb() {
if (bulb.classList.contains('on')) {
bulb.classList.remove('on');
} else {
bulb.classList.add('on');
}
}
function flashBulb() {
if (flashInterval === null) {
flashInterval = setInterval(() => {
toggleBulb();
}, flashSpeed);
} else {
clearInterval(flashInterval);
flashInterval = null;
}
}
document.getElementById('toggleBlub').addEventListener('click', toggleBulb);
document.getElementById('toggleFlash').addEventListener('click', flashBulb);
#bulb {
width: 50px;
height: 50px;
border-radius: 50%;
border: 1px solid #ccc;
background: transparent:
}
.on {
background: #fcba03;
}
<div id="bulb" class=""></div>
<br>
<button id="toggleBlub">Bulb On/Off</button>
<br><br>
<button id="toggleFlash">Flash On/Off</button>
in my opinion, don't use setInterval but u can use a CSS animation rather than it.
You should know about js event and js reserve keyword and be sure to use good code editor so that you can see your error.
I see you trying to keep flashing but you used onclick event that is clickable it will not flashing.
here is the code below, which you want,
<!DOCTYPE html>
<html>
<body>
<img id="bulb" src="off.jpg" width="100" height="180">
<p>On/Off</p>
<script>
var myImage = document.querySelector('#bulb');
var update = setInterval(myUpdate, 1000);
function myUpdate() {
setTimeout(() => {
if (myImage.src.match('off.jpg')) {
myImage.src = 'on.jpg'
} else {
myImage.src = 'off.jpg'
}
}, 500)
}
</script>
</body>
</html>
or you can use onclick event, when you click than it will start flashing
here is the code below
<!DOCTYPE html>
<html>
<body>
<img id="bulb" onclick="mySwitch(this)" src="off.jpg" width="100" height="180">
<p>On/Off</p>
<script>
function mySwitch(myImage) {
var update = setInterval(myUpdate, 500);
function myUpdate() {
setTimeout(() => {
if (myImage.src.match('off.jpg')) {
myImage.src = 'on.JPG'
} else {
myImage.src = 'off.jpg'
}
}, 100)
console.log(myImage)
}
}
</script>
</body>
</html>
I changed your function name to switchBulb because switch is reserved
var intervalID = window.setInterval(switchBulb, 1000);
function switchBulb() {
var image = document.getElementById('bulb');
if (image.src.match("on")) {
image.src = "off.png";
} else {
image.src = "on.png";
}
}
The code below "has been" successfully returning the users.json file in an html table. I modified the json, but the code continues to return the original json. I delete the file, then add it back and then it can't find the file. I have cleared what I thought was the browser cache, to no avail.
Question #1: Where does the server "look" for the users.json file on my web server?
Question #2: How can I assure I'm getting the latest changes, when the user clicks the button?
<script>
function CreateTableFromJSON() {
$.ajax({
type: "get",
url: ***"users.json",***
dataType: "json",
success: function (jsonData) {
var table = $('table');
table.empty();
var name = document.getElementById('name').value.toUpperCase();
$.each(jsonData, function (key, item) {
var table_row = $('<tr>');
$.each(item, function (itemKey, itemValue) {
if (key == 0) {
table.append($('<th>', { html: itemKey }));
}
if (item.LastName.startsWith(name)) {
table_row.append($('<td>', { html: itemValue }));
}
});
table.append(table_row);
}
);
},
error: function () {
alert("json not found");
}
});
}
</script>
<style>
th, td, p, input {
font: 14px Verdana;
}
table, th, td {
border: solid 1px #DDD;
border-collapse: collapse;
padding: 2px 3px;
text-align: left;
}
th {
font-weight: bold;
}
</style>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<input type="button" onclick="CreateTableFromJSON()" value="Create Table From JSON" />
<input type='text' id='name' placeholder='Search Initial ' />
</div>
<p id="showData"></p>
<table id="tbl"></table>
</body>
</html>
Not sure what you mean by your first question. It will "look" at whatever location is in your url.
For your second question: you want to turn off browser caching. Add "cache: false", eg
type: "get",
url: ***"users.json",***
dataType: "json",
cache: false
I have set resize to vertical but I would like that when the user fills the textbox then its size expands down. Is there any way this can be done without using an external library like jQuery?
Only in CSS and contentEditable="true" attribute.
div {
display:inline-block;
border: solid 1px #000;
min-height: 200px;
width: 300px;
}
Demo Here
This has been answered here already: Creating a textarea with auto-resize
<!DOCTYPE html>
<html>
<head>
<title>autoresizing textarea</title>
<style type="text/css">
textarea {
border: 0 none white;
overflow: hidden;
padding: 0;
outline: none;
background-color: #D0D0D0;
resize: none;
}
</style>
<script type="text/javascript">
var observe;
if (window.attachEvent) {
observe = function (element, event, handler) {
element.attachEvent('on'+event, handler);
};
}
else {
observe = function (element, event, handler) {
element.addEventListener(event, handler, false);
};
}
function init () {
var text = document.getElementById('text');
function resize () {
text.style.height = 'auto';
text.style.height = text.scrollHeight+'px';
}
/* 0-timeout to get the already changed text */
function delayedResize () {
window.setTimeout(resize, 0);
}
observe(text, 'change', resize);
observe(text, 'cut', delayedResize);
observe(text, 'paste', delayedResize);
observe(text, 'drop', delayedResize);
observe(text, 'keydown', delayedResize);
text.focus();
text.select();
resize();
}
</script>
</head>
<body onload="init();">
<textarea rows="1" style="height:1em;" id="text"></textarea>
</body>
</html>
Example: https://jsfiddle.net/hmelenok/WM6Gq/
Credits go to panzi, vote him up here: https://stackoverflow.com/a/5346855/1540350
I'm placing description on a text area by retrieving database using jsp, like follows;
<textarea readonly=""><%= item.getContent() %></textarea>
so I want to show the whole content of textarea in page without scroll bar, how can I do it?
You can refer to following link
http://jsfiddle.net/TDAcr/
<head>
<title>autoresizing textarea</title>
<style type="text/css">
textarea {
border: 0 none white;
overflow-y: auto;
padding: 0;
outline: none;
background-color: #D0D0D0;
resize: none;
}
</style>
<script type="text/javascript">
var observe;
if (window.attachEvent) {
observe = function (element, event, handler) {
element.attachEvent('on'+event, handler);
};
}
else {
observe = function (element, event, handler) {
element.addEventListener(event, handler, false);
};
}
function init (maxH) {
var text = document.getElementById('text');
var maxHeight=maxH;
var oldHeight= text.scrollHeight;
var newHeight;
function resize () {
text.style.height = 'auto';
newHeight= text.scrollHeight;
if(newHeight>oldHeight && newHeight>maxHeight )
{
text.style.height=oldHeight+'px';
}
else{
text.style.height = newHeight+'px';
oldHeight= text.scrollHeight;
}
}
/* 0-timeout to get the already changed text */
function delayedResize () {
window.setTimeout(resize, 0);
}
observe(text, 'change', resize);
observe(text, 'cut', delayedResize);
observe(text, 'paste', delayedResize);
observe(text, 'drop', delayedResize);
observe(text, 'keydown', delayedResize);
text.focus();
text.select();
resize();
}
</script>
</head>
<body onload="init(200);">
<textarea rows="1" style="height:1em;" id="text"></textarea>
</body>
</html>
I'm trying to hide the search result when the search is back to empty. Is there a way to do that?
Everything is working fine. I just don't like to see the search result of the last letter. Example if you type A and you empty the input box. The result will stay there.
Thanks to the person that know the answer.
<div id="result"></div> should be the one to be blocked.
My CSS code for the search:
.content{
width:275px;
}
#searchid
{
width:275px;
border:solid 1px #000;
padding:10px;
font-size:14px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
#result
{
position: absolute;
width:275px;
padding:10px;
display:none;
border-top:0px;
overflow:hidden;
border:1px #CCC solid;
background-color: white;
}
.show
{
padding:10px;
border-bottom:1px #999 dashed;
font-size:15px;
height:50px;
}
.show:hover
{
background:lightgrey;
color:#FFF;
cursor:pointer;
}
My HTML Code for the search input box:
<div class="content">
<input type="text" class="search" id="searchid" placeholder="Search"/>
<div id="result"></div>
</div>
My Search Display are like that:
<div class="show" align="left">
<span class="name">' . $rowsTitle['title'] . ' ' . $label . "<br>".
</div>
JQuery that I use to get the search information:
$(function(){
$(".search").keyup(function()
{
var searchid = $(this).val();
var dataString = 'search='+ searchid;
if(searchid!='')
{
$.ajax({
type: "GET",
url: "/sheridan/script/search.php",
data: dataString,
cache: false,
success: function(html)
{
$("#result").html(html).show();
}
});
}return false;
});
jQuery("#result").live("click",function(e){
var $clicked = $(e.target);
var $name = $clicked.find('.name').html();
var decoded = $("<div/>").html($name).text();
$('#searchid').val(decoded);
});
jQuery(document).live("click", function(e) {
var $clicked = $(e.target);
if (! $clicked.hasClass("search")){
jQuery("#result").fadeOut();
}
});
$('#searchid').click(function(){
jQuery("#result").fadeIn();
});
});
I forgot to add the JQuery function that I use to get the information out of the database.
I haven't cleared the result div as you are filling it with data when there is a letter.
$(".search").on("keyup", function(){
if($(this).val()==""){
$("#result").hide();
}
else {
$("#result").show();
}
});
Fiddle
You will have to use JavaScript to perform this action as CSS does not support any way to identify empty input fields.
I have chosen to use jQuery for this example but it could easily be achieved using no external libraries.
$('.search').on('input', function() {
$('#result').toggle( $(this).val() );
});
JSFiddle
Use JQuery
$( "#searchid" ).keypress(function() {
var search = $( "#searchid" ).val()
if(search==''){
$("#result").html();
}
});
Try following code:
$(document).ready(function(){
$("#searchid").keypress(function(){
var len = $("#searchid").val().length;
if (len <= 0)
{
//make result blank
$("#result").hide();
}
});
});
edit:
use $("#result").hide();
or
$("#result").css("display","none");