jQuery .animate() only animates in Chrome, instantaneous change in other browsers - javascript

I have looked at other posts and there is a running solution involving "event" however I can't see how that fits into my code. As it stands the .animate() function, more specifically the duration functionality, doesn't seem to work unless I use chrome.
Here is my code.
index.html
<title>Quests Development Space</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html"; charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>
<div id="circle"></div>
javascript.js
$(document).ready(function() {
$("#circle").click(function() {
$(this).animate({
borderRadius:"0px"
}, {
duration: 1600
});
});
});
I have tried iterations without the ",{duration: x}" and just ", 1500" as I have seen it used both ways however neither works in anything except Chrome.
The function turns a circle into a square and still does in all browsers however it is only animated in Chrome.
Edit:
stylesheet.css
#circle {
height: 100px;
width: 100px;
border-radius: 50px;
background-color: blue;
}
Here is the CSS for those who asked though as I said it does work just only animates on Chrome.
Edit 2:
Breaking News!
It seems it is animating however it is "blinking" to border-radius 0 then animating inwards.

Try this code snippet:
$(function() {
$("#circle").click(function() {
$(this).animate({
borderTopLeftRadius: 0,
borderTopRightRadius: 0,
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
WebkitBorderTopLeftRadius: 0,
WebkitBorderTopRightRadius: 0,
WebkitBorderBottomLeftRadius: 0,
WebkitBorderBottomRightRadius: 0,
MozBorderRadius: 0
}, 1600);
});
});
You need to set all cross browser border radius properties to run it across all the browsers.
Plunker

Related

Can PNGs (or GIFs) loop only the last few images (rather than all the images)

I want to have a PNG sequence that displays 68 frames of animation and then loops the final 20 frames x number of times.
I based my code on the suggestion from 'r3mainer' on your page:
[https://stackoverflow.com/questions/43595504/play-one-part-of-gif-first-then-loop-a-certain-section-indefinitely]
But I can not get it to work.
I created the vertical PNG 'film strip', a CSS file with the appropriate background style info, and a JS file referenced in an HTML.
With the PNG, the JS, the HTML, and the CSS uploaded all I get for an image on the page is the first 'frame' of the PNG strip. There are no error messages.
I think there's something I don't understand about how the JS code should be deployed.
Here's my HTML file:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Strip Test</title>
<script src="film_strip_script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="draw.css">
</head>
<body>
<div id="draw"></div>
</body>
The CSS:
#draw {
width: 279px;
height: 202px;
margin: 0 auto;
background: url(basquiat_strip.png) top center;
}
JavaScript file:
$(function() {
var ani = {
frame_height: 202,
num_frames: 68,
loop_frame: 30,
frame_duration: 1,
cur_frame: 0
};
window.setInterval(
function() {
$('#draw').css( 'background-position-y',
(-ani.frame_height * ani.cur_frame ) + 'px'
);
ani.cur_frame = (ani.cur_frame + 1) % ani.num_frames;
if (ani.cur_frame == 0) ani.cur_frame = ani.loop_frame;
},
ani.frame_duration
);
});

Why isn't the javascript in my html working?

I'm running it in vscode and when I run my site, the spot where the javascript should be, is just a blank area. I tried a console.log message to test it and that isn't coming through either.
Here's where I'm trying to add a progress bar.
<p class="infoBox">
<h3>Skills</h3>
<h4>Computer Languages</h4>
Java <div id="container"></div></br>
Python</br>
Here's my javascript.
<script type="text/javascript" src="/require.js">
console.log("Hello World!"); // a test for js and it's not showing up in chrome's console
var ProgressBar = require('progressbar.js');
var bar = new ProgressBar.Line(container, {
strokeWidth: 4,
easing: 'easeInOut',
duration: 1400,
color: '#FFEA82',
trailColor: '#eee',
trailWidth: 1,
svgStyle: {width: '100%', height: '100%'}
});
bar.animate(1.0);
</script>
Here's my css.
#container {
margin: 20px;
width: 400px;
height: 8px;
}
Here's what's coming up when I run it.
You mixed something up. if you use <script src=""></script> you tell the browser to import a js library (in your case require.js). The contents between <script> and </script> are then ignored.
If you want to execute javascript code you have two options.
Option 1: Inline Javascript like this:
<script src="require.js"></script>
<script>
console.log("test")
</script>
Option 2: Create your own .js file and extract the code there:
<script src="require.js"></script>
<script src="your_own_js_file.js"></script>
If src is in the tag it will not read its contents. Simply remove the src and it should work.
According to your source variable container is undefined, so you try to set the progress bar to an empty container. So either assign value '#container' to your variable or just replace new ProgressBar.Line(container, with new ProgressBar.Line("#container",
And yes, you need to split and your script like
<script src="/require.js"/>
<script>
Your script here
</script>
Since you are using the id of the div element to render the progress bar, you need to load the javascript code after the window is loaded.
index.js
window.onload = function onLoad() {
var bar = new ProgressBar.Line(container, {
strokeWidth: 4,
easing: 'easeInOut',
duration: 1400,
color: '#FFEA82',
trailColor: '#eee',
trailWidth: 1,
svgStyle: { width: '100%', height: '100%' },
});
bar.animate(1.0);
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>ProgressBar.js - Minimal Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
#container {
margin: 20px;
width: 400px;
height: 8px;
}
</style>
</head>
<body>
<p class="infoBox"></p>
<h3>Skills</h3>
<h4>Computer Languages</h4>
<p>Java</p>
<div id="container"></div>
<p>Python</p>
<script src="https://cdn.rawgit.com/kimmobrunfeldt/progressbar.js/0.5.6/dist/progressbar.js"></script>
<script src="index.js"></script>
</body>
</html>

Fullcalendar: Resize height on window resize (aka shrink while preserving aspect ratio)

I have been completely unable to resize the height of an FC (fullcalendar). I am trying to fit a FC in a div and would like the FC to fill the div completely but not go outside of it. While initializing the calendars the height attribute seems to have no effect. However the width of the FC seems to fit that of its parent div and furthermore, it resizes accordingly. But the FC's height does not. This creates a long and narrow FC that is no longer readable. How can I make the FC resize while conserving its aspect ratio so that it doesn't become unreadable?
Thanks in advance
P.S:
Just to be clear I have read the docs and tried setting the FC's height dynamically using JQuery (as well as through css) but this has not worked and I don't understand why.
$(document).ready(function() {
//----------SCHEDULE INITs----------
$('#schedule_1').fullCalendar({
theme: false,
// contentHeight: $('#scheduleDiv').height(),
contentHeight: "auto",
//height: "auto",
defaultDate: '2000-01-03',
defaultView: 'agendaWeek',
columnFormat: 'dddd',
allDaySlot: false,
minTime: "07:00:00",
maxTime: "21:00:00",
navLinks: false,
editable: false,
eventLimit: true,
header: false
});
$('#schedule_1').fullCalendar('option', 'height', 100); //Seems to have no effect...
});
html {
position: relative;
min-height: 100%;
}
body {
background-color: #FCFDFE;
min-height: 100%;
margin-bottom: 60px;
overflow-y: scroll;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.5.1/fullcalendar.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.5.1/fullcalendar.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid" id="main">
<div class="col-md-8">
<div id="schedule_1"></div>
</div>
<div class="col-md-4">
<p>Second Column!</p>
</div>
</div>
</body>
</html>
Its due to the contentHeight set to "auto".
$('#schedule_1').fullCalendar('option', 'height', 100); //Seems to have no effect...
So it doesnot reflect back the code your trying to set in the above line.
For your refference I have given link below:
https://jsfiddle.net/4cpn5b5v/
To address your specific issue with height: You're trying to set the height of the entire calendar to be less than the automatically computed height of the calendar's content. This is logically impossible.
If you set the contentHeight option to the same value (or less) as well, then it will shrink the height as you want, as follows:
$(document).ready(function() {
//----------SCHEDULE INITs----------
$('#schedule_1').fullCalendar({
theme: false,
defaultDate: '2000-01-03',
defaultView: 'agendaWeek',
columnFormat: 'dddd',
allDaySlot: false,
minTime: "07:00:00",
maxTime: "21:00:00",
navLinks: false,
editable: false,
eventLimit: true,
header: false,
height: 100,
contentHeight: 100
});
//$('#schedule_1').fullCalendar('option', 'height', 100); //Seems to have no effect...
});
html {
position: relative;
min-height: 100%;
}
body {
background-color: #FCFDFE;
min-height: 100%;
margin-bottom: 60px;
overflow-y: scroll;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.5.1/fullcalendar.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.5.1/fullcalendar.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid" id="main">
<div class="col-md-8">
<div id="schedule_1"></div>
</div>
<div class="col-md-4">
<p>Second Column!</p>
</div>
</div>
</body>
</html>
See https://fullcalendar.io/docs/display/contentHeight/
As for the rest of your description, I'm not 100% sure what you're expecting. You asked "How can I make the FC resize while conserving its aspect ratio so that it doesn't become unreadable?" In what circumstances, precisely? If the width becomes very narrow, then even if the height shrunk accordingly (bear in mind it will never shrink below either the height necessary to display the content without scrollbars, unless that goes beyond the height of the viewport), or the exact height which you can specify), it would, at a certain point, become unreadable anyway. You can always control the perspective using the aspectRatio option, rather than setting an explicit height. If you perhaps clarify with a screenshot of the problem you're experiencing, and the exact circumstances it occurs, and another screenshot / mockup of how you'd want it to look, that might clarify enough to be able to suggest something more definite.

spin.js is not showing up on my site?

I am new to Javacript (very, very new) and I need to place a loading spinner on a site. We currently have a screensaver and once you tap the screen it takes a awhile to get to the necessary url. So, we wanted to place a spinner to make sure users would not continue to tap the screen.
I am using spin.js abd I am pretty sure I am doing something wrong as it is not showing up when I do a test.
Here is the code I am using:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, width=device-width" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>THE TITLE</title>
<style type="text/css">
body {
background-color: #000;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
width: 1024px;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
-webkit-user-select: none;
-webkit-text-size-adjust: none;
}
a,img,map,area {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
</style>
<script type="text/javascript" src="spin.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var opts = {
lines: 13, // The number of lines to draw
length: 20, // The length of each line
width: 10, // The line thickness
radius: 30, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 0, // The rotation offset
direction: 1, // 1: clockwise, -1: counterclockwise
color: '#000', // #rgb or #rrggbb or array of colors
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: '50%', // Top position relative to parent
left: '50%' // Left position relative to parent
};
var target = document.getElementById('foo');
var spinner = new Spinner(opts).spin(target);
</script>
</script>
</head>
<body onLoad="timeout(7,goto,'screen3.html');">
<img src="screen2.jpg" width="1024" height="768" border="0">
<div id="spinner">
</div>
</body>
</html>
Any advice will be appreciated.
A few things are wrong with your code:
you have 2 closing <script/> tags after eachother (right before ), so that's a syntax error.
you have another syntax error. You're not closing jqueries document.ready function properly.
You're using a jQuery method but you're not including the jQuery library in your code.
You say color:'#000' in the spinner options, which means the spinner will be black (same as your background color so you will never see it).
The spinner works in its most simple form. See working example:
http://jsfiddle.net/wLkganhm/
If you're very new to javascript I suggest reading up on how to use the debugger so you can find the syntax errors for yourself :)
You have a few issues with your code as already pointed out.
I've put up a cleaned up version here http://jsbin.com/payuzeyopa.
Things to improve on/fix:
Try using a site like JSFiddle or JSBin to share/prototype your code with others
Keep your HTML, CSS and JavaScript files separate
Spot errors early by using tools built into the browser. For example, see http://discover-devtools.codeschool.com/ for an excellent starter.
Finally, read up on JavaScript and HTML :)
Good luck!

Html not connecting to js

So I'm trying to make a slideshow using js, I have asked for help on that and it's working in JSFiddle, but it won't work in my local environment, so I'm wondering if I have some wording or something wrong somewhere that someone could help me see.
HTML5
<!DOCTYPE html>
<html>
<head>
<title>slider</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="viewport" content="with=device-width, initial-scale=1.0">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="slider.js"></script>
</head>
<body onload="slider()">
<div class="slider">
<img id="1" src="slide_image1.jpg" alt="TV Deals"/>
<img id="2" src="slide_image2.jpg" alt="Furniture Deals"/>
<img id="3" src="slide_image3.jpg" alt="Electronic Deals"/>
</div>
</body>
</html>
CSS3
.slider {
width: 990px;
height: 270px;
overflow: hidden;
margin: 30px auto;
background-image: url('ajax-loader.gif');
background-repeat: no-repeat;
background-position: center;
}
.slider img{
border: 0;
display: none;
}
JavaScript
$(document).ready(function () {
slider();
});
function slider(){
var count = 1;
$('#1').show();
(function slide(){
$('.slider img').hide();
if (count > 3) {count = 1;} // makes this a loop
$('#'+count).fadeIn('slow');
count += 1;
setTimeout(function () {
slide();
}, 5000);
})();
}
Is my "onload" command correct? I'm using Web Expression as a designer and I actually went in through the url path for each and ever image and selected the image, so I know the paths are correct (did the same thing for the js). The JavaScript itself is called "slider.js" could this affect my code in anyway? This is my first attempt at doing one of these so I have no idea what's causing it to go wrong.
When you say local environment, is it running on your computer under the file:// protocol? (i.e., when you look at it is it something like file://C:\My\Files\index.html) or with a server running over the http:// protocol?
If it is the former, you need to change the script srcs from // to http:// explicitly. // means "use whatever protocol the page is using", so that would mean it tries file://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js, which obviously doesn't exist.
That's the only thing that jumps out at me as being off and is a common mistake when working locally.

Categories

Resources