Problem in Firefox, but ok with Internet Explorer.
I tried a lot but not solve yet. Please help me.
Actually the problem over here is that, it is not in formatte order in firefox. but is displaying on in internet explorer.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HOME</title>
<link rel="stylesheet" href="dropdown.css" type="text/css" />
<script type="text/javascript" src="dropdown.js"></script>
<!-- /* below javascript function is to handle the "Enter" key form submission */ -->
<script language="javascript">
</script>
<script type="text/javascript">
function change1(){
document.getElementById('id1').style.display='block'
document.getElementById('id2').style.display='none'
document.getElementById('id3').style.display='block'
document.getElementById('id4').style.display='none'
document.getElementById('body1').style.display='block'
document.getElementById('body2').style.display='none'
document.home_page.reg_id.focus();
}
function change2(){
document.getElementById('id1').style.display='none'
document.getElementById('id2').style.display='block'
document.getElementById('id3').style.display='none'
document.getElementById('id4').style.display='block'
document.getElementById('body1').style.display='none'
document.getElementById('body2').style.display='block'
document.home_page.uname.focus();
}
</script>
<!-- end of "enter" key handling functions. -->
</head>
<form method="POST" action="home_page.php" name="home_page">
<table width="320" height="200" border="1">
<tr style="width:315px;" align="center">
<td align="center" style="background-repeat:no-repeat;" bgcolor="#000099" width="155" height="28" id="id1" onClick="change1()"></td>
<td align="center" bgcolor="#009900" style="display:none; background-repeat:no-repeat;" width="155" height="28" id="id2" onClick="change1()"></td>
<td align="center" style="background-repeat:no-repeat;" bgcolor="#009900" width="155" height="28" id="id3" onClick="change2()"></td>
<td align="center" bgcolor="#000099" style="display:none; background-repeat:no-repeat;" width="155" height="28" id="id4" onClick="change2()"></td>
</tr>
<tr>
<td colspan="2" id="body1">
<table width="318" height="44" border="0">
<tr>
<td width="318" height="40" align="center">
<span class="loginstyle3">Registration Status</span>
</td>
</tr>
</table></td>
<td colspan="2" id="body2" style="display:none;">
<table width="318" height="45" border="0">
<tr>
<td width="107" height="41" align="center" background="images/glossy1grey.gif">
<span class="loginstyle3">Login Entry </span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- below block of code is to set login page after login attempt and failed -->
<script type="text/javascript">change2()</script>
</form>
</body>
</html>
I don't think that setting table cells (<td> elements) to be "display: block" is going to work out well in Firefox. Table cells have their own "display" type, and if you make them "display: block" the browser is going to do what you ask. Note that "display: block" is not simply the opposite of "display: none".
Try using "display: table-cell" instead of "block".
edit — I've tried this and it's definitely what the problem is.
Your problem in FF
document.home_page.uname is undefined
Line 27
The problems you have are
your TD is inheriting the height=200 from the TABLE
your TD has display: block which forces it onto a new line
Why are you using tables for this? They add a lot of extra, unnecessary tags. Have a read up on CSS, it's the future (and the present..)!
The most obvious thing to me is that you use self closing <LINK> and <META> tags in what is probably not a XHTML file. Those are meant to be left open. Try
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HOME</title>
<link rel="stylesheet" href="dropdown.css" type="text/css" >
instead.
IIRC Firefox does not read the link to your css file if the tag is self closing, because it is presumed empty.
Related
I'm trying to toggle CSS stylesheets by clicking one of two buttons. However, my code isn't working. Not sure what I'm missing. I'm working with a separate index.html that I cannot modify and a separate js file.
Here is my code below. I'm getting a TypeError: cannot read properties of null (reading addEventListener'.
Index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Assignment 4</title> <link id="styleSheet" href="styleA.css" rel="stylesheet" type="text/css">
<script src="styler.js"></script>
</head>
<body>
<form>
<button id="styleA" type="submit">Use styleA</button>
<button id="styleB" type="submit">Use styleB</button>
</form>
<article>
<h1>OSU Beaver Store - CS 290 Version</h1>
<p>Catering to All Your Beaver-Gear Needs</p>
<div>
<table>
<caption>Our Most Popular Items</caption>
<thead>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Orange Beaver Polo</td>
<td>49.00</td>
</tr>
<tr>
<td>3 Pack Beaver Socks</td>
<td>28.00</td>
</tr>
<tr>
<td>Orange Beavers Hat</td>
<td>32.50</td>
</tr>
<tr>
<td>Waterproof Jacket</td>
<td>65.55</td>
</tr>
</tbody>
</table>
</div>
<div id="beaver-store">
Visit The Official Beaver Store
</div>
</article>
<div>
<span id="o">O</span><span id="s">S</span><span id ="u">U</span>
</div>
</body>
</html>
JS File:
"use strict";
let aLink= document.querySelector("link");
const aButton = document.getElementById("styleA");
const bButton = document.getElementById("styleB");
function changeToA(){
preventDefault();
aLink.setAttribute('href', 'styleB.css');
}
function changeToB(){
aLink.setAttribute('href', 'styleB.css');
}
aButton.addEventListener("click",changeToA);
bButton.addEventListener("click",changeToB);
***Update:
I figured it out. Needed to have another event listener for DOMloadedcontent.
I have implemented Datatables into my Spring MVC, Java, Bootstrap 5, Thymeleaf project and the results are great. The only issue is a cosmetic one - the text is wrapping in the length menu and search sections. This can be seen at the top of the attached image where "Show 10 entries" is split across 3 lines and the Search table and box are split over 2 lines.
I am using the latest versions of jquery.dataTables.min.css, jquery.dataTables.min.js and dataTables.bootstrap5.min.js with no custom configuration: -
$(document).ready(function () {
$('table.display').DataTable();
});
Here is an HTML snippet with one row of data:
<!DOCTYPE html>
<html>
<head lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Java Documentum Services</title>
<link rel="stylesheet" href="/assets/jquery/jquery.dataTables.min.css"/>
<link rel="stylesheet" href="/assets/bootstrap/bootstrap.min.css"/>
<link rel="stylesheet" href="/assets/dropzonejs/dropzone.css"/>
</head>
<body>
<div class="container pt-3 pb-3">
<table id="search-results"
class="display"
style="width:100%">
<thead>
<tr>
<th>Filename</th>
<th>Test</th>
<th>Case Id</th>
<th>Upload Time</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span>download.pdf</span>
</td>
<td>
<span>JH-06062022-01</span>
</td>
<td>
<span>test-case-12344444</span>
</td>
<td>
<span>2022-07-22 11:03 GMT</span>
</td>
<td>
<!--Actions button-->
<!--Download button-->
<!--Delete button-->
</td>
</tr>
</tbody>
</table>
<script src="/assets/jquery/jquery-3.5.1.js"></script>
<script src="/assets/jquery/jquery.dataTables.min.js"></script>
<script src="/assets/datatables/dataTables.bootstrap5.min.js"></script>
<script src="/assets/jds/dataTables.js"></script>
<script src="/assets/bootstrap/bootstrap.min.js"></script>
<script src="/assets/dropzonejs/dropzone.min.js"></script>
<script src="/assets/jds/dropzone.js"></script>
</body>
</html>
I can see that these two sections are defined in sLengthMenu and sSearch in the JavaScript code, so perhaps a code change could be an option, but it would be preferable if it could be fixed with a configuration change instead. I also wondered if perhaps there is a clash with one of the other CSS stylesheets or JavaScript libraries that I am using - these are visible in the sample HTML.
After 2 days reading all topics about jQuery Bootgrid and AngularJS, I still can't use angular directives on my generated grid.
I'm using AngularJS 1.6.6 and jQuery Bootgrid 1.3.1. The page that is using it is running fine and all the elements outside the grid are working with angular directives. All the elements are inside the right ng-app and ng-controller tagged root.
The problem is that I have some buttons inside the grid and they are all losing their events like onclick, tooltips, etc. So I wanted to map them using ng-click instead of the jQuery .click(function () {}).
There are no error messages, only the events are just not firing.
All functions pointed inside the directives are declared on my scope.
I'm almost concluding that the jQuery Bootgrid isolates its own scope and avoid angular to get into it. Does that proceed?
<html lang="en">
<head>
<title>Example - jQuery Bootgrid and Angular</title>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdn.bootcss.com/jquery-bootgrid/1.3.1/jquery.bootgrid.min.js"></script>
<link href="https://cdn.bootcss.com/jquery-bootgrid/1.3.1/jquery.bootgrid.css" rel="stylesheet" />
<script src="https://code.angularjs.org/1.6.6/angular.min.js"></script>
<script>
var app = angular.module('app', []).controller('appController', ['$scope', function ($scope) {
$scope.test = function () {
alert('Clicked!');
}
$("#grid-basic").bootgrid({
templates: {
search: '<div class="search form-group"><div class="input-group"><span class="icon glyphicon input-group-addon glyphicon-search"></span> <input type="text" ng-click="test()" class="search-field form-control" placeholder="Pesquisar"></div></div>'
}
});
}]);
</script>
</head>
<body ng-app="app" ng-controller="appController">
<br />
<br />
<div class="btn btn-primary" ng-click="test()">Test</div>
<br />
<br />
<table id="grid-basic" class="table table-condensed table-hover table-striped">
<thead>
<tr>
<th data-column-id="id" data-type="numeric">id</th>
<th data-column-id="sender">e-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>xxx#yyy.com</td>
</tr>
<tr>
<td>2</td>
<td>www#yyy.com</td>
</tr>
<tr>
<td>3</td>
<td>zzz#yyy.com</td>
</tr>
</tbody>
</table>
</body>
</html>
First you must have a function (eg ngFunction) and then try:
<button id="something" ng-click="ngFunction(doSomething)">
Since there was no definitive answer I changed my component and stopped looking for this compatibility issue. I still think that there was a way to attach the grid plugin to my angularjs scope, but time is not on my side here.
I am a complete beginner to dojo and have simply been following the tutorials on the website. Now I am trying to dynamically change the background color of a table when pressing a button. Here is my html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="dijit/themes/claro/claro.css">
<!-- load Dojo -->
<script>dojoConfig = {parseOnLoad: true}</script>
<script src="dojo/dojo.js" data-dojo-config="async: true"></script>
<script> require(['myModule.js']); </script>
<title>table</title>
</head>
<body class="claro">
<h1 id="greeting">test table</h1>
<table data-dojo-type="dojox.grid.DataGrid" id="tableContainer">
<thead>
<tr>
<th field="col1">Company</th>
<th field="col2">Contact</th>
<th field="col3">Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
</thead>
</table>
<button id="progButtonNode" type="button"></button>
<div id="result1"></div>
</body>
</html>
This is myModule.js file. When I click the button the function does not seem to work. When I use the commented out code it works fine
require(["dijit/form/Button", "dojo/dom", "dojo", "dojo/domReady!"], function(Button, dom){
// Create a button programmatically:
var myButton = new Button({
label: "Click me!",
onClick: function(dojo){
//dom.byId("result1").innerHTML += "Thank you! ";
dojo.style("tableContainer", "background-color", "red");
}
}, "progButtonNode").startup();
});
you need to apply the style on the node so
dojo.style(dom.byId("tableContainer"), "background-color", "red");
should work for you. Also other way is to change the css class. Let's say you have a css class which does what you want and you want to apply it onClick of a button. You can do something like
dijit.byId('yourgid').set('class','yourcssclass');
You can also use onStyleRow event ro style your rows
I'm building a website and I have it done but there is a pretty big bug in the code. I created a table in which I have a button that is a function to calculate some expression and have the calculations display in the table. The calculations happen but do not display in the table. Here is what I have:
<!DOCTYPE html>
<html>
<!--DB 11/2/2015-->
<!-- W3 Schools was referenced in building this code-->
<head>
<meta charset="utf-8">
<title>Assignment 8</title>
<link href="images/avatar.png" rel="shortcut icon" type="image/png">
<link href="css/stylesheet.css" rel="stylesheet" type="text/css">
<script src="js/javascript.js" type="text/javascript"></script>
<style type="text/css">
</style>
</head>
<body onload="fillitin()">
<header>
</header>
<aside>
</aside>
<div id="main">
<h1> Assignment 8: Operators and Expression</h1>
<br>
<p id="demo"></p>
<script>
var d = new Date();
months = ['Janurary','Feburary','March','April','May','June','July','August','September','October','November','December']
var date = months[d.getMonth()]+" "+d.getDate()+" "+d.getFullYear();
document.getElementById("demo").innerHTML = date;
</script>
<h2 style="text-align:center"> S'mores!</h2>
<h4> CLick on the button serves to learn the amount of ingredients needed to make S'mores!</h4>
<table style="width:50%" border="1">
<form name="myform" method="">
<tr>
<td> <br>
<input type="text" id="num1" value="1">
</td>
<td>
<button onclick="myFunction()">Serves</button>
</td>
</tr>
</form>
<tr>
<td id="M"></td>
<td>Large Marshmallows</td>
</tr>
<tr>
<td id="G"></td>
<td>Graham Cracker</td>
</tr>
<tr>
<td id="C"></td>
<td>Ounches Chocolate</td>
</tr>
</table>
<script>
function fillitin() {
document.getElementById("M").InnerHTML="1";
document.getElementById("G").InnerHTML="1";
document.getElementById("C").InnerHTML="1.5";
}
function myFunction() {
var x=document.getElementById("num1").value;
document.getElementById("M").InnerHTML=x;
document.getElementById("G").InnerHTML=x;
document.getElementById("C").InnerHTML=x*1.5;
}
</script>
<ul>
<li>
Heat the marshmallow over an open flame until it begins to brown and melt.
</li>
<li>Break the graham cracker in half. Put the chocolate on one half of the cracker, and put the warm marshmallow on the other. </li>
<li>Enjoy! Don’t burn your mouth!</li>
</ul>
<img alt="picture of smores" height="129" src="images/picture1.jpg" width="194">
<cite> picture taking from <a href="http://www.instructables.com/id/no-campfire-smores/"> http://www.instructables.com/id/no-campfire-smores/
</a></cite>
</div>
<footer>
</footer>
</body>
</html>
You're using InnerHTML (capital I) which is wrong.
The right function is .innerHTML
Also, if you don't want the button to post the form, you should add it type="button"
More details : Can I make a button not submit a form
You have a slight typo in your code. You're using InnerHTML, but the correct spelling is innerHTML with a lowercase 'i'. Here's a description of innerHTML: https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML?redirectlocale=en-US&redirectslug=DOM%2Felement.innerHTML. And here's your fixed demo:
<!DOCTYPE html>
<html>
<!--DB 11/2/2015-->
<!-- W3 Schools was referenced in building this code-->
<head>
<meta charset="utf-8">
<title>Assignment 8</title>
<link href="images/avatar.png" rel="shortcut icon" type="image/png">
<link href="css/stylesheet.css" rel="stylesheet" type="text/css">
<script src="js/javascript.js" type="text/javascript"></script>
<style type="text/css">
</style>
</head>
<body onload="fillitin()">
<header>
</header>
<aside>
</aside>
<div id="main">
<h1> Assignment 8: Operators and Expression</h1>
<br>
<p id="demo"></p>
<script>
var d = new Date();
months = ['Janurary','Feburary','March','April','May','June','July','August','September','October','November','December']
var date = months[d.getMonth()]+" "+d.getDate()+" "+d.getFullYear();
document.getElementById("demo").innerHTML = date;
</script>
<h2 style="text-align:center"> S'mores!</h2>
<h4> CLick on the button serves to learn the amount of ingredients needed to make S'mores!</h4>
<table style="width:50%" border="1">
<form name="myform" method="">
<tr>
<td> <br>
<input type="text" id="num1" value="1">
</td>
<td>
<button onclick="myFunction()">Serves</button>
</td>
</tr>
</form>
<tr>
<td id="M"></td>
<td>Large Marshmallows</td>
</tr>
<tr>
<td id="G"></td>
<td>Graham Cracker</td>
</tr>
<tr>
<td id="C"></td>
<td>Ounches Chocolate</td>
</tr>
</table>
<script>
function fillitin() {
document.getElementById("M").innerHTML="1";
document.getElementById("G").innerHTML="1";
document.getElementById("C").innerHTML="1.5";
}
function myFunction() {
var x=document.getElementById("num1").value;
document.getElementById("M").innerHTML=x;
document.getElementById("G").innerHTML=x;
document.getElementById("C").innerHTML=x*1.5;
}
</script>
<ul>
<li>
Heat the marshmallow over an open flame until it begins to brown and melt.
</li>
<li>Break the graham cracker in half. Put the chocolate on one half of the cracker, and put the warm marshmallow on the other. </li>
<li>Enjoy! Don’t burn your mouth!</li>
</ul>
<img alt="picture of smores" height="129" src="images/picture1.jpg" width="194">
<cite> picture taking from <a href="http://www.instructables.com/id/no-campfire-smores/"> http://www.instructables.com/id/no-campfire-smores/
</a></cite>
</div>
<footer>
</footer>
</body>
</html>
The page refreshes once the document is changed so it does change your values but then it changes them back to the original. you need to find a different place to run the fillitin() then when the document finishes loading. something similar to the jquery $(document).ready()