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>
Related
I need the image in the both divs below to be in the same position even if the other div changes height or width. I have tried calculating top and left to % from px but still it is not working. I have also tried calculating the % of how big or small other div is and adding or removing the top and left to the image in other div and still no luck.
To check the issue, drag the image around inside the first div and click on submit. Now the image inside the bottom div should be in the same position as the above div, same top and left distance.
Please help. Thanks.
Here is the fiddle : https://jsfiddle.net/kashyap_s/gLdt62nh
var zoomLevel = 1;
$("#myimage").draggable({
start: function() {
},
stop: function() {
}
});
$('#save').click(function() {
var topcss = $('#myimage').css('top');
var leftcss = $('#myimage').css('left');
var transformcss = zoomLevel;
topcss = topcss.replace('px', '');
leftcss = leftcss.replace('px', '');
topcss = parseInt(topcss);
leftcss = parseInt(leftcss);
var parentWidth = $('#dragDiv').outerWidth()
var parentHeight = $('#dragDiv').outerHeight()
console.log('leftcss', leftcss, 'width', parentWidth)
console.log('topcss', topcss, 'height', parentHeight)
var percentLeft = leftcss / parentWidth * 100;
var percentTop = topcss / parentHeight * 100;
console.log('percentLeft', percentLeft, 'percentTop', percentTop)
transformcss = parseFloat(transformcss).toFixed(2);
var result = {
"top": topcss,
"left": leftcss,
'percentTop': percentTop,
'percentLeft': percentLeft,
'parentWidth': parentWidth,
'parentHeight': parentHeight,
"transform": "scale(" + transformcss + ")"
};
var output = JSON.stringify(result);
console.log('output', output)
$("#newimg").css({
'left': leftcss
});
$("#newimg").css({
'top': topcss
});
});
.transperentimage {
width: 497px;
height: 329px;
border: 1px solid black;
margin: 0 auto;
}
#bigimg {
width: 651px;
height: 431px;
border: 1px solid black;
margin: 0 auto;
}
img {
border: 2px solid red;
padding: 3px;
width: auto;
height: auto;
cursor: move;
max-height: 180px;
}
#newimg {
position: absolute;
max-height: 180px;
width: auto!important;
height: auto!important;
max-width: 100%!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="transperentimage" id="dragDiv">
<img id="myimage" src="agent.png">
</div>
<button id="save">Save</button>
<div id="bigimg">
<img id="newimg" src="agent.png" />
</div>
$(function() {
$("#logo1").draggable({
containment: "parent",
drag: function() {
}
});
});
function setpos() {
var image1_w = $("#logo1").width();
var div1_w = $(".div1").width();
var image2_w = $("#logo2").width();
var div2_w = $(".div2").width();
var image1_h = $("#logo1").height();
var div1_h = $(".div1").height();
var image2_h = $("#logo2").height();
var div2_h = $(".div2").height();
var div1_aw = div1_w - image1_w;
var div2_aw = div2_w - image2_w;
var div1_ah = div1_h - image1_h;
var div2_ah = div2_h - image2_h;
var div
var xPos = $('#logo1').css('left');
var yPos = $('#logo1').css('top');
var ratio_w = parseFloat(div1_aw) / parseFloat(div2_aw);
var ratio_h = parseFloat(div1_ah) / parseFloat(div2_ah);
//let act = 1.39;
var div2_nw = parseFloat(xPos) / ratio_w;
var div2_nh = parseFloat(yPos) / ratio_h;
$("#posX").text('Div left:' + div2_nw);
$("#posA").text('Div Top:' + div2_nh);
$("#logo2").css({
'left': div2_nw,
'top': div2_nh
});
}
.div1 {
width: 497px;
height: 329px;
border: 1px solid black;
}
.div2 {
width: 651px;
height: 431px;
border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script
src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
crossorigin="anonymous"></script>
<p>Drag my logo.</p>
<div class="div1">
<img src="https://smteg.sefion.com/perfectmetal/assets/ui/sefion.jpg" style=" position: relative; left: 0px; top: 0px;" width="100" id="logo1">
</div>
<br>
<div class="div2">
<img style="position: relative;left: 0px;top: 0px" src="https://smteg.sefion.com/perfectmetal/assets/ui/sefion.jpg" width="100" id="logo2">
</div>
<br>
<button onclick="setpos();">
Save
</button>
<div id="posX">
</div>
<div id="posA">
</div>
<div id="posz">
</div>
<div id="posZ1">
</div>
Solved! check this out
HTML
<p>Drag my logo.</p>
<div class="div1">
<img src="https://smteg.sefion.com/perfectmetal/assets/ui/sefion.jpg" style=" position: relative; left: 0px; top: 0px;" width="100" id="logo1">
</div>
<br>
<div class="div2">
<img style="position: relative;left: 0px;top: 0px" src="https://smteg.sefion.com/perfectmetal/assets/ui/sefion.jpg" width="100" id="logo2">
</div>
<br>
<button onclick="setpos();">
Save
</button>
<div id="posX"></div>
<div id="posA"></div>
JS CODE
$( function() {
$( "#logo1" ).draggable(
{
containment: "parent",
drag: function() {
}
}
);
} );
function setpos()
{
var image1_w = $("#logo1").width();
var div1_w = $(".div1").width();
var image2_w = $("#logo2").width();
var div2_w = $(".div2").width();
var image1_h = $("#logo1").height();
var div1_h = $(".div1").height();
var image2_h = $("#logo2").height();
var div2_h = $(".div2").height();
var div1_aw = div1_w-image1_w;
var div2_aw = div2_w-image2_w;
var div1_ah = div1_h-image1_h;
var div2_ah = div2_h-image2_h;
var div
var xPos = $('#logo1').css('left');
var yPos = $('#logo1').css('top');
var ratio_w = parseFloat(div1_aw)/parseFloat(div2_aw);
var ratio_h = parseFloat(div1_ah)/parseFloat(div2_ah);
//let act = 1.39;
var div2_nw = parseFloat(xPos)/ratio_w;
var div2_nh = parseFloat(yPos)/ratio_h;
$("#posX").text('Div left:' + div2_nw);
$("#posA").text('Div Top:' + div2_nh);
$("#logo2").css({ 'left' : div2_nw, 'top' : div2_nh});
}
CSS
.div1{
width: 497px;
height: 329px;
border: 1px solid black;
}
.div2{
width: 651px;
height: 431px;
border: 1px solid black;
}
For your newimg, the parent must have a position that is relative. This way, the absolute positioning will be relative to the parent and not the body.
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
Consider the following code.
$(function() {
var zoomLevel = parseFloat(1 - ($("#dragDiv").outerWidth() / $("#bigimg").outerWidth()).toFixed(2));
function log(str) {
if ($(".log").length) {
$(".log").html(str);
} else {
$("<div>", {
class: "log"
}).html(str).appendTo("body");
}
}
function getPos(el) {
var par = $(el).parent();
var pos = {
top: parseInt($(el).css("top")),
left: parseInt($(el).css("left")),
zoom: "scale(" + (1 + zoomLevel) + ")",
parWidth: par.outerWidth(),
parHeight: par.outerHeight()
};
pos['perLeft'] = parseFloat((pos.left / pos.parWidth).toFixed(2)) * 100;
pos['perTop'] = parseFloat((pos.top / pos.parHeight).toFixed(2)) * 100;
return pos;
}
$("#myimage").draggable({
containment: "parent",
drag: function(e, ui) {
log("Left: " + ui.position.left + ", Top: " + ui.position.top);
},
start: function() {
// coordinates('#myimage');
},
stop: function() {
// coordinates('#myimage');
var p = getPos(this);
$(this).attr("title", JSON.stringify(p));
}
});
$('#save').click(function() {
var result = getPos($("#myimage"));
var output = JSON.stringify(result);
var nLeft = Math.round(result.perLeft * (1 + zoomLevel)) + "%";
var nTop = Math.round(result.perTop * (1 + zoomLevel)) + "%"
console.log(output, nLeft, nTop);
$("#newimg").css({
left: nLeft,
top: nTop
});
var p = getPos($("#newimg"));
$("#newimg").attr("title", JSON.stringify(p));
});
});
.transperentimage {
width: 497px;
height: 329px;
border: 1px solid black;
margin: 0 auto;
}
#bigimg {
width: 651px;
height: 431px;
border: 1px solid black;
margin: 0 auto;
position: relative;
}
img {
border: 2px solid red;
padding: 3px;
width: auto;
height: auto;
cursor: move;
/* max-width: 100%; */
max-height: 180px;
}
#newimg {
position: absolute;
max-height: 180px;
width: auto!important;
height: auto!important;
max-width: 100%!important;
}
.log {
font-size: 11px;
font-family: "Arial";
position: absolute;
top: 3px;
left: 3px
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="transperentimage" id="dragDiv">
<img id="myimage" src="https://i.imgur.com/4ILisqH.jpg">
</div>
<button id="save">Save</button>
<div id="bigimg">
<img id="newimg" src="https://i.imgur.com/4ILisqH.jpg" />
</div>
See More: https://www.w3schools.com/css/css_positioning.asp
Updated
Looking at it further, I am guessing that you might be trying to reposition the bigimg in relationship to myimage position. This requires scaling the percentage.
For example, if we move myimage to the far left, it will be at left: 247, and this is roughly 49% of 499px. 49% of 653 is around 319, and this would not place the image where we want it. We want it at 401.
bigimg is about 24% larger than dragDiv, so we need to scale our percentage. 49 * 1.24 = 60.74, round up to 61. 653 * .61 = 398.33 so better yet not perfect.
I get a code from other app that changes progress. Based on progress bar width property, can I change progress text?
I want an event that update the progress-indicator-text when progress-indicator-bar width changes. Code here:
$(function() {
//For demo purpose only
$('button').click(function() {
var percentWidth = $('.progress-indicator-bar').width() / $('.progress-indicator-bar').parent().width() * 100;
if (percentWidth < 100) $('.progress-indicator-bar').width(percentWidth + 10 + "%");
})
//Requires appropriate event/approach to change the text of .progress-indicator-text when width of .progress-indicator-bar changes.
$('.progress-indicator-bar').change(function() {
$('.progress-indicator-text').html($('.progress-indicator-bar').width() / $('.progress-indicator-bar').parent().width() * 100 + "%");
})
});
.progress-indicator-bar-holder {
width: 100px;
height: 10px;
background: #e4e4e4;
float: left;
}
.progress-indicator-bar {
background: #008000;
height: 10px;
}
.progress-indicator-text {
font-weight: bold;
font-size: 11px;
line-height: 8px;
margin-left: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- This code embeds from another application -->
<div class="progress-indicator">
<div class="progress-indicator-bar-holder">
<div class="progress-indicator-bar" style="width: 30%;"></div>
</div>
</div>
<!-- Based on progress-indicator-bar width the progress-indicator-text should change -->
<div class="progress-indicator-text">30%</div>
<br>
<button>Change</button>
It's a bit like breaking a butterfly on a wheel but you can utilize the MutationObserver API to watch for changes in the DOM.
Just register the div holding the percentage bar and whenever it's style attribute changes update the div containing the text.
Here's an example:
//For demo purpose only
$('button').click(function() {
var percentWidth = $('.progress-indicator-bar').width() / $('.progress-indicator-bar').parent().width() * 100;
if (percentWidth < 100) $('.progress-indicator-bar').width(percentWidth + 10 + "%");
})
var target = document.getElementsByClassName('progress-indicator-bar');
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.attributeName == "style") {
$('.progress-indicator-text').html($('.progress-indicator-bar').width() / $('.progress-indicator-bar').parent().width() * 100 + "%");
}
});
});
var config = {
attributes: true,
childList: true,
characterData: true
};
observer.observe(target[0], config);
.progress-indicator-bar-holder {
width: 100px;
height: 10px;
background: #e4e4e4;
float: left;
}
.progress-indicator-bar {
background: #008000;
height: 10px;
}
.progress-indicator-text {
font-weight: bold;
font-size: 11px;
line-height: 8px;
margin-left: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="progress-indicator">
<div class="progress-indicator-bar-holder">
<div class="progress-indicator-bar" style="width: 30%;"></div>
</div>
</div>
<!-- Based on progress-indicator-bar width the progress-indicator-text should change -->
<div class="progress-indicator-text">30%</div>
<br>
<button>Change</button>
You can trigger events in jQuery with the .trigger method when you are in a handler.
$(function() {
//For demo purpose only
$('button').click(function() {
var percentWidth = $('.progress-indicator-bar').width() / $('.progress-indicator-bar').parent().width() * 100;
if (percentWidth < 100) $('.progress-indicator-bar').width(percentWidth + 10 + "%");
$('.progress-indicator-bar').trigger('change') // i added this line
})
//Requires appropriate event/approach to change the text of .progress-indicator-text when width of .progress-indicator-bar changes.
$('.progress-indicator-bar').change(function() {
$('.progress-indicator-text').html($('.progress-indicator-bar').width() / $('.progress-indicator-bar').parent().width() * 100 + "%");
})
});
.progress-indicator-bar-holder {
width: 100px;
height: 10px;
background: #e4e4e4;
float: left;
}
.progress-indicator-bar {
background: #008000;
height: 10px;
}
.progress-indicator-text {
font-weight: bold;
font-size: 11px;
line-height: 8px;
margin-left: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- This code embeds from another application -->
<div class="progress-indicator">
<div class="progress-indicator-bar-holder">
<div class="progress-indicator-bar" style="width: 30%;"></div>
</div>
</div>
<!-- Based on progress-indicator-bar width the progress-indicator-text should change -->
<div class="progress-indicator-text">30%</div>
<br>
<button>Change</button>
you can use the ResizeSensor to detect the width change of the element.
please refer this page How to detect DIV's dimension changed?
i working on mixitup plugin with jRange slider jquery plugin and is working good without jRange slider, but when i include jrange slider for mobiles price its not filter and not show product within the range. how to filter multiple selector. for example when click on iphone products , its show all iphone product but i want to also show iphone products with in price range. or any other products.
how to fix the problem.
jQuery(document).ready(function($) {
var price_mega = {};
main_filter();
$('.slider-input').jRange({
from: 0,
to: 400,
format: '$%s',
showLabels: true,
isRange : true,
onstatechange: function(value){
result = value.split(',');
price_mega = result;
main_filter();
}
});
function main_filter(){
$('.container').each(function(index, el) {
var min_price = Number(price_mega[0]);
var max_price = Number(price_mega[1]);
// console.log(min_price);
var active = $(this).data('active');
var wrap = $(this).closest('.main-wrapper');
var target = wrap.find('.target_filter');
var filter = wrap.find('.controls .filter');
// var filter = wrap.find('.container').find('.target_filter').filter(function(){
// var price = Number($(this).attr('data-price'));
// return price >= min_price && price <= max_price
// });
wrap.find('.container').mixItUp({
selectors: {
target: target,
filter: filter
},
load: {
filter: active,
}
});
});
}
});
.controls {
padding: 1rem;
background: #333;
font-size: 0.1px;
}
.controls button{
font-size: 27px;
color: gray;
margin-left: 20px;
}
.mixitup-control-active {
background: #393939;
}
.mixitup-control-active[data-filter]:after {
background: transparent;
}
.mix,
.gap {
display: inline-block;
vertical-align: top;
}
.mix {
background: #fff;
border-top: .5rem solid currentColor;
border-radius: 2px;
margin-bottom: 1rem;
position: relative;
display: none;
}
.mix.green {
color: #91e6c7;
}
.mix.pink {
color: #d595aa;
}
.mix.blue {
color: #5ecdde;
}
.mix,
.gap {
width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
}
#media screen and (min-width: 541px) {
.mix,
.gap {
width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
}
}
#media screen and (min-width: 961px) {
.mix,
.gap {
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
}
}
#media screen and (min-width: 1281px) {
.mix,
.gap {
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mixitup/2.1.11/jquery.mixitup.js"></script>
<script src="http://nitinhayaran.github.io/jRange/jquery.range.js"></script>
<link href="http://nitinhayaran.github.io/jRange/jquery.range.css" rel="stylesheet"/>
<div class="main-wrapper">
<div class="controls">
<button type="button" data-filter="all" class="filter">All</button>
<button type="button" data-filter=".samsung" class="filter">Samsung</button>
<button type="button" data-filter=".iphone" class="filter">Iphone</button>
<button type="button" data-filter=".blackberry" class="filter">Blackberry</button>
<div style="margin-top: 5%;height: 22px;">
<input type="hidden" class="filter slider-input" value="0,400" />
</div>
</div>
<div class="container" data-active=".samsung">
<div class="target_filter mix samsung" data-price="200">samsung 1(price $200)</div>
<div class="target_filter mix blackberry" data-price="111">blackberry 1(price $111)</div>
<div class="target_filter mix samsung" data-price="165">samsung 2(price $165)</div>
<div class="target_filter mix iphone" data-price="300">iphone 1(price $300)</div>
<div class="target_filter mix iphone" data-price="340">iphone 2 (price $340)</div>
<div class="target_filter mix samsung" data-price="100">samsung 3 (price $100)</div>
<div class="target_filter mix blackberry" data-price="89">blackberry 2(price $89)</div>
<div class="target_filter mix iphone" data-price="232">iphone 3(price $232)</div>
<div class="gap"></div>
<div class="gap"></div>
<div class="gap"></div>
</div>
</div>
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>
I created 4 predefined sizes for circle tags.
I want create a park tag ( cloud tag ) where the tags are dispersant randomly just for first time. but I cannot make it working
here is my code :
HTML
<div id="tags-cloud">
<div class="tag-1 tag">tag name</div>
<div class="tag-2 tag">tag name</div>
<div class="tag-3 tag">tag name</div>
<div class="tag-4 tag">tag name</div>
</div>
CSS
tags-cloud {
background-color:white;
padding:10px;
margin-top:10px;
position:relative;
width:100%;
height:600px;
}
.tag {
color:#FFFFFF;
text-align:center;
text-transform:capitalize;
border-radius:100%;
display:inline-block;
position:absolute;
}
.tag-1{width:46px;height:46px;background:#DC5E0A;line-height:46px;}
.tag-2{width:58px;height:58px;background:#05F9EB;line-height:58px;}
.tag-3{width:76px;height:76px;background:#4B05F9;line-height:76px;}
.tag-4{width:89px;height:89px;background:#9EDC0A;line-height:89px;}
JS CODE
$('.tag').each(function() {
var size = Math.round(Math.random()*550+20);
$(this).css({
'top':size/2,
'bottom':size/2,
'left':size/2,
'right':size/2,
zIndex:size
})
});
the result I want :
My result
JS FIDDLE
http://jsfiddle.net/s1aoxf1o/
As has already been pointed out, you need different top and left coordinates. Otherwise, all circles will lie along a diagonal line.
You then need a way of determining if two circles are touching (or are within a given "margin" of each other). You can do this by determining the center (origin) of the circles and applying the distance formula:
If the distance is greater than the sum of the radii plus the margin, then the circles are okay.
Here's the code for that:
function touching(margin) {
var result= false;
$('.tag').each(function() {
var t1= $(this),
t1radius= t1.width()/2,
t1x= t1.offset().left + t1radius,
t1y= t1.offset().top + t1radius;
$('.tag').not(t1).each(function() {
var t2= $(this);
t2radius= t2.width()/2,
t2x= t2.offset().left + t2radius,
t2y= t2.offset().top + t2radius,
dist= Math.sqrt((t2x-t1x)*(t2x-t1x) + (t2y-t1y)*(t2y-t1y));
if(t1radius && t2radius && dist<t1radius+t2radius+margin) {
result= true;
}
})
});
return result;
} //touching
In the following code, the circles are placed randomly within their container until they're not "touching" within 20px of each other. Background colors are assigned randomly. The font size is a function of the circle size:
$('.tag').each(function(idx) {
do {
var container= $(this).parent(),
diam= Math.round(Math.random() * 75 + 50),
top = Math.round(Math.random() * (container.height() - diam)),
left= Math.round(Math.random() * (container.width() - diam)),
bg= '#'+(Math.random()*128+32<<0).toString(16)+(Math.random()*128+32<<0).toString(16)+(Math.random()*128+32<<0).toString(16);
$(this)
.css({
top : top,
left : left,
width : diam,
font : diam/5+'px verdana',
lineHeight : diam+'px',
background : bg
})
.html('tag '+(idx+1));
} while(touching(20));
});
Fiddle
You need to add random variables for left and top.
On absolute positioned elements you only need left or right and top or bottom.
$(function() {
$('.tag').each(function() {
var size = Math.round(Math.random() * 550 + 20);
var left = Math.round(Math.random() * 550 + 20);
var top = Math.round(Math.random() * 550 + 20);
$(this).css({
'top': top / 2,
'left': left / 2,
zIndex: size
})
});
});
$(function() {
$('.tag').each(function() {
var size = Math.round(Math.random() * 550 + 20);
var left = Math.round(Math.random() * 550 + 20);
var top = Math.round(Math.random() * 550 + 20);
$(this).css({
'top': top / 2,
'left': left / 2,
zIndex: size
})
});
})
tags-cloud {
background-color: white;
padding: 10px;
margin-top: 10px;
position: relative;
width: 100%;
height: 600px;
}
.tag {
color: #FFFFFF;
text-align: center;
text-transform: capitalize;
border-radius: 100%;
display: inline-block;
position: absolute;
}
.tag-1 {
width: 46px;
height: 46px;
background: #DC5E0A;
line-height: 46px;
}
.tag-2 {
width: 58px;
height: 58px;
background: #05F9EB;
line-height: 58px;
}
.tag-3 {
width: 76px;
height: 76px;
background: #4B05F9;
line-height: 76px;
}
.tag-4 {
width: 89px;
height: 89px;
background: #9EDC0A;
line-height: 89px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tags-cloud">
<div class="tag-1 tag">tag name</div>
<div class="tag-2 tag">tag name</div>
<div class="tag-3 tag">tag name</div>
<div class="tag-4 tag">tag name</div>
</div>
I found a solution that's working. for me I want tags dispersant randomly just for first time, not different figure on every reload. but my solution not realy random positions of tags but it make circles dispersant in the area.
HTML CODE
<div id="tags-cloud">
<div class="tag-1 tag">tag name</div>
<div class="tag-2 tag">tag name</div>
<div class="tag-3 tag">tag name</div>
<div class="tag-4 tag">tag name</div>
</div>
CSS CODE
tags-cloud {
background-color:white;
padding:10px;
margin-top:10px;
position:relative;
width:100%;
height:600px;
}
.tag {
color:#FFFFFF;
text-align:center;
text-transform:capitalize;
border-radius:100%;
display:inline-block;
}
.tag-1{width:46px;height:46px;background:#DC5E0A;line-height:46px;}
.tag-2{width:58px;height:58px;background:#05F9EB;line-height:58px;}
.tag-3{width:76px;height:76px;background:#4B05F9;line-height:76px;}
.tag-4{width:89px;height:89px;background:#9EDC0A;line-height:89px;}
To make it working I use Masonry
JS CODE
var $container = $('#tags-cloud');
$container.masonry({
columnWidth: 50,
itemSelector: '.tag'
});
JS FIDDLE
http://jsfiddle.net/anp6uro8/1/
Well, this is just a solution between many other solutions like #kay's solution and #Rick Hitchcock's solution.