Results 1 to 2 of 2

Thread: Wordpress Contact page question

  1. #1
    Join Date
    May 2007
    Posts
    61
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Wordpress Contact page question

    I built a Wordpress website and found that users with IE8 cannot view the field descriptions on the contact page. How can I correct this? Is there code I can add to the contact.php file to correct this?

    Here is the link.
    http://www.pinnacleevaluations.com/contact-us-2/

    Also, I noticed that the menu is a pull down on some desktop computers and display across the top on others as I want on others. Is there a way to ensure the menu display across the top for all desktops? Thanks

    jcdesigns

    Posts: 0
    Joined: Thu Jul 11, 2013 12:04 pm

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,994
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    Best I can tell, IE 9 and less do not support the use of the placeholder attribute for text inputs and textareas. For them you would need to establish the placeholder's value as the value or as the defaultValue for the input and setup some javascript (with or without jQuery) code to have it disappear on focus if it is the value of the field, and reappear on blur if the field is empty. Before the placeholder attribute, that's how all forms were managed if this type of action was desired, ex for the setup on that page:

    Code:
    jQuery(function($){
    	var ie = /MSIE (\d+)/.exec(navigator.userAgent);
    	if(!ie || ie > 9){return;}
    	$('input:text[placeholder], textarea[placeholder]').each(function(i, el){
    		el.value = el.getAttribute('placeholder');
    	}).focus(function(){
    		if($.trim(this.value) === $.trim(this.getAttribute('placeholder'))){
    			this.value = '';
    		}
    	}).blur(function(){
    		if($.trim(this.value) === ''){
    			this.value = this.getAttribute('placeholder');
    		}
    	});
    });
    An alternative would be simply to use labels for those browsers, example:

    Code:
    <!--[if IE]><label for="author">Name (required): </label><![endif]--><input type="text" placeholder="Name (required)" name="contact_name" id="author" value="" size="22" tabindex="1" aria-required="true" class="input-name">
    Since IE conditional HTML comments are not supported in IE 10 or any other non-IE browser, a label like this will only appear in IE 9 and less.

    Whichever you choose:

    The browser cache may need to be cleared and/or the page refreshed to see changes.

    As for your other issue, when I have more time I will look into it.

    I got some more time and the decision by the browser as to which menu to display depends upon the width of the window. If there's enough room (or nearly enough room) to show the text menu without line breaks, it does. Otherwise you get the drop down select version to save space.

    I think this is a good feature, especially for mobile/touch devices. Even for desktops it's good because the text nav, if shown at those narrower window widths would be a little jumbled up on itself. It can be overridden though if you really want to. It depends upon media queries in the css to detect window width, assisted by javascript for browsers that don't do that. To override it, change in pinnacleevaluations.com/wp-content/themes/icompany/styles/style.css around line #741 (add the highlighted):

    Code:
    .selectnav {
    display: none !important;
    }
    And in styles on the page itself, around line #395 - though this might be in an include so harder to find:

    Code:
    #main-menu {
    font-family: Lato, Helvetica, arial, verdana;
    font-weight: 300;
    font-size: 18px;
    color: #006633;
    display: block !important;
    }
    For that second modification, if it's hard to find, you can just add the style to any existing stylesheet:

    Code:
    #main-menu {
    display: block !important;
    }
    Last edited by jscheuer1; 08-14-2013 at 01:08 PM. Reason: looked into the menu issue
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Question about an error message on contact form
    By windbrand in forum JavaScript
    Replies: 1
    Last Post: 01-05-2012, 04:42 PM
  2. Another Wordpress question (single.php)
    By europe451 in forum PHP
    Replies: 0
    Last Post: 05-31-2011, 02:34 PM
  3. Wordpress Contact Form 7 Not Working
    By sparklingsky in forum HTML
    Replies: 0
    Last Post: 10-09-2009, 06:38 PM
  4. Replies: 1
    Last Post: 01-30-2009, 10:48 AM
  5. 'contact me' page
    By riyadh in forum PHP
    Replies: 5
    Last Post: 02-20-2007, 02:39 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •