I'm trying to code a function that let me toggle in and out all thumbnails in a list depending on their classes.
e.g., if I click "print" on my menu bar, I need all thumbs with the "print" class to be hidden. If I click it a second time, the hidden thumbs are showing up.
Here is what I came up with :
window.addEvent('domready', function(){
$$('.menu_button').toggle(
function() {
this.fade(0.5);
var buttonId = this.id;
$('slider_list').getElements('.'+buttonId).each(function(li) {
li.tween('width','0');
});
},
function() {
this.fade(1);
var buttonId = this.id;
$('slider_list').getElements('.'+buttonId).each(function(li) {
li.tween('width','100');
});
}
);
});
//toggle (emulate JQuery's toggle)
(function() {
var toggled = 0;
Element.implement({
toggle: function(fn1, fn2) {
var fns = [fn1, fn2];
return this.addEvent('click', function(){
fns[toggled].apply(this, arguments);
toggled = toggled == 0 ? 1 : 0;
});
}
});
})();
I've found the toggle function here
Now I experience some issues.
First no matter what I do there will always be a thumb left at the end of the list.
Then some clicks on the menu won't do anything. Generally when I click on a button in a different state (hidden/shown) than the previous one, there will always be a null click...
Anybody ?
I implemented it in a way that allows multiple functions, although not at all MooTools like, it will work. The problem with the code you are using is that each element which uses toggle is toggling the same toggled variable
Element.implement({
toggle: function() {
this.store('toggle_options', {
fn: arguments,
cur: 0
});
this.addEvent('click', function(e) {
e.stop();
var opts = this.retrieve('toggle_options');
console.log(opts.fn.length, opts.cur);
opts.fn[opts.cur++].apply(this);
if(opts.cur >= opts.fn.length) opts.cur = 0;
});
}
});
$('button').toggle(
function() {
this.set('text', 'foo 1');
},
function() {
this.set('text', 'bar 2');
}
);
fiddle here: http://jsfiddle.net/94FFj/
Although I would recommend you implemented your code as this:
$$('.menu_button').each(function(button) {
button.store('toggle_active', 0);
button.addEvent('click', function(e) {
e.stop();
var active = this.retrieve('toggle_active');
var opts = [{opacity: 1, width: 0}, {opacity: 0.5, width: 100}];
this.fade(opts[active].opacity);
$$('slider_list .' + this.get('id')).tween('width', opts[active].width);
this.store('toggle_active', active ? 0 : 1);
});
})
Related
I'm using waypoints to have fadeIn animation when the user scrolled down, and it worked. But as you can see, during the onload, there's a fadeIn too for the first few visible items.
How to not to have that? since I binded all .card to way[point.
My js
$(function() {
var waypoints = $('.card').waypoint(function (direction) {
$(this).addClass("animated fadeIn");
}, {
offset: '90%'
});
});
DEMO : http://jsfiddle.net/ghx49d7x/
Not sure if its exactly what you want, but you can add a variable to indicate if the page has loaded or not and only add fadeIn if it has:
$(function () {
var pageLoaded = false;
var waypoints = $('.card').waypoint(function (direction) {
$(this).addClass("animated"
+ (pageLoaded ? " fadeIn" : ""));
}, {
offset: '90%'
});
pageLoaded = true;
});
Updated Fiddle: http://jsfiddle.net/ghx49d7x/3/
see http://liveweave.com/Pieivc
what i want that in start there show be no icon for arrow up as not needed but when user click arrow down it appears should appears and when user reaches last itme in ul li list bottom arrow should vanish
how can i do to check it ?..
(function () {
$('#scrollup').on({
'mousedown touchstart': function() {
$(".sidebar-menu").animate({scrollTop: 0}, 2000);
},
'mouseup touchend': function() {
$(".sidebar-menu").stop(true);
}
});
$('#scrolldown').on({
'mousedown touchstart': function() {
$(".sidebar-menu").animate({
scrollTop: $(".sidebar-menu")[0].scrollHeight
}, 2000);
},
'mouseup touchend': function() {
$(".sidebar-menu").stop(true);
}
});
})();
You can check this using $('.sidebar-menu').scrollTop() value.
So for example, I wrote a function called check(), which checks the location of the scroll and display/hide the appropriate arrows. This function is called on mouse touchend event of each arrow.
function check() {
if ($('.sidebar-menu').scrollTop() == 0) {
$('#scrollup').hide();
$('#scrolldown').show();
} else if ($('.sidebar-menu').scrollTop() == height - 100) {
$('#scrolldown').hide();
$('#scrollup').show();
}
}
See it in action: http://jsfiddle.net/ry2zwho1/1/
Try to use this jsfiddle
$(function(){
var carousel = $('.carousel ul');
var carouselChild = carousel.find('li');
var clickCount = 0;
var canClick = true;
$(".btnPrevious").css('color', 'red').show();
itemWidth =......
the title pretty much says everything, I did look into the images plugin from masonry yet I had no luck, I wonder if anyone could help?
The script does many things, it has the filter bit, the animation, show/hide, ajax to get the content etc etc. I'd be happy if anyone could investigate into why it is overlapping and how i could solve it based on the code below:
jQuery(function(){
jQuery('#container').masonry({
itemSelector: '.box',
animate: true
});
});
(function ($) {
// Get all menu items with IDs starting with "filter-" and loop over them
$(".menu li[id|=filter]").each(function () {
// Get the ID add extract the page class name from it (remove "filter-" from it)
var type = $(this).attr("id").replace("filter-", "");
// Get the items in the "webbies" list with that class name
var items = $("#container div[class~=" + type + "]");
// Don't do anything if there aren't any
if (items.length == 0) return;
// Get a list of the other items in the list
var others = $("#container>div:not([class~=" + type + "])");
// Add a click event to the menu item
$("a", this).click(function (e) {
// Stop the link
e.preventDefault();
// Close open item
if (openItem) {
close(openItem);
}
items.removeClass("inactive").animate({opacity: 1});
others.addClass("inactive").animate({opacity: 0.2});
});
});
$(".reset-filter a").click(function (e) {
e.preventDefault();
if (openItem) close(openItem);
$("div.box.inactive").removeClass("inactive").animate({opacity: 1});
});
var openItem;
// Opens an item
var open = function (item) {
// Close open item
if (openItem) close(openItem);
item.addClass("loading");
$("img", item).first().hide();
item.width(340);
item.height(600);
if (!item.data('loaded')) {
$("div.fader", item).load($("a", item).first().attr("href") + " #content", function () {
stButtons.locateElements();
stButtons.makeButtons();
stWidget.init();
$("#container").masonry('reloadItems', function () {
$("div.fader", item).animate({opacity: 1}, function () {
item.removeClass("loading");
$('Close"').appendTo(this).click(function (e) {
e.preventDefault();
close(item);
$(document).scrollTo( $("#navigation-block"), 600, {offset:-50} );
});
$("div.info", item).fadeIn("slow", function () {
$(document).scrollTo( $(".info"), 600, {offset:80} );
});
});
});
item.data('loaded', true);
});
} else {
item.removeClass("loading");
$("#container").masonry('reloadItems', function () {
$("div.fader", item).animate({opacity: 1}, function () {
$("div.info", item).fadeIn("slow", function () {
$(document).scrollTo( $(".info"), 600, {offset:80} );
});
});
});
}
// Set open item
openItem = item;
};
// Closes an item
var close = function (item) {
$("div.fader", item).animate({opacity: 0});
$("div.info", item).hide();
item.animate({width: 150, height: 100}, function () {
$("img", item).first().fadeIn("slow");
$("#container").masonry('reloadItems');
});
// Reset open item
openItem = null;
};
$("#container div.box").each(function () {
var item = $(this);
item.data('loaded', false);
$("div.fader", item).css("opacity", 0);
$("a.close", item).click(function (e) {
e.preventDefault();
close(item);
$(document).scrollTo( $("#navigation-block"), 600, {offset:-50} );
});
$("a.showMe", item).click(function (e) {
e.preventDefault();
if (item.hasClass("inactive")) return;
open(item);
});
});
})(jQuery);
</script>
I've experienced the same problem and I developed 2 methods to combat it. First off reload the container after you have appended the onclick-image.
1. container.masonry('reload');
Second, and probably more important, dynamically correct the height of the surrounding div to match the height of the image:
2. // bricks correct height
var brick = $("#marker #container .brick");
brick.each(function() {
var content = $(this).find(">div");
var img = $(this).find("img");
content.css({
height: img.attr("height")
});
});
So my brick is looking like this:
<div style="height: 284px; position: static; top: -133px;" class="test">
<a class="arrow" href="#" target="_self"><img class="img" src="test.jpg" width="374" height="284"></a>
</div>
Edit: In your code you have the same problem, there is no height in the style.
<div style="position: absolute; left: 330px; top: 280px;" class="box item 3d">
And it seems to me you have a problem with the width, too. I think you need to use a smaller width for the column. A good value would be the width of the small image and some border.
jQuery(function(){
var $container = $('#container');
$container.imagesLoaded( function () {
itemSelector: '.box',
animate: true
});
});
Source: jQuery Masonry Images
I have two similar functions that I would like to combine so that I can use anywhere throughout the site. It's a simple jquery slideUp / slideDown effect that finds the div with the class 'hidden' and on click, it shows and hides
$('.clicker1').click(function(){
// grab the hidden content
var desc = $(this).parent().find('.hidden');
// remove toggle class and slide up
if ($(this).hasClass('toggled')) {
$(this).removeClass('toggled');
$(desc).slideUp(400, 'linear');
}
// add toggle class, slide down, and move the page up
else {
var loc = this;
$(desc).slideDown(400, 'linear', function () {
$.scrollTo($(loc).offset().top - 60, 400);
});
$(this).addClass('toggled');
$('.clicker1').not(this).removeClass('toggled');
$('.hidden').not(desc).slideUp(400, 'linear');
}
});
$('.clicker2').click(function(){
// grab the hidden content
var desc = $(this).parent().find('.hidden2');
// remove toggle class and slide up
if ($(this).hasClass('toggled')) {
$(this).removeClass('toggled');
$(desc).slideUp(400, 'linear');
}
// add toggle class, slide down, and move the page up
else {
var loc = this;
$(desc).slideDown(400, 'linear', function () {
$.scrollTo($(loc).offset().top - 60, 400);
});
$(this).addClass('toggled');
$('.clicker2').not(this).removeClass('toggled');
$('.hidden').not(desc).slideUp(400, 'linear');
}
});
Can I create one function and put in my own 'clickerX' and 'hiddenX' ?
It looks like the handlers only differ by the class's they use as selectors. The easiest approach is to write a function which generates a click handler based on the class names. Try the following
var makeHandler = function(className, hiddenClassName, ) {
return function() {
// grab the hidden content
var desc = $(this).parent().find(hiddenClassName);
// remove toggle class and slide up
if ($(this).hasClass('toggled')) {
$(this).removeClass('toggled');
$(desc).slideUp(400, 'linear');
}
// add toggle class, slide down, and move the page up
else {
var loc = this;
$(desc).slideDown(400, 'linear', function () {
$.scrollTo($(loc).offset().top - 60, 400);
});
$(this).addClass('toggled');
$(className).not(this).removeClass('toggled');
$(hiddenClassName).not(desc).slideUp(400, 'linear');
};
};
$('.clicker1').click(makeHandler('.clicker1', '.hidden'));
$('.clicker2').click(makeHandler('.clicker2', '.hidden2'));
Absolutely. You want to write a plugin. There's tons of tutorials on making a jQuery plugin, but the official docs give a good start.
I am new to mootools. I have joomla site with MooSlider:
var MooSlider = new Class({
initialize: function(options) {
this.options = Object.extend({
container: null,
slides: null,
navs:null,
transition: Fx.Transitions.Sine.easeOut,
effectDuration: 500,
fromTop: 500,
topDist: 100,
slideDelay: 5000
}, options || {});
if(!$(this.options.container)) return;
this.start();
},
start: function(){
this.elements = $(this.options.container).getElements(this.options.slides);
this.navs = $(this.options.container).getElements(this.options.navs);
this.currentElement = 0;
this.elements.each(function(elem, i){
var nav = this.navs[i];
if(i==this.currentElement){
nav.addClass('selected');
}
elem.setStyles({
'position':'absolute',
'top':0,
'left':0,
'opacity':( i==this.currentElement ? 1 : 0 )
});
this.elements[i]['fx'] = new Fx.Styles(elem, {
duration:this.options.effectDuration,
wait:false,
transition:this.options.transition
});
this.elements[i]['nav'] = nav;
elem.addEvents({
'mouseenter': function(){
$clear(this.period);
}.bind(this),
'mouseleave': function(){
if( this.options.slideDelay )
this.period = this.rotate.periodical(this.options.slideDelay, this);
}.bind(this)
});
nav.addEvent('click', function(event){
if(this.currentElement==i) return;
new Event(event).stop();
$clear(this.period);
this.changeSlide(i);
if( this.options.slideDelay )
this.period = this.rotate.periodical(this.options.slideDelay, this);
}.bind(this));
}.bind(this));
if( this.options.slideDelay )
this.period = this.rotate.periodical(this.options.slideDelay, this);
},
rotate: function(){
var i = this.currentElement+1 < this.elements.length ? this.currentElement+1 : 0;
this.changeSlide(i);
},
changeSlide: function(i){
//$(this.options.navigationContainer).addClass('preload');
var cEl = this.currentElement;
this.elements[this.currentElement]['fx'].start({'opacity':0, 'left':1500});
this.elements[i]['fx'].set({'left':0});
this.elements[i]['fx'].start({'opacity':1, 'top':[500,0]}).chain(function(){
//$(this.options.navigationContainer).removeClass('preload');
}.bind(this));
this.elements[this.currentElement]['nav'].removeClass('selected');
this.elements[i]['nav'].addClass('selected');
this.currentElement = i;
}})
This is how it used on page:
<script language="javascript" type="text/javascript">
window.addEvent('domready', function(){
new MooSlider({
container:'topslider',
slides:'.slide',
navs:'.navigator ul li',
effectDuration: 1000,
fromTop:500,
topDist:500,
slideDelay: 3000 });
})
The page url is http://www.miltonwebsitedesign.ca
You can see slider on top of the page. Each slide consists of picture at the left and description at the right.
What I need is to make slides work the same way, but the left side picture must not appear current way, it needs to fade in, when the slide is loaded, not appear, but fade in.
Description text slides and then at the left picture appears.
The structure of each slide is:
<div class='slide'>
<div class="yjsquare">
<div class="yjsquare_in">
<img src='src here' alt=''/><h1>H1 text here</h1><p>description here</p>
</div>
</div>
</div>
Will be happy to hear solution. Thanks.
this class is not well written as in, it does not allow for events like onStart and onComplete to be passed. the logical approach would be to modify the changeSlide method to fire some events:
// add
var el = this.elements[i]['fx'];
this.fireEvent("start", el);
// use el as reference...
el.start({'opacity':1, 'top':[500,0]}).chain(function(){
//$(this.options.navigationContainer).removeClass('preload');
// add
this.fireEvent("complete", el);
}.bind(this));
Make sure that your class also implements Events (which in 1.12 is done like so, if memory serves):
MooSlider.implement(new Events);
you are using a mix of 1.12 and 1.2+ code which is odd. In any case, if you do have 1.2 (joomla usually is not prior to 1.6) then instead add this into the class declaration:
Implements: [Events],
this allows you to add some callback logic upon instigating the class:
new MooSlider({
container:'topslider',
slides:'.slide',
navs:'.navigator ul li',
effectDuration: 1000,
fromTop:500,
topDist:500,
slideDelay: 3000,
onStart: function(el) {
el.getElement("img").setOpacity(0); // hide it during animation
},
onComplete: function(el) {
el.fade(1); // fade it in when done
}
});
you should really implement Options too and use this.setOptions(options) instead of your current $extend.
p.s. the onStart and onComplete code callbacks are examples, you may need to tweak this to suit your html and UI preferences.