Can anyone tell me why the touchenter event is not working in this code. The mouseenter works fine on a desktop. Should be so simple, I'm missing something though.
Example here - http://jsfiddle.net/gCEqH/6/
Full code below:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<img id="myImg" src="http://jackiehutchings.com/wp-content/uploads/2011/09/g-plus-icon-96x96.png" />
<script>
$(window).load(function() {
$('#myImg').on("touchenter mouseenter", function(event){
alert('entered!');
});
});
</script>
</body>
</html>
Maybe something like this would work?
var elementIdTouching = "";
$('body').on("touchmove", function(e){
var tList = e.touches; // get list of all touches
for (var i = 0; i < tList.length; i++) {
var thisTouch = tList[i]; // not 100% sure about this
var elementTouching = document.elementFromPoint(
thisTouch.screenX,
thisTouch.screenY
);
if (elementTouching.id != elementIdTouching) {
elementIdTouching = elementTouching.id;
if (elementTouching.id == "myImg") {
alert("entered!");
}
}
}
}).on("touchend", function(e){
elementIdTouching = "";
});
$('#myImg').on("mouseenter", function(e){
alert('entered!');
});
tList ~ https://developer.mozilla.org/en-US/docs/Web/API/TouchList
Disclaimer: I haven't tested this.
Related
I am able to create a div using javascript. However, not able to remove that div that I created previously. Only after post-back, I can remove that div. Actually after creating div, script cannot find that div because page did not loaded again.
What I want to do is to create a page that I am able to add an item and remove that item.
Add script works fine.
Remover script:
<script type="text/javascript">
$(function () {
$('.remove ,.shop-button-large, .shop-button-add').click(function () {
var itemToDelete = $(this).attr("data-id");
if (itemToDelete != '') {
$.post("/ShoppingBox/RemoveFromBox", { "id": itemToDelete },
function (data) {
$("#boxItem-" + itemToDelete + "-" + data.ItemCount).fadeOut(300);
});
}
});
});
</script>
The click handler for the remove was done before the DOM node was rendered. It needs to be insider the $(function() { ... }
http://plnkr.co/edit/IhtyH6ampodXICPBv6Fq?p=preview
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
$(function() {
$("#create").click(function() {
var createDiv = document.createElement("div");
createDiv.id = "myDiv";
createDiv.style.margin = "0 auto";
createDiv.style.width = "600px";
createDiv.style.height = "600px";
createDiv.style.backgroundColor = "red";
document.getElementById("myBody").appendChild(createDiv);
});
$("#remove").click(function() {
console.log('remove', $("#myDiv"));
$("#myDiv").fadeOut(300);
});
});
</script>
</head>
<body id="myBody">
Create
Remove
</body>
</html>
In order to clarify, I have prepared a simple code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="js/jquery-2.1.3.intellisense.js"></script>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/jquery-2.1.3.js"></script>
<script src="js/jquery-ui.js"></script>
<script>
$(function () {
$("#create").click(function () {
var createDiv = document.createElement("div");
createDiv.id ="myDiv";
createDiv.style.margin = "0 auto";
createDiv.style.width = "600px";
createDiv.style.height = "600px";
createDiv.style.backgroundColor = "red";
document.getElementById("myBody").appendChild(createDiv);
});
});
$("#remove").click(function () {
$("#myDiv").fadeOut(300);
});
</script>
<title></title>
</head>
<body id="myBody">
Create
Remove
</body>
</html>
How can I make an anchor tag clickable after few seconds ? I made it non-clickable but now can't make it clickable again.
(Note: there will be no id used for the tag)
Heres my html and javascript:
function neww(id,time){
var sec,min,hr;
var i=(time*1);
var neew=setInterval(function(){
if(i>0){
i--;
if(i>=60){
min=parseInt(i/60);
sec=i%60;
if(min>=60){
hr=parseInt(min/60);
min=min%60;
}else{
hr=0;
}
}else{
min=0;
hr=0;
sec=i;
}
if(sec<10){
sec="0"+sec;
}
if(min<10){
min="0"+min;
}
if(hr<10){
hr="0"+hr;
}
id.onclick=function(){return false}; // its working here
id.style.color="red";
id.style.backgroundColor="#ffffff";
id.innerHTML=hr+':'+min+':'+sec;
}
if(i==0){
id.innerHTML="Ready";
id.style.color="#ffffff";
id.style.backgroundColor="green";
if(id.onclick==false){id.onclick=function(){return true};} // but its not working
clearInterval(neew);
}
},1000);
}
Html:
Ready
-Thanks in advance.
SOLVED:
I just removed the 'onclick' attribute from the anchor, so the timer function gets no barrier until the timer completes. Thank you everybody for your effort which helped me to solve this.
Thiss for the link is alive but that doesn't interfere the timer function:
function neww(id,time){
var link=id.getAttribute("onclick");
id.removeAttribute("onclick");
var sec,min,hr;
var i=(time*1);
var neew=setInterval(function(){
if(i>0){
i--;
if(i>=60){
min=parseInt(i/60);
sec=i%60;
if(min>=60){
hr=parseInt(min/60);
min=min%60;
}else{
hr=0;
}
}else{
min=0;
hr=0;
sec=i;
}
if(sec<10){
sec="0"+sec;
}
if(min<10){
min="0"+min;
}
if(hr<10){
hr="0"+hr;
}
id.style.color="red";
id.style.backgroundColor="#ffffff";
id.innerHTML=hr+':'+min+':'+sec;
}
if(i==0){
id.innerHTML="Ready";
id.style.color="#ffffff";
id.style.backgroundColor="green";
id.setAttribute("onclick",link);
clearInterval(neew);
}
},1000);
}
And thiss for the link is dead while the timer is running:
function neww(id,time){
var link=id.getAttribute("onclick");
var linkk=id.getAttribute("href");
var sec,min,hr;
var i=(time*1);//+60;
var neew=setInterval(function(){
if(i>0){
i--;
if(i>=60){
min=parseInt(i/60);
sec=i%60;
if(min>=60){
hr=parseInt(min/60);
min=min%60;
}else{
hr=0;
}
}else{
min=0;
hr=0;
sec=i;
}
if(sec<10){
sec="0"+sec;
}
if(min<10){
min="0"+min;
}
if(hr<10){
hr="0"+hr;
}
id.removeAttribute("onclick");
id.removeAttribute("href");
id.style.color="red";
id.style.backgroundColor="#ffffff";
id.innerHTML=hr+':'+min+':'+sec;
}
if(i==0){
id.innerHTML="Ready";
id.style.color="#ffffff";
id.style.backgroundColor="green";
id.setAttribute("onclick",link);
id.setAttribute("href",linkk);
clearInterval(neew);
}
},1000);
}
Here I am giving you one idea. please modify, according to your need. Hope it help.
After three minutes, it will create the link.
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
Ready
</body>
</html>
jQuery:
$(function(){
var link = $('.mynewclass').attr('href');
$('.mynewclass').removeAttr('href');
setTimeout(function(){
$('.mynewclass').attr('href', link);
}, 3000);
});
Javascript:
I am using the javascript getElementsByClassName method. if you are using older browser then i think it will not work. please check the browser support.
window.onload = function () {
var elem = document.getElementsByClassName('mynewclass'),
urlLink = elem[0].getAttribute('href'),
emptyURL = elem[0].removeAttribute('href');
setTimeout(function () {
urlLink = elem[0].setAttribute('href', urlLink);
}, 3000);
}
Here is the jsbin link - http://jsbin.com/dawit/2/
In Vanilla JavaScript:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Delay Click</title>
</head>
<body>
Ready |
Ready |
Ready |
<script>
var enableLinks = false;
setTimeout(function(){
enableLinks = true;
}, 5000); //add delay of 5 seconds = 5000 miliseconds
function clickHandler(e){
var el = e.target;
if(!enableLinks){
e.preventDefault();
}else{
//add rest of your logic here
console.log("it's working");
}
}
var anchors = document.querySelectorAll(".mynewclass");
for(var i=0; i< anchors.length; i++){
if (anchors[i].addEventListener) {
anchors[i].addEventListener('click', clickHandler, false);
} else if (anchors[i].attachEvent) {
anchors[i].attachEvent('onclick', clickHandler);
}
}
</script>
</body>
</html>
Suppose you open a handful of windows with:
window.open(url1,'win1');
window.open(url2,'win2');
window.open(url3,'win3');
(each window has a unique name)
And then you refresh the page.
The 3 popup windows are still open. Is there a way to list the names of all of the open windows and close them?
This is not a duplicate question.
In this question the browser is being refreshed, so you cannot simply use a global array to keep track of child windows.
This is not a duplicate question.
So the questions is closed, I'll post an answer based on the comments and research.
Firstly, to all who commented, thank you for helping.
Answer:
There is not a built-in object which tracks opened windows and persists from page load to page load.
As Felix Kling pointed out, using localStorage is a possible work-around.
Try postMessage to communicate between existing windows within the same domain. That's how i'm going to try and solve the same problem. See: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
index.htm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>pop</title>
</head>
<body>
<script>
var pops = [];
window.onmessage = function(e)
{
// todo: check domain
// if( e.origin )
var data;
try
{
data = JSON.parse(e.data);
}
catch(e)
{
// fail silent...?
return;
}
switch(data.event)
{
case "RestoreOpenWindow":
onClosePopup(e.source.name);
case "QueryOpenWindows":
pops.push(e.source);
updateLabel();
break;
}
};
window.onload = function()
{
window.onClosePopup = onClosePopup;
updateLabel();
};
window.onbeforeunload = function()
{
for(var i = 0; i < pops.length; i++) pops[i].queryOpenPopups();
};
function onClosePopup(name)
{
for(var i = pops.length - 1; i >= 0; i--)
if(pops[i].name === name)
{ pops.splice(i, 1); break; }
updateLabel();
};
function openPopup()
{
pops.push(window.open("pop/popup.htm", "pop" + pops.length, ' '));
updateLabel();
setTimeout(function(){
alert('Click ok to refresh...');
location.href = location.href;
}, 5000);
}
function updateLabel()
{
document.getElementById("total").innerHTML = pops.length;
var html = [];
for(var i = 0; i < pops.length; i++)
html.push(pops[i].name);
document.getElementById("names").innerHTML = html.join("<br"+"/"+">");
}
</script>
<button onclick="openPopup()">open popup and refresh after 5 seconds (...allow em popups...)</button></br>
<span>total: </span><span id="total"></span></br>
<span id="names"></span></br>
</body>
</html>
popup.htm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>pop</title>
</head>
<body>
<script>
window.queryOpenPopups = function()
{
var count = 0;
var hInterval = setInterval(function () {
try
{
if(window.opener)
{
window.opener.postMessage(JSON.stringify({"event": "QueryOpenWindows", "name": window.name}), "*");
clearInterval(hInterval);
} else count++;
}
catch(e)
{
count++;
}
if(count > 50)window.close();
}, 100);
};
window.onbeforeunload = function(){
window.opener.onClosePopup(window.name);
};
// restore link with opener on refresh
window.opener.postMessage(JSON.stringify({"event": "RestoreOpenWindow", "name": window.name}), "*");
window.onload=function(){ document.getElementById("name").innerHTML = window.name; };
</script>
<span id="name"></span>
</body>
</html>
I'm trying to çreate a jquery popup script OO style. I'm doing this because I would like to expand this code with more jquery/javascript without losing oversight. The errors I'm receiving are Object #<HTMLDivElement> has no method 'centerPopup' and Resource interpreted as Script but transferred with MIME type text/x-c: I'm new to OO javascript, but have quite the experience in OO PHP
function popup(){
var popupStatus = 0;
$(document).ready(function () {
$("#button").click(function()
{
this.centerPopup();
this.loadPopup();
});
$("#backgroundPopup").click(function()
{
this.disablePopup();
});
$(document).keypress(function(e)
{
if(e.keyCode==27 && popupStatus==1)
{
this.disablePopup();
}
});
});
this.loadPopup = function (){
if(this.popupStatus==0)
{
$("#backgroundPopup").css(
{
"opacity": "0.7"
});
$("#backgroundPopup").fadeIn("slow");
$("#popupContact").fadeIn("slow");
this.popupStatus = 1;
}
}
this.disablePopup = function (){
if(this.popupStatus==1)
{
$("#backgroundPopup").fadeOut("slow");
$("#popupContact").fadeOut("slow");
this.popupStatus = 0;
}
}
this.centerPopup = function (){
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
$("#popupContact").css(
{
"position": "absolute",
"top": windowHeight/2-popupHeight/2,
"left": windowWidth/2-popupWidth/2
});
$("#backgroundPopup").css(
{
"height": windowHeight
});
}
}
var popup = new popup()
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="css/popup.css" type="text/css" media="screen" />
<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="js/popup2.js" type="text/javascript"></script>
</head>
<body>
<center>
<div id="button"><input type="submit" value="Popup!" /></div>
</center>
<div id="popupContact">
<a id="popupContactClose">x</a>
</div>
<div id="backgroundPopup"></div>
</body>
</html>
$("#button").click(function()
{
this.centerPopup();
this.loadPopup();
});
this isn't what you actually think. It's not the instance of popup, but the DOM element (#button). You can fix this by saving a reference on your instance at the beginning of your class:
function popup(){
var self = this;
this.popupStatus = 0; // you should use `this` here
$(document).ready(function () {
$("#button").click(function()
{
self.centerPopup();
self.loadPopup();
});
/* ... snip ... */
This is my html:
<img id="bladder" onclick="changeimage()" src="images/logo_bladder.png" />
and my js:
<script>
cc = 0;
function changeimage() {
if (cc == 0) {
cc = 1;
document.getElementById('bladder').src = "images/logo_bladder_b.png";
}
else {
cc = 0;
document.getElementById('bladder').src = "images/logo_bladder.png";
}
}
</script>
I would like to be able to click anywhere on body – not only on the image! – to change the image. How do I achieve that?
you can try
$(document).ready(function(){
$(body).click(function(){
if (cc==0)
{ cc=1;
document.getElementById('bladder').src="images/logo_bladder_b.png";
}
else
{
cc=0;
document.getElementById('bladder').src="images/logo_bladder.png";
}
});
});
OR
in you <body> tag, add onclick event like:
<body onclick="changeimage()">..</body>