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>
Related
$().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/
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
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.
Hi by any chance anyone will know how to do the fade in fade out change page effect in JavaScript?
Like this..
http://soulwire.co.uk/hello
I have tried this..
But when fadeout is not linking together..I mean not smooth like the above website.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('body').css('display', 'none');
$('body').fadeIn(1000);
$('.link').click(function() {
event.preventDefault();
newLocation = this.href;
$('body').fadeOut(2000, newpage);
});
function newpage() {
window.location = newLocation;
}
});
</script>
Sorry am just think of....does background slideshow will work??? But on top can I add php/html code?
Another example...http://www.louisebradley.co.uk/portfolio/
Hey try the below code
See its WORKING DEMO
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="jquery.js"></script>
<script type="text/javascript">
function Close()
{
$('#div1').animate({ height: 50 });
}
function Open()
{
$('#div1').animate({ height: 100 });
}
</script>
</head>
<body>
<div id="div1" style="width:100%; height: 50px; background-color: #C0C0C0;" onmouseover="Open()" onmouseout="Close()"></div>
</body>
</html>
Also take a look at these stuffs
Fade in div on page load
JavaScript Fade Tutorial – Fading Elements In/Out
How to: javascript fade in fade out text
.fadeIn() Tutorial
How do I change the color of text using JQuery SVG?
I currently have the following code:
<html>
<!-- jquery imports here -->
<script type="text/javascript" charset="utf-8">
$(function() {
$('#myContainer').svg({});
var svg = $('#myContainer').svg('get');
svg.text(200, 200, "SomeText", {'font-family':"Verdana", 'font-size':20, 'text-anchor':"middle"});
});
window.onload = function () {
// more code
}
</script>
<body>
<div id="myContainer" style="width: 640px; height: 480px;"></div>
</body>
</html>
Try to change fill.
{'text-anchor':"middle", 'fill':"#00ff00"}