Jquery's tabs work by setting the nonactive tabs to be "display:none". My question is, is there a way to make it display off the screen (through perhaps absolute) away, say, -999999 pixels from the screen rather than having it be display:none? I have an application that resets whenever the division's width/height are changed, which means that the application is reset each time when the display is set to none.
Thanks in advance.
How to stop SWF inside of a jQuery UI tab from reloading
This solved my question perfectly. Make sure to use tab-panels as suggested.
Related
Ionic Version: 1.x
Platform: all
I have an ionic app which uses an ionic popover. However, when the popover is active (open), I can no longer interact with things in the background, for example scroll down my list of items. I have tried looking for existing answers for this question, but did not see the question being asked.
The popover itself does not have to be bound to any active element on the page, since it currently has position:fixed and will always appear in the same position.
So basically the question is, is there a way to prevent the popover from preventing me interacting with everything in the background?
I found this codepen someone put up:
https://codepen.io/ionic/pen/GpCst
This may do the trick?
.popover-backdrop {
display:none;
}
I have found an answer, however, not sure if there is a better way to do this, perhaps an option that turns interacting with the background on and off, but for now the answer seems to be as follows:
Ensure the .popover-backdrop class is the same size and position (height and top margin in my case) as the actual fixed popover element. The default is height 100%.
Ensure that for the .popover-open class (applied to the body) you disable pointer-events: none;
Keep in mind that this will change the behaviour where if you click outside of the popover that it will close it by default. So in ionic, I will have to make sure that on the event where I leave the view that closes the popup if active.
In my App, I am creating the dynamic pages, in which I given the css property to page container as overflow-y:auto. all works fine,
the problem is whenever the page loads, the page height exceeds and the height of the contaienr, the scroll works, but the scroll bar placed in the end of page. so i am seeing the end of the content of the container instead of the top.
is there any way to sort this issue without using script? if so any one suggest me the correct way please?
or do I need to add any special css property in the container?
any one advice me the correct approach please?
Update
This is happening only with Chrome browser. ie and firefox behaves correctly.
try below combination
overflow-y:auto
position:relative
by adjusting position to relative your scroll bar will remains at what you want.
hope it will help for you the same way i am doing this thing its works for me
i have a question about automatically resizing childcontrols of a panel if the panel change the width or the height. I use Asp.net (vb.net). Is there an extender or a property of the panel which allows this?
Or is there another panel which has the possiblity to auto resize their controls?
Or a javascript (jquery) plugin which allows resizing. I know the jquery.ui resiziable plugin, but i don't know if the plugin allows me to resize the childrencontrols when i change the size of the main panel with textboxes for example.
So i want to set the width for my button to 100px and add it to my panel like
main_panel.controls.add(btn)
On my testpage i have two textboxes which allows me to resize the panel, the main panel with the button as his childrencontrol and another button for submiting the panelresizing.
i hope anyone understand me, my english is waste(:
There multiple solutions to your problem depending on your knowledge/requirements.
you can set a fixed size in when you add the controls to the panel
(with .NET)
you can set up flexible rules with css which automatically make the controls inside the div or even set them all the same fixed size the div will scale
you can do this with script as well, target all the elements and make them the same size
Depending on your need (eg does the user do the resizing? or is it window resizing?) I find it the easiest to set up solution 2 and then add an event listener when needed. For instance when the project requires re-sizing when the user sizes his browser window.
Just be careful though the window resize event is very "heavy" and gets triggered a lot so use it only when absolutely needed
English is not my native tongue as well so I hope I understood your question; if not just shoot :)
(try to avoid option 1, it is the least flexible and scalable)
I'm using iScroll4 to make a certain element scrollable in my webpage but it snaps back to the original position once you release the mouse/touch. How do I make it stay instead?
I think that I have figured out why this happens. I had iscroll4 working in a Phonegap app that I was building, and then broke it after changing some CSS. At the time, I didn't realize what I had done and I spent a long time hunting for a Javascript solution.
Finally, I noticed that when I tested it in a browser, there was a scrollbar for the list where I was using iscroll4. And when I tried to scroll, the scrollbar thumb changed size. That is why it was snapping back. The browser made the wrapper div big enough to hold the entire list, so whenever I tried to scroll, there was no hidden data so I triggered the pull-up event and then the browser resized the div.
I had to change the CSS to include overflow:hidden and it started to work again. I tried overflow:hidden on the ul tag and the scroller div but that didn't work. It has to be on the wrapper div.
I have a scrollbar that has to follow some timeline. It is being constantly scrolled with .scrollLeft using setInterval.
I still want the user to be able to naturally take control and just drag the scrollbar away. If I can detect the user did that, I would just turn off the setInterval timer and leave the control to the user until he explicitly turns the auto scroll back on.
Is there a way to differentiate the user scroll event, from the scroll created by .scrollLeft?
You can set a flag before changing scrollLeft and clear it afterwards, then check the flag in the scroll event.
Since Javascript is run on the UI thread, it is not possible for the user to scroll while your code is running.
One alternative is to give up using a scroll-bar at all and do it using CSS and a jQuery slider control. This also gives you the option of making it look more like a time-line. you can set the scroller elements to whatever CSS you want.
There are a few out there, but it's not too hard to roll-your-own using a jQuery draggable control and constraining one axis inside a long, narrow container DIV.