I am developing a VB.NET program. I currently have an ASP Textbox with a label showing inside it. But now the customer has to manually delete this label before entering their own text. How do I get this label to vanish as soon as they begin typing?
My script is nearly working now for txtFind. But in this case, it shows a different textbox to display watermark image. How can I reset this watermark to only activate the txtFind textbox instead? And to remove the textbox on left-hand side? Here is my new ASPX file code:
<script type="text/javascript" language="javascript" >
function GetChart(thepart, thepartdesc, thecolor, row)
{
Form1.part_transfer.value = thepart;
Form1.part_desc_transfer.value = thepartdesc;
Form1.submit();
}
</script>
<head>
<title></title>
<style type="text/css">
.DataGridFixedHeader {background-color: #336699; color:White; font-weight: "bold"; position:relative; top:expression(this.offsetParent.scrollTop);}
#txtWatermark{ width:150; padding:5px; outline:none; height:20px; }
.focusField{ border:solid 2px #73A6FF; background:#EFF5FF; color:#000; }
.idleField{ background:#EEE; color: #6F6F6F; border: solid 2px #DFDFDF; }
</style>
</head>
<body>
<form runat="Server" defaultbutton= "btnFind" method="post" id="Form1">
<div style="font-size:18pt; font-family:verdana; font-weight:bold; color:#336699">
Parts Watch List
</div>
<hr style="font-weight: bold; font-size: 20pt; color:#000080;" />
<div style="height: 380px; text-align: center; position: static;">
<input id="part_transfer" type="hidden" runat="server"/>
<input id="part_desc_transfer" type="hidden" runat="server"/>
<asp:Panel id="Panel1" runat="server" HorizontalAlign = "Center">
<span style="font-weight: bold; text-align: left; font-size: 15pt;">
Calculation:</span><br />
Reliability Rate = 1 - ( number of failed parts in the last 6 months / Part Multiplier * Average instrument Census in the last 6 months),<br />
Where
<br />
Number of failed parts - Summation of failures of a part for a 6 month period<br />
Part Multiplier - Number that represents how many times a part is used on the intrument<br />
Average instrument census - Average of the instrument census for the same
6 month timeframe as failed parts<br />
<br />
Please choose one of the parts below to view the control charts.</p>
</asp:Panel>
<asp:Panel id="Panel2" runat="server" Visible="false">
<chart:WebChartViewer id="WebChartViewer1" runat="server" HorizontalAlign="Center" />
</asp:Panel>
</div>
<hr style="width: 90%; position: static;" />
<div style="text-align: center; position: static; ">
<asp:Label id="CensusLastUpdate" runat="server"/><br />
<asp:Button id="btnExport" runat="server" Text="Export to Excel"></asp:Button>
<asp:CheckBox id="check1" Text="Display Only Parts Below Threshold" TextAlign="Right" AutoPostBack="True" OnCheckedChanged="ReRun_Main" runat="server" />
<asp:TextBox ID="txtFind" Text="Enter Part Number" runat="server" />
<asp:Button ID="btnFind" Text="Search" runat="server" OnClick="SearchTable" />
</div>
<% Dim scrollPosURL As String = "../includes/ScrollPos.htc"%>
<input id="saveScrollPos" type="hidden" runat="server" name="saveScrollPos"/>
<input name="txtWatermark" id="txtWatermark" value="Type something here" type="text"/>
<table border="0" cellspacing="0" align="center" style="border-collapse:collapse;position:relative;left:-9">
<tr>
<td>
<div style="OVERFLOW: auto; HEIGHT: 400px; vertical-align: top; ">
<ASP:DATAGRID ID="dgTable" HorizontalAlign="Center" runat="server" AutoGenerateColumns="False" ShowHeader="True" OnItemDataBound="DataGrid1_ItemDataBound">
<AlternatingItemStyle BackColor = "#eeeeee" />
<HEADERSTYLE CssClass="ms-formlabel DataGridFixedHeader" />
<COLUMNS>
<ASP:BOUNDCOLUMN HEADERTEXT="PN" DATAFIELD="PART_NUM" READONLY="true" ItemStyle-Width="130px" ItemStyle-Font-Size="8"/>
<ASP:BOUNDCOLUMN HEADERTEXT="PART_DESC" DATAFIELD="PART_DESC" READONLY="true" ItemStyle-Width="150px" ItemStyle-Font-Size="8"/>
<ASP:BOUNDCOLUMN HEADERTEXT="numFailed" DATAFIELD="NUM_FAILED" READONLY="true" ItemStyle-Width="150px" ItemStyle-Font-Size="8"/>
<ASP:BOUNDCOLUMN HEADERTEXT="AvgCensus" DATAFIELD="AVG_CENSUS" READONLY="true" ItemStyle-Width="150px" ItemStyle-Font-Size="8"/>
<ASP:BOUNDCOLUMN HEADERTEXT="PartMultiplier" DATAFIELD="PartMultiplier" READONLY="true" ItemStyle-Width="150px" ItemStyle-Font-Size="8"/>
<ASP:BOUNDCOLUMN HEADERTEXT="ReliabilityRate" DATAFIELD="RELIABILITY_RATE" READONLY="true" ItemStyle-Width="105px" ItemStyle-Font-Size="8"/>
<ASP:BOUNDCOLUMN HEADERTEXT="PRIORITY" DATAFIELD="PRIORITY" READONLY="true" Visible="False" ItemStyle-Width="0px" ItemStyle-Font-Size="8"/>
<ASP:BOUNDCOLUMN HEADERTEXT="Criticality" DATAFIELD="Criticality" READONLY="true" ItemStyle-Width="105px" ItemStyle-Font-Size="8"/>
</COLUMNS>
</ASP:DATAGRID>
</div>
</td>
</tr>
</table>
</form>
<!-- Javascript at the bottom for fast page loading -->
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.js" type="text/javascript"></script>
<script type="text/javascript"> window.jQuery || document.write('<script src="js/libs/jquery-1.6.1.js">\x3C/script>')</script>
<!-- Scripts concatenated -->
<script src="js/plugins.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
<!-- End scripts -->
</body>
</html>
Check out this working jsFiddle demo:
HTML:
<input name="status" id="status" value="Type something here" type="text"/>
CSS:
#status{
width:150;
padding:5px;
outline:none;
height:20px;
}
.focusField{
border:solid 2px #73A6FF;
background:#EFF5FF;
color:#000;
}
.idleField{
background:#EEE;
color: #6F6F6F;
border: solid 2px #DFDFDF;
}
jQuery:
var $input = $("#status"),
defaultVal = $input[0].defaultValue;
$input.addClass("idleField");
$input.focus(function() {
$input.toggleClass("idleField focusField");
if ($input.val() === defaultVal) { $input.val(""); }
else { $input.select(); }
});
$input.blur(function() {
$input.toggleClass("focusField idleField");
if ($.trim($input.val()) === "") { $input.val(defaultVal); }
});
EDIT - Based on comments, to use jQuery in your ASPX file:
</form>
<!-- Javascript at the bottom for fast page loading -->
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.js" type="text/javascript"></script>
<script type="text/javascript"> window.jQuery || document.write('<script src="js/libs/jquery-1.6.1.js">\x3C/script>')</script>
<!-- Scripts concatenated -->
<script src="js/plugins.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
<!-- End scripts -->
</body>
In the script.js is where you would put the jQuery I posted above.
If you are working in ASP, you will need to do some client-side javascript calls to clear out the textbox when it gets the focus. Here is an article on how to do this:
http://forums.asp.net/t/1085050.aspx/1
If you are using Winforms (the question was a bit unclear), you could do this through an event on the textbox (probably the GotFocus event). You would evaluate the box to see if it has the default text (like "enter name here") and if it did you would wipe it out.
Both of these solutions follow the same pattern of tapping into an event to tell you when to clear out the box. Don't forget to make sure it is the text you put in the box. Otherwise if the user comes back to change something in the box, you will wipe out their data.
You could also get trickier and if the user leaves the textbox without entering data, you could put the original default text back in the textbox.
Use the TextBoxWaterMark extender from the AjaxControlToolkit. It's all done for you!
<asp:textbox runat="server" id="FirstNameTextBox" />
<ajaxtoolkit:TextBoxWaterMarkExtender TargetControlId="FirstNameTextBox"
WatermarkText="Enter Your First Name" />
Related
One of our vendors recently performed a server update for our security system (badge readers, door accessibility, door access reporting, etc.). The contractor only backed up half of the SQL database (omitted database CCFTEvent; bush league) that this system and our site uses on the front-end for reporting. Now, one of the reports that we widely use to monitor door access in/out is borked. I'm new to SQL and the original developer who helped bridge/code the gap between this security system and our front-end is long gone. I am hoping for some help or guidance from the fine people on this site.
Some of the developers of the security system we use tried to mock up what they "think" it was but it's obvious incorrect. Below is the code they provided us but it does not work.
> //** Stored Procedure dbo.InOut located in database CCFTEvent **//
USE [CCFTEvent]
GO
/****** Object: StoredProcedure [dbo].[InOut] Script Date: 1/17/2023 2:45:15 PM ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
-- =============================================
-- Author: Name
-- Create date:
-- Description:
-- =============================================
ALTER PROCEDURE [dbo].[InOut]
#nameOPID nvarchar(120) = ''
AS
BEGIN
-- SET NOCOUNT ON added to prevent extra result sets from
-- interfering with SELECT statements.
SET NOCOUNT ON;
SELECT
ch.LastName
, ch.FirstName
, ctfti.Name AS [CardType]/*, ctfti.Description*/
, c.EncodedNumber AS [CardNumber]
FROM Cardholder AS ch
JOIN Card as c
ON CardholderID = FTItemID
JOIN CardType as ct
ON FTItemID = CardTypeID
Left JOIN PersonalData as opid
ON opid.CardholderID = CardholderID
AND opid.PersonalDataFieldID = 672
Left JOIN PersonalData as pdsso
ON sso.CardholderID = CardholderID
AND sso.PersonalDataFieldID = 728
JOIN CardholderLocation as chl
ON chl.cardholderID = ch.FTItemID
JOIN FTItem as chfti
on ch.FTItemID = chfti.ID
JOIN FTItem as ctfti
ON ctfti.ID = ct.FTItemID
WHERE
c.IsEnabled = 1 --Hide Inactive users
AND ch.LastName like CONCAT('%', #nameOPID, '%')
OR ch.FirstName like CONCAT('%', #nameOPID, '%')
OR convert(nvarchar, pdopid.value) like CONCAT('%', #nameOPID, '%')
ORDER BY /*chl.AccessTime DESC, */
ch.LastName, ch.FirstName, OPID, c.EncodedNumber
END
> //** EmployeeTransactions.aspx.cs File **//
<%# Page Language="C#" AutoEventWireup="true" CodeFile="EmployeeTransactions.aspx.cs" Inherits="GallagherReports.EmployeeTransactions" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Employee Transactions</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<!--
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha256-rByPlHULObEjJ6XQxW/flG2r+22R5dKiAoef+aXWfik=" crossorigin="anonymous" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/w/bs4/dt-1.10.18/datatables.min.css"/>
-->
<link rel="stylesheet" href="lib/bootstrap.min.css" />
<link rel="stylesheet" href="lib/jquery-ui.min.css" />
<link rel="stylesheet" type="text/css" href="lib/datatables.min.css"/>
<style>
h1.header-style {
margin-bottom: 30px;
}
h2.header-style {
color: #999;
font-size: 24px;
letter-spacing: 3px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
.container > .row {
margin-top: 30px;
}
#picture img {
width: 100%;
height: auto;
}
</style>
<!--
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha256-KM512VNnjElC30ehFwehXjx1YCHPiQkOPmqnrWtpccM=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.js" integrity="sha256-gQzieXjKD85Ibbpg4l8GduIagpt4oUSQRYaDaLd+8sI=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.datatables.net/w/bs4/dt-1.10.18/datatables.min.js"></script>
-->
<script src="lib/jquery-3.4.1.min.js"></script>
<script src="lib/jquery-ui.min.js"></script>
<script src="lib/popper.min.js"></script>
<script src="lib/jquery-ui-timepicker-addon.min.js"></script>
<script src="lib/bootstrap.min.js"></script>
<script type="text/javascript" src="lib/datatables.min.js"></script>
<script>
// Attaches the DataTable plugin to a GridView
function setDataTable($, table, options) {
// Ensure the element is a non-empty table
if ($(table).is("table") && $(table + " tr").length > 1) {
// Move the first GridView row to a table header element. Otherwise, DataTable will throw an error.
$(table).prepend('<thead></thead>');
$(table + ' tr:first').appendTo(table + ' thead');
// Initiate DataTable
$(table).DataTable(options);
}
}
// Trigger the validator when startDate changes
function onchangeStartDate() {
ValidatorValidate(document.getElementById('<%= dateRangeValidator.ClientID %>'));
}
// Validate the dates such that startDate occurs before endDate
function validateDateTimes(sender, args) {
var fromText = document.getElementById('<%= startDate.ClientID %>').value;
var toText = document.getElementById('<%= endDate.ClientID %>').value;
var fromDate = new Date(fromText);
var toDate = new Date(toText);
if (fromDate.getTime() <= toDate.getTime())
args.IsValid = true;
else
args.IsValid = false;
}
$(document).ready(function($) {
// Apply the DataTable plugin to the gridviews
setDataTable($, '#cardholderInformation', {
"info": false
});
setDataTable($, '#operatorInformation table', {
"info": false,
"paging": false,
"ordering": false
});
// Initialize the datepickers
$('.datetimefield').datetimepicker({
controlType: 'select',
timeFormat: 'HH:mm:ss',
showTimepicker: false
});
//Set the default dates
if ($('#startDate').val().length + $('#endDate').val().length < 1) {
let today = new Date();
let lastweek = new Date();
lastweek.setDate(lastweek.getDate() - 7);
let startDate = $.datepicker.formatDate("mm/dd/yy", lastweek)
let endDate = $.datepicker.formatDate("mm/dd/yy", today)
$('#startDate').val(startDate);
$('#endDate').val(endDate);
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:HiddenField ID="badgeNumber" runat="server" Value="" />
<div class="container">
<div class="row">
<div class="col-12">
<h1 class="header-style">Employee Lookup</h1>
<asp:Label runat="server" ID="test1" Text=""></asp:Label>
<div class="form-row">
<div class="col-12">
<asp:CustomValidator id="dateRangeValidator"
ControlToValidate="endDate"
Display="Static"
ErrorMessage="End date must occur on or after the start date."
ForeColor="Red"
OnServerValidate="dateRangeValidator_ServerValidate"
ClientValidationFunction="validateDateTimes"
ValidationGroup="ValidationGroup"
runat="server"/>
</div>
<div class="col-4">
<asp:TextBox ID="nameOPID" Columns="4" MaxLength="30" Text="" runat="server" cssclass="form-control" placeholder="Last name or OPID" />
</div>
<div class="col-2">
<asp:TextBox ID="startDate" Columns="4" MaxLength="30" Text="" runat="server" cssclass="form-control datetimefield" onchange="onchangeStartDate()" placeholder="Start Date" />
</div>
<div class="col-auto text-center" style="padding-top: 8px;">
to
</div>
<div class="col-2">
<asp:TextBox ID="endDate" Columns="4" MaxLength="30" Text="" runat="server" cssclass="form-control datetimefield" placeholder="End Date" />
</div>
<div class="col">
<asp:button id="nameOPIDsubmit" runat="server" Text="Submit" onclick="Button1_click" cssclass="btn btn-primary"/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<h2 class="header-style">Cardholders</h2>
<asp:GridView id="cardholderInformation"
runat="server"
AutoGenerateColumns="False"
CellPadding="4"
CellSpacing="0"
DataSourceID="SelectCardholderInformation"
ShowFooter="False"
CssClass="table table-sm"
EmptyDataText="Please enter an employee's first, last, or OPID."
showheader="true"
onrowcommand="GridViewButtonClick">
<Columns>
<asp:ButtonField CommandName="selectCard" HeaderText="" text="Select" controlstyle-cssclass="btn btn-sm btn-primary" />
<asp:BoundField DataField="firstName" HeaderText="First Name" />
<asp:BoundField DataField="lastName" HeaderText="Last Name" />
<asp:BoundField DataField="CardNumber" HeaderText="Card Number" ItemStyle-CssClass="hide-display" HeaderStyle-CssClass="hide-display" />
<asp:BoundField DataField="CardHolderID" HeaderText = "operatorID" ItemStyle-CssClass="hide-display" HeaderStyle-CssClass="hide-display" />
<asp:BoundField DataField="OPID" HeaderText="OPID" />
<asp:BoundField DataField="SSO" HeaderText="SSO" />
</Columns>
</asp:GridView>
</div>
</div>
<div class="row">
<div class="col-sm-4 col-xs-12">
<div id="picture" runat ="server" class="flex-item"></div>
</div>
<div class="col-sm-8 col-xs-12">
<div>
<asp:Panel ID="operatorInformation" runat="server"></asp:Panel>
</div>
</div>
</div>
</div>
<asp:SqlDataSource
ID="SelectCardholderInformation"
runat="server"
ConnectionString="<%$ ConnectionStrings: GALGCENTRAL %>"
OnSelecting="SelectCardholderInformation_Selecting"
SelectCommand="
execute dbo.SelectCardholderInformation
#nameOPID = #nameOPID
"
>
<SelectParameters>
<asp:ControlParameter ControlID="nameOPID" Name="nameOPID" DefaultValue="" PropertyName="Text" />
<asp:ControlParameter ControlID="startDate" Name="startDate" DefaultValue="" PropertyName="Text" />
<asp:ControlParameter ControlID="endDate" Name="endDate" DefaultValue="" PropertyName="Text" />
</SelectParameters>
</asp:SqlDataSource>
<asp:SqlDataSource
ID="SqlInOut"
runat="server"
ConnectionString="<%$ ConnectionStrings:GALGEVENTS %>"
OnSelecting="SqlInOut_Selecting"
SelectCommand="
exec dbo.InOut #card_No=#CardNumber, #startDate = #startDate, #endDate = #endDate
">
<SelectParameters>
<asp:ControlParameter ControlID="badgeNumber" Name="CardNumber" PropertyName="Value" />
<asp:ControlParameter ControlID="startDate" Name="startDate" DefaultValue="" PropertyName="Text" />
<asp:ControlParameter ControlID="endDate" Name="endDate" DefaultValue="" PropertyName="Text" />
</SelectParameters>
</asp:SqlDataSource>
</form>
</body>
</html>
Error message received on the front-end
My problem is in the title.
My slider is responsive but nothing can be read correctly in small resolution.
For the moment I put it inside a test page of my website:
https://www.assistante-34.com/test.html
You will find the code inside my page.
<!-- #region Jssor Slider Begin -->
<!-- Generator: Jssor Slider Maker -->
<script src="/jssor/jssor.slider-27.5.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
jssor_1_slider_init = function() {
var jssor_1_SlideshowTransitions = [
{$Duration:1000,x:-1,y:2,$Rows:2,$Zoom:11,$Rotate:1,$SlideOut:true,$Assembly:2049,$ChessMode:{$Row:15},$Easing:{$Left:$Jease$.$InExpo,$Top:$Jease$.$InExpo,$Zoom:$Jease$.$InExpo,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InExpo},$Opacity:2,$Round:{$Rotate:0.85}},
{$Duration:1000,$Zoom:11,$SlideOut:true,$Easing:{$Zoom:$Jease$.$InExpo,$Opacity:$Jease$.$Linear},$Opacity:2}
];
var jssor_1_options = {
$AutoPlay: 1,
$SlideDuration: 900,
$FillMode: 1,
$SlideshowOptions: {
$Class: $JssorSlideshowRunner$,
$Transitions: jssor_1_SlideshowTransitions,
$TransitionsOrder: 1
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$,
$SpacingX: 2,
$SpacingY: 2
}
};
var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
/*#region responsive code begin*/
var MAX_WIDTH = 3000;
function ScaleSlider() {
var containerElement = jssor_1_slider.$Elmt.parentNode;
var containerWidth = containerElement.clientWidth;
if (containerWidth) {
var expectedWidth = Math.min(MAX_WIDTH || containerWidth, containerWidth);
jssor_1_slider.$ScaleWidth(expectedWidth);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
$Jssor$.$AddEvent(window, "load", ScaleSlider);
$Jssor$.$AddEvent(window, "resize", ScaleSlider);
$Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
/*#endregion responsive code end*/
};
</script>
<link href="//fonts.googleapis.com/css?family=Roboto:100,100italic,300,300italic,regular,italic,500,500italic,700,700italic,900,900italic&subset=latin-ext,greek-ext,cyrillic-ext,greek,vietnamese,latin,cyrillic" rel="stylesheet" type="text/css" />
<style>
.jssorl-004-double-tail-spin img{animation-name:jssorl-004-double-tail-spin;animation-duration:1.6s;animation-iteration-count:infinite;animation-timing-function:linear}#keyframes jssorl-004-double-tail-spin{from{transform:rotate(0);}to{transform:rotate(360deg);}}.jssorb032{position:absolute}.jssorb032 .i{position:absolute;cursor:pointer}.jssorb032 .i .b{fill:#fff;fill-opacity:1;stroke:#000;stroke-width:1200;stroke-miterlimit:10;stroke-opacity:.25}.jssorb032 .i:hover .b{fill:#bfce00;fill-opacity:.6;stroke:#fff;stroke-opacity:.35}.jssorb032 .iav .b{fill:#000;fill-opacity:1;stroke:#fff;stroke-opacity:.35}.jssorb032 .i.idn{opacity:.3}
</style>
<div id="jssor_1" style="position:relative;margin:0 auto;top:0px;left:0px;width:1300px;height:339px;overflow:hidden;visibility:hidden;">
<!-- Loading Screen -->
<div data-u="loading" class="jssorl-004-double-tail-spin" style="position:absolute;top:0px;left:0px;width:100%;height:100%;text-align:center;background-color:rgba(0,0,0,0.7);">
<img style="margin-top:-19px;position:relative;top:50%;width:38px;height:38px;" src="/jssor/everlia2/double-tail-spin.svg" />
</div>
<div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:1300px;height:339px;overflow:hidden;">
<div>
<img data-u="image" src="/jssor/everlia2/maison-container-equitable.jpg" />
<div style="position:absolute;top:9px;left:84px;width:663px;height:102px;font-family:Roboto,sans-serif;font-size:50px;color:#ffffff;line-height:1;text-align:left;text-shadow:0px 0px 4px;background-color:rgba(255,255,255,0);">
<div>La construction équitable,</div>
<div>nouvelle génération</div>
</div>
<div style="position:absolute;top:9px;left:84px;width:637px;height:107px;font-family:Roboto,sans-serif;font-size:50px;color:#050505;line-height:1;text-align:left;background-color:rgba(255,255,255,0);">
<div>La construction équitable,</div>
<div>nouvelle génération</div>
</div>
<a href="http://www.everlia.com" style="display:block; position:absolute;top:127px;left:87px;width:84px;height:26px;max-width:84px;">
<img style="width:100%;height:100%;" border="0" src="/jssor/everlia2/bouton2.png" />
</a>
</div>
<div>
<img data-u="image" src="/jssor/everlia2/maison-container-evolutive.jpg" />
<div style="position:absolute;top:9px;left:84px;width:897px;height:114px;font-family:Roboto,sans-serif;font-size:50px;color:#ffffff;line-height:1;text-align:left;text-shadow:0px 0px 4px;background-color:rgba(255,255,255,0);">
<div>Construction évolutive,</div>
<div>create your fashion design<br />
</div>
</div>
<div style="position:absolute;top:9px;left:84px;width:870px;height:112px;font-family:Roboto,sans-serif;font-size:50px;color:#050505;line-height:1;text-align:left;background-color:rgba(255,255,255,0);">
<div>Construction évolutive,</div>create your fashion design
</div>
<a href="http://www.everlia.com" style="display:block; position:absolute;top:129px;left:88px;width:84px;height:26px;max-width:84px;">
<img style="width:100%;height:100%;" border="0" src="/jssor/everlia2/bouton2.png" />
</a>
</div>
<div>
<img data-u="image" src="/jssor/everlia2/maisoncontainerclimatique.jpg" />
<div style="position:absolute;top:9px;left:84px;width:962px;height:117px;font-family:Roboto,sans-serif;font-size:50px;color:#ffffff;line-height:1;text-align:left;text-shadow:0px 0px 4px;background-color:rgba(255,255,255,0);">
<div>Une construction climatique<br />et écologique<br />
</div>
</div>
<div style="position:absolute;top:9px;left:84px;width:943px;height:154px;font-family:Roboto,sans-serif;font-size:50px;color:#050505;line-height:1;text-align:left;background-color:rgba(255,255,255,0);">
<div>Une construction climatique</div>
<div>et écologique<br />
</div>
</div>
<a href="http://www.everlia.com" style="display:block; position:absolute;top:129px;left:89px;width:84px;height:26px;max-width:84px;">
<img style="width:100%;height:100%;" border="0" src="/jssor/everlia2/bouton2.png" />
</a>
</div>
<div>
<img data-u="image" src="/jssor/everlia2/maison-container-rapide.jpg" />
<div style="position:absolute;top:9px;left:84px;width:1093px;height:147px;font-family:Roboto,sans-serif;font-size:50px;color:#ffffff;line-height:1;text-align:left;text-shadow:0px 0px 4px;background-color:rgba(255,255,255,0);">
<div>Construction rapide, économique</div>
<div>et performante<br />
</div>
</div>
<div style="position:absolute;top:9px;left:84px;width:1090px;height:107px;font-family:Roboto,sans-serif;font-size:50px;color:#050505;line-height:1;text-align:left;background-color:rgba(255,255,255,0);">
<div>Construction rapide, économique</div>
<div>et performante<br />
</div>
<div></div>
</div>
<a href="http://www.everlia.com" style="display:block; position:absolute;top:129px;left:86px;width:84px;height:26px;max-width:84px;">
<img style="width:100%;height:100%;" border="0" src="/jssor/everlia2/bouton2.png" />
</a>
</div>
<div>
<img data-u="image" src="/jssor/everlia2/maison-container-techno.jpg" />
<div style="position:absolute;top:9px;left:84px;width:1043px;height:153px;font-family:Roboto,sans-serif;font-size:50px;color:#ffffff;line-height:1;text-align:left;text-shadow:0px 0px 4px;background-color:rgba(255,255,255,0);">
<div>Construction container haute</div>
<div>technologie</div>
</div>
<div style="position:absolute;top:9px;left:84px;width:1059px;height:155px;font-family:Roboto,sans-serif;font-size:50px;color:#050505;line-height:1;text-align:left;background-color:rgba(255,255,255,0);">
<div>Construction container haute</div>
<div>technologie</div>
<div></div>
<div></div>
</div>
<a href="http://www.everlia.com" style="display:block; position:absolute;top:129px;left:88px;width:84px;height:26px;max-width:84px;">
<img style="width:100%;height:100%;" border="0" src="/jssor/everlia2/bouton2.png" />
</a>
</div>
</div>
<!-- Bullet Navigator -->
<style>
/* swiper slide*/
.jssorb032 {position: absolute;}
.jssorb032 .i {position:absolute;cursor:pointer;fill:#fff;fill-opacity:1;}
.jssorb032 .1 .b {fill:#bfce00;fill-opacity:1;stroke:#fff;}
.jssorb032 .i:hover .b {fill: #bfce00;}
.jssorb032 .iav .b {fill:#bfce00;}
</style>
<div data-u="navigator" class="jssorb032" style="position:absolute;bottom:12px;right:12px;data-scale="0.5" data-scale-bottom="0.75">
<div data-u="prototype" class="i" style="width:15px;height:15px;">
<svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
<circle class="b" cx="8000" cy="8000" r="5800"></circle>
</svg>
</div>
</div>
</div>
<script type="text/javascript">jssor_1_slider_init();</script>
<!-- #endregion Jssor Slider End -->
May be I do a mistake.
Thank you for your help.
Regards,
Danielle F.
May be I don't understand where I have to change "layer larger with larger font size". I made several tests and if I change something in my slider:
1/ a scroll bar appears in the bottom of the slider
2/ pictures are too large
3/ the button/link is under main text
Furthermore, bullets keeps their small size.
See in my website https://www.assistante-34.com/test.html.
I also precise to you that I'm obliged to add this in the properties of my page so my slider is in full width:
<style>
#imPageRowContent_2,
#imPageRow_2 div[id^="imCell"] {
padding: 0;
width: 100%!important;
height: 100%!important;
}
</style>
Thank your for your enlightened help. I'm not used to using code you know. Regards.
Danielle
Yes, the logic is correct, layers will scale along with the slider.
You can fix it in one of two ways,
Make the layer larger with larger font size.
Specify a class name (e.g. yourlayer) of the layer, write manual media query css code to control the display size of the layer on various resolutions.
<style>
#media screen and (min-width: 1200px) {
.yourlayer {
font-size: 50px !important;
}
}
#media screen and (min-width: 600px) {
.yourlayer {
font-size: 80px !important;
}
}
#media screen and (min-width: 300px) {
.yourlayer {
font-size: 200px !important;
}
}
</style>
Alright. I am making a school project using Visual Web Developer, and I need to use a Master Page. When I make a new web form based on my master page, it inherits the colors of the master page, but there is a table which is not inherited. Here is my master page code:
<%# Master Language="VB" CodeFile="Master1.master.vb" Inherits="Master1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server" background-color: #00FF00;>
<title></title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<style type="text/css">
.auto-style2 {
height: 57px;
width: 2363px;
}
.auto-style3 {
height: 57px;
width: 48px;
}
.auto-style4 {
height: 48px;
}
.newStyle1 {
background-color: #FF00FF;
}
.auto-style5 {
width: 369px;
height: 214px;
}
</style>
</head>
<body style="background-color: blue;">
<form id="form1" runat="server">
<div class="newStyle1">
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
<table class="newStyle1">
<tr>
<td class="auto-style4" colspan="2">
<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="Default.aspx" Text="Home" Value="Home"></asp:MenuItem>
<asp:MenuItem NavigateUrl="About.aspx" Text="About" Value="About"></asp:MenuItem>
</Items>
</asp:Menu>
</td>
</tr>
<tr>
<td class="auto-style3">
<img alt="CS Logo" class="auto-style5" src="cSk.png" /></td>
<td class="auto-style2">
<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
<tr>
<td class="auto-style4" colspan="2"></td>
</tr>
</table>
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Master Page VB Code:
Partial Class Master1
Inherits System.Web.UI.MasterPage
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
End Sub
End Class
Web Form Attempted to Inherit Master Page:
%# Page Title="" Language="VB" MasterPageFile="~/Master1.master" %>
<script runat="server">
</script>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
</asp:Content>
You should only place HTML elements inside placeholders in a master page if you wish to overwrite this content in subsequent child pages.
The problem with your child page is that it overwrites the placeholder containing the table with empty HTML.
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
</asp:Content>
If you wish to inherit content, do not place shared content in placeholders.
If you must adopt this practice of placing shared content in placeholders, do not overwrite this content in the child page. So in your example:
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
</asp:Content>
Would display the table in the master page.
Hope that helps.
I am learning knockout and trying out a small example below are the the three files that I have:
index
introduction
introduction
I am using netbeans IDE for the development .
index.html
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script data-main="js/main" src="js/libs/require/require.js" type="text/javascript"></script>
<link href="css/libs/oj/v2.1.0/alta/oj-alta-min.css" rel="stylesheet" type="text/css"/>
<style>
table, th, td {
border: 1px solid black;
padding: 15px;
}
th {
text-align: left;
}
thead{
border-style: double;
font-weight: bold ;
}
tr {
text-align: left;
}
{background-color: #f5f5f5}
</style>
</head>
<body>
<div data-bind="ojModule: {name: 'introduction'}"></div>
</body>
</html>
viewModels - introduction.js
/**
* introduction module
*/
define(['ojs/ojcore', 'knockout',oj,jquery,require
], function (oj, ko) {
/**
* The view model for the main content view template
*/
function introductionContentViewModel() {
var self = this;
self.firstName = ko.observable("Planet");
self.lastName = ko.observable("Earth");
self.fullName = ko.pureComputed(function () {
return this.firstName() + " " + this.lastName();
}, this);
this.fullName= this.firstName() +" " +this.lastName();
this.resetName=function(){
alert("Reset Name!");
this.firstName("James");
this.lastName("Potter");
};
this.capitalizeName=function(){
var curValue=this.lastName();
this.lastName(curValue.toUpperCase());
};
function seatReservation(fname,lname, reservMeals){
this.firstName=fname;
this.lastName=lname;
this.meals = ko.observable(reservMeals);
/* this.formattedPrice=ko.computed(function(){
var price = this.meals.price;
return price ? "$" + price.toFixed(2):"none";
});*/
};
this.mealsAvailable=[{mealName:"SandWich",price:25},
{mealName:"Roti",price:23},
{mealName:"Dal",price:22}];
self.seats = ko.observableArray([
new seatReservation("Steve","Hawkins", this.mealsAvailable[0]),
new seatReservation("Bert","Baltymoore", this.mealsAvailable[1])
]);
//function to add new reservation into the table
this.newReservationRow=function(){
this.seats.push(new seatReservation("","",this.mealsAvailable[0]));
};
}
return introductionContentViewModel;
});
views -introduction.html
<body>
<form>
<div class='liveExample'>
<p> First Name: <span data-bind='text: firstName'/> </p>
<p> Last Name: <span data-bind='text: lastName'/> </p>
<p>First name: <input data-bind='value: firstName' /></p>
<p>Last name: <input data-bind='value: lastName' /></p>
<h2>Hello, <span data-bind='text: fullName'> </span>!</h2>
<button data-bind='click: resetName' >Reset Name </button>
<button data-bind='click: capitalizeName'>Capitalize </button>
<input type='submit' data-bind='click: resetName' value='Reset'/>
</div>
<div class="Reservations">
<h2>Reservations </h2>
<table>
<thead> <tr><td> FirstName </td><td> LastName</td> <td> Meals</td><td> Price</td></tr></thead>
<tbody data-bind="foreach: seats">
<tr>
<td><input data-bind="value: firstName"/> </td>
<td><input data-bind="value: lastName"/> </td>
<td><select data-bind="options: meals,optionsText:'mealName'"></select> </td>
<td data-bind="text: meals().price"> </td>
</tr>
</tbody>
</table><br>
<input type="submit" value="New Reservation" label="New Reservation" title="Click to Make a New Reservation" data-bind="click: newReservationRow"/>
</div>
</form>
</body>
I am not getting the desired out put. The desired output is something like this in the below link
http://learn.knockoutjs.com/#/?tutorial=collections
You are mixing self and this a lot in your code. I recommend cleaning that up first and see if things start working for you. Personally, I like to stay with self.xxxx format.
Also, remove the reference to "require" inside of your define block in the introduction.js file. That may be causing some issues. Either way, it's not needed.
Finally, it appears you are doing all of this using Oracle JET. Since the introduction.html is a view that will be used inside of ojModule, you do not need to have the < body> element defined a second time. The introduction.html is going to be a fragment that will take the place of the < div> that you have bound to ojModule.
<input type="submit" class="form-control">
I want to add the form-control class only when the screensize is xs. Right now form-control gets added in all screensizes. How can I make it so that form-control class only gets added when screen size is xs?
You could use two different inputs like so:
<input type="submit" class="form-control hidden-lg hidden-md hidden-sm">
<input type="submit" class="hidden-xs">
This will hide the form-control when its anything but xs.
You can use #media
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
For example, to do hide sidebar id tagged div when size screen is less than 768:
#media (here is some true value...)
#media (max-width: 768px) {
#sidebar {
display: none;
}
}
jQuery is another way to do this by adding/removing the class based on the window width. See Docs.
*See working example at Full Screen, then re-size to view the change.
function checkWidth(init) {
if ($(window).width() < 480) {
$('input').addClass('form-control');
} else {
if (!init) {
$('input').removeClass('form-control');
}
}
}
$(document).ready(function() {
checkWidth(true);
$(window).resize(function() {
checkWidth(false);
});
});
body,
html {
padding-top: 40px;
padding-bottom: 40px;
}
#loginForm {
max-width: 500px;
padding: 15px;
margin: 0 auto;
background: #ddd;
}
#media (max-width: 480px) {
#loginForm {
background-color: red;
color: white;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form id="loginForm">
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" id="email" name="email" placeholder="Email address" />
</div>
<div class="form-group">
<label for="pw">Password</label>
<input type="password" id="pw" name="pw" placeholder="Password" />
</div>
<div class="form-group">
<input type="submit">
</div>
</form>
</div>
<!-- /container -->
Responsive text alignment has been added in Bootstrap V4:
https://v4-alpha.getbootstrap.com/utilities/typography/#text-alignment
For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.
<p class="text-xs-center">Center aligned text on all viewport sizes.</p>
Copied.
You should use both .xs and .form-control classes together as below:
.form-control.xs {/*Write your declerations.*/}