I've managed to create some code which makes divs appear when the user clicks the navigation buttons.
This works without the html code inside the javascript (which will be the information shown on the pafge when the use clicks a button).
I've had a huge red error come up on my atom and I cant seem to find what I've done wrong. I've tried using Linter too and nothing is coming up.
Can anyone suggest anything?
Here is an image with the error:
here is the code:
$('#myhtmlcss').click( function() {
$('#content-reveal').fadeOut( 500, function() {
$('#content-reveal').html( '<div> <h2>HTML AND CSS</h2> <p>Below is example HTML and CSS for the Aguillar Family Wine Festival Schedule website.</p> <br> <p> <textarea name="textareahtml" rows="10" cols="30" readonly> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Aguillar Family Wine Festival</title> <link rel="stylesheet" type="text/css" href="/examples/winestyle.css" /> <link href="https://fonts.googleapis.com/css?family=Oswal" rel="stylesheet"> </head> <body> <header> <h1>Annual Aguillar Family Wine Festival</h1> </header> <div class="container"> <table> <thead> <tr> <th colspan="2"> <h1>Wine Festival Schedule</h1> </th> </tr> <tr> <th> <h2>Time</h2> </th> <th> <h2>Event</h2> </th> </tr> </thead> <tbody> <tr> <td class="left"> <h3>12:00PM</h3> </td> <td> <h3>Welcome Reception</h3> </td> </tr> <tr> <td class="left"> <h3>1:00PM</h3> </td> <td> <h3>Storytelling & Tasting</h3> </td> </tr> <tr> <td class="left"> <h3>2:00 PM</h3> </td> <td> <h3>Wine Luncheon</h3> </td> </tr> <tr> <td> <h3>3:00PM</h3> </td> <td> <h3>Aguillar Family Wines</h3> </td> </tr> <tr> <td> <h3>4:00PM</h3> </td> <td> <h3>Wine & Cheese Tasting</h3> </td> </tr> </tbody> </table> </div> <footer> <h3>Contact</h3> <h3>Location</h3> <h3>Privacy Policy</h3> </footer> </body> </html> </textarea> <textarea name="textareacss" rows="10" cols="30" readonly></textarea> </p> <p>CLICK HERE TO SEE THE EXAMPLE ABOVE IN ACTION </p> <p>This site is also another example of my HTML, CSS & SCSS skills. The code for this website, plus plenty of other examples, are on my GITHUB. </p> </div>' );
$('#content-reveal').fadeIn( 500 );
} );
} );
For performance reasons, Atom will stop looking at a line when it exceeds ~1000 characters. Fortunately, there are a few options to circumvent this:
Use Tree Sitter
As of Atom v1.25, there's a new experimental parsing system called tree-sitter. You can enable it in the Atom core settings:
Note: You might have to close and re-open your file (or re-assign the grammar) for the changes to apply.
Change Your Code
Alternatively, you can always split up your code into smaller chunks and concatenate them to avoid very long strings. This might also make it easier to maintain.
This may be caused by the fact you have <html> written inside the .Html tag.
Unless it's inside an iframe, you shouldn't write <html>.
You can escape the brackets using
< (<)
> (>)
Related
I would like to include to an html page a table that have the properties of the wikipedia tables: sortable, with little arrow next to the title that indicates the descending/ascending order.
Typically, in this extensive list of examples, I am looking for the simplest format:
https://en.wikipedia.org/wiki/Help:Sorting#Example
I was able to find a script to sort out my table, and I manually included the up/down arrow, but I was wondering whether one could import the script used by wikipedia pages, and then create tables using class="wikitable sortable".
Is it possible?
Here is the code to make the table:
<table class="wikitable sortable">
<tbody><tr>
<th>name
</th>
<th>data
</th>
<th>more data
</th></tr>
<tr>
<td>cats
</td>
<td>273
</td>
<td>53
</td></tr>
<tr>
<td>dogs
</td>
<td>65
</td>
<td>8,492
</td></tr>
<tr>
<td>mice
</td>
<td>1,649
</td>
<td>548
</td></tr></tbody></table>
I regularly use a website with a lot of textarea boxes, but the stupid thing is that they aren't expandable and thus adding a lot of text to them (which I do frequently) feels quite cramped and is more difficult than I would like it to be. I would like to make a greasemonkey script/UserScript or some sort of javascript I can paste in the Chrome Console to change this part of the HTML/CSS:
resize: none
To:
resize: true
This makes the textarea box have the little gripper at the bottom and solves the problem
A few things to note are 1. this website seems to be dynamically generated from some sort of CMS and 2. I don't have the ability to change any content on this CMS. Also, I'm sure there is a better way to ask this question..
Another thing is that all I want is for the textarea to always be big enough to house all of the text, so if there is a way to automatically expand to the text, that'd be great. Also, it'd be great to have the textarea gripper on the stackoverflow new post text box!
Full example code is below where you will find 'resize: none'
Many thanks!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<tr>
<td valign="top" class="content_tab_bg_padding" align="left">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody>
<tr>
<td class="height2"></td>
</tr>
<tr>
<td class="form_label_text" align="left" valign="top">Gotta change this text box to be permanently expandable. Ideally automatically expandable.
</td>
</tr>
<tr>
<td align="left" valign="top" width="100%" style="padding-top: 2px;">
<textarea
name="ctl00$ContentPlaceHolderPageContents$ctl00$ctl00$TextArea_CustomDocumentNoteGenerals_PersonPresent"
id="ctl00_ContentPlaceHolderPageContents_ctl00_ctl00_TextArea_CustomDocumentNoteGenerals_PersonPresent"
class="form_textareaWithoutWidth element" rows="4" style="width: 95%; resize: none;"
spellcheck="True" data-preventexpand="PreventExpand" tabindex="0"></textarea>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</body>
</html>
Here is an example based on your post:
const textarea = document.querySelector('#ctl00_ContentPlaceHolderPageContents_ctl00_ctl00_TextArea_CustomDocumentNoteGenerals_PersonPresent');
if (textarea) { // check if found
textarea.style.resize = 'both';
}
Update on comment
For more than one textarea on the page
document.querySelectorAll('textarea').forEach(item => item.style.resize = 'both');
I have a HTML <textarea> that I am using to paste HTML into.
The contents of the textarea are then being submitted to a firestore server.
I then render the HTML into:
<p white-space: pre-line;>HERE<p>
This approach will maintain the line breaks but not the indenting.
This:
<div>
<table>
<tr>
<td>Test code</td>
</tr>
</table>
</div>
Becomes this:
<div>
<table>
<tr>
<td>Test code</td>
</tr>
</table>
</div>
How would I go about maintaining the indenting?
Found the answer to my own question.
Just wrap the outputted code from the server like so.
<pre>
<code>OUTPUT</code>
</pre>
You can use ReactHtmlParser. You can call it like this ReactHtmlParser(yourHtmlString)
I am using two wonderful jQuery plugins for a project:
this date/time picker: https://github.com/xdan/datetimepicker
this HTML table editor: https://github.com/mindmup/editable-table
They work separately very well but unfortunately they are not compatible for each other. When I want to update a date in a HTML table, the calendar appears and closes when I click on the date/time, but the value in the table's cell is not updated (and Chrome's javascript console does not report any error message). Would you know a solution or a workaround for that ? You can quickly test it by yourself with the code below:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en' dir='ltr'>
<head>
<title>Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='http://mindmup.github.io/editable-table/mindmup-editabletable.js'></script>
<link href='http://xdsoft.net/scripts/jquery.datetimepicker.css' rel='stylesheet' type='text/css' />
<script src='http://xdsoft.net/scripts/jquery.datetimepicker.js'></script>
<script>
$(function() {
$('table').editableTableWidget();
$('.picker').datetimepicker({ format:'Y-m-d H:i' });
});
</script>
</head>
<body>
<p>The date/time picker works perfectly:</p>
<input class='picker' />
</br></br>
<p>But not in the table below:</p>
<table style='border:1px solid black'>
<tr><td class='picker'>2014-08-22 15:00</td></tr>
<tr><td>However no problem for text, i.e. just here!</td></tr>
</table>
</body>
</html>
It would be awesome that these two plugins could work together. Thanks!
Pierre
I found your question when I was looking for something that would do what you were looking to do. I didn't find it, so modified the mindmup solution, expanding it to include a couple of different editing methods. The ones I ended up with are:
Regular text.
Date, using bootstrap-datepicker.
Value text, which is something specific for my application, where the user can enter a whole number with or without commas and have them displayed with commas.
Numbers, being whole numbers using the <input type="number"> element.
Selects. These are a bit more tricky, but essentially you provide a javascript associative array, and the code uses the data-edit-source attribute to find the array.
There is an example on the git repository. I'd put the code in here, but I'm lazy, and don't want to explain it. Sorry about that. If you download the code, there is a demo in the index.html file.
The table looks like this:
<table id="secondDemo" class="table table-striped">
<thead><tr>
<th>Location</th>
<th>Expires</th>
<th>Count</th>
<th>Value</th>
</tr></thead>
<tbody>
<tr>
<td data-edit-type="select" data-edit-source="locations">Adelaide</td>
<td data-edit-type="date">24-Jan-2015</td>
<td data-edit-type="ntext">8</td>
<td data-edit-type="vtext">5,000</td>
</tr>
<tr>
<td data-edit-type="select" data-edit-source="locations">Brisbane</td>
<td data-edit-type="date">25-Jan-2015</td>
<td data-edit-type="ntext">8</td>
<td data-edit-type="vtext">15,000</td>
</tr>
<tr>
<td data-edit-type="select" data-edit-source="locations">Melbourne</td>
<td data-edit-type="date">26-Jan-2015</td>
<td data-edit-type="ntext">9</td>
<td data-edit-type="vtext">8,000</td>
</tr>
<tr>
<td data-edit-type="select" data-edit-source="locations">Sydney</td>
<td data-edit-type="date">27-Jan-2015</td>
<td data-edit-type="ntext">6</td>
<td data-edit-type="vtext">9,000</td>
</tr>
</tbody>
</table>
... and the required javascript looks like this:
var locations = {
'Adelaide': 'Adelaide - South Australia',
'Brisbane': 'Brisbane - Queensland',
'Canberra': 'Canberra - Australian Capital Territory',
'Darwin': 'Darwin - Northern Territory',
'Hobart': 'Hobart - Tasmania',
'Melbourne': 'Melbourne - Victoria',
'Perth': 'Perth - Western Australia',
'Sydney': 'Sydney - New South Wales'
};
$('#secondDemo').editableTableWidget();
Hope this helps.
The editable table widget creates new <input/>'s that are hidden and appear whenever a user clicks on the field. In order for datetimepicker to work on those fields, you have to tell editable table to add the picker class to the inputs:
$(function() {
$('table').editableTableWidget({editor: $('<input class="picker"/>')});
$('.picker').datetimepicker({ format:'Y-m-d H:i' });
});
DEMO Here
Edit: I just realized that this won't work in the way you want. Looking at the code, editable table only creates 1 hidden input box that it uses for all table cells. Thus, this will only work if you want all of your table cells to be datepickers.
As kind of workaround I just adjusted your Fiddle like that: Fiddle
with following changes:
$(function () {
$('table').editableTableWidget();
$('.picker').datetimepicker({
format: 'Y-m-d H:i'
});
$('.pickertwo').datetimepicker({
format: 'Y-m-d H:i'
});
$(".pickertwo").on("change", function () {
var textVal = $(this).val();
$(".textpick").text(textVal);
});
$(".pickTwo").on("click", function () {
$(".pickertwo").focus();
})
});
Markup changes:
<input class='picker' />
<table style='border:1px solid black' class="pickTwo">
<tr>
<td class='textpick'></td>
</tr>
<tr>
<td>However no problem for text, i.e. just here!</td>
</tr>
</table>
<input class='pickertwo' />
Problem is to hide the 2nd datepicker - setting display: none; or visibility: hidden; will disable the functionality. Maybe it's possible that you set a low z-index value for the 2nd input and hide it behind an image that matches the page where you would implement it and set a higher z-index for this image.
Chrome 18.0.1025.162m
Struts 1.x
Here's the basic structure of the divs I'm creating using js/mootools:
<div class="track">
<table>
<tr>
<td style="white-space:nowrap; width:1%;">
<td style="white-space:nowrap; width:1%;">
<td>
</tr>
</table>
<div>
<table>
<tr>
<td style="width:50%;">
<fieldset style="height: 244px; ">
<legend></legend>
<table>
<tr>
<td>
<img>
</td>
<td>
<table>
<tr>
<td class="label"></td>
<td class="comparable"></td>
</tr>
<tr>
<td class="label"></td>
<td class="comparable"></td>
</tr>
... 8 more of same
</table>
</td>
</tr>
</table>
<table>
<tr>
<td style="text-align: center; ">
<button type="button"></button>
</td>
</tr>
</table>
</fieldset>
</td>
<td>
...essentially same as prior td
</td>
</tr>
</table>
</div>
</div>
relevant css:
div.track {
outline:solid thin;
margin-bottom:10px;
background-color:#DCEDEA;
}
td.label {
text-align:right;
white-space:nowrap;
}
'comparable' is just a flag so I can find and possible restyle them later.
These structures are created in the onreadystatechange function from a single JSON response. 100+ of these are being created but I don't see anything until they're all ready and then they all appear at once. I would expect (and prefer so the user sees progress) each div to display as soon as it's ready and added (using mootools Element.inject) to the DOM. If I step through using Chrome's dev tools I see the expected behavior of the div displaying immediately after the inject.
I'm fairly new to web development, so if you feel the need to critique my methods I'm open to hearing your thoughts, but I'd really like an explanation for the behavior I'm seeing.
Thanks.
edit
Basic idea of page html:
<body>
<div id='foo'></ div>
</body>
Basic idea of js (within onreadystatechange):
var jsonObj = JSON.decode(req.responseText);
for (var i = 0; i < jsonObj.objects.length; ++i) {
getStructure(jsonObj.objects[i]).inject('foo'); //getStructure builds the div above and returns the div element
}
I suspect that the DIVs are being displayed one at a time, but they're all being displayed so quickly that it looks like it's happening all at once. Add console.log(i); into that for loop and watch your console while the DIVs are loading. You can bring up the console with Ctrl+Shift+J using Google Chrome, or by installing the Firebug extension under Firefox.
EDIT:
In that case, I'd guess it has something to do with the display loop in your browser. Probably something like (in very rough pseudocode):
while (1) {
executeJavascript(); // blocks until all javascript is executed, including your loop
displayPage();
}
You may therefore find this discussion useful: How can I force the browser to redraw while my script is doing some heavy processing?