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
Related
function init(){
th=document.getElementById('divId').getElementsByTagName('img');
for(c=0;c<th.length;c++) {
th[c].onclick=function() {
swapImage(this.src);
}
}
}
function swapImage(url){
str=url.lastIndexOf(".");
str1=url.substring(str-1);
str2=url.substring(str);
url=url.replace(str1,str2);
document.getElementById('mainImage').src=url;
}
window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);
I'm mainly new to JS here, my main issue is specifically the JS section please help, I've been going at this for 4 days now. What the code should do is display a top image, and 5 thumbnails at the bottom. When clicked the thumbnails should display on to by switching with the current image.
Here is the HTML section of the code:
<html>
<head>
<link href='gallery.css' type="text/css" rel ='stylesheet'/>
<title>Gallery</title>
</head>
<body>
<img id="mainImage" src="Images/alphamon.jpg"/>
<br />
<div align='center' id="divId" >
<img class="imgStyle" src="Images/alphamon.jpg" />
<img class="imgStyle" src="Images/gallantmon.jpg" />
<img class="imgStyle" src="Images/omnimon.jpg" />
<img class="imgStyle" src="Images/omnimon_2.jpg" />
<img class="imgStyle" src="Images/royal_knights.jpg" />
</div>
<script type='text/javascript' src='gallery.js'></script>
</body>
</html>
Everything is much easier.
function swapImage(url){
/* no need this code
str=url.lastIndexOf(".");
str1=url.substring(str-1);
str2=url.substring(str);
url=url.replace(str1,str2);
*/
document.getElementById('mainImage').src=url;
}
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>
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 one main page with menu buttons. When clicked, they change the main "content" area with AJAX. In the header of this page I have all of the appropriate Dojo references.
I know the AJAX works because i have successfully pulled in and displayed data in the content area, and I know the Dojo Dijit TimeTextBox works because I have successfully displayed it before I make any calls with AJAX.
When I try to make a call with AJAX and pull in new input fields for the TimeTextBox widget, they display only as regular text boxes, and seem to ignore the fact that I have them set to be the TimeTextBox.
Can anyone tell me how to fix this issue?
EDIT:
Here is the code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Admin Page</title>
<link rel="stylesheet" type="text/css" href="styles/adminPage.css" />
<link rel="stylesheet" type="text/css" href="styles/adminStyle.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/resources/dojo.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dijit/themes/claro/claro.css">
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js"
djConfig="parseOnLoad:true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.TimeTextBox");
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
require(["dojo/ready", "dijit/form/TimeTextBox"],
function(ready, TimeTextBox){
ready(function(){
new TimeTextBox({name: "timeInput", value: new Date(),
constraints: {
timePattern: 'HH:mm:ss',
clickableIncrement: 'T00:15:00',
visibleIncrement: 'T00:15:00',
visibleRange: 'T01:00:00'
}
}, "timeInput");
});
});
function getPage(page)
{
$.ajax({
url: "admin"+page+".php",
type: "POST",
cache: false,
success: function (html) {
$('#content').html(html);
$('#content').fadeIn('slow');
}
});
}
</script>
</head>
<body class="claro">
<div id="container">
<div id="header">
<span class="headerTitle">Lehman Nursery</span>
</div>
<div id="content">
<input type='text' name='date1' id='time1' value='T15:00:00'
data-dojo-type='dijit.form.TimeTextBox'
required='true' />
</div>
<div id="menu">
<a onclick="getPage('Home')">
<div id="homeButton" class="menuAppearance">
<img src="images/icons/home.png"/><br />
</div>
</a>
<a onclick="getPage('Links')">
<div class="button menuAppearance">
<div class="menuTitle"><img src="images/icons/links.png"/><br />Links</div>
<div class="description">
</div>
</div>
</a>
<a onclick="getPage('Hours')">
<div class="button menuAppearance">
<div class="menuTitle"><img src="images/icons/pictures.png"/><br />Pictures</div>
<div class="description">
</div>
</div>
</a>
<a onclick=getPage('Events')>
<div class="button menuAppearance">
<div class="menuTitle"><img src="images/icons/events.png"/><br />Events</div>
<div class="description">
</div>
</div>
</a>
<a onclick=getPage('Feedback')>
<div class="button menuAppearance">
<div class="menuTitle"><img src="images/icons/feedback.png"/><br />Feedback</div>
<div class="description">
</div>
</div>
</a>
</div>
</div>
</body>
<form>
<input type="text" name="date1" id="time1" value="T15:00:00"
data-dojo-type="dijit/form/TimeTextBox"
onChange="require(['dojo/dom'], function(dom){dom.byId('val').value=dom.byId('time1').value.toString().replace(/.*1970\s(\S+).*/,'T$1')})"
required="true" /></form>
^^That is the data being pulled in
Are the css files for those dijits pulled up? You might want to require them at the beginning (when the page loads) which get cached and will be used when the dijits are pulled via AJAX.
EDIT: Not sure but can suggest you try to add startup() call for the widget you created.
it apears to me like you are forgoetting to call:
dojo.parser.parse();
after setting the content i your ajax call. it should look like this:
function getPage(page)
{
$.ajax({
url: "admin"+page+".php",
type: "POST",
cache: false,
success: function (html) {
$('#content').html(html);
dojo.parser.parse();
$('#content').fadeIn('slow');
}
});
}
the dojo parser will not execute by itself, it is too resourses expensive to do that, so each time the content changes so you add a dijit you moust call dojo.parser.parse();