I am trying to transition-in a new page using ajax and everything is working fine except that the CSS transition is not animating correctly. More specifically, I have an <a> element that when clicked fires an ajax POST request to my server. The server sends back an HTML file that is appended to the body of my document using jQuery's .done() deferred object method. However, when I add the CSS class to the new HTML that will make it transition into the browser viewport the style changes are applied instantly rather than being animated. If I execute .addClass() after a 1ms timeout the animation executes correctly. I assume the problem has something to do with the DOM not being fully finalized by the time my class is added, but I haven't been able to fix it without using .setTimeout(). While this is a simple-enough fix, it doesn't seem very robust, and it still means that there is something I don't understand about the process. Any tips are definitely appreciated.
Here are the relevant bits of code:
index.html
<!DOCTYPE html>
<html>
<head>
<title>Intercepting Link Clicks</title>
<link rel="stylesheet" type="text/css" href="app.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div id = 'firstScene'>
<a href="/server/" id = 'serverRequestLink'>Get Stuff From The Server</a>
</div>
app.js
$(document).ready(app);
function app () {
$('#serverRequestLink').on('click', getServerStuff);
};
function getServerStuff (e) {
e.preventDefault();
$.ajax({
method: 'POST',
url: 'ajaxTest',
}).done(function(secondSceneHTML){
$('body').append(secondSceneHTML);
$('#secondScene').addClass('visible');
});
};
secondScene.html
<div id = 'secondScene'>
<p>I'm the second scene.</p>
</div>
app.css
#secondScene {
background-color: blue;
position: fixed;
top: 0;
bottom: 0;
left:200px;
right: 0;
transition: all 1s;
}
#secondScene.visible {
top: 0; right: 0; bottom: 0; left: 0;
}
Related
I am receiving the error '$ is undefined' from the first selector of js file.
I have added JQuery reference as a local file or google CDN. Also I have tried to put it at the beginning and end of the HTML file.Have also checked the network part of the console to check if the JQuery is loading correctly.but seems it does not recognize the $. Have also tried to putthe whole JS file in $(document).ready(function () )
The function works correctly but I am still receiving the error.
I have tried that with different browsers and different systems.
$(document).ready(function () {
var currentIndex = 0;
var itemAmt;
function cycleItems() {
var item = $('.imageContainer div').eq(currentIndex);
$('.imageContainer div').hide();
item.css('display', 'inline-block');
}
var autoSlide = setInterval(function () {
currentIndex += 1;
if (currentIndex > $('.imageContainer div').length - 1) {
currentIndex = 0;
}
cycleItems();
}, 3000);
$('.next').click(function () {
clearInterval(autoSlide);
currentIndex += 1;
if (currentIndex > $('.imageContainer div').length - 1) {
currentIndex = 0;
}
cycleItems();
});
$('.prev').click(function () {
clearInterval(autoSlide);
currentIndex -= 1;
if (currentIndex < 0) {
currentIndex = $('.imageContainer div').length - 1;
}
cycleItems();
});
});
.imageContainer {
max-width: 400px;
background-color: black;
margin: 0 auto;
text-align: center;
position: relative;
}
.imageContainer div {
background-color: white;
width: 100%;
display: inline-block;
display: none;
}
.imageContainer img {
width: 100%;
height: auto;
}
.next {
right: 5px;
position: absolute;
}
.prev {
left: 5px;
position: absolute;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<link href="HomeStyle.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../HomePage/Slider.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="../HomePage/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="../HomePage/jquery.min.js"></script>
<script type="text/javascript" src="../HomePage/jquery-latest.js"></script>
<title>Home!</title>
</head>
<body>
<div id="gallery">
<section class="slider">
<button class="next">Next</button>
<button class="prev">Previous</button>
<div class="imageContainer">
<div style="display: inline-block;">
<img src="http://placeimg.com/400/200/people" />
</div>
<div>
<img src="http://placeimg.com/400/200/animals" />
</div>
<div>
<img src="http://placeimg.com/400/200/people" />
</div>
<div>
<img src="http://placeimg.com/400/200/tech" />
</div>
</div>
</section>
</div>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="../HomePage/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="../HomePage/jquery.min.js"></script>
<script type="text/javascript" src="../HomePage/jquery-latest.js"></script>
</body>
</html>
How can I make it working error free?
Javascript files load in the order that they are added to the page. The first javascript file you've added is ../Homepage/slider.js and I'm guessing that it uses jQuery to do whatever it does. This means it's referencing $ at some point. But wait: jQuery hasn't been loaded yet! This causes the error you saw, because the browser might have started downloading jQuery already, but won't execute it until any preceding scripts are finished.
If you move jQuery to the top (and you probably only need to include it once, rather than 4 times at the top and 4 times at the bottom), this should fix your problem.
Better yet, move all of your script declarations to the bottom of the page, which means they won't block the rest of the page from rendering.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
...
</head>
<body>
...
<script type="text/javascript" src="../HomePage/jquery.min.js"></script>
<script type="text/javascript" src="../HomePage/Slider.js"></script>
</body>
</html>
You could also use something like requireJS to ensure the load order of scripts, but that is an advanced topic well beyond the scope of what you're doing here.
You must add the jquery library only once. Since your jquery code is inside $(document).ready(function(){ and }), you can can add it anywhere on your html code, but before any library which use jquery (maybe your slider.js does)
jquery should be included before all other scripts depending on it...
I suppose this is the issue causing $ is undefined error...
I have looked practically everywhere online and have done quite a bit of experimenting of my own, but can't seem to get the same result in Dreamweaver that is present in the JSFiddle result.
Is there a relatively simple way to make a webpage of a site that is identical to the JSFiddle result (and how is it possible to do that)?
I think your problem is that jsFiddle hides certain things that are required in order for the code to work, most importantly in this case is the reference to jquery, jsfiddle will put that in for you behind the scenes but if you take your code out of jsfiddle and don't reference jquery as I have then the code is useless. Also things like <style> tags around your css, although not need in jsfiddle, are needed when pasting the code into something like dreamweaver.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body {
margin: 0;
padding: 0;
}
#turtle img {
display: block;
margin: 0 auto;
}
</style>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$(function () {
var img = $('#turtle').html();
for (var i = 0; i < 10; i++) {
more(img);
}
$(window).on('scroll', function () {
if ($(this).scrollTop() >= $('#turtle').height() - $(this).height()) {
more(img);
}
});
function more(content) {
$('#turtle').append(content);
}
});
</script>
</head>
<body>
<div id="turtle">
<img src="http://upload.wikimedia.org/wikipedia/en/9/9b/Rickastleyposter.jpg" alt="infinity-turtle" />
</div>
</body>
</html>
I'm new to html, just started doing it at school, and I'm trying to make this website just to test a few things. For some reason, it only works on JSFiddle. I am just trying to make the button glow on click. Here is the code:
<!DOCTYPE html>
<head>
<style media="screen" type="text/css">
img {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
div#info_box {
height: 221px;
width: 221px;
}
</style>
<title>Test</title>
</head>
<body background="http://fc07.deviantart.net/fs70/f/2014/113/f/b/rain_by_matt74997-d7fn2e1.gif">
<div id="trigger">
<img src="http://i.imgur.com/8QLgeGP.png" onmouseover="this.src='http://i.imgur.com/BmjwX9A.png'" onmouseout="this.src='http://i.imgur.com/8QLgeGP.png'" />
</div>
<div id="info_box" style="display:none">
<img src="http://i.imgur.com/b3Holdt.png" alt="glow" height="221" width="221">
<span class="custom info">
</span>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('div#trigger').click(function() {
//Get info_box
var info = $('div#info_box');
//Fade the box in during 1 sec, show it for 5, and let it fade out again
info.fadeIn(1000).delay(10).fadeOut(1000);
});
});
</script>
I tried using google chrome, internet explorer, looking through other answers, but I'm still not sure how to get it to work.
Google chrome says Uncaught Reference Error: $ is not defined
but I'm not sure what to do with that.
If more information could help please ask which and I'll put it up.
Please include Jquery to the top of the scripts as many plugin use it.
http://jquery.com/download/
Add this link to <head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
You need jquery reference when using $
I have anchors on a page that displays a different background image on mouse hover and mouse out. I have preloaded the images to avoid flickering and re-requesting the images from the server on mouse hover/out. The scripts works fine on IE8/FF but Chrome behaves differently. In the latest version of Chrome, the first time I hover on the anchor, the image is re-requested from the server causing a flicker, why is this? Succeeding mouse hover/out works fine and there is no flicker.
Code below:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<style type="text/css">
body:after
{
content: url('/images/1.png') url('/images/1a.png')
position: absolute;
top: -9999px;
left: -9999px;
}
.imageHover
{
display:inherit;
width:25px;
height:50px;
background:url('/images/1.png') no-repeat;
}
.imageOut
{
display:inherit;
width:25px;
height:50px;
background:url('/images/1a.png') no-repeat;
}
</style>
<script language="javascript" type="text/javascript">
var oneSelected = new Image();
var oneUnselected = new Image();
oneSelected.src="/images/1.png";
oneUnselected.src="/images/1a.png";
function OnImageMouseOver(target) {
$(target).toggleClass('imageHover', true);
$(target).toggleClass('imageOut', false);
}
function OnImageMouseOut(target) {
$(target).toggleClass('imageHover', false);
$(target).toggleClass('imageOut', true);
}
</script>
</head>
<body>
</body>
</html>
Converted anchor to image, but it still won't work in Chrome:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script language="javascript" type="text/javascript">
if (document.images) {
var oneSelected = new Image();
var oneUnselected = new Image();
oneUnselected.src = '/images/1a.png';
oneSelected.src = '/images/1.png';
}
function OnRatingMouseOver(target, newSrc) {
$(target).attr('src', newSrc);
}
function OnRatingMouseOut(target, newSrc) {
$(target).attr('src', newSrc);
}
</script>
</head>
<body>
<div id="mainDiv" style="width:400px;">
<div id="inputDiv">
<table id="inputTable">
<tr>
<td>Rating</td>
<td>
<img id='rating1Anchor'
src='/images/1a.png'
onmouseover="OnRatingMouseOver(this, '/images/1.png');"
onmouseout="OnRatingMouseOut(this, '/images/1a.png');"
onclick="OnRatingClick(this, '/images/1.png', 1);">
</td>
</tr>
</table>
</div>
</div>
</body>
<html>
It may not be preloading them at all, as it's not displaying them it's just adding to the DOM? Try the following code to preload your images.
var preload = new Array();
function preload_image(){
for (var x = 0; x < preload_image.arguments.length; x++)
{
preload[x] = new Image();
preload[x].src = preload_image.arguments[x];
}
}
I have to say I very much doubt that the pngs are actually being rerequested from the server in Chrome. Can you post a screenshot of the Timeline in dev Tools showing the request going off twice? :) I think it's far more likely that you're just experiencing a slight hesitation during the repaint.
Is there a reason you aren't using image sprites? They are the canonical solution to this problem. The idea is simply that a single image is loaded that contains both the normal and "hover" or "active" states. The portion of the graphic shown gets swapped out using css "background-position". Here's a tutorial, and here's a table of support for "background-position" which goes all the way back to IE4.
Code should look something like this:
<html>
<head>
<style>
#myCoolLink {
background-image:url('img/image.gif');
background-position:0px 0px;
}
#myCoolLink:hover,
#myCoolLink.active {
background-position:0px -72px; //depending of course on the image
}
</style>
</head>
<body>
</body>
</html>
No script required, and it's much terser. The other great advantage of this is that you can still programmatically change the image over to the "hover" anytime you want by toggling the "active" class on the link, if you ever need to.
I'm trying to activate a CSS transition with Javascript through DOM when a div object is clicked. I avoided jQuery and used JS on purpose in order to learn DOM (this is actually my first experiment with it).
I implemented a standard solution: getting the elements' ListNode from the HTML document, then changing the className of the desired object. Yet, it does not seem to work properly
(I'm obviously using Firefox).
Thank you in advance.
Here are the files.
<!doctype html>
<html>
<head>
<link rel = stylesheet href = "style.css" type = "text/css" media = screen>
<script src = "script.js" type = "text/javascript"></script>
</head>
<body>
<div class = "image" onclick = "foo()"></div>
</body>
</html>
style.css
.transition {
-moz-transition: 2s width;
width: 150px;
height: 100px;
}
.image {
-moz-transition: 2s width;
width: 100px;
height: 100px;
background-color: black;
}
script.js
function foo() {
var k = document.getElementsByClassName("image");
k[0].className = "transition";
}
EDIT: Edited the code in order to make immediately visible the working solution.
You're using getElementsByName, but you don't have an element with a name of image, instead you have an element with a class of image. You probably intended to use document.getElementsByClassName('image'). On a side note, the structure of your html page is incomplete, you need a <head> and <body> section, also your <html> opening tag is in the wrong place.
<!doctype html>
<html>
<head>
<link rel = stylesheet href = "style.css" type = "text/css" media = screen>
<script src = "script.js" type = "text/javascript"></script>
</head>
<body>
<div class = "image" onclick = "foo()"></div>
</body>
</html>
Try this in your javascript logic:
function foo() {
var k = document.getElementsByClassName("image");
k[0].className = "transition";
}
As Stencil mentioned everything should be inside HTML Tag.Similar kind of width animation could be easily achieved using jQUery
$('.image').animate({width: 250}, 500 );