This question already has answers here:
javascript <script> tag - code execution before src download
(4 answers)
Closed 8 years ago.
I'm quite new in JS and while trying to make a zoom in when mousing over an image, the javascript does absolutely nothing.
I'm trying the following script:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
$(function(){
$(".image").mouseover(function()
{
$(this).css("cursor","pointer");
$(this).animate({width: "500px"});
}
);
$(".image").mouseout(function()
{
$(this).animate({width: "250px"}, "slow");
}
);
});
</script>
The html in which I would like to apply it is:
<div id="main">
<div id="title">
<h1 class="fila1">RAINBOW BIDDING MONTHLY REPORT</h1>
</div>
<div id="img1" class="align">
<img class="imagen1" SRC="URL1" />
</div>
<div id="img2" class="align">
<img class="image" SRC="URL2" />
<img class="image" SRC="URL3" />
</div>
</div>
I have removed the images' URLs due to a business security issue.
Any help will be much appreciated!
You can't mix "internal" and "external" javascript within the same tag.
Replace...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
$(function(){
With...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script type="text/javascript">
$(function(){
Related
I am working on a very basic HTML page that has a little bit of Javascript functionalities. Nothing fancy, just some DOM manipulation. Everything was working fine and then all the scripts magically stopped working. Upon looking into firebug, it seems as though this script is working fine:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
These two references, however, don't seem to load up at all anymore:
<script src="/Bootsrap/bootstrap.js" type="text/javascript"></script>
<script src="custom.js" type="text/javascript"></script>
custom.js is in the root directory and the other is in a Bootstrap folder. Everything was fine yesterday until it wasn't and I can't get it to work again.
function betterWork(this) {
if(confirm("Is this your final selection?"))
{
// document.location = '#';
$("#myModal").modal("show");
}
}
function youCantDoThat() {
alert("That isn't a Pokemon ya doof.");
}
function tooDamnBad() {
var changeText = document.getElementById("textToChange");
var newText = document.getElementById("newText");
changeText.innerHTML = "Too Damn Bad!";
newText.innerHTML = "Pick One Anyways :)";
}
.imageSize {
width: 400px;
height: 400px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>JS Project</title>
<link rel="stylesheet" href="Bootstrap/bootstrap.css">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div class="col-lg-12">
<h1 class="text-center" id="textToChange">Pick A Starter Pokemon</h1>
<h3 id="newText" class="text-center"></h3>
</div>
<div class="col-lg-12">
<div id="img" onclick="betterWork()" class="imageSize col-lg-4">
<img class="imageSize" src="http://assets19.pokemon.com/assets/cms2/img/pokedex/full//001.png" />
</div>
<div id="img" onclick="betterWork()" class="imageSize col-lg-4">
<img class="imageSize" src="http://vignette3.wikia.nocookie.net/pokemon/images/1/13/007Squirtle_Pokemon_Mystery_Dungeon_Explorers_of_Sky.png/revision/latest?cb=20150105230449" />
</div>
<div id="img" onclick="betterWork()" class="imageSize col-lg-4">
<img class="imageSize" src="http://static.giantbomb.com/uploads/scale_small/0/6087/2438704-1202149925_t.png" />
</div>
<div id="img3" onmouseover="youCantDoThat()" class="imageSize col-lg-4">
<img class="imageSize" src="http://41.media.tumblr.com/c38fff03b8dd7aaf75037eb18619da57/tumblr_n436i3Falo1sndv3bo1_1280.png" />
</div>
<div id="img4" onclick="betterWork()" class="imageSize col-lg-4">
<img class="imageSize" src="http://assets.pokemon.com/assets/cms2/img/pokedex/full/010.png" />
</div>
<div id="img5" onclick="betterWork()" class="imageSize col-lg-4">
<img class="imageSize" src="http://vignette2.wikia.nocookie.net/camphalfbloodroleplay/images/7/77/Pikachu.png/revision/latest?cb=20141004224742" />
</div>
<br />
<div class="text-center">
<button type="button" class="btn btn-info btn-lg" onclick="tooDamnBad()">I Don't Like These Pokemon</button>
</div>
</div>
<footer></footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/Bootsrap/bootstrap.js" type="text/javascript"></script>
<script src="custom.js" type="text/javascript"></script>
</body>
</html>
Diagnosing why a script is not loading should begin with opening your console, looking at the resources tab, and determining whether and why the browser had an error loading the script.
Alternatively you can open the script from your browser directly and your webpage will notify you. For example, if your script is located at the path /Bootstrap/bootstrap.js and your host name is localhost, navigate to localhost/Bootstrap/boostrap.js.
Interpreting the results:
if the result is a 403 error it means that your webserver is not able to open this file. You will need to grant read access to your webserver.
if the result is a 404 error it means that the file is actually not at the path you specified. You will need to debug step by step and figure out why. An additional stack overflow question may resolve this if needed.
if the result is a different error, the meaning of it can be googled and you can comment and ask for additional clarification
I wanted to generate an alert box when user moves his mouse on the star image. I tried to check the errors but I am not able to find error.
<html>
<head>
<title>Testing</title>
<link rel="stylesheet" type="text/css" href="rating_style.css"/>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#1_star").hover(function() {
alert("hello");
});
});
</script>
</head>
<body>
<center>
<div class="rating-container">
<div class="rating-star">
<img src="sta.png" width="50" id="1_star" />
<img src="sta.png" width="50" id="2_star" />
<img src="sta.png" width="50" id="3_star" />
<img src="sta.png" width="50" id="4_star" />
<img src="sta.png" width="50" id="5_star" />
</div>
</div>
</center>
</body>
</html>
you should include jquery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#1_star").hover(function() {
alert("hello");
});
});
</script>
Working Example
Note: This code will work .. but please searching for how to include
jquery or how to install jquery because there are different ways to do
that
Since you don't need both a mouse in and a mouse out (that is what hover is really for), you might want to use .mouseover() instead.
you can use this method :
<div onmousemove="alert('hello')">
<p>onmousemove: <br> <span id="demo">Your Text</span></p>
</div>
It may be very silly question, I am new in javascript ,I Making a gallery using http://photoswipe.com/ js library ,I download js library from official site , I used given example index.html page
Normal working fine. But my problem when I append div $('.gallery-row').append('<div class="gallery-item"><img src="images/thumb/003.jpg" alt="Image 003" /></div>'); on <div class="gallery-row"></div> using jquery append method from load function.
My problem : image show but when I click on the image then it not open with swipe div .
I waste my whole day but didn't get anything.
my code:
<!DOCTYPE html>
<html>
<head>
<title>PhotoSwipe</title>
<meta name="author" content="Code Computerlove - http://www.codecomputerlove.com/" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<link href="styles.css" type="text/css" rel="stylesheet" />
<link href="photoswipe.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="lib/simple-inheritance.min.js"></script>
<script type="text/javascript" src="code-photoswipe-1.0.11.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
// Set up PhotoSwipe with all anchor tags in the Gallery container
document.addEventListener('DOMContentLoaded', function(){
Code.photoSwipe('a', '#Gallery');
}, false);
function load(){
//append div from this function
$('.gallery-row').append('<div class="gallery-item"><img src="images/thumb/003.jpg" alt="Image 003" /></div>');
}
</script>
</head>
<body onLoad="load()">
<div id="Header">
<img src="images/codecomputerlovelogo.gif" width="230" height="48" alt="Code Computerlove" />
</div>
<div id="MainContent">
<div class="page-content">
<h1>PhotoSwipe</h1>
</div>
<div id="Gallery">
<div class="gallery-row">
<!--
<div class="gallery-item"><img src="images/thumb/001.jpg" alt="Image 001" /></div>
<div class="gallery-item"><img src="images/thumb/002.jpg" alt="Image 002" /></div>
<div class="gallery-item"><img src="images/thumb/003.jpg" alt="Image 003" /></div>
-->
</div>
</div>
</div>
</body>
</html>
Try doing the append in the DOMContentLoaded handler, before you call Code.photoSwipe. Also, jQuery provides a shorter way to write this:
<script>
$(function() {
$('.gallery-row').append('<div class="gallery-item"><img src="images/thumb/003.jpg" alt="Image 003" /></div>');
Code.photoSwipe('a', '#Gallery');
});
</script>
When you do this, remove onload="load()" from your <body> tag.
Perhaps it's the extra space in the href for your a tag? Try changing "images/full /003.jpg" to "images/full/003.jpg"
I guess, you need to do this :
document.addEventListener('DOMContentLoaded', function(){
Code.photoSwipe('a', '#Gallery');
}, false);
After the append
After some Test, DOMContentLoaded is fired before onload
I'm setting up orbit according to this guide and for some reason it is not working at all. I'm sure its something incredibly simple being that there are only like 2 steps to follow, but I'm really not seeing it and could use a second set of eyes. Let me know if you see what the issue is, thanks!
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.orbit.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/orbit.css">
<script type="text/javascript">
$(window).load(function() {
$('#featured').orbit();
});
</script>
<div id="featured">
<img src="1.jpg" alt="Overflow: Hidden No More" />
<img src="2.jpg" alt="HTML Captions" />
<img src="3.jpg" alt="and more features" />
</div>
Check your paths to jQuery and orbit JS files are correct and loading.
Try using $(document).ready();
<div id="featured">
<img src="1.jpg" alt="Overflow: Hidden No More" />
<img src="2.jpg" alt="HTML Captions" />
<img src="3.jpg" alt="and more features" />
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#featured').orbit();
});
</script>
I have 3 button-images in one page, such that when you press 1, it should show the iFrame related to it, and hide the others. I just started learning about webdev, and I've browsed online, but i can't seem to make it work. :o
Here's my code:
<div id="tabs">
<div id="overview">
Overviews
</div>
<div id="gallery">
Gallery
</div>
</span>
<div id="reviews">
Reviews
</div>
</div>
Each wrapper# is the id of a div that contains the iFrame. The divs contained in the tabs div above are button-images.
How can I show 1 frame 1st, then when the other button-image is clicked, that iFrame will hide, and the iFrame corresponding to the button clicked will be the only 1 showing?
Thank you so much in advance!! :)
P.S. you can check out my website www.giroapps.com to get a better picture of what i'm trying to achieve. :)
There is a neat solution for you: http://www.stilbuero.de/jquery/tabs_3/
Quick example:
<head>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#tabs").tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><span>One</span></li>
<li><span>Two</span></li>
<li><span>Three</span></li>
</ul>
<div id="fragment-1">
<iframe>IFrame1</iframe>
</div>
<div id="fragment-2">
<iframe>IFrame2</iframe>
</div>
<div id="fragment-3">
<iframe>IFrame3</iframe>
</div>
</div>
</body>
Update
In regards of your application:
<SCRIPT type="text/javascript">
$(document).ready(function(){
$("#tabs a").click( function() {
$("#tabs-1").load(this.href);
return false ;
} ) ;
$("#tabs a:first").click() ;
});
</SCRIPT>
<DIV id="tabs">
<DIV id="overview">
<A class="imagelink lookA" href="./toframe.html">Overviews</A>
</DIV>
<DIV id="gallery">
<A class="imagelink lookA" href="./tawagpinoygallery.html">Gallery</A>
</DIV>
<DIV id="reviews">
<A class="imagelink lookA" href="./trframe.html">Reviews</A>
</DIV>
</DIV>
<div id="tabs-1"></div>