Jump to content

Rain Lover

Members
 View Profile  See their activity

  • Posts

    62

  • Joined

  • Last visited

 Content Type 

Posts posted by Rain Lover

    Cross-browser font height

    in CSS

    Posted

    As you see the outline is collapsed in the following sample: 

    var input = document.getElementById('input');
var output = document.getElementById('output');
input.addEventListener('input', function() {
  output.value = input.value;
});
    output {
  display: block;
  font: 20px Arial;
  outline: 1px solid green;
}
    <input id="input">
<output id="output"></output>

    DEMO

    How can I prevent it? Do I need to give the output a fixed height? If so, what value should I give to the height if I want it to be just as high as the text height — not an arbitrary number? Is there a cross-browser solution?

    Get the number of edited inputs

    in JavaScript

    Posted · Edited by Rain Lover

    Scenario


    Every semester my students need to take at least one test. The following form gives the right average grade of a student: 

    <!DOCTYPE html>
<html lang="en">
  <head>
    <title>Average Grade</title>
  </head>
  <body>
   <form>
Math: <input type="number" id="test1">
    <input type="number" id="test2">
    <input type="number" id="test3">
    <output id="average"></output>
    <br>
    <input type="button" value="Calculate" id="calcBtn">
   </form>
   <script>
    document.getElementById('calcBtn').addEventListener('click', function() {
     var test1 = document.getElementById('test1').value;
     var test2 = document.getElementById('test2').value;
     var test3 = document.getElementById('test3').value;
     var average = document.getElementById('average');
     average.value = (Number(test1)+Number(test2)+Number(test3)) / 3;
    });
   </script>
  </body>
</html>

    DEMO

    The problem is it works right only if all the fields are edited. If the student doesn't take some tests, the average grade won't show the right value. I know it's because of dividing by the fixed number 3 when it calculates the average grade:
      

    average.value = (Number(test1)+Number(test2)+Number(test3)) / 3;

    Question

    What is a simple approach to get the number of changed input fields?

    Checkbox toggle in Chrome and Opera

    in JavaScript

    Posted

    Steps to reproduce the issue:


    1. In your browser Settings select Continue where you/I left off under On startup.
    2. Navigate to the demo.
    3. Check the checkbox.
    4. Edit the text.
    5. Close your browser and reopen it. Or duplicate/clone the tab.

    Now as you see the checkbox is checked, but the textarea isn't colored.

    I tried it in the latest version of Chrome and Opera in Windows 10. I'm not sure about Safari, but it probably behaves the same way.


    Questions:


    • Why does it happen?
    • What's a cross-browser solution?

    How to reload the parent frame

    in JavaScript

    Posted

    The two pages are on different domains. They are not allowed to interact with eachother.

     

    Here's the message from the error console:

     

    Yes, that seems to be the problem. Then I need to put my question this way: How to reload the parent frame that's located on a different frame?

    How to reload the parent frame

    in JavaScript

    Posted

    Sample parent code:
    <!DOCTYPE html><html><head><meta charset="UTF-8"><title>Parent</title></head><body><iframe src="https://dl.dropboxusercontent.com/u/4017788/Labs/child.html" width="200" height="100"></iframe></body></html>
    See it in action:
    Sample child code:
    <!DOCTYPE html><html><head><meta charset="UTF-8"><title>Child</title></head><body><button onclick="myFunction();">Try it!</button><script>function myFunction() {parent.location.reload();}</script></body></html>
    I have tried many methods offered in similar questions to no avail, such as:
    window.parent.location.reload();
    top.location.reload();
    etc.
    What am I missing and what's the right approach?

    How to echo an external page from your domain

    in PHP

    Posted

    You can either use PHP cURL or file_get_contents() function to grab the webpage and then simply echo it. :-)

     

    Thanks for the answer, but:

    1. I don't know how to do it using cURL. Would you mind providing a snippet to use as a template?
    2. Doesn't it break the layout when the target page has non-absolute URLs and relative links?

    Scroll without a scrollbar

    in CSS

    Posted · Edited by Rain Lover

    Sample form: 

    <!DOCTYPE html><html><head><title></title><style type="text/css">* {font:13px arial; color:white;}body {background:black;}label {display:inline-block; width:50px;}input, textarea {margin:0; border:1px solid red; padding:0; background:green;}textarea {width:300px; height:100px;}</style></head><body><form action="#"><div><label for="entry_0">Name</label><input type="text" id="entry_0"></div><div><label for="entry_1">Email</label><input type="text" id="entry_1"></div><div><label for="entry_2">URL</label><input type="text" id="entry_2"></div><div id="parent"><textarea id="entry_3"></textarea></div><div><input type="submit" value="Submit"></div></form></body></html>

    I'd like to remove/hide the textarea scrollbar as it doesn't match my form style. I know I can use jQuery plugins to style the scrollbar, but they don't work reliably across different browsers/systems.To hide the scrollbar I can use textarea {width:300px; height:100px; overflow:hidden;}, but it completely stops Firefox scrolling through mouse and keyboard.I also tried the following workaround: 

    #parent {width:284px; height:102px; overflow:hidden;}textarea {width:300px; height:100px; overflow-x:hidden; overflow-y:scroll;}

    It should work accurately if I add some script to calculate the parent division width: 

    var textareaWidth = document.getElementById('entry_3').scrollWidth;document.getElementById('parent').style.width = textareaWidth + 'px';

    But anyhow the above approach doesn't seem to work in Chrome/Safari:Demo: http://jsfiddle.net/RainLover/snTaP/ Open the above demo in Chrome/Safari >> insert some text into the textarea >> highlight/select a line and drag your mouse to the right and you'll see the scrollbar. Or use the keyboard keys Page Up and Page Down. Any corrections or other solutions?

    • Like 1

    setTimeout to detect changes in a text field

    in JavaScript

    Posted

    First of all, give the iframe an ID attribute and use getElementById() to access it. While some browsers may set "target" to the iframe element, that's non-standard behavior.
    I tried id, but it didn't work: 
    var iframe = document.getElementById('target');             function displayResult() {                if (textarea.value) {                    iframe.open();                    iframe.write(textarea.value);                    iframe.close();                }                window.setTimeout(displayResult, 10);            }

    I also updated my question for clarification.

    setTimeout to detect changes in a text field

    in JavaScript

    Posted · Edited by Rain Lover

    I wonder why the following sample code doesn't work properly: 

    <!DOCTYPE html><html>		<head>		<title></title>		<style type="text/css">			textarea, iframe {				display:block;				width:300px;				height:100px;				margin:3px;				padding:3px;				border:1px solid #CCC;			}		</style>	</head>		<body>		<textarea id="field" onfocus="getFocus();" onblur="loseFocus();">This is some text.</textarea>		<iframe name="target"></iframe>		<script>			var textarea = document.getElementById('field');			var iframe = window.target.document; 			function displayResult() {				if (textarea.value) {					iframe.open();					iframe.write(textarea.value);					iframe.close();				}				window.setTimeout(displayResult, 10);			} 			function getFocus() {				if (textarea.value == textarea.defaultValue) {					textarea.value = '';				}			} 			function loseFocus() {				if (textarea.value == '') {					textarea.value = textarea.defaultValue;				}			}			displayResult();		</script>	</body> </html>

    Demo: http://jsfiddle.net/RainLover/4ksMR/ The iframe content is supposed to get updated in real time -- as soon as the textarea content changes by keyboard or mouse. This approach is an alternative to the oninput event. But since oninput isn't well-supported across different browsers I decided to create a timer to compare the current text field value with its value in 10 milliseconds before.

    jQuery validation: display the focused field error message

    in JavaScript

    Posted · Edited by Rain Lover

    Objective: I'd like to display the focused field error message in a container. What I've done so far: 

    <!DOCTYPE html><html><head><title></title><style type="text/css">label {display:inline-block; width:60px;}</style><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script><script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(function(){$("form").validate({messages: {	 name: "Please specify your name.",	 email: {	   required: "We need your email address to contact you.",	   email: "Your email address must be in the format of name@domain.com."	 },	 url: "A valid URL, please.",	 comment: "Please enter your comment."   },showErrors: function(errorMap, errorList) {		if(errorList.length) {			$("span").html(errorList[0].message);		}	}});});</script></head><body><span></span><form action="#"><div><label for="entry_0">Name *</label><input type="text" class="required" name="name" id="entry_0"></div><div><label for="entry_1">Email *</label><input type="text" class="required email" name="email" id="entry_1"></div><div><label for="entry_2">URL</label><input type="text" class="url" name="url" id="entry_2"></div><div><textarea class="required" name="comment" rows="7" cols="35"></textarea></div><div><input type="submit" name="submit" value="Submit"></div></form></body></html>

    Demo: http://dl.dropbox.co...ample-form.html Problems:

    1. If you click the submit button, the container(span) shows the first error message, no matter which field was focused.
    2. Focusing on fields using the Tab key works well (except on the URL field), but focusing with a mouse doesn't update the span HTML correctly.

    Box model: lost parent element scrollbar

    in CSS

    Posted

    Only when the edge of child extending beyond edge of parent will scroll bars appear, the right margin of child extends beyond right edge of parent, the right edge of child is tight up against right edge of parent, because of child left margin.
    Thanks for the answer, but I still don't understand the difference between the first and second example although I read your explanation a few times.

    Box model: lost parent element scrollbar

    in CSS

    Posted

    Because the parent is smaller than the child in the first example than in the second. Example one:Parent = 101px highChild = 102px high (100px + margin top 1px + margin bottom 1px) Example two:Parent = 102px highChild = 102px high (100px + margin top 1px + margin bottom 1px) That's why. If you want scroll bar just set overflow to scroll.
    In the second example the parent width is smaller than the child total width and the scrollbars should appear.

    Box model: lost parent element scrollbar

    in CSS

    Posted

    The first sample shows scrollbars correctly:

    <!DOCTYPE html><html><head><title></title><style type="text/css">#parent {width:102px; height:101px; background:red; overflow:auto;}#child {width:100px; height:100px; margin:1px; background:green;}</style></head><body><div id="parent"><div id="child"></div></div></body></html>

    But the second doesn't:

    <!DOCTYPE html><html><head><title></title><style type="text/css">#parent {width:101px; height:102px; background:red; overflow:auto;}#child {width:100px; height:100px; margin:1px; background:green;}</style></head><body><div id="parent"><div id="child"></div></div></body></html>

    Why is that?Thanks!

    No fieldset padding top in IE8

    in CSS

    Posted

    Sample form:

    <!DOCTYPE html><html><head><title></title><style>fieldset {padding: 15px;}</style></head><body><form> <fieldset>  <legend>Form</legend>  <p>  <label for="name">Name </label><input id="name" type="text">  </p>  <p>  <label for="email">Email </label><input id="email" type="text">  </p> </fieldset></form></body></html>

    There's no padding top in IE8. Any cross-browser solution?

    jQuery fade effects in IE(8)

    in JavaScript

    Posted

    Sample code:

    <!DOCTYPE html><html><head><title></title><style>span {display:none;}</style><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script><script>$(document).ready(function(){  $("button").click(function(){    $("span").fadeIn(3000);  });});</script></head><body><button>Fade in</button><span>This is some text.</span></body></html>

    It doesn't work in IE8 and probably older versions. Any solution?

    Validate optional form fields with default values

    in JavaScript

    Posted

    Sample form:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title></title>  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>  <script type="text/javascript">  $(document).ready(function(){$("#cname, #cemail, #curl, #ccomment").focus(function(){  if( this.value == this.defaultValue ) {    $(this).val("");  }}).blur(function() {  if( !this.value.length ) {    $(this).val(this.defaultValue);  }});$.validator.addMethod("noName", function(value, element) {return value != element.defaultValue;}, "Please enter your name.");$.validator.addMethod("noComment", function(value, element) {return value != element.defaultValue;}, "Please enter your comment.");$("#commentForm").validate();  });   </script></head><body>  <form id="commentForm" action="">   <p>     <input id="cname" name="name" size="25" class="required noName" value="Name">   </p>   <p>     <input id="cemail" name="email" size="25" class="email" value="Email">   </p>   <p>     <input id="curl" name="url" size="25" class="url" value="URL">   </p>   <p>     <textarea id="ccomment" name="comment" rows="5" cols="35" class="required noComment">Comment</textarea>   </p>   <p>     <input class="submit" type="submit" value="Submit">   </p> </form></body></html>

    If you click the submit button, you get error messages on Email and URL fields while they are optional. How can I prevent it?

    Ajax form submission in IE(8)

    in JavaScript

    Posted · Edited by Rain Lover

    You can't use AJAX for cross-domain requests. Perhaps newer browsers support it in some form, but older ones don't.
    You're right! But I don't know why it works in IE8 as well if I add dataType: 'script' to my code.

    Iframe onload event only after an anchor onclick

    in JavaScript

    Posted

    Some links won't work as some sites will prevent access through iframe, try assigning the href through to iframe src, and see what happens 
    <!DOCTYPE html><html><head><title></title><script type="text/javascript">function on_iframe_load(thisiframe, e) {e.preventDefault;x=document.getElementById('iframe_a')x.src=thisiframe.href;x.onload = function() {alert('Thanks for the visit!');};}</script></head><body><iframe name="iframe_a" id="iframe_a"></iframe><a href="http://example.co.uk/" target="iframe_a" onclick="on_iframe_load(this,event)">Go!</a></body></html>

    Tried it to no luck.

    Iframe onload event only after an anchor onclick

    in JavaScript

    Posted

    make a click event handler for the link instead
    It's the first thing I tried:
    <!DOCTYPE html><html><head><title></title><script type="text/javascript">function on_iframe_load() {document.getElementById('iframe_a').onload = function() {alert('Thanks for the visit!');};}</script></head><body><iframe name="iframe_a" id="iframe_a"></iframe><a href="http://www.example.com/" target="iframe_a" onclick="on_iframe_load()">Go!</a></body></html>

    But it doesn't work in IE8 and older versions.

×
×
  • Create New...