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>
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";
}
}
Hi i have created this script to hide a text after 6 seconds, But I want that the text must reappear and disappear again back to the infinite every 6 seconds how I can create this kind of HTML script?
<h1 style="text-align: left;" id="xhide">Hello World</h1>
<script type="text/javascript">
function hide(id) {
d= document.getElementById(id)
d.setAttribute('style','display:none;')
}
setTimeout(function () {
hide('xhide')
}, 6000);
</script>
You can try updated code as per your need:
<h1 style="text-align: left;" id="xhide">Hello World</h1>
<script type="text/javascript">
var flag=true;
function hide(id) {
d= document.getElementById(id);
d.setAttribute('style','display:none;');
}
function show(id) {
d= document.getElementById(id)
d.setAttribute('style','display:block;')
}
setInterval(function() {
if(flag) {
show('xhide');
flag=false;
} else {
hide('xhide');
flag=true;
}
}, 6000);
</script>
try this blink element
<script type="text/javascript">
function blink() {
var blinks = document.getElementsByTagName('blink');
for (var i = blinks.length - 1; i >= 0; i--) {
var s = blinks[i];
s.style.visibility = (s.style.visibility === 'visible') ? 'hidden' : 'visible';
}
window.setTimeout(blink, 6000);
}
if (document.addEventListener) document.addEventListener("DOMContentLoaded", blink, false);
else if (window.addEventListener) window.addEventListener("load", blink, false);
else if (window.attachEvent) window.attachEvent("onload", blink);
else window.onload = blink;
</script>
<blink>Text to blink here</blink>
The following code will hide the text and re-display it with 6 second intervals in between.
var textshown = false;
$(document).ready(function() {
setInterval(function(){
if(textshown == false) {
$('#xhide').show();
textshown = true;
} else {
$('#xhide').hide();
textshown = false;
}
}, 6000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 style=" text-align: left; " id="xhide">Hello World</h1>
You can do this by using toggle function on classList
function hide(elementId) {
document.getElementById(elementId).classList.toggle('hidden');
}
setInterval(hide, 6000, 'xhide');
.hidden {
display: none;
}
<h1 id="xhide">Hello World</h1>
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
This code copy code functionality.when am click on copycode then it displayed code in the popup window it displayed code but align is in only one line...i have the proper alignment....enter image description here
my code displays bellow with output screens please anyone suggest me for popup alignment ..
php code
<?php
$editorDesc = '<pre class="prettyprint tryit linenums">'. htmlspecialchars(isset($outTryEditorTableInfo[$s]['editor_description']) ? $outTryEditorTableInfo[$s]['editor_description'] : '').'</pre>';
$finalResult = '<div class="ccsp-example" id="contentdiv" itemprop="articleBody" >'.$editorDesc.$tryItHereBtn.'</div><br/>'.$tryittask;
?>
css
<style>
ol li {
list-style-type: none;
counter-increment: list;
position: relative;
}
ol li:after {
content: counter(list)"\00a0 \00a0 " ;
border-right:1px solid #aeaeae;
position: absolute;
left: -2.5em;
width:4%;
text-align: right;
}
</style>
js
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?autoload=true&skin=sunburst&lang=css" defer="defer"></script>
<script type="text/javascript" language="Javascript">//<![CDATA[
$(document).ready(function () { processCodeBlocks.Initialise('#contentdiv'); });
$(function (){
$('.oauth').click(function () {
$this = $(this);
href = $this.attr('href');
var myWindow = window.open(href, 'popup',
'width=800,height=600,location=0,menubar=0,resizeable=0,scrollbars=0,toolbar=0');
myWindow.focus();
var timer = setInterval(function () {
if (myWindow.closed) {
clearInterval(timer);
// window.location.reload(); // May do a POST reload, shows a warning
window.location = window.location; // force a GET reload
}
}, 200);
return false;
});
});
</script>
i want to use mouse drag in angularjs to change style of html element.i use this module to inject mouse drag in angular.Now how change li element style with mouse drag? in fact my sample code is a time line so when a user mouse drag on this time line years change.
/**!
* AngularJS mouse drag directive
* #author Ozan Tunca <ozan#ozantunca.org>
* #version 0.1.0
*/
(function() {
var ngMousedrag = angular.module('ngMouseDrag', []);
ngMousedrag.directive('ngMousedrag', ['$document', function ngMousedrag($document) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var endTypes = 'touchend mouseup'
, moveTypes = 'touchmove mousemove'
, startTypes = 'touchstart mousedown'
, startX, startY;
element.bind(startTypes, function startDrag(e) {
e.preventDefault();
startX = e.pageX;
startY = e.pageY;
$document.bind(moveTypes, function (e) {
e.dragX = e.pageX - startX;
e.dragY = e.pageY - startY;
e.startX = startX;
e.startY = startY;
scope.$event = e;
scope.$eval(attrs.ngMousedrag);
});
$document.bind(endTypes, function () {
$document.unbind(moveTypes);
});
});
}
};
}]);
})();
#draggable {
width: 200px;
height: 200px;
position: absolute;
background: red;
cursor: move;
top: 0;
left: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Angular Mousedrag Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<div id="wrapper" ng-controller="Slider">
<div ng-init="years=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79]">
<ol id="draggable" ng-mousedrag="onMouseDrag($event);">
<li ng-repeat="y in years">{{y}}
</li>
</ol>
</div>
</div>
</div>
<script type="text/javascript">
(function() {
angular.module('myApp', ['ngMouseDrag'])
.controller('Slider', function($scope, $compile) {
$scope.dragY = 0;
$scope.onMouseDrag = function($event) {
var draggableObject = document.getElementById('draggable');
draggableObject.style.top = $event.pageY + 'px';
$scope.dragY = $event.pageY;
$scope.$digest();
}
});
angular.bootstrap(document, ['myApp']);
})();
</script>
</body>
</html>