Is there a way to use ScrollMagic when jQuery is loaded from the bottom of the page? It works if I put jQuery in the but not if I don't. So far the site has been working well with all the scripts loading at the bottom and I don't want to change that, just for ScrollMagic.
Moving inline SM scripts into linked .js files doesn't seem to help.
You can do it from the bottom, first load jquery and then ScrollMagic.
here is a ScrollMagic wiki link that might help.
Did you try the new ScrollMagic 2.0? there is no jquery dependency anymore, as well as gsap.
Related
I'm unsure why but randomly on my wordpress site, #section tag on stopped working across whole site? Not sure where to look, been looking at it for a while can can't figure it out
Where should I start looking?
I'm using http://manos.malihu.gr/repository/page-scroll-to-id/demo/demo.html plugin - This was working totally fine.
Resolved by removing plugin completely and adding scroll-behavior: smooth to html CSS. Plugin wasn't working properly
I am trying to make the popover feature that is included in bootstrap which Twitter has provided. I have been trying to make it work for a while now and am totally burnt out of ideas on making it work, here is a sample of what I currently have for it http://jsfiddle.net/JPf9y/1
HTML
popover
Javascript
$("a[rel=popover]").popover();
It won't work when I click it, I checked to make sure my directory is written correctly.
Thank you!
You need to include the bootstrap javascript, bootstrap css, and jQuery javascript in your page. They can be downloaded here:
http://twitter.github.com/bootstrap/assets/bootstrap.zip
http://code.jquery.com/jquery-1.9.1.js
For the JSFiddle you can include jQuery under the Frameworks and Extensions menu on the left and other files, such as bootstrap's js and css, using the External Resources tag on the left side. For your fiddle I referenced the .js and .css files from http://cdnjs.com/.
http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js
http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css
Updated JSFiddle
Right, i've looked around and can't seem to find an answer to this problem.
I'm running Expression Engine Core (the latest version), and I am building a template. I have built the template using Bootstrap and some other bits of code. I'm having a problem with using prettyPhoto within my template. I have a button which is calling a prettyPhoto modal window. My static HTML site works fine with this but there seems to be some sort of conflict somewhere. All my js files and css files link fine, but for some reason or another the js doesn't work for my prettyPhoto. The code i'm using is:
Need Help? <i class="icon-help-circle"></i><div id="maphelp" class="hide">text goes in here</div>
But I can't for the life of me work out why this isn't working. I've tried making the class= into a rel= but that still doesn't do anything. I've used the code from the http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/ with the section on inline content.
I have also done the fix within the help pages to make sure that its is active. Still nothing happens...
Can anyone help me?
Have you tried moving your prettyPhoto.js to the bottom of your code perhaps inside the footer or better yet, below the footer.
I usually create an embeds template where I place all of my js, xml, css files and call out the embeds like so
<script src="{path="embeds/jsfile"}"></script>
this way it allows me to move the files all over the place in my visual template.
another is to use the no conflict
<script type="text/javascript">
$.noConflict();
// Code that uses other library's $ can follow here.
</script>
I hope this helps.
I am new to jquery. I am working on a website that uses a scroll function I found to move from page to page its scripts looks like this:
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>
I also have a script that I want to use on a few pages that is a type of shadowbox for an image gallery. Its script looks like this:
<script type="text/javascript"src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
If I have both scripts on the page then only the shadowbox works and the scrolling does not. If I take the shadowbox script off then the scrolling does work.
If I put the shadowbox script above the scrolling script then only the scrolling works.
I am not sure if I need to include any more information to explain my problem. From what I can tell it is these scripts that are causing the problem and conflicting with each other.
With jQuerytools, you only need to include it and you get jQuery 1.6.4 for free (read quick start, and you can remove jquery from it if you want, look below the quick start). Therefore, by including jQuery 1.3.1 above jQuery tools, you are trying to load two different versions (1.3.1 and 1.6.4) of the same toolkit, thus conflicting with each other and causing you problems.
Remove the line including jquery 1.3.1 and try that.
I had a problem with jQuery plugins clashing somehow.
So after a little research I loaded both scripts into the head of the html document, between consecutive separated script tag zones. Then I used:
window.onload = function() {function01(); function02();};
to load each function in an orderly fashion and separately.
It worked for me this time.
I am trying to implement the JScrollPane plugin on my website. Having taken a look through numerous FAQ/tutorials for this and double checked my scripts but cannot see where something is going wrong.
All of the scripts are being correctly referenced, I am calling the latest version of the JQuery library and I have the CSS being called before the scripts.
The page I am trying to implement this on is:
http://theindiecinema.com/walking-backwards/99 (click on the rate button on the right side of the tv)
To see the scrolling box that the JScrollPane should be being applied I have set up a duplicate page but with the JScrollPane stuff removed:
http://theindiecinema.com/testing-nopane
Please can I get some advice of how I can get this working.
Much Appreciated
Francis
Call jScrollPane on .commentslist when it's revealed (by clicking Rate), not on $(document)ready. jScrollPane is having trouble initializing while the target element's parent is hidden. You should only have to do this once, but it won't really even matter if you re-call it every time you show #comments.
Alternately, you could un-hide #comments in your external CSS, then on document-ready, first initialize jScrollPane on .commentslist and then hide #comments.