I have a jquery function that shows/hides spans that look like "tips" when I click an input field on a form.
The function works great on FirfFox,Chrome,IE(!) :) , etc. But not at all on webkit based browsers aka Safari and Android (tested)
$(function(prepareInputsForHints) {
var inputs = document.getElementsByTagName("input");
for (var i=0; i<inputs.length; i++){
(function(i) {
// Let the code cleane
var span = inputs[i].nextElementSibling;
if(span instanceof HTMLSpanElement) {
if(span.className == "hint") {
span.onmouseover = function() { this.isOver = true; }
span.onmouseout = function() { this.isOver = false; if(!inputs[i].isFocus) inputs[i].onblur(); }
// the span exists! on focus, show the hint
inputs[i].onfocus = function () {
this.isFocus = true;
span.style.display = "inline";
}
// when the cursor moves away from the field, hide the hint
inputs[i].onblur = function () {
this.isFocus = false;
if(!span.isOver) span.style.display = "none";
}
}
}
})(i);
}
});
Also, for your convenience i provide you with http://jsfiddle.net/eZnYY/1/
Try to replace you code line:
if(span instanceof HTMLSpanElement) {
with next:
if(span && span.tagName.toUpperCase()==="SPAN") {
http://jsfiddle.net/eZnYY/3/ Checked on desktop Safary and Android browser (emulator)
You should use the jQuery methods to ensure cross browser compatibility (your question has the jQuery Tag).
This is pure javascript. Convert your code to jQuery, use the jQuery events and set the css.
For example:
your code
var inputs = document.getElementsByTagName("input");
for (var i=0; i<inputs.length; i++){ .. }
jQuery
$("input").each(function() { ... });
What I don't understand is, if you're using jquery, why are you not leveraging it in your function? I assure you that if you were to use jquery to attach the events, they will work in webkit and all other browsers.
Related
I am trying to convert a small script from javascript to jquery, but I don't know where I should be putting the [i] in jquery?. I am nearly there, I just need someone to point out where I have gone wrong.
This script expands a search input when focused, if the input contains any values, it retains it's expanded state, or else if the entry is removed and clicks elsewhere, it will snap back.
Here is the javascript:
const searchInput = document.querySelectorAll('.search');
for (i = 0; i < searchInput.length; ++i) {
searchInput[i].addEventListener("change", function() {
if(this.value == '') {
this.classList.remove('not-empty')
} else {
this.classList.add('not-empty')
}
});
}
and converting to jquery:
var $searchInput = $(".search");
for (i = 0; i < $searchInput.length; ++i) {
$searchInput.on("change", function () {
if ($(this).value == "") {
$(this).removeClass("not-empty");
} else {
$(this).addClass("not-empty");
}
});
}
Note the key benefit of jQuery that it works on collections of elements: methods such as .on automatically loop over the collection, so you don't need any more than this:
$('.search').on("change", function() {
this.classList.toggle('not-empty', this.value != "");
});
This adds a change event listener for each of the .search elements. I've used classList.toggle as it accepts a second argument telling it whether to add or remove the class, so the if statement isn't needed either.
I am trying to keep checkboxes checked on refresh with localStorage. All modern browsers do the job except IE11 (and lower)
Fiddle:
http://jsfiddle.net/usme91gk/
(function() {
var boxes = document.querySelectorAll("input[type='checkbox']");
for (var i = 0; i < boxes.length; i++) {
var box = boxes[i];
if (box.hasAttribute("store")) {
setupBox(box);
}
}
function setupBox(box) {
var storageId = box.getAttribute("store");
var oldVal = localStorage.getItem(storageId);
console.log(oldVal);
box.checked = oldVal === "true" ? true : false;
box.addEventListener("change", function() {
localStorage.setItem(storageId, this.checked);
});
}
})();
Does anyone know if there's a way to somehow adapt this to IE? Or maybe you know a script that keeps checkboxes checked on refresh in all browsers? (Doesn't matter if it's in javascript or jquery). Any help is appreciated.
I use jstorage when I need localstorage. It has some added features like TTL (time to live).
http://www.jstorage.info
In IE8, my menu script doesn't seem to go down well. But after much searching i can't figure out why it's throwing errors like:
SCRIPT5007: Unable to get value of the property 'call': object is null or undefined
site.js, line 5 character 5
My Script is:
var anchor = document.querySelectorAll('button');
[].forEach.call(anchor, function(anchor){
var open = false;
anchor.onclick = function(event){
event.preventDefault();
if(!open){
this.classList.add('close');
open = true;
}
else{
this.classList.remove('close');
open = false;
}
};
});
This script handles my mobile navigation, but as i am still learning, i can't figure this one out. Can anyone help point me in the right direction?
Array.forEach() is not supported in IE8.
Since you have tagged the question with jQuery use $.each() to iterate an array.
Using jQuery this can be written as
$('button').click(function(){
$(this).toggleClass('close')
})
A vanila script solution can be
var anchor = document.querySelectorAll('button');
function handler(e) {
if (/\bclose\b/.test(this.className)) {
this.className = this.className.replace(/\bclose\b/, '');
} else {
this.className += ' close';
}
}
for (var i = 0; i < anchor.length; i++) {
if (window.addEventListener) {
anchor[i].addEventListener('click', handler, false);
} else {
anchor[i].attachEvent('onclick', handler);
}
}
Demo: Fiddle
I am developing an app that stays in the website itself, and I want every link to call a function. I have tried this:
HTML
link<br>
link 2
Javascript
var a = document.getElementsByTagName("a");
for (var i = 0; i < a.length; i++) {
a[i].onclick = function () {
return false
}
}
What is wrong? It doesn't work.
Since it's not jQuery, you should use the preventDefault function.
var a = document.getElementsByTagName("a");
for (var i = 0; i < a.length; i++) {
a[i].onclick = function (e) {
e.preventDefault();
doSomething();
}
}
edit for pure javascript solution
document.addEventListener("click", function(e){
if (e.nodeName==="A"){
e.preventDefault();
return false;
}
}, false);
This will only add one single event to the document and prevent all clicks on anchor elements only.
I removed the old solution because of the comment, that this wasn't a jquery question
Don't use return false, it does more than you really need. Instead try event.preventDefault()
var a = document.getElementsByTagName("a").forEach(function (e) {
e.onclick = function (a) {
doSomething(a);
return false;
}
}
}
I have this scenario, I am detecting all forms on a site: document.forms
And I am trying to detect which forms are visible and which are not visible.
var formElement = []
for (i=0,l=document.forms.length;i<l;i++){
var formIndex = document.forms.item(i);
if (<need here just visible forms>){
formElement.push(formIndex);
}
}
Just to say I am doing this over an other pop up window that is communicating with the browser window with that forms, this depends on jQuery being present on the host site so jQuery is not a solution.
What is the best way to do this.
var isVisible = form.style.display != 'none';
UPDATE #1: hidden attribute
Also the element can be invisible if hidden attribute is specified, so the condition
could be changed to
var isVisible = form.style.display != 'none' && !form.hasAttribute('hidden');
UPDATE #2: jQuery approach:
Find all invisible forms:
$('form:hidden');
or
$('form:not(:visible)');
Find all visible forms:
$('form:visible');
Check is form visible:
$(form).is(':visible');
UPDATE #3: particular case (for original code in question)
It's working pretty well to determine visible forms using a function from my demo:
function isVisible(el) {
return el.style.display != 'none' && !el.hidden;
}
var formElement = [];
for (i=0, l=document.forms.length; i<l; i++) {
var formIndex = document.forms.item(i);
if(isVisible(formIndex)) {
formElement.push(formIndex);
}
}
console.log(formElement);
It's the same loop is this one in demo:
for(var i = document.forms.length; 0 < i--;) {
log('Form #' + i + ': ' + isVisible(document.forms[i]));
}
DEMO
UPDATE #4: pop-up window
I've adapted my example for pop-up window, but I have to say that you're NOT ABLE to deal with elements in document from other host - both pop-up and opener windows should belong to same host.
<script type="text/javascript">
var wnd = window.open('popup.html');
function isVisible(el) {
return el.style.display != 'none' && !el.hidden;
}
wnd.onload = function() {
/* This is working pretty well: */
var formElement = [];
console.log(wnd.document.forms);
for (i=0,l=wnd.document.forms.length;i<l;i++){
var formIndex = wnd.document.forms.item(i);
console.log(formIndex);
if (isVisible(formIndex)){
formElement.push(formIndex);
console.log('Form ' + formIndex.id + ' is visible');
}
}
};
</script>
var forms = document.getElementsByTagName("form");
Then, you can loop through the array and check to see if the tag is visible or not.
You can use this:
$(element).is(":visible") // Checks for display:[none|block], ignores visible:[true|false]
Ref. How do I check if an element is hidden in jQuery?
you can use :
$('#form').is(':visible')
The following will go through all forms and tell which ones are visible and which aren't:
$("form").each(function() {
if ($(this).is(":visible")) {
console.log("Visible: ", this);
} else {
console.log("Hidden: ", this);
}
});
or if you want to get all visible ones at once:
$("form:visible")
And the hidden ones:
$("form:hidden")