jQuery mobile: Hide virtual keyboard after closing popup - javascript

I'm using jQuery mobile in a project and need a popup with a textarea on it:
<div data-role="popup" id="popupDialog" data-overlay-theme="none" data-theme="a" style="width: 350px; max-width:350px;" class="ui-corner-all" data-dismissible="false">
<button id="dialogCloseButton" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-left">Close</button>
<div data-role="content" class="ui-corner-bottom ui-content" style="text-align: center; margin: auto;">
<textarea id="textArea" data-theme="b" style="resize: none; max-width: 100%; max-height: 150px; width: 100%; height: 150px; padding-bottom: 5px;"></textarea>
<button data-theme="a">Ok</button>
</div>
</div>
I'm opening the popup like this:
$('#popupDialog').popup('open');
When I now enter text in the textarea and close the popup using the button, the virtual keyboard won't hide on my iPad running iOS 6.1.
I tried this hack, which didn't work for me.
When I blur the textarea before closing the popup, the textarea will automatically get the focus again (you can test this on my example site using the "Blur"-button).
Edit: removed link to example.

This works for me:
$('#textArea').blur();
$('#popupDialog').attr("tabindex",-1).focus();

It's pretty self-explanatory. The 2nd line will de-focus all input fields, and it relies on jQuery. I found that calling blur() on the single focused textfield didn't always work. Either one of these lines should work independently, but both of them together cannot be stopped!
var hideKeyboard = function() {
document.activeElement.blur();
$("input").blur();
};

Related

firefox custom video controllers do not show

I`m having an issue with my custom video controller.
When the video is opened in firefox the controllers do not show in fullscreen mode.
I tried everything i found in regards to the topic, but no luck so far.
Here is the html:
<div id="contentContainer" class="border">
<div id="videoStreamed">
<video autoplay="" name="media" src="blob:https://****/f3213f7c-2955-46f6-94d5-e737dc8d619e" title="Customer Centricity" width="100%" height="100%">
Your browser does not support the video tag.
</video>
</div>
<div id="videoController">
<div id="videoProgress">
<div class="progress-bar">
<div id="progress-fill-video" style="width: 7.77856%;">
</div>
</div>
</div>
<div id="playOrPause" class="controllerTabs"><i class="activeController icon-pause"></i></div>
<div id="volume" class="controllerTabs"><i class="activeController icon-mute"></i></div>
<div id="subs" class="controllerTabs"><i class="icon-sub inactiveController"></i></div>
<div id="duration">
<span id="minutes">00</span>:<span id="seconds">12</span>
<span id="total">/ 02:39</span>
</div>
<div id="download" class="controllerTabs"><i class=" icon-download inactiveController"></i></div>
<div id="trascript" class="controllerTabs"><i class=" icon-transcript inactiveController"></i></div>
<div id="fullScreen" class="controllerTabs"><i class=" icon-fullscreen activeController"></i></div>
</div>
</div>
Here is the css :
#videoStreamed {
position: relative;
height: 90%;
width: 100%;
z-index: 1 !important;}
the video itself has the same z-index;
#videoController {
z-index: 2147483647;
position: fixed;
bottom: 0;
width: 100%;
}
That's a wild guess since you didn't shown any js, but I will assume you called Element.requestFullscreen() on your video.
While it works in other browsers, in FF, this will exclude all non descendants of the element on which you called it from being displayed in the fullscreen mode.
I left taking news of the fullscreen API a long time ago, since it was a mess, but at this time specs weren't clear on what should be the correct behavior.
Nevertheless, one thing that works for every browser is to wrap both your video and your controls inside a single container and call requestFullscreen on this container.
Then you will need to style all your elements accordingly in the fullscreen mode with the :fullscreen pseudo-class.
jsfiddle since stacksnippets don't allow fullscreen.
Sounds easy said like that? Well what I omitted is that still today, all browsers don't have a stable version of this API and that you will have to repeat your code like 5 times to deal with vendor-specifics quirks...

Scroll element to top of page by clicking anchor inside element or anywhere inside containing div id

I would like to scroll the page to the top of the e.g. navigation div ID when clicking either any of the links inside the navigation div ID or (if possible) when clicking anywhere into the div ID itself containing the navigation links.
I have researched this and the closest I have come to is jQuery - How to scroll an anchor to the top of the page when clicked? however for some reason it does not seem to work when I try to do this in my example. What am I doing wrong?
I am new to jQuery and medium at html and css (and used inline styling of the divs since I did not want to supply a separate css just for the example).
When I load the html and script from jQuery - How to scroll an anchor to the top of the page when clicked? in Aptana it also does not scroll. Even with a content div above the div class work so that there is space to scroll to at all.
I have included two little paragraphs inside the concerning divs to explain exactly what I mean.
Any help is very much appreciated. Thank you.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$('#scroll_navigation ul li').click(function() {
$('html,body').animate({scrollTop: $(this).offset().top}, 800);
});
</script>
<body>
<div id="logo" style="margin: 0 auto; height: 300px; width: 60%; border: 1px solid #000">Logo</div>
<div id="scroll_navigation" style="margin: 0 auto; width: 40%; border: 4px solid #225599">
<p>Scroll navigation to top of page</p>
<p>Catch any clicks in "#scroll_navigation" to scroll the div id to the top of the page</p>
<div id="navigation">
<div class="container" style="margin: 0 auto; height: 220px; width: 60%; border: 1px solid #000">
<ul>
<p>Catch clicks on anchors to scroll the div id to the top of the page</p>
<li>Portfolio</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div id="content" style="margin: 0 auto; height: 1500px; width: 60%; border: 1px solid #000">Content</div>
</body>
EDIT
Beware this when using scrollTop in Firefox.
Animate scrollTop not working in firefox
jQuery scrollTop - no support for negative values in Mozilla / Firefox
Took me a while to figure out my code was fine but scrollTop was this issue in FF. In this same example the behaviour can also be observed. When scrolling down and making the anchors fixed, FF will scroll up to random positions either 2-4px before or after the target div.
I am now using Scrolld.js to achieve pixel perfect scrolling to the desired points across major browsers. I don't understand how different browser engines can render such a common thing as scrollTop from different (either html or body) inputs as far as I understand and I am new to jQuery. Guess this is not "the fault" of jQuery but how the browser engines render scrollTop.
I dont know if you did, but you have to include jquery to use it.
Another thing would be, that your "click listener" has to be in jqueries document ready function like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#scroll_navigation ul li').on('click', function(){
$('html,body').animate({scrollTop: $(this).offset().top}, 800);
});
});
</script>

How to open a File Dialog or Browse Files Window using Scripts?

I like to show an image or any elements of html and initialize a height to it. When i used a file type of input in html behind of an image like this :
<img src="image.png">
<input type="file" name="image" id="booksimage" style="opacity: 0">
So input element disappeared and when I clicked on image File Open Dialog opened but it works in a height of a normal input element. when I set a height of 100px to input element it dose not work more than.
When I see that problem of html, I decided to Use Javascript or Jquery to solve problem, I searched an find some similar issues like :
How to open a file / browse dialog using javascript?
but solution is for special browsers and firefox doesn't support it.
Is there any other way for open File Browser Dialog by clicking on an image?!
$('img').click(function() {
$('input[type="file"]').click();
});
Unluckily browser don't allow to open the browse file dialog without the specific event triggered by the click on an input tag with type="file" There are some ways to work aorund this, but it won't surely work on every browser you've got.
<style type="text/css">
#file-image {
position: relative;
width: 40px;
height: 40px;
overflow: hidden;
}
#file-image input {
height: 100%;
position: absolute;
top: 0;
right: 0;
-moz-opacity: 0;
filter: alpha(opacity: 0);
opacity: 0;
}
</style>
<div id="file-image">
<input type="file">
<img src="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png" width="40" height="40" />
</div>
This might be a couple of years late, but here's is a way of doing it without any Javascript and it's also compatible with any browser.
<label>
Open file dialog
<input type="file" style="display: none">
</label>
In case you find problems, you may need to use the for attribute in the label pointing to the id of the input.

Stop Iframe page from redirecting

http://kenzshop.com/lightbox/
User types url in input field, and clicks "Go To" button. Page should just view in iframe. But when typing in a url like espn.com the clicking button, page will momentarily display, then the whole page (kenzshop.com/lightbox) will redirect to espn.com.
Also, when I try yahoo.com in the iframe, nothing at all happens. Is something mis-coded here? Or just something within those sites not allowing them to be viewed in iframes?
Also, not sure if it is ok to ask this in same thread, but is there a way of the user clicking the Enter Button on the keyboard creating the same effect as having to click the "Go To" button?
<script type="text/javascript">
<!--//
function urlink(iframe,src){
document.getElementById(iframe).src = src;
}
//-->
</script>
< / head>
<div style="background-image: url('https://s3.amazonaws.com/cloud-host.mobi/preview- iphone4g.png'); width: 327px; height: 730px; padding: 135px 28px 0px 33px; background-repeat: no-repeat;">
<form>
<div style="position:relative; top:9px; left:2px;"><input style="float:left;"type="text" size="40" value="http://" name="url">
<input type="button" onclick="urlink('I1',this.form.url.value)" value="Go To"></div>
</form>
<iframe id="I1" src="" style="height: 489px; width: 327px;" frameborder="0" marginwidth="0" scrolling="yes" width="320" height="240"></iframe>
</div>
Thanks!!
Ken
espn.com probably has some JavaScript to break itself out of an iframe. I'm afraid there's not much you can do there. Most sites do not have this, though.
For the enter button, use a <form> tag with the action parameter. Wrap it around your <input> box.
See http://www.w3schools.com/tags/tag_form.asp for examples.

JQuery .append() - elements lose styling

I'm attempting to add elements to a div container however the elements ignore their css class.
JavaScript
$.each(jobs, function(i, job)
{
var option = '<div class="input"><div class="option">' + job.created +'</div></div>';
$('.options').append(option);
});
Html
<div class="options" style="overflow: scroll; width: 100%; height: 80%; background-color: White; text-align: left;">
<div class="input">
<div class="option">
Hunt Osama.
</div>
</div>
<div class="input">
<div class="option">
Execute without trial.
</div>
</div>
</div>
The elements are successfully appended to the div however the styling information is not acted upon.
EDIT: the classes input and option have no effect on the added elements.
Any hints?
I have tested your code on my machine and it works fine in IE & Firefox if I apply CSS to the children.
In my css file I have added the following declaration:
.option
{
font-weight:bold !important;
color: red;
}
This issue ended up being specific to WebKit/Qt on the windows mobile platform. It doesn't appear during a Android/WebKit example.
Sorry I have no further details on the cause of the problem.
Thanks for all the help.

Categories

Resources