I tried to play and pause the animation using the toggle class button. Could you please give some suggestions?
Using this code, When I click the play/pause button the animation does not pause.
In my HTML file I write something like this:
<button type="submit" id="btn">play/Pause</button>
In my CSS file I write something like this:
.mysun, .mysky {
animation-play-state: paused;
};
In my JS file I write something like this:
btn.onclick = myFunction;
function myFunction() {
var sun = document.getElementById("sun");
var sky = document.getElementById("sky");
sun.classList.toggle("mysun");
sky.classList.toggle("mysky");
};
how about trying !important next to
sky.classList.toggle("mysky");?
Related
It's been a REALLY long time since using Flash and now have to use Adobe Animate for an HTML 5 Canvas project. I created the animation, set all the actions on the timeline to stop the timeline where I need it to be but now I need to know how to play the animation again from outside of another JS file (custom.js) inside my Animate JS file (animate.js)
I've read a ton of articles and most reference the scope of this being the problem.
Here's how I would imagine this would work.
// On scroll of div
<div onscroll="myFunction()">
// inside my custom.js
myFunction() {
this.gotoAndPlay(2);
};
Some have said to set a var of
var that=this;
And then calling that.gotoAndPlay(2);
Many thanks
Animate declares a global (window) variable exportRoot on publish that points to the root timeline.
As a demonstration, if you put this code on the root timeline:
alert(exportRoot === this);
You should see "true".
Thanks to ClayUUID
<script type="text/javascript">
function playTimeLine () {
//alert ("working");
exportRoot.gotoAndPlay(30);
}
</script>
<button onclick="playTimeLine()">PRESS</button>
I want to change the label of a widget when user click it, then I write the code looks like this:
var widgets = require("sdk/widget");
var statusBar = widgets.Widget({
id: "patchouliStatus",
label: "Wait Page Loading...",
contentURL: "http://www.mozilla.org/favicon.ico",
onClick: function(){
this.contentURL = "http://www.google.com/favicon.ico";
this.label = "Clicked";
}
});
When I click the widget, the icon has changed, but nothing happen to the label.I move the mouse to the widget and it still show "Wait Page Loading...".Is there a way to dynamically change the label?
Firefox: v27.0.1
Add-on SDK: v1.15
Widget's label is read-only. You must use tooltip attribute to show the user a text on mouse hover, this way:
var widgets = require("sdk/widget");
var statusBar = widgets.Widget({
id: "patchouliStatus",
label: "Wait Page Loading...",
contentURL: "http://www.mozilla.org/favicon.ico",
onClick: function(){
this.contentURL = "http://www.google.com/favicon.ico";
this.tooltip = "Clicked";
}
});
As docs says somewhere in this section -I think it could be more clearly documented-, tooltip value is an "optional text to show when the user's mouse hovers over the widget. If not given, the label is used". Also, examples in that section don't make it clear enough as I think they should.
Ok man thanks for the XPI, change changeLabel function to this, my above was really bugged.
function changeLabel(str){
var DOMWindows = Services.wm.getEnumerator('navigator:browser');
while (DOMWindows.hasMoreElements()) {
var aDOMWindow = DOMWindows.getNext();
var myWidget = aDOMWindow.document.getElementById('widget:jid1-njALX8gXKY872g#jetpack-patchouliStatus');
if (myWidget) {
Services.appShell.hiddenDOMWindow.console.info('myWidget:', myWidget);
myWidget.setAttribute('label', str);
myWidget.setAttribute('tooltiptext', 'tooltip changed');
} else {
Services.appShell.hiddenDOMWindow.console.info('myWidget null:', myWidget);
}
}
}
It also seems that the id of your widget starts with tyour addon id name.
Now I gave you the enumerator function because that goes over all windows and you can add event listener. But really if you just want to target the one that was clicked just get the most recent window, as that will obviously hold the correct window with your widget as we just clicked there and the event listener fires on click.
Change changeLabel to this:
function changeLabel(str){
var aDOMWindow = Services.wm.getMostRecentWindow('navigator:browser');
var myWidget = aDOMWindow.document.getElementById('widget:jid1-njALX8gXKY872g#jetpack-patchouliStatus');
if (myWidget) {
Services.appShell.hiddenDOMWindow.console.info('myWidget:', myWidget);
myWidget.setAttribute('label', str);
myWidget.setAttribute('tooltiptext', 'tooltip changed');
} else {
Services.appShell.hiddenDOMWindow.console.info('myWidget null:', myWidget);
}
}
Also that Services.appShell.hiddenDOMWindow.console.info is just something nice to debug, I left it in there so you can see how it works. It logs to "Browser Console" (Ctrl+Shift+J).
As a final note I used a non-sdk solution by requiring chrome. they advise you not to do that because they want you to use the SDK functions I don't know about SDK but you can use the getEnumerator and recentWindow function by requiring window/utils it looks like:
Read window/utils article here
I'll give you non-sdk solution here but someone will have to help convert it to sdk solution. You can paste this in your code it will work though.
Im not sure how the element is inserted into the dom but I guessed.
var {Cu, Ci} = require('chrome'); //if you want to paste this into scratchpad with with Environemnt set to Browser than dont need this line, this line is for sdk
var DOMWindows = Services.wm.getWindowEnumerator(null);
while (DOMWindows.hasMoreElements()) {
var aDOMWindow = aXULWindow.QueryInterface(Ci.nsIInterfaceRequestor).getInterface(Ci.nsIDOMWindowInternal || Ci.nsIDOMWindow);
var myWidget = aDOMWindow.querySelector('#patchouliStatus'); //im not exactly sure how the element is inserted in the dom but im guessing here
if (myWidget) {
myWidget.label = 'rawr';
}
}
I want to disable right click on the page in general but on each image has a custom jquery dialog. Now the img id is passed to the event so while the menu is the same it will give different results per image.
so I want to bind my generic context menu for non images for all except img class="image"...
so how do I express $(!.image) ???
EDIT
I looked up the not function. I am using it like this: However I still get general help even on photos.
<script>
$(document).ready(function() {
$('*').not('.public-photo').bind("contextmenu", function (event) {
$("div.custom-menu").hide();
event.preventDefault();
$("<div class='custom-menu'>General Help</div>")
.appendTo("body")
.css({top: event.pageY + "px", left: event.pageX + "px"});
});
$('*').not(".public-photo").bind("click", function (event) {
$("div.custom-menu").hide();
});
});
To get every element excluding images, try this:
$('*:not(.image)').dialog({
// dialog setup...
});
Or alternatively:
$('*').not('.image')
You can do it using the :not() selector, like this:
$(':not(.image)')
Or the .not() method like this:
$('<your container>').not('.image')
$('.yourSelector').not('.image')
for all except img class image :
using css not pseudo selector :
$('*:not(img.image)')
using jquery not method
$('*').not('img.image')
Ok, I was doing a simple JQuery animation. When a user will click on an image,it will move to the left by 1000px. Here is the code below:
function cloud2 () {
$('#cloud2').animate({left:'1000px'},40000);
setTimeout(cloud2,2000);
}
$(document).ready(function() {
$('#cloud2').click(function() {
cloud2();
});
});
Very nice nothing is wrong, all is working like a BOSS! When the image reaches 1000px, it stops. All good! What I want now, is to replace the image with another image once it stops when it completes the 1000px animation. How to do that? For example, once it stops, the image changes to another one, let's say image2.jpg for instance.
Thank!
animate() has an event for ending animation.
For example you have something like:
<img src="image1.jpg" id="myimg">
function moveimg() {
$('#myimg').animate({left: '1000px'}, 40000, function() {
$('#myimg').attr('src', 'image2.jpg');
});
}
setTimeout("moveimg()", "2000")
I need to tell you that i'm very new to jquery and still learning, please don't laugh at this. I wanted to have an image gallery on my website and found this beautiful gallery that uses jquery. Here is the link for it:
http://tympanus.net/Tutorials/ThumbnailsNavigationGallery/
So there is this snippet that helps the user to click on the album or rather the arrow next to it, to open and close the thumbnail wrapper for the album. All I want is for the first album to open automatically when the webpage is loaded completely. I guess we might have to use the .load() method but I'm not sure how to use it. The code that is inserted here has both the functions to open and close the album, I just wanted to automate the opening part.
//clicking on the menu items (up and down arrow)
//makes the thumbs div appear, and hides the current
//opened menu (if any)
$list.find('.st_arrow_down').live('click', function () {
var $this = $(this);
hideThumbs();
$this.addClass('st_arrow_up').removeClass('st_arrow_down');
var $elem = $this.closest('li');
$elem.addClass('current').animate({
'height': '170px'
}, 200);
var $thumbs_wrapper = $this.parent().next();
$thumbs_wrapper.show(200);
});
$list.find('.st_arrow_up').live('click', function () {
var $this = $(this);
$this.addClass('st_arrow_down').removeClass('st_arrow_up');
hideThumbs();
});
I tried getting help from the original author of this script but unfortunately she is not responding. Looking forward to your kind assistance. Thanks in advance!!
This 2 lines:
$list.find('.st_arrow_down').live
and
$list.find('.st_arrow_up').live
search for HTML elements with class="st_arrow_down" or class="st_arrow_down"
and bind event "click" on these
This code on
$(document).ready(function () {
var $elem = $('.album').first();
$elem.addClass('current').animate({'height':'170px'},200);
$elem.show(200);
var cnt = $elem.find('.st_wrapper').first().css('display','block');
});
When DOM is ready, you search first album then show animation and display the imgs
Bye