I created this codes to make automatic expanding of textarea height when the text inside exceeded to height of the textarea but this only works in jsfiddle but when i run this in my project this doesnt work. does anyone can help me? Thanks.
$("#ta").keyup(function (e) {
autoheight(this);
});
function autoheight(a) {
if (!$(a).prop('scrollTop')) {
do {
var b = $(a).prop('scrollHeight');
var h = $(a).height();
$(a).height(h - 5);
}
while (b && (b != $(a).prop('scrollHeight')));
};
$(a).height($(a).prop('scrollHeight') + 20);
}
autoheight($("#ta"));
#ta {
width:250px;
min-height:116px;
max-height:300px;
resize:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="ta"></textarea>
If you are using jquery then you have to load Jquery library and add your code in the document ready or window load. Below is the updated code:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
#ta {
width:250px;
min-height:116px;
max-height:300px;
resize:none;
}
</style>
<script>
$(document).ready(function(){
$("#ta").keyup(function (e) {
autoheight(this);
console.log("log");
});
});
function autoheight(a) {
if (!$(a).prop('scrollTop')) {
do {
var b = $(a).prop('scrollHeight');
var h = $(a).height();
$(a).height(h - 5);
}
while (b && (b != $(a).prop('scrollHeight')));
};
$(a).height($(a).prop('scrollHeight') + 20);
}
autoheight($("#ta"));
</script>
</head>
<body>
<textarea id="ta"></textarea>
</body>
</html>
It is working for me in IE 11 as well, try the below js fiddle link in IE -
https://jsfiddle.net/wp3wvuj2/3/
$(document).ready(function(){
$("#ta").keyup(function (e) {
autoheight(this);
console.log("log");
});
});
function autoheight(a) {
if (!$(a).prop('scrollTop')) {
do {
var b = $(a).prop('scrollHeight');
var h = $(a).height();
$(a).height(h - 5);
}
while (b && (b != $(a).prop('scrollHeight')));
};
$(a).height($(a).prop('scrollHeight') + 20);
}
autoheight($("#ta"));
Related
I am trying to get a randomised winner popup.
I have gotten to the point where when the page loads, one of the 3 divs id's is replaced by winner.
The issue is when clicking the div with the id winner, it does not trigger the jquery associated with it.
Is there anything I can change to fix this issue?
A sample of the code I am using is included below.
<script>
$(document).ready(function(){
$("#left").click(function(){
$("#limg").attr('src', 'https://via.placeholder.com/175');
});
$("#center").click(function(){
$("#cimg").attr('src', 'https://via.placeholder.com/175');
});
$("#right").click(function(){
$("#rimg").attr('src', 'https://via.placeholder.com/175');
});
$("#winner").click(function(){
$("#wimg").attr('src', 'https://via.placeholder.com/190');
$("#winbox").css('display','block');
$("#winbox").css('z-index','2');
});
});
</script>
<style>
#winbox {display:none; background-color:red; color:white; padding:20px;}
</style>
<body>
<div id="winbox">WINNER</div>
<div id="left"><img id="limg" src="https://via.placeholder.com/145"></div>
<div id="center"><img id="cimg" src="https://via.placeholder.com/150"></div>
<div id="right"><img id="rimg" src="https://via.placeholder.com/155"></div>
<script>
window.onload = function() {
var selector = Math.floor(Math.random() * 3) + 1;
if (selector == 1) document.getElementById("left").id = ("winner"), document.getElementById("limg").id = ("wimg");
else if (selector == 2) document.getElementById("center").id = ("winner"), document.getElementById("cimg").id = ("wimg");
else if (selector == 3) document.getElementById("right").id = ("winner"), document.getElementById("rimg").id = ("wimg");
}
</script>
</body>
Moved
$("#winner").click(function() {
$("#wimg").attr('src', 'https://via.placeholder.com/190');
$("#winbox").css('display', 'block');
$("#winbox").css('z-index', '2');
to run after random div selection instead of page load.
$(document).ready(function() {
$("#left").click(function() {
$("#limg").attr('src', 'https://via.placeholder.com/175');
});
$("#center").click(function() {
$("#cimg").attr('src', 'https://via.placeholder.com/175');
});
$("#right").click(function() {
$("#rimg").attr('src', 'https://via.placeholder.com/175');
});
});
#winbox {
display: none;
background-color: red;
color: white;
padding: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="winbox">WINNER</div>
<div id="left"><img id="limg" src="https://via.placeholder.com/145"></div>
<div id="center"><img id="cimg" src="https://via.placeholder.com/150"></div>
<div id="right"><img id="rimg" src="https://via.placeholder.com/155"></div>
<script>
window.onload = function() {
var selector = Math.floor(Math.random() * 3) + 1;
console.log(selector)
if (selector == 1) document.getElementById("left").id = ("winner"), document.getElementById("limg").id = ("wimg");
else if (selector == 2) document.getElementById("center").id = ("winner"), document.getElementById("cimg").id = ("wimg");
else if (selector == 3) document.getElementById("right").id = ("winner"), document.getElementById("rimg").id = ("wimg");
$("#winner").click(function() {
$("#wimg").attr('src', 'https://via.placeholder.com/190');
$("#winbox").css('display', 'block');
$("#winbox").css('z-index', '2');
});
}
</script>
</body>
When I try to upload my simple game/app, I get an error saying
"Games must reference one of our supported SDKs via our CDN."
I have given an SDK reference though. Isn't this the one?
<script src="https://connect.facebook.net/en_US/fbInstant.6.2.js"></script>
I went through the SDK reference of facebook docs as well but it didn't work for me?
Did anyone face same situation before or have an idea to fix this problem? thank you
I have a file index.html
INDEX.HTML
<html>
<head>
<title>
this is test
</title>
<style>
body {
width: 400px;
height: 400px;
position: 0;
background: yellow;
}
#heading1{
position: absolute;
}
</style>
</head>
<body>
<h1 id="heading1">
This is h1.
</h1>
<button onclick="myFunction()">Move the heading</button>
<script>
var ran = Mathfloor.Math.Random()*1;
function myFunction() {
var move= document.getElementById("heading1");
var pos = 0;
var id = setInterval(frame, 5);
function frame() {
if (pos == 350) {
clearInterval(id);
var id1 = setInterval(framenext, 5);
} else {
pos++;
if (ran ==1) {
move.style.top = pos + "px"; }else {
move.style.left = pos + "px"; }
}
}
function framenext() {
if (pos == 0) {
clearInterval(id1);
var id = setInterval(framenext, 5);
} else {
pos--;
if (ran ==1) {
move.style.top = pos + "px"; }else {
move.style.left = pos + "px"; }
}
}
}
</script>
<script src="https://connect.facebook.net/en_US/fbInstant.6.2.js"</script>
</body>
</html>
fbapp-config.json
{
"instant_games":{
"navigation_menu_version": "NAV_FLOATING",
}
}
<body>
<script src="https://connect.facebook.net/en_US/fbinstant.6.2.js"></script>
<h1 id="heading1">
This is h1.
</h1>
<button onclick="myFunction()">Move the heading</button>
<script>
window.onload = function () {
FBInstant.initializeAsync().then(function () {
FBInstant.setLoadingProgress(100);
});
FBInstant.startGameAsync().then(function () {
startGame();
})
};
</script>
<script>
var ran = Math.floor(Math.random() * 1);
your script codes here...
</script>
</body>
</html>
fbapp-config.json
{
"instant_games": {
"platform_version": "RICH_GAMEPLAY",
"orientation": "LANDSCAPE",
"navigation_menu_version": "NAV_FLOATING"
}
}
fbapp-config.json must have at least these three key-value pairs for
the game to start.
Tested to work successfully.
I found some code which will scale some text when the browser window is resized and it seems to work well.
Here is the code:
document.body.setScaledFont = function (f) {
var s = this.offsetWidth,
fs = s * f;
this.style.fontSize = fs + '%';
return this
};
document.body.setScaledFont(0.35);
window.onresize = function () {
document.body.setScaledFont(0.35);
}
My question is:
How can I modify this code so the text scales when a specified div is scaled instead?
Updated code from suggested answer by #Deano. This code scales only when the browser is resized.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#window {
border:1px dashed #ccc;
overflow: hidden;
resize: both;
text-align: center;
}
</style>
</head>
<body>
<div id="window">Scale the window</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#window').mouseup( function() {
document.getElementById('window').setScaledFont = function (f) {
var s = this.offsetWidth,
fs = s * f;
this.style.fontSize = fs + '%';
return this
};
document.getElementById('window').setScaledFont(0.35);
window.onresize = function () {
document.getElementById('window').setScaledFont(0.35);
}
});
});
</script>
</body>
</html>
document.body targets the entire body, if you want to target a specific element, use Id or class.
document.getElementById('window').setScaledFont = function (f) {
var s = this.offsetWidth,
fs = s * f;
this.style.fontSize = fs + '%';
return this
};
document.getElementById('window').setScaledFont(0.35);
window.onresize = function () {
document.getElementById('window').setScaledFont(0.35);
}
div {
font-size:2em;
}
<div id="window">Scale the window</div>
JSfiddle
Update Since the question requirement has changed :-/
You will need to use a libary like mimetic.js DEMO
I'm looking for a way to fill a div with single characters.
The div should be the width of the viewport. I get the width with:
$(window).width();
JS should build a HTML-code like this:
<div id="text">ccccccccccccccccccccccccccccccccccccccccc</div>
Thanks for your inputs.
Here's a way to do it:
var char = 'i';
$('#text').html($('#text').html() + char)
var initialheight = $('#text').height();
while ($('#text').height() === initialheight) $('#text').html($('#text').html() + char)
$('#text').html($('#text').html().slice(0,-1))
#text {
word-break: break-all;
font-size: 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="text"></div>
The way this works is that the script inserts a character int the div and gets the height. Then in repeatedly adds characters until the height changes, which indicates that more than one line has occurred. Then it trims the last character that caused it to overflow onto two lines. It's independent of any font characteristics.
Because a character size can be fixed or not accordig to the font I suggest to use a function to approximate the numbers of characters to print:
function writeMaxNumCharsInOneLine(textObj, charToWrite) {
var innWidth = textObj.innerWidth();
textObj.append('<span id="charSize" style="visibility: visible; white-space: nowrap;">' + charToWrite + '</span>');
var charSize = $('#charSize').width();
var numCharsToWrite = (innWidth / charSize).toFixed(0);
var strToWrite = charToWrite.repeat(numCharsToWrite);
$('#charSize').text(strToWrite);
charSize = $('#charSize').width();
while (charSize < innWidth) {
strToWrite = strToWrite + charToWrite;
$('#charSize').text(strToWrite);
charSize = $('#charSize').width();
}
if (charSize > innWidth) {
strToWrite = strToWrite.slice(0,-1);
}
$('#charSize').remove();
textObj.text(textObj.text() + '\n' + strToWrite);
}
$(function () {
writeMaxNumCharsInOneLine($('#text'), 'Y')
writeMaxNumCharsInOneLine($('#text'), 'a')
writeMaxNumCharsInOneLine($('#text'), 'b')
writeMaxNumCharsInOneLine($('#text'), 'c')
});
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<div id="text" style="border: double;width: 50%;height: 100px;"></div>
Next time you may want to add more information as well as what you have tried, your question doesn't show much troubleshooting on your side; however I think the code below should work or help you figure out something for what you are trying to do.
var w = $(document).width();
var d = $("#text").width();
var s = "";
do{
s+= "X";
$("#text").text(s)
d = $("#text").width();
}
while(d < w)
<div>
<span id="text"></span>
</div>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function() {
var b=$( "<span padding=0 margin=0></span>").appendTo( $("#text") );
do {
$(b).append("M");
} while ($(b).width() < $(b).parent().width() )
});
});
</script>
</head>
<body>
<div id="text"></div>
<button>Click me</button>
</body>
</html>
You mean this?
$(function() {
var windowWidth = $(window).width();
var oneCharacterWidth = $("#text").width();
var total = windowWidth / oneCharacterWidth;
$("#text").html("");
for (i = 0; i < total; i++) {
$("#text").append("c");
}
})
#text {
display:inline;
font-size:12px;
}
body {
margin:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="text">c</div>
I cannot figure out why if/else statements are not executing properly. The code only runs through the if(i===1) loop but thats it. I'm doing a simple exercise wherein I check the number submitted and see if the users gets hotter or colder to a preset number.
<html>
<head>
<title>Test</title>
<script src="jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function () {
var checkNum = Math.floor(Math.random() * 10);
alert("Random number is" + checkNum);
var i = 0;
var scopedVal;
var submitVal;
var hotCheck = function (submitVal) {
if(i === 1) {
alert("try again");
scopedVal = submitVal;
alert("scopedVal is" + scopedVal);
} else {
if(abs(scopedVal - checkNum) > abs(submitVal - checkNum)) {
alert("Hotter");
scopedVal = submitVal;
} else {
alert("colder");
scopedVal = submitVal;
}
}
};
$('.subm').on('click', function () {
i++;
alert(" i is" + i);
alert("button pressed");
submitVal = $(this).closest('#outsideContainer').find('.num').val();
if(submitVal === checkNum) {
alert("You got it");
} else {
hotCheck(submitVal);
}
});
});
</script>
<style>
body {
width: 900px;
color: white;
margin: auto;
}
#outsideContainer {
width: 400px;
color: grey;
margin: auto;
position: relative;
}
</style>
</head>
<body>
<div id="outsideContainer">
<form>
<input type="text" name="text" class="num">
<br/>
</form>
<div id="buttonSubm">
<button class="subm">Submit</button>
<div></div>
</body>
</html>
I'm assuming this is a simple fix and it is driving me nuts.
If you want to run the "else" code as well as the "if" code remove the else statement:
var hotCheck = function(submitVal){
if(i===1){
console.log("try again");
scopedVal = submitVal;
console.log("scopedVal is " + scopedVal);
};
if(Math.abs(scopedVal-checkNum)> Math.abs(submitVal - checkNum)){
console.log("Hotter");
scopedVal = submitVal;
} else {
console.log("colder");
scopedVal = submitVal;
};
};
Demo:
http://jsfiddle.net/hHC88/
You also needed to change abs. to Math.abs
The abs() method does not exist. You're dealing with all integers so you can probably just remove it or fully reference it Math.abs()
You have to replace the
if( abs(scopedVal-checkNum)> abs(submitVal - checkNum)){
to
if( Math.abs(scopedVal-checkNum) > Math.abs(submitVal - checkNum)){
abs() is a method to Math.
Try this