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.
Related
So I was attempting to strip down some mark.js example code and have come across some incredibly quirky behavior
The following code works as it looks (a simple HTML example then highlighted by a mark.js instanse)
<!DOCTYPE html>
<h> text in a header </h>
<div class="panel panel-default">
<div class="panel-body context">
<p>
text ā text
</p>
</div>
</div>
<div>
<p> text in a plain div </p>
</div>
<script src="mark.js"></script>
<script>
console.log("in our script");
var instance = new Mark(document.querySelector("body"));
instance.mark("text", {
"iframes": true,
});
</script>
Now when I remove the 'ā' (which is assumed to be nothing but another character within the ) it breaks the example and instances of 'text' are no longer highlighted
The bigger context of why I am attemping this is to use mark.js in a chrome extension, which I am able to get it in an extension (in content.js) and properly add "mark.js" to the manifest such that the extension is able to create an instance, but I was not seeing it highlight on pages (like when this example is broken)
Any tips / insight as to what's going on here and how it may help my bigger goal of integrating mark.js into a chrome extension?
Thanks!
I'm having to write a scraper using nightmare. On one the links the website is using a div for the user to navigate away from the page. In order to follow the navigation flow, I would like my nightmare instance to "click" the div. However, nothing happens when I'm on chrome, and obtain the element and call click. Unlike Firefox, where this works fine.
The script
let elem = document.getElementByClassName('is-a-div-element')[0];
elem.click()
Works fine on firefox, nothing happens on chrome! Any ideas? The site causing issue is using React. Not sure if that helps or not.
The HTML structure looks like this.
<div class="nav-element">
<div class="is-a-div-element">
<div roll="button">
<span roll="presentation">Hello World</span>
<span class="Exit">Exit</span>
</div>
</div>
</div>
I'm not sure how Nightmare relates to this issue since you mention Chrome and Firefox and appear to be using standard browser Javascript, but I'll try answer anyway.
Since you've edited your question with more specific information I'll edit my answer. Now the main issue I can see is that you're using getElementByClassName, which isn't a function (missing the s).
Do this instead:
let elem = document.getElementsByClassName('is-a-div-element')[0];
Tested working in Chrome and Firefox:
window.addEventListener('load', function() {
let elem = document.getElementsByClassName('is-a-div-element')[0];
elem.click();
});
<div class="nav-element">
<div class="is-a-div-element" onclick="alert('this was clicked frens');">
<div roll="button">
<span roll="presentation">Hello World</span>
<span class="Exit">Exit</span>
</div>
</div>
</div>
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
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
I am a novice in jQuery, and am trying to create this page. In all browsers I tested, when I click the red button a coupon code appears, except for IE. Why does this happen? And how can I fix it?
I hate this browser, really...
Javascript:
$(".coupon_button").live('click', function (event) {
$(".coupon_button").remove().fadeOut('slow');
$(".coupon_main").after($("<div class='coupon_code'>code:newhgcoupon</div>").fadeIn());
//$(".coupon_main").after().fadeIn('slow').html("<div class='code'>code:newhgcoupon</div>");
});
HTML:
<div class="module">
<div class="coupon_title">Pay <span class="yellow">1 Cent</span> your First Month</div>
<div class="coupon_main">To help save you some time, we created a link that takes you directly to the easily missed area on the official Medifast site that lists all of their latest specials and discounts.</div>
<div class="coupon_button"><img src="button.png" /></div>
<div class="coupon_footer">Expiration: 11-30-2010</div>
</div>
Your script is not executing in IE. To fix it, just change the script type to text/javascript.
IE does not recognize the application/javascript type as being a script at all.
I think you're missing your document.ready function. Add this line right above the first line of your script:
$(document).ready(function() {