Sliding panels closing when clicked outsite and linking to an open panel - javascript

I am planing to use sliding panels as pages for this website.
Even tough I am a JS noob I managed to find and edit scripts until I got pretty much the perfect script
Problem is that the sliding panels are closing when clicked outside. I want then to close when another panel opens but not when somebody clicks outside the panel.
Also this will be an one page design except the portfolio. I a link to index.html with the portfolio panel open. Can I do that? To understand better what I mean please check this image.
Edit: Okay I will explain better.
This will be a one page design, since I will be using sliding panels for pages. However each gallery item will have it's own html page because I do not want the site to be slow.
So I need to link portfolioitem1.html to the index.html with the portfolio panel open just like in the image I posted

Here's a jsFiddle that solves the first part of the problem:
http://jsfiddle.net/aUHwA/1/
The thing that was causing the panels to collapse was the document.click() function you were using. I've moved everything into a $(document).ready() function, added some generic wrappers for the sliders and buttons, and used a generic click function that's shared across all three buttons.
The click function uses the data-rel property of the button that was clicked to decide what panel it should toggle. It also hides any panels that are already visible within the #content div.
To open the portfolio panel by default, you can add this immediately after the on('click') function:
$('#portfolio_button').click();
That will trigger the portfolio animation (see http://jsfiddle.net/aUHwA/3/). Alternatively:
$('#portfolio').slideToggle(0);
will open the portfolio panel instantly, without the sliding animation (see http://jsfiddle.net/aUHwA/2/).

Related

Bootstrap modal shows all images and not limited to the images in any given Tab

My question is about a bootstrap snippet as you can see here:
https://bootsnipp.com/snippets/P2gor
I wanted to use this gallery with tab views as you can see below. But my problem is that when click on first tab (Animal) and open image modal, I see the next button until all images in all tabs are shown. And when I click on second tab (Painting) the modal opens app empty and neither previous nor next button works.
First Tab
Second Tab
I want to be able to use this snippet with Tabs, so I'm here seek advice what can I do to make it work. When I click on first tab and browse the images in the modal, I want the next button to disappear when the last image on the current Tab is shown, not after all other images are shown.
Because there is no argument (id / class) passing to the JavaScript methods, I can't figure out how to make this work without making lots of duplication in the JavaScript file.
I'm sorry if this question is too generic and not enough specific.

Bootstrap: overlapping modal should not freeze underlying modal from scrolling

I KNOW that Bootstrap discourages overlapping modals. I hacked together a site really quickly to help with the whole coronavirus thing, and so my focus was on speed not getting everything perfect. Consequently today someone pointed out a bug. Normally what happens with a Bootstrap modal:
Bootstrap sets scroll automatically a based on modal content, that is if content requires scroll, I guess the appropriate CSS is added
When a modal is open, the background content (that's covered by tinted overlay), is not scrollable
Once the modal is closed, the background content becomes scrollable again
My problem right now is that in my overlapping modal situation, the second modal that opens on top of the first one causes the content of the first modal to stay unscrollable, even when the second, overlapping modal is closed.
My desired behavior is that when the second modal is closed, the first modal returns to "default", that is, if the content requires scrollability, the scroll returns.
Here's a live site: https://www.giftcardsforsmallbusinesses.com/
Click to follow the modal: If you would like to be listed here, click here (ensure you're viewing this on a screen when there modal content requires scrolling, which is most screens... it's a lot of content)
On the modal that pops up, find #4 on How It Works, and click the bonus value
A second, small modal will pop up
Now close the second, smaller modal
You'll notice now that the first modal: Are you a small business owner? is no longer scrollable. Curiously, the background content, the original page, is now scrollable
I feel like there's a quick & dirty answer here... I can just inject something where it's like
PSEUDOCODE
$("#second-modal").on("close", function() {
$("#first-modal").resetDefault()
})
But I don't have enough experience with Twitter Bootstrap to know how to do this, and I couldn't find the answer in the docs.
This should fix it...
$('.modal').on("hidden.bs.modal", function (e) {
if ($('.modal:visible').length) {
$('body').addClass('modal-open');
}
});
When you close the overlapped bonus modal, it removes the body class .modal-open by default (not knowing there is another modal below it). This class applies overflow:hidden; to the body and enables modals to scroll independently.
So the above script is basically adding the class again when the bonus modal is closed/hidden.
Try this, this is directly targeting the bonus modal hidden event.
$('#expirationModal').on('hidden.bs.modal', function () {
$('BODY').addClass('modal-open');
})

Bootstrap Umbraco menu Dropdown click

I work for a site which has a site which is built upon Umbraco and utilizes bootstrap and Jquery.
We have a top navigation menu which has pages and sub-pages. When you hover over a navigation menu it opens up the sub-menu and lets you go to them.
When this menu is viewed on a mobile device it becomes a hamburger and when you click on it it drop-down and the main tabs are shown. Here when you click on the main tab it shows the sub-menu quickly but then goes to the main tab instead of allowing you to click on the sub-menu.
The problem is that this is a large site which is about to launch so that there is no easy way to find what links to what. What is a elegant way to fix this?
I cannot provide the link due to the fact that it is a company.
Thank you!
You could try using this bit of JS (requires jQuery):
$(".dropdown").on('click', function (e) {
e.preventDefault();
});
Or you could change your menu partial to just not put the URL in for menu items that have a dropdown and instead put a # in its place.

Bootstrap 3 accordion menu: Stop the panel open from also opening the page

I am developing an Angular JS 1.5 app using Booststrap components. I have an accordion menu on the sidebar which is based upon this:
http://bootsnipp.com/snippets/QXqM1
(Not my code)
When I open a menu and select the menu item the page is loaded (I am using vanilla angular JS routing for this.
If I then open another menu from the accordion i.e click on the menu header, the menu opens, the previous one collapses but the loaded page changes.
What I would like is for a page to be loaded only when an item is clicked and not when a menu is opened.
Is this and angular issue or a css or bootstrap issue and how can I solve it?
Thanks in advance for any help or pointers on this.
Well thanks for the overwhelming response ;-)
I found a solution: Instead of using href for the sub menu titles I now use data-target. Bootstrap interprets data-target and this way Angular JS routing does not get invoked.
In this way the menus can be opened and closed without impact the view. the href tags remain only on the menu items which should show anything.

css link hover and javascript not working when page contains asp.net ajax updatepanel

I have a master page with a menu that rely on a css template and a little javascript for small screens. The menu works really nice for child pages that does not contain an UpdatePanel. But when the page contains an UpdatePanel the menu stops work. My a:hover css is not working and the javascript draw the a button but clicking it have no effect on html. Some basic css is working but seems like the interactive css linke link events and such is broken. This happen direct on laod of the page. I have not even clicked anything inside tha updatepanel
Any suggestion on what might be wrong here?
Turned out to be the wrong path to one of my javascript files :P

Categories

Resources