curving text inside a div - javascript

$().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

Your code shows that you're trying to use 2 different libraries: ArcText (http://tympanus.net/Development/Arctext/) and CircleType (http://circletype.labwire.ca/). You'll need to reference jQuery, ArcText, and Circletype libraries.
You should download both ArcText and Circletype to reference locally like this:
<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>
Then your JavaScript will run fine:
$(function(){
$('#demo1').circleType( {fitText:true, radius: 180} );
$('#example').arctext( {radius: 250} );
});
JSFiddle Demo: https://jsfiddle.net/stevenng/nyawqaab/

Related

How to add the delay to the easy pie chart?

I wonder if it's possible to specify a delay of starting the animation in Easy Pie Chart?
I added the delay parameter but it does not seem to work.
<div class="chart" data-percent="73" data-scale-color="#ffb400"></div>
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<!-- Easy Pie Chart -->
<script src="js/jquery.easypiechart.js"></script>
<script>
$(function() {
$('.chart').easyPieChart({
delay: 3000,
barColor:'#f64c72'
});
});
</script>
I solved this problem myself as follows:
<script>
$(function() {
setTimeout(drawBox1, 6200);
});
function drawBox1(){
$('.chart').easyPieChart({
barColor:'#f64c72',
lineWidth:20
});
};
</script>

jquery moving a copy of div animation

i've searched for hours on google and here on StackO for this little thing I wanna do but couldn't find an answer, so here it goes:
im building a shopping site. when a person clicks on "add cart" button I want to slide a copy of the img/div to the left and make it disappear after 2 seconds (NOT the original div so it won't break the order of the products).
How can I accomplish that?
html code:
http://pastebin.com/mMLMP035
Try this.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
cloneNode();
});
});
function cloneNode() {
var itm = document.getElementById("img");
var cln = itm.cloneNode(true);
var copy = document.getElementById("parent").appendChild(cln);
$(copy).animate({left: '250px'}); // Animate this tag
}
</script>
</head>
<body>
<button>Start Animation</button>
<div id="parent">
<div id="img" style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</div>
</body>
</html>

Adding a click function to a image element

I am trying to add 2 simple click functions to 2 images and make them "active" when clicked, however for some reason the code is not working.
This is the link to the external file:
<head>
<link href="bootstrap.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jquery.leanModal.min.js"></script>
<script type="text/javascript" src="likeandshare.js"></script>
<link type="text/css" rel="stylesheet" href="blogformat.css" />
<script type="text/javascript" src="likeandshare.js"></script>
</head>
This is the html:
<div class="blog-header">
<h1>This heading should be center aligned and colored</h1>
<p>Italised date and Author entered here</p>
<div id="facebook-like-button">
<img src="images/facebook_like_button_big.jpeg">
</div>
<div id="facebook-share-button">
<img src="images/facebook-share.png">
</div>
</div>
This is the js code:
$(document).ready(main);
var like = function() {
$("#facebook-like-button").click(function() {
$(this).toggleClass("active");
});
};
I'm not sure why the div is not becoming active when clicked but I would also like to attach the function ONLY to the image, rather than the entire div.
Help :D
thanks.
As far as I'm aware, your code should be working. You must be incorrectly calling the ready function.
working example http://jsfiddle.net/2j0s1j8v/3/
All of these events fire back:
share = document.getElementById("facebook-share-button");
share.onclick = function(){
console.log("ONCLICK");
}
share.addEventListener("click", function(){ console.log("CLICK LISTENER"); } );
$("#facebook-share-button").click(function() {
console.log("JQUERY CLICK");
});
Check the console and look at the messages. All of them fire properly. f12 on chrome.
You can simply do this :
$(document).ready(function(){
$("#facebook-like-button").find('img').click(function() {
$(this).toggleClass("active");
});
});
first include jquery
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="likeandshare.js"></script>
</head>
second you create a like function and use main function .. you have a main function also or bad typo or what anyway in your case it should be
$(document).ready(like);
if you want to select an image inside the div just use > a >img
var like = function() {
$("#facebook-like-button > a > img").click(function() {
$(this).toggleClass("active");
});
};
https://jsfiddle.net/2j0s1j8v/4/
Like button
$("#facebook-like-button img").click(function () {
$(this).toggleClass("active");
});
Share button
$("#facebook-share-button img").click(function () {
$(this).toggleClass("active");
});
Here is a working example if I understand correctly what you wanted.
adds active class to the image on click.
EDIT: added share as well

Simple JQuery script animate not working

So i created a simple html page :
index.html file:
<html>
<head>
</head>
<body>
<div class="menu">
hello
</div>
<div class="test">
Menu
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="app.js"></script>
</body>
</html>
here is the app.js file:
var main = function() {
$('.test').click(function(){
$('body').animate({
left: '500px'
},200);
})
}
$(document).ready(main)
I'm trying to understand what i did wrong , it seems like it should work..
was also tried to download jquery-2.1.1.min.js and to work with it , but still while clicking on the menu , the text is not moving ..
You need to set position css property to body in order to work left.
body{
position:relative;
}
REF : http://api.jquery.com/animate/

ImgAreaSelect in jquery

I am new in jquery. my task in jquery is "ImgAreaSelect"
I am trying this from morning but not achive the goal. please review my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://odyniec.net/projects/imgareaselect/css/imgareaselect-animated.css"></script>
<script>
$(document).ready(function () {
$('#ladybug_ant').imgAreaSelect({
handles: true,
onSelectEnd: function(img, selection){
if (!selection.width || !selection.height){
return;
}
$('#x1').val(selection.x1);
$('#y1').val(selection.y1);
$('#x2').val(selection.x2);
$('#y2').val(selection.y2);
$('#w').val(selection.width);
$('#h').val(selection.height);
}
});
});
</script>
</head>
<body>
<img src="http://jotform.org/demo/jquery-image-area-select-plugin/images/sweet-dogs.jpg" id="ladybug_ant">
</body>
</html>
You seem to be missing the plugin itself that you have to download from http://odyniec.net/projects/imgareaselect/
jQuery is just the Core and does not include an image area select method
After loading the plugin you will be able to use $('#ladybug_ant').imgAreaSelect({ .. });
This is an example http://jsfiddle.net/8TwRJ/
I also face this problem.I made some changes in Css and Bingo,It is resolved.
Actully the parent div position should be relative to make imagearea scrollable.
You has to define the "parent:"imgParentDivID"" and set position:relative of that div.
It will work perfectly.
Code:
<div id="imgParentDivID" style="position:relative">
<img id="imgID" src="http://jotform.org/demo/jquery-image-area-select- plugin/images/sweet-dogs.jpg" id="ladybug_ant">
</div>
$("#imgID").imgAreaSelect({
parent: "#imgParentDivID",
aspectRatio: '1:1',
handles: true,
fadeSpeed: 200,
selectionOpacity: 1,
onSelectChange: preview
});
I hope this will help you.
you have used script tag for the css link. Use "link" tag instead of "script" tag also i.e use
<link rel="stylesheet" type="text/css" href="http://odyniec.net/projects/imgareaselect/css/imgareaselect-animated.css"/>
instead of
<script src="http://odyniec.net/projects/imgareaselect/css/imgareaselect-animated.css"></script>
this will solve the issue without any further changes.

Categories

Resources