how to make a picture stretchable when window is enlarging by width - html

i want to make the "img/rsz_indexpage_image.jpg" picture stretchable according to the div size variation.when enlarging the width of the div picture is not enlages as expected.how to do this by bootstrap. now image size is static when enlarging.
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/loginjs.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/logincss.css">
</head>
<body>
<div class="container">
<div class="row vertical-offset-100">
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-default">
<div class="panel-heading">
<div class="row-fluid user-row">
<img src="img/rsz_indexpage_image.jpg" class="img-responsive" alt="Conxole Admin"/>
</div>
</div>
<div class="panel-body">
<form accept-charset="UTF-8" role="form" class="form-signin">
<fieldset>
<label class="panel-login">
<div class="login_result"></div>
</label>
<input class="form-control" placeholder="Username" id="username" type="text">
<input class="form-control" placeholder="Password" id="password" type="password">
<br></br>
<input class="btn btn-lg btn-success btn-block" type="submit" id="login" value="Login »">
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

if you want to keep aspect ratio then put width:100% and height:auto
if you want to cover whole parent element then height:100% and width:100%
and its on you how you put it with .img-responsive
img-responsive
.img-responsive {
display: block;
width: 100%;
height: auto;
margin: auto;
}

window.onresize = function(event) {
updateImageSize()
};
function updateImageSize() {
$(".img-responsive").each(function(){
var ratio_cont = jQuery(this).width()/jQuery(this).height();
var $img = jQuery(this).find("img");
var ratio_img = $img.width()/$img.height();
if (ratio_cont > ratio_img)
{
$img.css({"width": "100%", "height": "auto"});
}
else if (ratio_cont < ratio_img)
{
$img.css({"width": "auto", "height": "100%"});
}
});
};

Related

How to change the height and width of glyphicon-comment(Bootstrap)

I want to change the height and width of glyphicon-comment and how to display text inside the glyphicon-comment.i am using predefined comment which is present in the bootstrap.when i try to change the height and width by using inline style it is not working.but if i changing the color of comment it is changing.
Here is my code.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="panel panel-info">
<div class="panel-heading">Learn by doing</div>
<div class="panel-body">Each computer has a built-in instruction set that it knows how to execute by design.
<form id="myForm">
<span class="glyphicon glyphicon-comment" onclick="radiotruehintbox()"></span>
<div class="radio">
<label><input type="radio" id="true" onclick="radiotruehintbox()">True</label>
</div>
<div class="radio">
<label><input type="radio" id="false" onclick="radiofalsehintbox()">False</label>
</div>
<div class="alert alert-success alert-dismissible" id="truebox" style= display:none>
<div class="close" data-dismiss="alert" aria-label="close">×</div>
<strong>✔</strong> This alert box could indicate a successful or positive action.
</div>
<div class="alert alert-danger alert-dismissible" id="falsebox" style= display:none>
<div class="close" data-dismiss="alert" aria-label="Close">×</div>
<strong>✘</strong> This alert box could indicate a dangerous or potentially negative action.
</div>
<p>computer uses intelligence to execute instructions.</p>
<span class="glyphicon glyphicon-comment" onclick="radiofalsehintbox()"></span></p>
<div class="radio">
<label><input type="radio" id="true_2" onclick="radiohintbox()">True</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">False</label>
</div>
</form>
<button type="button" class="btn btn-primary btn-md" OnClick="ResetClick()" >Reset </button>
</div>
</div>
</div>
<script>
function radiotruehintbox() {
document.getElementById("false").checked = false;
document.getElementById('falsebox').style.display='none';
document.getElementById('truebox').style.display='block';
}
function radiofalsehintbox() {
document.getElementById("true").checked = false;
document.getElementById('truebox').style.display='none';
document.getElementById('falsebox').style.display='block';
}
function ResetClick() {
document.getElementById("myForm").reset();
document.getElementById("truebox").reset();
document.getElementById("falsebox").reset();
}
</script>
</body>
</html>
Use Font size to increase the size of glyphicons like this -
.glyphicon-comment{
font-size: 24px
}
You can`t write inside a glyphicon.
Use font size to increase the size of bootstrap icons,
You can't increase height or width alone.
.glyphicon-comment {
font-size: 20px;
}
Reference link - https://www.w3schools.com/icons/bootstrap_icons_glyphicons.asp
Hope this helps,

ajax putting auto complete result into HTML table

I'm trying to implement ajax auto complete function to my HTML code, I want to put the result from the auto complete function into a table on my html page, the auto complete function is working and I get a drop down list but the table isn't created and I can't see any result in it.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DMC</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="page-header">
<h3 style="color:#00a2d1; font-size:30px; font-family: Impact, Charcoal, sans-serif; text-align: center;">
DMC</h3>
</div>
<div class="row">
<div class="col-lg-12 text-center">
<div class="col-lg-offset-2">
<form>
<div class="form-group">
<div class="input-group">
<input id="txtSearch" class="form-control input-lg" type="text" placeholder="Search..." />
<div class="input-group-addon"><i class="glyphicon glyphicon-search"></i></div>
</div>
<table border='1' id="table_body"></table>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('#txtSearch').autocomplete({
source: "post_search.php",
minLength: 1,
select: function(event, ui) {
var url = ui.item.id;
if (url != '#') {
location.href = url
}
var table = $("#table_body");
$.each(data, function(event, ui){
table.append("<tr><td>"+ui.item.value+"</td><td>"+ui.item.id+"</td>");
},
open: function(event, ui) {
$(".ui-autocomplete").css("z-index", 1000)
}
})
});
</script>
</body>
</html>
Try something like this hope it helps
<table border='1'>
<thead>
<tr>
<td>value</td>
<td>id</td>
</tr>
</thead>
<tbody id="table_body">
</tbody>
</table>
var data = ''; //initialize the data variable
$.each(data, function(event, ui){
data +=
"<tr>"+
"<td>"+ui.item.value+"</td>"+
"<td>"+ui.item.id+"</td>"+
"</tr>";
}
$('#table_body').html(data); //this will display your data to your body table
I used _renderMenu function and $.each function inside it and it worked like a charm.
here is the new code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DMC</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="page-header">
<h3 style="color:#00a2d1; font-size:30px; font-family: Impact, Charcoal, sans-serif; text-align: center;">
DMC</h3>
</div>
<div class="row">
<div class="col-lg-12 text-center">
<div class="col-lg-offset-2">
<form>
<div class="form-group">
<div class="input-group">
<input id="txtSearch" class="form-control input-lg" type="text" placeholder="Search..." />
<div class="input-group-addon"><i class="glyphicon glyphicon-search"></i></div>
</div>
<table id="table_body" border='1'>
<thead>
<tr>
<th>City</th>
<th>Zip</th>
</tr>
</thead>
</table>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('#txtSearch').autocomplete({
source: "post_search.php",
minLength: 3
}).data("ui-autocomplete")._renderMenu = function (ul, items) {
$("#table_body tbody tr").remove();
$.each( items, function( index, item ) {
console.log(item);
var table = $("#table_body");
if (item.id != '#') {
table.append("<tr><td>"+item.value+"</td><td>"+item.id+"</td>");
}
});
};
});
</script>
</body>
</html>

Swapping the images to enable / disable DIV

I am just a beginner.
Is there a code to use two different images as buttons to disable and enable . Most examples use two separate buttons but I need to use a single button with two images: one for off and the other one for on.
$(function() {
$("#Enable").click(function(){
$(".div1 *").prop('disabled',true);
});
$("#Disable").click(function(){
$(".div1 *").prop('disabled',false);
});
});
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link href="css/multitoggle.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script language="javascript" type="text/javascript"></script>
</head>
<body>
<div class="div1">
Name:<input type="text" id="fullname" value="name"/><br>
<br>
<input type="button" id="button1" value="Submit "/>
<div></div>
</div>
<input type="image" src="assets/trans_off.jpg" id="Enable" value="Enable"/>
<input type="image" src="assets/trans_on.jpg"id="Disable" value="Disable"/>
</body>
</html>
Use image sprite that contains two button images. Use background-position to set what part of image to show.
$(document).ready(function() {
var isDisabled = false;
$('.toggle').click(function() {
isDisabled = !isDisabled; // invert value
$('.div1 input').prop('disabled', isDisabled);
});
});
#button1 {
background: url('http://images.sixrevisions.com/2009/05/04-31_slick_clean_30.png') no-repeat -80px -14px;
width: 246px;
height: 48px;
border: none;
}
#button1:disabled {
background-position: -80px -63px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1">
Name: <input type="text" id="fullname" value="name" /><br>
<br/>
<input type="button" id="button1"/>
<div></div>
</div>
<hr/>
<button class="toggle">Toggle inputs</button>

Scaling html page for mobile

I want to make my html page scale with the mobile screen it is opened on. This is my code I have. I have added the initial scale 1 line but it doesn't seem to work. I want the images the input box and the radio button to scale with the width and height of the device the page is opened on. I am using html/css and bootstrap to make the page and some JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<img class="img-responsive" src="corendonwifi.png" alt="Chania" width="460" align="middle" height="345">
<script>
function myFunc() {
var checker = document.getElementById('checkme');
var sendbtn = document.getElementById('sendNewSms');
checker.onchange = function(){
if(this.checked){
sendbtn.disabled = false;
} else {
sendbtn.disabled = true;
}
}
}
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Corendon WI-FI</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style type="text/css">
H1 { text-align: center }
.bs-example{
margin: 20px;
}
body {
position: fixed;
top: 20%;
left: 50%;
transform: translate(-50%, -35%);
}
input, textarea {
max-width:100%
};
img {
max-width: 100%
};
</style>
</head>
<body onload="myFunc();">
<div class="bs-example">
<div class="bs-example">
<form>
<div class="form-group">
<label for="inputticketnummer">Ticketnummer</label>
<input type="ticketnummer" class="form-control" id="inputticketnummer" maxlength="20" placeholder="ticketnummer" size="" required>
</div>
<input type="checkbox" id="checkme"/> Ik heb de voorwaarden gelezen </label>
<br><br>
<input type="submit" name="sendNewSms" class="btn btn-primary" class="btn-xs" disabled="disabled" id="sendNewSms" value=" ga door " />
</form></div></form>
</div>
</div>
</body>
</html>
In order to get proper page scaling using Bootstrap, you must set up a grid system for the page. Right now, Bootstrap can't tie into anything and therefore not scale it.
Have a look at the documentation: http://getbootstrap.com/css/#grid
Correct your code like the following code :
<!DOCTYPE html>
<html lang="en">
<head>
<script>
function myFunc() {
var checker = document.getElementById('checkme');
var sendbtn = document.getElementById('sendNewSms');
checker.onchange = function(){
if(this.checked){
sendbtn.disabled = false;
} else {
sendbtn.disabled = true;
}
}
}
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Corendon WI-FI</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style type="text/css">
H1 { text-align: center }
.bs-example{
margin: 20px;
}
/*body{
position: fixed;
top: 20%;
left: 50%;
transform: translate(-50%, -35%);
}*/
input, textarea {
max-width:100%;
}
img {
max-width: 100%;
}
</style>
</head>
<body onload="myFunc();">
<div class="container">
<div class="row">
<div class="col-sm-12">
<img class="img-responsive" src="corendonwifi.png" alt="Chania" width="460" align="middle" height="345">
</div><!--col-sm-12-->
</div><!-- row -->
<div class="row">
<div class="col-sm-12" onload="myFunc();"></div>
</div><!-- row -->
<div class="row">
<div class="col-sm-12 bs-example">
<div class="col-sm-12">
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
</div><!-- col-sm-12 -->
<div class="col-sm-12">
<div class="checkbox">
<label><input type="checkbox" value="">Option 1</label>
</div>
</div><!-- col-sm-12 -->
<div class="col-sm-12">
<div class="form-group">
<input type="submit" name="sendNewSms" class="btn btn-primary" class="btn-xs" disabled="disabled" id="sendNewSms" value=" ga door " />
</div>
</div><!-- col-sm-12 -->
</div><!-- col-sm-12 bs-example -->
</div><!-- row -->
</div><!-- container -->
</body>
</html>
Firstly, while using bootstrap always use bootstrap classes. Secondly, dont use transform property in your css and position fixed in your css.
Your markup has several errors.
You can use the bootstrap classes to address this issue, but also can become free and use them as needed.
Repalce your CSS code for that:
.form{
max-width: 400px;
padding: 15px;
margin: 0 auto;
}
img{
margin: 0 auto;
}
.row{
margin-bottom:10px
}
And replace your markup, for that:
<body onload="myFunc();">
<div class="container">
<div class="form">
<div class="row">
<img class="img-responsive" src="corendonwifi.png" alt="Chania" width="460" align="middle" height="345">
</div>
</div>
<form class="form">
<div class="row">
<label for="inputticketnummer">Ticketnummer</label>
<input type="ticketnummer" class="form-control" id="inputticketnummer" maxlength="20" placeholder="ticketnummer" size="" required>
</div>
<div class="row">
<input type="checkbox" id="checkme"/> Ik heb de voorwaarden gelezen
</div>
<div class="row">
<input type="submit" name="sendNewSms" class="btn btn-primary" class="btn-xs" disabled="disabled" id="sendNewSms" value=" ga door " />
</div>
</form>
</div>
</body>
See my fiddle HERE!

In jquery-mobile how do you programmatically add page elements that have all the css?

When this code runs you can see it doesn't render the programmatically added input field as a mobile styled element. I could force it to by adding all the classes that get put in when a page is rendered (commented out). Is there an easier way?
http://jsfiddle.net/mckennatim/KKTr4/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
</head>
<body>
<div id="thelists" data-role="page">
<div data-role="header">
<h1>My Title</h1>
</div><!-- /header -->
<div data-role="content">
<h3>Add List</h3>
<form>
<div data-role="controlgroup" id="addwhat">
<input type="text" name="inp0" class="inp" />
</div>
<div data-role="controlgroup" data-type="horizontal" class="aisubmit">
<input type="submit" data-theme="b" id="addinput" value="Add Input"/>
</div>
</form>
</div><!-- /content -->
</div><!-- /page -->
<script>
var ct =0;
$('body').on('click', "#addinput", function (e) {
ct++;
e.stopImmediatePropagation();
e.preventDefault();
//to add form elemnt you have to add all the class css stuff
//$('#addwhat').append('<input type="text" name="list' + ct + '" class="inp ui-input-text ui-body-c ui-corner-all ui-shadow-inset" />');
$('#addwhat').append('<input type="text" name="list' + ct + '"/>');
});
</script>
</body>
</html>
$('#thelists').trigger('create');
should do the trick.