jsfiddle: http://jsbin.com/wamunoside/1/edit?html,output
jsfiddle
This is taken from the example given on the Bootstrap 4 docs site:
just adding a 2nd dropdown to this example below the 1st dropdown found here:
https://v4-alpha.getbootstrap.com/components/navbar/#navbarNavDropdown
So in the jsfiddle this is how you cause the issue:
1.) reduce the width of the output tab so that it shows the menu for mobile (991px or less)
2.) You will see two 'dropdown link', click on the top one which expands the submenu.
3.) click on the other 'dropdown link' below the currently expanded one.
Notice both dropdowns are now closed - should have opened the 2nd dropdown.
ended up issue being my code...
I added the following if event.type == "mouseleave" and that seems to have fixed the issue reasonably well, still not perfect (for desktop):
http://jsbin.com/yiyohatequ/edit?html,css,js,output
I'm basically struggling with the best way to get dropdown-menu to appear 'on hover' for desktop and dropdown to appear 'on click' for tablet/mobile. so that is why I wrote this code in the 1st place.
/* Prevent more than 1 dropdown showing up at once*/
$('.nav-link').hover(function (event) {
//breaks mobile if this fires on "mouseenter". so only fire on "mouseleave"
if (event.type == "mouseleave") {
var hovered = this.nextElementSibling;//.dropdown-menu
var navdropdowns = $('.dropdown-menu');
navdropdowns.each(function (a, b) {
if (hovered != b) {
$(b).removeClass('show');
}
});
}
})
Related
I have 5 fullpage sections and scrolling set by whole sections. Everything works fine.
But i need, if visitor is on 4th section and scrolls down, that web not scroll down to last section. I want access to this last section only by click on button in 4th section. This button is done and functional, but i dont now, how to disable automatic scrolling to last section.
Thanks for any idea!
You can disable the scrolling in the last section by using the method
fullpage_api.setAllowScrolling(false, 'down');
More about it on the docs:
https://github.com/alvarotrigo/fullPage.js#setallowscrollingboolean-directions
So, you can use it on a callback such as afterLoad:
afterLoad: function(origin, destination, direction){
var numSections = document.querySelectorAll('.fp-section').length;
// Is the afterload firing for the last section?
if(destination.index === numSections -1){
fullpage_api.setAllowScrolling(false, 'down');
}
// for all other sections, we enable scrolling again in case it was off
else{
fullpage_api.setAllowScrolling(true, 'down');
}
}
Then on the button you can use the method moveTo:
//moving to section 4
fullpage_api.moveTo(4)
More about the method on the docs:
https://github.com/alvarotrigo/fullPage.js#movetosection-slide
I have a number of Panels which, when expanded, show the corresponding questions for that particular 'Category'
The issue I have is, say for example I answer the questions for the 1st panel, the content will scroll down, eventually hiding the panel... fair enough.
However, when I click on the Next Category (Production Area), I need to the page to scroll back up to the first question in the Category, or maybe even just display the selected category at the top of the page.
Is this possible?
Currently, the user has to continually scroll back if when they select the next Category.
You can achieve it using scrollToElement()
var oPage = sap.ui.getCore().byId("pageId"); // you page ID
var oList = sap.ui.getCore().byId("ListId"); // element ID to which it has to scroll
if (oPage && oList) oPage.scrollToElement(oList, 1000);
Execute the above code inside the panel event expand.
you can try to use this control instead which suits your needs
https://sapui5.hana.ondemand.com/#/entity/sap.uxap.ObjectPageLayout
After trying everything, this is what worked for me.
onExpand: function (oEvent) {
if (oEvent.getParameters().expand) {
var focusID = oEvent.getParameter("id");
var elmnt = sap.ui.getCore().byId(focusID);
elmnt.getDomRef().scrollIntoView(true);
I want to make input type="file" becomes available and clicked only when I click on some element, which is also activated it (for example, stylized span).
For this I have the Javascript parameters on span:
onclick="document.getElementById('upload_hidden').Disabled = false;
document.getElementById('upload_hidden').Click();"
But the trouble is that in Firefox only first click removes the input attribute disabled and second - opens the file selection window. In Chrome - all OK: input become enabled and clicked by first span click.
Why, first click in Firefox does not work ? :(
http://jsfiddle.net/ey47G/
P.S. In firefox v21 - all OK. Firefox v25 and v26 - have this trouble.
I could imagine that the script is already ahead when it tries to click the button - but the button is still disabled
var f = document.getElementById('f');
var s = document.getElementById('s');
s.onclick = function () {
f.removeAttribute('disabled');
setTimeout(function(){ f.click(); }, 100); // run the explorer after 100 ms
}
This does work.
http://plnkr.co/edit/9syOfSJHaJ4b3bhRufpv?p=preview
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
Output: http://jsbin.com/APuCOwa/3
Edit: http://jsbin.com/APuCOwa/3/edit
When you have a responsive table in Bootstrap 3, when you are below the 767px break point, the dropdown-menus are not accessible because they add content and the content at that size has an overflow:auto or something, so depending on the location of the menu -- if the table itself doesn't have enough height -- the menu shows up and people won't see it. Plus scrollbars are not visible until you scroll on touch.
As a work around, which I need help with, I fudged together another toggle that doesn't close when clicked off and adds a class to the parent (to add height) when the menu is toggled (you must size the output http://jsbin.com/APuCOwa/3 down below 767px) to see this. The problem is that when the user clicks another toggle while one is open the class added to the parent is removed, tried toggleClass and this thing (which is the same) and it's the same result.
Essentially, when you click a toggle, it opens, adds height to the parent "table-responsive" div wrapper, and when you toggle off it undoes that, so far that's good, but if you click another menu while one is open, that is where I can't figure it out. Since they are all isolated menus, this is confusing to me.
I am not so hot with jQuery.
Output: http://jsbin.com/APuCOwa/3
Edit: http://jsbin.com/APuCOwa/3/edit
BTW: Firefox, at least mine, has issues with jsbin, Chrome does not.
Close all on click and only (re)open it when it wasn't open only:
$(document).ready(function() {
$('.table-responsive .dropdown-toggle').click(function(event){
var open = $(this).hasClass('open');
$('.table-responsive .dropdown-menu').hide('fast');
$(".table-responsive").removeClass("res-drop");
$('.table-responsive .dropdown-toggle').removeClass('open');
if(!open)
{
$(this).siblings('.dropdown-menu').slideToggle('fast');
$(this).parents(".table-responsive").addClass("res-drop");
$(this).addClass('open');
}
});
});
In my case I had dynamic heights so Bass Jobsen solution didn't work properly.
I decided to rely on data attributes to store the current height of parent div e then restore on dropdown close.
Here is my code:
var isOpen = !($(this).parent().hasClass("open"));
var menuHeight = $(this).siblings(".dropdown-menu").height();
var increaseHeightBy = menuHeight * 1.3;
var originalHeight = $(this).closest(".table-responsive").attr('data-original-height');
if (isOpen && !originalHeight) {
originalHeight = $(this).closest(".table-responsive").height();
$(this).closest(".table-responsive").attr('data-original-height', originalHeight);
$(this).closest(".table-responsive").height(originalHeight + increaseHeightBy);
}
if (!isOpen && originalHeight) {
$(this).closest(".table-responsive").height(originalHeight);
$(this).closest(".table-responsive").removeAttr('data-original-height');
}
You can set the dropdown menu to fixed position and close it when the window's resized. Not a perfect solution but it works.
// Responsive tables with dropdown buttons
$('.table-responsive .dropdown-toggle').on('click', function() {
var button = $(this),
menu = button.next('.dropdown-menu');
menu.css({
position: 'fixed',
top: button.offset().top + button.outerHeight() - $(window).scrollTop(),
right: $(window).width() - (button.offset().left + button.outerWidth())
});
$(window).on('scroll', function() {
menu.css({
top: button.offset().top + button.outerHeight() - $(window).scrollTop()
});
});
$(window).on('resize', function() {
$('.dropdown-backdrop').trigger('click');
button.blur();
$(window).off('resize scroll');
});
});
This seems like a really easy question, but I can't seem to find the answer.
Now that toggle() is deprecated for click events, how would I have say a button add DOM elements on the first click, then remove those same DOM elements on the second click?
Also.... how do I remove contents from a div I have inserted content into (using load()) without removing the div itself? Using remove() removes the div.
use empty() to clear an elements inner html
As for the toggle issue, you can toggle a class on the element and test for that class:
$('#myDiv').on('click', function(){
if(! $(this).hasClass('clicked') ){
/* code for first click*/
}else{
/* code for second click*/
}
$(this).toggleClass('clicked')
})
your click would first check for the presence of the dom elements that get added (use an id perhaps).
if $('div#id of the stuff you add')
$('element exists...').remove();
else
$('div#id of where you want to add stuff').add( new code );
You can clear a div contents with:
divSomeDiv.html("");
or
divSomeDiv.empty();