I have a <div> that I can resize and I have font-sie that becomes smaller only if I resize the window. How can I make the font-size smaller on <div> resize? I want to have it on the same line.
Here I have my code:
$('.resize').resizable({minWidth: 110,
minHeight: 120});
.resize{
font-size: 2.8vh;
white-space: nowrap;
color: black;
background:yellow;
cursor:move;
width:130px;
height:130px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/smoothness/jquery-ui.css">
<div class="resize">Some name that is very long</div>
P.S. use the full page to see the problem
This Resizable Widget has an events named resize. You could listen for this event and achieve what you want.
Example:
$('.resize').resizable( {
minWidth: 110,
minHeight: 120,
resize: function( event, ui ) {
// handle fontsize here
var size = ui.size;
// something like this change the values according to your requirements
$( this ).css( 'font-size', ( size.width * size.height ) / 2800 + 'px' );
}
} );
.resize{
font-size: 2.8vh;
white-space: nowrap;
color: black;
background: yellow;
cursor: move;
width: 130px;
height: 130px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/smoothness/jquery-ui.css">
<div class="resize">Some name that is very long</div>
To achieve this you can use the textFill() plugin created by GeekyMonkey in this answer, and apply it to the div under the resize event. The only change you need to make to the HTML is to wrap the text in a span element. Try this:
;(function($) {
$.fn.textfill = function(options) {
var fontSize = options.maxFontPixels;
var ourText = $('span:visible:first', this);
var maxHeight = $(this).height();
var maxWidth = $(this).width();
var textHeight;
var textWidth;
do {
ourText.css('font-size', fontSize);
textHeight = ourText.height();
textWidth = ourText.width();
fontSize = fontSize - 1;
} while ((textHeight > maxHeight || textWidth > maxWidth) && fontSize > 3);
return this;
}
})(jQuery);
let textFillOpts = { maxFontPixels: 36 };
$('.resize').resizable({
minWidth: 110,
minHeight: 120,
resize: function(e, ui) {
console.log(ui.element);
$(ui.element).textfill(textFillOpts);
}
}).textfill(textFillOpts);;
.resize {
font-size: 2.8vh;
white-space: nowrap;
color: black;
background: yellow;
cursor: move;
width: 130px;
height: 130px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/smoothness/jquery-ui.css">
<div class="resize"><span>Some name that is very long</span></div>
Related
Here is a resizable UI plugin JS that is working fine with mouse click & drag.
It's changing it's font-size with mouse. Meaning, when I change the width or height of my div with id="chartdiv" from mouse corner then it is changing the font-size correctly. However, when I change the width or height of my div with id="chartdiv" from button onClick, then it's not working.
I want to use this font-size resizable feature from Button.
For this query I already visited to this answer: How to trigger jquery Resizable resize programmatically? but there is not font-size function
What mistake am I making here?
Below is my code:
<!DOCTYPE html>
<html>
<head>
<style>
.resize{
font-size: 2.8vh;
white-space: nowrap;
color: black;
background: yellow;
cursor: move;
width: 300px;
height: 130px
}
.resize:focus {
width: 500px; }
</style>
<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
</head>
<body>
<button type="button" onClick = "document.getElementById('chartdiv').style.width = '600px';">Click Me!</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/smoothness/jquery-ui.css">
<div class="resize" id="chartdiv">Some name that is very long</div>
<script type="text/javascript">
$('.resize').resizable( {
minWidth: 210,
minHeight: 120,
resize: function( event, ui ) {
// handle fontsize here
var size = ui.size;
// something like this change the values according to your requirements
$( this ).css( 'font-size', ( size.width * size.height ) / 2800 + 'px' );
}
} );
</script>
</body>
</html>
Thanks in advance.
Following creates a simple jQuery plugin function fontResize() that can be used in both instances
$.fn.fontResize = function() {
return this.each(function() {
const $el = $(this);
$el.css('font-size', ($el.width() * $el.height()) / 2800 + 'px');
});
}
$('button.do-resize').click(function(){
$('#chartdiv').width(600).fontResize()// use plugin function
})
$('.resize').resizable({
minWidth: 210,
minHeight: 120,
resize: function(event, ui) {
$(this).fontResize();// use plugin function
}
});
<!DOCTYPE html>
<html>
<head>
<style>
.resize {
font-size: 2.8vh;
white-space: nowrap;
color: black;
background: yellow;
cursor: move;
width: 300px;
height: 130px
}
.resize:focus {
width: 500px;
}
</style>
<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
</head>
<body>
<button class="do-resize" type="button" >Click Me!</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/smoothness/jquery-ui.css">
<div class="resize" id="chartdiv">Some name that is very long</div>
</body>
</html>
<button type="button" onClick = "ResizeWithButton();">Click Me!</button>
function ResizeWithButton(){
var x = document.getElementById('chartdiv');
x.style.width = '600px';
var rect = x.getBoundingClientRect();
x.style.fontSize = `${(rect.width * rect.height)/2800}px`;
}
I saw a code and i was trying to modify the size of the circles, but i don't know whither i can change it using js or css .Is there any way to change it ?
The full code is from:
https://codepen.io/XTn-25/pen/NWqeBaz
hesr is js code:
/**
* index.js
* - All our useful JS goes here, awesome!
Maruf-Al Bashir Reza
*/
console.log("JavaScript is amazing!");
$(document).ready(function($) {
function animateElements() {
$('.progressbar').each(function() {
var elementPos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
var percent = $(this).find('.circle').attr('data-percent');
var percentage = parseInt(percent, 10) / parseInt(100, 10);
var animate = $(this).data('animate');
if (elementPos < topOfWindow + $(window).height() - 30 && !animate) {
$(this).data('animate', true);
$(this).find('.circle').circleProgress({
startAngle: -Math.PI / 2,
value: percent / 100,
thickness: 14,
fill: {
color: '#1B58B8'
}
}).on('circle-animation-progress', function(event, progress, stepValue) {
$(this).find('div').text((stepValue * 100).toFixed(1) + "%");
}).stop();
}
});
}
// Show animated elements
animateElements();
$(window).scroll(animateElements);
});
It seems like it's using this as a dependency. So in order to change the circle size, you need to add size property which defaults to 100:
$(this).find('.circle').circleProgress({
startAngle: -Math.PI / 2,
value: percent / 100,
thickness: 14,
fill: {
color: '#1B58B8'
},
size: 300 // <-- here, the size changes the circle radius
})
and in order to stop overlapping the circles, you also need to modify the CSS a little bit by increasing the width of the .progressbar element:
.progressbar {
display: inline-block;
width: 300px;
margin: 25px;
}
So the full example would look like this:
/**
* index.js
* - All our useful JS goes here, awesome!
Maruf-Al Bashir Reza
*/
console.log("JavaScript is amazing!");
$(document).ready(function($) {
function animateElements() {
$('.progressbar').each(function() {
var elementPos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
var percent = $(this).find('.circle').attr('data-percent');
var percentage = parseInt(percent, 10) / parseInt(100, 10);
var animate = $(this).data('animate');
if (elementPos < topOfWindow + $(window).height() - 30 && !animate) {
$(this).data('animate', true);
$(this).find('.circle').circleProgress({
startAngle: -Math.PI / 2,
value: percent / 100,
thickness: 14,
fill: {
color: '#1B58B8'
},
size: 300
}).on('circle-animation-progress', function(event, progress, stepValue) {
$(this).find('div').text((stepValue * 100).toFixed(1) + "%");
}).stop();
}
});
}
// Show animated elements
animateElements();
$(window).scroll(animateElements);
});
/**
* index.scss
* - Add any styles you want here!
*/
body {
background: #f5f5f5;
}
.progressbar {
display: inline-block;
width: 300px;
margin: 25px;
}
.circle {
width: 100%;
margin: 0 auto;
margin-top: 10px;
display: inline-block;
position: relative;
text-align: center;
}
.circle canvas {
vertical-align: middle;
}
.circle div {
position: absolute;
top: 30px;
left: 0;
width: 100%;
text-align: center;
line-height: 40px;
font-size: 20px;
}
.circle strong i {
font-style: normal;
font-size: 0.6em;
font-weight: normal;
}
.circle span {
display: block;
color: #aaa;
margin-top: 12px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>My New Pen!</title>
<!-- Styles -->
<link rel="stylesheet" href="styles/index.processed.css">
</head>
<body>
<h1 style="margin:auto;text-align:center;color:skyblue;">Circle Progressbar When Scroll</h1>
<div style="width:100%;height:800px;">↓ Scroll down ↓</div>
<h3>Title (Placeholder)</h3>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="100">
<div></div>
<p>Testing</p>
</div>
</div>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="30.5">
<div></div>
<p>Testing</p>
</div>
</div>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="77">
<div></div>
<p>Testing</p>
</div>
</div>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="49">
<div></div>
<p>Testing</p>
</div>
</div>
<div style="width:100%;height:500px;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://rawgit.com/kottenator/jquery-circle-progress/1.2.1/dist/circle-progress.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>
I'm using jQuery to get user's current height, and after he reaches that height, there will be animation function (Such as reactive websites, when user scroll down he has animation in different part of the page).
Yet, I can't really figure out why exactly the following code doesn't work.
$(window).scroll(function() {
var height = $(window).scrollTop();
if(height > 200) {
$("#project").animate({
bottom: '250px',
opacity: '0.5',
height: '1000px',
width: '100%'
});
}
});
CSS:
/* About Page */
.about{
width: 100%;
height: 1000px;
background-color: blue;
}
/* Projects Page */
.project{
background-color: red;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="jquery-3.4.1.min.js"></script>
<script src="myscripts.js"></script>
<title>My Portfolio</title>
</head>
<body>
<div id="about" class="about">
</div>
<div id="project" class="project">
</div>
</body>
</html>
How can I use scrolling height indicator to activate functions such as animation?
You need to take into account the height of each section and calculate the scrollBottom position instead, which might be more useful if you want to trigger an animation once you reach some element:
const $about = $('#about');
const $projects = $('#projects');
const $services = $('#services');
// Calculate the top offset of each section (number of sections above it * 1000px each).
// We want to expand them when we are 50px above them, so we substract that.
let projectTop = 1000 - 50;
let servicesTop = 2000 - 50;
$(window).scroll(() => {
requestAnimationFrame(() => {
// Calculate the scrollBottom by summing the viewport's height:
const scrollBottom = $(window).scrollTop() + $(window).height();
if (scrollBottom >= projectTop) {
$projects.animate({ height: '1000px' });
}
if (scrollBottom >= servicesTop) {
$services.animate({ height: '1000px' });
}
});
});
body {
margin: 0;
}
.about {
background: red;
width: 100%;
height: 1000px;
}
.projects {
background: green;
width: 100%;
}
.services {
background: blue;
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="about" class="about"></div>
<div id="projects" class="projects"></div>
<div id="services" class="services"></div>
How can i add div every time when height of page becomes greater than 11.5in? I need to copy same div every time that happens.
<div class="logo-etm">
<img src="/img/etm-logo.png" class="etm">
</div>
I have this code,but it wont work like i want it to:
$( document ).ready( function(){
var e = $( '.logo-etm' );
if( $("body").height() > 11.5 ){
e.clone().insertAfter( e );
}
});
it puts all divs one across the other... i need them below. Can someone help?
and this is css:
$('.logo-etm').css('display','block').css('margin-top','-1.5in').css('width','100%');
$('.etm').css('position','fixed').css('z-index','-1').css('width','30%');
Your css is not css is JS so you have to apply it to the new cloned node !
Try to apply it after node cloning !
$(document).ready(function() {
var e = $('.logo-etm');
if($("body").height() > 11.5){
e.clone().insertAfter(e);
}
$('button').click(function(){
// $('.logo-etm').css('display','block').css('margin-top','-1.5in').css('width','100%');
// $('.etm').css('position','fixed').css('z-index','-1').css('width','30%');
$('.logo-etm').css({
'display' :'block' ,
'margin-top' :'1100px' ,
'width' :'100%'
});
$('.etm').css({
'position' :'realtive' ,
'z-index' :'-1' ,
'width' :'30%'
});
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="logo-etm">
<img src="https://openclipart.org/image/100px/svg_to_png/220732/Tribal-Kitten.png&disposition=attachment" alt="Tribal Kitten" title="Tribal Kitten by GDJ ( https://openclipart.org/user-detail/GDJ )" class="etm"/>
</div>
<button>click to apply css</button>
11.5 in is not a unit jQuery can work with. $('body').height() returns a unitless value based on pixels, as is stated in the documentation of the height() method. May I ask why you opted to using inches?
Would swapping the inches for its equivalent in pixels be an option? The element is properly inserted if so, see the attached example. If the body height is bigger than 500 px the element will be cloned and inserted after the first element.
To make sure that the body's (viewport) height is returned properly in this case, I have given the html and body tags height: 100%.
$(document).ready(function() {
// What is the original logo?
var logo = $('.logo');
// Where should the duplicated logo go to?
var target = $('.body');
// What should the min-height be before inserting the duplicated logo?
if ($("body").height() > 50) {
logo.clone().css({
'position': 'fixed',
'background': 'red',
'z-index': '-1',
'width': '75px',
'top': '0px',
'left': '0px',
}).insertAfter(logo);
logo.css({
'margin-top': '1100px',
'display': 'block'
});
}
});
html,
body {
margin: 0;
padding: 0;
}
body {
font: bold 2em sans-serif;
color: #fff;
border: 1px solid #000;
}
.logo {
position: relative;
background: #7A59A5;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="logo">elem</div>
Update
The following code will copy and insert the copied logo every amount of pixels defined in var size
$(document).ready(function() {
// What is the original logo?
var logo = $('.logo');
// At what size should a new logo be inserted?
var size = 1100;
if($('body').height() > size) {
for(var i = (size * 2); i < ($('body').height()); i += size) {
logo.clone().css({
'position': 'absolute',
'background': 'red',
'z-index': '-1',
'width': '100px',
'top': i + 'px'
}).insertAfter(logo);
}
logo.css({
'margin-top': '1100px',
'display': 'block'
});
}
});
html,
body {
margin: 0;
padding: 0;
}
body {
font: bold 2em sans-serif;
color: #fff;
height: 6000px;
}
.logo {
position: relative;
background: #7A59A5;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="logo">logo</div>
I am adapting the Coverflow technique to work with a div. Following is the html:
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body,html {
margin: 0;
padding: 0;
background: #000;
height: 100%;
color: #eee;
font-family: Arial;
font-size: 10px;
}
div.magnifyme {
height: 80px;
padding: 80px;
position: absolute;
top: 0px;
left: 0px;
width: 2000px;
}
div.wrapper {
margin: 0px;
height: 470px;
/*border: 2px solid #999;*/
overflow: hidden;
padding-left: 40px;
right: 1px;
width: 824px;
position: relative;
}
div.container {position: relative; width: 854px; height: 480px; background: #000; margin: auto;}
div.nav {position: absolute; top: 10px; width: 20%; height: 10%; right: 1px; }
div.magnifyme div {
position: absolute;
width: 300px;
height: 280px;
float: left;
margin: 5px;
position: relative;
border: 2px solid #999;
background: #500;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="ui.coverflow.js"></script>
<script type="text/javascript" src="ui.core.js"></script>
<script type="text/javascript">
$(function() {
$("div.magnifyme").coverflow();
$("#add").click(function() {
$(".magnifyme").append("<div id=\"div5\">hello world</div>");
$("div.magnifyme").coverflow();
});
});
</script>
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="magnifyme">
<div id="div0">This is div 0</div>
<div id="div1">This is div 1</div>
<div id="div2">This is div 2</div>
<div id="div3">This is div 3</div>
<div id="div4">This is div 4</div>
</div>
</div>
<div class="nav">
<button type="button" id="add">Add to Deck</button>
</div>
</div>
</body>
</html>
The coverflow function (included as a js file in the head section) is here. When I click the button, I was expecting it to add a DIV to the already present deck. For some reason, it doesn't show the newly added DIV. I tried calling the coverflow() function after I added the new element but that didn't work either. The modified coverflow function is given here:
;(function($){
$.widget("ui.coverflow", {
init: function() {
var self = this;
this.items = $(this.options.items, this.element).bind("click", function() {
self.moveTo(this);
//$("div.slider").slider("moveTo", self.current, null, true);
});
this.itemWidth = this.items.outerWidth(true);
this.current = 0; //Start item
this.refresh(1, 0, this.current);
this.element.css("left",
(-this.current * this.itemWidth/2)
+ (this.element.parent()[0].offsetWidth/2 - this.itemWidth/2) //Center the items container
- (parseInt(this.element.css("paddingLeft")) || 0) //Subtract the padding of the items container
);
},
moveTo: function(item) {
this.previous = this.current;
this.current = !isNaN(parseInt(item)) ? parseInt(item) : this.items.index(item);
if(this.previous == this.current) return false; //Don't animate when clicking on the same item
var self = this, to = Math.abs(self.previous-self.current) <=1 ? self.previous : self.current+(self.previous < self.current ? -1 : 1);
$.fx.step.coverflow = function(fx) {
self.refresh(fx.now, to, self.current);
};
this.element.stop().animate({
coverflow: 1,
left: (
(-this.current * this.itemWidth/2)
+ (this.element.parent()[0].offsetWidth/2 - this.itemWidth/2) //Center the items container
- (parseInt(this.element.css("paddingLeft")) || 0) //Subtract the padding of the items container
)
}, {
duration: 1000,
easing: "easeOutQuint"
});
/*current = this.current;
$("[id^=div]").each(function() {
if(this.id != "div"+current) {
console.info(this.id + " Current: " + current);
$(this).fadeTo( 'slow', 0.1);
}
});*/
},
refresh: function(state,from,to) {
var self = this, offset = null;
this.items.each(function(i) {
var side = (i == to && from-to < 0 ) || i-to > 0 ? "left" : "right";
var mod = i == to ? (1-state) : ( i == from ? state : 1 );
var before = (i > from && i != to);
$(this).css({
webkitTransform: "matrix(1,"+(mod * (side == "right" ? -0.5 : 0.5))+",0,1,0,0) scale("+(1+((1-mod)*0.5))+")",
left: (
(-i * (self.itemWidth/2))
+ (side == "right"? -self.itemWidth/2 : self.itemWidth/2) * mod //For the space in the middle
),
zIndex: self.items.length + (side == "left" ? to-i : i-to)
});
if(!$.browser.msie)
$(this).css("opacity", 1 - Math.abs((side == "left" ? to-i : i-to))/2);
});
}
});
$.extend($.ui.coverflow, {
defaults: {
items: "> *"
}
});
})(jQuery);
One thing I did notice is that after clicking the button for about 5-10 times, the elements show up but not along with the already present divs but rather below them. I am guessing that this has something to do with the CSS of the magnifyme class (2000px), but I am not sure what it is. Is there any way I can make this work?
You need to write an additional function for the coverflow widget:
add: function(el) {
var self = this;
this.element.append(el)
this.options.items = $('> *', this.element);
this.items = $(this.options.items, this.element).bind("click", function() {
self.moveTo(this);
});
this.itemWidth = this.items.outerWidth(true);
this.moveTo(this.items.length-1);
},
and then call it like so:
$("#add").click(function() {
$("div.magnifyme").coverflow('add', "<div></div>");
});
First, you need to add a references to the jQuery UI core, and it also appears that it requires the jQuery slider plugin.
Second, in your click event you're doing a location.reload, which is refreshing the page from the server, resetting any changes you had made to the page. (if you make the DIVs much smaller you can see one flash in before the page is reloaded).
You are getting a js error on the page -- "$.widget is not a function" because you didn't include the jqueryUI library. http://jqueryui.com/
Also if you remove the location.reload line, your code will work, however, I would rewrite that script block like this, so that everything clearly runs when the document is ready:
<script type="text/javascript">
$(document).ready(function() {
$("div.magnifyme").coverflow();
$("#add").click(function() {
$(".magnifyme").append("<div id=\"div5\">hello world</div>");
$("div.magnifyme").coverflow();
});
});
</script>