Welcome to WebmasterWorld Guest from 54.210.61.41

Forum Moderators: not2easy

Message Too Old, No Replies

Hiding an element when they keyboard is showing

     
2:39 am on May 22, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1002
votes: 96


For mobile user, I show a local ad (300x50) at the bottom of the viewport. But when they click on an input, textarea, or contenteditable DIV to enter something and the keyboard comes up, the majority of the input area is hidden by the remainder of the viewport.

Can you guys suggest the best way to hide this local ad when they keyboard is up?

I'm using jQuery and I'm thinking along these lines (hiding the element when an input, textarea, or contenteditable is in focus), but I'm not sure about the performance or if the contenteditable test is right...

$(function() {
// HIDE
$('input').on('focus', function() {
$('#local_banner').hide();
});

$('textarea').on('focus', function() {
$('#local_banner').hide();
});

// I'm not sure about this chain...
$('div').is("[contentEditable='true']").on('focus', function() {
$('#local_banner').hide();
});

// SHOW
$('input').on('blur', function() {
$('#local_banner').show();
});

$('textarea').on('blur', function() {
$('#local_banner').show();
});

// I'm not sure about this chain...
$('div').is("[contentEditable='true']").on('blur', function() {
$('#local_banner').show();
});
});
4:17 am on May 22, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member keyplyr is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Sept 26, 2001
posts:12913
votes: 891


Instead of hiding the ad, my thinking would be to float it up above the keyboard.
4:34 am on May 22, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1002
votes: 96


That's what currently happens, but (using my phone as an example) that makes the keyboard take up 50% of the screen, the ad takes up 25%, and then they can only see the textarea in the remaining 25%.

I wouldn't expect anyone to click an ad mid-type, and since they're locally sold (with a flat monthly rate) I don't get paid extra if they click it by accident. So I would rather just make it go away until they're done typing.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members