How to adjust div location on animate - javascript

In a webapplication I'm working on, when you click on a listitem, a div pops out.
You can find an example here.
How can I adjust the top of the div to the listitem?
The div (#home in the example) has to pop out with the top next to the list item.
$(function () {
$("#home_link").click(function () {
$("#home").animate({width: 'toggle'}, 500);
});
});
$(function () {
$("#edit_link").click(function () {
$("#home").animate({width: 'toggle'}, 500);
});
});

So, I cleaned up some of it and reorganized it. Basically, I marked a container element (which holds both the navs and the content), and use that to determine the desired offset. I made everything more generic so you can just add more hyperlinks as you need! Hopefully this is helpful, let me know if you have any questions about why I did things this way, or how something works.
jsFiddle
$(function () {
$("#list a").click(function () {
var $this = $(this);
var $container = $this.closest('[data-id="container"]');
var $target = $($this.attr('href'));
$target.css('margin-top', $this.offset().top - $container.offset().top);
$target.animate({width: 'toggle'}, 500);
});
});

Related

Remove transparency on menu drop down Javascript

I've been trying to implement a feature that removes the transparency of the dropdown menu on my website so that it is actually readable for visitors.
The code I am currently using, which removes transparency on scroll but not on drop down is:
$(document).ready(function(){
var stoptransparency = 100; // when to stop the transparent menu
var lastScrollTop = 0, delta = 5;
$(this).scrollTop(0);
$(window).on('scroll load resize', function() {
var position = $(this).scrollTop();
if(position > stoptransparency) {
$('#transmenu').removeClass('transparency');
} else {
$('#transmenu').addClass('transparency');
}
lastScrollTop = position;
});
$('#transmenu .dropdown').on('show.bs.dropdown', function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideDown(300);
});
$('#transmenu .dropdown').on('hide.bs.dropdown', function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideUp(300);
});
});
I tried changing it to this (and variations of this) but can't seem to get it to work:
$(document).ready(function(){
var stoptransparency = 100; // when to stop the transparent menu
var lastScrollTop = 0, delta = 5;
$(this).scrollTop(0);
$(window).on('scroll load resize', function() {
var position = $(this).scrollTop();
if(position > stoptransparency) {
$('#transmenu').removeClass('transparency');
} else {
$('#transmenu').addClass('transparency');
}
lastScrollTop = position;
});
$('#transmenu .dropdown').on('show.bs.dropdown', function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideDown(300);
$('#transmenu').removeClass('transparency');
});
$('#transmenu .dropdown').on('hide.bs.dropdown', function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideUp(300);
$('#transmenu').addClass('transparency');
});
});
Any help would be greatly appreciated!
Thanks!
Without the html that this is hooking into it's a bit difficult to answer your question.
But given the fact that scrolling gets the job done, the only element I can see that could be preventing the functionality you want is that your selector to add show event handler is either selecting nothing in particular or an element in the DOM that is not the bootstrap dropdown element that triggers 'show.bs.dropdown', which is my reasoning for the first statement.
You can try the following debug code to verify:
// Should log to console with 'selected' if selector works alternatively 'not selected'
console.log($('#transmenu .dropdown').length > 0 ? 'selected' : 'not selected');
// Log to console when show event triggered
$('#transmenu .dropdown').on('show.bs.dropdown', function() {
console.log('triggered');
});
Hope that helps you find a solution. Happy coding!
see the documentation at http://api.jquery.com/on/ and it should become obvious why your fancy named events are never being triggered (without defining any event namespace in the first place).
$('#transmenu .dropdown')
.on('show', function() {})
.on('hide', function() {});
the DOM selector also might be #transmenu.dropdown instead of #transmenu .dropdown (depending if id and class attributes are present on the DOM node to select - or if one selects the parent node by id and there is/are nested node/s with a class attribute present).

Closing nested accordion closes everything

I have a problem with my nested accordions.
I have been trying to figure out how to nest my accordions but in a sense that I dont need to write any extra jquery codes for each specific one I add.
I made a jsfiddle as an example... https://jsfiddle.net/L2bwmgL8/
and the code for the accordion looks like this:
$(document).ready(function() {
function close_accordion_section() {
$('.accordion .accordion-section-title').removeClass('active');
$('.accordion .accordion-section-content').slideUp(1000).removeClass('open');
}
$('.accordion-section-title').click(function(e) {
// Grab current anchor value
var currentAttrValue = $(this).closest('.accordion-section-title');
//console.log(currentAttrValue);
if (currentAttrValue.hasClass('active')) {
close_accordion_section();
} else {
close_accordion_section();
// Add active class to section title
currentAttrValue.addClass('active');
// Open up the hidden content panel
$('.accordion ' + currentAttrValue.attr('href')).slideDown(1000).addClass('open');
setTimeout(function() {
$('html, body').animate({
scrollTop: $(currentAttrValue.attr('href')).offset().top
}, 1000);
}, 1001);
//console.log((currentAttrValue.attr('href')));
}
e.preventDefault();
});
});
This way it works fine when I dont have them nested. However, when they are nested as in the example, under the first accordion (ignore the broken images).
Then when I click on the specific accordion to close, everything inside that accordion closes, including the parent one. Or, maybe I think just the parent closes.
Now, I tried, maybe passing the currentAttrValue inside the close_accordion_section() function like close_accordion_section(currentAttrValue) and changing the close_acordion_section to:
function close_accordion_section() {
$(this).closest('.accordion .accordion-section-title').removeClass('active');
$(this).closest('.accordion .accordion-section-content').slideUp(1000).removeClass('open');
}
But then everything opens up nicely, but I cant close any of the accordions anymore.
Any help and explanation would be appriciated, I am still learning the ropes so to speak.
I would simplify it, and then just target the siblings of the current accordion so as to not affect the parent accordion of nested accordions etc.
$(document).ready(function() {
$('.accordion-section-title').on('click', function(e) {
e.preventDefault();
var self = $(this).toggleClass('active');
var section = self.closest('.accordion-section');
var siblings = section.siblings('.accordion-section');
siblings.find('.accordion-section-content').slideUp(1000).removeClass('open').end()
.find('.accordion-section-title').removeClass('active');
$('.accordion ' + self.attr('href')).slideToggle(1000).toggleClass('open')
.find('.accordion-section-title.active')
.trigger('click');
if (self.hasClass('active')) {
setTimeout(function() {
$('html, body').animate({
scrollTop: $(self.attr('href')).offset().top
}, 1000);
}, 1001);
}
});
});
FIDDLE
The issue is in your if else statement:
you need to cut one of the calls to close_accordion_section():
I have a problem with my nested accordions. I have been trying to figure out how to nest my accordions but in a sense that I dont need to write any extra jquery codes for each specific one I add.
I made a jsfiddle as an example... https://jsfiddle.net/L2bwmgL8/
and the code for the accordion looks like this:
$(document).ready(function() {
function close_accordion_section() {
$('.accordion .accordion-section-title').removeClass('active');
$('.accordion .accordion-section-content').slideUp(1000).removeClass('open');
}
$('.accordion-section-title').click(function(e) {
// Grab current anchor value
var currentAttrValue = $(this).closest('.accordion-section-title');
//console.log(currentAttrValue);
if (currentAttrValue.hasClass('active')) {
close_accordion_section();
} else {
//CUT THIS
// Add active class to section title
currentAttrValue.addClass('active');
// Open up the hidden content panel
$('.accordion ' + currentAttrValue.attr('href')).slideDown(1000).addClass('open');
setTimeout(function() {
$('html, body').animate({
scrollTop: $(currentAttrValue.attr('href')).offset().top
}, 1000);
}, 1001);
//console.log((currentAttrValue.attr('href')));
}
e.preventDefault();
});
});
fiddle: https://jsfiddle.net/kjyqmzuh/

How to stop looping slide in jQuery

I made a function where I hover over a content box and a div with class name bottomdata slides down from the top. This function works great, except when you scroll over the box multiple times, the animation runs in a loop. I want to animation to run once, then stop until it is hovered again after the first animation is done looping.
$(".databox").on('mouseenter', '.box', function() {
$(this).find('.topdata').slideUp(400);
$(this).find('.bottomdata').slideDown(350);
}).on('mouseleave', '.box', function() {
$(this).find('.bottomdata').slideUp();
$(this).find('.topdata').slideDown();
});
So I tried to use stop(); I also tried to use finish(). I even tried to use clearQueue(). I just can't seem to figure it out. All help is greatly appreciated.
I have included a sample on jsfiddle: http://jsfiddle.net/4cx1kygc/
$('.databox').on('mouseenter', '.box', function() {
var that = $(this);
that.find('.topdata').stop(true, true).slideUp(400);
that.find('.bottomdata').stop(true, true).slideDown(350);
}).on('mouseleave', '.box', function() {
var that = $(this);
that.find('.topdata').stop(true, true).slideDown();
that.find('.bottomdata').stop(true, true).slideUp();
});
Documentation
Demo

Bootstrap accordion scroll to top of active panel heading

I'm looking for a code that scrolls up to the top of the currently active panel heading of my bootstrap 3 html/css accordion. The closest solution I've found on stackoverflow is the snippet of js below.
This snippet works fairly well, but when a panel heading gets clicked the page scrolls such that the very top of the panel content is flush with the top of the screen. Is there a way to modify this so that the scrolling effect will result in the panel "heading" (as opposed to the top of panel content area) being visible at the top of the screen?
$(function () {
$('#accordion').on('shown.bs.collapse', function (e) {
var offset = $('.panel.panel-default > .panel-collapse.in').offset();
if(offset)$('html,body').scrollTop(offset.top); }); });
Let me know if I should be sharing the bootstrap accordion html as well.
I used this and it works fine you can adjust the -20 after the .offset().top if you need to tweak it up or down a little.
$(function () {
$('#accordion').on('shown.bs.collapse', function (e) {
var offset = $('.panel.panel-default > .panel-collapse.in').offset();
if(offset) {
$('html,body').animate({
scrollTop: $('.panel-title a').offset().top -20
}, 500);
}
});
});
This is to target the specific .panel-heading clicked as per James Wilson's comment on the accepted answer.
$(function () {
$('#accordion').on('shown.bs.collapse', function (e) {
var offset = $(this).find('.collapse.in').prev('.panel-heading');
if(offset) {
$('html,body').animate({
scrollTop: $(offset).offset().top -20
}, 500);
}
});
});
All I changed from gigelsmith's accepted answer is 'var offset' and the scrollTop's target.
I couldn't get the answer above to work, perhaps I'm missing something but I can't see how the scrollTop line above relates to the currently opened accordion item so used the following code instead. Hope it helps someone else:
$(function () {
$('#accordion').on('shown.bs.collapse', function (e) {
var offset = $('.panel.panel-default > .panel-collapse.in').offset();
if(offset) {
$('html,body').animate({
scrollTop: $('.panel-collapse.in').siblings('.panel-heading').offset().top
}, 500);
}
});
});
Always animate looks a bit too much so this is my version to only do the job when heading is over the visible part.
(note that I use a data-accordion-focus to apply the fix)
$('[data-accordion-focus]').on('shown.bs.collapse', function (e) {
var headingTop = $(e.target).prev('.panel-heading').offset().top - 5;
var visibleTop = $(window).scrollTop();
if (headingTop < visibleTop) {
$('html,body').animate({
scrollTop: headingTop
}, 500);
}
});
By using .panel-default as selector of .on(), you can scroll to the active panel.
$('#accordion').on('shown.bs.collapse', '.panel-default', function (e) {
$('html,body').animate({
scrollTop: $(this).offset().top
}, 500);
});

Can I use a div to animate the container it is in?

I have a container with three divs of content inside of it. I am using javascript to navigate from left to right across the divs with the navigation tools referenced as an unordered list. Instead I would like to make those divs fixed and just move the entire container from left to right using the same navigation buttons.
Here is the javascript I tried. In order for this to work, I tried to change
var $anchor = $(this) to var $anchor = $(the name of the container div), but that doesn't work. Could someone help me out with this? Thanks
<script type="text/javascript">
$(function() {
$('ul.nav a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 1000);
event.preventDefault();
});
});
</script>
Thanks...I found my answer though!
http://jsfiddle.net/pXy2C/
$(document).ready(function(){
$("#right").click(function(){
$("#contents").animate({left:'-200px'},500);
$("#container").animate({'margin-left':'200px'},500);
});
$("#left").click(function(){
$("#contents").animate({left:'0px'},500);
$("#container").animate({'margin-left':'0px'},500);
});
});

Categories