I am using this script : http://www.morethannothing.co.uk/wp-content/uploads/2010/01/placeholder.js to get some placeholders into IE. Works a treat for input types of text and password.
But just does'nt seem to load for Text Areas. Does anyone know of a line of code I could add to that, or maybes a little bit of jQuery or JavaScript to execute to get it to load.
Thanks in advance.
instead of $(':text[placeholder],:password[placeholder]') use $(':text[placeholder],:password[placeholder],textarea[placeholder]')
For all inputs and textarea:
$('input[placeholder],textarea[placeholder]')
<script type="text/javascript">
if(navigator.userAgent.indexOf("MSIE") > 0 )
{
$(function()
{
var input = document.createElement("input");
if(('placeholder' in input) == false)
{
$('[placeholder]').focus(function()
{
var i = $(this);
if(i.val() == i.attr('placeholder'))
{
i.val('').removeClass('placeholder');
if(i.hasClass('password'))
{
i.removeClass('password'); this.type='password';
}
}
}).blur(function()
{
var i = $(this);
if(i.val() == '' || i.val() == i.attr('placeholder'))
{
if(this.type=='password')
{
i.addClass('password'); this.type='text';
}
i.addClass('placeholder').val(i.attr('placeholder'));
}
}).blur().parents('form').submit(function()
{
$(this).find('[placeholder]').each(function()
{
var i = $(this);
if(i.val() == i.attr('placeholder')) i.val('');
});
});
}
});
}
</script>
Related
I have an input[type=text] area and i'll paste/type a URL in it.
If pasted/typed url contains http, i want to hide $('#button') element.
If its not, keep showing the button also.
Thanks for any help.
Here is my demo code so far:
$('#pasteUrl').on('input', function () {
var str = $('#pasteUrl').val();
if (str.indexOf("http") !== -1) {
$('#button').hide();
}
});
Edit: Added "propertychange" to events as suggested by OP in the comments.
$('#pasteUrl').on('input propertychange', function (ev) {
var str = $(ev.currentTarget).val();
if (str.indexOf("http") != -1) {
$('#button').hide();
} else {
$('#button').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="pasteUrl" />
<button id="button">Go</button>
This is likely what you want - using toggle:
$('#pasteUrl').on('input propertychange', function() {
var str = $(this).val();
$('#button').toggle(str.indexOf("http") == -1);
});
I use this function for supporting placeholder in internet explorer:
function placeHolder() {
$('[placeholder]').focus(function () {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function () {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur().parents('form').submit(function () {
$(this).find('[placeholder]').each(function () {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});
}
I use :
.parents('form').submit(function () {
$(this).find('[placeholder]').each(function () {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
to prevent from submitting input with placeholder value,
but It doesn't work,I search for other solutions but all of them has problem with form submitting ...
can everyone help me? I must use placeholder in ie...
thank you
first of all detect that which browser is it. does it support placeholder?
for that use following code :
if (($.support.placeholder = (function () { var i = document.createElement('input'); return 'placeholder' in i; })()) == false) {
Then give value to those input box with $('selector').val('abc')
hope..this will work for you.
on click of button, use jquery submit instead of javascript submit
$('#myForm').attr('action', 'value');
$("#myForm").submit();
I am using the below placeholder code for IE8, however about 70% of the time when you move your mouse around in the dropdown login field it loses focus (the whole dropdown login field vanishes); through debugging - when I remove this code the problem goes away - I have found the cause of the problem is this code:
Edit: I have found it isn't caused by any particular placeholder code, but it IS caused by some part of the process as I have tried 3 separate placeholder plugins and it happens on all 3 of them; take them away and no problems.
$(document).ready(function() {
if ( !("placeholder" in document.createElement("input")) ) {
$("input[placeholder], textarea[placeholder]").each(function() {
var val = $(this).attr("placeholder");
if ( this.value == "" ) {
this.value = val;
}
$(this).focus(function() {
if ( this.value == val ) {
this.value = "";
}
}).blur(function() {
if ( $.trim(this.value) == "" ) {
this.value = val;
}
})
});
// Clear default placeholder values on form submit
$('form').submit(function() {
$(this).find("input[placeholder], textarea[placeholder]").each(function() {
if ( this.value == $(this).attr("placeholder") ) {
this.value = "";
}
});
});
}
});
You can view an example here: http://condorstudios.com/stuff/temp/so/header-sample.php
Edit: Not sure if it will help as jsfiddle doesn't work on IE8 and I can't test if the fiddle behaves badly in IE8 too, but here is the fiddle: http://jsfiddle.net/m8arw/7/
Any way to fix this?
Have you tried switching your event to show/hide dropdown to 'mouseenter' and 'mouseleave'?
It's a lot more reliable on old IE than 'focus' and 'blur' event. Also, bind the event directly on the 'dropdown' div is more preferable than on the 'input' element.
In short, please try change this part of your code like this.
$(function() {
var dropdown = $('div.login div.dropdown')
.on('mouseenter', function() {
dropdown.css('display', 'block');
})
.on('mouseleave', function() {
dropdown.removeAttr('style');
});
});
demo: http://so.devilmaycode.it/placeholder-code-used-for-ie8-causing-dropdown-login-field-to-lose-focus
$(function(){
$('#main_header .login li').hover(function(){
$(this).find('.dropdown').show();
},function(){
$(this).find('.dropdown').hide();
});
});
NOTE: i have also cleaned up and fixed some coding horror in your js code...
I use this code to implement placeholder on all browsers (it uses Modernizr to detect it):
Demo: http://jsfiddle.net/S3zQ9/
var placeholder_OnBlur = function () {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
};
var placeholder_OnFocus = function () {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
};
var placeholder_OnSubmit = function () {
$(this).find('[placeholder]').each(function () {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
});
};
var placeholder_OnLoad = function () {
if (!!$(this).attr('placeholder')) {
$(this).on('focus', placeholder_OnFocus);
$(this).on('blur', placeholder_OnBlur);
$(this).parents('form').on('submit', placeholder_OnSubmit);
$(this).blur();
}
};
if (!Modernizr.input.placeholder) {
$('[placeholder]').each(placeholder_OnLoad);
}
Don't have IE8 to test it, but it should work.
I have create custom toogle script to show/hide content.
Currently when you click first and then second text, icon mechanism working perfect. but when you click first text and again click first icon mechanism not working.
My JS Code:
$(document).ready(function() {
$('.togglelink').on('click', function(e) {
e.preventDefault();
var elem = $(this).next('.toggle');
$('.toggle').not(elem).hide('fast');
elem.slideToggle('fast');
if (elem.is(':visible')) {
var openslide = $(this).attr("id");
if (openslide == 'slideNavToggle') {
$("#where-slide-down").hide();
$("#where-slide-up").show();
$("#inspiration-slide-down").show();
$("#inspiration-slide-up").hide();
$("#need-slide-down").show();
$("#need-slide-up").hide();
}
if (openslide == 'slideInspToggle') {
$("#inspiration-slide-down").hide();
$("#inspiration-slide-up").show();
$("#where-slide-down").show();
$("#where-slide-up").hide();
$("#need-slide-down").show();
$("#need-slide-up").hide();
}
if (openslide == 'slideToggle') {
$("#need-slide-down").hide();
$("#need-slide-up").show();
$("#where-slide-down").show();
$("#where-slide-up").hide();
$("#inspiration-slide-down").show();
$("#inspiration-slide-up").hide();
}
}
});
$('.toggle').hide('fast');
});
My Fiddle: Sample
Any ideas or suggestions? Thanks.
Here you go:
You just have to change from show/hide to toggle. Fiddle
$('.togglelink').on('click', function (e) {
e.preventDefault();
var elem = $(this).next('.toggle');
$('.toggle').not(elem).hide('fast');
elem.slideToggle('fast');
if (elem.is(':visible')) {
var openslide = $(this).attr("id");
if (openslide == 'slideNavToggle') {
$("#where-slide-down").toggle();
$("#where-slide-up").toggle();
$("#inspiration-slide-down").show();
$("#inspiration-slide-up").hide();
$("#need-slide-down").show();
$("#need-slide-up").hide();
}
if (openslide == 'slideInspToggle') {
$("#inspiration-slide-down").toggle();
$("#inspiration-slide-up").toggle();
$("#where-slide-down").show();
$("#where-slide-up").hide();
$("#need-slide-down").show();
$("#need-slide-up").hide();
}
if (openslide == 'slideToggle') {
$("#need-slide-down").toggle();
$("#need-slide-up").toggle();
$("#where-slide-down").show();
$("#where-slide-up").hide();
$("#inspiration-slide-down").show();
$("#inspiration-slide-up").hide();
}
}
});
$('.toggle').hide('fast');
$(document).ready(function () {
$("#btnhighlight").click(function () {
var htext = $("#txthighlighttext").val();
if (htext == '') {
alert("Pleae enter the search item.");
return false;
}
$("#lstCodelist option").each(function () {
$(this).removeClass('searchItem');
if ($(this).text().search(htext) != -1) {
$(this).addClass('searchItem');
}
});
});
});
Lets take I have a row something like this
I love to work with Jquery.
If I enter my search text as jquery its not highlighting Jquery. But my query should work in both they way regardless of CAPS or SMALL letters.
how to change my code to work like that.
thanks for your all help.
use .toUpperCase() ............. // or lowerCase
if ($(this).text().toUpperCase().indexOf(htext.toUpperCase()) != -1) {
This one should work, I believe:
$(document).ready(function () {
$("#btnhighlight").click(function() {
var htext = $("#txthighlighttext").val().toLowerCase();
if (htext === '') {
alert("Please enter the search item.");
return false;
}
$("#lstCodelist option").each(function() {
var $this = $(this);
if ($this.text().toLowerCase().indexOf(htext) !== -1) {
$this.addClass('searchItem');
} else {
$this.removeClass('searchItem');
}
});
});
});
Sidenote: indexOf is proven to be faster than search.