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!
Related
Problem: Hi, I have 3 canvas elements in my single page. All of them are basically used for signature purposes so I've used fabric JS so user could have a pen like functionality and draw their signatures. Now, upon selection of some other options present at the top of the page new elements are added dynamically and that makes all of my canvas signature element stuck and I can't draw anything on them.
What I Tried: I've tried re-initialising canvas when the DOM is changed(or new divs are added) but it still gets stuck. It works fine when I first load the page and no new element is added.
Reference Link: This dude was having the same issue what I am facing but, the proposed solutions didn't works in my case.
$(document).ready(function() {
canvas_init1();
});
function canvas_init1() {
//alert('canvas initialized...');
var canvas = new fabric.Canvas('c1');
canvas.isDrawingMode = true;
canvas.freeDrawingBrush.width = 3;
console.log(canvas);
var pracCanvas = new fabric.Canvas('prac-canvas');
pracCanvas.isDrawingMode = true;
pracCanvas.freeDrawingBrush.width = 3;
var patCanvas = new fabric.Canvas('pat-canvas');
patCanvas.isDrawingMode = true;
patCanvas.freeDrawingBrush.width = 3;
}
I also tried adding calcOffset() and renderAll() but, it didn't made any difference. Thanks for your help in advance.
I solved it by adding
canvas.on('after:render', function(){ this.calcOffset(); });
on each canvas. The complete code becomes the following:
var canvas = new fabric.Canvas('c1');
canvas.on('after:render', function(){ this.calcOffset(); });
canvas.isDrawingMode = true;
canvas.freeDrawingBrush.width = 1;
console.log(canvas);
var pracCanvas = new fabric.Canvas('prac-canvas');
pracCanvas.on('after:render', function(){ this.calcOffset(); });
pracCanvas.isDrawingMode = true;
pracCanvas.freeDrawingBrush.width = 1;
var patCanvas = new fabric.Canvas('pat-canvas');
patCanvas.on('after:render', function(){ this.calcOffset(); });
patCanvas.isDrawingMode = true;
patCanvas.freeDrawingBrush.width = 1;
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>
So for one of my labs, I'm trying to get a blurred image with one src to appear as a clear image from a different source. So far I've only managed to change the blurred image to the clear image, but not the other way around.
So far, I have the if statement and a string indexOf as a part of my lab requirements. Now bear in mind that by my instructions, I'm not allowed to edit any HTML for this project.
function toggleImages(){
//(document.getElementById("clickimage").src = 'images/lab9_blurred');
//console.log(str.indexOf("clickimage"));
//var images = 'images/lab9_blurred.jpg';
var str = "images/lab9_blurred.jpg";
console.log(str.indexOf("blurred"));
var str = "images/lab9_clear.jpg";
console.log(str.indexOf("clear"))
//click it once, it's true, click it again, it's false. That's what should happen. But how do we do that?
//If image = "images/lab9_blurred.jpg" then for variable image we get clickimage, set variable name to lab 9 clear, and set image source to name.
//if (fake == true){
if (str.indexOf("blurred") == 12){
var image = document.getElementById("clickimage");
var name = "images/lab9_blurred.jpg";
image.src = name;
console.log(str.indexOf("blurred"));
}
else if (str.indexOf("clear") == 12)
{
var image = document.getElementById("clickimage");
var name = "images/lab9_clear.jpg";
image.src = name;
console.log(str.indexOf("clear"));
}
};
window.onload = init;
Hi try following code...
function toggleImages(){
var image = document.getElementById("clickimage");
if (image.src.indexOf("blurred") == 12)
{
var str = "images/lab9_clear.jpg";
console.log(str.indexOf("clear"))
}
else
{
var str = "images/lab9_blurred.jpg";
console.log(str.indexOf("blurred"));
}
image.src = str;
};
window.onload = init;
How do I flow a text stream from one div to the next? Each div has a fixed height and width and I need the data to be passed to the first, then if that is filled overflow to another etc. (The second etc. divs need to be dynamically created). Eventually the divs will be contenteditable, this is the page technique for a simple WYSIWYG style editor.
Please help...
JS Fiddle (note zoom in use on body)(I need to reflow on keyup/down, make pages and remove as necessary and be able to add in the middle)
function loadgo(){
run();
var h = document.getElementById('page'+(document.getElementById("pagecount").value-1)).offsetHeight;
document.getElementById("loadgo").value = h+1;
if (h > 1135){
var pagecount = document.getElementById("pagecount").value;
//$('body').append("<div class=page style='color:#F00' id='page"+pagecount+"' contenteditable>"+this.id+"</div>");
var objTo = document.body;
var divtest = document.createElement("div");
divtest.style.color = '#F00';
divtest.id = "page"+pagecount;
divtest.className = 'page';
divtest.contentEditable = "true";
divtest.innerHTML = "new div";
objTo.appendChild(divtest);
document.getElementById("page"+pagecount).focus();
document.getElementById("pagecount").value++;
zoomin();zoomout();
run();
}
}
function run(){
setTimeout(function() {
loadgo();
}, 500);
}
loadgo();
What you're looking for is called CSS Regions. This allows your text to flow through various containers placed on your site.
You can read about it on Adobe's site, and Apple has a nice WWDC video explaining how to implement it (starts at 8:40). Also check out the Editor's Draft.
Can someone help me with JavaScript code that resizes a font in a div if the screen width is lower than 1100px
if (window.screen.width <= 1100) {
var item = document.getElementById("div1");
item.style.fontSize = "25px";
item.innerHTML = "String";
}
This is what I have so far. Can someone help me with what to do next?
Your code works for me in JS Fiddle. Perhaps you are not specifying the correct id for your div or something like that.
http://jsfiddle.net/trott/GqFPY/
If you are hoping the code will be triggered on a browser resize, you will need to bind it to an event. (See Michael's answer.)
You will need to bind the action to the window.onresize event:
var resizeFonts = function() {
var item = document.getElementById("div1");
if (window.screen.width <= 1100) {
item.style.fontSize = "25px";
item.innerHTML = "String";
}
// Otherwise set a larger font
else item.style.fontSize = "30px";
};
window.onload = resizeFonts;
window.onresize = resizeFonts;
I have an OLD blog in which I posted about changing the font size, but it was made to show how to use jQueryUI slider. Maybe you can use some of the logic there to create your own solution:
http://weblogs.asp.net/thiagosantos/archive/2009/03/21/my-first-time-with-jquery-ui.aspx