I am using autoheight:false to get rid of the scrolls and (what I think is an odd default) the fixed height of accordion content. However, when you click to open the next header, the content above(or below) collapses and your active header content scrolls out of view or opens in the middle of the content. I understand why this happens; however is there a way to keep your current (the "active") header in place so the content doesn't jump around?
Here is my code:
$(function() {
$( "#accordion" ).accordion({
heightStyle: "content",
autoHeight: false
})
Related
I am using fancyBox to display an HTML element as a popup (inline type).
That works fine, but the user is able to move the popup vertically with the mouse or with touch.
This behaviour seems to be standard (check the HTML example on https://fancyapps.com/fancybox/3/).
Question: is there a way to prevent this vertical movement?
Setting the modal option to true achieves this, but then the close button is removed as well, which is not what I want.
Thanks, Willem
Use touch/vertical option for that:
touch: {
vertical: true, // Allow to drag content vertically
momentum: true // Continue movement after releasing mouse/touch when panning
},
I've got an unusual situation where I want to hide the content of a notebook page until the notebook tab is clicked. I basically want a state where only the notebook tabs are visible.
The problem is, if I hide a notebook page, then its tab is also hidden. I've tried forcing the height of the content to zero (using set_size_request) but that doesn't do it (because set_size_request sets the min height, not the maximum.
How can I hide the content of the pages without the tabs disappearing?
You could put it in a single-child parent widget, such as a Gtk::Alignment, and hide the child, but not the parent.
Or maybe Gtk::Stack would be simpler:
https://developer.gnome.org/gtk3/stable/GtkStack.html
I am building a site that has a header with a fixed position which contains a select menu. The header is supposed to stay locked to the top of the screen due to the position:fixed in css. However, when clicking the select menu in mobile safari on iphone, the header no longer stays locked to the top when the ios select menu opens. It seems that ios is centering the div with the select menu onto the visible area of the screen above the menu. This doesn't happen when the page is scrolled to the top, but when the address bar is not visible, it "breaks" like so. Haven't found any other answers, maybe I'm asking the question the wrong way. I can't post links to code yet, any help is appreciated.
http://selfconstruc.tv/menu-open.PNG
http://selfconstruc.tv/menu-closed.PNG
For now I don't think there is a perfect solution to deal with the focus jumping.
In my case I hide the header on focus in and show again in focus out and it works well.
I don't know if in your case this could be a workaround.
You can try this:
// detect ios device
if(navigator.userAgent.match(/(iPad|iPhone|iPod)/gi)){
// hide header on focus in and show on focus out
jQuery("#content").focusin(function(){
jQuery('#your-header-id').hide();
})
jQuery("#content").focusout(function(){
jQuery('your-header-id').show();
})
}
The #content is a div where you should have all your controls, the jQuery .focusin() detects the focus event on parent elements, so every control will trigger the focus event. You hide the header on focus and show after that. Hope this helps!
I have an empty div to which data may be appended dynamically through a ajax call on button click. I have Jscroll pane tagged to that div and its not working. The div is without scroll. But the scroll works when I put only a static data to that div. Please help me out.
You need to reinitialize the scrollbar whenever the content is updated. See an example here http://jscrollpane.kelvinluck.com/dynamic_content.html
There's an issue when accessing my website (http://www.zero11arquitetura.com.br) on iPad or iPhone with iOS 5 that I can´t fix. When window is scrolled thru code every position:fixed elements click event stop working. Can you please help me ?
This site structure uses a top menu div and a header div with position: fixed css. When user clicks on a menu item window scrolls horizontally until it reaches its target.
Clicking in the menu item is done by jQuery click method on each img tag and scrolling is done by jQuery animate method ($("html:not(:animated),body").animate({ scrollLeft: varDestino }, 1500);)
When page is loaded the menu works just as I intended but, after it scrolls thru menu, and I try to click on another menu item nothing happens. The strangest thing is that everything works again when user manually scrolls the window (by finger).
It looks like that by changing window scroll position by code (jQuery calls window.scroll) fixed elements lost its clickable position references.
Is there any workaround for this ?
Thanks,
I've solved this with a trick. I've created invisible divs over the menu items that changes it's position when page scrolls (simulating afixed element over the real position: fixed menu items). When user clicks or hover over those invisble divs the real ones are called