Forum Moderators: open

Message Too Old, No Replies

Can someone detect what's conflicting on these JQUERY codes

         

naark

10:27 am on Sep 13, 2014 (gmt 0)

10+ Year Member



I'm a noob and I don't really get why I can't make these two code work on the same page

So below are the codes

<!-- LAZYLOAD -->
<!-- LAZYLOAD -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script src="http://yourjavascript.com/44281455124/all.js" type="text/javascript"></script>
<script src="http://yourjavascript.com/47132146248/jquery-lazyload.js" type="text/javascript"></script>
<script charset="utf-8" type="text/javascript">
$(function() {
$("img.lazy").lazyload();
});
</script>
<!-- LAZYLOAD -->
<!-- LAZYLOAD -->


<!--zeroclipboard-->
<!--zeroclipboard-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script src="http://www.steamdev.com/zclip/js/jquery.zclip.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#copy-button").zclip({
path: "http://www.steamdev.com/zclip/js/ZeroClipboard.swf",
copy: function(){return $('#txtCopyText').val();},
beforeCopy: function () { },
afterCopy: function () {
alert('Copy To Clipboard : \n'+ $('#txtCopyText').val());
}
});
});
</script>
<input id="txtCopyText" readonly="" size="15" type="text" value="text to be copied" />
<button id="copy-button"> Copy To ClipBoard </button>
</div>
<!--zeroclipboard-->
<!--zeroclipboard-->



Basically those two codes are working fine if they are not on the same webpage. But if I put them together only one will work.
So can someone detect what's wrong or conflicting between the two codes. I'm not the one who wrote these codes, I just copied them over the internet.

Thanks in advance


ps.
the function of each is lazyload delays the loading of an image and loads it only when the image is on viewport, and zeroclipboard is a code that will just copy the code on the input box if the button was clicked.

Ocean10000

7:17 pm on Sep 13, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



one problem is between the two pages they use two different versions of the jquery script at a glance.

Versions
1.5.2
1.10.2

The second problem I see is here, this looks like it loads the jquery script from the local computer instead of from ajax.googleapis.com.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

naark

1:11 am on Sep 14, 2014 (gmt 0)

10+ Year Member



so what's the workaround for it?
I already tested them with just one version of googleapis i.e. 1.10.2 and still the result is only one will work. But both are compatible with 1.10.2.

Ocean10000

4:13 am on Sep 14, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



did you replace

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

with

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

when you tested version 1.10.2?

if that doesn't fix it, I do not know. I have only recently started exploring jquery myself.

Fotiman

5:29 pm on Sep 15, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



URLs that start with // are perfectly valid. They represent protocol independent URLs, so if your current page is served as http, then that resource will be accessed via http, and likewise for https. So that's not the problem.

I would suspect it's more likely a problem with using multiple versions of jQuery.

Fotiman

5:29 pm on Sep 15, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I would start by opening up a browser JavaScript console, and looking for any errors.