I've done this before and yet I'm stuck in this simple implementation.
Here's the html:
<html>
<head>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="jquery-1.9.0.js"></script>
</head>
<body>
<p id='hiding'>blah</p>
<p>blahblah</p>
</body>
</html>
And the javascript:
$(document).ready(function() {
$("p").click(function() {
$(this).hide();
});
});
The hide() doesn't work, and passing in the hiding id also doesn't work.
Change the order of script
<script type="text/javascript" src="jquery-1.9.0.js"></script>
<script type="text/javascript" src="script.js"></script>
Use .on, because it's allows for dynamically created Dom objects to be manipulated.
$(document).ready(function() {
$("p").on('click', function(){
$(this).hide();
});
});
that should to the job. :)
check this and arrange scripts file also
<script type="text/javascript" src="jquery-1.9.0.js"></script>
<script type="text/javascript" src="script.js"></script>
https://jsfiddle.net/s8191o77/
Related
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>
I'm using single-page-nav to have an 'animated' menu and Photoswipe for a photo gallery. The problem is I'm not able to have both work together. Now, if I have:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="js/simple-inheritance.min.js"></script>
<script type="text/javascript" src="js/code-photoswipe-jQuery-1.0.15.min.js"></script>
<script src="js/jquery.singlePageNav.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#gallery a").photoSwipe();
});
</script>
I've Photoswipe working, but not singlePageNav.. While doing:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/simple-inheritance.min.js"></script>
<script type="text/javascript" src="js/code-photoswipe-jQuery-1.0.15.min.js"></script>
<script src="js/jquery.singlePageNav.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#gallery a").photoSwipe();
});
</script>
I've singlePageNav working, but not Photoswipe. Tried with jQuery 1.11.1, but none of them working.. I've see that:
Can I use multiple versions of jQuery on the same page?
So I try:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
var jQuery_1_6_1 = $.noConflict(true);
</script>
<script type="text/javascript">
$(document).ready(function(){
jQuery_1_6_1("#gallery a").photoSwipe();
});
</script>
<script type="text/javascript" src="js/simple-inheritance.min.js"></script>
<script type="text/javascript" src="js/code-photoswipe-jQuery-1.0.15.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
var jQuery_1_7_1 = $.noConflict(true);
</script>
<script src="js/jquery.singlePageNav.min.js"></script>
but still no luck, none of them working.. Something else that I colud try, before looking for an alternative to Photoswipe?
Here is my HTML excerpt:
<html>
<head>
<script type="text/javascript" src="jquery.js">
</script>
<script type="text/javascript" src="alert_box.js">
</script>
<title></title>
</head>
<body>
<input type="button" id="name" value="click" >
</body>
</html>
Here's what's in my alert_box.js
$('#name').click(function(){
alert('alert box working');
});
Both JQuery and alert_box.js are imported
Based on the answers given, this should be solved. But I will summarize it. You may also want to just use a remote jquery script hosted somewhere else, which you can reference like so:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
Otherwise...
<html>
<head>
//make sure your path here is correct
<script type="text/javascript" src="jquery.js"></script>
//make sure your path here is correct
<script type="text/javascript" src="alert_box.js"></script>
<title></title>
</head>
<body>
<input type="button" id="name" value="click" >
</body>
</html>
alert_box.js
(function() {
$('#name').click(function() {
alert('alert box working');
});
});
When you call that, the DOM isn't yet ready therefore, there is no #name element which you're looking for. Wrap your code in DOM ready like this
$(document).ready(function() {
$('#name').click(function() {
alert('alert box working');
});
});
Or bring the <script src="alert_box.js"> before </body>
Learn about DOM Ready
Now, after EternalHour provided me with an external JQuery source, some of the functionality resumed to normal. However, this would not work and I have no idea why:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="alert_box.js"></script>
<script type="text/javascript">
if(window.jQuery){ <!--this is a small test I ran ti see if jquery is loaded/-->
alert('jquery functional');
}else{
alert('jquery not loaded');
}
</script>
</head>
<body>
<input type="button" value="submit">
</body>
</html>
Now back to alert_box.js ...
$(window).ready(function(){
$(':button').click(function(){
$(this).attr('value','loading...');
});
});
The button won't change value, what's causing this?
I wrote very samll code in jquery, but i am unable execute it Where i am wrong?
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js">
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
</body>
</html>
Any help will be greatly appriciated.
You forgot to close your script tag for jquery. It should be like this:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('p').click(function() {
$(this).hide();
});
});
</script>
Notice the closing </script> tag
You did not close the first script tag:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
You forgot to close script tag
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"> </script>
Close the script tag inside the head tag.
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
</body>
</html>
I'm trying to add two different javascript functions to my header:
1) is for a lightbox (see code below) and the
2) is for a local scroll (code below). When I place them both in my header tag, as seen below, one or the other will not work at all--depending on the order in which I place them the tag-- when I go to view my page.
Q: how can I get all these js. files to work when I view my page?
<script type="text/javascript" src="/lightbox2.04/js/prototype.js"></script>
<script type="text/javascript" src="/lightbox2.04/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/js/lightbox.js"></script>
\\\\and this one below////
<script type="text/javascript" src="/jquery-vertical-scroll/js/jquery.min.js"></script>
<script src="jquery-vertical-scroll/js/jquery.localscroll-min.js" type="text/javascript"></script>
<script src="jquery-vertical-scroll/js/jquery.scrollTo-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$.localScroll.defaults.axis = 'y';
$.localScroll();
});
</script>
You are using prototype w/ jQuery make sure you have jQuery.noConflict(); after your jquery framework script and prototype framework and before you run any main scripts. It is not recommended to use more than one JavaScript framework at the sametime.
<header>
<link rel="stylesheet" href="/lightbox2.04/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="/lightbox2.04/js/prototype.js"></script>
<script type="text/javascript" src="/lightbox2.04/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/jquery-vertical-scroll/js/jquery.min.js">
</script>
<script type="text/javascript">
jQuery.noConflict();
</script>
<script src="jquery-vertical-scroll/js/jquery.localscroll-min.js" type="text/javascript"></script>
<script src="jquery-vertical-scroll/js/jquery.scrollTo-min.js" type="text/javascript"></script>
<script type="text/javascript" src="/js/lightbox.js"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery.localScroll.defaults.axis = 'y';
jQuery.localScroll();
});
</script>
</header>
give this a try