Javascript Files Not Linking Correctly? - javascript

So, I've got what looks to me like a pretty simple setup. My end goal is to embed a lottie animation into my website (webflow). In Atom everything works fine.
HTML:
<body>
<div id="lottie"></div>
<script src="lottie.js"></script>
<script src="index_1.js"></script>
</body>
index_1.js:
var animation = bodymovin.loadAnimation({
container: document.getElementById('lottie'),
renderer: 'svg',
autoplay: true,
path: 'process_1.json'
})
And the animation plays in my HTML preview! Yay! Webflow, however doesn't have file hosting, so I decided to throw my "lottie.js" and "index_1.js" scripts and "process_1.json" on Amazon s3 and link them up using the file's public urls, but nothing appears on my website!
Is Amazon s3 not good for this sort of thing? Perhaps the "path" parameter in my index_1.js doesn't accept urls?
var animation = bodymovin.loadAnimation({
container: document.getElementById('lottie'),
renderer: 'svg',
autoplay: true,
path: 'https://audioplayerskin.s3.amazonaws.com/Json+Files/Process_1.json'
})
What could be the problem here?
Thanks! :)

Related

JavaScript is NOT working when uploaded on Host

I developed a website using the text-editor called Brackets which allows me to test run it locally using the browser of my choice. I have a jquery plugin for image sliding in my index.html file, and it works perfectly when I test it on my local computer. But when I upload it to Arvixe (web host), it doesn't seem to work. The html elements with their respective css are shown, but images are halted (instead of sliding).
Here is the piece of code that does not work:
<script src="responsiveslides.min.js"></script>
$(function () {
$("#test-slider").responsiveSlides({
auto: false,
pager: false,
nav: true,
speed: 500,
namespace: "callbacks",
before: function () {
$('.events').append("<li>before event fired.</li>");
},
after: function () {
$('.events').append("<li>after event fired.</li>");
}
});
});
Also, the script files are accessed directly (e.g. src="script.js"). When I debug the line with: $("#test-slider"), it says that it is an unexpected identifier.
Here is a pick of the whole jscript on the bottom of my index.html file:
javascript
It may happen because of a not valid jQuery path.
Try to put jQuery CDN between your <head></head> tag.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

Hacking/Overriding Javascript

I'm only familiar with HTML and CSS, which I use on a daily basis. !Important CSS overrides are something I have to do TONS of in order to customize websites for clients that use a 3rd party CRM system, but now I've been asked to see if I can override what a Javascript image slider does; namely if I can force it to let the images rotate out instead of showing a single image that only randomly changes out to other ones when the page refreshes. I'm not familiar enough with Javascript to know how to do this; I've used this same sort of image slider many many times over, so I know what settings need to be changed, but I don't know how to force an override like I do with CSS, or if it's even possible to tack on another on the same page that will do it.
Here's the javascript code snippet that the webpage has on it already.
<script type="text/javascript">
$(document).ready(function () {
var randSlick = Math.floor( Math.random() * $('#carousel > div').length );
$('#carousel').slick({
infinite: true,
autoplay: false,
autoplaySpeed: 10000,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true
}).slickGoTo(randSlick);
});
</script>
I need to change the "autoplay" to true, so it will play automatically instead of do nothing, and I'd like to change the "autoplaySpeed" to something more reasonable, like 3000.
I don't have access to this part of the code (Hence why I'm always having to do CSS !Important overrides; I can't just edit the existing code directly, I have to add my own in a sneaky hackery sort or way) so I'm hoping that there's an easy way to do this. My apologies if this is long winded or confusing in any way; I've taught myself HTML and CSS easily enough but Javascript is proving to be another animal entirely and I'm just flailing around at this point.
To get the obvious out of the way:
You will not be able to modify the JavaScript code with HTML/CSS, you can only do so via JavaScript.
What you see in the script is JQuery, a JavaScript extension library: see: JQuery API.
I recommend that you make your own script to reset the values of the $("#carousel") via the unslick function, which is clearly documented here: see: SlickJS.
$("#carousel").slick('unslick');
Immediately after which you can bind $("#carousel") with your own parameters like so:
<script type="text/javascript">
$(document).ready(function () {
var randSlick = Math.floor( Math.random() * $('#carousel > div').length );
$('#carousel').slick({
infinite: true,
autoplay: true,
autoplaySpeed: 3000,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true
}).slickGoTo(randSlick);
});
</script>
Make 100% sure that your JavaScript file gets called after the SlickJS import.
Any questions? Ask in the comments below :-)
In your page, you can deconstruct the existing slick object and recreate it with your own settings.
<script type="text/javascript">
$(document).ready(function () {
$('#carousel').slick('unslick'); // Destroy existing slick object
// Start a new one with the options you want
$('#carousel').slick({
autoplay: true,
autoplaySpeed: 3000
});
});
</script>

wordpress jquery 3d plugin not loading

i need help implanting my jquery script in wordpress.
I already linked everything in function.php (wp_enquere_scripts) and i checked it, both js load.
Now i have a problem not displaying what i would like to and I have no idea why...is it possible that my source-link is wrong?
here the code (its a 3d model viewer with images)
<div class="wpb_wrapper">
<script type="text/javascript"> $('.wpb_wrapper').spritespin({
source: SpriteSpin.sourceArray('/img/rad_zoom_{frame}.jpg', { frame: [1,34], digits: 3}),
width: 1100,
height: 770,
sense: -1,
mods: ['move', 'zoom', '360'],
autostart: false,
behavior: null,
module: null
});
here the link of the official plugin:
http://www.jqueryscript.net/other/Versatile-jQuery-Product-Image-Viewer-Plugin-SpriteSpin.html
maybe you guys know a better way putting this onto a wordpress-site
thanks

Is there a way to call back live seek times from SoundCloud oEmbed?

I am OK with JavaScript in general but I did not master the callbacks yet.
I have this code here which simply embeds the player to the page to the div location. I get uri from json using php.
<div id="widgetLocation"></div>
<script type="text/JavaScript">
SC.oEmbed("<?php print $obj->{'uri'}; ?>", {
// optional parameters
sharing : false,
buying : false,
liking : false,
show_artwork : false,
show_comments : false,
show_playcount : false
},
document.getElementById("widgetLocation")
);
</script>
I looked here: http://developers.soundcloud.com/docs/api/html5-widget and looked at the playground here: https://w.soundcloud.com/player/api_playground.html (what I could do there is just view the source code but it is written in a very complex javaScript and I don't seem to see how to make it work with js SDK which is SC.oEmbed. As well it seems to be using slightly different js library.
What I want is something as simple as when you seek within the widget it displays the current position in a label or something. Is it possible to do so?
Use the currentTime method along with the Media Fragments API:
Seeking through media
Media Fragments Specification
Video Subtitles in CSS

Embedding video with Play Framework and JW Player

I am trying to embed videos using the Play Framework and JW Player. I can hard code and make it work just fine, but I want to use the model's class to determine the video file (via path) that will be embedded.
Here is the code I have been playing with, but is not working:
<script src="#{'/public/jwplayer/jwplayer.js'}"></script>
<script>
$(document).ready(function(){
var content = ${_post.content};
setVideo(content)
});
</script>
<script type='text/javascript'>
function setVideo( content )
{
jwplayer('mediaspace').setup({
'flashplayer': "#{'/public/jwplayer/player.swf'}",
'file': content,
'controlbar': 'bottom',
'width': '640',
'height': '480'
});
}
</script>
Honestly, this is probably more of pseudo code at this point... But hopefuly it is clear what I am trying to do here:
Retrieve the content of the post (in the case the content will be
the path to the video)
Place that into the function.
Which will set the 'file': content.
Any suggestions on how to tackle this?
Some ideas for tackling the issue:
is the Path visible in the rendered HTML?
is it visible in the generated javascript?
does it need to be escaped correctly? i'd image your var content should be a string?
how does the _post.content get generated? why the underscore? are you doing this from within a play template tag?
is the file accessible via said path, outside of the script?
Hope this helps.

Categories