Font Resize is not working on page refresh - javascript

My page header bar has a + and - to use to increase and decrease the font (using the function below)...
This all works correctly. I'm storing the new font size value in a cookie.
The desired outcome is if you a) refresh the page, or b) go to a different page on the site, it sets the font size to what was stored... however, this is not the case.
Here is my code bits... (using a script.js file)
var resize = new Array('.resizable');
$(document).ready(function() {
resize = resize.join(',');
var resetFont = $(resize).css('font-size');
$(".reset").click(function(){
$(resize).css('font-size', resetFont);
setFontSizeCookieValue(resetFont);
});
//increases font size when "+" is clicked
$(".increase").click(function(){
event.preventDefault();
changeFontSize(true);
return false;
});
//decrease font size when "-" is clicked
$(".decrease").click(function(){
changeFontSize(false);
return false;
});
// set the page font size based on cookie
setPageInitialFontSize();
});
function setPageInitialFontSize() {
var currentSize = $(resize).css('font-size');
if (currentSize !== getFontSize()) changeFontSize();
};
// font size changer
function changeFontSize(increase) {
var currentFontSize = getFontSize(); //getFontSize gets the cookie value or, if not set, returns 16
var currentFontValue = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSize;
if (increase !== undefined) newFontSize = Math.floor((increase) ? currentFontValue * 1.2 : currentFontValue * 0.8);
$(resize).css('font-size', newFontSize);
setFontSizeCookieValue(newFontSize);
};
I'm not showing the 'cookie' code calls (set and get) as they are working properly setting/getting the cookie values.
When you click the + or - buttons, they call the changeFontSize function with the correct parameter value. When the page loads/refreshes, setPageInitialFontSize() is being called...
Stepping through setPageInitialFontSize, it tests the current size (16px) with the getFontSize call (19) and flows through changeFontSize, which does everything its supposed to do, but it's like
$(resize).css('font-size', newFontSize);
doesn't actually do anything here...
So I could use any help trying to figure out why this isn't working...

I guess this is what you are trying to achieve , use this code or follow along with your code just see what you are missing as i cant see cookies part in your code, check here the working code
https://jsbin.com/wofogejiye/edit?html,js,console,output
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Increase and Decrease Font Using Jquery and CSS</title>
<script type="text/javascript" language="javascript"
src="http://code.jquery.com/jquery-latest.js"><
/script>
<script type="text/javascript">
</script>
</head>
<body>
<input type="button" class="increase" value=" + ">
<input type="button" class="decrease" value=" - "/>
<input type="button" class="resetMe" value=" = ">
<div>Click Respected Buttons to Increase or Decrease the Font </div>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
$(document).ready(function(){
var originalSize = getFontSizeLocalStorage()
// reset
$('div').css('font-size', originalSize);
$(".resetMe").click(function(){
$('div').css('font-size', originalSize);
});
$('div').css('font-size');
// Increase Font Size
$(".increase").click(function(){
var currentSize = getFontSizeLocalStorage()
var currentSize = parseFloat(currentSize)*1.2;
$('div').css('font-size', currentSize);
addToLocalStorage(currentSize)
return false;
});
// Decrease Font Size
$(".decrease").click(function(){
var currentSize =getFontSizeLocalStorage()
var currentSize = parseFloat(currentSize)*0.8;
$('div').css('font-size', currentSize);
addToLocalStorage(currentSize)
return false;
});
});
function addToLocalStorage(fontSize){
window.localStorage.setItem("fontSize",fontSize)
}
function getFontSizeLocalStorage(){
if( window.localStorage.getItem("fontSize")){
return window.localStorage.getItem("fontSize")
}
return $('div').css('font-size')
}
</script>

Related

Creating cookie to remember font scaling tool value

I am trying to create a jQuery cookie to remember the new font size generated by the code below. I am already using jQuery Cookies in my project for another function but can't figure out how to do it.
This is the jQuery I am using to let users choose a font size that works best for them:
$(document).ready(function(){
var resize = new Array('p','.resizable');
resize = resize.join(',');
//resets the font size when "reset" is clicked
var resetFont = $(resize).css('font-size');
$("#reset").click(function(){
$(resize).css('font-size', resetFont);
//reset theme color
$("#trenbiz" ).attr("href", "/js/skin/skin1.css" );
return false;
});
//increases font size when "+" is clicked
$("#increase").click(function(){
var originalFontSize = $(resize).css('font-size');
var originalFontNumber = parseFloat(originalFontSize, 10);
var newFontSize = originalFontNumber*1.1;
$(resize).css('font-size', newFontSize);
return false;
});
//decrease font size when "-" is clicked
$("#decrease").click(function(){
var originalFontSize = $(resize).css('font-size');
var originalFontNumber = parseFloat(originalFontSize, 10);
var newFontSize = originalFontNumber*0.8;
$(resize).css('font-size', newFontSize);
return false;
});
I tried following the jQuery Cookies doc and just filled in the basic example with my own class names: $.cookie('font-size', 'newFontSize'); but it didn't work. Not sure if its not picking up a value or if it isn't applying it.
Any help at all would be incredibly appreciated!

How a user can manually increase or decrease font size of all the content in a page in SharePoint?

I am having a requirement where user can increase (A+) or decrease (A-) using a link or button click to effect the font size of entire content in a SharePoint page. I am using SharePoint Online (Office365) for POC.
I have tried using content editor webpart with html and js as:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function()
{
$('button').click(function()
{
var theElement = $("div").css("font-size");
var textSize = parseFloat(theElement, 10);
var unitOfMeasurement = theElement.slice(-2);
if ( (this).id == "largerTextLink")
{
textSize += 2;
}
else
{
textSize -= 2;
};
$('div').css("font-size", textSize + unitOfMeasurement);
return false;
});
});
</script>
<body>
<div class="font-button">
<button id="smallerTextLink">Smaller Text</button>
<button id="largerTextLink">Larger Text</button>
</div>
</body>
but the above code is not reflecting anything and just the page is refreshed. As a junior developer I don't know whether I am going in a right path.
Is there any way or alternative to solve this requirement?
You could use em's for this.
Here is a good answer/example on a similar question: https://stackoverflow.com/a/16461139/3021549

How to make a function set css width with a JavaScript variable?

I have this code:
...<script>
function handleSize()
{
var setObjectSize=window.innerWidth - 600;
document.getElementById("spin").style.width=setObjectSize + "px";
document.getElementById("spin").style.height=setObjectSize + "px";
}
</script>
</head>
<body>
<section id="spin" onLoad="handleSize()">...
All I am trying to do is to create a function that will set the height and width of the element according to window size using a formula and make sure height and width are the same. I am very new to javascript (almost know nothing about it), so despite there being a ton of example of such questions, and me following them, I can't get this code to work. What am I doing wrong?
The problem that I'm seeing, is that the onload event for the section tag isn't firing. You should add your javascript as a self-executing anonymous function to the end of your body tag and this will work for you.
<body>
<section id="spin" style="border:5px solid black;"></section>
<script>
(function () {
var setWindowSize = window.innerWidth - 600;
document.getElementById("spin").style.width = setWindowSize + "px";
document.getElementById("spin").style.height = setWindowSize + "px";
})();
</script>
</body>
See Here for a demo: http://jsfiddle.net/T7DW6/
You should move onload to the body tag:
<body onLoad="handleSize()">
<section id="spin">...
I would suggest you to use jQuery, that is JavaScript library used world wide. So in order to develop it using jQuery you need to do next
function setElementSize(elId) {
var _w $(window); //to get instance of window
var _el $('#' + elId); //jquery to get instance of element
var _width = _w.width();
var _height = _w.height();
//set width=height
if(_height>_width)
{
_height = _width;
} else { _width = _height; }
_el.css({
width: _width,
height: _height
});
}
//this will execute script when document is loaded.
$(document).ready(function(){
setElementSize('spin');
});
Function above will set width and height of element to match window size. If height > width then it will use width as width & height otherwise it will use height.
I assume that you want to change this automatically if window is resized then do this
$(window).resize(function(){
setElementSize('spin');
});
The onload event occurs when an object has been loaded.
onload is most often used within the element to execute a script once a web page has completely loaded all content (including images, script files, CSS files, etc.).
onload is only Supported by the Following HTML Tags:
body, frame, frameset, iframe, img, input type="image", link, script, style
from here: event_onload
then a is may be not the best here (height and weight does not change anything, you should use a div.
In order to know, the one to use, please read this:
what-is-the-difference-between-section-and-div
I try your exam and it works fine. The only thing that i changed was the way that you call the function
function handleSize(){
var setWindowSize=window.innerWidth - 600;
document.getElementById("spin").style.width=setWindowSize + "px";
document.getElementById("spin").style.height=setWindowSize + "px";
}
window.onload = function () {
handleSize();
}
I think that onLoad="handleSize()" have to be onload="handleSize()" but don't use that way because it is not a good practise!
this works for me
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button and watch it grow.</p>
<button id = "myButton" onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var w = window.innerWidth;
var h = window.innerHeight;
var x = document.getElementById("myButton");
x.style.width = w + "px";
x.style.height = h + "px";
}
</script>
</body>
</html>

How to set percentage in Javascript for my progress bar?

I do not know anything in Javascript (I have copied a code for a progress bar but it does not display the percentage). I just need to display the text value of the actual % inside my progress bar (a text such as : 1%, 2%, 3%...).
The existing code I have is the following (I do not care about the style, so I removed it to read the code easier) :
<div id="loading">
<div id="progressbar">
<div id="progress"/>
<script>
var loading = document.getElementById('loading');
var progress = document.getElementById('progress');
var progressbar = document.getElementById('progressbar');
function updateProgress()
{
if (loading.style.display !== 'none')
{
var width = parseInt(progress.offsetWidth + ((progressbar.offsetWidth - progress.offsetWidth) * .15));
if (width > (progressbar.offsetWidth * .95))
width = parseInt(progressbar.offsetWidth) * .5;
progress.style.width = width + 'px';
window.setTimeout("updateProgress()", 1000);
}
}
document.body.style.margin = 0;
document.body.style.padding = 0;
loading.style.display = 'block';
updateProgress();
</script>
</div>
</div>
Can you help me to add the missing code to display a text having the percentage already loaded please ?
https://developer.mozilla.org/en/DOM/element.innerHTML -- this is the element property to set the content of an element.
Assuming your progress percentage is defined as var percent, you'll just need to set the content as such:
progress.innerHTML = percent.toFixed(1) + '%';
Instead of this, you may try Query Loader.
This preloader has it all. Loading bar, custom animations and getting all images included in the web page.
You can see a demo here

JavaScript progress bar

I want to have a progress bar which should show when I click on a button, e.g. "validate now". My requirement is to check 2000 URLs whether they are working or not. This was taking a lot of time while executing in program. So I need to show a progress bar to the user to know the status. How can I do this using JavaScript?
you could use the jQuery UI Progress bar simple, good looking and easy to implement, you just need to update the value every second or two.
$("#progressbar").progressbar({
value: 37
});
You would have to use Ajax and hit the server/ database every 2-3 second and fetch the status and display on web page. To display progress bar you can use table with different tds and set the background color of these td cells with the status result.
For progress bar create a table with 10 cells of equal width and say the status is 40% then you will set background of first 4 cells indicating 40%.
You could use ProgressBar.js. No dependencies, easy API and supports major browsers.
var line = new ProgressBar.Line('#container');
line.animate(1);
See more examples of usage in the demo page.
Pure JavaScript is not possible, you need to use Ajax to get the current status which requires Server-Side Scripting (I guess PHP in your case).
Store the total and completed URLs (or their counts) in the database or in a session and use get the percentage of completed URLs from there in PHP, called by a JavaScript Ajax request. Then give the percentage to the jQuery bar as Prutswonder suggested in another answer.
I suggest using JSON or simply Plaintext to receive the Data in JavaScript, XML would be unneccessary overhead (so it's actually AJAJ or AJAP, not Ajax).
I found a pop up Javascript bar. Might need some modifications to fit what you have in mind, but looks promising.
code is
<style>
<!--
.hide { position:absolute; visibility:hidden; }
.show { position:absolute; visibility:visible; }
-->
</style>
<SCRIPT LANGUAGE="JavaScript">
//Progress Bar script- by Todd King (tking#igpp.ucla.edu)
//Modified by JavaScript Kit for NS6, ability to specify duration
//Visit JavaScript Kit (http://javascriptkit.com) for script
var duration=3 // Specify duration of progress bar in seconds
var _progressWidth = 50; // Display width of progress bar.
var _progressBar = "|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||"
var _progressEnd = 5;
var _progressAt = 0;
// Create and display the progress dialog.
// end: The number of steps to completion
function ProgressCreate(end) {
// Initialize state variables
_progressEnd = end;
_progressAt = 0;
// Move layer to center of window to show
if (document.all) { // Internet Explorer
progress.className = 'show';
progress.style.left = (document.body.clientWidth/2) - (progress.offsetWidth/2);
progress.style.top = document.body.scrollTop+(document.body.clientHeight/2) - (progress.offsetHeight/2);
} else if (document.layers) { // Netscape
document.progress.visibility = true;
document.progress.left = (window.innerWidth/2) - 100+"px";
document.progress.top = pageYOffset+(window.innerHeight/2) - 40+"px";
} else if (document.getElementById) { // Netscape 6+
document.getElementById("progress").className = 'show';
document.getElementById("progress").style.left = (window.innerWidth/2)- 100+"px";
document.getElementById("progress").style.top = pageYOffset+(window.innerHeight/2) - 40+"px";
}
ProgressUpdate(); // Initialize bar
}
// Hide the progress layer
function ProgressDestroy() {
// Move off screen to hide
if (document.all) { // Internet Explorer
progress.className = 'hide';
} else if (document.layers) { // Netscape
document.progress.visibility = false;
} else if (document.getElementById) { // Netscape 6+
document.getElementById("progress").className = 'hide';
}
}
// Increment the progress dialog one step
function ProgressStepIt() {
_progressAt++;
if(_progressAt > _progressEnd) _progressAt = _progressAt % _progressEnd;
ProgressUpdate();
}
// Update the progress dialog with the current state
function ProgressUpdate() {
var n = (_progressWidth / _progressEnd) * _progressAt;
if (document.all) { // Internet Explorer
var bar = dialog.bar;
} else if (document.layers) { // Netscape
var bar = document.layers["progress"].document.forms["dialog"].bar;
n = n * 0.55; // characters are larger
} else if (document.getElementById){
var bar=document.getElementById("bar")
}
var temp = _progressBar.substring(0, n);
bar.value = temp;
}
// Demonstrate a use of the progress dialog.
function Demo() {
ProgressCreate(10);
window.setTimeout("Click()", 100);
}
function Click() {
if(_progressAt >= _progressEnd) {
ProgressDestroy();
return;
}
ProgressStepIt();
window.setTimeout("Click()", (duration-1)*1000/10);
}
function CallJS(jsStr) { //v2.0
return eval(jsStr)
}
</script>
<SCRIPT LANGUAGE="JavaScript">
// Create layer for progress dialog
document.write("<span id=\"progress\" class=\"hide\">");
document.write("<FORM name=dialog id=dialog>");
document.write("<TABLE border=2 bgcolor=\"#FFFFCC\">");
document.write("<TR><TD ALIGN=\"center\">");
document.write("Progress<BR>");
document.write("<input type=text name=\"bar\" id=\"bar\" size=\"" + _progressWidth/2 + "\"");
if(document.all||document.getElementById) // Microsoft, NS6
document.write(" bar.style=\"color:navy;\">");
else // Netscape
document.write(">");
document.write("</TD></TR>");
document.write("</TABLE>");
document.write("</FORM>");
document.write("</span>");
ProgressDestroy(); // Hides
</script>
<form name="form1" method="post">
<center>
<input type="button" name="Demo" value="Display progress" onClick="CallJS('Demo()')">
</center>
</form>
Text link example
<p align="center">This free script provided by<br />
<a href="http://www.javascriptkit.com">JavaScript
Kit</a></p>
found here code
You can make the progress bar by increasing the div width at some interval of time.
For example, you may increase the 1px width of div at each 50 milliseconds like,
var width = 1
function render (){
if(width <=100){
// apply width to div for progress bar
div.style.width = width + "px";
setTimeout(
function (){
render();
width++;
},50
);
}
}
render();

Categories