In node-webkit, I was running the code like below.
Jquery
$(document).on('mousedown', '.clickOnMe', function(e){
console.log(e.target);
});
I noticed that it taking few mili seconds to access to e.target and you feel like there is some lag/freeze when using the application. My application contains access to e.target and wonder if there is any better way that doesn't lag or freeze. The lag is like 0.1 sec.
I've tried using pure JavaScript but the output was the same.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
</head>
<script src="js/jquery/1.7.2.min.js"></script>
<style>
.clickOnMe { border: 1px solid black; height: 200px; width: 200px; background: #ddd;}
</style>
<script type='text/javascript'>
$(document).on('mouseup', '.clickOnMe', function(e){
$('.clickOnMe').css('background','red');
});
$(document).on('mousedown', '.clickOnMe', function(e){
console.log(e.target);
$('.clickOnMe').css('background','blue');
});
$(document).on('mousemove', document, function(e){
console.log(e.target);
});
</script>
<body>
<div class='clickOnMe' >
Click on me.
</div>
</body>
</html>
OldGeeksGuide, this is the code I used to test each platforms, node-webkit 0.9.x, 0.8.x, atom shell, brackets shell, chrome, etc. So far, node-webkit gives me the lag. Please take a look at console log and see how fast other ones shows the log. Im using Windows7. Thank you!
-Im using document.on but the performance is the same with pure JavaScript or $('id').on
Related
I am programming a web app where clicking on a bit of text should toggle the line-through css style. This works on Firefox, but the click event seems not to fire in Chrome once the style has been applied.
HTML:
<script>
$(document).ready({
$(".liner").click(toggleStrikethrough);
});
<div class="liner">
Hello World
</div>
JS (note that I've used jQuery because that's what I'm using in the app, but a vanilla solution would be acceptable as well):
function toggleStrikethrough()
{
if($(this).css("text-decoration") != "line-through")
$(this).css("text-decoration","line-through");
else
$(this).css("text-decoration","");
}
JS Fiddle
In CSS3, text-decoration has multiple parts. In your particular case, the read $(this).css("text-decoration") returns line-through solid rgb(0, 0, 0).
Instead, try changing the if condition to $(this).css("text-decoration-line") to get only the line style part of the text decoration.
I tried to solve your problem using different way. I think it was succeeded. you can use below mention code to get same output that you want.
$('div').bind('click',function(){
$(this).toggleClass('liner');
});
.liner{
text-decoration:line-through;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Exzmple</title>
<style>
</style>
</head>
<body>
<div class="liner">Hello World</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
I used bind , toggleClass methods for this. As a result js code was simple and it could run efficiently.
I've been playing around with the jquery plugin Jquery Transit : http://ricostacruz.com/jquery.transit/ but no matter what I do, the code doesn't behave like I expect it to (as a matter of fact, it doesn't behave at all)
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color:yellow;
width:100px;
border:1px solid blue;
position:absolute;
left:50px;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js'></script>
<script scr='jquery.transit.js'></script>
</head>
<title>test</title>
</head><body>
<button id="go"> Run</button>
<div id="block">Hello!</div>
<script>
$(function() {
$("#go").click(
function(){
$("#block").transition({ x: '90px' }, 1500 );
});
});
</script>
</body>
</html>
The code doesn't work at all. I added the jquery animation code to compare it to, which works perfectly fine. Now I KNOW that jquery 1.8 broke jquery transit, but I'm using jquery 1.7 here so that shouldn't be an issue.
I'm at a loss here, anyone got any ideas?
EDIT:
I've followed everyone's instructions and created this:
http://web.uvic.ca/~markkoni/
and although the examples seem to work jsfiddle it doesn't work in practice.
Working demo (Tested on localhost too): http://jsfiddle.net/fedmich/S2ube/
the minified script seems to be not working. change your code from
http://ricostacruz.com/jquery.transit/jquery.transit.min.js
to
http://ricostacruz.com/jquery.transit/jquery.transit.js
also don't directly hotlink the javascript and put it on your own site, because when his site is down later, your web_app will also be down if you use his site's js.
and yes, put your code after pageload
$(function() {
//your code here
});
Make sur your DOM is loaded before manipulating it by enclosing it in a jQuery ready handler :
$(function(){
$('#go').click(function(){
$("#block").transition({x: '90px'}, 1500);
});
});
Also, prefer using css left property instead of x which does not exists.
div {
background-color: yellow;
width: 100px;
border: 1px solid blue;
position: absolute;
left: 50px;
}
Here is a working fiddle
Also make sure your script tag looks like this :
<script type="text/javascript">
Instead of
<script>
Notes :
I'm using jQuery 1.7.2 in my fiddle, it seems that transit is not compatible with transit.js yet.
Transit does support backgroundColor and color properties. Check out the example : http://jsfiddle.net/PAnCh/
$(function() {
$("#block").mouseenter(
function(){
$("#block").transition({ x: '+=90px', backgroundColor: '#cacaca', color: '#000' }, 1000 );
});
$("#block").mouseleave(
function(){
$("#block").transition({ x: '-=90px', backgroundColor: '#036', color: '#fff' }, 500 );
});
});
I use a click event in jQuery in my windows sidebar project that doesn't work in the sidebar (i don't think it's binded), but it works on a browser (even IE7). Here is a simple example from my project that doesn't work in my sidebar, and I hope somebody can tell me why, because I couldn't figure it out.
<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
$(function(){
$('#clickable_div').click(function(){
$('#textContent').append($('<h4 />').text('change'));
});
});
</script>
</head>
<body style="width: 200px; height: 250px; border: 1px solid black;">
<div id="clickable_div" style="width: 50px; height: 50px;border:1px solid black;">Click the div</div>
<div id="textContent"></div>
</body>
</html>
I found a solution for my problem, even if I don't know why it does not work with jQuery's click method.
I used javascript's onclick, and it's working now.
I have a mobile web gallery page where I have a CSS floated "next" link. The CSS float property causes the link to have a display: block behavior on it. A jQuery touchstart event is bound to the link. When the user clicks on the link, the Javascript code bound to that touchstart event advances the gallery by one slide via Ajax. In other words, there is no page refresh.
However, I noticed that occasionally when I touch an area of the link's block space that is not the link text itself, the browser follows the href and causes a page refresh (because the URL has changed) instead of executing the Javascript code bound to the touchstart event.
Has anybody seen this before? Is there a way to fix this?
I simplified it down to this code below, and it still happens, although much less frequently.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>Test</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<style type='text/css'>
.cont { width: 320px; }
.next { border-left: 1px solid #000; float: right; text-align: right; width: 65px; }
.msg { clear: both; width: 200px; }
</style>
<script type='text/javascript'>//<![CDATA[
$(function(){
$('.next').bind('click touchstart', function(event) {
event.preventDefault();
if (event.type == 'touchstart') {
$(this).unbind('click');
}
$('.msg').append('<p>Click!</p>');
});
});//]]>
</script>
</head>
<body>
<div class="cont">Next</div>
<div class="msg"></div>
</body>
</html>
I tested this on my iPhone and it seems to work. For some reason after registering a touchstart event you are unbinding the click events. Is there any reason for that?
When you click on the text of the link all it seems to register is indeed touch start, so unbinding click does not break things. I do believe, however, that when you touch outside the text link, but still within the block space it registers both a touchstart and click, so at this point you have already unbound click and it works as a regular link.
You should notice, that on your first click outside the bounds it never goes to yahoo.com. It's only the subsequent once that do that.
So in essence what you need to do is remove that unbind, as so:
<script type='text/javascript'>//<![CDATA[
$(function(){
$('.next').bind('click touchstart', function(event) {
event.preventDefault();
$('.msg').append('<p>Click!</p>');
});
});//]]>
</script>
Is there any reason why you would want to unbind click?
basically what I want is simple, when people onclick, the field become editable.
After they change the value, press Esc at keyboard/ or click outside , to save the record.
I'm not sure why it's not working. Documentation seems not complete... Anyone got idea on how this work?
The documentation page: http://www.appelsiini.net/projects/jeditable
Here I post my existing code here for guys to review.
testing.html
<head>
<title></title>
<script src="jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.jeditable.mini.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$(".click").editable("jeditabletest.php", {
indicator : "<img src='indicator.gif'>",
tooltip : "Click to edit...",
style : "inherit"
});
});
</script>
<style type="text/css">
#sidebar {
width: 0px;
}
#content {
width: 770px;
}
.editable input[type=submit] {
color: #F00;
font-weight: bold;
}
.editable input[type=button] {
color: #0F0;
font-weight: bold;
}
</style>
</head>
<body>
<b class="click" style="display: inline">Click me if you dare!</b></> or maybe you should
</body>
</html>
jeditabletest.php
<?php
echo "hehehe"
?>
does anyone know what's wrong? I tried so many times, it just not working at all. All related library files are already put in.
To enable submitting the form when user clicks outside do the following:
$(".editable").editable("http://www.example.com/save.php", {
onblur : "submit"
});
Submitting when pressing ESC is generally a bad idea since ESC is universally reserved for canceling. If you really really want to do this you need to edit Jeditable code. Search and edit the following in jquery.jeditable.js:
/* discard changes if pressing esc */
input.keydown(function(e) {
if (e.keyCode == 27) {
e.preventDefault();
reset.apply(form, [settings, self]);
}
});
yeap: i recommend http://valums.com/edit-in-place/
It uses div's contentEditable property. You may want to look into that before you start using it.
jrh
I ran your code and it seemed to work fine. I think the reason why it's not working for you is that this .html page needs to be run from a web server like http://localhost/mypage.html.
The jeditable plugin is making an AJAX call to the server whenever you try to save the edited text and for the AJAX call to work you need to run the page from a server.
Hope this helps!