How to immediately zoom in to modal form on mobile browser - css

When users click on a button on my website, a Bootstrap modal form pops up. For desktop users, the size is fine (it takes up say a quarter of the page width). However, on a mobile browser, it is too small to see. When you tap on the modal form on a mobile browser, though, it will then zoom in on the form and look nice.
My question is whether it's possible to zoom in on the modal form immediately after the user taps the button (instead of having to tap the button and then tapping inside the modal form). I'd rather be able to zoom in rather than adjusting the CSS for this modal form using media queries.

Related

how to control the size of a popup box that chrome adds to input type emails in my code for mobile only?

how to control the size of a popup box that chrome adds to input type emails in my code for mobile-only?
I have a form with an input, type email.
when my user starts typing, chrome opens a popup with options from history/cache.
I need to limit the height of this popup as it overlaps the mobile keyboard.

Wistia.com video is not getting closed after clicking on close button in chrome browser

Video popup close button is not working in chrome browser.
Given: When clicking “watch” on a page for a Wistia embedded video
When: You click the “X” to close the video modal window
Then: The video continues to play in the background even though it is no longer visible. Issue is comming chrome browser only.
This is likely true for all Wistia embedded videos that open in a modal window.
I want it should close the video completely after clicking on close button
Sounds like the element containing the video is not properly removed.
Make sure to remove the embedded video directly and/or use a javascript trigger to pause it.

Facebook Like button popup position

I have an issue regarding the popup position of facebook like button. When a user likes he will get a popup where he can type some text and confirm or decline the like. It's all perfectly clear.
Usually I put my like button plugin in the footer and I have no issue with that. User comes in, clicks like, popup appears, user scrolls a bit to see popup and all is well.
My problem arises from the fact I use parallax theme so when the user presses like page will increase its height to accommodate this popup and suddenly I can see the images from the parallax. This is ugly!
Please check the page here to see what I am talking about.
Is there a way to force this popup to open above the like button?
I didn't check it properly but why don't you try to make the position: relative where you put the fb like button and see your luck.

Bootstrap : trigger dropdown from toggled button

I have a responsive layout where the desktop view shows search, logo, login. In the xs/mobile view I would like the search and login to collapse into buttons. I can get this layout working just fine. The issue is that in the desktop view, I have a Search Options link that opens a popover with tabbed search forms. I'd like to still have that once you click the collapsed search button. My issue is that the popover is being created inside the tag instead of after it.
How can I set it up so that there is one div holding the search options that can be displayed from either the desktop view (search bar, Go button, search options link) as well as the mobile view (just a button with a search icon).
I am not tied to the popover- I just liked the look of it and I am not sure how to deal with the data-toggle as it currently is set to "collapse" and it seems I might need it to be able to also somehow be set to "dropdown."
Hopefully there is an easier/better way to do this!

Open a Popup window without any close button

I have a webhierarchicaldatagrid and its first column is a template column which is a hyperlink. So onmouseover on the data of that column I want a small popup window to be open right next to that data so that user can drag the mouse on that popup window. The window contains few links which on click will navigate to another page. I want to know how to get the popup window to be open right next to the data and also how to keep it open only when the mouse is on it. as soon as the mouse is not on the popup I want the popup to close.
qTip is a pretty popular jQuery plugin that can do what you are wanting. Here is the demo page for the type of functionality you are describing:
Demo Fixed tooltips on hover
Here is another link, with 30 popular tooltip plugins:
30 Stylish jQuery Tooltip Plugins For Catchy Designs

Resources