I have built a Prediction table which will contain football data. Please I need a JavaScript date picker code that will fit into this table I built.
table,
th,
td {
border: 0px solid black;
border-collapse: collapse;
}
table {
width: px;
}
th {
color: white;
background-color: black;
}
th,
td {
font-size: 25pt;
font-family: Arial;
text-align: center;
}
td {
background-color
<table>
<tr>
<th colspan="2"><b>England » Premier</b></th>
<th><b>Prediction</b></th>
</tr>
<tr>
<td> 24-06:20:16</td>
<td>Red Bull Bragantino <b style="color:red"> 2 : 1 </b> Ponte Preta</td>
<td style="background-color:none;color:none;"><b>Home Win</b></td>
</tr>
</table>
I will be grateful if someone could help me out.
I advice to actually try and look for solutions.
Below is the solution to your question where the website i gave actually thought you step by step to create a datepicker.
First of all you will need jquery to be able to use datepicker. There is few ways for you to get jquery datepicker CSS & JS file. For me, i prefer using CDN as it is much conveniet. Usually JS scripts are recommended to be placed before the body tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.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>
</head>
<body>
<table>
<tr>
<th><b>Datepicker</b></th>
</tr>
<tr>
<td>Date:</td>
<td><input type="text" id="datepicker"></td>
</tr>
</table>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</body>
</html>
Related
I have an issue that I cannot link my external style.css to my index.html file. Both files are in exact same directory.
My style.css :
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
And I am trying to link it in my html as following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>test</title>
<link href="style.css" type="text/css" rel="stylesheet"/>
</head>
Full html script:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>test</title>
<link href="style.css" type="text/css" rel="stylesheet"/>
</head>
<br>
<table id="t1">
<caption>Operation table</caption>
<thead>
<tr>
<th>Operation code</th>
<th>To Do</th>
<th>Done</th>
<th>Left</th>
</tr>
</thead>
<tbody>
<tr>
<td>abc</td>
<td>1000</td>
<td>50</td>
<td>
</td>
</tr>
<tr>
<td>def</td>
<td>555</td>
<td>50</td>
<td id ="number1">
</td>
</tr>
</tbody>
</table>
<p id="demo"></p>
</html>
All the examples that I have looked up online use exact same method.
I have connected to the webserver and turned on developer mode to see if I can see anything. I have managed to spot an error:
Refused to apply style from '192.168.10.173:8080/style.css' because its MIME type ('text/html') is not supported stylesheet MIME type, and strict MIME checking is enabled
Still looking into why it could be caused
CSS files shouldn't have style tags. Simply remove them and it'll work.
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
When you want to declare styles inside of an HTML file, then you have to put the CSS between style tags.
Is it possible to autosize a column by its header size which includes a glyphicon right aligned?
E.g.:
<th class='autosize'>Col1 <span class='glyphicon glyphicon-sort pull-right' aria-hidden='true'></span></th>
And the style:
<style>
.autosize {
width: 1px;
white-space: nowrap;
}
</style>
Pushes the glyphicon to the second column.
Full code:
<!doctype html>
<html>
<head>
<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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.autosize {
width: 1px;
white-space: nowrap;
}
</style>
</head>
<body>
<table class="table table-bordered" style="width: 1px;">
<thead>
<tr>
<th class='autosize'>Col1 <span class='glyphicon glyphicon-sort pull-right' aria-hidden='true'></span></th>
</tr>
</thead>
</table>
</body>
</html>
Gee always the way you spend hours changing css to see what works and by posting here I had the light turned on, all I had to do is remove the pull-right class out of the glyphicon
I want to create a page to test and display my web fonts in a browser to compare different sizes of the same user-input text. Later perhaps to compare different font styles with drop down buttons etc. my question for the moment is how to have new text input in a browser field appear instantly at different sizes in other fields on the same page. Many thanks. Here is the page that works fine to display the fonts but the text has to be input manually in each field.
Thanks for your help.
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="AlQuds.css" />
<style type="text/css" media="screen">
body { font-family: "AlQuds", Georgia; font-size: 40px ; }
#big { font-size: 100px; background-color:#ede7ab;}
#medium { font-size: 40px; background-color: #eab645}
#small { font-size: 20px; background-color:#d3ffcf}
</style>
</head>
<body>
<table style="width: 100%;" border="1">
<col /> <col />
<tbody>
<tr>
</tr>
<tr>
<td><img alt="alquds-regular-bold" src="alquds-regular-bold-sampler.jpg" style="display: block; text-align: center; margin-left: auto; margin-right: auto; width: 653px; height: 739px;" /></td>
<td style="">
<hr>
<p >Input text below AlQuds Regular font in Arabic, Farsi or in a West European language such as Swedish.</p>
<hr>
<div id="big" contenteditable="true" border="3"> إطبع هنا - type here.</div>
<hr>
<div id="medium" contenteditable="true" border="3"> إطبع هنا- type here.</div>
<hr>
<div id="small" contenteditable="true" border="3">إطبع هنا - type here.</div>
<hr>
</td>
</tr>
</tbody>
</table>
</body>
</html>
If you can use jQuery, you can do something like this:
$(document).ready(function(){
$("a").click(function(){
$("body").append('<div contenteditable style="font-size: ' + $("#size").val() + 'px;">Size ' + $("#size").val() + 'px</div>');
return false;
});
});
#import url(http://fonts.googleapis.com/css?family=Raleway);
body {font-family: 'Raleway';}
div {margin: 15px 0 0; border: 1px solid #ccc;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Size: <input type="text" id="size" />
Add New Size
Full HTML Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
#import url(http://fonts.googleapis.com/css?family=Raleway);
body {font-family: 'Raleway';}
div {margin: 15px 0 0; border: 1px solid #ccc;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("a").click(function(){
$("body").append('<div contenteditable style="font-size: ' + $("#size").val() + 'px;">Size ' + $("#size").val() + 'px</div>');
return false;
});
});
</script>
</head>
<body>
Size: <input type="text" id="size" />
Add New Size
</body>
</html>
I have seen similar posts ..I have modified my code and currently using this Code to add color to Hyperlink Text..My Hyperlink generates at runtime in HTML output..I have multiple css ..I think css effects are overriding
a:link
{
color: red;
color: inherit;
text-decoration:underline;
}
also tried this one :
a:link
{
color: #fff;
text-decoration:underline;
}
My Script:
function (response) {
obj =response.d;
var output = "<table class='table'><tr><th>Serial No.</th><th>UFZillaID</th><th>MZillaID</th><th>Status</th></tr>";
for (var x = 0; x < obj.length; x++) {
output += "<tr><td >" + obj[x].EMID + "</td></tr>";
}
output += "</table>";
$("#result").append(output);
this is my markup
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="UFZillaErrorStatus.aspx.cs"
Inherits="Dashboard.Web.UFZillaErrorStatus" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>UFZillaErrorStatus</title>
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800|Open+Sans+Condensed:300,700"
rel="stylesheet" />
<link href="css/home.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/themes/ui-lightness/jquery-ui-1.10.1.custom.css" rel="stylesheet"
type="text/css" />
<link href="css/assets/style.css" rel="stylesheet" type="text/css" />
<link href="js/common/jquery.jqGrid-4.5.4/css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script src="js/common/jquery.jqGrid-4.5.4/js/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="js/common/jquery/json2.js" type="text/javascript"></script>
<script src="js/common/jquery/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>
<script src="js/common/jquery.jqGrid-4.5.4/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/common/jquery.jqGrid-4.5.4/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/common/jquery.jqGrid-4.5.4/plugins/grid.postext.js" type="text/javascript"></script>
<script src="js/JqueryFileupload/jquery.fileupload.js" type="text/javascript"></script>
<script src="js/JqueryFileupload/jquery.iframe-transport.js" type="text/javascript"></script>
<script src="js/common/jquery/jquery.alphanumeric.js" type="text/javascript"></script>
<script src="js/dashboard/UFZillaErrorStatus.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="content1" style="background: 0 0 0 #FFFFF">
<div id="uferrdivs" align="center">
<table>
<tr>
<td>
Product
</td>
</tr>
<tr>
<td>
<select id="proselct">
</select>
</td>
</tr>
</table>
<center>
<div>
<div id="result" style="background-color: #F5F5F5; width: 800px; margin-top: 50px;">
</div>
</div>
</center>
</div>
</div>
</form>
</body>
</html>
..Underline effect appears..But color not changing ..I have tried other method .But Not working ...
Any Suggestion would be helpful
Remove:
color: inherit;
As this is overriding your colour that you want.
Ensure that your tag contains
href="#"
At minimum.
Try simplest way
use this css
a, a * {
color: #FFF !important; // important will avoid if any other css try to override it
}
If your background color is WHITE, link will not be visible. Because you set the same color for link
color: #FFF;
Try with different color
Try to remove
color: inherit;
and see it will work.
Simple demo of both
Fiddle Demo using inherit
Fiddle Demo without using inherit
Have updated the css and html as the answers indicate but unfortunately the style information is still not being passed to the td. The class is defined as limits but no style.
Having some trouble with something very basic.
HTML
<%= stylesheet_link_tag "test.css" %>
</head>
<body>
<table class="results">
<% #result.each do |object|%>
<tr>
<td class="limit"> <%= object%> </td>
</tr>
<%end%>
</table>
</body>
CSS
table.results
{
width: 100%;
border: .2em ridge #000000;
}
td.limit
{
width:50%;
background-color: #fff000;
border: .2em ridge #0f0f0f;
}
In the resulting output. the table which has its class defined outside the ruby loop has all its style attributes included fine.
However the TD inside the ruby for.each loop does not. Is there some specific way to add a class to a HTML element in Ruby?
output html table as requested
<!DOCTYPE html>
<html>
<head>
<title>Crawler</title>
<link href="/stylesheets/globalStyleSheet.css?1312383253" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/jquery.inputlimiter.1.0.css?1312464674" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/test.css?1313055311" media="screen" rel="stylesheet" type="text/css" />
<script src="/javascripts/prototype.js" type="text/javascript"></script>
<script src="/javascripts/effects.js" type="text/javascript"></script>
<script src="/javascripts/dragdrop.js" type="text/javascript"></script>
<script src="/javascripts/controls.js" type="text/javascript"></script>
<script src="/javascripts/rails.js" type="text/javascript"></script>
<meta name="csrf-param" content="authenticity_token"/>
<meta name="csrf-token" content="fQ/oa3q+Aq68GZenV26YuwPjDgbijTeuO3VJihtYHI8="/>
</head>
<body>
<html>
<head>
<link href="/stylesheets/test.css?1313055311" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<table class="results">
<tr id="test-tr">
<td class="limit"> blag blah </td>
</tr>
<tr >
<td class="limit"> testing 45 </td>
</tr>
<tr >
<td class="limit"> testing</td>
</tr>
</table>
</body>
</html>
</body>
</html>
You're missing a semicolon after the background-color property in the CSS for your td. That'll be knocking out both the background-color and border properties.
You may want to take advantage of the W3C CSS Validation Service for basic sanity checking of your CSS. In your case, it says:
td.limit Value Error : background-color attempt to find a semi-colon before the property name. add it
...which is a bit cryptic, I admit, but at least a reasonable pointer towards your problem.
It is not about Ruby or Rails at all.
You have got EXTRA space between class and ="limit"
<td class ="limit"> <%= object%> </td>
#=> should be
<td class="limit"><%= object %></td>