Jump to content



Photo

jQuery Quicksand


  • Please log in to reply
11 replies to this topic

#1 ACTIONpack

ACTIONpack

    Graphic Designer

  • Tech Issues Solved: 1
  • Joined: 10-August 03
  • Location: Lawrenceville, GA
  • OS: Windows 8.1 Pro
  • Phone: Nokia Lumia 925 (T-Mobile)

Posted 15 January 2013 - 18:45

http://razorjack.net/quicksand/
http://razorjack.net...-and-demos.html


I'm trying to learn how to use Quicksand but can't get it to work. Is there a video tutorial how to learn it? Not really good at jQuery and javascript.


#2 OP ACTIONpack

ACTIONpack

    Graphic Designer

  • Tech Issues Solved: 1
  • Joined: 10-August 03
  • Location: Lawrenceville, GA
  • OS: Windows 8.1 Pro
  • Phone: Nokia Lumia 925 (T-Mobile)

Posted 15 January 2013 - 21:33

http://www.romabio.c...cts/index3.html

The link above is my example and it's not working. Need help!

#3 vetMathachew

Mathachew

    Wise beyond my youth... that's what she said!

  • Tech Issues Solved: 1
  • Joined: 19-September 04
  • Location: Spring, TX
  • OS: Windows 7

Posted 15 January 2013 - 21:57

You have an error in tooltips.js on line 51: Uncaught TypeError: Object #<Object> has no method 'tooltips'. That's causing all other JS to break. Fix that and see if Quicksand works.

#4 Guth

Guth

    Alba Gu Bráth

  • Joined: 30-December 05
  • Location: Scotland
  • OS: Windows 8 Pro
  • Phone: Nokia Lumia

Posted 15 January 2013 - 23:10

I think the error above is causing you issues.
very nice though, i quite like that effect :)

#5 OP ACTIONpack

ACTIONpack

    Graphic Designer

  • Tech Issues Solved: 1
  • Joined: 10-August 03
  • Location: Lawrenceville, GA
  • OS: Windows 8.1 Pro
  • Phone: Nokia Lumia 925 (T-Mobile)

Posted 16 January 2013 - 21:35

Can you give me a little input on how to change line 51 to I can get it working. Not really good with JS.

#6 threetonesun

threetonesun

    Neowinian Senior

  • Tech Issues Solved: 1
  • Joined: 26-February 02

Posted 16 January 2013 - 22:12

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="../js/tooltips.js"></script>
<!-- <script type="text/javascript" src="../js/main.js"></script> -->
<script type="text/javascript" src="../js/jquery-1.4.1-and-plugins.min.js"></script>
<script type="text/javascript" src="../js/quicksand.js"></script>

Well... load quicksand.js after jquery but before your code, first of all. If you move the tooltips code under the document.ready() it should work.

Or
(function($) {
		$("#footer-social a[title]").tooltips();
})(jQuery)


#7 OP ACTIONpack

ACTIONpack

    Graphic Designer

  • Tech Issues Solved: 1
  • Joined: 10-August 03
  • Location: Lawrenceville, GA
  • OS: Windows 8.1 Pro
  • Phone: Nokia Lumia 925 (T-Mobile)

Posted 17 January 2013 - 17:13

Didn't work

#8 goodbytes

goodbytes

    Just below average Joe

  • Tech Issues Solved: 1
  • Joined: 07-May 04
  • Location: England

Posted 17 January 2013 - 17:54

Not sure why you would need a full plugin for this, here's a basic example:

http://jsfiddle.net/jtpvb/2/

#9 briley

briley

    Neowinian

  • Joined: 05-October 02

Posted 17 January 2013 - 18:16

You're loading two different versions of jQuery:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="../js/tooltips.js"></script>
<!-- <script type="text/javascript" src="../js/main.js"></script> -->
<script type="text/javascript" src="../js/jquery-1.4.1-and-plugins.min.js"></script>
<script type="text/javascript" src="../js/quicksand.js"></script>


That second version of jQuery (jquery-1.4.1-and-plugins.min.js) is overwriting the first one (jquery.min.js). If you need both, then you need to set them up using jQuery.noConflict (see here), otherwise, get rid of one of them, then include the tooltips and quicksand plugins after whichever one you keep. That should get rid of the tooltips error message you're getting

#10 OP ACTIONpack

ACTIONpack

    Graphic Designer

  • Tech Issues Solved: 1
  • Joined: 10-August 03
  • Location: Lawrenceville, GA
  • OS: Windows 8.1 Pro
  • Phone: Nokia Lumia 925 (T-Mobile)

Posted 18 January 2013 - 19:29

http://www.romabio.c...ts/preview.html

I change it to the setting in the http://jsfiddle.net/jtpvb/2/ but it does not work still. It works when I put it in the jsfiddle but when I do it in my html it does not work. HELP!

#11 threetonesun

threetonesun

    Neowinian Senior

  • Tech Issues Solved: 1
  • Joined: 26-February 02

Posted 18 January 2013 - 19:35

[14:34:35.164] TypeError: $(...).fancybox is not a function @ http://www.romabio.com/js/tooltips.js:53


#12 OP ACTIONpack

ACTIONpack

    Graphic Designer

  • Tech Issues Solved: 1
  • Joined: 10-August 03
  • Location: Lawrenceville, GA
  • OS: Windows 8.1 Pro
  • Phone: Nokia Lumia 925 (T-Mobile)

Posted 18 January 2013 - 19:51

http://www.romabio.c...s/preview1.html

That is a strip down version of html and javascript and css.