logo
down
shadow

Five circles aligned , and when i click on the circle i would like the number 5 to appear inside the circle


Five circles aligned , and when i click on the circle i would like the number 5 to appear inside the circle

By : nathanwpace
Date : November 17 2020, 11:52 AM
it should still fix some issue Took the liberty to change your CSS.
I think this is probably what you intended:
code :
<!DOCTYPE html>
<html lang="en">

<head>
    <title> New Responsive design web page </title>
    <meta charset="utf-8" />

    <meta name="viewport"    content= "width=device-width , initial-scale = 1.0">


    <style>
        #first-exercise{
            background-color: #ffffff;
            width:60%;
            position: relative;
            margin-top: 8%;

            -moz-box-shadow: 0px 0px 7px #777777;
            -webkit-box-shadow: -5px 0px 7px #777777;
            box-shadow: 0px 0px 7px #777777;
            border-radius: 3px;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;

        }

        .circle {
            width: 34px;
            height: 34px;
            background: #fff;
            -moz-border-radius: 50px;
            -webkit-border-radius: 50px;
            border-radius: 50px;
            border-style: solid;
            border-width: thin;
            border-color: lightgray;
            text-align: center;
            line-height: 34px;
        }

        .circle.selected {
            background: #f91d04;
        }

        #first-exercise p {
            display: inline-block;
            margin-left: 10%;
            margin-top: 0%;
            margin-bottom: 1%;
        }

        #first-exercise h4 {
            display: inline-block;
            font-variant: small-caps;
            color: #f91d04;

        }
        #first-exercise #right{
            margin: 0% 2% 0% 61%;

        }

        #first-exercise #left{
            margin: 0% 14% 0% 2%;
        }


    </style>


<body>
<div id="first-exercise">

    <h4 id="left">squat</h4>
    <h4 id="right">5x5 100LB</h4>
    <hr width="95%">
    <p class="circle">&nbsp;</p>
    <p class="circle">&nbsp;</p>
    <p class="circle">&nbsp;</p>
    <p class="circle">&nbsp;</p>
    <p class="circle">&nbsp;</p>




</div>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

<script>
// init array
var counter = [];
for (var i=0; i < 5; i++) counter[i] = 5;

$('#first-exercise .circle').on('click', function(){

    var index = $('#first-exercise .circle').index(this);

    var displayText = counter[index];
    $(this).addClass('selected');
    $(this).html(displayText);

    if (counter[index] == 0)
    {
        counter[index] = 5;
    }
    else {
        counter[index]-=1;
    }
});
</script>
</body>
</html>


Share : facebook icon twitter icon
How do I draw x number of circles around a central circle, starting at the top of the center circle?

How do I draw x number of circles around a central circle, starting at the top of the center circle?


By : Norman James
Date : March 29 2020, 07:55 AM
To fix the issue you can do The central bit you need to work out is radius of the small circles. If you have R for radius of the central circle and you want to fit n smaller circles around it. Let the as yet unknown radius of the small circle be r. We can construct a right angle triangle with one corner in the center of the big circle one in the center of the small circle and one which is where a line from the center is tangent to the small circle. This will be a right angle. The angle at the center is a the hypotenuse has length R+r the opposite is r and we don't need the adjacent. Using trig
code :
sin(a) = op / hyp = r / (R + r)
(R+r) sin(a) = r
R sin(a) + r sin(a) = r
R sin(a) = r - r sin(a)
R sin(a) = (1 - sin(a)) r
r = R sin(a) / ( 1 - sin(a))
// canvas and mousedown related variables
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var $canvas = $("#canvas");
var canvasOffset = $canvas.offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var scrollX = $canvas.scrollLeft();
var scrollY = $canvas.scrollTop();

// save canvas size to vars b/ they're used often
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
var baseRadius = 50;
var baseCircle = new Circle(150,150,50);

var nCircles = 7;
var startAngle = 15.0;

function Circle(x,y,r) {
    this.x = x;
    this.y = y;
    this.r = r;
}

Circle.prototype.draw = function() {
    ctx.beginPath();
    ctx.arc(this.x,this.y,this.r, 0, 2 * Math.PI, false);
    ctx.stroke();
}

var circles = new Array();

function calcCircles(n) {
    circles.splice(0); // clear out old circles
    var angle = Math.PI / n;
    var s = Math.sin(angle);
    var r = baseRadius * s / (1-s);
    console.log(angle);
    console.log(s);
    console.log(r);


    for(var i=0;i<n;++i) {
        var phi = startAngle + angle * i * 2;
        var cx = 150+(baseRadius + r) * Math.cos(phi);
        var cy = 150+(baseRadius + r) * Math.sin(phi);
        circles.push(new Circle(cx,cy,r));
    }
}

function draw() {
    baseCircle.draw();
    circles.forEach(function(ele){ele.draw()});
}

calcCircles(7);
draw();
java circle inside a circle , how to know if two circles overlap

java circle inside a circle , how to know if two circles overlap


By : Amalia Tsingos
Date : March 29 2020, 07:55 AM
Any of those help this is some code i wrote in java, it is a circle object class. i wrote methods i need two more methods and im struggeling with the first one is a method that contains (circle c) that returns true if the specified circle c is inside circle. and the second one is a method overlaps(circle c) that returns true if th especified circle c overlaps with this circle. all i need is how to make those two methods with the parameter being another circle object
code :
import java.awt.geom.Point2D;

/**
 *
 * @author MT0
 */
public class Circle {
    private Point2D.Double center;
    private double radius;

    public Circle(
            final double x,
            final double y,
            final double r
    ){
      assert( r >= 0 );
      center = new Point2D.Double( x, y );
      radius = r;
    }

    public Point2D.Double getCenter(){
        return center;
    }

    public double getRadius(){
        return radius;
    }

    public Double distance( final Point2D.Double point ){
        if ( point == null )
            return null;
        return getCenter().distance( point );
    }

    public boolean contains( final Point2D.Double point ){
        if ( point == null )
            return false;
        return distance( point ) <= getRadius();
    }

    public boolean overlaps( final Circle c ){
        return distance( c.getCenter() ) <= getRadius() + c.getRadius();
    }

    public boolean contains( final Circle c ){
        if ( c == null )
            return false;
        return distance( c.getCenter() ) <= Math.abs( getRadius() - c.getRadius() );
    }
}
How to draw multiple circles within circle like target and get touch event of particular circle?

How to draw multiple circles within circle like target and get touch event of particular circle?


By : Siewli Leesiewli
Date : March 29 2020, 07:55 AM
wish of those help why not have a single image, and calculate the radius based on the touch point - all you need to know is the centre position.
Instead of radius, what you really need is an index from 0 to 11 for your bands - if they are equal thickness, you can do that in a single calculation - take the integer part of (11 * radius / radiusFull)
Create a vertical line with a circle in it and text on sides aligned to circles

Create a vertical line with a circle in it and text on sides aligned to circles


By : Carlos Resurreccion
Date : March 29 2020, 07:55 AM
To fix this issue You can use after pseudo-element to put circle. Here I made an example with after solution.
jsfiddle
HTML5/CSS3 Circle inside a circle with inner circle stick on top of inner side of the outer circle

HTML5/CSS3 Circle inside a circle with inner circle stick on top of inner side of the outer circle


By : user3403088
Date : March 29 2020, 07:55 AM
Hope that helps Try with this code. I created my HTML code. Your class will have to change only.
CSS:
code :
    .outer-circle{
        position: relative;
        border-radius: 50%;
        height: 300px;
        width: 300px;
        text-align: center;
        background: linear-gradient(45deg, #FB8007, #e7c506);
    }
    .outer-circle span:first-child {
        position: absolute;
        bottom: 90px;
        text-align: center;
        left: 0;
        right: 0;
        font-size: 30px;
        text-shadow: 0px 3px 0px #676464;
        color: #fff;
    }
    .inner-circle {
        position: absolute;
        top: 10px;
        left: 0;
        right: 0;
        height: 100px;
        width: 100px;
        border-radius: 50%;
        margin: auto;
        text-align: center;
        padding: 33px;
        background-color: #FF5E4B;
        box-shadow: 2px 12px 10px #ccc;
        color: #fff;
        font-size: 23px;
        text-shadow: 0px 3px 0px #676464;
    }
    <div class="outer-circle">
        <span>Vacation</span>
        <div class="inner-circle">
            <span>Summer</span>
        </div>
    </div>
Related Posts Related Posts :
  • RangeError: Maximum call stack size exceeded with array.slice
  • node rest client get with local variable
  • If condition not executes while mouse move fastly
  • Count the number of displayed elements in a HTML list
  • Locate JavaScript source code in Emacs
  • Clean, Modular Code vs MV* Frameworks
  • infinite scroll without loading image
  • Backbone: reverse collection order with comparator
  • What do printers ignore?
  • jQuery UI .tabs() Contentless tab?
  • Execute Javascript alert() after page (visually) loaded
  • JavaScript - duplicating array doesn't work
  • Excessive clickable area below image
  • JavaScript Regex: Replace |b| with <b>
  • Unexpected value change in 2D array in JavaScript
  • Function doesnt see parameter as a array of objects
  • jQuery fetch keypress event on chrome and IE
  • How to enable jquery validate localization?
  • Cassandra map collection returned by node.js Helenus looks odd
  • angular ng-repeat with multiple filter options
  • Selecting Children without ID or Class names
  • How to uncheck a group of checkboxes when another checkbox is checked
  • Is hiding content by Javascript or jQuery Worth trying
  • Load XUL resource using javascript
  • XML to HTML text area from server file system
  • set focus() on textbox on form onload
  • es lint '' is assigned a value but never used' eventhough i have used it
  • Can "name" attribute be used for custom VueJS components
  • Get innerHTML of content when it is clicked
  • HTTPS causes CSS animations to not load? Very confused
  • How to hide other div apart from touched div to the band
  • Is global variable assignment atomic on NodeJS?
  • Datepicker onchangemonthyear beforeshowday
  • trying to render html files using jade but it still adresses it as a jade
  • Google Analytics - Understanding and Dissecting the Snippet: What is | | [ ];
  • Replacing "[aA09.b]." to "[aA09.b]\n" in in JavaScript
  • Why wrap a function definition in an immediate function?
  • Enable / disable jQuery script on switching to different tab in a HTML page
  • how can find return variable value outside anonymous function in node js mysql query function
  • Converting 1 to 0001 in javascript array
  • svg viewbox should not resize the text fontSize?
  • store newline character with string in a variable
  • MP4 videos in Flowplayer does not play in Windows 7 Chrome
  • jquery focusin event not firing
  • How to debug Vue application with google chrome
  • html 5 web app cache download complete javascript alert?
  • Ember.js setupController fired only once
  • How to validate a currency input
  • How to convert my Array of data to key & value pair
  • Statistics circles in CSS
  • So I wanted to make a trig solver in javascript?
  • Showing HighCharts series name on x-axis and in legend
  • In Rails, how can we pass parameters in script?
  • Build Fails: `npm rebuild node-sass --force`
  • Angular Datepicker change dateformat
  • Trying to extract data from between two sets of characters
  • Configuring Jest in WebStorm
  • Uncaught Error: Syntax error, unrecognized expression: tr.ec_portfolio_title,
  • JQuery fading in fading out continuously
  • Unexpected end of input (Line 1) and Undefined Function?
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org