jQuery conflict between a lightbox function and masonry/endless scroll - javascript

I wanted to create a lightbox effect for images when clicked, so eventually I found this tutorial and followed all the necessary steps to insert it into my page (with a little modification).
The lightbox functions exactly the way I want it to, but the jQuery library used for the lightbox is conflicting with another script and it's messing up the multi-column layout and endless scroll.
This is a mock page with the lightbox effect. Normally, all the posts should be scattered in a lose multi-column fashion and new posts should load with endless scroll.
I tried deleting a bunch of things to see where the conflict was, and these are the two scripts that conflict.
<script type="text/javascript" src="http://static.tumblr.com/twte3d7/4Wjm5wj58/disassemble_v3.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>

jQuery needs to be the first script you include.
jQuery Masonry extends jQuery so you must reference the jQuery library first.
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/twte3d7/4Wjm5wj58/disassemble_v3.js"></script>

I see multiple IDs on divs containing images
<div id="post">
<img src="">
</div>
what if you put class instead of id?
And could you provide an example of your masonry implementation?
Thanks

Related

Loading external javascript not working, trying to animate HTML elements with Textillate

Some of you may be familiar with Textillate. ( https://jschr.github.io/textillate/ ) On the website, it says to fully implement the animations, I have to make sure I include JQuery, animate.css ( http://daneden.github.io/animate.css/ ) and lettering.js (https://github.com/davatron5000/Lettering.js). Ofcourse, I also have to implement the textillate.js file.
For some reason, I'm not able to get this working, I think I'm making a mistake with loading in the javascript or JQuery files. Sadly, the console doesn't display any errors, so it's a bit strange..
My code to make it work:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="jquery.lettering.js"></script>
<script src="jquery.textillate.js"></script>
<link rel="stylesheet" href="animate.css"/>
<h1 class="tlt" data-in-effect="rollIn">This should have a rollIn effect</h1>
It should be a very simple css animation. If anyone of you would be interested, you can view a live-demo here: http://codepen.io/jschr/pen/GaJCi.
Here is a small tutorial to use Textillate: https://github.com/jschr/textillate.
As you can see on the link above, the usage should be very basic and I don't see what I'm doing wrong.
The first two scripts depend on jQuery, but you don't try to load jQuery until after them.
You need to load dependancies of a script before you load the script that depends on them.
Change the order of your <script> elements.

Off canvas when adding Zurb Foundation javascript files separately

When I link to foundation.js and foundation.offcanvas.js separately i stead of using the minified, combined version the off canvas menu is not working.
Do I have to call the offcanvas additionally to $().foundation(); ?
You only need to call the foundation() method once after all the Foundation scripts have been loaded.
Taken from their docs:
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.offcanvas.js"></script>
<!-- Other JS plugins can be included here -->
<script>
$(document).foundation();
</script>
If Foundation's Off Canvas still isn't working, it's more likely due to the markup being slightly incorrect than the JS being weird. Make sure you follow the examples exactly.

inline edit with jQuery

I am using inline editing using jQuery. I can edit the table data easily when the data is not big (less than 100 rows) But when it is more than 100 rows the page will be slower in loading and the edit function will be very slow(slow to open the edit box).
I found that the problem is from this import:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
If I remove this line the page will be loaded fast as normal. Any suggestions please.
Thanks,
Use a local copy of the jquery and a higher version preferably over 1.7. Put all your js code at the bottom of the page.
<body>
<!-- document body here -->
<script src="js/jquery1.8.3.min.js"></script>
<!-- some jquery plugins here -->
<script>
// your code here.
</script>
</body>
And you can use a jquery plugin to edit things in place. If you are facing issues with your custom code.
You just need to manage pagination for listing of the records rather than listing all records. And always include js in the footter

Two jquery tools interfere with each other

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.

HTML JavaScript How can I create this Form?

I came across a really nice looking form while using RapidShare and I was curious as to how they made it. If you look HERE and click on "Eliminate annoying waiting with RapidPro!" a menu / form will appear. I am using Intuit to design my webpage and I was curious whether or not this was actually a form that is appearing in front of me.
As a possible side question - Is there an easy way to make a nice looking table with checkboxes in it similar to the one displayed by RapidShare? I really like this method for comparing and contrasting two different plans.
Thank you for reading,
Evan
Yes, the contents of that "popup" is a plain HTML table with some css to make it fancier. All they are doing is using Javascript to animate a div to popup into the center of the screen, and using css to style it nicely. They seem to have a custom solution that doesn't use jQuery, but there are many framework plugins that do the same:
Lightbox for prototype.js
Lightbox for jQuery
Fancybox or jQuery
Colorbox for jQuery
There are others too.
Look for fancybox in jQuery
Shadowbox
Greybox
You can load a page in a popup style like this and for the table, yeah you can create a comparasion table. Look are they source code and it will be easier for you to replicate.
See nyroModal in Jquery, you can see lightbox examples for HTML forms and image gallery.
Download the bundle from: http://nyromodal.nyrodev.com/create.php?dl=1 and create a file and include these codes
**index.html**
<script SRC="jquery.tools.min.js"></script>
<link rel="stylesheet" href="nyroModal.css" type="text/css" media="screen" />
<script type="text/javascript" src="jquery.nyroModal.custom.js"></script>
<script type="text/javascript" src="jquery.nyroModal-ie6.js"></script>
<script type="text/javascript">
$(function() {
$('.nyroModal').nyroModal();
});
</script>
<a class="nyroModal" href="test.html"> Light Box view</a>
----------------------------------------------------------------------------------------
**test.html**
<form>
<label> name </label><input type="text" name="testname" />
</form>

Categories