I develop a mobile webpage and I use the swiper.js to achieve slide between 2 pages. But every page has some input textfield for users input their username and passwd. And I found the swiper become useless over input area, but it is normal in other area like button and so on. Now, I want to achieve that if I click on the input area, then I can input something I want, but if I want to slide the page, I can also slide anywhere I want.
Related
Is it possible to press and hold down (depress) two or more html buttons simultaneously on a touch screen with button background changing colour to red to indicate the pressed state? When the button or buttons are released, they should change back to their ordinary background colour.
I'm making a html & javascript game that fires bullets at a speed dependent on how long you hold down the buttons. I can change the colour of a single button's background using CSS as here:
How to change color of button in active state using inline CSS?
I'm wondering if it's possible to achieve the above goals using html buttons or if I should make my own custom sort of button based on, say, html labels.
The ideal solution would depress a button when touched and held or when a number key on the keyboard is pressed and held.
So for example, button one would show a pressed state on a desktop while the user presses the 1 keyboard button or presses the html button on the screen with the mouse. Or a mobile phone or tablet user would press button one when they touch the button on the screen and hold it down. But I want this feature on two or more buttons.
Thanks.
PS: The button's automatic text selection can be disabled using this technique:
Prevent text selection from <button> element
I have a simple extjs form, where all the fields look like plain text when rendered.
When user hovers over the field, i need to show a edit icon (which i am thinking would be a tooltip) next to the field (indicating that the field is editable). And when user clicks on it, the field will get focus and made editable.
Is tooltip the right component ? If not, how can i achieve this.
Thanks
A tooltip would be a bad approach - mostly because if the person mouses away from the field, the tooltip would vanish.
A simpler approach would be to include the edit icon at all times, inside the same container as the field. The edit icon should be invisible normally. Then, when the person moves the mouse into the container, make the icon visible. On mouse-exit from the container, make the icon invisible again.
I want a image gallery similar to the design as show in fiddle example. It has been customized to look more what we are looking for but i have two issue with this right now
Popup is not aligned in the middle of the page. i tried changing few properties but that didnt work
How can i add working Next Prev button functionality to this gallery so that users dont have to click each time to view the next phone. I had looked at other galleries but each had one of the other problem when i tried to customize them.
I had tried to customize this gallery but i had same it i need to show image in a fixed box 600x300 pixel with image on left & text on right of the image.
I also tried to modify Magnific popup almost change the script to work but this also had an issue as it always start the galley from first image itself irrespective of which image users click on http://codepen.io/anon/pen/LvFxH
I have a content-editable div. So it basically functions like a text editor. I have a toolbar of my own which has different buttons. Now when the user types some text in an iPad and then selects the text a small system generated menu pops up which has options like cut copy paste etc. Now this hides some of my toolbar button. So what i want to know is that is there any way that i can decide the position of this menu? I would not like to stop the menu from appearing but just reposition it. Please Help!!!!!!!!!
So, the scenario is that I have a webpage with two divs, one main div and a sliding div panel implemented using mmenu, which appears on a button click from the main div. And now I have a text box on the right sliding panel, on which I am trying to use the datepicker widget (also tried the datetimepicker widget - http://trentrichardson.com/examples/timepicker/).
Now, the problem is that when I click on the text box and the datepicker/datetimepicker widget appears but not on top of the text box but it appears at a distance on the main div. It seems that if I have the right panel clicked and then I hover over the widget, then also the widget does not seem to show the on hover button color changes, but if i click on the main div and then hover over the datepicker widget, then all the changes expected on hover occurs. So, it seems that the datepicker widget is drawn over the main div.
I have been trying to debug this for hours now, can anyone think of any reason why this might be happening and how to make the widget appear on top of the textbox in the sliding div and not on the main div.