Jump to content

Search the Community

Showing results for tags 'HTML'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • HTML/XHTML
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • XSLT/XSL-FO
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Calendars

  • Community Calendar

Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 688 results

  1. Hello I have a HTML page with a background image My image looks fine at full screen(normal screen) However when I change the width of my browser to half the background image gets this random white space at the bottom of the page,I want it to still cover the entire browser window but the white space makes it look really bad.
  2. CSS NOT CHANGING DYNAMICALLY

    Hello I have a problem. I have been playing around with element width/heights and positioning to make sure everything look cool and neat regardless of how the window(or web browser window) is resized. One thing that constantly comes up is elements within a div that gets forced out of the div For example If I have a div and I set the width/height to percentages and I place elements within the div lets say a form with two inputs for username and password. If I resize my window very small there comes a point where the input boxes are totally pushed out of the div? Why is that and how can I fix it so that the element(inside div) also resizes as the div gets resizes(because of the window being resized). I am confused because I am thinking that if my div's width/height are percentages they resize dynamically as my window gets resizes why isn't this happening to the inputs or other elements(I tried with an image element and a few p elements nested inside the div) PLEASE NOTE(I already tried relative positioning didn't work, I also gave my form width/height percentages but that also doesn't work) Here is my example code for a better understanding If you look at the image called WRONG.png you will see my inputs from my form inside the div is pushing OUTSIDE the div?
  3. Responsive Form Design

    I have designed a form using Dreamweaver CS3. The form was designed using tables. I am having an issue with a section of the form that contains 4 columns. Column 1 is used as the description or label for the input field in column 2. The same applies for column 3 & 4. I am trying to design a media query that will make the form more responsive on smaller mobile devices and tablets. I have attached a section of my form containing the 4 columns and included the media query I am currently using. The overall design has been working successfully for over two years apart from the responsiveness issue on smaller mobile devices and tablets. Apart from a total re-design of the entire layout, is it possible to make the 4 column table more responsive using the table method I have attached. table.html
  4. Hi everyone, Have been working with video backgrounds and everything is going great. I have surfed the web and I have been trying to find out how to display an image after a video plays. I know how I can do a poster image before a video plays, I want a poster image to be displayed after the video is done. Now I don't know where I need to post this so I figure I start here. I will post my code down below so you can take a look at what I already have. Thanks in advance! <video onloadstart='this.volume=0.3' id='bg-video-index' onclick='playVideo' autoplay> <source src='media/bg-video/bg-video.mp4' type='video/mp4'> Your browser does not support HTML5 video. </video> <script src="text/javascript"> function playVideo(){ var video = document.getElementById('bg-video-index'); video.play(); video.addEventListener('ended',function(){ window.location = 'media/images/bg/logo.png'; }); } </script>
  5. I am building a site for a friends business and it will be relatively basic but will have a blog. My plan was to use wordpress and the generatepress theme as it is so lightweight. I want to avoid using a pagebuilder because I want to be comfortable building with the actual code. Also my understanding is pagebuilders can add bulky unused code that slows the site down. So I was thinking of using a CSS based framework. I figure the site won’t have much interactivity so I can always add that individually with javascript/jquery or a wordpress plug in, avoiding the use of a bulkier framework that already has javascript in it like bootstrap. I was thinking I would attach the w3.css style sheet to the wordpress theme because w3.css is so lightweight and simple and I have been really enjoying it. Then I started to think that the aspect that I utilize the most is the media queries for responsive design. Having css classes that resize or hide the content to display on desktop vs tablet vs mobile. So at that point I was wondering maybe the best bet is just to make my own framework? Because it will only include the classes needed for the site? For example I never use the colors that come packaged with the w3.css style sheet. Does that make sense or what is normal practice in my situation? Any advice would be great. I don’t really know if this is the best approach to what I want to do, but the end goal is a lightweight website that I hand build as much as possible to keep it fast and so I can understand the HTML/CSS better. Thank you.
  6. I am trying to copy form inputs from 3 address fields to corresponding duplicate fields in another section of my form. If I use the following script and html the process works perfectly. <input type="checkbox" id="copy" value="" name="copy" onclick="CopyAddress(this.form)"> <script> function CopyAddress(f) { if(f.copy.checked == true) { f.bstr.value = f.gstr.value; f.bsubcit.value = f.gsubcit.value; f.bstate.value = f.gstate.value; f.bpcode.value = f.gpcode.value; } else { f.bstr.value = ""; f.bsubcit.value = ""; f.bstate.value = ""; f.bpcode.value = "";} } <script> I would like to change the checkbox to a button like so: <input type="button" id="copy" value="Copy" name="copy" onclick="CopyAddress(this.form)"> However once I change to a button, the script will not run and I can't work out why. My limited understanding tells me the fault lies in line 2 of the JS, if(f.copy.checked == true). Can anyone tell me where I am going wrong please.
  7. I tried including the 'tab.html' and ‘content.html’ into my 'index.html' (using w3school code: how to include HTML, found at: https://www.w3schools.com/howto/howto_html_include.asp), but the javascript and css elements do not work. The buttons don't work as intended. Look at: https://rads-198409.appspot.com If you minimize the browser window, the tab is supposed to change to a drop-down menu, but the button does not work at all. I have checked the individual pages and they seem to work just fine, just not when they are combined. Am I doing something wrong? Could someone help? All the code I used is from w3school and I have only modified the file names (tab.html and content .html to point to the right files). Below are links to the code: Code for ‘tab.html’ - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav Code for ‘content.html’ - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapsible_symbol Code for ‘index.html’ - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_html_include_2
  8. State/Country Form Fields

    Being reasonably new at generating javascript, I am trying to create a form where the client enters the State of Birth (Queensland, Victoria, Tasmania etc) and by using javascript the Country of Birth is auto filled with "Australia". I have got to a stage where I can auto fill the Country field with a small js script with either onClick or mouseOver however I am at a loss with the code to be able to fill the Country field by entering the state name in the State field. At 75 I'm running out of brains and would appreciate a little help please. Autofill.html
  9. It's been a long time since that PHP class in college, and the majority of my focus since graduating has been on HTML5 / CSS3 / JavaScript. I'm getting ready to go live with a new website. I have a contact form build with HTML5 and CSS3 with validation done with JavaScript. The only problem is, I'll need a PHP script to send the form via email. Is there a basic, easy to use script that someone could recommend? Also, is it possible that my web host (I'll possibly be going with Go Daddy) will make such a script available? I'm hoping to find something that's essentially plug and play. Thank you
  10. Tutorials

    Suggestion 1: I had an idea for w3school for a very long time and this idea will help people learn better and even make school suggest it more. Add in a tutorial where people will have to figure how how to fix codes like it's almost like the try-it-out but you have to go through courses and learn programming through that, almost like khan academy almost except with programming except khan academy only teaches html and not PHP. And also it wouldn't hurt to show videos of how to understand PHP more. And also how to create websites like facebook and youtube and have interactive videos as well like khan academy and those interactive videos on there was actually cool, I was amazed of how they did that when I first learned html. W3school.com actually taught me more about html and CSS more than khan academy. I just hope this forum in connecting to the website I am talking about. But w3school did have a link to this forum so I am guessing so. Suggestion 2: Also I notice some websites has custom context menus and wondering if somehow they can teach how to create that as well because I tried searching how and had to program it and I looked at other websites and it was accurate and w3school shows more accurate html and CSS. Can it be added
  11. DTD/XML to HTML

    As I went through the XML tutorials I kept thinking about a personal project I want to do at home. I would like to turn my iTunes library into a webpage. I just need a view only page, but something that could be automatically updated when items are added to the library. You may already know iTunes uses an xml file to store metadata about media files in the library. This xml has a dtd schema (<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">) identifying the structure of the xml (I learned this from the tutorials). I want to use the "iTunes Library.xml" to populate the web page, and since it already has a structure, I figured it would be easy to do. The problem is I don't see how to do this. Going through all the XML tutorials including the DTD tutorial, it's not clear on how to accomplish this. I tried to reference the xml tags through the DOM, it worked once, giving me the tag type. I also found that using the DOM on such a large XML could make the web page slow. I know that I could use an xslt to format the xml but I would have to reference the xslt document in the xml. Again I want it dynamic, so using the referenced iTunes dtd works. I just can't determine how to go about doing this with the tutorials. They didn't make it clear how to use the DTD to turn the xml into html Any assistance would be greatly appreciated.
  12. Submit-button error

    I made a website using HTML and some javascript. I tried to make a contact form with PHP, but something goes wrong when submitting and I don't understand why. I followed a tutorial and can't see any mistakes (first time using PHP, so there might be a lot I can't see). Here is the HTML-code and PHP-file. I also uploaded the original, in case you prefer to open it that way.. <!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> <link rel="stylesheet" type="text/css" href="sample.css"> <style type="text/css" media="all"> @import "sample.css"; </style> <title>Yan Zhou | CONTACT</title> </head> <body> <div id="container"> <div id="header_home"></div> <div id="navigatie"> <ul> <li id="linkabout"><a href="Yan Zhou - About.html"><img src="images/link_about.png" alt="ABOUT"></a></li> <li id="linkportfolio"><a href="Yan Zhou - Portfolio.html"><img src="images/link_portfolio.png" alt="PORTFOLIO"></a></li> <li id="linkcontact"><a href="Yan Zhou - Contact.html"><img src="images/link_contact.png" alt="CONTACT"></a></li> </ul> </div> <div id="supportingText"> <form action="contact_form.php"> <label for="name">Name</label> <input type="text" id="name" name="name" placeholder="I will need your name for contacting you. ^^"> <label for="company">Company</label> <input type="text" id="company" name="company" placeholder="If you contact me on behalf of a company, type it here. Otherwise type 'None'."> <label for="email">Email</label> <input type="text" id="email" name="email" placeholder="How else could I answer you?"> <label for="message">Message</label> <textarea id="message" name="message" placeholder="Who are you, where are you from, what do you wish to say? :-)" style="height:200px"> </textarea> <input type="submit" value="Submit"> </form> </div> </body></html> <?php if(isset($_POST['email'])) { // EDIT THE 2 LINES BELOW AS REQUIRED $email_to = "rakkermans@hotmail.com"; $email_subject = "Yan Zhou Website - Contactformulier"; function died($error) { // your error code can go here echo "I'm sorry, but there were error(s) found with the form you submitted. "; echo $error."<br /><br />"; echo "Please fix these errors and retry submitting.<br /><br />"; die(); } // validation expected data exists if(!isset($_POST['name']) || !isset($_POST['company']) || !isset($_POST['email']) || !isset($_POST['message'])) { died('We are sorry, but there appears to be a problem with the form you submitted.'); } $name = $_POST['name']; // required $company = $_POST['company']; // required $email = $_POST['email']; // required $message = $_POST['message']; // required $error_message = ""; $email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/'; if(!preg_match($email_exp,$email)) { $error_message .= 'The Email Address you entered does not appear to be valid.<br />'; } $string_exp = "/^[A-Za-z .'-]+$/"; if(!preg_match($string_exp,$name)) { $error_message .= 'The Name you entered does not appear to be valid.<br />'; } if(!preg_match($string_exp,$company)) { $error_message .= 'The Company you entered does not appear to be valid.<br />'; } if(strlen($message) < 2) { $error_message .= 'The message you entered does not appear to be valid.<br />'; } if(strlen($error_message) > 0) { died($error_message); } $email = "Form details below.\n\n"; function clean_string($string) { $bad = array("content-type","bcc:","to:","cc:","href"); return str_replace($bad,"",$string); } $email_message .= "Name: ".clean_string($name)."\n"; $email_message .= "Company: ".clean_string($company)."\n"; $email_message .= "Email: ".clean_string($email)."\n"; $email_message .= "Message: ".clean_string($message)."\n"; ?> <?php ?> The following error message appears Thanks for looking into it! Rob Yan Zhou - Contact.html contact_form.php
  13. Hello, I may post this in the wrong forum and if I do then I'm sorry. I recently looked at the ToDoList tutorial on w3schools, and it is fine and works amazing but its one thing that I wanna add. When I add a item to the list I want that item to stay there forever, so even if I for example refresh the page it will still be there. And even if I go out of chrome it will still be there. I don't know if this is possible but if it is then please answer this. Thanks in advance!
  14. hey w3s... so i have this code: <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <h2 class="font-weight-bold text-center">WORK</h2> <div class="border"></div> <br /> </div> </div> </div> <div class="container main_wrapper"> <section> <div class="container"> <div class="row" id="work-grid"> <?php $query_1 = "SELECT * FROM admvideo ORDER BY video_id DESC"; $result_1 = mysqli_query($dblink, $query_1) or die(mysqli_error($dblink)); if( mysqli_num_rows($result_1) > 0 ) { while( $row_1 = mysqli_fetch_array($result_1) ) { $video_id = $row_1['video_id']; $video_title = $row_1['video_title']; $video_link = $row_1['video_link']; $video_director = $row_1['video_director']; $video_text = $row_1['video_text']; ?> <div class="col-sm-4 col-xs-12 work_panels"> <div class="panel panel-default Panel_ModalVideoID-<?php echo $video_id; ?>"> <div class="panel-thumbnail"> <a href="#" title="Video" class="thumb"> <img src="https://img.youtube.com/vi/<?php echo $video_link; ?>/0.jpg" class="img-responsive img-rounded" data-toggle="modal" data-target=".modalVideo"> </a> </div> <div class="panel-body"> <p class="work-name"><?php echo $video_director; ?></p> <p class="work-video-text"><?php echo $video_text; ?></p> </div> </div> </div> <?php } } else { // hvis der ikke er EN række i udtrækket, vises en fejlbesked echo 'Ingen videoer at vise i nu.'; } ?> </div> </div> </section> <div class="modal fade customModal_1 modalVideo" tabindex="-1" role="dialog" aria-labelledby="modalVideo_LabelledBy" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h3 class="modal-title customModal_2">Video Title 1</h3> <button class="close" type="button" data-dismiss="modal">×</button> </div> <div class="modal-body"></div> <div class="modal-footer"> <h4 class="customModal_3">Video Title 2</h4> <p class="customModal_4"> Video in here. </p> <!--<iframe width="100%" height="350" src="" frameborder="0" allowfullscreen></iframe>--> </div> </div> </div> </div><!-- //.modal-Youtube_1 --> </div> <script> $('[class^=Panel_ModalVideoID-]').click(function(event) { event.preventDefault(); // Step 1 - The Variables //----------------------------------------------- var e = $(this); // e = event of the function happening via class/id "class^=Panel_ModalVideoID-*" (working?) var modal = $('.customModal_1'); var modalTitle = $('.customModal_2'); var videoTitle = $('.customModal_3'); var videoEmbed = $('.customModal_4'); var modal_body = $('.modal-body'); var INSERTDATA_modalTitle; $('a.thumb').click(function() { INSERTDATA_modalTitle = $(this).Attr( 'title' ); }); //var INSERTDATA_modalTitle = e.$('a.thumb').Attr("title"); // working? // Step 2 - Clear different areas //----------------------------------------------- modal_body.empty(); // empty area // Step 3 - insert data into different areas //----------------------------------------------- $(modalTitle).html(INSERTDATA_modalTitle); // Step 4 - show the modal //----------------------------------------------- $(".customModal_1").modal({ show: true; }); }); </script> Currently i'm using bootstrap 4 and trying to make a modal appear. So far it is working BUT i am trying to edit the following inside of the modal: Modal title, and the 2 <p> items inside modal-footer for youtube embed and youtube title etc. All of the replacements at different areas should come from the "while loop" at the upper of the page coding with php. Can you help me somehow? Not sure what to do with js/jquery really, a little bit of a newbie... even after years, i still dont get much of it :/ Hoping you guys can help me out a bit. If more information is needed, please ask. Using jQuery 3.2.1, included ALL of the bootstrap 4 bundle etc, so i know that is not the problem here. Maybe it is the way i am using my JS/jQuery code. Thanks a lot. And ohh... the title should be from the "a.thumb -> title attribute", saying video... will edit it later with php so that it will be dynamic. Hope you can help. Thanks!
  15. REQUEST: Please compare the following two links: one works and the other does not. LINK ONE (functional): This link is accessed by going to the Grammar Captive mainpage and clicking on the words Weekly Podcast under the Products heading in the navigation bar. When the panel opens find the phrase Click and Listen. You should be redirected to the podcast_hostpage. LINK TWO (dysfunctional): This is accessed by going to the mainpage and clicking on the word Podcasts under the heading Search Grammar Captive in the navigation bar. When the panel opens search for the single word podcast. A list of options should become available. Click on the phrase Discover more ... under any of them. When the hidden data appears click on the phrase Click and Listen. Nothing happens. DISCUSSION: Both links (LINK ONE and LINK TWO) are identical in every way, but the query strings. One works, the other does not. With the exception to some problematic links to Facebook created by jSocials the console indicates no error. Interestingly, in the dysfunctional case the timer runs as if an infinite loop had been created. Careful scrutiny of the code yields no common source of error. QUESTION: What is likely causing LINK TWO to fail? (function() { $(".SearchButton").click(function() { /******************************************************* Displays error message, if no input is present when the submit button is clicked. Hides the error message when a proper search is initiated. *******************************************************/ var search_podcast_input = $("#podcast_input").val(); if (search_podcast_input == "") { $("#podcast_input_error").show().append('<br />'); $("#podcast_input").focus().focusout(function() { $("#podcast_input_error").hide(); }); return false; } var dataString = 'search_input=' + search_podcast_input; $.ajax({ type: "POST", url: './_utilities/php/search_podcast.php', data: dataString, dataType: 'JSON', statusCode: { 404: function() { alert( "Page not found" ); }}, success: function (jsonData){ $("<link/>", { rel: "stylesheet", type: "text/css", href: "./_utilities/css/podcast_list.css" }).appendTo("head"); $("<link/>", { rel: "stylesheet", type: "text/css", href: "./_utilities/css/podcast_select.css" }).appendTo("head"); $('#podcast_matches').html(''); $('#podcast_matches').css({'background-color':'#fff','background-image':'none'}).html("<p>Your Search Results for [ <span style='font-weight:bold;'>" + search_podcast_input + "</span> ] in descending order of matched relevance are:</p>"); $.each(jsonData, function(key, object){ $('#podcast_matches').append("<div class='paginate'><div class='item_info podcast_item'><div class='pod_num'>" + object.podcast_no_item + "</div><div class='pod_title'>" + object.item_title + "<br /><span class='pubdate'>" + object.item_pubdate + "</span></div></div><div class='pod_describe'>" + object.item_description + "</div><div class='discover'><span class='discover_text'>Discover more ...</span></div><div class='hidden_info'><div class='podcast_link'><a href='podcast_hostpage.php?hash=" + object.item_guid + "&podcast_no=" + object.podcast_no_item + "' title='' target='_self'>Click and Listen</a></div><div class='duration'>Duration: " + object.itunes_duration + "</div><div class='summary'><h2>Summary</h2>"+ object.itunes_summary + " </div></div><!-- end div.hidden_info --><hr class='hr_divide' /></div><!-- end div.paginate -->"); }); var collection = $(".paginate"); var collNum = collection.length; var perPage = 3; collection.slice(perPage).hide(); $('#podcast_matches').append("<div id='pagn'></div><!-- end div#pagn -->"); $("#pagn").pagination({ items: collNum, itemsOnPage: perPage, cssStyle: "light-theme", onPageClick: function(pageNum) { var start = perPage * (pageNum - 1); var end = start + perPage; // console.log(event); // console.log(pageNum); collection.hide().slice(start, end).show(); $('body, html').animate({scrollTop: $('#podcast_matches').offset().top},800); } }); /******************** BEGIN PODCAST INSERT ********************/ $("div.discover").mouseover(function() { $(this).find("span.discover_text").css({"cursor": "pointer","line-height":"1.6em","font-size":"1.4em"}); }); $("div.discover").click(function() { $(this).next("div.hidden_info").slideToggle(800, function() { $('.podcast_link').find('a').on('click', function(event){ event.preventDefault(); var attribute = $(this).attr('href'); var href_arr = attribute.split('?'); var query_str = href_arr[1]; var pairs = query_str.split('&'); var data = []; $.each(pairs, function(i, v){ var pair = v.split('='); var key = pair[0]; var value = pair[1]; var data_arr = [key, value]; data.push(data_arr); }); }); }); $(this).mouseup(function() { $(this).css({"color": "#ccc", "font-weight": "normal"}); }); $('body, html').animate({scrollTop: $(this).offset().top},800); }) .mouseout(function() { $("span.discover_text").css({"cursor":"auto","line-height":"1.6em","font-size":"1em"}); }); /******************** END PODCAST INSERT ********************/ }, complete: function(jqXHR, status) { if (status === 'success') { var aside_height = $('aside').height(); $('#main').css('min-height', aside_height); $('#pagn').show(); } selfSearchResults_Podcast = $('#main').html(); } }); }); })(); Please advise. Roddy
  16. We need to display machine statuses based on time according to the attached screenshot using HTML5, CSS and SVG ?I thought of using Stack Bar chart but in the current context, a status can be repeated multiple times in a given timespan.For ex, In a given timespan, 11PM - 11:30Pm, what are the different statuses a machine is transitioned into ?Each state is represnted by a color.Can any one suggest how to generate this chart ?
  17. Hello , I have a problem , I want to wirte HTML code that only refreshes the <div> test , so just the code between de <div>...</div> I was thinking to use some Javascript but I'm not sure this works in PHP , because my in HTML div there's PHP code. My HTML code: <HTML> <HEAD> </HEAD> <BODY> <div id = "other div"> </div> <div id="test"> <?php refresh this code ?> </div> </BODY> </HTML>
  18. BACKGROUND: Please compare the Select Language <select> element option menu under the headings Free Webinar and Newsletter/Subscribe found in the navigation bar on the Grammar Captive main page. Therein lies the heart of the following question. QUESTION: How does one set the background and text colors of the <optgroup> element so that they appear properly in Firefox? Neither optgroup { background: black; color: white; } nor optgroup { background-color: black; color: white; } appear to work. Roddy
  19. EXPERIMENT ONE: Open to the Grammar Captive Podcast Hostpage without a Query. Observe the vertical alignment of the sidebar in relationship to the page's banner. If you experience the same as I, the sidebar will be top aligned with both the navigation and middle content panels. EXPERIMENT TWO: Open to the Grammar Captive Podcast Hostpage with a Query String Attached to the HTTPRequest Open to the Proxy Request Page. Click where it says Proxy Link. Observe the middle panel that opens. It should be a reference to Podcast No. 21. Observe the vertical alignment of the sidebar in relationship to the page's banner and other aforementioned elements. If you experience the same as I, the sidebar is no longer top-aligned with the page's navigation bar and middle content panel. EXPERIMENT THREE: Repeat Experiment One, but Open to the Podcast No. 21 Panel from the Already Opened Page. Click where it says ALL in the navigation bar. Click on the phrase Podcast Index ... Find Podcast No. 21 Click where it says Discover more ... Click on the command Click and Listen. Observe the alignment of the sidebar. It remains top aligned with the navigation bar and middle panel. QUESTION ONE: How might one explain this phenomenon? QUESTION TWO: And, what corrective action can be taken to prevent it? Roddy
  20. Menu Whitespace

    there is a lot of white space in my menu. how do i fix it?
  21. SET-UP: Please find below three items including; one, the relevant form elements of a much larger form; two, the Javascript that determine what data will be sent to a PHP processing page via a $_POST variable, and three, The actual implementation of the code. The question follows the presentation of the code. The HTML <div id='language_options' style='clear:both;'> <label for='nl_tongue'>Native Tongue:<span class="formlabel">*</span></label> <span class="rightfloat"> <select id="nl_tongue" name="language" style="width:150px;"> <option selected value="0">Select Language</option> <optgroup label='africa [east]'> <option value='mg'>Malagasy</option> <option value=sw>Swahili</option> </optgroup> <optgroup label='africa [central]'> <option value=ny>Chichewa</option> <option value=sn>Shona</option> </optgroup> <optgroup label='Not found?'> <option value='other_tongue'>Click and enter!</option> </optgroup> </select> </span> </div><!-- end div#language_options --> <div id='nl_other'> <span class="rightfloat"><input id='nl_other_input' type='text' name='other' value=''></span> </div><!-- end div#nl_other --> <label id="nl_tongue_error" class="error" for="nl_tongue">This field is required.</label> The JAVASCRIPT $.get('./newsletter_filler.html', function(data) { $('#main').html(data); $('#nl_other').hide(); var tongue = ''; $('#nl_tongue').change(function() { if ($('#nl_tongue').val() == 'other_tongue') { $('#nl_other').show(); } }); }).done(function(){ $('.error').hide(); $(".button").click(function() { --- Other Code --- /********************************* The language Variable *********************************/ var language = $("select#nl_tongue").val(); if (language == "0") { $("label#nl_tongue_error").html("<p style='line-height:1.3em'>Please select your first language! Or, click on the <span style='font-weight:bold;'>\"Not found?\"</span> option at the bottom of the list of languages.</p>").show().css('float','left'); $("select#nl_tongue").focus().focusout(function() { $("label#nl_level_error").hide(); }); return false; } if (language == 'other_tongue') { language = $("#nl_other input").val(); if($("#nl_other input").val() == '') { $("label#nl_tongue_error").html("<p style='line-height:1.3em'>Please enter your first language.</p>").show().css('float','left'); $("nl_other_input").focus().focusout(function() { $("label#nl_tongue_error").hide(); $("#nl_other_input).hide(); }); return false; } } }); --- More Code --- }); IMPLEMENTATION: Sequence of Events Go to the Grammar Captive mainpage and do the following: Click on the word Subscribe under the heading Info/Newsletter. Click on the final <option> Click and enter! under the Not Found? <optgroup> at the bottom of the Select Language list. Enter a language of some sort. Click where it says Not found? and select a different language. Submit the form. The Outcome: The selected language takes precedence over the entered language, and the former is sent to the data base. DILEMMA: In order to correct this problem I have experimented in a variety of ways, but to know avail. What would you recommend and why? Roddy
  22. BACKGROUND: Using AJAX I have successfully filled a <div> element with HTML that contains a <form> element whose action attribute points to a $_SERVER_REQUEST superglobal in the same filled <div> element. I have also set the target attribute of the <form> element to _self. Unfortunately, when the <input type='submit'> form control is clicked the entire page is replaced. I want only that the contents of the <div> element is replaced. DILEMMA: I want to suppress this replacement behavior, but still process the form data with the PHP contained within the <div> element. Although I have managed to suppress the replacement, I do not know how to process the form data within the <div> element. The CODE: .click(function() { $("#main").html(''); $.ajax({ url: './_utilities/php/newsletter_filler.php', method: 'GET', data: {name : 'personal', length : 200}, dataType: 'JSON', statusCode: { 404: function() { alert( "Page not found" ); }}, success: function(jsonData) { console.log(jsonData); $.getScript('./_utilities/javascript/wordcount.js', function(data) { $.each(jsonData, function(subfield, obj) { setWordConstraint(obj.id, obj.length); }); }); } }); $("<link/>", { rel: "stylesheet", type: "text/css", href: "./_utilities/css/newsletter_filler.css" }).appendTo("head"); $.get('./newsletter_filler.html', function(data) { $('#main').html(data); }).done(function(){ var tongue = ''; $('#tongue').change(function() { if ($('#tongue').val() == 'other_tongue') { $('#other').show(); } }); $("#sevengates").submit(function(e){ return false; }); }); The jQuery object $("#sevengates") refers to the id of the <form> element. $("#sevengates").submit(function(e){ return false; }); QUESTION: How can I have my cake and eat it too? Or, how do I set the $_POST superglobal without leaving the filled <div>? Roddy
  23. BACKGROUND: My objective is to replace the content of an existent <div> element with new content that depends on newly loaded javascript, css, and a JSON object retrieved from a PHP processing file by an AJAX call. To this end I have written the following brief piece of code. To be clear the script contained in wordcount.js depends on the value of wordmax. Further this same script is triggered when text is entered into a <textarea> form control found in newsletter.html. Please review the code and answer the questions that follow. .click(function() { $('#main').html(''); ajax_obj = $.ajax({ url: 'newsletter_filler.php', data: {name : 'personal, length : 200}, dataType: JSON, statusCode: { 404: function() { alert( "Page not found" ); }}, success: function(jsonData) { $.getScript('wordcount.js', function(data) { var wordmax = jsonData; }); $.get('newsletter.css', function(data) { $('head style').append(data); } $.get('newsletter.html', function(data) { $('#main').html(data); } } }); } QUESTION ONE: Under the assumption that all of the code in the called files has been properly written and that the content of the .css and .html files is properly placed will the script contained in wordcount.js execute properly when triggered by the content of newsletter.html? QUESTION TWO: Will the content of the files newsletter.css and newsletter.html find their proper place and function as one might expect from such code, if it had been placed in the main document in the elements indicated by jQuery selector at the outset? Roddy
  24. Hello everyone I am trying to place an image within the right hand table but the background image is still shown when I place the image in the right hand table of my website that I am working on I would like that part of the background image covered I have attached screenshots of the HTML code and the webpage that I am working on any help and solutions would be greatly appreciated thanks so very much in advance.
  25. In-Tag Quotations???

    Hi there! I am in the process of coding a website and am working with HTML with an external CCS stylesheet. My issues are arising when I have things such as <img src="01.jpg" /> or <a href="page.html"></a>..... if I include the quotation marks within the tag (as exampled) the needed files do not get sourced, whereas when I leave out the quotes surrounding the item/file, (i.e. <img src=01.jpg />) they show up perfectly. I don't understand why this is happening and what I need to do to fix it?
×