I use bootstrap framework to make responsive web page to worl on mobile , PC and tablet.
I wrote the fallowing code and I was run it on browser but the result not good when the browser size going as same as mobile screen.
see the following html code and run it and change the browser size to see the result.
see the result on A,B,C,D blocks
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"/>
<style>
.but
{
background-color: red;
font-size:40px;
border-bottom:1px solid white;
border-width:1px;
border-left: 1px solid red;
border-right: 1px solid red;
text-decoration:none;
color:white;
text-align:center;
}
</style>
</head>
<body style="background-color:#DBE8D7;">
<div class="container">
<div class="row">
<div style="text-align:center;border:1px solid red; border-top-right-radius:8px; border-top-left-radius:8px; background-color:white;font-size:75px;margin-bottom:0px;border-bottom:none;">div1</div>
<br/>
A
B
C
D
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Try not to use col-xx-zz classes on <a> tags. Also if you want to have the same setup of columns on mobile device as on PC monitor one declaration: col-xs-3 is enough, no need to use sm, md, lg etc...
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"/>
<style>
.but
{
background-color: red;
font-size:40px;
border-bottom:1px solid white;
border-width:1px;
border-left: 1px solid red;
border-right: 1px solid red;
text-decoration:none;
color:white;
text-align:center;
}
</style>
</head>
<body style="background-color:#DBE8D7;">
<div class="container">
<div style="text-align:center;border:1px solid red; border-top-right-radius:8px; border-top-left-radius:8px; background-color:white;font-size:75px;margin-bottom:0px;border-bottom:none;">div1</div>
<br/>
<div class="row">
<div class="col-xs-3">A</div>
<div class="col-xs-3">B</div>
<div class="col-xs-3">C</div>
<div class="col-xs-3">D</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Maybe this isn't perfect, but something like this might work:
Change the font-size attribute to 15vw:
font-size: 15vw;
and in your HTML, no need to use col-lg-3, col-md-3, col-sm-3 if you plan to use the same orientation all the way down to col-xs-3. To get a better idea about how this column system works, take a look at the documentation for the grid system.
A
B
C
D
Ideally this isn't the best way to go about it. The better way would be to have the menu turn into a drop-down menu for smaller screens. Bootstrap provides functionality for that.
For that, take a look at the documentation for the navigation bar.
Related
How to make column height shrink when it is displayed on smaller screen? I used bootstrap 3.3.7 . I made 3 columns inside a row and sat them to col-md-2, col-md-9, col-md-1. They are displayed correctly on md screen and bigger. On small screen they are still displayed fine. However, on small and extra small screen, I want to make first and third columns height shrink to the height of their contents.
Here is a part the HTML code and css I used:
HTML:
<!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">
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-
dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-
dist/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="second_page.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-2" id="first_left_column_box">
<div class="left_content" id="first_left_column">
<a class="salehslist" id ="category" href="#"
style="text-decoration:none;"> <center> content
</center> </a>
</div>
<div>
<h1> another content </h1>
</div>
</div>
<div class="col-md-9">
<div class="breadcrumb">
<a id ="category" href="#" > <center> content </center>
</a>
</div>
<div>
<h1> many contents" nested rows and columns" are here</h1>
</div>
</div>
<div class="col-md-1" id="last_right_column_box">
<div class="right_content" id="last_right_column">
<div>
<h1> many contents </h1>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js"
</script>
</body>
</html>
CSS file:
body { padding-top: 70px; }
/* all a tags colors */
a { color: #4285F4; }
/* first left column */
#first_left_column_box{
background-color: #eee;
border-left: 1px #ccc solid;
border-right: 1px #ccc solid;
height:200vh;
margin-bottom: 20px;
}
#first_left_column{
text-align:center;
line-height:50px;
}
/* middle column */
.breadcrumb {
background-color: #eee;
border-top: 1px #ccc solid;
border-bottom: 1px #ccc solid;
margin-bottom: 20px;
}
/* last right column */
#last_right_column_box{
background-color: #eee;
border-left: 1px #ccc solid;
border-right: 1px #ccc solid;
padding: 10px;
height:200vh;
}
#last_right_column{
text-align:center;
line-height:50px;
}
you can use with col- with col-md:
.col- (extra small devices - screen width less than 576px)
.col-sm- (small devices - screen width equal to or greater than 576px)
.col-md- (medium devices - screen width equal to or greater than 768px)
.col-lg- (large devices - screen width equal to or greater than 992px)
.col-xl- (xlarge devices - screen width equal to or greater than 1200px)
try use col-2 and col-md-2 like example:
<div class="col-2 col-md-2" id="first_left_column_box">
Read this... can help you. https://www.w3schools.com/bootstrap4/bootstrap_grid_examples.asp
Bootstrap currently doesn't support anything for automatic resizing of height of columns , we are bounded to use media queries so just use it !!
You will need to use media queries for the separate screens. You can write media queries like so
#media not|only mediatype and (expressions) {
CSS-Code;
}
but it is better to separate the rules which are applicable for the given rules, by creating separate CSS files for the separate sizes:
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">
An example for your case:
<link rel="stylesheet" media="screen and (max-width: 699px)" href="small-screen.css">
And put here the rules for small screen. You can create separate CSS files for separate screen size categories.
I wish to make an input element look just like an anchor link. Furthermore, it should look like a link where the x-editable plugin is applied to it. My attempt is displayed below. My difficulty is the underline extends past the text, and the text width is not always the same. Ideally, the input width would always be the width of the text (JavaScript solutions are okay). I also have problems with the before/after clicked color, but suppose I could just eliminate this from the other links on the page.
.inputLink {
border: none;
outline: none;
background-color: transparent;
font-family: inherit;
font-size: inherit;
cursor: pointer;
color:#0000ff;
border-bottom: 1px dashed #0088cc;
text-decoration: none;
/* width:75px; */
}
Why am I doing this?
I need jQuery datepicker (actually timepicker) to be initiated by clicking the current date. I've seen several solutions, but believe my solution posted below (and also at http://jsbin.com/tadaqomure/1/) is cleaner provided I can figure out the input CSS. If you feel I should be doing differently, please provide a comment.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Testing</title>
<style type="text/css">
.inputLink {
border: none;
outline: none;
background-color: transparent;
font-family: inherit;
font-size: inherit;
cursor: pointer;
color:#0000ff;
border-bottom: 1px dashed #0088cc;
text-decoration: none;
/* width:75px; */
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.4.5/jquery-ui-timepicker-addon.min.js" type="text/javascript"></script>
<link href= "https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.4.5/jquery-ui-timepicker-addon.css" rel="stylesheet">
<link href= "https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.1/jqueryui-editable/css/jqueryui-editable.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.1/jqueryui-editable/js/jqueryui-editable.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#text').editable();
$("#datetime").datetimepicker();
});
</script>
</head>
<body>
<div>
<span>Normal Link:</span>
test
</div>
<div>
<span>Datetime Fake Link:</span>
<input class="inputLink" id="datetime" type="text" readonly value="1/05/1984" />
</div>
</body>
</html>
I want to add an image carousel to my website which i am building using polymer(https://www.polymer-project.org/). But i am unable to find any core element/paper element with that functionality.
However i found a library that does that (https://github.com/addyosmani/polymer-ui-carousel) but not able to implement it. Please help me to implement image carousel in my polymer website.
The code that i am using is :-
<html class="polymer-ui-full-bleed">
<head>
<title>Just a new app</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="../bower_components/platform/platform.js"></script>
<link rel="import" href="../bower_components/font-roboto/roboto.html">
<link rel="import"
href="../bower_components/core-header-panel/core-header-panel.html">
<link rel="import"
href="../bower_components/core-toolbar/core-toolbar.html">
<link rel="import"
href="../bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="post-card.html">
<link rel="import" href="post-list.html">
<link rel="import" href="../bower_components/polymer-ui-carousel/polymer-ui-carousel.html">
<link rel="stylesheet" href="../bower_components/polymer-ui-base-css/base.css">
<link rel="stylesheet" href="../bower_components/polymer-ui-carousel/smoke.css">
<style>
html,body {
height: 100%;
margin: 0;
background-color: #E5E5E5;
font-family: 'RobotoDraft', sans-serif;
}
.container {
width: 80%;
margin: 50px auto;
}
#media (min-width: 481px) {
#tabs {
width: 200px;
}
.container {
width: 400px;
}
}
core-header-panel {
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
core-toolbar {
background: #03a9f4;
color: white;
}
#tabs {
width: 100%;
margin: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-transform: uppercase;
}
</style>
</head>
<body class="polymer-ui-body-text polymer-ui-full-bleed polymer-ui-light-bg" unresolved>
<core-header-panel>
<core-toolbar>
<paper-tabs id="tabs" selected="all" self-end>
<paper-tab name="all">All</paper-tab>
<paper-tab name="favorites">Favorites</paper-tab>
</paper-tabs>
</core-toolbar>
<div class="container" layout vertical center>
<post-list show="all"></post-list>
<h1><polymer-ui-carousel></h1>
<h2>With bullet controls</h2>
<polymer-ui-carousel>
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</polymer-ui-carousel>
</div>
<!-- main page content will go here -->
</core-header-panel>
<script>
var tabs = document.querySelector('paper-tabs');
var list = document.querySelector('post-list');
tabs.addEventListener('core-select', function() {
list.show = tabs.selected;
});
tabs.addEventListener('core-select', function() {
console.log("Selected: " + tabs.selected);
});
</script>
</body>
</html>
After installing Polymer-ui-carousel(https://github.com/addyosmani/polymer-ui-carousel) i am getting this error.
Exception caught during observer callback: TypeError: Cannot read property 'children' of null
at polymer-ui-carousel.items (http://localhost:9000/bower_components/polymer-selector/polymer-selector.html:220:28)
at polymer-ui-carousel.Polymer.valueToSelection (http://localhost:9000/bower_components/polymer-selector/polymer-selector.html:278:30)
at polymer-ui-carousel.Polymer.updateSelected (http://localhost:9000/bower_components/polymer-selector/polymer-selector.html:255:16)
at polymer-ui-carousel.Polymer.selectedChanged (http://localhost:9000/bower_components/polymer-selector/polymer-selector.html:245:14)
at polymer-ui-carousel.g.invokeMethod (http://localhost:9000/bower_components/polymer/polymer.js:13:25932)
at polymer-ui-carousel.g.notifyPropertyChanges (http://localhost:9000/bower_components/polymer/polymer.js:13:24037)
at Object.x.report_ (http://localhost:9000/bower_components/polymer/polymer.js:12:18266)
at Object.S.check_ (http://localhost:9000/bower_components/polymer/polymer.js:12:22604)
at c (http://localhost:9000/bower_components/polymer/polymer.js:12:12173) polymer.concat.js:4861x.report_ polymer.concat.js:4861S.check_ polymer.concat.js:5264c polymer.concat.js:4757
Import Web Components' polyfill:
<script src="platform.js"></script>
Import Custom Element:
<link rel="import" href="polymer-ui-carousel.html">
Start using it! Simple include your code instaed of
With bullet controls:
<polymer-ui-carousel>
<div>here your code</div>
<div>here your code</div>
<div>here your code</div>
<div>and so on</div>
</polymer-ui-carousel>
With text label controls:
<polymer-ui-carousel labels="true">
<div title="Alpha">here your code</div>
<div title="Beta">here your code</div>
<div title="Gamma">here your code</div>
<div title="Delta">and so on</div>
</polymer-ui-carousel>
Your install will contain a bower folder with a child folder of /bower_components. You will want to type the bower install --save polymer-ui-carousel command while in that directory. You can get around this by adding bower to your Environment Path (depending on your operating system).
Once you type the command in you should see a new child folder in /bower_components that will contain the polymer-ui-carousel.html file.
I am making a Tizen web app and want to use jQuery mobile's "taphold" listener.
I downloaded the latest .js from the jQuery mobile site, but when I try to include it, it doesn't work.
Am I meant to use it with jQuery or by itself? both product errors.
Without including jQuery I get the error:
js/jquery.mobile-1.4.2.min.js (26) :TypeError: 'undefined' is not an object (evaluating '$.mobile = {}')"
But if I do include jQuery when going to that page the screen is completely black and I can not do anything.
You should post your code. JQuery Mobile works with Tizen, you can even add it to project from IDE.
Below is index.html for TizenWeb version of JQuery tutorial on taphold event. All is working. You can use it as template for your solution.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="A single-page template generated by Tizen Web IDE"/>
<title>Tizen Web IDE - Tizen - jQuery Mobile - tapHold listener</title>
<link rel="stylesheet" href="./css/jquery.mobile-1.2.0.css"/>
<script type="text/javascript" src="./js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="./js/jquery.mobile-1.2.0.js"></script>
<script type="text/javascript" src="./js/main.js"></script>
<link rel="stylesheet" href="./css/style.css" />
<style>
<!--
based on http://api.jquerymobile.com/taphold/
-->
html, body { padding: 0; margin: 0; }
html, .ui-mobile, .ui-mobile body {
height: 85px;
}
.ui-mobile, .ui-mobile .ui-page {
min-height: 85px;
}
#nav {
font-size: 200%;
width:17.1875em;
margin:17px auto 0 auto;
}
#nav a {
color: #777;
border: 2px solid #777;
background-color: #ccc;
padding: 0.2em 0.6em;
text-decoration: none;
float: left;
margin-right: 0.3em;
}
#nav a:hover {
color: #999;
border-color: #999;
background: #eee;
}
#nav a.selected,
#nav a.selected:hover {
color: #0a0;
border-color: #0a0;
background: #afa;
}
div.box {
width: 3em;
height: 3em;
background-color: #108040;
}
div.box.taphold {
background-color: #7ACEF4;
}
</style>
</head>
<body>
<!--
based on http://api.jquerymobile.com/taphold/
-->
<div data-role="page" >
<div data-role="header" data-position="fixed" >
<h1>Single-Page Application </h1>
</div><!-- /header -->
<div data-role="content" >
<p>This is a single page boilerplate template that you can copy to build your first jQuery Mobile page.</p>
<h3>Long press the square for 750 milliseconds to see the above code applied:</h3>
<div class="box"></div>
<script>
$(function(){
$( "div.box" ).bind( "taphold", tapholdHandler );
function tapholdHandler( event ) {
$( event.target ).addClass( "taphold" );
}
});
</script>
</div><!-- /page -->
</body>
</html>
when I'm printing my page using window.print ,Its automatically adding some data's in header and footer
for ex: In top of the page its adding - page tittle and localhost url . In bottom of the page adding - page number and time . How can I get rid of these information from my page
My Html Page:
<title>GM Shop Click Drive Tracker Tool - Reports</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link href="css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="css/jquery-ui-1.10.3.custom.css" media="screen"/>
<style>
body {
padding-top: 6px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/gmpt.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="ico/favicon.png">
<style type="text/css">
#media print {
input {
display:none !important;
}
.ui-helper-hidden-accessible {
display:none !important;
}
#headRow {
display:none;
}
.sidebar-nav {
display:none !important;
}
select {
display:none !important;
}
.dataList {
width:90% !important;
}
}
table.dataList {
border-collapse: separate;
border-spacing: 0;
}
table.dataList th {
background-color: #f0f0f0;
}
table.dataList tr th,
table.dataList tr td {
border-right: 1px solid #bbb;
border-bottom: 1px solid #bbb;
padding: 5px;
}
table.dataList tr th:first-child,
table.dataList tr td:first-child {
border-left: 1px solid #bbb;
}
table.dataList tr th {
background: #eee;
border-top: 1px solid #bbb;
text-align: left;
}
/* top-left border-radius */
table.dataList tr:first-child th:first-child {
border-top-left-radius: 6px;
}
/* top-right border-radius */
table.dataList tr:first-child th:last-child {
border-top-right-radius: 6px;
}
/* bottom-left border-radius */
table.dataList tr:last-child td:first-child {
border-bottom-left-radius: 6px;
}
/* bottom-right border-radius */
table.dataList tr:last-child td:last-child {
border-bottom-right-radius: 6px;
}
tr.alternate {
background-color: #f0f0f0;
}
.highlight {
background-color:#FFFFE0 !important;
}
</style>
<div class="container-fluid">
<div class="row-fluid" id="headRow">
<div class="span2" style="text-align: center">
<img src="images/shop_click_drive_logo.jpg" style="width:100px"/>
</div>
<div class="span10" style="vertical-align: bottom;padding-top:40px;padding-bottom:0px">
<ul class="nav nav-tabs" style="padding-bottom:0px;" id="topTabs">
<li class="active" id="dealerTab">Dealer Report</li>
<li id="statusTab">Dealer by Status</li>
<li id="stepTab">Dealer by Step</li>
<li id="userTab">Dealer by User</li>
<li id="userTab">"In Process" Report</li>
<li id="userTab">RouteOne Report</li>
</ul>
</div>
</div>
<div class="row-fluid">
<div class="span2">
<div class="well sidebar-nav">
<ul class="nav nav-list">
<li>Dashboard</li>
<li>Tracker</li>
<li class="active">Reports</li>
<li>BroadCast</li>
<li>Calendar</li>
<li>Documents</li>
<li>Admin</li>
<li>Profile</li>
<li>Logout</li>
</ul>
</div><!--/.well -->
</div><!--/span-->
<div class="span10" id="mainContent" style="padding-left:20px">
<!-- Begin Content -->
<div class="row">
<div class="span12">
<input type="text" style="width:50%" name="locationSelector" id="locationSelector" value="Start typing location name/id" onfocus="this.value=''"/>
</div>
</div><!-- /container -->
You will not be able to remove these headers and footers, as it is the browser that puts them there. On some browsers, the user may be able to remove the header and footer, but since this requires intervention from a (savvy) user, it's probably not the solution you are looking for.
If you really must remove the header/footer yourself, your only option seems to be producing PDF output which the user can then print, or save to disk. Some CMSs will offer this functionality automatically (e.g. Joomla). If you're rolling your own, have a look at the following libraries:
http://www.fpdf.org/
http://www.tcpdf.org/
These classes are able to convert an HTML document (or part thereof) into PDF. They allow you to pass in a CSS file so you can determine the layout and style of the resulting PDF. In my experience, it works well as long as you steer clear of (complex) tables.
You can also turn to JS to print specific DIV. Here is Example
JS
function printPage(id) {
var html="<html>";
html+= document.getElementById(id).innerHTML;
html+="</html>";
var printWin=window.open('','','left=0,top=0,width=1,height=1,toolbar=0,scrollbars=0,status =0');
printWin.document.write(html);
printWin.document.close();
printWin.focus();
printWin.print();
printWin.close();
}
You can call above function on click event.