text shaped into a curve within a container

 $().ready(function() {
$('#demo1').circleType({fitText:true, radius: 180});   });
  $().ready(function() {
            $('#example').arctext({radius: 250});
        });
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://tympanus.net/Development/Arctext/js/jquery.arctext.js"></script>
<div id="example">Here is curved text dmsdodsfnfsadknsdf></div>
<br>

<div id="demo1"> Here’s some curved text flowing clockwise.</div>

hello i was wondering if its possible to curve text inside a div using a button something like this https://i.sstatic.net/pZhON.gif

https://i.sstatic.net/XEkci.gif

https://i.sstatic.net/YFnf5.gif

Answer №1

Your code reveals that you are attempting to utilize two separate libraries: ArcText (http://tympanus.net/Development/Arctext/) and CircleType (). Make sure to include references to jQuery, ArcText, and Circletype libraries to ensure proper functionality.

To incorporate ArcText and Circletype locally, download the libraries and reference them as shown below:

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="/js/circletype.js"></script>
<script src="/js/jquery.arctext.js"></script>

Following this, your JavaScript code will execute smoothly:

$(function(){
  $('#demo1').circleType( {fitText:true, radius: 180} );
  $('#example').arctext( {radius: 250} );
});

View the JSFiddle Demo here: https://jsfiddle.net/stevenng/nyawqaab/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Populate vue-multiselect with links from the router

Is there a way to populate the vue-multiselect dropdown with <router-link> options? Typically, router links are defined declaratively in the <template>, but vue-multiselect relies on binding an array of options. Any suggestions on how to approa ...

Bursting at the seams: concealed issues

I am currently facing an issue with a facebook like button placed in the caption section of a slideshow div, located at the far bottom right corner. The problem arises when the 'post to wall' prompt pops up below the like button, but is cut off d ...

Is it possible to load ASP.NET MVC3 EditorTemplates using Ajax without repeating jQuery?

Utilizing EditorTemplates for elements such as DateTime, Colors, and more has been a key aspect of my form design. These templates are often loaded dynamically through Ajax as partial views. Instead of cluttering each editor template with several jQuery i ...

Using jQueryUi Tabs for Organizing Div Tables

Recently, I implemented a jQuery tab on my website using the following code snippet: <div id="tabs"> <ul> <li><a href="#tabs-1">Basic Info</a></li> </ul> <div id="tabs-1"> ...

Leveraging environmental variables in a Vue.js web application

The article I recently came across discussed how to effectively utilize environment variables in vuejs. Following the instructions, I set up my local .env.local file and also installed dotenv. VUE_APP_AUTH_AUTHORITY = 'http://localhost/auth' I ...

The attribute 'selectionStart' is not a valid property for the type 'EventTarget'

I'm currently utilizing the selectionStart and selectionEnd properties to determine the beginning and ending points of a text selection. Check out the code here: https://codesandbox.io/s/busy-gareth-mr04o Nevertheless, I am facing difficulties in id ...

Learn how you can store checkbox values in an array when a checkbox is clicked by utilizing AJAX

Creating checkboxes in HTML <input type="checkbox" name="options[cid]" value='1' onChange="chkdeptCount(this.value)" class="test"> <input type="checkbox" name="options[cid]" value='2' onChange="chkdeptCount(this. ...

What is the best approach for creating a Pagination component in React JS?

I recently started developing a web-app and I'm still learning about web development. I have received a backend response in JSON format with pagination information included: { "count": 16, "next": "http://localhost:800 ...

Struggling to align list-items in a horizontal manner

I'm having trouble aligning the list-items in my horizontal navbar. Can anyone assist me in identifying the error? Below is the HTML code, which has a complex structure due to the use of the Wordpress thesis theme and Cufon for font replacement: < ...

Enable the script tag with the type "module" only under certain conditions

Attempting to dynamically enable script tags in HTML using the code below does not yield the expected results. function loadScript() { document.querySelectorAll('script[type="text/skip-hydration"]').forEach((script) => { script ...

Modifying Margin and Spacing for Selections in Radio Buttons

I have successfully implemented the code for a radio button, and everything is working as expected div > label { margin-right: 80px !important; box-shadow: .3rem .3rem .6rem #c8d0e7, -.2rem -.2rem .5rem #FFFFFF; position: relative; ...

Creating a Mongoose schema to store an array of objects, where updates will automatically add new objects

const mongoose = require('mongoose'); module.exports = mongoose.model('GridModel', { Request_Id : { type : Number, required : true }, viewStudents : { type : Array , default : [] } }); The mongoose model above needs to b ...

What is the best way to send props from page.js to layout.js in the Next.js app directory?

Is there a way to effectively pass props to layouts in Next.js 13? Can we optimize the approach? Here's an example: // layout.js export default Layout({children}) { return ( <> {/* Display different `text` based on the page.js being ...

Locate the nearest date (using JavaScript)

Searching for the nearest date from an XML file. <?xml version="1.0" encoding="UTF-8"?> <schedule> <layout fromdt="2014-01-01 00:00:00" todt="2014-01-01 05:30:00"/> <layout fromdt="2014-02-01 00:00:00" todt="2014-01-01 05 ...

What is the process of displaying multiple static files using Express?

I am currently working on a project where I am using Express to render various HTML files from my public folder. These files are static in nature. Additionally, I want to display a 404 page if an invalid route is accessed. Below is the code snippet I have ...

Show information when table is clicked

I currently have a 9 x 9 table with unique content in each cell. Is there a way to enable the following functionality: Upon clicking on the text within a specific cell, all related content would be displayed right below that same cell? For instance, if ...

Having trouble sending information to a servlet with jQuery

As I work on developing an application utilizing jquery in conjunction with servlets, I have integrated the jquery theme roller for enhancing the interface on my Login.jsp page. <script> $(document).ready(function() { $("#dialog").dialog(); }); ...

Exploring the Boundaries of JavaScript Libraries

Exploring the inner workings of JavaScript libraries has been a challenge for me. Despite having some background in Java and JavaScript, I find the code below quite perplexing. These snippets are extracted from an example on david-tang.net's website. ...

Can an auto-margin container use an image as its left and right border using :before and :after pseudo-elements?

Hey there! I'm currently working on a project where I need to enclose a Youtube video in a container with automatic margins. The twist is that I want to add two images as a border on the left and right sides using the :before and :after pseudo-element ...

Utilizing nested classes in CSS or SCSS for calling a class within another class

I am having trouble calling a class within another class. Can someone help me figure out how to do it? Here is the HTML code: <div class="main">Content</div> <div class="cover">Cover content</div> And here is t ...