I am working on a website right now that looks great in a normal web browser and on the older smart phones, but it is way too small on the iPhone. I think this is because the iPhone takes a large number of pixels and squeezes them on to a smaller screen rather than being true-to-size. Is there a way to make the entire site look more zoomed-in / large on the phone screen without having the create a separate mobile site?
UPDATE: This is the code I tried using. The website looked the same when I refreshed the page.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
UPDATE #2: Someone asked for some more complete code, so I am including that as well:
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Carolina Mobility Sales Mobile</title>
<meta name="description" content="Welcome to Carolina Mobility Sales, LLC we are Carolina's largest Wheelchair Accessible Van Dealer. We have new and used accessible vans, full sized and mini vans. Some people call these vehicle Handicap or Handicapped vans, we prefer Accessible Vans. We also offer scooter and wheelchair lifts, adaptive driving controls. We also offer Wheelchair Accessible vans for Rentals. " />
<meta name="keywords" content="Wheelchair Accessible Minivans, Handicap Vans, Handicapped Vans, Full size handicap Vans, New and Used, Wheelchair Lifts, Scooter Lifts, Ramps, Driving Equipment. North Carolina, NC, South Carolina, SC, Charlotte, Columbia, Greenville, Spartanburg, Handicap Vehicle Specialists, Mobility Needs, wheelchair van, wheel chair van, accessible van, wheelchair lifts, wheelchair carriers, wheelchair ramp, Adapted van, adapted vehicle, handicap van, handicapped van, minivans, conversion minivans, disabled driving, accessible transportation, scooter lift, scooter ramp, scooter carrier, hand controls, disabled, disability, disabilities, mobility, disabled transportation, new vans, used vans, Braun, Braun low floors, tie down, remote entry, ramp, kneel suspension, fold out, in floor, power door, ezlock, EMC, NMEDA, QAP, rampvan, handicap vans, Rentals" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style type="text/css">
<!--
body {
background-color:white;
color:black;
font-family: Helvetica, Arial, sans-serif;
text-align:center;
font-size:16px;
}
#header {
background-image:url('images/br_grad.jpg');
background-repeat:repeat-x;
width:100%;
height:303px;
}
#headerimage {
background-image:url('images/TopImage_nograd.png');
background-repeat:no-repeat;
width:320px;
height:303px;
margin-right:auto;
margin-left:auto;
}
#facebook {
background-color:#b3d6e6;
border: solid 2px #0078ae;
position:relative;
top:115px;
z-index:99;
padding:4px;
width:320px;
}
#facebook a {
text-decoration:none;
font-weight:bold;
color:#0078ae;
justify:center;
font-size:15px;
}
#navigation {
background-color:#b3d6e6;
border: solid 2px #0078ae;
-moz-border-radius: 15px;
border-radius: 15px;
padding:10px;
width:97%;
margin-right:auto;
margin-left:auto;
}
.button {
-moz-border-radius: 15px;
border-radius: 15px;
height:20px;
margin-bottom:10px;
/* fallback */
background-color: #2f2f30;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#444445), to(#181819));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #444445, #181819);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #444445, #181819);
/* IE 10 */
background: -ms-linear-gradient(top, #444445, #181819);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #444445, #181819);
padding-top:5px;
}
.button a {
text-decoration:none;
color:white;
font-weight:100;
display:inline-block;
position:relative;
}
.button .star {
position:relative;
left:8px;
bottom:2px;
width:5px;
float:left;
}
.button .arrow {
position:relative;
right:3px;
float:right;
bottom:3px;
}
#locations {
margin-right:auto;
margin-left:auto:
}
#locations img {
margin-top:7px;
margin-right:2px;
}
-->
</style>
<script type="text/javascript">
function DoNav(theUrl)
{
document.location.href = theUrl;
}
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="headerimage">
<div id="facebook">
Click to "Like" Us on Facebook!
</div>
</div>
</div>
<img src="images/bubble.png" alt="Carolina Mobility Mobile" />
<div id="navigation">
<div class="button">
<div class="star"><img src="images/star.png" alt="star" /></div>
Inventory
<div class="arrow"><img src="images/arrow_rt.png" alt="arrow_rt" /></div>
</div>
<div class="button">
<div class="star"><img src="images/star.png" alt="star" /></div>
Locations
<div class="arrow"><img src="images/arrow_rt.png" alt="arrow_rt" /></div>
</div>
<div class="button">
<div class="star"><img src="images/star.png" alt="star" /></div>
Contact Us
<div class="arrow"><img src="images/arrow_rt.png" alt="arrow_rt" /></div>
</div>
<div class="button">
<div class="star"><img src="images/star.png" alt="star" /></div>
About Us
<div class="arrow"><img src="images/arrow_rt.png" alt="arrow_rt" /></div>
</div>
<div class="button">
<div class="star"><img src="images/star.png" alt="star" /></div>
Videos
<div class="arrow"><img src="images/arrow_rt.png" alt="arrow_rt" /></div>
</div>
<div class="button">
<div class="star"><img src="images/star.png" alt="star" /></div>
Top 10 Reasons
<div class="arrow"><img src="images/arrow_rt.png" alt="arrow_rt" /></div>
</div>
<div class="button">
<div class="star"><img src="images/star.png" alt="star" /></div>
Full Website
<div class="arrow"><img src="images/arrow_rt.png" alt="arrow_rt" /></div>
</div>
<div id="locations">
<img src="images/charlotte.png" alt="charlotte" />
<img src="images/columbia.png" alt="columbia" /><br />
<img src="images/greenville.png" alt="greenville" />
<img src="images/savannah.png" alt="savannah" />
</div>
</div>
</div>
</body></html>
Remove the font-size from your body CSS. This static number prevents the text from resizing to be larger than 16 (very small) pixels.
Also, to enable zooming, remove maximum-scale=1 as well.
Your meta tag isn't correctly formed, it needs a / before the >:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
Related
first post here so please be gentle ;-)
I have a query about popup modals, that not only have an image within the modal, but some text too. Attached my current status of the coding, however could not figure out an easy way to get the text caption for each image. The image popups are correct, however text returned is TEXT1 for whichever I click.
Any help would be appreciated. Many thanks
Sabs
function onClick(element) {
document.getElementById("modal01").style.display = "block";
document.getElementById("img01").src = element.src;
document.getElementsByClassName("modal-content").innerHTML = this.alt;
}
#import url('https://fonts.googleapis.com/css?family=Varela+Round');
html, body {
overflow-x: hidden;
/*height: 100%;*/
}
body {
background: url('../img/dark.jpg');
background-size: cover;
padding: 0;
margin: 0;
font-family: 'Varela Round', sans-serif;
}
.main {
margin: 0 auto;
height: 100%;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-gap: 5px;
margin-top: 100px;
margin-right: 2rem;
margin-left: 2rem;
}
.mainInner img{
width: 100%;
object-fit: cover;
/*display:inline-block;*/
}
/* ---------------- placement of images within our grid system -----*/
.mainInner:nth-child(1){ grid-column: span 1; grid-row: span 1; }
.mainInner:nth-child(2){ grid-column: span 1; grid-row: span 1; }
.mainInner:nth-child(3){ grid-column: span 1; grid-row: span 1; }
.mainInner:nth-child(1):hover, .mainInner:nth-child(2):hover, .mainInner:nth-child(3):hover{
transform: scale(1.05);
cursor: pointer;
transition: .5s;
opacity: 0.30;
}
/*----------------------- styling the modal ------------------------*/
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 60px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /*Full height*/
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
/*styling the caption text*/
color: #f1f1f1;
font-size: 20px;
font-weight: bold;
text-align: center;
}
/* Modal Content */
.modal-content {
margin: auto;
display: block;
/*position: absolute;*/
/*transform: translate(-50%, -50%);*/
width: 80%;
max-width: 700px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
#-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
#keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
#media only screen and (max-width: 650px){
.main{
display: block;
}
.mainInner{
margin-bottom: 1rem;
}
.modal-content {
width: 100%;
}
}
/*----------------- end modal styling -----------------*/
<!DOCTYPE html>
<html>
<head>
<title>Popup Modal Demo</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
<div class="main center">
<div class="mainInner"><img id="myImg1" src="img/brands/AyalaBar.png" onclick="onClick(this)"></div>
<div class="mainInner"><img id="myImg2" src="img/brands/BastianInverun.png" onclick="onClick(this)"></div>
<div class="mainInner"><img id="myImg3" src="img/brands/breuning.png" onclick="onClick(this)"></div>
</div>
<!-- 1st IMAGE MODAL -->
<div id="modal01" class="modal" onclick="this.style.display='none'">
<div class="modal-content">
<span class="close">×</span>
<p>TEXT1</p>
<img id="img01" style="max-width: 100%">
</div>
</div>
<!-- 2nd IMAGE MODAL -->
<div id="modal01" class="modal" onclick="this.style.display='none'">
<div class="modal-content">
<span class="close">×</span>
<p>TEXT2</p>
<img id="img01" style="max-width: 100%">
</div>
</div>
<!-- 3rd IMAGE MODAL -->
<div id="modal01" class="modal" onclick="this.style.display='none'">
<div class="modal-content">
<span class="close">×</span>
<p>TEXT3</p>
<img id="img01" style="max-width: 100%">
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="script2.js"></script>
</body>
</html>
I'm a little bit late on this post - welcome to SO, Sabs! Kudos for making a first post with a clear and concise problem, and including your relevant code.
At first glance, the reason you're always returning "Text 1" is because your JS file hardcodes modal01 as the ID for each modal. So while the function is called whenever you click any of the images, it will always show that ID.
You don't have to re-invent the JS and CSS for a modal popup, though - a much simpler way is to use Bootstrap. You can still edit CSS and JS to your heart's content by giving IDs and classes, but you don't need much to call it. You need to include source CSS/JS files (from CDN here for simplicity's sake):
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
Calling the modal from your HTML uses a data-toggle and a data-target:
<div class="main center">
<div class="mainInner"><img id="myImg1" src="img/brands/AyalaBar.png" data-toggle="modal" data-target="#myModal1"></div>
<div class="mainInner"><img id="myImg2" src="img/brands/BastianInverun.png" data-toggle="modal" data-target="#myModal2"></div>
<div class="mainInner"><img id="myImg3" src="img/brands/breuning.png" data-toggle="modal" data-target="#myModal3"></div>
</div>
The modals:
<!-- Beginning Modal 1 -->
<div class="modal fade" id="myModal1">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading 1</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<p>The first modal..</p>
<img src="img/brands/AyalaBar.png">
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End Modal 1 -->
<!-- Beginning Modal 2 -->
<div class="modal fade" id="myModal2">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading 2</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<p>A second modal..</p>
<img src="img/brands/BastianInverun.png">
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End Modal 2 -->
<!-- Beginning Modal 3 -->
<div class="modal fade" id="myModal3">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading 3</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<p>The third modal..</p>
<img src="img/brands/breuning.png">
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End Modal 3 -->
I have an ionic 1 app that I'm working on updating.
One of the new requirements is that I add an 'x' on the right side of an input field.
I've tried a number of things and this is the closest I think I've gotten to the right implementation, but still doesn't work.
Any thoughts?
<form action="">
<input type="text" onfocus="this.placeholder = ''" style="border-top:none; border-left:none; border-right:none; border-bottom:solid gray 3px; background:transparent; margin-left:auto; margin-right:auto; text-align:center; font-size:1.2em; margin-bottom:20px; color:#acb2b4;" placeholder="{{profileEdit.userName}}" ng-model="profileEdit.theUserName">
<i class="icon ion-close" style="font-size:14px;" item-right></i>
</form>
You can use the list and item classes, along with item-icon-right class to achieve what you are looking for. Here is a working sample:
angular.module('ionicApp', ['ionic'])
.controller('MainCtrl', function($scope) {
});
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Input X Icon</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="MainCtrl">
<ion-header-bar class="bar-positive">
<h1 class="title">Input X Icon On Right</h1>
</ion-header-bar>
<ion-content>
<form>
<div class="card list">
<div class="item item-icon-right">
<input type="text" placeholder="Placeholder Goes Here">
<i class="icon ion-close"></i>
</div>
</div>
</form>
</ion-content>
</body>
</html>
I have problem with materialize collapsible and date picker. Collapsible is not even opening on click and the date picker too. Date picker placed in Personal details - collapsible item. Someone please help me to fix collapsible and date picker.
Check: Placements App
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Placements MGIT</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<!-- If CDN not available, loading JQuery from Server-->
<script>
if (!window.jQuery) {
document.write('<script src="/js/jquery.min.js"><\/script>');
}
</script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="/js/materialize.min.js"></script>
</head>
<body>
<nav>
<div class="nav-wrapper">
MGIT Placements
<i class="material-icons">M</i>
<ul class="left hide-on-med-and-down">
<li class="active">Login</li>
<li>Register</li>
<li>Upcoming</li>
<li>Contact</li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li class="active">Home</li>
<li>Login</li>
<li>Register</li>
<li>Upcoming</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div class="row">
<div class="student-profile">
<div class="col l8 offset-l2 m10 offset-m1">
<ul class="collapsible" popout" data-collapsible="accordion">
<li>
<div class="collapsible-header">Pefrsonal Info</div>
<div class="collapsible-body">
<div id="personal">
<div class="card black-text">
<div class="input-field col s12 m4 l4">
<input type="text" id="firstname" />
<label for="firstname">First Name:</label>
</div>
<div class="input-field col s12 l4 m4">
<input type="text" id="lastname" />
<label for="lastname">Last Name:</label>
</div>
<div class="input-field col s12 l4 m4">
<input type="text" id="surname" />
<label for="surname">Surname:</label>
</div>
<div class="input-field col s12 m6 l6">
<input type="text" id="father" />
<label for="father">Father Name:</label>
</div>
<div class="input-field col s12 l6 m6">
<input type="text" id="mother" />
<label for="mother">Mother Name:</label>
</div>
<div class="input-field col s12 m6 l6">
<input type="date" class="datepicker" />
</div>
</div>
</div>
</div>
</li>
<li>
<div class="collapsible-header">Academics Info</div>
<div class="collapsible-body"> Acaademics Should be here</div>
</li>
<li>
<div class="collapsible-header">Change Password</div>
<div class="collapsible-body">Password Change Shoule be here</div>
</li>
<li>
<div class="collapsible-header">View Data </div>
<div class="collapsible-body" id="dynamicdata">View Data</div>
</li>
</ul>
</div>
</div>
</div>
<style type="text/css">
<style type="text/css">
body {
background-color: #FCFCFC;
}
nav{
background-color: #33597C;
}
.updates{
position: absolute;
padding: 20px;
background: transparent;
}
marquee{
padding: 20px;
}
.vline{
width: 1px;
position: absolute;
background-color: orange;
}
.vline.medium{
top: initial;
height: 420px;
}
.small-login{
padding: 20px;
}
.login-fields{
padding: 20px;
}
h6{
color: #33597C;
}
h2 {
color: grey;
}
/* #4A6787 ; #33597C; */
.login-bg {
margin-top: 5%;
}
#message {
color: red;
margin: 20px;
}
#lgn_btn{
top: 20px;
background-color: #33597C;
width: 60%;
}
/* label focus color */
.input-field input[type=text]:focus + label {
color: #1A237E;
}
/* label underline focus color */
.input-field input[type=text]:focus {
border-bottom: 1px solid #1A237E;
box-shadow: 0 1px 0 0 #1A237E;
}
/* label focus color */
.input-field input[type=password]:focus + label {
color: #1A237E;
}
/* label underline focus color */
.input-field input[type=password]:focus {
border-bottom: 1px solid #1A237E;
box-shadow: 0 1px 0 0 #1A237E;
}
</style>
<script type="text/javascript">
jresp = '{% autoescape off%}{{jresp}}{% endautoescape%}';
resp = JSON.parse(jresp);
rollno = resp['rollno'];
details = resp['data'];
var update = document.getElementById('dynamicdata')
for (keys in details) {
update.innerHTML += "<b>"+keys[0].toUpperCase()+keys.slice(1).toLocaleLowerCase()+": </b>"+details[keys]+"<br />"
}
$('.datepicker').pickadate({
selectMonths: true,
selectYears: 15,
});
$(".button-collapse").sideNav();
$(document).ready(function () {
$('.collapsible').collapsible({
accordion: false // A setting that changes the collapsible behavior to expandable instead of the default accordion style
});
});
</script>
</body>
</html>
Well, after reading code, debugging and Googling I am able to fix the problem.
First thing - Materialize Collapsible.
Clicking on collapsible header, display property of collapsible body
is not changing.
So, adding display property for the element collapsible body, will fix the problem.
collapsible-body{
display: block;
}
`
Second thing - Materialize DatePicker
On Chrome, it is not responding to mouse clicks. But, responding to space button.
So, to fix this issue, I just added a bit of JQuery code as shown below.
Date Picker HTML Code
<div class="input-field col s12 m6 l6">
<label for="dob">Date of Birth:</label>
<input id="dob" type="text" class="datepicker" />
</div>
and mouse click event that triggers...
$('.datepicker').pickadate({
selectMonths: true,
selectYears: 40,
min: new Date(1990,0,1),
max: new Date(2000,11,31),
closeOnSelect: true,
});
$("#dob").click(function (event) {
event.stopPropagation();
$(".datepicker").first().pickadate("picker").open();
});
Here, you can see the working materialize date picker...
$('.datepicker').pickadate({
selectMonths: true,
selectYears: 40,
min: new Date(1990, 0, 1),
max: new Date(2000, 11, 31),
closeOnSelect: true,
});
$("#dob").click(function(event) {
event.stopPropagation();
$(".datepicker").first().pickadate("picker").open();
});
<head>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
</head>
<body>
<div class="input-field">
<label for="dob">Date of Birth:</label>
<input id="dob" type="date" class="datepicker" />
</div>
</body>
this is a very basic one
i have a form in html
in which i want following functionality
1. when user click submit button then the mail goes and a thank you message appear in same place without refreshing the page
here is my html
in which there are two div which is show text and get text on body load i am showing get text div and on submit i have to show next div but this not happening i dont know eher i am doing wrong
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<STYLE></STYLE>
<script src="jquery.js"></script>
<TITLE></TITLE>
<META content="text/html; charset=UTF-8" http-equiv=content-type>
</head>
<body style="margin:0; padding:0;">
<div style=" width:311px; height:576px; background:url(img/bg.png) no-repeat; position:relative; ">
<div class="getText">
<form action="" method="POST">
<input type="text" name="name" value="" style="width:207px; height:26px; border:1px solid black; position:absolute; top:235px; left:47px; "/>
<input type="text" name="email" value="" style="width:207px; height:26px; border:1px solid black; position:absolute; top:286px; left:47px; "/>
<input type="text" name="" value="" style="width:207px; height:26px; border:1px solid black; position:absolute; top:337px; left:47px; "/>
<textarea cols="23" rows="4" style="border:1px solid black; position:absolute; top:387px; left:47px;"></textarea>
<input type="submit" name="submit" value="Submit" style="width:76px; height:27px; border:0; outline:none; color:#ffffff; background-color:#ff0000; font-weight:bold; cursor:pointer; font-size:14px; font-family:verdana; position:absolute; top:470px; left:49px;" id="sub">
</form>
</div>
<div class="showText" style="width:247px; height:282px; background-color:#ffac00; color;#292a2a; text-align:center; font-weight:bold; font-size:14px; font-family:verdana; position:absolute; top:216px; left:28px;"><br><br><br>
Thank You !<br>
You shall hear from us soon !!
</div>
</div>
<script>
$(document).ready(function(){
$(".showText").hide();
("#sub").on("click",function( ) {
$(".showText").show();
$(".getText").hide();
});
});
</script>
</body>
</html>
on click of submit page is getting refreshed and not showing thank you div i didnt want to refresh the page
Here is something to get you started on using AJAX: http://jsfiddle.net/j8rnW/
$(document).ready(function () {
$(".showText").hide();
$("#sub").on("click", function (e) {
e.preventDefault();
$.ajax({
url: '',
method: 'post',
data : {}, //pass your form elements as key-value pairs
success: function (response) {
$(".showText").show();
$(".getText").hide();
}
});
});
});
Using ajax would help. Or you can change the input type to 'button' instead of submit. Because submit always posts the form values and refreshes the page
I'm porting our existing web application from Wicket 1.4 to 1.5. In the app there are two template pages which are children of a base page. The templates are named secure and unsecure, and they define pages for authenticated and unauthenticated users. Any pages in the app inherit from these templates. In Wicket 1.4 this set up worked fine without any problems.
After porting to Wicket 1.5 I get the following error:
Unable to find component with id 'PageTitle' in [HtmlHeaderContainer]
'PageTitle' is a Wicket Label and is used dynamically build the page title in the base page, it is positioned in the <head> tag of the base page mark up. What I've discovered is that the <head> mark up is being rendered twice, so I presume I get the error because Wicket creates the PageTitle once and then tries to create it again (The <head> is defined in the base page mark up only).
The quick and dirty fix is to move the PageTitle to the templates (duplicated code). Is there a better way to solve this problem?
Hopefully my description is clear enough, however, I can supply a code example if needed.
The <head> tag should only be used once in page markup. This means that if you have a <head> tag in a base page, no page that extends it should include it. Further, no component should use the <head> tag.
Instead, use the <wicket:head> tag to include any additional content that is not included in your base page. Wicket will use the <wicket:head> tag to dynamically inject content into the <head> tag that is rendered and delivered to the browser.
OK as requested here's a code sample. BasePage.java:
public class BasePage extends WebPage
{
public BasePage()
{
this(new PageParameters());
}
public BasePage(PageParameters parameters)
{
add(new Label("PageTitle", "Gosh Wicket version migration is hard work"));
}
...
}
BasePage.html (doctype etc., removed):
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<title wicket:id="PageTitle">Page title goes here</title>
<!-- This comment will appears in both the headers I see in the source, therefore this header is rendering twice-->
<link type="text/css" rel="stylesheet" href="css/application.css" />
<script type="text/javascript" src="js/rollover.js"></script>
<script type="text/javascript" src="js/menus.js"></script>
</head>
<wicket:child/>
</html>
UnSecureTemplate java:
public class UnSecureTemplate extends BasePage
{
public UnSecurePageTemplate()
{
super(new PageParameters());
}
public UnSecureTemplate(PageParameters parameters)
{
super(parameters);
Label footerText = new Label("footerText", footerComesFromAPropertiesFile);
add(footerText);
//Instance variables here defined in BasePage
// Header bar links - left
Link<Object> hdrHome = addLink("hdrHome", HomePage.class);//this method is in BasePage in case you're wondering
hdrHome.add(new Image("mgrLogo", new ContextRelativeResource(poLogoUrl)));
// Header bar links - Right
ExternalLink hdrCorporate = new ExternalLink("hdrCorporate", anExternnalLink);
hdrCorporate.add(new Image("operatorLogo", new ContextRelativeResource(opLogoUrl)));
add(hdrCorporate);
}
UnSecureTemplate.html:
<wicket:extend xmlns="http://www.w3.org/1999/xhtml" lang="en"
xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd">
<body id="body" onload="preloadImages(); return true;">
<div class="centerbody">
<a name="top"></a>
<div id="mast">
<a wicket:id="hdrHome" title="home page">
<img wicket:id="mgrLogo" id="mgr-logo" src="images/logoShort.png" width="171" height="45" wicket:message="alt:remon.logoAltText" />
</a>
<a wicket:id="hdrCorporate" title="Web Site">
<img wicket:id="operatorLogo" id="po-logo" src="images/logoNoStrapline.png" height="45" wicket:message="alt:remon.logoAltText" />
</a>
</div>
<div id="mainmenubar" style="width: 100%">
<div class="menubaritem" style="width: 171px;">
</div>
<div class="menubaritem" style="width: auto; border-right: none;">
</div>
</div>
<div id="mainpanel">
<div id="leftnav">
<p> </p>
</div>
<div id="rightpanel">
<wicket:child/>
</div> <!-- right panel -->
</div> <!-- main panel -->
<div id="footer" style="height:15px;">
<span><span wicket:id="footerText">Footer Text</span></span>
</div>
<div id="footerspacer">
</div>
</div> <!-- centre body -->
</body>
</wicket:extend>
}
An application page, LogIn.java:
public class Login extends UnSecureTemplate
{
public Login()
{
this(new PageParameters());
}
public Login(PageParameters pageParameters)
{
super(pageParameters);
String welcomeResourceString = stringObtainedFromPropertiesFile;
add(new Label("welcome", welcomeResourceString));
add(new Label("loginHeader", thisAlsoComesFromPropertiesFile);
LoginForm form = new LoginForm("loginform", new SimpleUser(), pageParameters);
form.add(new FeedbackPanel("feedback"));
add(form);
}
...
}
LogIn.html:
<wicket:extend xmlns="http://www.w3.org/1999/xhtml" lang="en"
xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd">
<h2 wicket:id="welcome">Welcome to the Application</h2>
<div style="margin: 20px 150px 20px 150px; text-align: center;">
<p wicket:id="loginHeader"></p>
<form wicket:id="loginform" id="loginform" >
<table style="display: table; border: 0px; margin: auto;" wicket:message="summary:loginTableSummary">
<tr style="display: table-row;">
<td class="login" colspan="2"><span wicket:id="feedback">Feedback</span></td>
</tr>
<tr style="display: table-row;">
<td class="login">
<label for="username"><wicket:message key="username">Username</wicket:message></label>
</td>
<td class="login">
<input wicket:id="username" id="username" type="text" name="user" value="" size="30" maxlength="50"/>
</td>
</tr>
<tr style="display: table-row;">
<td class="login">
<label for="password"><wicket:message key="password">Password</wicket:message></label>
</td>
<td class="login">
<input wicket:id="password" id="password" type="password" name="pswd" value="" size="30" maxlength="16"/>
</td>
</tr>
<tr style="display: table-row;">
<td class="login"> </td>
<td class="login"><input class="btn" type="submit" name="Login" value="Login" wicket:message="title:loginButtonTitle"/></td>
</tr>
</table>
</form>
</div>
</wicket:extend>