Comments (3)
thank you in advance
from quicksand.
Quicksand only animates your elements, there's no connection, nor any possible conflict with any tooltip plugin. You should use the tooltip exactly like it's described in a blogpost and it should work fine.
Please remember that your images will loose their tooltips after Quicksand animation so the tooltip will need to be re-applied. But it's easy and you do it by supplying proper callback function to .quicksand method. Please refer to http://razorjack.net/quicksand/docs-and-demos.html#integration for more details. :)
All in all, the procedure of implementing tooltip in your case is pretty standard, there's no need for any extraordinary stuff.
from quicksand.
Hi first i did this i add this code
$("#gamecategoriest").quicksand(
$("#data > li"),
{ duration: 1000 },
function() { // callback function
$('#gamecategories a.tip_trigger').hover(function(){
tip = $(this).find('.tip');
.....
tip.css({ top: mousey, left: mousex });
});
}
);
just after these lines of code of yours as at the complete end i added the above code
$preferences.useScaling = true;
$performance_container.html($original_html);
high_performance = true;
}
e.preventDefault();
});
});
so the end result in the end looked like this
<script type="text/javascript">
(function($) {
$.fn.sorted = function(customOptions) {
var options = {
reversed: false,
by: function(a) {
return a.text();
}
};
$.extend(options, customOptions);
arr = $data.get();
arr.sort(function(a, b) {
var valA = options.by($(a));
var valB = options.by($(b));
if (options.reversed) {
return (valA < valB) ? 1 : (valA > valB) ? -1 : 0;
} else {
return (valA < valB) ? -1 : (valA > valB) ? 1 : 0;
}
});
return $(arr);
};
})(jQuery);
$(function() {
var read_button = function(class_names) {
var r = {
selected: false,
type: 0
};
for (var i=0; i < class_names.length; i++) {
if (class_names[i].indexOf('selected-') == 0) {
r.selected = true;
}
if (class_names[i].indexOf('segment-') == 0) {
r.segment = class_names[i].split('-')[1];
}
};
return r;
};
var determine_sort = function($buttons) {
var $selected = $buttons.parent().filter('[class*="selected-"]');
return $selected.find('a').attr('data-value');
};
var determine_kind = function($buttons) {
var $selected = $buttons.parent().filter('[class*="selected-"]');
return $selected.find('a').attr('data-value');
};
var $preferences = {
duration: 800,
easing: 'easeInOutQuad',
adjustHeight: false
};
var
var $data = $list.clone();
var
$controls.each(function(i) {
var $control = $(this);
var $buttons = $control.find('a');
$buttons.bind('click', function(e) {
var $button = $(this);
var $button_container = $button.parent();
var button_properties = read_button($button_container.attr('class').split(' '));
var selected = button_properties.selected;
var button_segment = button_properties.segment;
if (!selected) {
$buttons.parent().removeClass('selected-0').removeClass('selected-1').removeClass('selected-2');
$button_container.addClass('selected-' + button_segment);
var sorting_type = determine_sort($controls.eq(1).find('a'));
var sorting_kind = determine_kind($controls.eq(0).find('a'));
if (sorting_kind == 'all') {
var $filtered_data = $data.find('li');
} else {
var $filtered_data = $data.find('li.' + sorting_kind);
}
if (sorting_type == 'size') {
var $sorted_data = $filtered_data.sorted({
by: function(v) {
return parseFloat($(v).find('span').text());
}
});
} else {
var $sorted_data = $filtered_data.sorted({
by: function(v) {
return $(v).find('strong').text().toLowerCase();
}
});
}
$list.quicksand($sorted_data, $preferences);
}
e.preventDefault();
});
});
var high_performance = true;
var
var $original_html = $performance_container.html();
$performance_container.find('a').live('click', function(e) {
if (high_performance) {
$preferences.useScaling = false;
$performance_container.html('CSS3 scaling turned off. Try the demo again. <a href="#toggle">Reverse</a>.');
high_performance = false;
} else {
$preferences.useScaling = true;
$performance_container.html($original_html);
high_performance = true;
}
e.preventDefault();
});
});
$("#gamecategoriest").quicksand(
$("#data > li"),
{ duration: 1000 },
function() { // callback function
$('#gamecategories a.tip_trigger').hover(function(){
tip = $(this).find('.tip');
.....
tip.css({ top: mousey, left: mousex });
});
}
);
</script>
by doing above thing my tooltip was working but after animation it stopped.
So i did this then i replaced this $list.quicksand($sorted_data, $preferences);
with this $list.quicksand($sorted_data,
and i added this code
jQuery.fn.tooltip = function () {
this.each ( function ( index, element ) {
$(element).mouseover(function(){
tip = $(this).find('.tip');
tip.show(); //Show tooltip
}).mouseout ( function() {
tip.hide(); //Hide tooltip
}).mousemove(function(e) {
var mousex = e.pageX + 20; //Get X coodrinates
var mousey = e.pageY + 20; //Get Y coordinates
var tipWidth = tip.width(); //Find width of tooltip
var tipHeight = tip.height(); //Find height of tooltip
//Distance of element from the right edge of viewport
var tipVisX = $(window).width() - (mousex + tipWidth);
//Distance of element from the bottom of viewport
var tipVisY = $(window).height() - (mousey + tipHeight);
if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
mousex = e.pageX - tipWidth - 20;
} if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
mousey = e.pageY - tipHeight - 20;
}
//Absolute position the tooltip according to mouse position
tip.css({ top: mousey, left: mousex });
});
});
};
just after this code at the end of your code
$preferences.useScaling = true;
$performance_container.html($original_html);
high_performance = true;
}
e.preventDefault();
});
});
so the end result will look like this
<script type="text/javascript">
(function($) {
$.fn.sorted = function(customOptions) {
var options = {
reversed: false,
by: function(a) {
return a.text();
}
};
$.extend(options, customOptions);
arr = $data.get();
arr.sort(function(a, b) {
var valA = options.by($(a));
var valB = options.by($(b));
if (options.reversed) {
return (valA < valB) ? 1 : (valA > valB) ? -1 : 0;
} else {
return (valA < valB) ? -1 : (valA > valB) ? 1 : 0;
}
});
return $(arr);
};
})(jQuery);
$(function() {
var read_button = function(class_names) {
var r = {
selected: false,
type: 0
};
for (var i=0; i < class_names.length; i++) {
if (class_names[i].indexOf('selected-') == 0) {
r.selected = true;
}
if (class_names[i].indexOf('segment-') == 0) {
r.segment = class_names[i].split('-')[1];
}
};
return r;
};
var determine_sort = function($buttons) {
var $selected = $buttons.parent().filter('[class*="selected-"]');
return $selected.find('a').attr('data-value');
};
var determine_kind = function($buttons) {
var $selected = $buttons.parent().filter('[class*="selected-"]');
return $selected.find('a').attr('data-value');
};
var $preferences = {
duration: 800,
easing: 'easeInOutQuad',
adjustHeight: false
};
var
var $data = $list.clone();
var
$controls.each(function(i) {
var $control = $(this);
var $buttons = $control.find('a');
$buttons.bind('click', function(e) {
var $button = $(this);
var $button_container = $button.parent();
var button_properties = read_button($button_container.attr('class').split(' '));
var selected = button_properties.selected;
var button_segment = button_properties.segment;
if (!selected) {
$buttons.parent().removeClass('selected-0').removeClass('selected-1').removeClass('selected-2');
$button_container.addClass('selected-' + button_segment);
var sorting_type = determine_sort($controls.eq(1).find('a'));
var sorting_kind = determine_kind($controls.eq(0).find('a'));
if (sorting_kind == 'all') {
var $filtered_data = $data.find('li');
} else {
var $filtered_data = $data.find('li.' + sorting_kind);
}
if (sorting_type == 'size') {
var $sorted_data = $filtered_data.sorted({
by: function(v) {
return parseFloat($(v).find('span').text());
}
});
} else {
var $sorted_data = $filtered_data.sorted({
by: function(v) {
return $(v).find('strong').text().toLowerCase();
}
});
}
$list.quicksand($sorted_data, $preferences, function () { $(this).tooltip (); } );
}
e.preventDefault();
});
});
var high_performance = true;
var
var $original_html = $performance_container.html();
$performance_container.find('a').live('click', function(e) {
if (high_performance) {
$preferences.useScaling = false;
$performance_container.html('CSS3 scaling turned off. Try the demo again. <a href="#toggle">Reverse</a>.');
high_performance = false;
} else {
$preferences.useScaling = true;
$performance_container.html($original_html);
high_performance = true;
}
e.preventDefault();
});
});
jQuery.fn.tooltip = function () {
this.each ( function ( index, element ) {
$(element).mouseover(function(){
tip = $(this).find('.tip');
tip.show(); //Show tooltip
}).mouseout ( function() {
tip.hide(); //Hide tooltip
}).mousemove(function(e) {
var mousex = e.pageX + 20; //Get X coodrinates
var mousey = e.pageY + 20; //Get Y coordinates
var tipWidth = tip.width(); //Find width of tooltip
var tipHeight = tip.height(); //Find height of tooltip
//Distance of element from the right edge of viewport
var tipVisX = $(window).width() - (mousex + tipWidth);
//Distance of element from the bottom of viewport
var tipVisY = $(window).height() - (mousey + tipHeight);
if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
mousex = e.pageX - tipWidth - 20;
} if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
mousey = e.pageY - tipHeight - 20;
}
//Absolute position the tooltip according to mouse position
tip.css({ top: mousey, left: mousex });
});
});
};
</script>
i think i am adding the codes to the wrong placesin your given script
the test page is at http://letseedrop.blogspot.com/2011/01/testing-3.html
from quicksand.
Related Issues (20)
- Broken responsive gallery issue. HOT 6
- Any way for quick sand to understand percentage for width ?!
- [enhancement] Add missing bower.json. HOT 2
- Problem while using quicksand with pagination HOT 1
- Issue after upgrading from 1.2.2 to 1.4
- Some items float out of div when selecting the "All' | Bug HOT 1
- Bootbox.js stops working after I filter portfolio HOT 1
- Add package.json HOT 3
- Stop setting width on the container HOT 1
- Quicksand sorting feature, two different id and Image is coming two time when I select all images HOT 1
- Changing filters to a select drop down HOT 1
- License Query HOT 1
- Found and fixed a bug when using some responsive widths HOT 2
- Uncaught Error: Syntax error, unrecognized expression: [object Object] HOT 2
- Fix please events crush by this solution HOT 1
- Add license files HOT 1
- work with Jquery 3.1 HOT 1
- Migration guide
- problems occur when the animation ends?
- Glitches when parent is transform scaled
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from quicksand.