dsonesuk

Members
  • Content count

    8,540
  • Joined

  • Last visited

  • Days Won

    237

dsonesuk last won the day on April 22

dsonesuk had the most liked content!

Community Reputation

634 Excellent

1 Follower

About dsonesuk

  • Rank
    w3schools Guru
  • Birthday July 15

Contact Methods

  • ICQ
    0

Profile Information

  • Gender

Recent Profile Visitors

73,533 profile views
  1. Because usually how they are set out in the menu layout is the order that is usually required. My solution makes it more manageable.
  2. You should replace the menu container div, and float the ul right, not individual LI elements, if you look they are in the wrong sequential order.
  3. In its present state using height 100% won't work because the body element shrinks to content height also, unless you set set height of html, body elements to 100% height, then use min-height: 100% on .first div. Using px unit on .first div should have worked? Note: the white elements text won't show above background image because it is outside the .first div containment.
  4. Either adjust the height: of .first class div, or place background image in body or html elements.
  5. The last sentence is when you created the form page and thinking that you alone know the full url address to access that page, because that page is not linked to from any other page, that it would be undiscoverable and therefore safe, is untrue.
  6. If you are adding html through a secure form whose access is only achievable through logging on and accessing through username password, then save html content as entered in textarea to database table field, that is how CMS does it. IT then reads that data containing html tags back to page or newsletter, which if email must be in a table structured layout. The images must be saved on server and reference with absolute path NOT relative, or be an encoded image file. IF the form is accessible from none secured area that is when sanitization needs to be taken. IF this page is not linked to in anyway, it can still be found and used to inject code IF NOT accessible ONLY by logging into the form page.
  7. IF it is not going Joe public who can submit ANYTHING, but just you, or someone with Authorization then No, but you can limit the type of html code (such as '<h1><a><p>') that can be submitted using strip_tags(), if not listed, they will be removed even <script> and <?php. Using ' <h3>Q&A</h3>' will convert it to &lt;h3&gt;Q&amp;A&lt;/h3&gt; and without being decoded with htmlspecialchars_decode() will show exactly as <h3>Q&A</h3> NOT as Q&A But you could limit the information submitted, input for title, sub title, content, images, then you control what html tags are used for the Newsletter and where/how this information is used.
  8. Block elements such as div, h1, p fill the width available to them, any element below them will stack below them, if floated or not. A floated element before a block element/s, will cause the block element to merge within it, and even though the block element still take the full width, the text within them will flow to and around the edges of floated element. #1 If you place img element within the first paragraph, which you can because is a inline element and acts similar to text, It will fall below header h1, the first paragraph text will merge to edge of img element as will the second paragraphs text. For adding a div element to .content class div for extra column, you need to float and set its width to requirements.#2 and #3 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" /> <title>Document Title</title> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <script type="text/javascript"> </script> <style type="text/css"> * { box-sizing: border-box; } .header, .footer { background-color: grey; color: white; padding: 15px; } .column { float: left; padding: 15px; } .clearfix::after { content: ""; clear: both; display: table; } .menu { width: 25%; } .content { width: 75%; } .menu ul { list-style-type: none; margin: 0; padding: 0; } .menu li { padding: 8px; margin-bottom: 8px; background-color: #33b5e5; color: #ffffff; } .menu li:hover { background-color: #0099cc; } .column.content {float: right;} .column.content > img {float: left; max-width: 25%; margin: 0 8px;} .column.content > div {max-width: 25%;} .column.content > div img {max-width: 100%;} .column.content > div.left {float: left; margin: 0 8px; } .column.content > div.right {float: right; } </style> </head> <body> <div class="clearfix"> <div class="column menu"> <ul> <li>The Flight</li> <li>The City</li> <li>The Island</li> <li>The Food</li> </ul> </div> <div class="column content"><img src="https://www.w3schools.com/w3css/img_lights.jpg" alt=""> <h1>The City #1</h1> <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p> <p>You will learn more about web layout and responsive web pages in a later chapter.</p> </div> <div class="column content"> <div class="left"><img src="https://www.w3schools.com/w3css/img_lights.jpg" alt=""></div> <h1>The City #2</h1> <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p> <p>You will learn more about web layout and responsive web pages in a later chapter.</p> </div> <div class="column content"> <div class="right"><img src="https://www.w3schools.com/w3css/img_lights.jpg" alt=""></div> <h1>The City #3</h1> <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p> <p>You will learn more about web layout and responsive web pages in a later chapter.</p> </div> </div> <div class="footer"> <p>Footer Text</p> </div> </body> </html>
  9. That looks more like MSSQL rather than MYSQL, can't you check number of records returned, if 0 insert.
  10. You export email details as csv into a marketing email application like mailchimp, create email template to you needs, and send to imported emais that are stored.
  11. You could reduce class name by using sibling selector '#letter_abstract textarea + span' would target next sibling only <div id='letter_abstract' class="textarea_maxword"> <textarea name='letter_abstract' placeholder="Enter this week's abstract here!"></textarea> Word Count: <span class='display_count'>0</span>Words Remaining: '#letter_abstract textarea + span + span' would target next sibling following the span directly following the element with id '#letter_abstract' <textarea name='letter_abstract' placeholder="Enter this week's abstract here!"></textarea> Word Count: <span class='display_count'>0</span> Words Remaining: <span data-maxcount="150" class='words_remaining'>0</span> You wouldn't use it in this case but this sibling selector using '~' '#letter_abstract textarea ~ span Would target all sibling span elements directly following element with id '#letter_abstract' <textarea name='letter_abstract' placeholder="Enter this week's abstract here!"></textarea> Word Count: <span class='display_count'>0</span> Words Remaining: <span data-maxcount="150" class='words_remaining'>0</span>
  12. You did use ingolmes corrected code? There should be a unique singular record from both with matching id.
  13. If they are child element of parent div, you need to add space before child elements. $( id + 'textarea') will look for an element with id '#letter_abstracttextarea' $( id + ' textarea') = '#letter_abstract textarea' will look for child textarea element whose parent element has this specific id.
  14. There will always be 1 file listed, the current file you selected, but since you are not uploading the selected image, its pointless referring to this, as you will be using the encoded data of the selected image that is returned by this code and used in the preview image with id 'compimg' attribute src, which is what you should refer to.
  15. The best approach is to avoid arrays, because you would be constantly updating JavaScript array code for id reference and max word count, and work on a way of using and setting the required information within html, so the script will automatically gather this info and run without the need for adjustment. class name added to div container 'textarea_maxword', custom data attribute to span 'data-maxcount' <div id='letter_abstract' class="textarea_maxword"> <textarea name='letter_abstract' placeholder="Enter this week's abstract here!"></textarea><br /> Word Count: <span class='display_count'>0</span> Words Remaining: <span data-maxcount="800" class='words_remaining'>0</span> </div><!-- end div#letter_abstract --> <div id='letter_body' class="textarea_maxword"> <textarea name='letter_body' placeholder="Enter this week's content here!"></textarea><br /> Word Count: <span class='display_count'>0</span> Words Remaining: <span data-maxcount="400" class='words_remaining'>0</span> </div> $(function() { $(".textarea_maxword textarea").on('keydown', function(e) { var words = $.trim(this.value).length ? this.value.match(/\S+/g).length : 0; var max = $(this).parent().find('.words_remaining').attr('data-maxcount'); if (words <= max) { $(this).parent().find('.display_count').text(words); $(this).parent().find('.words_remaining').text(max - words) } else { if (e.which !== 8) e.preventDefault(); } }); });