Please check out this jsfiddle:
http://jsfiddle.net/xNEZH/2/
It works fine in my jsfiddle
[BOX APPEARS WHEN TEXT IS INPUTTED IN INPUT]
but doesn't work on my browsers BUT I am using the latest versions of safari, firefox and chrome.
What is the matter?
HTML / JAVASCRIPT CODE:
<html>
<head>
<script type="text/javascript" src="jquery-1.7.js"></script>
<script>
$(document).ready(function () {
(function watchInputForChanges(){
var hasInput = $('.input1').val() != "";
$('.box')[hasInput ? 'show' : 'hide']();
setTimeout(watchInputForChanges, 100);
})();
});
</script>
<link href="cloud.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="center1">
<form>
<input type="text" class="input1" autofocus="focus" />
</form>
</div>
<br><br>
<div class="center1">
<div class="box">f</div>
</div>
</body>
</html>
I believe that you need to add this:
$(document).ready(function () {
//function name does not exist outside this scope
(function watchInputForChanges(){
var hasInput = $('.input1').val() != "";
$('.box')[hasInput ? 'show' : 'hide']();
setTimeout(watchInputForChanges, 100);
})();
});
Drav Sloan pointed out that you are missing the jQuery include as well
Apologies for not answering the direct question (simply "why doesn't this work outside of fiddle?") but I can't resist: not sure why you're polling for changes; you can bind a listener to the element. For example (in the document ready function...)
In the HTML itself:
<script src="/scripts/jquery.js"></script> <!--or wherever your script source is!!-->
Then if you're putting your scripts into tags on the same page (instead of external):
<script>
$(document).ready(function () {
(function() {
$input = $('.input1');
$box = $('.box');
$input.on('keypress input paste', function() {
if ($box.not(':visible') && $input.val() != "") {
$box.show();
} else {
$box.hide();
}
});
})();
});
</script>
Catches manual entry or pasted entry.
http://jsfiddle.net/xNEZH/12/
Related
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" ></script>
<script type="text/javascript">
window.onload = function() {
$.getJSON('https://api.ipify.org/?format=json', function(data) {
$('.myip').text(data.ip);
});
};
</script>
<script type="text/javascript" src="https://api.ipify.org/?format=json"></script>
<script>
$('.send').on('click', function() {
document.getElementById('welcomeDiv').style.display = "block";
$.getJSON('https://ipapi.co/' + $('.ip').val() + '/json', function(data) {
$('.city').text(data.city);
$('.country_name').text(data.country_name);
$('.country_code').text(data.country_code);
$('.region').text(data.region);
$('.region_code').text(data.region_code);
$('.postal').text(data.postal);
$('.timezone').text(data.timezone);
$('.latitude').text(data.latitude);
$('.longitude').text(data.longitude);
$('.ip').text(data.ip);
$('.org').text(data.org);
$('.asn').text(data.asn);
});
});
</script>
<input type="text" name="ip" id="ip" maxlength="15" class="ipnput ip" value="">
<button type="button" class="submit send" id="showDiv" value="Check">Check</button>
In the javascript portion, I'm using ipify to grab the visiting users IP. I'd like to attach it to the html input value on load while running the second part of the JS that makes a call to ipapi with that ipify ip. New to JS so hoping someone could steer me in the right direction, thank you.
You got it pretty much right, but errors come from the typo.
In the onload handler you are targeting $('.myip') when in the HMTL you don't have an input with such classs. Also you need to use .val jQuery method.
Also the script element with ipify.org call in src is extra, not needed.
Try this:
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" ></script>
<script type="text/javascript">
window.onload = function() {
$.getJSON('https://api.ipify.org/?format=json', function(data) {
$('.ip').val(data.ip);
});
};
</script>
<script>
$('.send').on('click', function() {
document.getElementById('welcomeDiv').style.display = "block";
$.getJSON('https://ipapi.co/' + $('.ip').val() + '/json', function(data) {
$('.city').text(data.city);
$('.country_name').text(data.country_name);
$('.country_code').text(data.country_code);
$('.region').text(data.region);
$('.region_code').text(data.region_code);
$('.postal').text(data.postal);
$('.timezone').text(data.timezone);
$('.latitude').text(data.latitude);
$('.longitude').text(data.longitude);
$('.ip').text(data.ip);
$('.org').text(data.org);
$('.asn').text(data.asn);
});
});
</script>
I am trying to get minutes in drop down using javascript.
in JSfiddle it works however when I use it in my page it doesn't.
Here is my code.
<html>
<head>
<script src="js/jquery.js" ></script>
<script type="text\javascript">
function myFunction() {
var minutes = [],
select = document.getElementById( 'minutes' );
for( minutes=1;minutes<=59;minutes++ ) {
select.add( new Option(minutes) );
};
</script>
</head>
<body>
<p>
<select id="minutes"></select>
</p>
</body>
</html>
The slash direction is wrong. Should be text/javascript not text\javascript
Also move the contents of the function to the global scope.
You need to wrap the code in $(document.ready() like below:
Also, you need to call myFunction, which I don't see.
Additionally, modify <script type="text\javascript"> to <script type="text/javascript">
$(document).ready(function () {
function myFunction() {
var minutes = [],
select = document.getElementById('minutes');
for (minutes = 1; minutes <= 59; minutes++) {
select.add(new Option(minutes));
};
}
myFunction();//<---Call here
});
I have one test.html file with two <script> tags. I need to share a variable from one to another..
Sample code:
<script type="text/javascript">
var test = false;
function testing() {
test = true;
alert('I am inside..');
}
testing();
</script>
...
<script type="text/javascript">
if (test == true) {
alert('working');
} else {
alert('failed');
}
</script>
The output is always:
I am inside..
failed
I also tried to use the window class but it doesn't matter.. (window.test)
What I have to do to get the 'working' alert?
Thanks if anyone can help me. I saw some similar questions, but the answers wasn't a solution for me.
EDIT:
The original code (simplified):
<head>
...
<script type="text/javascript" src="detectblocker.js"></script>
<!-- GitHub: https://github.com/sitexw/BlockAdBlock/ -->
...
</head>
<body>
<script type="text/javascript">
var blocker = false;
function adBlockDetected() {
blocker = true;
alert('inside');
}
if(typeof blockAdBlock === 'undefined') {
adBlockDetected();
} else {
blockAdBlock.onDetected(adBlockDetected);
}
blockAdBlock.setOption({
checkOnLoad: true,
resetOnEnd: true
});
</script>
<div class="header">
...
</div>
<div class="content_body">
<div class="requirs">
<ul>
...
<script type="text/javascript">
if (blocker == true) {
document.write("<li>enabled!</li>")
} else {
document.write("<li>disabled!</li>")
}
</script>
...
</ul>
</div>
</div>
...
</body>
The output is an alert() "inside" and the <li> "disabled".. (Blocker is enabled..).
The only difference I can see is on the end of the first <script> tag:
blockAdBlock.setOption({
checkOnLoad: true,
resetOnEnd: true
});
So why the snippet is working and my code not? Confusing...
If you do not use var before a variable it becomes a global variable like
test = true;
The variable test will be true during the page and also in your next scripts and functions.
Try this:
<script type="text/javascript">
var test = false;
function testing() {
var test = true;
alert('I am inside..');
}
testing();
</script>
...
<script type="text/javascript">
if (test == true) {
alert('working');
} else {
alert('failed');
}
</script>
There are two ways of doing it.
1) create a hidden element and set your variable from your first script to attribute of that element.
This is your hidden element
<input type="hidden" id="hiddenVar"/>
and can set it in javascript as
document.getElementById("hiddenVar").setAttribute("myAttr",test)
Now you can get it in next script as
document.getElementById("hiddenVar").getAttribute("myAttr")
2) By .data() you can read about it here
I have a simple page with a "button/link" when i press the button i need to call the github api to return all issues logged in my repository and show in table format.
But when i hit the link nothing happends..
<html>
<head>
<script src="json-to-table.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="script.js"></script>
<script src="script.responsive.js"></script>
</head>
<body>
<h2>All Issues</h2>
VIEW
<div id="ghapidata" class="clearfix">
<script type="text/javascript">
$(function() {
$('#ghsubmitbtn').on('click', function(e) {
e.preventDefault();
$('#ghapidata').html('<div id="loader"><img src="css/loader.gif" alt="loader..."></div>');
var ghissues = 'https://api.github.com/repos/stroes/stroestest/issues';
requestJson(ghissues, function(json) {
if(json.message == "Not Found") {
$('#ghapidata').html("<h2>No Issues found in this repository</h2>");
}
else {
var jsonHtmlTable = ConvertJsonToTable(ghissues, 'jsonTable', null, 'Download');
}
}
}
});
</script>
</div>
</body>
</html>
Can anyone point me to where i have gone wrong with my code
your script is inside your div tag. When you change the html inside it, whole script will be removed. Try to place the script outside the div tag.
<html>
<head>
<script src="json-to-table.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="script.js"></script>
<script src="script.responsive.js"></script>
</head>
<body>
<h2>All Issues</h2>
VIEW
<div id="ghapidata" class="clearfix"></div>
<script type="text/javascript">
$(function() {
$('#ghsubmitbtn').on('click', function(e) {
e.preventDefault();
$('#ghapidata').html('<div id="loader"><img src="css/loader.gif" alt="loader..."></div>');
var ghissues = 'https://api.github.com/repos/stroes/stroestest/issues';
requestJson(ghissues, function(json) {
if(json.message == "Not Found") {
$('#ghapidata').html("<h2>No Issues found in this repository</h2>");
}
else {
var jsonHtmlTable = ConvertJsonToTable(ghissues, 'jsonTable', null, 'Download');
}
}
}
});
You should see errors in your console. You didn't close the functions right
$(function () {
$('#ghsubmitbtn').on('click', function (e) {
e.preventDefault();
$('#ghapidata').html('<div id="loader"><img src="css/loader.gif" alt="loader..."></div>');
var ghissues = 'https://api.github.com/repos/stroes/stroestest/issues';
requestJson(ghissues, function (json) {
if (json.message == "Not Found") {
$('#ghapidata').html("<h2>No Issues found in this repository</h2>");
} else {
var jsonHtmlTable = ConvertJsonToTable(ghissues, 'jsonTable', null, 'Download');
}
});
});
});
please look here again
var jsonHtmlTable = ConvertJsonToTable(ghissues, 'jsonTable', null, 'Download');
The second parameter requires id of your table you have no table with id jsonTable i think that is the problem
Is there a way to maintain the div scroll position on a postback, without using asp? So far I've only found solutions using asp.
http://blogs.x2line.com/al/articles/156.aspx
<!doctype html>
<html>
<head>
<title></title>
<script language="javascript">
// function saves scroll position
function fScroll(val)
{
var hidScroll = document.getElementById('hidScroll');
hidScroll.value = val.scrollTop;
}
// function moves scroll position to saved value
function fScrollMove(what)
{
var hidScroll = document.getElementById('hidScroll');
document.getElementById(what).scrollTop = hidScroll.value;
}
</script>
</head>
<body onload="fScrollMove('div_scroll');" onunload="document.forms(0).submit()";>
<form>
<input type="text" id="hidScroll" name="a"><br>
<div id="div_scroll" onscroll="fScroll(this);" style="overflow:auto;height:100px;width:100px;">
.. VERY LONG TEXT GOES HERE
</div>
</form>
</body>
</html>
Maybe this javascript code works for you
function loadScroll ()
{
var m = /[&?]qs\=(\d+)/.exec (document.location);
if (m != null)
myDiv.scrollTop = parseInt (m[1]);
}
function saveScroll ()
{
var form = document.getElementById ("myForm");
var sep = (form.action.indexOf ("?") == -1) ? "?" : "&";
form.action += sep + "qs=" + myDiv.scrollTop;
}
Now, you can watch for the "submit" event to save the position in the "action" attribute:
document.getElementById ("myForm").addEventListener ("submit", saveScroll, false);
And in your BODY tag...
<body onload="loadScroll ();">
....
</body>
I can't test the code right now, but I think you get the idea.