Set Max Font Size in Javascript - javascript

Quick Question, how am i able to set the max font size so that the font wont get too big when resizing? my default font size is 22px, but using this code it goes up higher that the default.
<script>
function resize_text(){
resize = $(window).width()/50;
min = 18;
if(resize > min){
$('p').css('font-size',resize + 'px');
$('h1').css('font-size',resize + 'px');
$('.bottom-list').css('font-size',resize + 'px');
} else {
$('p').css('font-size',min + 'px');
$('h1').css('font-size',min + 'px');
$('.bottom-list').css('font-size',min + 'px');
}
}
$(window).resize(function(){
resize_text();
})
</script>

You are using resize = $(window).width()/50; , where resize value may go beyond 22 .
If your default value is 22 , you may try this code :
resize = 22;
if($(window).width()/50 < 22){
resize = $(window).width()/50
}

Instead of doing this with javascript, wy don't you do this with css?
p{font-size: 100%} or provide anyother percentage criteria as per your requirement.
I think it will resolve your issue.

You can change the line that resize is defined on too:
newsize = $(window).width()/50;
resize = newsize > 22 ? 22 : newsize;

Related

How to check for retina display in jQuery and serve double-resolution images accordingly?

I have a little JS-script that checks window-width on resize event and serves different full-screen background images specified on the html-side in data-attributes accordingly. Unfortunately, I cannot use a CSS-solution in this particular case.
The solution on its own works, but it does not incorporate images for retina displays. If I see this correctly, images for retina displays need twice the resolution to be displayed correctly. I have set the following breakpoints in the script: 1280 x 720px (retina: 2560 x 1440) , 1920 x 1080 px (retina: 3840 x 2160), larger than 2560 x 1440 px (retina: 5120 x 2880).
HTML:
<section id="page-title" class="page-title-lg img-cover header-lg" data-bg-xxl="test/2560.jpg" data-bg-xl="test/fullhd.jpg" data-bg-lg="test/hdready.jpg">
<div class="container">
<div class="page-title-wrapper">
<div class="page-title-txt">
<h1>Large Page Title</h1>
</div>
</div>
</div>
</section>
JS:
function checkWidth(){
var screenWidth = $window.width();
if( screenWidth <= 1280 ){
// Hd-ready desktop - 1280 x 720
$('[data-bg-lg]').each(function() {
var dataImg = $(this).attr('data-bg-lg');
$(this).css('background-image', 'url(assets/img/' + dataImg + ')');
});
} else if ( screenWidth >= 1281 && screenWidth <= 1920 ) {
// Full-hd desktop - 1920 x 1080
$('[data-bg-xl]').each(function() {
var dataImg = $(this).attr('data-bg-xl');
$(this).css('background-image', 'url(assets/img/' + dataImg + ')');
});
} else {
// Huge desktop - 2560 x 1440
$('[data-bg-xxl]').each(function() {
var dataImg = $(this).attr('data-bg-xxl');
$(this).css('background-image', 'url(assets/img/' + dataImg + ')');
});
}
}
The question now is how to check for a retina / non-retina display and serve the correct image set with the double resolution accordingly?
Check if window.devicePixelRatio is higher than 1, and replace images with their high-resolution versions if it is.
var query = "(-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2), (min-resolution: 192dpi)";
if (matchMedia(query).matches) {
// do high-dpi stuff
} else {
// do non high-dpi stuff
}

Jquery doesn't change div's width on smaller screen after auto adjusting on regular screen

Got the script that auto adjusts width of children divs depending on the number of children. And on smaller screen i need them to be 100% wide. I've tried inserting the script right into the script that adjusts width on regular screen. Doesn't work. Also tried inserting it in the very bottom of the page. Didn't work too.
Here is the code
$(".basecollections").each(function(){
var child_width = 100 / $(this).children().length;
child_width = Math.floor(child_width);
$(this).children().css("width", child_width + "%");
if ( screen.width < 1000 ) {
$(this).children().css('width','100%');
}
})
http://jsfiddle.net/3x466nb1/
instead of screen.width you need to use $(window).width(): DEMO
$(".basecollections").each(function(){
var child_width = 100 / $(this).children().length;
child_width = Math.floor(child_width);
$(this).children().css("width", child_width + "%");
if ( $(window).width() < 1000 ) {
$(this).children().css('width','100%');
}
});
also if you want the change to be dynamic, you need to write this piece of code inside the resize event of the window element:
$(window).resize(function(){
$(".basecollections").each(function(){
var child_width = 100 / $(this).children().length;
child_width = Math.floor(child_width);
$(this).children().css("width", child_width + "%");
if ( $(window).width() < 1000 ) {
$(this).children().css('width','100%');
}
});
});

How to use maximum for JS math in CSS-related function

I've written a function below that allows the user to control the size of certain objects based on a scroll position. The issue is that I don't know how to force the math to stop a minimum or maximum.
In this case, I would like the header width to decrease until it's 25% wide.
function EasyPeasyParallax() {
var scrollPos = $(document).scrollTop();
var currentSize = 100
$('.header').css({ 'width': (currentSize - Math.min(scrollPos/1.5,2000)) + '%' });
};
$(document).ready(function() {
$('body').bind('mousewheel', EasyPeasyParallax);
});
I've tried Math.max(), but ultimately don't really know how to make this happen.
Any help?
Codepen here: http://codepen.io/bsley/pen/gGyhm
I might be barking up wrong tree, but you could set min-width and max-width like this, because you are using .css() not .width():
.header{
min-width:25%;
max-width:100%;
}
Hope this helps.
Try this:
var width = (currentSize - Math.min(scrollPos/1.5,2000)),
min = 25, // Min percentage
max = 100; // Max percentage
width = (width < min) ? min: (width > max) ? max : width;
$('.header').css({ 'width': width + '%' });
I'm using a ternary operator as a shorthand, it basically does this:
if(width < min) {
width = min;
} else {
if(width > max) {
width = max;
} else {
width = width;
}
}

Parallax effect issue using JavaScript

I am trying to achieving a parallax effect using JavaScript.
I have a primary header in which its height is determined by the height of the browser to make it full height. I then want to push down the secondary header by however much the height is of the primary header.
This is what I have so far:
var primaryHeader = document.getElementById('primary-header');
var secondaryHeader = document.getElementById('secondary-header');
primaryHeader.style.height = (window.innerHeight || document.documentElement.clientHeight) - 40 + 'px';
secondaryHeader.style.marginTop = primaryHeader + 40 + 'px';
window.onresize = function() {
primaryHeader.style.height = (window.innerHeight || document.documentElement.clientHeight) - 40 + 'px';
secondaryHeader.style.marginTop = primaryHeader + 40 + 'px';
};
When I try to apply the margin to the secondary header it does not seem to work. Am I doing anything fundamentally wrong?
Here is an example fiddle: http://jsfiddle.net/d79TT/
Thanks.
The issue is here:
secondaryHeader.style.marginTop = primaryHeader.style.height + 40 + 'px';
You are doing string concatenation, instead of addition.
Because primaryHeader.style.height returns something like 172px, which is a string, so the end result would be:
172px40px
instead of
212px

change margin-left with JS

I want a dynamical margin-left on a given div.
I tried this code :
window.onload = function()
{
var pageWidth = window.innerWidth;
var size = (pageWidth - 200 ) / 2;
$('#search').css('margin-Left', size));
alert(size);
};
which doesn't work (the alert is here just for test purpose), the problem is coming from the ligne $('#search').css('margin-Left', size)); but I can't find out where...
I've tried with a lowercase l on margin-left and didn't work.
Would the following work for you?
document.getElementById("search").style.marginLeft = size + "px";
You need to specify the type of unit you want to use.
$('#search').css('margin-left', size + 'px');
Try using marginLeft, without the hypen.
jQuery.css() documentation: http://api.jquery.com/css/
JAVASCRIPT
$(document).ready(function(e){
alert('test');
var pageWidth = parseInt($(window).innerWidth());
alert(pageWidth);
var size = (pageWidth - 200 ) / 2;
$('#search').css('margin-left', size);
alert(size);
})
HTML
<div id = 'search'></div>
CSS
#search
{
height:100px;
width:100px;
background-color:#F00;
}
FIDDLE LINK

Categories

Resources