I have a number of divs with the same class on one page. I would like them to have a fixed height which expands to full height when clicking a toggle button. So far I have assembled a script from the internet which sort of does that, but currently it expands ALL divs on the page, not just the one div associated with the expand buttons. Could someone help me fix the script so it only expands one div, possibly resets the other one if it is expanded and toggles it back when the expand button is click again?
jQuery(document).ready(function($) {
$.fn.toggleClick = function() {
var functions = arguments;
return this.click(function() {
var iteration = $(this).data('iteration') || 0;
functions[iteration].apply(this, arguments);
iteration = (iteration + 1) % functions.length;
$(this).data('iteration', iteration);
});
};
var $dscr = $(".textblock"),
$switch = $(".expand a"),
$initHeight = 130; // Initial height
$dscr.each(function() {
$.data(this, "realHeight", $(this).height()); // Create new property realHeight
}).css({ overflow: "hidden", height: $initHeight + 'px' });
$switch.toggleClick(function() {
$dscr.animate({ height: $dscr.data("realHeight") }, 300);
$switch.html("-");
}, function() {
$dscr.animate({ height: $initHeight}, 300);
$switch.html("+");
});
});
See my jsfiddle for the script so far:
http://jsfiddle.net/N9DfH/1/
http://jsfiddle.net/N9DfH/21/
jQuery(document).ready(function () {
$.fn.toggleClick = function () {
var functions = arguments;
return this.each(function () {
var divel = $(this);
$('.expand a', divel.parent()).click(function () {
var iteration = $(this).data('iteration') || 0;
functions[iteration].apply(divel, arguments);
iteration = (iteration + 1) % functions.length;
$(this).data('iteration', iteration);
});
});
};
var $dscr = $(".textblock"),
$initHeight = 130; // Initial height
$dscr.each(function () {
$.data(this, "realHeight", $(this).height()); // Create new property realHeight
}).css({
overflow: "hidden",
height: $initHeight + 'px'
}).toggleClick(function () {
this.animate({
height: this.data("realHeight")
}, 300);
}, function () {
this.animate({
height: $initHeight
}, 300);
});
});
Related
I am working on scrolling tab. Below is my code. I am facing problem that I am not able to click middle tabs. On right button click tabs scrolls move it gradually. What should I do to move tabs gradually? Please help
var hidWidth;
var scrollBarWidths = 40;
var widthOfList = function() {
var itemsWidth = 0;
$('.list a').each(function() {
var itemWidth = $(this).outerWidth();
itemsWidth += itemWidth;
});
return itemsWidth;
};
var widthOfHidden = function() {
return (($('.wrapper').outerWidth()) - widthOfList() - getLeftPosi()) - scrollBarWidths;
};
var getLeftPosi = function() {
return $('.list').position().left;
};
var reAdjust = function() {
if (($('.wrapper').outerWidth()) < widthOfList()) {
$('.scroller-right').show().css('display', 'flex');
} else {
$('.scroller-right').hide();
}
if (getLeftPosi() < 0) {
$('.scroller-left').show().css('display', 'flex');
} else {
$('.item').animate({
left: "-=" + getLeftPosi() + "px"
}, 'slow');
$('.scroller-left').hide();
}
}
reAdjust();
$(window).on('resize', function(e) {
reAdjust();
});
$('.scroller-right').click(function() {
$('.scroller-left').fadeIn('slow');
$('.scroller-right').fadeOut('slow');
$('.list').animate({
left: "+=" + widthOfHidden() + "px"
}, 'slow', function() {
});
});
$('.scroller-left').click(function() {
$('.scroller-right').fadeIn('slow');
$('.scroller-left').fadeOut('slow');
$('.list').animate({
left: "-=" + getLeftPosi() + "px"
}, 'slow', function() {
});
});
Fiddle http://jsfiddle.net/vedankita/2uswn4od/13
Help me to scroll slowly on button click so that I can click on ease tab. Thanks
You should incrementally move the tabs "width of hidden", but no more than wrapper width...
var widthOfHidden = function(){
var ww = 0 - $('.wrapper').outerWidth();
var hw = (($('.wrapper').outerWidth())-widthOfList()-getLeftPosi())-scrollBarWidths;
if (ww>hw) {
return ww;
}
else {
return hw;
}
};
var getLeftPosi = function(){
var ww = 0 - $('.wrapper').outerWidth();
var lp = $('.list').position().left;
if (ww>lp) {
return ww;
}
else {
return lp;
}
};
And then "readjust" after each movement to determine whether or not the scroll arrows still need to show...
$('.scroller-right').click(function() {
$('.scroller-left').fadeIn('slow');
$('.scroller-right').fadeOut('slow');
$('.list').animate({left:"+="+widthOfHidden()+"px"},'slow',function(){
reAdjust();
});
});
$('.scroller-left').click(function() {
$('.scroller-right').fadeIn('slow');
$('.scroller-left').fadeOut('slow');
$('.list').animate({left:"-="+getLeftPosi()+"px"},'slow',function(){
reAdjust();
});
});
Demo: https://www.codeply.com/go/Loo3CqsA7T
Also, you can improve the position of the last tab by making sure it's right position is never less than wrapper width to keep it aligned to the right edge...
var widthOfHidden = function(){
var ww = 0 - $('.wrapper').outerWidth();
var hw = (($('.wrapper').outerWidth())-widthOfList()-getLeftPosi())-scrollBarWidths;
var rp = $(document).width() - ($('.nav-item.nav-link').last().offset().left + $('.nav-item.nav-link').last().outerWidth());
if (ww>hw) {
return (rp>ww?rp:ww);
}
else {
return (rp>hw?rp:hw);
}
};
https://embed.plnkr.co/NcdGqX/
Look at this example. this tabs move gradually. and also you can use bootstrap 4.
I hope it might be helpful.
I have a weird bug in my code that is causing my carousel to act funny if the window is resized.
I haven't been able to pin-point what may be causing the issue, but if you run the code and then resize the window, the carousel will start to move back and forth rapidly, avoiding the 10-second timer that I have placed on it.
Here is a link to my example fiddle: https://jsfiddle.net/zeropsi/ufvLn25b/
Any thoughts?
The trouble is when window is being resized, the window.resize gets triggered a number of times and because of that carousel keeps sliding rapidly. I searched for 'jquery window resize trigger once complete' and found help. This is how I modified your code from the fiddle.
<script>
$(document).ready(function() {
$(document).on("click", ".carousel-indicators li", function() {
$(".carousel-indicators li").removeClass("active");
var a = $(this).data("slide");
$(this).addClass("active");
$("div#billboards").animate({
"left": (a * -100) + "%"
});
$(".billboard").removeClass("active");
$(".billboard[data-billboard='" + a + "']").addClass("active");
return false;
});
// var resizeTimer;
//
// $(window).on("resize", function() {
// console.log("window resized");
//
// clearTimeout(resizeTimer);
// resizeTimer = setTimeout(function() {
// // run code here, resizing has stopped
// BillboardCarousel.init();
// },10000);
//
// });
var id;
$(window).on("resize", function() {
clearTimeout(id);
id = setTimeout(doneResizing, 500);
});
function doneResizing(){
BillboardCarousel.init();
}
if ($("section#carousel").length === 1) {
BillboardCarousel.init();
}
});
var BillboardCarousel = {
init: function() {
BillboardCarousel.resize();
},
imagesLoaded: function() {
var imagesLoaded = 0;
$(".billboard").each(function() {
var image = new Image();
image.src = $(this).data("image");
image.onload = function() {
imagesLoaded++;
if (imagesLoaded === $(".billboard").length) {
BillboardCarousel.startCarousel();
}
};
});
},
startCarousel: function() {
var interval = parseInt($("div#billboards").data('interval'));
window.setInterval(function() {
BillboardCarousel.timer();
}, 10000);
},
resize: function() {
var a = $(".billboard").length;
var b = $(window).width();
$(".billboard").css({
"width": b + "px",
"float": "left",
"display": "inline-block"
});
$("div#billboards").css({
"width": a * 100 + "%",
"left": "0%"
});
$("div#billboards").attr("data-interval", 10000);
BillboardCarousel.imagesLoaded();
},
timer: function() {
var a = $(".billboard.active").data("billboard");
a++;
if (a >= $(".billboard").length) {
a = 0;
}
$(".billboard").removeClass("active");
$(".carousel-indicators li").removeClass("active");
$(".billboard[data-billboard='" + a + "']").addClass("active");
$(".carousel-indicators li[data-slide='" + a + "']").addClass("active");
$("div#billboards").animate({ "left": (a * -100) + "%" });
}
};
</script>
These are a few helpful links -
JQuery: How to call RESIZE event only once it's FINISHED resizing?
http://jsfiddle.net/Zevan/c9UE5/1/
https://css-tricks.com/snippets/jquery/done-resizing-event/
My question is if anybody knows what to change in the following js file to always show submenu on the vertical menu , meaning to show the submenu on page load and stay shown whether i hover on it or not, in clear make it part of the vertical menu and not an hidden sub menu that you have to hover on the parent category to access.
What do i need to change in the following code to acomplish that, :
Thanks in advance guys !
* DC Vertical Mega Menu - jQuery vertical mega menu
* Copyright (c) 2011 Design Chemical
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
*/
(function($){
//define the new for the plugin ans how to call it
$.fn.dcVerticalMegaMenu = function(options){
//set default options
var defaults = {
classParent: 'dc-mega',
arrow: true,
classArrow: 'dc-mega-icon',
classContainer: 'sub-container',
classSubMenu: 'sub',
classMega: 'mega',
classSubParent: 'mega-hdr',
classSubLink: 'mega-hdr',
classRow: 'row',
rowItems: 3,
speed: 'fast',
effect: 'show',
direction: 'right',
menubg: '0',
menufixwidth: '0',
menufixheight: '0'
};
//call in the default otions
var options = $.extend(defaults, options);
var $dcVerticalMegaMenuObj = this;
//act upon the element that is passed into the design
return $dcVerticalMegaMenuObj.each(function(options){
$mega = $(this);
if(defaults.direction == 'left'){
$mega.addClass('left');
} else {
$mega.addClass('right');
}
// Get Menu Width
var megaWidth = $mega.width();
// Set up menu
$('> li',$mega).each(function(){
var $parent = $(this);
var $megaSub = $('> ul',$parent);
if($megaSub.length > 0){
$('> a',$parent).addClass(defaults.classParent).append('<span class="'+defaults.classArrow+'"></span>');
$megaSub.addClass(defaults.classSubMenu).wrap('<div class="'+defaults.classContainer+'" />');
var $container = $('.'+defaults.classContainer,$parent);
if($('ul',$megaSub).length > 0){
$parent.addClass(defaults.classParent+'-li');
$container.addClass(defaults.classMega);
// Set sub headers
$('> li',$megaSub).each(function(){
$(this).addClass('mega-unit');
if($('> ul',this).length){
$(this).addClass(defaults.classSubParent);
$('> a',this).addClass(defaults.classSubParent+'-a');
} else {
$(this).addClass(defaults.classSubLink);
$('> a',this).addClass(defaults.classSubLink+'-a');
}
});
$('> li li',$megaSub).each(function(){
if($('> ul',this).length){
$(this).addClass('mega-sub3'); //rajib
$('.mega-sub3 ul').addClass("show3div");
}
});
} else {
$container.addClass('non-'+defaults.classMega);
if(defaults.menubg==1){
var catimages =$('.non-'+defaults.classMega).closest("li").attr('id');
catimages = catimages.replace(/\s+/g, '-').toLowerCase();
$('.non-'+defaults.classMega).css('background','#333 url(modules/leftmegamenu/bgimages/'+catimages+'.gif) no-repeat right bottom');
}
}
}
var $container = $('.'+defaults.classContainer,$parent);
var subWidth = $megaSub.outerWidth(true);
var subHeight = $container.height();
if(defaults.menufixwidth>0){
var subWidth = defaults.menufixwidth;
}
if(defaults.menufixheight>0){
var subHeight = defaults.menufixheight;
}
var itemHeight = $parent.outerHeight(true);
// Set position to top of parent
$container.css({
height: subHeight+'px',
width: subWidth+'px',
zIndex: '1000'
}).hide();
});
// HoverIntent Configuration
var config = {
sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)
interval: 10, // number = milliseconds for onMouseOver polling interval
over: megaOver, // function = onMouseOver callback (REQUIRED)
timeout: 0, // number = milliseconds delay before onMouseOut
out: megaOut // function = onMouseOut callback (REQUIRED)
};
$('li',$dcVerticalMegaMenuObj).hoverIntent(config);
function megaOver(){
$(this).addClass('mega-hover');
var $link = $('> a',this);
var $subNav = $('.sub',this);
var $container = $('.sub-container',this);
var width = defaults.menufixwidth;
var outerHeight = $container.outerHeight();
var height = defaults.menufixheight;
var itemHeight = $(this).outerHeight(true);
var offset = $link.offset();
var scrollTop = $(window).scrollTop();
var offset = offset.top - scrollTop
var bodyHeight = $(window).height();
var maxHeight = bodyHeight - offset;
var xsHeight = maxHeight - outerHeight;
if(defaults.menubg==1){
var catimages =$(this).closest("li").attr('id');
catimages = catimages.replace(/\s+/g, '-').toLowerCase();
$container.css({
background: '#333 url(modules/leftmegamenu/bgimages/'+catimages+'.gif) no-repeat right bottom'
});
}
if(xsHeight < 0){
var containerMargin = xsHeight - itemHeight;
$container.css({marginTop: containerMargin+'px'});
}
var containerPosition = {right: megaWidth};
if(defaults.direction == 'right'){
containerPosition = {left: megaWidth};
}
if(defaults.effect == 'fade'){
$container.css(containerPosition).fadeIn(defaults.speed);
}
if(defaults.effect == 'show'){
$container.css(containerPosition).show();
}
if(defaults.effect == 'slide'){
$container.css({
width: 0,
height: 0,
opacity: 0});
if(defaults.direction == 'right'){
$container.show().css({
left: megaWidth
});
} else {
$container.show().css({
right: megaWidth
});
}
$container.animate({
width: width,
height: height,
opacity: 1
}, defaults.speed);
}
}
function megaOut(){
$(this).removeClass('mega-hover');
var $container = $('.sub-container',this);
$container.hide();
}
});
};
})(jQuery);
$(document).ready(function($){
// menu slide hoverIntend
$('#rajbrowsecat').hoverIntent({
over: startHover,
out: endHover,
timeout: 1000
});
function startHover(e){
$('#rajdropdownmenu').slideDown(200)
}
function endHover(){
$('#rajdropdownmenu').slideUp(600)
}
// menu slide hoverIntend
$('#rajmegamenu').dcVerticalMegaMenu({
rowItems: '5',
speed: 'fast',
effect: 'slide',
direction: 'right',
menubg: '1',
menufixwidth: '236',
menufixheight: '155'
});
});
UPDATE:
So i managed to do it by diabling all the code (with /*) related to hover effect from the line "// HoverIntent Configuration" to "// menu slide hoverIntend" and by twicking the css a bit for presentation , seemed to do the trick to always showing submenus but for those who are interested i also found a way by adding to the css the line "height:auto", that also seemed to work fairly nicely.
Anyway thanks guys for yor answers anyway , it's always nice to to know that we have a place you can turn to when we are stuck !
I'm trying to do like http://css-tricks.com/text-fade-read-more/ -- but how do I get it to contact/expand both when clicking on the More button and on the body text?
Clicking on the body text works fine, but it only works the first time with the More button:
http://jsfiddle.net/frank_o/8ssrmxwp/10/
JS:
$.fn.truncate = function(container, maxHeight) {
var totalHeight = 0,
paragraph = container.find('p');
container.css('max-height', maxHeight);
paragraph.each(function() {
totalHeight += $(this).outerHeight(true);
});
if(totalHeight > maxHeight) {
container.append('<div class="fade_overlay"></div>');
$('More').insertAfter(container);
var fadeOverlay = container.parent().find('.fade_overlay'),
more = container.parent().find('.more'),
duration = 100;
// http://stackoverflow.com/questions/4911577/jquery-click-toggle-between-two-functions
function firstClick() {
container.css('height', container.height())
.css('max-height', 9999);
container.animate({
'height': totalHeight
});
fadeOverlay.fadeOut(duration);
// more.fadeOut(duration);
container.one('click', secondClick);
}
function secondClick() {
container.animate({
'height': maxHeight
});
fadeOverlay.fadeIn(duration);
// more.fadeIn(duration);
container.one('click', firstClick);
}
container.one('click', firstClick);
more.one('click', firstClick);
}
}
$('.article').each(function () {
$.fn.truncate($(this), 220);
});
I've tried to lay out the functions differently but to no avail:
http://jsfiddle.net/frank_o/8ssrmxwp/12/
JS:
var oddClick = function(target) {
target.one('click', function() {
var target = $(this);
target.css('height', container.height())
.css('max-height', 9999);
target.animate({
'height': totalHeight
});
fadeOverlay.fadeOut(duration);
// more.fadeOut(duration);
target.one('click', evenClick);
});
}
var evenClick = function(target) {
target.one('click', function() {
var target = $(this);
target.animate({
'height': maxHeight
});
fadeOverlay.fadeIn(duration);
// more.fadeIn(duration);
target.one('click', oddClick);
});
}
oddClick(container);
oddClick(more);
Through more.one('click', firstClick); the event handler gets removed after the first call. Change it to more.on('click', firstClick); and it works.
I have built a toggle that will slide down a div to reveal content. I am not using the normal toggle() function of jQuery because I wanted to show the top 300px of content and then slide to reveal the rest.
Anyways, I have a script setup that animates the height of the container div, which reveals the content inside.
function slideCut() {
var revertHeight = 300;
var finalHeight = 0;
var s = 1000;
$('.cutBottom a').click(function() {
event.stopPropagation();
var p = $(this).parent().parent();
var h = p.css('height', 'auto').height();
var cut = $(this).parent().find('.cutRepeat');
// Fix height
if (finalHeight == 0) {
p.css('height', 'auto');
finalHeight = p.height();
p.height(revertHeight);
}
if ($(this).hasClass('toggled')) {
$(this).removeClass('toggled');
p.animate({height:revertHeight}, {
duration: s
});
cut.fadeIn('fast');
} else {
$(this).addClass('toggled');
p.animate({height:finalHeight}, {
duration: s,
complete: function() {
cut.fadeOut('fast');
}
});
}
return false;
});
}//end
The problem is, the second time it animates the height to the full size (sliding the div to reveal content) it does not animate, it just jumps to the full height. Why is this happening?
Working example: http://jsfiddle.net/6xp2Y/3/
After all that hard work and fiddle being broken, all we had to do was remove one line from your code:
function slideCut() {
var revertHeight = 300;
var finalHeight = 0;
var s = 1000;
$('.cutBottom a').click(function() {
event.stopPropagation();
var p = $(this).parent().parent();
//var h = p.css('height', 'auto').height(); //REMOVE THIS LINE
var cut = $(this).parent().find('.cutRepeat');
// Fix height
if (finalHeight == 0) {
p.css('height', 'auto');
finalHeight = p.height();
p.height(revertHeight);
}
if ($(this).hasClass('toggled')) {
$(this).removeClass('toggled');
p.animate({height:revertHeight}, {
duration: s
});
cut.fadeIn('fast');
} else {
$(this).addClass('toggled');
p.animate({height:finalHeight}, {
duration: s,
complete: function() {
cut.fadeOut('fast');
}
});
}
return false;
});
}//end
slideCut();
Updated your fiddle: http://jsfiddle.net/brandonscript/6xp2Y/5/
Updated answer!
The proplem lies here
if (finalHeight == 0) {
parent.css('height', 'auto');
finalHeight = parent.height();
parent.height(revertHeight);
console.log('finalHeight:'+finalHeight);
}
This is only running at the beginning, because finalHeight is not 0 anymore after first run.
You can fix this by setting finalHeight back to 0 after closing it again, like so
if ($(this).hasClass('toggled')) {
$(this).removeClass('toggled');
parent.animate({height:revertHeight}, {
duration: speed
});
cut.fadeIn('fast');
finalHeight = 0;
} else { [...]