I'm not a JavaScript developer, and I'm struggling to do a little experiment as a side project.
I'm trying to use this script without RequireJs.
https://github.com/xxmuaddib/lottie-colorify/blob/master/examples/example1/index.html
I've been trying for a while and checked StackOverflow, but I have very little knowledge of JavaScript.
Here's what I got so far:
<html style="width: 100%; height: 100%">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.6.3/lottie.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script> -->
<script src="../../lib/umd/index.js"></script>
</head>
<body style="background-color: #ccc; margin: 0px; height: 100%; font-family: sans-serif; font-size: 10px">
<div style="width: 100%; height: 100%; background-color: #333" id="bodymovin"></div>
<script>
//requirejs(['../../lib/umd/index'], function (lc) {"
$.getJSON('https://assets6.lottiefiles.com/packages/lf20_guwqiaxe.json', function (data) {
var animData = {
wrapper: document.getElementById('bodymovin'),
animType: 'html',
loop: true,
prerender: true,
autoplay: true,
animationData: lc.flatten('#ffff00', data),
};
var anim = bodymovin.loadAnimation(animData);
});
//});
</script>
</body>
</html>
I removed the CDN for RequiredJS and its implementation and linked the script manually between <script> tags.
But now the variable lc is not defined.
requirejs load the script for this file
https://github.com/xxmuaddib/lottie-colorify/blob/master/lib/umd/index.js
so if you'll comment this library just remove its callback return "lc" variable
line that throws the error should be like that
animationData: flatten('#ffff00', data), //you already imported the lib/umd/index.js file which has this function
Related
1.Ace editor is strong but not well documented. I use it as my SQL editor but the autocompletion comes in lower case, I edited the mode-sql.js keywords into uppercase but doesn't work, where I can change this?
2.In the future, I also want to read my db files and generate a list of the dbs, tables and so on and I want them in the autocompletion schema, which part of ace should I concentrate?
Currently I have:
<!DOCTYPE html>
<html>
<body>
<div id="editor" style="height: 500px; width: 800px">hahaha</div>
<div id="commandline" style="position: absolute; bottom: 10px; height: 20px; width: 800px;"></div>
</body>
<script src="src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="src-noconflict/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script>
var langTools = ace.require("ace/ext/language_tools");
var editor = ace.edit("editor");
editor.session.setMode("ace/mode/sql");
editor.setTheme("ace/theme/tomorrow");
editor.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true
});
</script>
</html>
I am using google docs viewer to display word and PDF files in dialog in my application. But my client need that document should not get download. So want to hide 'Pop-out' option. Please help me for it. Below is my code snippet :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("#btnShow").click(function () {
$("#dialog").dialog({
modal: true,
title: '',
width: 750,
height: 450,
buttons: {
Close: function () {
$(this).dialog('close');
}
},
open: function () {
var object = "<iframe id='resViewer' src='https://docs.google.com/viewer?url=my_file.pdf&embedded=true' style='width: 700px; height: 700px;' frameborder='0'></iframe>";
$("#dialog").html(object);
}
});
});
});
</script>
<input id="btnShow" type="button" value="Show PDF" />
<div id="dialog" style="display: none">
</div>
Please help me.
If anyone knows any other way to display word and PDF file both give me way or suggest for this.
Thanks.
The following CSS will remove the pop out button.
div[aria-label="Pop-out"] {
display: none;
}
div["aria-label=toolbar"] {
width: 52px;
}
But to get the CSS to apply to the iframe your going to have to do some trickery. See jQuery, select element inside iframe, which is inside an iframe and How to apply CSS to iframe?
Can anyone suggest me a solution please? I've been trying half an hour to get jQuery ready and working for my Visual Studio but it does not work. I can't really be specific because i also don't know why.
<script>
$(document).ready(function () {
$("button").click(function () {
$("#square").animate({ left: '500px' }, slow);
});
});
</script>
<style>
#square{
border: solid; border-color: aqua; border-width: 1px; background-color: skyblue; width: 125px; height: 125px; text-align:center;
}
</style>
<body>
<div id="square">Focus on me!</div>
<div> <button>Click me</button> </div>
You have to add jquery to your page. You can add jQuery in two ways :
Download the jQuery library from jQuery.com
Include jQuery from a CDN, like Google
The jQuery library is a single JavaScript file, and you reference it with the HTML tag :
<head>
<script src="jquery-1.11.3.min.js"></script>
</head>
And for CDN :
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
then write your code :
$(document).ready(function(){
alert("Hello there!")
});
Add this piece of code above the closing body tag.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
Now you have successfully added jQuery!
I'm passing data to closure template(soy) via Javascript (json) but getting the about error in firebug.
// Simple html that starts the whole process
<html lang="en">
<head>
<title>Gigya Social Demo - getContacs</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.lightbox_me.js"></script>
<!-- add the soy js here-->
<script type="text/javascript" src="emailcontacts.js"></script>
<script type="text/javascript" src="invite_emailcontacts_view.js"></script>
<script type="text/javascript">
function openLightbox() {
var data = [{"provider":"Yahoo","firstName":"myname","lastName":"mysurname","nickname":"mynick","email":"email#hotmail.com","photoURL":"http://l.yimg.com/dh/ap/social/profile/profile_b10.png"}];
var invite = new InviteContactEmailView();
console.log(invite);
invite.open(data);
return this;
}
</script>
<style>
#contactsOverlay {
-moz-border-radius: 6px;
background: #eef2f7;
-webkit-border-radius: 6px;
border: 1px solid #536376;
-webkit-box-shadow: rgba(0,0,0,.6) 0px 2px 12px;
-moz-box-shadow: rgba(0,0,0,.6) 0px 2px 12px;;
padding: 14px 22px;
width: 400px;
position: relative;
display: none;
}
</head>
<body onLoad="openLightbox()">
<div id="contactsOverlay">
</body>
</html>
// soy invoker in file invite_emailcontacts_view.js
function InviteContactEmailView() {
this.template = {};
this.template.element = $('#contactsOverlay');
this.elementSelector = this.template.element;
}
InviteContactEmailView.prototype.open = function(contacts) {
this.elementSelector.lightbox_me({destroyOnClose: true, centered: true, onLoad: testme(this.elementSelector, contacts) });
return this;
};
var testme = function(ele, contacts) {
ele.append(jive.invite.emailcontacts.create(contacts));
$('fieldset div').bind('click', function() {
var checkbox = $(this).find(':checkbox');
checkbox.attr('checked', !checkbox.attr('checked'));
});
}
// soy template (on compile resides in file: emailcontacts.js)
{namespace jive.invite.emailcontacts}
/**
* #param contacts
* #depends path=/var/www/statics/js/invite_emailcontacts_view.js
**/
{template .create}
{foreach $contact in $contacts}
<fieldset>
<div>
<div class="data"></div>
<input type="checkbox" id="checkbox">
</div>
</fieldset>
{/foreach}
{/template}
Any kind of help is greatly appreciated.
REgards
Where is the compiled template? Putting a breakpoint in there will tell you more. I suspect you are not passing a hash to the template when you invoke it with a key contacts. Basically the template you declared should get a data set which looks something like this:
{contacts: [....]}
this obviously assumes you are not compiling in advanced mode.
I'm trying to slide background on hover.
I used the code below in HTML webpage once and it worked correctly.
But when I tried to use it in my ASPX page, first it gave this error:
"Microsoft JScript RunTime Error: '$' is undeclared"
So I deleted the 1st $ before function(). But I couldn't make it work still.
Any ideas why it does not work?
Code is:
<head runat="server">
<title></title>
<script type="text/javascript">
$(function () {
$("#vertical div a").hover(function () {
$("img", this).stop().animate({ top: "-173px" }, { queue: false, duration: 400 });
}, function () {
$("img", this).stop().animate({ top: "0px" }, { queue: false, duration: 400 });
});
});
</script>
<style type="text/css">
.altikisilik
{
display: block;
background: url('Images/Default/Brazil_bg.png') top;
}
#vertical div
{
position: relative;
overflow: hidden;
}
#vertical img
{
position: absolute;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="vertical" class="clear" runat="server">
<div>
<a class="altikisilik" href="Default.aspx">
<img src="Images/Default/Brazil.png" border="0" alt="Brazil" />
</a>
</div>
</div>
</form>
</body>
I can't see the jQuery script include anywhere in your code. I think that would be the issue
You must include jquery library above the rest of your javascript.
<script src="http://code.jquery.com/jquery-1.6.2.min.js" />
you should download the jquery.js from the site:www.jquery.com .Or use the google api support .In fact you should import the jquery file. choose one of the below:
this method you should put the jquery-1.6.2.min.js download from the site www.jquery.com to the folder where you put your sites,
or simply use the google support :