please could you assist with printing a dropdown selection value when using the Print.js Javascript Library, the original selection remains and it does not dynamically change when you get the print window...
https://codepen.io/markchavush/pen/WWrWda
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>Your page title here :)</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<!-- Favicon
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="icon" type="image/png" href="images/favicon.png">
</head>
<body>
<!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<div class="container">
<form method="post" action="#" id="printJS-form">
<div class="row">
<div class="six columns">
<label for="exampleEmailInput">Your email</label>
<input class="u-full-width" type="email" placeholder="test#mailbox.com" id="exampleEmailInput">
</div>
<div class="six columns">
<label for="exampleRecipientInput">Reason for contacting</label>
<select class="u-full-width" id="exampleRecipientInput">
<option value="Option 1">Questions</option>
<option value="Option 2">Admiration</option>
<option value="Option 3">Can I get your number?</option>
</select>
</div>
</div>
<label for="exampleMessage">Message</label>
<textarea class="u-full-width" placeholder="Hi Dave …" id="exampleMessage"></textarea>
</form>
<button type="button" onclick="printJS({ printable: 'printJS-form', type: 'html', header: 'PrintJS - Form Element Selection', css: 'https://cdnjs.cloudflare.com/ajax/libs/skeleton-framework/1.1.1/skeleton.min.css' })">
Print Form with Header
</button>
</div>
<!-- End Document
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
</body>
</html>
Please go directly to the codepen and press the print button to see that the dropdown list value does not appear correctly in the printout...
Cheers
Mark
You can't, not with the Print.js library.
The problem you're facing is a known issue - there was an issue created on their GitHub repo detailing this exact issue back in 2018. (That issue was merged to this open issue instead, since apparently it's the same problem). The original GitHub issuer even created a JSFiddle demoing the same problem you show in your codepen.
My only recommendation would be to attempt to implement something similar to this answer, though I won't pretend it will be easy.
Related
I've been working on a Javascript To-Do app and included some icons from Font Awesome. But they're just not showing up. So far I've tried:
Disabling adblockers and reloading Pages
Trying out different browsers.
Removing CDN and using Font Awesome CSS itself in the project.
I've already googled regarding this problem double-checked my CDN link, checked the recent documentation and everything seems alright. What did I do wrong?
I have attached the HTML Code Snippet and the screenshot from the browser below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins:wght#300&family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>To do List</title>
</head>
<body>
<header>
<h1>My todo list</h1>
</header>
<form>
<input type="text" class="todo-input">
<button class="todo-button" type="submit">
<i class="fas fa-user-md"></i>
</button>
<div class="select">
<select name="todos" class="filter-todo">
<option value="all">All</option>
<option value="completed">Completed</option>
<option value="uncompleted">Uncompleted</option>
</select>
</div>
</form>
<div class="todo-container">
<ul class="todo-list"></ul>
</div>
<script src="app.js"></script>
</body>
</html>
Browser View
Change fas fa-user-md to fa fauser-md and add it directly to button.
Like so -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins:wght#300&family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>To do List</title>
</head>
<body>
<header>
<h1>My todo list</h1>
</header>
<form>
<input type="text" class="todo-input">
<button class="todo-button fa fa-user-md" type="submit">
</button>
<div class="select">
<select name="todos" class="filter-todo">
<option value="all">All</option>
<option value="completed">Completed</option>
<option value="uncompleted">Uncompleted</option>
</select>
</div>
</form>
<div class="todo-container">
<ul class="todo-list"></ul>
</div>
<script src="app.js"></script>
</body>
</html>
Edit: fas, far etc is supported in Font Awesome 5 and above. The version is used in this example is 4.7.0 which is supports fa.
I found the below code from the website mentioned below after my two-days search for a bootstrap datepicker for my website. Being a newbie I do not know how to implement but I gave it a try, however, I did not get the result as expected, I got only an inputfield but no datepicker. Can somebody help me implement the code?
I create a test.html file in my project and added the below code to test.
NOTE: This is the only code I have for datepicker.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Test Site</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous"> -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<!-- google fonts -->
<link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet">
</head>
<body>
<div class="container my-4">
<div class="md-form">
<input placeholder="Selected date" type="text" id="date-picker-example" class="form-control datepicker">
</div>
</div>
<script>
// Data Picker Initialization
$('.datepicker').pickadate();
</script>
</body>
</html>
Source of the code
In your input tag with id=date-picker-example replace type field with "date". I mean the code of your input field will be like this.
<input placeholder="Selected date" type="date" id="date-picker-example" class="form-control datepicker">
I hope this solves your problem.
This is my HTML and the nav is not working.
This is new to me, the only thing I am doing different this time is using Angular. When I click in any nav button the address bar goes like
http://localhost:8018/#/WebDev
insted of
http://localhost:8018/#WebDev
What am I doing wrong here?
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>DevMash</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes" />
<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400|Roboto+Mono" rel="stylesheet">
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<!-- Favicon
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="icon" type="image/png" href="images/favicon.png">
<!-- Scripts
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<script type="text/javascript" src="js\jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="js\angular.min.js"></script>
</head>
<body>
<nav>
<ul>
<li>
WebDev
</li>
<li>
Android
</li>
<li>
Python
</li>
<li>
FAQs
</li>
</ul>
</nav>
<div id="WeDev"><ng-include src="'WebDev.html'"></ng-include></div>
<div id="Android" ng-include="'android.html'"></div>
<div id="Python" ng-include="'python.html'"></div>
<div id="faq" ng-include="'faq.html'"></div>
</body>
</html>
Update: I just want it to work as it does normally in HTML,ie, when tag is clicked, the page should be directed to the target div.
You are supposed to do it in AngularJs Way if you are in an AngularJs environment. if you want to do it in a native way, then remove angularJs from your script.
For more detail, please see https://docs.angularjs.org/api/ng/service/$anchorScroll
I replaced from href="#target" to href="##target". Seems to work.
I have a fix top navbar defined by:<nav class="navbar navbar-default navbar-fixed-top">, and pages that user can edit content with ckeditor. It works fine PC but when using on mobile device the navbar instead of fixed top will be fixed at where it was the moment entering the editing mode. Although the navbar will be back to where it suppose to be once user finish editing, it can be quite annoying since the navbar could happen to overlap ckeditor's toolbar like this.
Well this actually happen on all input field, but more obvious when u got a large input area like textarea.
PS: just in case, it's not the zooming issue which solved by setting input field text font larger than 16px that I am asking.
Update demo code(need to view on phone to see issue, device mode on chrome cant recreate this problem):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>demo</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<header>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
</div><!-- navbar-header -->
</div><!-- end of fluid container -->
</nav>
</header>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="list-group-item">
<form method="POST" action="/andu/m/share/user/voice">
<label for="ft"><span class="text-danger">*</span>content</label>
<textarea name="text" class="form-control" rows="2" id="ft"></textarea>
<button type="submit" name="act" value="save" class="btn btn-success btn-block">save</button>
</form>
</div>
</body>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</html>
I am using ionic framework to make a simple application( you can search through itunes for tracks). However, when displaying a lot of results, the ion content isn't scrollable. Here is my markup:
<!DOCTYPE html>
<html ng-app="hiphop">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic-AngularJS-Cordova</title>
<!-- Ionic framework - replace the CDN links with local files and build -->
<link href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.min.js"></script>
<script src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/app.js"></script>
<script src="cordova.js"></script>
</head>
<body ng-controller="SearchCtrl" ng-app="hiphop">
<ion-pane>
<ion-header-bar class="bar-stable">
<label class="item-input-wrapper header">
<i class="icon ion-android-search placeholder-icon"></i>
<input type="search" placeholder="Search" ng-model="search.query" ng-enter="search()" />
</label>
</ion-header-bar>
<ion-content class="has-header" animation="slide-left-right" padding="true" scroll="true" has-bouncing="true">
<!-- our list and list items -->
<div class="list">
<a class="item item-avatar" href="#" ng-repeat="item in items">
<img src="{{ item.artworkUrl60 }}">
<h2>{{item.trackName}}</h2>
<p>{{item.artistName}}
</p>
</a>
</div>
</ion-content>
</ion-pane>
</body>
</html>
Codepen demo (with also js).
Why isn't it possible to scroll? How to do it?
PS: I am using Intel XDK
You had included ionic.bundle script 2 times, I removed one in your code-pen example and scrolling worked.
http://codepen.io/anon/pen/ynCsc