I have an accordion-style menu that runs along the left side of my page. This is the script that I have written for each separate accordion button (they're stacked on each other):
$("a.about-us").on('click', function(eve) {
eve.preventDefault();
$(this).toggleClass("down");
$("ul.about-us").toggle()
});
I would like to have my page automatically scroll down to show a newly opened accordion if that open accordion extends beyond the bottom of the viewport.
This is what my HTML looks like for one of the buttons:
HTML for About Button
on the accordion parent add the css:
height:auto;
If you need further help please provide the HTML structure.
Related
I have a JS conflict occurring and cannot figure it out.
My site is a one page layout that uses smooth scroll to move from section to section.
There are 4 scripts in particular that I believe are conflicting.
The problem is once I click an image to open it, the page bounces right back to the top instead of staying where it is. After closing the image popup, I have to scroll back down every time. You will also notice that after closing the popup image, clicking any nav button at the top forces a scroll from the top down and not from the current position (as shown earlier in the video).
This problem is even worse in Safari (Firefox does not do this part) as the active nav items do not display (green highlight) after closing a popup image.
Please have a look at a video screen grab I posted of the issue I am having.
http://whataprettyface.ca/video2.html
I have the Filterizr / Magnific Popup / Portfolio working perfectly on my mobile site. But the mobile site does not include the smooth scroll feature.
As mentioned above, I am using:
1) Magnific Popup v1.1.0 (Pops open images in forefront)
http://whataprettyface.ca/desktop/js/jquery.magnific-popup.js
2) J.Query Filterizr (arranges selected photo gallery)
http://whataprettyface.ca/desktop/js/jquery.filterizr.js
3) My 'Scripts' main JS (contain smooth scroll code)
http://whataprettyface.ca/desktop/js/scripts.js
4) And a 'portfolio" script:
$(function(){
'use strict';
// portfolio filter container
$('.filtr-container').filterizr('filter', '1');
// portfolio filter
$('.simplefilter li').click(function() {
$('.simplefilter li').removeClass('active');
$(this).addClass('active');
});
// portfolio image-popup
$(".image-popup").magnificPopup({
type: "image",
removalDelay: 300,
mainClass: "mfp-fade"
});
});
I have read about no.Conflict but am not sure how to properly implement it here or if it will even work.
I feel like the answer is before my eyes but I am a novice.
Any help is greatly appreciated!
To my dismay, the issue was not in my scripts at all. It was as simple as changing a few lines in my CSS.
By moving the 'hidden overflow' from the html/body and adding in to the portfolio container, the issue was resolved.
#work .container{
overflow: hidden;
}
I am using the widget collapsed by default with class="panel-collapse collapse". When there are a number of items in the chat and it is opened scrolling starts at the top instead of at the bottom (which works fine if not collapsed by default). An example is at http://www.bestdealadvisors.com, add some items then refresh the page. When the widget is opened it starts at the top. How can I make this scroll from the bottom when opened?
You should listen on the event Bootstrap fires when something is collapsed. There is a bit of information here. Then scroll the chat window to the bottom.
This script has to be at the end of your page (after the bootstrap and jQuery script tags )
<script>
var panelBody = $("#chat-list")
$('#collapseOne').on('shown.bs.collapse', function () {
panelBody.stop().animate({scrollTop:panelBody.prop("scrollHeight")}, '100', 'swing')
})
</script>
I have a series of divs, that serve as a demo page. Initially I have only the first div showing, with the other 2 hidden using jQuery hide() on page load.
There is a button on each div which triggers a jQuery event of hiding the current div and showing the next div in the sequence.
I would like on the very last div (div 3), once displayed to also show the previous 2 divs, but to have div 3 still display. Meaning, the user can scroll up to see the other two divs, but without scrolling they will still be viewing div 3.
$(document).ready(function () {
$(".page-2").hide();
$(".page-3").hide();
$(".overlay").show();
$(".overlay-button").click(function () {
$(".overlay").hide();
$(".page-1").fadeOut(1000);
$(".page-2").show("slow");
});
$(".arrow-down").click(function () {
$(".page-2").fadeOut(1000);
$(".page-3").show();
$(".page-2").show();
$(".page-1").show();
});
});
This code brings the view back up to the first div (".page-1").
The problem is that when you have all of them open the height of the page changes and the scrollbar gets left behind, to fix this you can force the scrollbar to scroll to the bottom of the page with the following snippet:
$('html, body').scrollTop($(document).height());
I have this JSFiddle which includes a Bootstrap Accordion embedded inside another Accordion, the issue is that the Chevron to the right does not now behave as expected.
As you can see by the code below, the chevron changes direction when collapse is triggered, however, now it is in an embedded accordion this doesn't appear to be the solution.
$('.collapse').on('shown.bs.collapse', function(){
$(this).parent().find(".glyphicon-chevron-down").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
}).on('hidden.bs.collapse', function(){
$(this).parent().find(".glyphicon-chevron-up").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
});
I usually prefer to do this with CSS - less messy than trying to detect which item opened/closed when you are nesting, or have multiple on a page.
1) Add the class 'collapsed' to your accordion headings if they are closed by default (bootstrap toggles this class, but if you don't have it present when the page loads, it doesn't get added until you open and then close an accordion item).
2) Get rid of the JS and add this CSS:
.panel-heading.collapsed .glyphicon-chevron-down {
transform:rotateX(0deg);
}
.panel-heading .glyphicon-chevron-down {
transition:transform .5s;
transform:rotateX(180deg);
}
If you don't like the flip animation, just get rid of the transition rule, but I like to think it adds a little something.
http://jsfiddle.net/rr7oggLv/6/
I am trying to implement a javascript toggle effect for my "small" or mobile sized version of a responsive site. I am using my own custom WordPress theme.
I'm trying to use the script from this article: http://webdesignerwall.com/tutorials/mobile-navigation-design-tutorial/comment-page-1
The tricky part is that I'm trying to include several divs, not just a single nav. If you look at the site now (which is still under construction), at:
http://66.147.244.81/~assureva/
and reduce your browser window to narrower than 540px, you'll see that I've managed to get my top navbar (smallnav), 2 "login" links, and facebook and LinkedIn icons, all to disappear, and re-appear when pressing the "main menu" button that now appears at the top, to the right of the logo. But I can't seem to add in the last part, which is the 4 links that comprise the main "nav". I've wrapped the entire area in a div (mobimenubg), but the main navbar acts like it isn't in that div, but the "smallnav", "logins" and "socialcons" divs all combine as desired in the "mobimenubg" div.
If I go ahead and set the "navbar" div to "display:none" it will disappear but it won't re-appear when I click the "main menu" button.
So I think the answer to ask the javascript to include the "mobimenubg" div AND the "navbar" div (the "navbar div is a container that includes the actual "nav") but I don't know how to write it properly.
Here's the javascript:
<script type="text/javascript">
jQuery(document).ready(function($)
{/* prepend menu icon */
$('#mobimenuwrap').prepend('<div id="menu-icon">Main Menu</div>');
/* toggle nav */
$("#menu-icon").on("click", function(){
$("#mobimenubg").slideToggle();
$(this).toggleClass("active");
});
});
</script>
Can someone tell me how add the navbar div? Do I add another line after:
$("#mobimenubg").slideToggle();
or can I include it in the parens:
$("#mobimenubg" IN HERE?).slideToggle();
I don't know the conventions -
Help greatly appreciated!!
I've wrapped the entire area in a div (mobimenubg), but the main navbar acts like it isn't in that div,
You actually have the right code, but your HTML structure is off. The navbar div is not contained within the mobimenubg div, and that is the problem. Just make sure to nest navbar there, or otherwise I think you can also call the function on the navbar like:
$("#navbar").slideToggle();