I am trying to change the font size of a paragraph using jQuery and Angular js.
Whenever user changes the font size the p tags font size will be changed,
it's working fine. But there's a small bug i.e whenever user sets the value the font size changes But if he decrease it , it doesn't decrease but increase, and vice versa and many these type of similar behaviour occur.
This is my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<style>
p{
height: 600px;
width: 600px;
font-size:17px;
}
</style>
</head>
<body>
<div ng-app="myApp" ng-controller="editor">
<label for="kys_font_size"> font size:</label>
<select ng-model="kys_selected_font" id="fontsize" name="kys_font_size" ng-options="page for page in FontSize(1, 150)">
</select>
</div>
<p contenteditable="true" id="content" >
</p>
<p></p>
<script>
var app = angular.module('myApp',[]);
app.controller('editor',function($scope){
$scope.FontSize = function(start, end) {
var size = [];
for (var i = start; i <= end; i++) {
size.push(i);
}
return size;
};
$("#fontsize").on('change',function(){
$("#content").css("fontSize",$scope.kys_selected_font+"px");
});
});
</script>
</body>
</html>
Its working...
you have to use ng-change...
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<style>
p{
height: 600px;
width: 600px;
font-size:17px;
}
</style>
</head>
<body>
<div ng-app="myApp" ng-controller="editor">
<label for="kys_font_size"> font size:</label>
<select ng-model="kys_selected_font" id="fontsize" name="kys_font_size" ng-options="page for page in FontSize(1, 150)" ng-change="update()">
</select>
</div>
<p contenteditable="true" id="content" >
</p>
<p></p>
<script>
var app = angular.module('myApp',[]);
app.controller('editor',function($scope){
$scope.FontSize = function(start, end) {
var size = [];
for (var i = start; i <= end; i++) {
size.push(i);
}
return size;
};
$scope.update = function(){
$("#content").css("fontSize",$scope.kys_selected_font+"px");
}
});
</script>
</body>
</html>
Related
I was working on my Etch-a-Sketch project and there is an issue with populateBoard() function, it seems only the rows are generated, why?
HTML:
<!DOCTYPE html>
<head>
<title>Sketchpad</title>
<link rel="stylesheet" a href="reset.css">
<link rel="stylesheet" a href="styles.css">
</head>
<body>
<div class="flex-conainer">
<div class="title"><h1>Sketchpad</h1></div>
<div class="content">
<div class="board"></div>
<div class="buttons">
<button>Black</button>
<button>White</button>
<button>Random</button>
<button>Reset</button>
</div>
<input type="text" placeholder="Size of Board" value="16" onchange="changeSize(this.value)"/>
<button>Set size:</button>
</div>
</div>
</body>
<script src="Main.js"></script>
</html>
Javascript:
function populateBoard(size) {
let board = document.querySelector('.board');
board.style.gridTemplateColumns = `repeat(${size}, 1fr;)`;
board.style.gridTemplateRows = `repeat(${size}, 1fr)`;
for (let i =0 ; i<256; i++) {
let square = document.createElement('div');
square.style.backgroundColor = 'blue';
board.insertAdjacentElement('beforeend', square);
};
}
function changeSize(input) {
populateBoard(input);
};
CSS:
.board {
width: 500px;
height: 500px;
display: grid;
}
Overall I want my grid to be interactive and to be able o change once I input a size.
I want the border to increase, every time I press a button.
When the button is pressed, its 'value' is increased by 1. I want the value of the pixel-height of the border of the container to increase as well.
var i = 0;
var heightOfBorder = document.getElementById('test').style;
function buttonClick() {
document.getElementById('incrementValue').value = i++
heightOfBorder = "height: 500px";;
}
// document.getElementById("test").style.height = document.getElementById('incrementValue').value;
#test {
margin-top: 200px;
border: solid black;
width: 200px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Container size change</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.5.0.js" integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div id="main" class="container">
<div id="test" class="container" style="height: 50px;">
</div>
<button onclick="buttonClick()" id="incrementButton" type="button" class="btn btn-success">Success</button>
<input id="incrementValue" type="text" name="button" value="0">
</div>
<script src="script.js" charset="utf-8"></script>
</body>
</html>
What am I doing wrong? I am learning to code. Also, side question, does anyone know of a good mentorship program?
Greetings!
You can get current height of the box using offsetHeight and on click add the input value to the box's style.height and remember to add the unit at the end - in your case 'px'.
Here is an example:
var i = 0;
var myEl = document.querySelector('#test');
var initialHeight = myEl.offsetHeight;
function buttonClick() {
document.getElementById('incrementValue').value = i++;
myEl.style.height = initialHeight + i + 'px';
}
<script>
var i = 0;
var heightOfBorder = document.getElementById('test').style;
function buttonClick() {
document.getElementById('incrementValue').value = i++;
let currHgt = heightOfBorder.getPropertyValue('height');
currHgt = +currHgt.slice(0, currHgt.length - 2);
heightOfBorder.setProperty('height', currHgt + i + 'px');
}
</script>
If you want to change height by i value.
just change var
heightOfBorder = document.getElementById('test').style;
to
var heightOfBorder = document.getElementById('test');
and
eightOfBorder = "height: 500px";
to
eightOfBorder.style = "height: 500px";
var i = 0;
var heightOfBorder = document.getElementById('test');
function buttonClick() {
document.getElementById('incrementValue').value = i++
heightOfBorder.style = "height: 500px";
}
// document.getElementById("test").style.height = document.getElementById('incrementValue').value;
#test {
margin-top: 200px;
border: solid black;
width: 200px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Container size change</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.5.0.js" integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div id="main" class="container">
<div id="test" class="container" style="height: 50px;">
</div>
<button onclick="buttonClick()" id="incrementButton" type="button" class="btn btn-success">Success</button>
<input id="incrementValue" type="text" name="button" value="0">
</div>
<script src="script.js" charset="utf-8"></script>
</body>
</html>
As you can see in the example, resizing doesn't work properly when using an iframe. You can move the splitter to the left, but not to the right. Does anybody know why this is and how it could be fixed?
<!DOCTYPE html>
<html ng-app="x">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width">
<title>UI.Layout : demo </title>
<link rel="stylesheet" type="text/css" href="https://rawgithub.com/angular-ui/ui-layout/master/src/ui-layout.css"/>
<style>
.html-back {
background: #eee;
}
</style>
</head>
<body>
<div ui-layout options="{ flow : 'column', disableToggle: true }">
<div ui-layout-container size="50%" class="html-back">
AA
</div>
<div ui-layout-container size="50%" class="html-back">
<iframe style="width: 100%; height: 100%;" src=""></iframe>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="https://rawgithub.com/angular-ui/ui-layout/master/src/ui-layout.js"></script>
<script>
var app = angular.module("x", ["ui.layout"]);
</script>
</body>
</html>
The problem seems to be that the iframe steals the focus. I managed to prevent this by adding an overlay div while moving the split bar.
<!DOCTYPE html>
<html ng-app="x">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width">
<title>UI.Layout : demo </title>
<link rel="stylesheet" type="text/css" href="https://rawgithub.com/angular-ui/ui-layout/master/src/ui-layout.css"/>
<style>
.html-back {
background: #eee;
}
</style>
</head>
<body>
<div ng-controller="AppController">
<div ui-layout ui-layout-loaded options="{ flow : 'column', disableToggle: true }" id="splitViewContainer">
<div ui-layout-container size="50%" class="html-back">
AA
</div>
<div ui-layout-container class="html-back">
<iframe style="width: 100%; height: 100%;" src=""></iframe>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="https://rawgithub.com/angular-ui/ui-layout/master/src/ui-layout.js"></script>
<script>
class AppController {
constructor($document, $element, $scope) {
this.$document = $document;
this.$element = $element;
this.$scope = $scope;
this.mouseDown = this.mouseDown.bind(this);
this.mouseUp = this.mouseUp.bind(this);
this.$scope.$on("ui.layout.loaded", () => {
this.splitter = this.$element.find(".ui-splitbar");
this.splitter.on("mousedown", this.mouseDown);
});
this.overlay = angular.element("<div></div>");
this.overlay.css({
width: "100%",
height: "100%",
"z-index": 1,
position: "absolute",
top: 0,
left: 0
});
}
mouseDown() {
if (!this.splitViewContainer) {
this.splitViewContainer = this.$element.find("#splitViewContainer");
}
this.splitViewContainer.append(this.overlay);
this.$document.one("mouseup", this.mouseUp);
}
mouseUp() {
this.overlay.remove();
}
}
const app = angular.module("x", ["ui.layout"]);
app.controller("AppController", AppController);
</script>
</body>
</html>
I cannot seem to make my javascript .click() method work with my dynamically created divs. In this code I have divs created each under the class name "class1" but my click method does not seem to detect their existence. Here is my code:
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" media="screen" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
function populate() {
var select = document.getElementById("centres");
for (var i = 1; i <= 10; i++) {
var option = document.createElement("option");
option.value = i;
option.text = i;
select.appendChild(option);
}
}
function divGenerator() {
var div;
for (var i = 1; i <= document.getElementById("centres").selectedIndex + 1; i++) {
div = document.createElement("div");
div.className = "class1";
div.innerHTML = "Space " + i;
div.style.width = "100px";
div.style.height = "100px";
div.style.float = "left";
document.getElementById("container2").appendChild(div);
}
}
function glassLoad() {
path_to_root_dir = "../../Content/";
var myBox = new GlassBox();
myBox.init('myBox', '128px', '62px', 'hidden');
myBox.apos('170px', '150px');
}
// window.onload = populate;
$(function () {
$("container2").on("click", ".class1", function () {
alert("The div was clicked.");
});
});
</script>
<div id="container1" style="width: auto; height: 50px;">
<div id="myBox">Hello World!</div>
<button style="margin: auto; vertical-align: top; float: left; font-size: 16px;" type="button" onclick="divGenerator();">Generate</button>
#Html.DropDownList("centres")
</div>
<div id="container2" style="margin: 10px; float: left;" />
<head>
<script type="text/javascript" src="../../Content/javascripts/glassbox/glassbox.js"></script>
<style type="text/css">
#myBox #myBox_content {
padding: 2px;
font-family: verdana, arial, helvetica;
font-size: 12px;
}
</style>
<title></title>
</head>
<body>
<!--
popup
-->
</body>
And here is what it returns (taken from google chrome):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Description of your web page goes here." />
<meta name="keywords" content="Keywords for you web page go here. Each keyword or group of keyword phrases are separated by a comma. Keep this list short and relevant to the content and title of this specific page." />
<title>OneEighty Asset Manager
</title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="header">
<div id="logo">
<p></p>
</div>
</div>
<!-- end #header -->
<div id="menu">
<ul>
<li>Home</li>
<li>About</li>
</ul>
</div>
<!-- end #menu -->
<div id="wrapper">
<div class="btm">
<div id="page">
<h1>
<img src="../../Content/Images/1Eighty.png" alt="" style="height: 100px; width: 750px;" /></h1>
<div id="content">
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript">
function populate() {
var select = document.getElementById("centres");
for (var i = 1; i <= 10; i++) {
var option = document.createElement("option");
option.value = i;
option.text = i;
select.appendChild(option);
}
}
function divGenerator() {
var div;
for (var i = 1; i <= document.getElementById("centres").selectedIndex + 1; i++) {
div = document.createElement("div");
div.className = "class1";
div.innerHTML = "Space " + i;
div.style.width = "100px";
div.style.height = "100px";
div.style.float = "left";
document.getElementById("container2").appendChild(div);
}
}
function glassLoad() {
path_to_root_dir = "../../Content/";
var myBox = new GlassBox();
myBox.init('#myBox', '128px', '62px', 'hidden');
myBox.apos('170px', '150px');
alert("div clicked");
}
// window.onload = populate;
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#container2").on("click", ".class1", function () {
path_to_root_dir = "../../Content/";
var myBox = new GlassBox();
myBox.init('#myBox', '128px', '62px', 'hidden');
myBox.apos('170px', '150px');
alert("div clicked");
});
});
</script>
<div id="container1" style="width: auto; height: 50px;">
<button style="margin: auto; vertical-align: top; float: left; font-size: 16px;" type="button" onclick="divGenerator();">Generate</button>
<select id="centres" name="centres"><option>Southdale</option>
<option>Sasolburg</option>
<option>Sandton City</option>
<option>Greenstone</option>
<option>Morningside</option>
<option>Easgate</option>
<option>Bedfordview</option>
<option>Fourways</option>
<option>Linksfield Terrace</option>
<option>Carlton Centre</option>
<option>testcentre1</option>
<option>testcentre2</option>
<option>testcentre3</option>
</select>
</div>
<div id="container2" style="margin: 10px; float: left;" />
<head>
<script type="text/javascript" src="../../Content/javascripts/glassbox/glassbox.js"></script>
<style type="text/css">
#myBox #myBox_content {
padding: 2px;
font-family: verdana, arial, helvetica;
font-size: 12px;
}
</style>
<title></title>
</head>
<body>
<!--
popup
-->
</body>
</div>
<!-- end #content -->
<div style="clear: both;">
</div>
</div>
<!-- end #page -->
</div>
</div>
<div id="footer">
<p>
Copyright (c) 2009 1eightyintra.com. All rights reserved.
</p>
</div>
<!-- end #footer -->
</body>
</html>
Because the element doesn't exist in the DOM on page load, you need to use an event delegate, such as on:
$(function () {
$("body").on("click", ".class1", function () {
alert("The div was clicked.");
});
});
Or for pre-1.7 jQuery, use delegate:
$(function () {
$("body").delegate(".class1", "click", function () {
alert("The div was clicked.");
});
});
click only binds handlers to elements that were present in the DOM when you called it.
Instead, use the jQuery on method:
$(document).ready(function () {
$("body").on("click", ".class1", function () {
alert("The div was clicked.");
});
});
You will need to re-apply the click handler to the newly created divs.
Am using the below script to change the color of the script but showing 'font color="red">Hello world /font> like this.Is any possible way to change the alert text color..
<html>
<head>
<title>JavaScript String fontcolor() Method</title>
</head>
<body>
<script type="text/javascript">
var str = new String("Hello world");
alert(str.fontcolor( "red" ));
</script>
</body>
</html>
No. alert() accepts a string and renders it using a native widget. There is no provision to style it.
The closest you could get would be to modify the HTML document via the DOM to display the message instead of using an alert().
You can use JQuery to resolve your Problem
<html>
<head>
<meta charset="utf-8" />
<title>JavaScript String fontcolor() Method</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery- ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#dialog-message" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}});
});
</script>
</head>
<body>
<div id="dialog-message" title="My Dialog Alternative">
<p style='color:red'> Hello world </p>
</div>
</body>
</html>
Hope this help :
<!doctype html>
<html>
<head>
<title>JavaScript String fontcolor() Method</title>
<style>
#alertoverlay{display: none;
opacity: .8;
position: fixed;
top: 0px;
left: 0px;
background: #FFF;
width: 100%;}
#alertbox{display: none;
position: fixed;
background: #000;
border:7px dotted #12f200;
border-radius:10px;
font-size:20px;}
#alertbox > div > #alertboxhead{background:#222; padding:10px;color:#FFF;}
#alertbox > div > #alertboxbody{ background:#111; padding:40px;color:red; }
#alertbox > div > #alertboxfoot{ background: #111; padding:10px; text-align:right; }
</style><!-- remove padding for normal text alert -->
<script>
function CustomAlert(){
this.on = function(alert){
var winW = window.innerWidth;
var winH = window.innerHeight;
alertoverlay.style.display = "block";
alertoverlay.style.height = window.innerHeight+"px";
alertbox.style.left = (window.innerWidth/3.5)+"pt";
alertbox.style.right = (window.innerWidth/3.5)+"pt"; // remove this if you don't want to have your alertbox to have a standard size but after you remove modify this line : alertbox.style.left=(window.inner.Width/4);
alertbox.style.top = (window.innerHeight/10)+"pt";
alertbox.style.display = "block";
document.getElementById('alertboxhead').innerHTML = "JavaScript String fontcolor() Method :";
document.getElementById('alertboxbody').innerHTML = alert;
document.getElementById('alertboxfoot').innerHTML = '<button onclick="Alert.off()">OK</button>';
}
this.off = function(){
document.getElementById('alertbox').style.display = "none";
document.getElementById('alertoverlay').style.display = "none";
}
}
var Alert = new CustomAlert();
</script>
</head>
<body bgcolor="black">
<div id="alertoverlay"></div>
<div id="alertbox">
<div>
<div id="alertboxhead"></div>
<div id="alertboxbody"></div>
<div id="alertboxfoot"></div>
</div>
</div>
<script>Alert.on("Hello World!");</script>
</body>
</html>
The concept is taken from this : http://www.developphp.com/video/JavaScript/Custom-Alert-Box-Programming-Tutorial