Please see
Accessing Parameters *and* Events in function from jQuery Event
How can I change this code so $(this) acts like $(this) in a click event instead of returning the complete html document?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Expires" content="Fri, Jan 01 1900 00:00:00 GMT">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en">
<meta name="author" content="">
<meta http-equiv="Reply-to" content="#.com">
<meta name="generator" content="PhpED 5.2">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="creation-date" content="09/20/2007">
<meta name="revisit-after" content="15 days">
<title>Untitled</title>
<link rel="stylesheet" type="text/css" href="my.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function functionToCall(clickedItem) {
return function (ev) {
// both accessible here
alert(ev.type);
console.debug(clickedItem);
alert(clickedItem.attr('id'));
}
}
$(document).ready(function() {
$("a").live("click", functionToCall($(this)));
});
</script>
</head>
<body>
Test
</body>
</html>
Refactor it like this:
function functionToCall(ev) { // ev -> event is passed by jQuery by default
var clickedItem = this; // this refers to the element that is clicked
// both accessible here
alert(ev.type);
//console.debug(clickedItem); // this may not work in all browsers. see my fiddle for a failsafe.
// failsafe: check if console exists
if(window.console && window.console.debug) { console.debug(clickedItem); }
alert($(clickedItem).attr('id')); // $() to get jQuery object
}
$(document).ready(function() {
$("a").live("click", functionToCall); // just need to pass a function reference
});
Demo: http://jsfiddle.net/mrchief/ZYGVz/1/
Try something like this:
$("a").each(function(){
$(this).live("click",functionToCall($(this)));
})
Related
I tried using Local Storage to store a variable to determine if a button can be used or not. This however is not working at all like I expected. Why is the Item getting shown as "null" and why is the console.log not working?
Index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>index.html</title>
<script>
localStorage.setItem('status', 'unused')
console.log(localStorage.getItem('status'))
let usedButton = () => {
localStorage.setItem('status', 'used')
console.log(localStorage.getItem('status'))
window.location.replace('index2.html')
}
</script>
</head>
<body>
<button onclick="usedButton()">Use me</button>
</body>
</html>
index2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>index2.html</title>
<script>
console.log(localStorage.getItem('status'))
let isButtonUsed = () => {
if(localStorage.getItem('status') == 'used'){
console.log('I was already used')
}
}
</script>
</head>
<body>
<button onclick="isButtonUsed()">Am I used?</button>
</body>
</html>
I tried making it so that the Button on index.html changes the localStorage variable status from 'unused' to 'used'. But on the 2nd page it is showing up as null and so the function is not working. I don't know how I can get a Button to work on one page and by clicking it disabling other buttons on other pages you redirect to.
Thank you in advance for your help.
hi i am trying to convert my html code into an image
this i my python code:
def cnv2image():
options = {
"--enable-local-file-access": None,
"--enable-javascript": None,
"--javascript-delay": 10000,
"--debug-javascript": None
}
imgkit.from_file("tweet_embed.html", "result.pdf", options)
and this is my html code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
name="viewport">
<meta content="ie=edge" http-equiv="X-UA-Compatible">
<meta content="text/html; charset=utf-8" http-equiv="Content-type">
<meta content="jpg" name="imgkit-format">
<script async charset="utf-8" src="https://platform.twitter.com/widgets.js"></script>
<title>Document</title>
</head>
<body>
<blockquote class="twitter-tweet" data-theme="dark"><p dir="ltr" lang="en">be honest, do you kiss your dog goodnight?</p>— ᴘᴀᴠʟᴏᴠ ᴛʜᴇ ᴄᴏʀɢɪ 🐶 (#PAVGOD) August 18, 2021</blockquote>
</body>
</html>
the problem is that when i try to convet html to image js wont get load and i get a screenshot only from html
this is the result that i get:
this is what i expect:
This is the simple code I run hoping to get control over html5 validation but the browser says setCustomvalidity is not a function. what am I doing wrong?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<input type='text' id='tocheck' />
<script>
$("#tocheck").click(function () {
var $this = $(this);
$this.setCustomValidity("slkdjf");
});
</script>
</body>
</html>
jQuery does not have the setCustomValidity function, but the actual DOM element does. The jQuery selector always returns an Array, so you can use the zero index to get the actual DOM element or you can just use this (not $(this)) to get the DOM element upon which you can set the custom validity.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<form>
<input type='text' id='tocheck'/>
<button>
Submit
</button>
</form>
<script>
$("#tocheck").click(function(){
this.setCustomValidity("slkdjf");
});
</script>
</body>
try to
$this[0].setCustomValidity("slkdjf");
And html
<form>
<input type="text" id="tocheck">
<button type="submit">Button</button>
</form>
You can simply do this.setCustomValidity("slkdjf"); this is the DOM object, whereas $(this) is the jQuery wrapper around same.
$("#tocheck").click(function(){
this.setCustomValidity("slkdjf");
$( "<p>slkdjf</p>" ).insertAfter( this );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='tocheck'/>
you can use syntax like
$('#id**^**.class')[0].setCustomValidity('**some notification string ...**');
I get the whole HTML code from JSON using Ajax , The fetched string looks like :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
..
</head>
<body>
<div class="container">
...
</div>
<div id="overlay"></div>
<script></script>
..
</body>
</html>
I want to get the whole code from the div with class container <div class="container"> to this one <div id="overlay"></div>.
How to accomplish that so that I just get the html part I want from the <body> not the whole string?
<script>
(function(window, document){
// `res` is the ajax response string
const res = `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
stuff from container.
</div>
<div id="overlay"></div>
</body>
</html>`;
const wrapper = document.createElement("div");
wrapper.innerHTML = res;
let str = '';
str+=wrapper.querySelector("div.container").outerHTML;
str+=wrapper.querySelector("div#overlay").outerHTML;
alert(str);
})(window, document);
</script>
when i want to detect the bottom of my page i use this code which worked fine in a test-file (link below):
$(window).scroll(function() {
$(window).scrollTop() + $(window).height() == $(document).height(){
alert(at bottom);
}
}
But in my final file the exact same code only detects scrolling to the top. can anyone see the mistake or provide a better solution?
Link to test-file: www.warthunder-skins.de/test/
Link to normal file: www.warthunder-skins.de/skins/
To Detect TOP
$(window).scroll(function() {
if ($(window).scrollTop() == 0) {
alert('at the TOP');
}
});
To Detect BOTTOM
$(window).scroll(function() {
if ($(window).scrollTop() + $(window).height() == $(document).height()) {
alert('at bottom');
}
});
it's some how because of the page header problem
this is your page top 7 lines when i view-source in my browser
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"></head><body><br>
<title>Warthunder Skins</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="">
Change these line to this !!!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Warthunder Skins</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="">
</head>
<body>
now give a try !!!!