Why tr tag does not show my buttons horizontally but vertically instead.
Similar code works properly on jsfiddle
What am I doing wrong?
here my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<link href="css/menuprincipale.css" rel="stylesheet" type="text/css" media="all"/>
<meta name="msapplication-tap-highlight" content="no" />
<script src="cordova.js"></script>
<script src="js/jquery.js"></script>
</head>
<div data-role="page">
<div data-role="header"></div>
<div data-role="content">
<table class="clsActionTable">
<tr>
<td style="text-align: center;">
<button class="clsActionButton" id="idAddButton">Add</button>
<button class="clsActionButton" id="idEditButton">Edit</button>
<button class="clsActionButton" id="idDeleteButton">Delete</button>
</td>
</tr>
</table>
<div data-role="footer" data-position="fixed">
<img src="img/logo.png" />
</div>
</div>
here my CSS:
.clsActionTable
{
width: 100%;
height:20%;
color: white;
font-size: smaller;
}
.clsActionButton
{
width: 180px;
height:40px;
}
#idActionPlane
{
left: 0px;
bottom: 0px;
height:20%;
width:100%;
background-color: #4E5A81;
color: White;
}
I am using these:
Cordova 3.5
jQuery 1.4
js
html5
Try this code.
<tr>
<td style="text-align: center;">
<button class="clsActionButton" id="idAddButton">Add</button>
</td>
<td style="text-align: center;">
<button class="clsActionButton" id="idEditButton">Edit</button>
</td>
<td style="text-align: center;">
<button class="clsActionButton" id="idDeleteButton">Delete</button>
</td>
</tr>
For anyone who has this same problem and the good answer above does not work, in my situation removing data-role="table" from the table html in jQuery mobile solved the problem as it does make the table vertical by default. Even better way for sure would be to do this via css.
Related
I am creating a website that uses SQL queries to show, input, modify, delete data from a database. I am using CSS to show/hide the main div (#accounts-page/#hardware-page) content for the main navigation menu. This works good, but the issue comes in when I have another menu inside that div element and try to navigate to content within that submenu. The desired is that the table on each 'page' will still be shown after a submenu button is clicked, along with the content of that submenu button below it.
I have tried using JavaScript, jQuery, plain CSS & HTML, but can't seem to wrap my head around all the examples that I've searched up online and apply it to my situation.
Here is a stripped down version of HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>
<div id="wrapper">
<ul id="main-nav" class="menu">
<li>Accounts</li>
<li>Hardware</li>
</ul>
<div id="accounts-page" class="">
<table id="accounts-table">
<tr>
<th>ID</th>
<th>Email</th>
<th>Password</th>
<th>Recovery Email</th>
<th>Phone Number</th>
<th>Birth Date</th>
<th>Username</th>
</tr>
</table>
<ul class="submenu" style="text-align:center">
<button>Add account</button>
<button>Modify Accounts</button>
<button>Delete Account</button>
</ul>
<div class="column" id="add-acc">
<p>Add account content</p>
</div>
<div class="column" id="del-acc">
<p>Delete account content</p>
</div>
</div>
<div id="hardware-page">
<table id="hardware-table">
<tr>
<th>ID</th>
<th>Category</th>
<th>Manufacturer</th>
<th>Model</th>
</tr>
</table>
<div class="submenu">
<ul class="" style="text-align:center">
<button>Add hardware</button>
<button>Modify hardware</button>
<button>Delete hardware</button>
</ul>
</div>
<div class="full" id="add-hdwre">
<p>Add hardware content</p>
</div>
<div id="edit-hdwre">
<p>Edit hardware content</p>
</div>
<div id="del-hdwre">
<p>Delete hardware content</p>
</div>
</div>
<div id="computers-page" class="tab-content">
</div>
<div id="games-page" class="tab-content">
</div>
</div>
</body>
</html>
And CSS:
#accounts-page #add-acc,
#edit-acc,
#del-acc,
#add-hdwre,
#edit-hdwre,
#del-hdwre {
display: none;
}
#accounts-page #add-acc:target,
#edit-acc:target,
#del-acc:target,
#add-hdwre:target,
#edit-hdwre:target,
#del-hdwre:target {
display: block;
}
#accounts-page,
#hardware-page {
display: none;
}
#accounts-page:target,
#hardware-page:target {
display: block;
}
Or the JSFiddle for your convinience
My first thought is to use child selectors, but I can't quite seem to figure out how to implement it. Any pointers or recommendations would be highly valued.
If there is an easier way to implement this within javascript/jQuery then please let me know.
EDIT: When the submenu links on each 'page' are clicked (add-acc,edit-acc, etc) the URL is changed to that ID, which I am assuming is where the problem lies and I need to direct the link to the child of the page. Example: #accounts-page > #add-acc
Images:
URL after 'Add Account' submenu link is clicked
URL after 'Accounts' main menu link is clicked
I eventually got to the solution by following this StackOverflow Question and it's Answers, who helped me tremendously.
Here is the JSFiddle with the desired result.
Using Javascript to navigate the main navigation solved the issue. I don't know why I couldn't understand from the countless other questions I saw but this solution works for me.
Thanks to Jared for his explanation in the comments about display:block;, it was insightful to debugging the issue.
Added Javascript:
function ShowContent(content) {
document.getElementById("accounts-page").style.display = 'none'
document.getElementById("hardware-page").style.display = 'none';
document.getElementById(content).style.display = 'block';
}
Modified CSS:
.submenu {
margin: auto;
padding: 7px 0 7px 0;
font-size: 24px;
text-align: center;
}
.hide {
display: none;
}
.hide:target {
display: block;
}
Updated HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div id="wrapper">
<ul class="menu">
<li>Accounts</li>
<li>Hardware</li>
</ul>
<div id="accounts-page" class="hide">
<table id="accounts-table">
<tr>
<th>ID</th>
<th>Email</th>
<th>Password</th>
<th>Recovery Email</th>
<th>Phone Number</th>
<th>Birth Date</th>
<th>Username</th>
</tr>
</table>
<ul class="submenu" style="text-align:center">
<button>Add account</button>
</ul>
<div class="hide" id="add-acc">
<p>Add account content</p>
</div>
</div>
<div id="hardware-page" class="hide">
<table class="hardware-table">
<tr>
<th>ID</th>
<th>Category</th>
<th>Manufacturer</th>
<th>Model</th>
</tr>
</table>
<div class="submenu">
<ul class="submenu" style="text-align:center">
<button>Add hardware</button>
</ul>
</div>
<div class="hide" id="add-hdwre">
<p>Add hardware content</p>
</div>
</div>
</div>
</body>
</html>
I have a problem with a button inside a div that affects a different div. Here's the basic outline:
<div>
<div>
<div>
<div>
<button>THIS BUTTON</button>
<div></div>
</div>
</div>
</div>
<div>
<table>THIS TABLE</table>
</div>
</div>
Intuitively, I would say that adding or removing that button should have no effect on the table and the div containing the table.
I want this table to be as wide as possible.
And without the button it looks like this:
But then I added JavaScript code that exports the table contents into a CSV file.
Once I added the button to do this action, the table becomes narrower:
Here's is the sample code as a standalone HTML file:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<style>
* {
color: #2b2b2b;
font-family: "Roboto Condensed";
}
button {
cursor: pointer;
margin-top: 0rem;
}
.container {
margin-left: 0px;
margin-right: 0px;
}
.table td, .table th {
padding: .25em;
}
.table {
width: 100%;
}
</style>
<script>
$(document).ready(function () {
alert('ok?');
if ($('table').length) {
$('#export_button').show();
}
});
</script>
</head>
<body>
<div class="container-fluid" style="max-width: 100%">
<div class="container" id="page_header">
<div class="float-right">
<div>
<button style="margin-top: 0px; display: none"
id="export_button" type="button" onclick="">
Export to CSV file
</button>
<div class="d-inline">
<img class="img-responsive img-fluid img-thumbnail back-link" style="max-width:2em; height:auto;"
src="https://upload.wikimedia.org/wikipedia/commons/3/3e/Icon_Arrow_Left_256x256.png" alt="go back" id="back-button">
</div>
<img class="img-responsive img-fluid img-thumbnail" style="max-width:2em; height:auto;"
src="https://upload.wikimedia.org/wikipedia/commons/0/04/1328101942_Arrow-Up.png" alt="menu" id="show_menu">
<div class="d-inline">
<img class="img-responsive img-fluid img-thumbnail forward-link" style="max-width:2em; height:auto;"
src="https://upload.wikimedia.org/wikipedia/commons/f/f6/Icon_Arrow_Right_256x256.png" alt="go forward" id="forward-button">
</div>
</div>
<div class="text-right login-logout" style="background:transparent; border:none; color:transparent;">
Login
</div>
</div>
<h1><div class="container">A very Informative Header</div></h1>
</div>
<div class="container-fluid">
<div class="row">
<table id="myTable" class="table table-striped table-responsive table-hover sortable">
<thead>
<tr><th>This is Column 1</th><th>This is Column 2</th><th>This is Column 3</th><th>This is Column 4</th><th>This is Column 5</th><th>This is Column 6</th><th>This is Column 7</th><th>This is Column 8</th><th>This is Column 9</th><th>This is Column 10</th><th>This is Column 11</th><th>This is Column 12</th><th>This is Column 13</th><th>This is Column 14</th></tr>
</thead>
<tbody>
<tr><td>45629</td><td>746582945 </td><td>8752</td><td>45234</td><td>342</td><td>658472</td><td>764932</td><td>48753 </td><td></td><td>Something very important</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>3.14159265357989</td><td>13</td><td>42</td><td>7abc</td><td></td><td>Here I have some pretty long text that is not important, but it's here anyway, just to make the table bigger</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
I copied your code into JS snippet. The button doesn't seem to cause any problems.
Quick update: it behaves differently on full screen.
A quick workaround is to add width: 100% to your table's container.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<style>
* {
color: #2b2b2b;
font-family: "Roboto Condensed";
}
button {
cursor: pointer;
margin-top: 0rem;
}
.container {
margin-left: 0px;
margin-right: 0px;
}
.table td, .table th {
padding: .25em;
}
.table {
width: 100%;
}
</style>
<script>
$(document).ready(function () {
if ($('table').length) {
$('#export_button').show();
}
});
</script>
</head>
<body>
<div class="container-fluid" style="max-width: 100%">
<div class="container" id="page_header">
<div class="float-right">
<div>
<button style="margin-top: 0px; display: none"
id="export_button" type="button" onclick="">
Export to CSV file
</button>
<div class="d-inline">
<img class="img-responsive img-fluid img-thumbnail back-link" style="max-width:2em; height:auto;"
src="https://upload.wikimedia.org/wikipedia/commons/3/3e/Icon_Arrow_Left_256x256.png" alt="go back" id="back-button">
</div>
<img class="img-responsive img-fluid img-thumbnail" style="max-width:2em; height:auto;"
src="https://upload.wikimedia.org/wikipedia/commons/0/04/1328101942_Arrow-Up.png" alt="menu" id="show_menu">
<div class="d-inline">
<img class="img-responsive img-fluid img-thumbnail forward-link" style="max-width:2em; height:auto;"
src="https://upload.wikimedia.org/wikipedia/commons/f/f6/Icon_Arrow_Right_256x256.png" alt="go forward" id="forward-button">
</div>
</div>
<div class="text-right login-logout" style="background:transparent; border:none; color:transparent;">
Login
</div>
</div>
<h1><div class="container">A very Informative Header</div></h1>
</div>
<div class="container-fluid">
<div class="row" style="width: 100%">
<table id="myTable" class="table table-striped table-responsive table-hover sortable">
<thead>
<tr><th>This is Column 1</th><th>This is Column 2</th><th>This is Column 3</th><th>This is Column 4</th><th>This is Column 5</th><th>This is Column 6</th><th>This is Column 7</th><th>This is Column 8</th><th>This is Column 9</th><th>This is Column 10</th><th>This is Column 11</th><th>This is Column 12</th><th>This is Column 13</th><th>This is Column 14</th></tr>
</thead>
<tbody>
<tr><td>45629</td><td>746582945 </td><td>8752</td><td>45234</td><td>342</td><td>658472</td><td>764932</td><td>48753 </td><td></td><td>Something very important</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>3.14159265357989</td><td>13</td><td>42</td><td>7abc</td><td></td><td>Here I have some pretty long text that is not important, but it's here anyway, just to make the table bigger</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
I use chrome browser.
I use this row:
<td><a href = '/'; >Home</a></td>
To go back to home page.
For example:
If I have this URL in address bar:
http://localhost:1234/#reportPage
After I press Home,I get this URL in address bar:
http://localhost:1234/
The reportPage is ID of the div tha has data-role="page".
The address bar is changes but the view not changes(the old view remain in the same place,the view of HTML page not changes).
But if use FF or IE browser it works perfect,when I press Home button the address bar changes and also the view changes to the Home page. Any idea why I have problems the the code above in google chrome?
Here my HTML code:
<!DOCTYPE html>
<html ng-app="muni">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=medium-dpi" />
<title>Review</title>
<link href="css/ol.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/themes/rtl/rtl.jquery.mobile-1.4.0.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script src="scripts/libs/angular.min.js"></script>
<script src="scripts/libs/angular-touch.min.js"></script>
<script src="scripts/libs/angular-route.min.js"></script>
<script src="scripts/libs/angular-sanitize.min.js"></script>
<script type="text/javascript" src="scripts/libs/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function () {
$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
$.mobile.pushStateEnabled = false;
$.mobile.defaultPageTransition = 'slide';
$.mobile.buttonMarkup.hoverDelay = 0;
$.mobile.allowCrossDomainPages = true;
});
</script>
<script type="text/javascript" src="scripts/libs/rtl.jquery.mobile-1.4.0.js"></script>
</head>
<body ng-controller="mainController as main">
<div data-role="page" id="home">
<div data-role="header">
<h2>{{vm.config.customer.name}}</h2>
</div>
<div data-role="main" class="ui-content">
<img style="display: block; margin: 10px auto 30px auto;max-width: 90%; max-height: 90%;" ng-src="{{vm.config.customer.logo}}" alt="{{vm.config.customer.name}}" />
<div data-role="controlgroup">
Sites Mapping
Messages
On Cnostruction
Profile
</div>
</div>
</div>
<div data-role="page" id="reportPage" ng-controller="reportController">
<div data-role="header">
<h2>{{vm.config.customer.name}}</h2>
</div>
<div data-role="main" class="ui-content">
<div ng-show="stage=='map'">
<div>
<table class="button-panel">
<tr>
<td><img src="images/mail-sent.png" ng-click="goNextStage()" /></td>
<td class="big" ng-style="{'background': 'url('+ report.Photo +') no-repeat center', 'background-size': '200px'}"><img src="images/photo-large.png" ng-click="takePhoto()" /></td>
<td><img src="images/home-large.png" ng-click="goPreviousStage()" /></td>
<td><a href='/#'>Home</a></td> <----this Home link!!!
</tr>
</table>
</div>
<div style="clear:both"></div>
<select id="reportType" ng-model="viewModel.reportType" ng-options="reportType.Text for reportType in reportTypes"></select>
<div id="addressForm">
<table style="width: 100%">
<tr>
<td style="width:200px">
<input ng-model="search.addressSearch" placeholder="Enter address" />
</td>
<td style="width:auto">
<button ng-click="searchForAddress()" class="ui-btn ui-btn-inline ui-btn-icon-right ui-icon-search ui-corner-all"></button>
</td>
<td style="text-align: left">
<button ng-click="gotoMyLocation()" class="ui-btn ui-btn-inline ui-corner-all ui-btn-icon-notext ui-icon-location"></button>
</td>
</tr>
</table>
</div>
<div id="map"></div>
</div>
<div ng-show="stage=='success'">
<div>
<table class="button-panel">
<tr>
<td></td>
<td class="big"><img src="images/home-large.png" ng-click="goPreviousStage()" /></td>
<td></td>
</tr>
</table>
</div>
<div class="ui-body ui-body-a ui-corner-all" style="margin: 20px 10px;">
<img src="images/success.png" style="float: right; width: 100px; margin: 5px;" />
<h3>Site saved</h3>
<p>
Saved.<br />
Number: <span id="reportId">{{reportId}}</span>
<br />
Thank you for coorparating
</p>
</div>
</div>
<div ng-show="stage=='error'"></div>
</div>
<div id="addressPanel" data-role="panel" data-position="left" data-display="overlay">
<ul data-role="listview">
<li ng-repeat="address in search.results">
<a href ng-click="setAddress(address)">{{address.formatted_address}}</a>
</li>
</ul>
</div>
</div>
<div data-role="page" id="messages" ng-controller="messagesController">
<div data-role="header">
<h2>Masseges</h2>
</div>
<div data-role="main" class="ui-content">
<div>
<table class="button-panel">
<tr>
<td></td>
<td class="big"><img src="images/home-large.png" ng-click="goBackPlease()" /></td>
<td></td>
</tr>
</table>
</div>
<ul id="messageList" data-role="listview" data-inset="true">
<li ng-repeat="message in messages | orderBy:'-Date' track by $index">
<h2>{{message.Title}}</h2>
<p ng-bind-html="message.Body | wrapphones"></p>
<p style="text-align: left">{{message.Date | date:'dd/MM/yyyy'}}</p>
</li>
</ul>
</div>
</div>
<div data-role="page" id="underConstruction">
<div data-role="header">
<h2>On construction</h2>
Back
</div>
<div data-role="main" class="ui-content">
<img style="width: 95%; display: block; margin: 10px auto;" src="images/Under-Construction.gif" alt="Under Construction" />
</div>
</div>
<div data-role="page" id="logPage">
<div data-role="header">
<h2>LOG</h2>
</div>
<div data-role="main" class="ui-content">
<ul id="log"></ul>
</div>
</div>
z
<script src="phonegap.js"></script>
<script type="text/javascript" src="scripts/libs/ol.js"></script>
<script src="scripts/index.js"></script>
<script src="scripts/app/config.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/app/filters/wrapphones.js"></script>
<script src="scripts/app/services/coordinateSerivce.js"></script>
<script src="scripts/app/services/reportService.js"></script>
<script src="scripts/app/services/mapService.js"></script>
<script src="scripts/app/services/pushService.js"></script>
<script src="scripts/app/controllers/mainController.js"></script>
<script src="scripts/app/controllers/reportController.js"></script>
<script src="scripts/app/controllers/messagesController.js"></script>
</body>
</html>
One approach could be to include an input element as first child of body element, with tabindex set to 1 ; using history.replaceState()
<!DOCTYPE html>
<html>
<head>
<style>
#abc {
position: relative;
top: 800px;
}
</style>
<script>
function home(e) {
e.preventDefault();
history.replaceState({}, "home", location.pathname);
document.getElementById("home").focus()
}
</script>
</head>
<body>
<h1>Hello Plunker!</h1>
<input tabindex="1" type="button" id="home" style="opacity:0;width:0;height:0" />
<table>
<tbody>
<tr>
<td>abc
</td>
</tr>
<tr>
<td id="abc">Home
</td>
</tr>
</tbody>
</table>
</body>
</html>
plnkr http://plnkr.co/edit/sRyoc4uR2N4F8sbzD4zZ?p=preview
You basically don't go to another page, or reload it. You stay on the same page, just trying to jump to the top. #reportPage takes you to an element with the id reportPage, removing the id doesn't necessary mean "scroll to top". As you seem to get to the top of the page, just change it to:
<td><a href='/#'>Home</a></td>
It'll function correctly, by explicitly taking you to the top.
If it doesn't work still, the suggestion is to set the location to / and reload the page with javascript:
<td><a href='javascript:location.href="/";location.reload();'>Home</a></td>
The location.reload() sentence may be excess (for me it does work without it), but as you say you have problems with reloading, you can also try with this sentence.
To be sure of all, add this line of JS in your pages:
$('a[href="/"]').off();
jQuery off Remove an event handler, .off() with no arguments removes all handlers attached to the elements.
Your code will works! Just use the correct xHtml:
<td>Home</td>
or, to remain in the same folder
<td>Home</td>
If you have www.yoursite.com/ciao/#apage href="./" will return www.yoursite.com/ciao/ while href="/" will return www.yoursite.com
i found html5 game (one player with computer) in a site and convert it to 2 player.this is my summarized code:
<html>
<head><title></title></head>
<body onload="javascript: paintBoard();">
<canvas width="500" height ="500" id="board" onclick="javascript: clickHandler(event);"
</canvas>
<script>
.... //my html5 game logic is written in here that works correctly
</script>
</script>
</body>
</html>
when i run browser to see my (this file name is tictactoe.html)code in browser no problem to see the game but when i put this code to another page that has template i can't see anything.that page name is play.php and like this :
<!DOCTYPE HTML>
<html>
<head>
<title>world Game Center </title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<!-- stylesheets -->
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/light.css" rel="stylesheet" type="text/css" />
<!-- modernizr enables HTML5 elements and feature detects -->
<script type="text/javascript" src="js/modernizr-1.5.min.js"></script>
<script type="text/javascript" src="js/tictactoe.js"></script> //this is the game logic that i suggest above.
</head>
<body >
<div id="main">
<!-- begin header -->
<header>
<nav>
<ul class="sf-menu" id="nav">
<li>home</li>
</ul>
</nav>
<div id="logo"><h1>game center onlineworld</h1></div>
</header>
<!-- end header -->
<!-- begin content -->
<div id="site_content">
<div id="left_content">
<center>
<form id="name_form">
<h1>chat</h1>
<!-- <input type=text id="name_input"
style="width: 200px; margin: 2px" disabled>
<input type="submit" id="connect_button" value="Connect"
style="width: 70px; margin: 2px" disabled>
</form>
-->
<textarea id="chat_box" readonly="readonly"
style="width: 400px; height: 400px;
margin: 2px; resize: none"></textarea>
</textarea>
<form id="message_form">
<input type=text id="message_input"
style="width: 220px; height: 18px; margin: 2px" disabled>
<input type="submit" id="send_button" value="Send"
style="width: 60px; margin: 2px" disabled>
</form>
</center>
</div>
<div id="right_content">
<canvas width="500" height ="500" id="board" onclick="javascript: clickHandler(event);"></canvas>
</div>
</div>
<!-- end content -->
</div>
<!-- javascript at the bottom for fast page loading -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing-sooper.js"></script>
<script type="text/javascript" src="js/jquery.sooperfish.js"></script>
<!-- initialise sooperfish menu -->
<script type="text/javascript">
$(document).ready(function() {
$('ul.sf-menu').sooperfish();
});
</script>
best regards, I want to write a javascript code that write to Paragraph <P><br data-mce-bogus="1"></P> which exists inside this
<html><head>
</head>
<body>
<table id="contentMessage_tbl" class="mceLayout" cellspacing="0" cellpadding="0" role="presentation" style="width: 100%; height: 260px;">
<tbody>
<td class="mceIframeContainer mceFirst mceLast">
<iframe id="contentMessage_ifr" frameborder="0" src="javascript:""" allowtransparency="true" title="Rich Text AreaPress ALT-F10 for toolbar. Press ALT-0 for help" style="width: 100%; height: 216px; display: block;">
<head xmlns="http://www.w3.org/1999/xhtml">
<meta content="IE=7" http-equiv="X-UA-Compatible">
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
</head>
<body id="tinymce" class="mceContentBody " contenteditable="true" spellcheck="false" dir="ltr" style="font-size: 12px; font-family: arial,helvetica,sans-serif;">
<p>
<br data-mce-bogus="1">
</p>
</body>
</html>
</iframe>
</td>
</tbody>
</table>
</body>
</html>
I tried this code
javascript:document.getElementById('contentMessage_ifr').contentDocument.body.innerHTML="it works";
is there something wrong with my code , it works fine on w3schools javascript editor
thanks in advance
Your code is getting the ID of the iframe.
Try getting a hold of the paragraph.
Here's a jsfiddle example which should work:
http://jsfiddle.net/kakashi/QR9N8/
The relevant code you want, if you want to use jQuery, is:
$('p:has(br[data-mce-bogus=1])').append("<p>Hi There</p>");
maybe your html code isn't very clean, you are missing some html tags like "html" and "tr", try this html:
<html>
<head>
</head>
<body>
<table id="contentMessage_tbl" class="mceLayout" cellspacing="0" cellpadding="0" role="presentation" style="width: 100%; height: 260px;">
<tbody><tr>
<td class="mceIframeContainer mceFirst mceLast">
<iframe id="contentMessage_ifr" frameborder="0" src="javascript:""" allowtransparency="true" title="Rich Text AreaPress ALT-F10 for toolbar. Press ALT-0 for help" style="width: 100%; height: 216px; display: block;">
<html>
<head xmlns="http://www.w3.org/1999/xhtml">
<meta content="IE=7" http-equiv="X-UA-Compatible">
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
</head>
<body id="tinymce" class="mceContentBody " contenteditable="true" spellcheck="false" dir="ltr" style="font-size: 12px; font-family: arial,helvetica,sans-serif;">
<p>
<br data-mce-bogus="1">
</p>
</body>
</html>
</iframe>
</td></tr>
</tbody>
</table>
</body>
</html>