I've been having this issue with fullpage.js not allowing me to scroll properly. Please see the issue at https://www.rewardslive.com/test
I have jQuery 1.10 loaded onto the site already, but the javascript code that is in question here is inline on the page, after along with the initialization code which is an extension of the document ready with no conflict in the rewardslive.js inline script.
Going to the page does not pose an issue, but when i try to scroll down, the url bar changes to https://www.rewardslive.com/test#secondPage - but there is no actual scrolling downward and no new content is updated. I want to keep the header as seen, in there for all intents and purposes.
Is there something I am missing here? All i want is the basic fullpage, 'scroll down function to see more' feature.
Thanks again,
George
The javascript console shows this error:
Uncaught TypeError: Object # has no method 'easeInQuart'
Which means you are not importing the jQuery UI library which is needed by the plugin as specified in the documentation.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
Also, you have problems in your HTML markup as you can see highlighted in red here.
If you do not want to include the whole jquery UI library for just that single effect, you can use the easings file provided by fullPage.js that includes all of the jquery UI easings.
Related
I have a HTML page that I need to be linked to within our organization's SharePoint 2010 portal. I have all needed files (CSS, images, jquery) stored in the same document library. The CSS seems to be working fine but I'm having trouble getting the jQuery to work. Any suggestions or thoughts on what could be the issue here? Thank you.
**Update: The HTML page consists of one image (image map) that I have sectioned into 100 or so clickable areas. When clicked, a jQuery plugin activates and (SHOULD) display a tooltip directly to the right of the clickable area. My issue is that the tooltip is being displayed to the right of the WHOLE image instead. So I think I was wrong in my initial question about the jQuery not working. The tooltip plugin indeed activates, it is just appearing outside the image instead of on top of the image where it should be. This works properly in a local environment but once the files are uploaded to the SharePoint server this behavior happens. Is there some internal JS/CSS files within SharePoint that I can/need to override? Thanks for helping!
Need some more details, is jQuery not loading at all? Or just errors calling jQuery functions? I'm guessing you're getting errors calling jQuery functions. You'll want to use jQuery.noConflict(); to prevent conflicts with SharePoint javascript functions. The $ symbol that jQuery uses by default is also used by SharePoint. So you call jQuery.noConflict(); at the top of your javascript, and then you just swap using the $ for calling jQuery functions to just writing jQuery. So $(document).ready becomes jQuery(document).ready. $.ajax becomes jQuery.ajax, and so on.
jQuery.noConflict Details
I'm using Skrollr to animate & create parralax effects when scrolling the page, but there's a short lag which I guess is the Skrollr javascript/jQuery initialising.
Any ideas on how to avoid having the mess at the beginning?
The WP website in question is this one : http://hustynminepark.com
Thank You!
Unless I'm mistaken, the layout of your page entirely depends on the activation of the plugin. You can solve this problem by finetuning the CSS so that the initial page corresponds exactly to what you see after activation of the plugin.
Also, don't forget to minify (concatenate / uglify) your javascript files before loading them into the browser; this will speed up the loading of the page and the activation of the plugin.
Btw, the site looks pretty cool.
If I am correct you have a FOUC, you can use jQuery to detect when your DOM in ready then call init.
First of all you want to include the skrollr.min.js file at the bottom of your document (right before the closing ) and then call skrollr.init(). Or you can place it inside the if you want to, but make sure to call init() once the document has been loaded (e.g. jQuery's ready event or even window.onload).
I am trying to make a lightbox gallery and have used the example source code.
Here is the documentation I read over: http://dimsemenov.com/plugins/magnific-popup/documentation.html
Uncaught TypeError: undefined is not a function
Uncaught ReferenceError: $ is not defined
I am not sure what the errors mean or what to do with them.
In a video tutorial I watched, they said something about a jquery conflict being a potential problem. On a different page of the website, I used a Kwicks sliding menu (which also used jquery). That's the only thing I can think of.
I would really appreciate any help you would be able to give me!
Thank you! There are no more errors, but now I need to make the hovering on the image work with the zooming in magnifying cursor.
I have made the hovering work, now I need to make the zooming in magnifying cursor work. I have attached a page of what I what the cursor to be when it hovers.
Example: http://dimsemenov.com/plugins/magnific-popup/
I have figured out the zoom cursor! Thanks for all the help!
The documentation of the plugin Magnific popup you are using suggests -
Including files
<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Magnific Popup core JS file -->
<script src="magnific-popup/jquery.magnific-popup.js"></script>
Remember : You need to include jQuery file reference, for the plugin to work; rather every jQuery plugin. And in the specified order. This is the sole reason behind $ not defined and undefined in not a function.
I've been trying to create a set of tabs in Magento using the following plugin:
http://os.alfajango.com/easytabs/
After setting it all up, adding the HTML, CSS & javascript the tabs seem to not work correctly instead they sort of act like anchor points on the page.
I've added this to the header of the site:
<script type="text/javascript" src="/javascripts/jquery.hashchange.min.js"></script>
<script type="text/javascript" src="/javascripts/jquery.easytabs.min.js"></script>
And I believe all the files are in the correct place / linked to in the right way.
The jQuery isn't in the above because when I added it to the header there were loads of conflicts as I believe Magento already includes the jQuery library.
Here's an example of the tab so far:
http://bit.ly/1hT1Xa0
Thanks for any help :)
You have to invoke easytabs by adding
$('#tab-container').easytabs();
// try with no conflict if not working
jQuery.noConflict();
jQuery('#tab-container').easytabs();
see more details tab at demo site.
I am having trouble implementing a jquery slider (flexslider)
I feel like I am missing something very basic, but for some reason I just cannot put my finger on it. Any help would be amazing. The link to the test site is below.
I am trying to get the slider to appear in the empty green area.
I am also working in Gumby responsive framework
http://4grain.bmdigitalgroup.com/
This is your issue:
Uncaught TypeError: Object [object Object] has no method 'flexslider'
...also looks like your loading your jquery file after the flexslider file. try keeping all your .js files in one place, with your jquery file on top of all of them.
You have 2 jquery files loaded on the same page. you should only need one, unless you are intentiontally trying to load 2 of them..
try placing your script...
$(window).load(function() {
$('.flexslider').flexslider();
});
at the bottom of the page, wrapped in a script tag, before the body ends, instead of inside the head of the page. the script is waiting until the page is loaded anyway.
UPDATE!
Hey good job so far! i'm seeing what you have done on your page via the web console.
And if you want to get rid of that...
Uncaught TypeError: Object [object Object] has no method 'on'
...then remove the jquery 1.6.2 file from the top of your page, and place the fexslider.js file at the bottom of your page.
As noted, you are having a double reference to the jquery library. Try doing this which will stop the dual references:
<script type="text/javascript" charset="utf-8">
$.noConflict();
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
Give #maincontentbody a height, perhaps 75px, then all of the children need to have a defined height and width, even id it's width:100%. min-height is not an appropriate value in this case
Your images appear to be much larger than the green bar area, do you think it will animate as well?