I'm building a single page, offline html5 web application using jquery mobile, backbone, underscore and tbd templating engine.
I'd like to create a lockscreen that looks similar to the native iPhone lockscreen. Before I go reinvent the wheel has anyone seen anything like this before? I haven't been able to find an example of this.
Thanks!
Edit: Oh no, it's an old question!
Add a fixed-position, hidden div to your page. When you need to activate the lock screen, use jQuery to programmatically show it:
CSS
div#lockscreen {
width: 0;
height: 0;
position: fixed;
top: 0;
left: 0;
display: none;
}
jQuery
$(document).ready(function() {
//hypothetical activation control
$("#lock").click(function() {
$("#lockscreen").css("width", "100%");
$("#lockscreen").css("height", "100%");
$("#lockscreen").css("z-index", "1000");
//or dynamically generate z-index value
$("#lockscreen").fadeIn();
});
});
Well it's been dredged up now, so I might aswell add this. Use <input type="text" pattern="[0-9]*" /> on a text field to get a numeric input. Not quite the same, but easier than using a full keyboard, and easier than coding the whole keypad yourself.
Related
I have the following problem, one of our customers wants to have a certain animated graphic on one of their pages.
graphic
link
It's basically a metal nut that u can turn with your mouse wheel to see what services they offer regarding production.
On the old website they had, it implemented like this
Nicely, fullscreen with scrolling functionality.
However, when I try to use an iframe to implement the graphic it looks like this (scroll to the bottom to see the graphic)
The code I use for the iframe is the following:
<iframe class="fuenfeck" src="https://sinerefl.sirv.com/qualicut/qualicut.spin">
</iframe>
I already tried to add width attribute but it only makes the container larger, not the graphic. I'm new to the whole iframe stuff, so I really need your help =)
Thanks and regards!
If you observe their css you will find somthing like that, that is useful for the iframe to be adaptative :
.responsive-iframe {
position: relative;
width: 100%;
padding-bottom: 62.5%;
}
.responsive-iframe iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="responsive-iframe"><iframe class="fuenfeck" src="https://sinerefl.sirv.com/qualicut/qualicut.spin">
</iframe>
</div>
any particular reason you want to use an iFrame? A much better way of embedding a Sirv Spin is to follow these instructions - https://sirv.com/help/articles/sirv-spin/#embed-a-360-spin
<script src="https://scripts.sirv.com/sirv.js"></script>
<div class="Sirv" data-src="https://sinerefl.sirv.com/qualicut/qualicut.spin"></div>
There's also a WordPress plugin - https://wordpress.org/plugins/sirv/ which is Divi compatible
I am trying to hide a modal, but the modal is going away and the backdrop is staying put and not allowing me to click anything. I have to refresh the entire page for it to work
Here is my code:
$("#AddNewOrganizationModal").modal('hide');
It seems to work in all my other modals, but I cannot pin point why this one is not being closed:
Here is the class that is showing up still:
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #1a1a1a;
}
Is there a way to remove this class just in general?
This ONLY happens when I'm on the development web site. Locally it works fine and closes without any issues.
Could something be caching on azure dev ops?
The way that Bootstrap modals are structured, the backdrop is part of the modal container.
Here's some pseudo-code to demonstrate what I mean:
<modal-wrapper>
<modal-backdrop>
<modal-container>
content of modal
</modal-container>
</modal-backdrop>
</modal-wrapper>
The element to which you want to apply the hide function is <modal-wrapper>. When you hide that, the <modal-backdrop> will also be hidden.
You are probably hiding <modal-container> instead, and so <modal-backdrop> is still displayed.
I've encountered the same issue and had to manually force the backdrop to hide during the modal hidden event. Code similar to this:
$('#myModal').on('hidden.bs.modal', function (e) {
$('.modal-backdrop').hide();
});
This ended up being the answer:
$('.modal-backdrop').fadeOut(150);
I'm trying to add a google maps autocomplete input to my ionic app. It works pretty well except when I scroll. As shown on the image:
So I tried different things like changing the position of .pac-container but it doesn't solve the problem.
When I inspect the page, it seems that the results container loads at the end of the page, so it's not easy to make the block stick to the input bar.
I already searched everywhere and didn't fidn any suitable solution ? Does someone have an idea how to do it ?
(It's actually just a simple code like this:
function initialize() {
var options = {componentRestrictions: {country: 'uk'}, types: ['geocode']}
new google.maps.places.Autocomplete(
(document.getElementById('autocomplete')),
options
);
}
initialize();
jsfiddle
Thanks
I have the same problem. My solution was:
$('#inputContainer').scroll(function(){
//Set new top to autocomplete dropdown
newTop = $('#autocompleteInput').offset().top + $('#autocompleteInput').outerHeight();
$('.pac-container').css('top', newTop + 'px');
});
This update the dropdown position when container scrolls.
I just encountered the same problem when I was implementing the Autocomplete on a form inside a scrollable modal. If you only have one Autocomplete object then the solution is relatively easy.
First make sure that your element's parent has a relative position.
Then you need to select the .pac-container and append it to the parent.
$("#autocomplete").parent()
.css({position: "relative"})
.append(".pac-container");
Finally set the .pac-container left and top position to be below your element. This needs to be done in a stylesheet with the !important declaration to ensure it overrides the inline styles set by Google's code.
// these values will need to be calculated based on your layout
.pac-container {
top: 40px !important;
left: 0px !important;
}
This obviously wont work if you have multiple Autocomplete objects on a single page. Luckily I figured out a way to handle that scenario and recently published it in a jQuery plugin designed to make autocompleting address forms a breeze.
I got the solution check the example no issue with position bug when scroll
function initAutocomplete() {
//....codes...
//....add this code just before close function...
setTimeout(function(){
$(".pac-container").prependTo("#mapMoveHere");
}, 300);
}
https://codepen.io/gmkhussain/pen/qPpryg
In my case, I had to set the css as html,body{overflow-x:visible;} to make the pac-container fixed to the input field.
I was now able to reproduce the problem, the solution is simply adding position: relative to your wrapper box and position: absolute to your #autocomplete input.
I got the solution checking the example provided by the Google team.
I've updated your fiddle to match the solution, but it goes like this:
Your updated CSS:
.box {
position: relative;
height: 200vh;
}
#autocomplete {
width:350px;
position: absolute;
}
Since my input field is inside "ion-content", I implemented Nicolas Pennesi
's answer with ion-content's method:
onScroll($event) {
// his code here
}
I actually want to accomplish the opposite of:
To avoid screen-reader text inside the button
For WCAG compliance, any HTML control (i.e. button) that opens a new browser window needs the screen reader to say so when the button gets focus. However, I certainly don't want:
<button>Get Help ,opens in a new browser window</button>
The button text should just be "Get Help", but I need JAWS to verbalize more... any workable approaches out there for this?
Many thanks, -Pete
(FYI to moderators: The existing "JAWS" tag refers to "Java API for WordNet Searching"... not the screen reader "Job Access With Speech". We could probably use a new tag out there - I don't think I currently have the "stack overflow cred" to do that. Thanks!)
Essentially you want to include the text but hide it from view.
<button>Get Help<span class="at">, opens in a new browser window</span></button>
"at" for "access technology".
With associated CSS of either:
.at {
position:absolute;
left: -9999px;
}
or, if you are concerned with horizontal scroll-bars in right-to-left languages or performance on mobile then you can use:
.at {
position: absolute;
clip: rect(1px,1px,1px,1px);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;
display: block;
}
Read more at: http://webaim.org/techniques/css/invisiblecontent/
I should point out, people with other disabilities should be able to tell it opens in a new window as well. Perhaps consider adding a 'new window' icon?
I believe you need to use ABBR tag do add a description. You can see something here
How about simply using aria-haspopup="true" as per the W3C?
Basically:
<button aria-haspopup="true">Get help</button>
This is all being done in an ASP.NET web forms application:
I need a modal popup that will show the user a preview of images that match a search criteria (e.g. they search for "dog" and the popup shows them all dog-related pictures). The search results shouldn't be too long, but the popup should support the ability to scroll if necessary. I also need to capture which image they selected and send that info back to the calling page.
I've taken a look at some of the options out there and am having a hard time deciding on which one to use. Any suggestions?
i prefer the use of jquery because it doesnt require the use of any server-side computations. also if the app ever ported to another technology other than asp.net it will still most likely work.
I'm happy with jqModal, the plugin it's really minimalistic (basically 2.97kb of JS, and 496bytes of css) and works great...
don't use any modal plugins, create your own.
<div id="modal"></div>
modal { position: absolute; top: 200px; left: 200px; z-index: 12; width: 200px; height: 100px; background: red; color: blue; }
Then you can have some javascript on it, I recommend jquery's draggable, and then put some element that you can click on it so it disappears.
Voilà!!!
I've been quite happy with the jQuery plug-in Simple Modal.
I'd say go with ours; Ajax Calendar Starter-Kit (click the button to the lower left corner) but then again I am definitely biased...