I am very new in the web world. Please pardon me if my questions sound stupid?
My main aim is to capture the animation on HTML5 canvas to a video, in which I succeeded to some extent. I am able to record a video using this module https://github.com/spite/ccapture.js . This is possible only when the code has HTML5 and plain javascript drawing APIs having a canvas element.
Next, I 've been trying to capture text animations using textillate.js which is jquery based. I have no idea how to get the handle to the canvas
in this case. Since jquery is based on javascript, don't all the jquery based animation render on HTML5 canvas?
Here is the example code below. Where in this code can I get the canvas handle and how? There's also no mention of the canvas name.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="css/animate.css" rel="stylesheet">
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/jquery.lettering.js"></script>
<script src="js/jquery.textillate.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$('.tlt').textillate({
selector: '.texts',
loop: false,
minDisplayTime: 2000,
initialDelay: 0,
in: {
effect: 'bounce',
delayScale: 2,
delay: 50,
sync: false,
shuffle: true
},
autoStart: true,
inEffects: [],
outEffects: [ 'hinge' ]
});
});
</script>
</head>
<body>
<h1 class="tlt">Animate me with textillate effects</h1>
</body>
</html>
If you are looking to getContext, this was already answered here: jQuery equivalent of getting the context of a Canvas. If not, sorry.
Related
I have a background slideshow that uses the jQuery 1.9.1 which is called here "jacksis.js" in body section and i have another submenu slider that uses jQuery 1.4.2 as in here is called "core.js" in head section. However, when i added the jQuery 1.9.1, the slider on 1.4.2 stopped working. I tried the noConflict() mode without success and the jQuery call innstead of the "$". Down below, the "ss1_wrapper" is using the 1.4.2 and the "cbp_bislideshow" the 1.9.1. What could be wrong in my
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=8,9,10,11">
<link href="index_files/main.css" type="text/css" rel="stylesheet">
<script src="index_files/core.js"></script>
<script src="index_files/js/modernizr.custom.js"></script>
</head>
<body id="page">
<ul id="cbp-bislideshow" class="cbp-bislideshow">
...
</ul>
<form class="" name="aspnetForm" method="post" action="index.htm" id="aspnetForm">
<div class="ss1_wrapper">
......
</div>
<script>$(function() {
$('#slideshow_1').cycle({
fx: 'scrollHorz',
easing: 'easeInOutCirc',
speed: 1100,
timeout: 6000,
pager: '.ss1_wrapper .slideshow_paging',
prev: '.ss1_wrapper .slideshow_prev',
next: '.ss1_wrapper .slideshow_next',
// using the "before" function, we grab the content of the active slide and show it in our custom box overlay
before: function(currSlideElement, nextSlideElement) {
var data = $('.data', $(nextSlideElement)).html();
$('.ss1_wrapper .slideshow_box .data').fadeOut(300, function(){
$('.ss1_wrapper .slideshow_box .data').remove();
$('<div class="data">'+data+'</div>').hide().appendTo('.ss1_wrapper .slideshow_box').fadeIn(600);
});
}
});
// not using the 'pause' option. instead make the slideshow pause when the mouse is over the whole wrapper
$('.ss1_wrapper').mouseenter(function(){
$('#slideshow_1').cycle('pause');
}).mouseleave(function(){
$('#slideshow_1').cycle('resume');
});
});</script>
</form>
<script src="index_files/jacksis.js"></script>
<script src="index_files/js/jquery.imagesloaded.min.js"></script>
<script src="index_files/js/cbpBGSlideshow.min.js"></script>
<script>$(function() {
cbpBGSlideshow.init();});
</script>
<script type="text/javascript" src="index_files/quant.js"></script>
</body>
I am receiving only one error in firebug in line core.js (1.4.2) line 1993:
TypeError: jQuery.browser is undefined
and the error is in that function at line 4 (it's line 1993 in the original file)
(function($) {
$(document).ready( function() {
// Fix background image caching problem
if (jQuery.browser.msie) {
try {
document.execCommand("BackgroundImageCache", false, true);
} catch(err) {}
}
What couldn't be wrong in my code if i tried all the possibilities of getting away with jQuery conflict?
UPDATE:
I introduced jQuery 1.7.1 and deleted both 1.4.2 and 1.9.1, then now i have both my Slider and Background slideshow working again together BUT my drop-down menu (which could be seen on my webpage www.es-processing.com) is not working anymore. On the online version it is working, but right now, on the version i'm working on it's not functioning at all. You can have an idea from my dropdown on my webpage to see which jQuery functions it follows and how to adapt them on the new 1.7.1 i put.
I'm attempting to use the Stellar.js script to apply a parallax effect.
Here is the official example from Mark Dalgleish's website
http://markdalgleish.com/projects/stellar.js/demos/backgrounds.html
Even when I copy and paste the source code from the example, instead of having a slight scroll effect to each one image, they appear in fixed positions.
What am I doing wrong?
1.
If even the Demo code does not work, check whether you gave the jquery or stellar.js path correctly.
You can check it in browser console, if you have any errors. The console will print it, if it can't load the resource.
2.
If the paths correct, check if you run the initialisation for stellar, when the page loaded, or if you gave "data-stellar-background-ratio" attribute for the right elements. If you give '0' to the data-stellar-background-ratio it won't scroll either.
Note that, it won't work on mobile devises either.
3.
If you checked everything above, and it still doesn't work, try to insert the scripts at the end of the element. Sometimes it helps.
Something like this:
<html>
<head>
<!-- Title, CSS, and other stuff -->
</head>
<body>
<!-- Content here with right stellar attributes -- >
...
<!-- At the end of body load the scripts, and run initialisation -->
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="YOUR_PATH_TO_STELLAR/jquery.stellar.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).stellar({
scrollProperty: 'scroll',
horizontalScrolling: false,
positionProperty: 'position'
});
</script>
</body>
</html>
I had a situation where my stellar.js parallax scrolling wouldn't initialize until my browser window was resized. I found the $.stellar('refresh'); seemed to fix the issue. (Using AngularJS)
angular.module('ForeverLeather').controller('HomeCtrl', ['$scope', function($scope) {
$(window).stellar({
horizontalScrolling: false,
verticalOffset: 0,
horizontalOffset: 0,
responsive: true,
}).stellar('refresh');
}]);
I want to install the gallery and instead of using flash I wish to use this jQuery plugin. I cannot figure out how do I install and use it since it is distributed as .zip archive with two .js files inside and no index file or .css at all.
Here's plug in features demo, which I would like to achieve.
$("#container").gridalicious({
animate: true,
animationOptions: {
queue: true,
speed: 200,
duration: 300,
effect: 'fadeInOnAppear',
complete: onComplete
}
});
As per the source code...
The CSS is set in the JS itself, no need for an external style sheet.
If you'll scroll down http://suprb.com/apps/gridalicious/, you will see how to initialize it. It appears to just be a collection of divs with the class item inside of the initialized container.. <div id="container"> for example.
Update:
<!doctype html5>
<html>
<head>
<title>Test of plugin</title>
<script type="text/javascript" src="path/to/jquery-latest.min.js"></script>
<script type="text/javascript" src="jquery.grid-a-licious.min.js"></script>
</head>
<body>
<div id="container">
<!--I assume it asks for divs with the "item" class, but it may be added automatically.-->
</div>
<script type="text/javascript>
//The initialize code printed above. Has parameters (read:options) you can tweak.
</script>
</body>
</html>
I am a complete beginner to website design and I am trying to create a more modern website for my company. The current one is less than glamorous (Greenlite.co.uk).
After spending a lot of time trying to make a Flash banner for the homepage it occurred to me that Flash is probably quite outdated and not view able from all platforms. This is when I came across the BxSlider, and it really looks great! If only I could get it to work on my site.
I am using CoffeeCup Visual Site Designer, I then used the 'Add HTML' tool. Into the 'Insert HTML' window I have placed as follows;
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
<link href="js/jquery.bxslider.css" rel="stylesheet" />
<ul class="bxslider">
<li><img src="images/timeline1.jpg" title="An Energy Conservation Company"></li>
<li><img src="images/image1.jpg" title="Designers and Manufactors of Quality Lighting Controls"></li>
<li><img src="images/back12.jpg" title="Caption to go here"></li>
</ul>
<script type="text/javascript">$(document).ready(function(){
$('.bxslider').bxSlider();
});
mode: fade,
captions: true,
auto: true,
autoControls: false
});
});
</script>
I have followed, as well as I could, the instructions shown on bxslider.com. I downloaded the package from bxslider, adding the files to coffeecup and linking the location in the script. I also added my images to CoffeeCup and wrote in their location.
When I preview my website I am rewarded with my three images all shown at once, each underneath the other, with a mouse over caption. Alongside the images are a bullet point.
What I am trying to achieve is a Bxslider with auto start, displaying stop/start controls and with captions.
I have attempted many variations, the script I have shown being my original attempt.
The closest I have got to a working Bxslider is by copying code I found from a website for the old version bxslider. This gave me an image slideshow with headers. If I tried to edit the code to my specifications then it would take me back to square one.
I am entirely aware that I am likely to be making a very obvious mistake. However, to the untrained eye it's giving me nothing but headaches. Any help would be largely appreciated.
The Javascript you've got is invalid. Try changing the Javascript to:
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'fade',
captions: true,
auto: true,
autoControls: false
});
});
</script>
See working jsfiddle - http://jsfiddle.net/FLuRH/
i noticed some thing that might be a problem:
You didn't closed some code part properly
This is yours:
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'fade',
captions: true,
auto: true,
autoControls: false
});
});
</script>
This is mine:
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'fade',
captions: 'true',
auto: 'true',
autoControls: 'false',
});
});
</script>
Also i put this code part in the "head" section and it worked.
Give it a try.
I hope i helped somehow.
Here is working code(just create new html file where u extract bxslider folder)
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="jquery.bxslider.min.js"></script>
<link href="jquery.bxslider.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function () {
$(".bxslider").bxSlider();
});
</script>
</head>
<body>
<div style="width:700px;height:250px;align:center;padding-left:250px;">
<ul class="bxslider">
<li>
<img src="http://localhost/wordpress-4.1/wordpress/wp-content/uploads/2015/02/Desert.jpg" />
</li>
<li>
<img src="http://localhost/wordpress-4.1/wordpress/wp-content/uploads/2015/02/Desert.jpg" />
</li>
<li>
<img src="http://localhost/wordpress-4.1/wordpress/wp-content/uploads/2015/02/Desert.jpg" />
</li>
</ul>
</div>
</body>
</html>
I'm new to JQuery and want to use it to display a simple volume slider.
Can someone please point out my mistake?
Below is a minimal test code. In case it matters, I'm using the JQuery v1.4.1 that comes with MVC2
Sample code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Multimedia
</title>
<script type="text/javascript" src="../../Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#volume").slider({
orientation: "vertical",
range: "min",
min: 0,
max: 100,
step: 5,
slide: function (event, ui) {
//do something;
}
});
});
</script>
</head>
<body>
<div id="volume"></div>
</body>
</html>
This gives me the following error:
Error: $("#volume").slider is not a function
Source File: file:///c:/sample.html
Line: 15
It's worth noting that I can set the contents of #volume using .html and similar technique so it can find the element - just not the slider() function
I'm testing in FF 3.6
Thanks in advance for any help
You need to include the jQuery UI JS file.
Go to the downloads page and deselect everything, then select the slider. Doing that will also automatically select the sliders dependencies. You can also choose a theme if you want.