I'm trying to get started with GSAP, but can't seem to get anything working yet. I've included TweenLite, the Easing and CSS plugins, and have very basic code, but I can't seem to get anything running. Here is my main javascript:
window.onLoad = function(){
var logo = document.getElementById("logo");
TweenLite.to(logo, 1, {
left: "632px",
onComplete: function(){
console.log("completed anim");
}
});
}
You can see a running example at deconfigured.com (at the time of this post, it's on a personal server. I'll transfer it over to a jsfiddle after I make sure that my server software isn't the cause of the issue).
The console log never appears on my browser (latest firefox).
Is it just a silly error? Any help would be tremendous.
Try window.onload, without caps: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onload
Related
Bear with me as I'm rather new to Rails and have very little experience with JS.
I purchased a Bootstrap theme for my rails app and I'm running into an issue with the JS written. It's not loading various scripts due to turbolinks but I have no idea on how to resolve this. Here's the JS file that came with the theme.
Theme.JS file:
(function ($) {
"use strict";
$(window).load(function () {
// ----------------------------------------------------------------------------------------------------------------------->
// SITE LOADER ||-----------
// ----------------------------------------------------------------------------------------------------------------------->
$('#loader').fadeOut();
$('#preloader').delay(350).fadeOut('slow');
$('body').delay(350).css({ 'overflow': 'visible' });
})
// ---------------------------------------------------------------------------------------------------------------------------->
// GENERAL SCRIPTS FOR ALL PAGES ||-----------
// ---------------------------------------------------------------------------------------------------------------------------->
$(document).ready(function () {
openSite();
});
function openSite() {
fullScreenSlider();
header();
scroll();
winResize();
pushmenu();
pluginElement();
sliderHero();
sliderAll();
containerGridMasonry();
scrollCallbackEle();
shortcodeElements();
};
// ---------------------------------------------------------------------------------------------------------------------------->
// RESIZE FUNCTIONS ||-----------
// ---------------------------------------------------------------------------------------------------------------------------->
function winResize() {
$(window).resize(function () {
})
};
})(jQuery);
I've messed around with
$(document).on('ready page:change', function(){
fullScreenSlider();
header();
scroll();
winResize();
pushmenu();
pluginElement();
sliderHero();
sliderAll();
containerGridMasonry();
scrollCallbackEle();
shortcodeElements();
});`
As well as just running page:load around the OpenSite function around just the Jquery part, around all the functions. I'm really at a loss here, not sure what I'm doing wrong. I've used the turbolinks Gem and I thought that had it fixed but after a page reload only a couple things work on the page.
Here's a list of functions that seem to work after clicking a link that changes the view.
header()
sliderAll()
skillsProgressBar()
accordion()
accordion() is intermittent and I have no idea why it works when nothing else is working. It never really worked but started working when everything else broke.
Any ideas would be most appreciated. I'm probably doing plenty wrong here but, like I said, I'm new and taking a class on this but we are almost at the end of the semester and haven't even covered Gems.
PS. I know I need to have the functions run off of a page change rather than document.ready but I have been trying to figure it out for almost a week to no avail.
There's also a jquery rails gem that fixes some of the things. But the easiest solution is to probably just remove turbolinks.
I was testing stuff in JSFiddle (with jQuery 1.9.0 included as an external ressource), and I basically had something like this in my HTML :
Hello world!
Under Chrome Inspector (v.35) / Script / index file, I spotted that AdBlock Plus (even toggled off) probably added these lines in my HTML's source :
<script>
(function () {
with(this[2]) {
with(this[1]) {
with(this[0]) {
return function (event) {
alert('Hello world!'); //Same as my onclick up there
};
}
}
}
})
</script>
I've never seen something like this, I guess it is meant to be a protection, but I can't figure what's its purpose.
What could do this code? Any guess?
Disclaimer : I'm sorry, I tried hard but I'm absolutely unable to reproduce this for the moment, apart for my own case...
Edit
I though it was impossible to reproduce even by opening my fiddle in another tab, but in fact, it seems to be possible. So, here's the fiddle, activate AdBlock plus, and here's how to see this :
Meanwhile, I'm trying to create a case where it's 100% reproductible, I'll post it here as soon as possible.
I have added this code to my site (without all the stuff to set up the comments and headers): http://jsfiddle.net/WzLG2/3/ Below is the javascript.
jQuery.noConflict();
jQuery(document).ready(function() {
var top = jQuery('#smi').offset().top - parseFloat(jQuery('#smi').css('margin-top').replace(/auto/, 0));
jQuery(window).scroll(function (event) {
// what the y position of the scroll is
var y = jQuery(this).scrollTop();
// whether that's below the form
if (y >= top) {
// if so, ad the fixed class
jQuery('#smi').addClass('fixed');
} else {
// otherwise remove it
jQuery('#smi').removeClass('fixed');
}
});
});
My site: http://hollyshelpings.com
I'm trying to get the brown box underneath my header to scroll to the top and then stop there like in the jsfiddle. I'm using thesis and I have jquery enabled. I have wordpress and I already looked up how to use jquery in wordpress with replacing $ with jQuery.
I got the basis for the code from this site: Jquery for designers (it won't let me post the link)
I tested and jquery appears to be loading, I used firebug and I'm not seeing errors that pertain to this code (it looks like some plugins may have errors, however). I'm pretty new at coding so I'm not sure what else to test or how to troubleshoot much past this. My end goal is to use this for my social media icons instead of the tabs on the side. Any guidance or suggestions are greatly appreciated.
First step is to check your javascript console and remove any errors you see coming up there, as they can cause problems elsewhere. Not saying it's related, but your call to jQuery('#commentluv') is broken. I also notice you're using jQuery 1.4.2 which is really old, and should consider upgrading (maybe not to version 2 as that changed a lot, but at least to 1.9, maybe 1.10).
I am using organictabs plugin, which I initiate in every page load in this form:
$(function() {
$("#example-one").organicTabs();
$("#example-two").organicTabs({
"speed": 200
});
});
The tabs work fine in all browsers, and then I perform an ajax call which regenerates the tabs with the following code:
if(xmlHttp.readyState == 4)
{
HandleResponse(xmlHttp.responseText,'page-wrap');
$(function() {
$("#example-two").organicTabs({
"speed": 200
});
});
}
Again, the tabs are regenerated properly and everything works fine in all browsers EXCEPT in IE, when I try to switch tabs it doesn't work. I am initiating the jquery code onreadystate change, and i really can't figure out what can the problem be with IE?
Any help will be greatly appreciated.
All the best
The problem was with how IE handles the ("a.sample_class").attr("href") attribute. In Chrome/FF the relative path is returned(in this case just the anchor #tag), whereas in IE, after I was calling an ajax page, the absolute path was being returned(http://www.mysite.com/#tag), hence trying to find the entire anchor(string) in the current page.
More information regarding this issue you can read in this article: http://www.glennjones.net/2006/02/getattribute-href-bug/
Hope this is of help to someone, as it really took a few days of my time
How can I show or hide the entire Firebug panel and its icon at runtime ?
I browsed through Firebug.chrome but could not find anything appropriate.
I tried the following snippet which did not have any apparent effect, Firebug Lite was still there.
Firebug.extend(function (FBL) {
alert('TEST'); // This is run
FBL.Firebug.chrome.deactivate(); // No errors but nothing happens
});
The anonymous callback function is definitely invoked.
Quite an old post, but still popping on google search for such a question.
I'm not even sure which version of Firebug Lite you were using, but the following works well with 1.4.0 (once the page has loaded):
Firebug.chrome.open();
Firebug.chrome.close();
Firebug.chrome.toggle();
Firebug-Lite is enabled through the javascript function in the bookmark, and from there it just loads the javascript hosted at getfirebug.com.
If you control the website you're looking at, and want firebug to pop-up for that website, then you can add this to your code:
<script type="text/javascript">
function bookmarklet(F,i,r,e,b,u,g,L,I,T,E){
if(F.getElementById(b))
return;
E=F[i+'NS']&&F.documentElement.namespaceURI;
E=E?F[i+'NS'](E,'script'):F[i]('script');
E[r]('id',b);
E[r]('src',I+g+T);E[r](b,u);
(F[e]('head')[0]||F[e]('body')[0]).appendChild(E);
E=new Image;
E[r]('src',I+L);
}
$(document).ready(function() {
bookmarklet(document,'createElement','setAttribute',
'getElementsByTagName','FirebugLite','4','firebug-lite.js',
'releases/lite/latest/skin/xp/sprite.png','https://getfirebug.com/','#startOpened');
});
</script>
Or, did you mean that when you're browsing you always want Firebug / Firebug-Lite at the bottom?