Jquery Show() flicker - javascript

<html>
<head>
<script type="text/javascript">
var oauth = chrome.extension.getBackgroundPage().oauth;
</script>
<style type="text/css">
#note
{
display:none;
}
</style>
<script src="Task.js" type="text/javascript"></script>
<script src="Taskhandle.js" type="text/javascript"></script>
<script src="jquery.js" type="text/javascript"></script>
<title>TaskMan</title>
</head>
<body>
<input type="text" id="title"><input type="text" id="note">
+ N
<script type="text/javascript">
window.onload=function(){
$('#anote').click(function () {
$('#note').show();
});
}
</script>
</body>
</html>
When I run this code in chrome the input flickers in and out. I need a fix.

You have to prevent default of the link (which is reloading the page):
$('#anote').click(function (E) {
E.preventdefault();
$('#note').show();
});

Related

jQuery code doesn't work in CodeIgniter

I'm trying to do following with jQuery:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$('#test').hover(function(){
alert('sub');
});
</script>
</head>
Thanks.
I'm assuming that HTML DOM element with id="test" exists.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(function() {
$('#test').hover(function() {
alert('sub');
});
});
</script>
</head>
By the way, CodeIgniter has nothing to do with your issue.
Seems like you are accessing an element which does not exists.
Try this:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#test').hover(function() {
alert('sub');
});
});
</script>
</head>

Javascript: Uncaught ReferenceError

<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"/>
<script type="text/javascript">
$(document).ready(function(){
$('#name').val('Name1');
});
function clickMe(){
console.log('click me called');
}
</script>
</head>
<body>
Person Name: <input type="text" id="name" data-bind="value:personName">
<input type="submit" value="Save" onClick="javascript:clickMe()"/>
</body>
</html>
In the code above neither the function inside document.ready is getting executed nor "clickMe" function is getting executed when "Save" button is clicked.
When I click on "Save" button, Uncaught ReferenceError: clickMe is not defined error message is seen.
Because you haven't closed script tag of jQuery. <script> is not self-closing tag.
<script type="text/javascript" src="https://code.jquery.com/jquery- 1.11.3.js"/>
Should be
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
Code:
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#name').val('Name1');
});
function clickMe() {
alert('click me called');
}
</script>
</head>
<body>
Person Name:
<input type="text" id="name" data-bind="value:personName">
<input type="submit" value="Save" onClick="javascript:clickMe()" />
</body>
</html>
Scripts can not be self closing. You need to have the closing </script> tag on the jQuery include.
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"/>
needs to be
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
You need to refer to script like this:
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>

Rapahel Sketchpad not working

Below is my code.I have used raphael sketchpad plugin. But I'm unable to draw,I just get blank sketchpad. Why is it so?
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="raphael-min.js"></script>
<script type="text/javascript" src="json2.js"></script>
<script type="text/javascript" src="raphael.sketchpad.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var sketchpad = Raphael.sketchpad("editor", {
height: 260,
width: 260,
editing: true
});
// When the sketchpad changes, update the input field.
sketchpad.change(function() {
$("#data").val(sketchpad.json());
});
});
</script>
</head>
<body>
<input type="hidden" id="data" />
<div id="editor" style="border: 1px solid #aaa; "></div>
<h1> Testing</h1>
</body>
</html>
When I try to add a stroke,I get a diagonal line.
When I used latest version jquery and raphael,it's working for me now. I did below modification
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="raphael-2.0.1.js"></script>

How to use in html body a variable that's been defined in script in the head part

In the following code how can I correctly insert the val testName defined in the function initialize() in the field Name in the body?
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript">
function intialize()
{
var testName="John";
}
</script>
</head>
<body onload="intialize()">
<input id="Name" type="textbox" value=testName>
</body>
</html>
You can use document ready :
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript">
$(function(){
$('#Name').val('testName');
});
</script>
</head>
<body>
<input id="Name" type="textbox" value=""/>
</body>
</html>
Used the id, Name, and set the value to 'testName' once the document is ready.
Well, if you're using jQuery, you could just include this in the function:
$("#Name").val(testval);
You might have to put the script in $(document).ready() though.
This. It's easy, and you don't have to worry about any of this jquery mess.
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript">
function intialize()
{
var testName="John";
document.getElementById("Name").value = testname;
}
</script>
</head>
<body onload="intialize()">
<input id="Name" type="textbox">
</body>
</html>
Try declaring it outside the function
<script type="text/javascript">
var testName;
function intialize()
{
testName="John";
}
</script>
But it will become a global variable.
You have jQuery available so USE it. Don't use an older version than 1.6.1 though..
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
var testName="John";
$(document).ready(function() {
$('#Name').val(testName);
});
</script>
</head>
<body>
<input id="Name" type="text">
</body>
</html>

How to hide a frame from a child of another frame?

How can I hide a frame from the content of another one. I mean:
Parent
Frame F1
Page P1
Frame F2
Page P2
I want from P2 hide the frame F1 using Javascript of JQuery.
You can do this:
iframe-access.html
<html>
<head>
<style type="text/css">
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<iframe src="iframe1.html" id="iframe1"></iframe>
<iframe src="iframe2.html" id="iframe2"></iframe>
</body>
</html>
iframe1.html
<html>
<head>
<style type="text/css">
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<h1>Iframe 1</h1>
</body>
</html>
iframe2.html
<html>
<head>
<style type="text/css">
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
<script type="text/javascript">
alert('Hide Iframe 1');
window.parent.document.getElementById('iframe1').style.display = 'none';
</script>
</head>
<body>
<h1>Iframe 2</h1>
</body>
</html>
http://jfcoder.com/test/iframe-access.html
NOTE
This will also work (as Jose points out):
window.parent.document.getElementById('framesetID').rows = "0%,*";

Categories