I have a div with contenteditable="true". How can I set focus on this div via javascript(if it possible on pure js, without jquery)?
Prior to iOS 6 this wasn't possible, but thankfully they've changed that. You can't do it in general for a website, but if you are embedding a UIWebView in your application you can do it now:
UIWebView *webView = [[UIWebView alloc] initWithFrame:self.view.bounds];
webView.keyboardDisplayRequiresUserAction = NO;
Then your element.focus() will work and bring up the keyboard as desired.
http://developer.apple.com/library/ios/#documentation/UIKit/Reference/UIWebView_Class/Reference/Reference.html#//apple_ref/occ/instp/UIWebView/keyboardDisplayRequiresUserAction
More info on what changed with iOS 6 & WebKit:
http://developer.apple.com/library/ios/#releasenotes/General/RN-iOSSDK-6_0/_index.html#//apple_ref/doc/uid/TP40012166-CH1-SW19
supposing the id of the contenteditable div is 'editableDiv',
document.getElementById('editableDiv').focus();
**Updates
Could you try with something inside the div?
<script>
function showKeyboard() {
document.getElementById('content').focus();
}
</script>
<body onLoad="showKeyboard()">
<div id="content" contenteditable="true" height="1000"> </div>
</body>
It is impossible in iOS now :( https://github.com/jquery/jquery-mobile/issues/3016
Related
The goal is to have just the div with id="yourdiv" instead of the whole page. It works in Windows OS with Chrome but it does not work in iPad with Chrome which is my end goal.
The Script
function printContent(el){
var restorepage = $('body').html();
var printcontent = $('#' + el).clone();
$('body').empty().html(printcontent);
window.print();
$('body').html(restorepage);
The Button after some basic page example html
<div>
<p>whatever don't print this</p>
</div>
<div id="yourdiv">
<p>print this only</p>
</div>
<button id="print" onclick="printContent('yourdiv');" >Print</button>
Found a solution with another post that works in iPad with Chrome browser.
Print <div id="printarea"></div> only?
The solution from Hardik Thaker is the one that works for this. Though if you dont know you'll have to look up how to add in css to have it pull page styling.
I've written some basic Javascript code to work with the videos on my website. Basically I have embedded video content, placed a transparent and clickable div over the video that when hovered over will play the video behind it, then pause when the mouse is moved away. It works flawlessly on Chrome and Safari (not tested IE, I work on a Mac) but not at all on Firefox, the videos do not play. I've searched here and other places for a reason why, but haven't been able to find anything. I've only started playing with Javascript the last couple of weeks so I wouldn't be surprised if I've missed something obvious!
<div class="sectionWrapper">
<a href="http://weathereddown.co.uk">
<div id="sales-section" class="video-block" onmouseover="playVideo1()" onmouseout="playVideo1()"></div>
</a>
<div class="videoWrapper">
<div id="wistia_92lscndvjx" class="wistia_embed" style="width:900px;height:506px;"> </div>
</div>
<script charset="ISO-8859-1" src="//fast.wistia.com/assets/external/E-v1.js"></script>
<script>
wistiaEmbed = Wistia.embed("92lscndvjx", {
videoFoam: true
});
</script>
<script type="text/javascript">
var open = false;
function playVideo1() {
open = !open
if (open == true) {
document.getElementById('wistia_8').play();
}
else {
document.getElementById('wistia_8').pause();
}
}
</script>
</div>
The Id references ('wistia_8') are correct, they refer to the code automatically generated on the page by the Wistia embed code.
Try using the same methods as the W3Schools site but instead of hooking up the buttons use your mouseover mouseout events instead!
Here
Hope this helps!
I've been trying to figure out how to toggle a Div in Android Webview, like this http://jsfiddle.net/Z9f2b/
this is my Android code but doesn't toggle at all, can someone explain what I'm doing wrong? thanks:
wv = (WebView) findViewById(R.id.webView1);
WebSettings webSettings = wv.getSettings();
wv.setWebViewClient(new WebViewClient());
wv.getSettings().setLoadWithOverviewMode(true);
wv.getSettings().setUseWideViewPort(true);
wv.getSettings().setDisplayZoomControls(false);
wv.getSettings().setBuiltInZoomControls(false);
wv.getSettings().setSupportZoom (false);
wv.getSettings().setJavaScriptEnabled(true);
webSettings.setBuiltInZoomControls(true);
String script = "$('#liked').on('click', function() {$('#liked').hide();$('#notliked').show();});$('#notliked').on('click', function() {$('#liked').show();$('#notliked').hide();});";
html = "<div id='liked' style='float:left;display:none; height:100px; width:100px; background-color:blue'>1</div><div id='notliked' style="float:left;height:100px; width:100px; background-color:red">2</div>";
String summary = "<html>"+script+"<body>"+html+"</body></html>";
wv.loadUrl("about:blank");
wv.loadData(summary, "text/html", null);
Try wrapping your javascript in <script> tags.
Also, you need to wrap the javascript that you have in a call to $(window).load so the handlers get registered when the DOM is ready.
Additionally, you need to link to a version of the JQuery library.
Are you sure you need JQuery for this? You could write it in standard javascript very simply with an onclick handler on the div... something like:
<div id='liked' style='float:left;display:none; height:100px; width:100px; background-color:blue' onclick="document.getElementById('notliked').style.display='block'; document.getElementById('liked').style.display='none';">1</div>
<div id='notliked' style="float:left;height:100px; width:100px; background-color:red; disply:block" onclick=" document.getElementById('liked').style.display='block'; document.getElementById('notliked').style.display='none';">2</div>
Try loading HTML data before insertion of script. Javascript can be inserted after HTML is loaded into web view. This is the better idea. So your code should probably go like this:
String summary = "<html><body>"+html+"</body></html>";
wv.loadUrl("about:blank");
wv.loadData(summary, "text/html", null);
and followed by:
wv.loadUrl("javascript:"+script);
This will insert javascript onto current web page and you dont even need to take care that where it has to be inserted and how. Webview will take care of it.
I chose Swipebox as my lightbox because the requirements that I want is that it is swipable in mobile devices ad is responsive.
I mainly used this for images. However, I have a use case where I want to use Swipebox to show HTML.
Can this be done?
If this feature is not supported by Swipebox, are there any alternatives that support the featureset that I am looking for(swipeable + responsive + can show HTML)?
Swipebox can display inline content. Probably is not documented but you can view it in this issue answer:
https://github.com/brutaldesign/swipebox/issues/248
...
...
<div style="display: none">
<div id="slide1">Slide 1 Content</div>
<div id="slide2">Slide 2 Content</div>
</div>
I use the option "afterOpen: function () {}" clean the content of swipebox and put my content there. Here is my code:
var html = $('the HTML');
$('.swipebox').swipebox({
afterOpen: function () {
$('#swipebox-slider').empty();
$('#swipebox-slider').append(html);
}
});
I found this one (bxSlider) but I have not tried it yet. It claims to support what you need.
Perhaps your CSS isnt loaded correctly.
Check to make sure that you have the following code within your head:
<link rel="stylesheet" href="source/swipebox.css"/>
Hope this helps,
#_Sub
First just let me say I'm open to ideas on a different approach altogether.
I have and iframe as such:
<div id="testloadlogin">
<iframe src="../security/login.aspx" width="400" height="500"
scrolling="auto" frameborder="1">
[Your user agent does not support frames or is currently configured
not to display frames. However, you may visit
the related document.]
</iframe>
</div>
The page being loaded with the iframe has a div called loginInnerBox. I only want to display the loginInnerBox and everything inside of it.
Any ideas on how to do this? I was thinking of using Jquery or javascript of some kind to remove everything else on the page loaded by the iframe, not sure how to access that though...
Just to be clear I want everything on my page outside of the iframe to remain intact. I want the equivalent of saying $.('testloadlogin').load('../security/login.aspx' #loginInnerBox) which would just get loginInnerBox's html and place it in the testloadlogin div. However I need the back-end processing from the other page which is supported by iframe, but not by the Jquery load.
The markup of the page loaded by the iframe is
<body>
<div>
</div>.......
<div class="AspNet-Login" id="ctl00_CLPMainContent_Login1">
<div id="loginInnerBox">
<div id="loginCreds">
<table>
</table>
</div>
</div>
</div>
<div>
</div>....
</body>
Do you need more information than that?
I tried this, it had no effect:
<div class="ui-corner-all" id="RefRes">
<div id="testloadlogin">
<iframe onload="javascript:loadlogin()" id="loginiframe" src="../security/login.aspx"
scrolling="auto" frameborder="1">
[Your user agent does not support frames or is currently configured
not to display frames. However, you may visit
the related document.]
</iframe>
</div>
</div>
<script type="text/javascript">
function loadlogin() {
$('<body>*', this.contentWindow.document).not('#ctl00_CLPMainContent_Login1').hide();
}
</script>
With jQuery, you can load not just the contents of a URL, but a specific CSS selector from within that URL. This would be a much cleaner approach. It's like this.
$("#area").load("something.html #content");
Via CSS Tricks
$("iframe").contents().find("*:not(#loginInnerBox)").remove();
Be aware this would only work on iframes loaded from the same domain (same origin policy)
EDIT: Probably this removes children of loginInnerBox as well. In that case you could try to clone it before:
var iframe = $("iframe").contents(),
loginBox = iframe.find("#loginInnerBox").clone();
iframe.find("*").remove();
iframe.append(loginBox);
Something like that..
Add this to the <iframe>-elememt:
onload="$('body>*',this.contentWindow.document).not('#ctl00_CLPMainContent_Login1').hide();"
it will hide every child of the body except #ctl00_CLPMainContent_Login1
If #ctl00_CLPMainContent_Login1 contains more than the loginbox, you have to use the suggestion using clone() posted by pex.