I'm having some slight problems with fading one div into another, here's my code (and test page):
HTML:
<div id="grid">
<div class="grid-box">
<div class="phase-1">
<img class="grid-image" src="http://teamworksdesign.com/v2/wp-content/themes/default/images/dtr.jpg" alt="" height="152" width="210" />
<div class="grid-heading">
<h2>DTR Medical</h2>
<h3>Branding, Web, Print</h3>
</div>
</div>
<div class="phase-2">
<div class="grid-info">
<h4>Probeything 2000</h4>
<p>Marketing unglamorous single-use medical intruments is not simple. We helped Neurosign increasetheir sales by 25% and increasemarket awareness.</p>
</div>
<div class="grid-heading-hover">
<h2>DTR Medical</h2>
<h3>Branding, Web, Print</h3>
</div>
</div>
</div>
</div>
Javascript:
<script type="text/javascript">
$(document).ready(function(){
$(".phase-2").hide();
});
$(function(){
$('.grid-box').hover(
function(){
$('.grid-box .phase-1').fadeOut(200, function(){
$('.grid-box .phase-2').fadeIn(200);
});
},
function(){
$('.grid-box .phase-2').fadeOut(200, function(){
$('.grid-box .phase-1').fadeIn(200);
});
}
);
});
</script>
CSS:
.phase-1 .grid-image {
width:210px;
height:220px;
overflow:hidden;
}
.phase-2 {
position:relative;
top:-220px;
}
UPDATE:
I have one "working" (see test link in question). Is it possible to stop it fading to white then fading in the next phase? I want to fade the two div into each other rather than to white first.
If you type $ on the console, it answer undefined, so it probably was redefined by some other script. To use $ meaning jQuery again, use the following syntax
$(document).ready(function($) {
// $ means jQuery again in here
});
Notice the $ as the first argument of the function call.
Documentation here.
Related
I saw this post and I tried to replicate the code: Stop a gif animation onload, on mouseover start the activation. I can't seem to get it to work though. My goal is to swap the image with a gif on hover. Does someone know why the image isn't swapping?
$(document).ready(function() {
$("#imgAnimate").hover(
function() {
$(this).attr("src", "images/portfolio/form.gif");
},
function() {
$(this).attr("src", "images/portfolio/form.jpg");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="large-12 medium-12 small-12 columns portfolio-pic animated slideInUp">
<div data-content="Project 1" class="image">
<a class="a-block" href="#">
<img id="imgAnimate" src="images/portfolio/form.jpg">
</a>
</div>
</div>
</div>
Here is a live link to my example: http://fosterinnovationculture.com/dcc/index.html
From what your page is saying jQuery is undefined. So either you are trying to execute jquery code before jquery is executed.
I executed this code on your site just to testing things out and it seems to be working
function mousein () {
$(this).attr("src", "images/portfolio/form.gif");
console.log('hello')
}
function mouseout () {
$(this).attr("src", "images/portfolio/form.jpg");
}
console.log($('#imgAnimate').hover(mousein, mouseout));
I did notice though that because of some styling issues the hover was never actually hitting the img it was actually hitting the .image:after css psuedo selector so you need to reorganize your html or change the way you select the element you want to switch the src of.
just to test in your html move the image outside of
<div class="image">image</div>
Yes its correct as told by #madalin ivascu, you need to add jquery at header and it will work.
Like this,
HTML
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#imgAnimate").hover(
function() {
$(this).attr("src", "banana.gif");
},
function() {
$(this).attr("src", "banana.png");
});
});
</script>
</head>
<body>
/* include your html part here */
<a class="a-block" href="#">
<img id="imgAnimate" src="banana.png" alt="">
</a>
</body>
Try this, Instead of using hover, try that using mouseenter and mouseleave.
$(document).ready(function(){
$(".row").find('img').mouseenter(function(){
if($("#imgAnimate").attr('src','form.jpg')){
$("#imgAnimate").attr('src','form.gif');
}
$(this).mouseleave(function(){
if($("#imgAnimate").attr('src','form.gif')){
$("#imgAnimate").attr('src','form.jpg');
}
});
});
});
I am not sure my problem is titles says but When I change the Display: None element to Display: Block, divs not rendering I think. JS files not overwriting the divs. And images not displaying. But when I use the visibility:hidden and visibility: visible feature its works fine. Here my files;
<div id="gnc2"class="row">
<div class="col s3 offset-s1">
<div class="thumbnail">
<img src="galeri/gizemler/1.jpg" alt="Gizemler">
<div class="caption">
<h5 class="center-align">Gizemler</h5>
<p class="center-align">Serideki mitler, gizemler</p>
<p class="center-align"><a id="nbg2" class="waves-effect waves-light btn">Ateşle</a></p>
</div>
</div>
</div>
</div>
<div id="nbg1">
<div class="main-gallery js-flickity" data-flickity-options='{ "cellAlign": "left", "contain": true, "prevNextButtons": false, "pageDots": false }'>
<img src="galeri/gizemler/1.jpg" />
<img src="galeri/gizemler/2.jpg" />
<img src="galeri/gizemler/3.jpg" />
</div>
</div>
And my script;
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript" src="js/flickity.pkgd.min.js"></script>
<script type="text/javascript">
$('#nbg2').click(function() {
$("#gnc2").css("display","none");
$("#nbg1").css("display","block");
});
</script>
CSS;
#nbg1 {
display: none;
}
First, you should really put your jQuery code between this :
$(document).ready(function() {
$('#nbg2').click(function() {
$("#gnc2").css("display","none");
$("#nbg1").css("display","block");
});
}
This way you make sure the whole page is properly loaded before applying javascript.
Then, i don't know what your flickity library do exactly but if it plays with your #nbg1 width and height values it may have trouble redefining them if the content of this div is not displayed at all (display: none). If you're forced to use this library while it has no callback method, i suggest you give this trick a try :
In your CSS :
#nbg1 {
visibility: hidden;
}
In your JS :
$(document).ready(function() {
setTimeout(function(){
$("#nbg1").css("visibility","visible");
$("#nbg1").hide();
$('#nbg2').click(function() {
$("#gnc2").hide();
$("#nbg1").show();
});
}, 200);
});
You can use this and play with the delay value (here 200). If your flickity library has some "job done" callback method, i suggest you use this one instead of the timeout trick i wrote here.
Hope it helped.
I have read probably 50 articles that say how to hide or show div's depend on a click action. However, I have tried almost every approach and my div's do not hide or show. Seems likely I am missing something very basic.
<script>
$(document).ready(function(){
$('buynav').on('click',function(){
document.getElementById('buycontent').style.display = 'block';
document.getElementById('sellcontent').style.display = 'none';
});
$('sellnav').on('click',function(){
document.getElementById('buycontent').style.display = 'none';
document.getElementById('sellcontent').style.display = 'block';
});
});
</script>
<div id="contentContainer">
<div id="documentSpace" style="left: 50%; top: 50px">
<div id="headerPhoto" style="position:absolute;left:2.5%;width:95%; height:200px; background-image:url('../images/jpgHeader4.jpg'); background-size:cover;background-position:center; background-repeat:no-repeat;border-radius:9px; margin-top:17px;">
</div>
<div id="secondNav" style="position:absolute;left:2.5%;width:95%;height:75px;top:250px;text-align:center;vertical-align:middle;">
<div id="buynav" class="buynav"><h2>Buy</h2></div>
<div id="sellnav" class="sellnav"><h2>Sell</h2></div>
</div>
<div id="sellcontent" style="position:absolute;left:2.5%;width:95%;height:100%;top:350px;display:none;">
</div>
<div id="buycontent" style="position:absolute;left:2.5%;width:95%;height:100%;top:350px;display:block">
</div>
</div>
</div>
Use jQuerys show() and hide() as such:
<script>
$(document).ready(function(){
$('#buynav').on('click',function(){
$('#buynav').show();
$('#sellnav').hide();
});
$('#sellnav').on('click',function(){
$('#buynav').hide();
$('#sellnav').show();
});
});
</script>
Another option is to use jQuery's toggle(), but it requires you to have hidden one element before using it.
<script>
$(document).ready(function(){
$('#buynav').on('click',function(){
$('#buynav').toggle();
$('#sellnav').toggle();
});
$('#sellnav').on('click',function(){
$('#buynav').toggle();
$('#sellnav').toggle();
});
});
</script>
Also I added # in the $('#buynav') and other JS selectors. And, as #mdesdev, pointed out you can replace the document.getElementById('buycontent') with $('#buynav') and $('#sellnav') as they seem to "exist" within your jQuery scope.
I think you have forget to put # for your id.
$('#buynav, #sellnav').on('click',function(){
$('#buycontent').toggle();
$('#sellcontent').toggle();
});
Hope it works
Basically I am trying to make a minimize/maximize div with jquery animation. I have a wrapper div named leftFilterBox. In leftFilterBox, there is another div to wrap all the contents named filterContent. So when I minimized the window, the filterContent should be collapse and the leftFilterBox will be shifted down at the same time when filterContent is collapse with jquery animation. Same goes to maximize. Here is my html code:
<div id='leftFilterBox'>
<div style='background: linear-gradient(#848484, #2E2E2E);color: white;line-height:2.2em;padding-left:5%;width:auto;font-weight:bold;'>Traffic Conditions
<div id='filterWindowNav'><img class='minMaxFilterBox' src='img/minimizeFilterWindow.png' onClick='minimizeFilterWindow();' />
<img class='minMaxFilterBox' src='img/maximizeFilterWindow.png' onClick='maximizeFilterWindow();' />
<img class='closeFilterBox' onclick='closeLeftFilterBox();' alt='close' src='img/closeFilterWindow.png' /></div></div><br/>
<div id='filterContent'><span class='getLiveTrafficTitle'><center>Select date</center></span><hr width='85%'></div>
</div>
And my CSS:
#filterWindowNav {
float:right;
}
.minMaxFilterBox, .closeFilterBox {
width: 28px;
height: 28px;
cursor: pointer;
}
And my JavaScript:
function minimizeFilterWindow() {
$('#leftFilterBox').css('height', '25px');
$('#leftFilterBox').css('top', '90%');
}
function maximizeFilterWindow() {
$('#leftFilterBox').css('height', '65%');
$('#leftFilterBox').css('top', '30%');
}
Here is my jsFiddle link: Fiddle
Currently, my code is just collapsing the filterWindow by setting specific some css such as height and top. I wonder is it possible to use some jquery animation like slideUp() or slideDown() for enhcnacement because I tried it, but it does not work.
Thanks in advance.
Hmm, I couldn't get your code to work, but I organized it and added some click events to call your functions. I also added a background color to show the maximize effect is happening as it wasn't as obvious.
Updated fiddle demo
$('#minimize').click(function(){
minimizeFilterWindow();
});
$('#maximize').click(function(){
maximizeFilterWindow();
});
function minimizeFilterWindow() {
$('#leftFilterBox').css('height', '25px');
$('#leftFilterBox').css('top', '90%');
}
function maximizeFilterWindow() {
$('#leftFilterBox').css('height', '65%');
$('#leftFilterBox').css('top', '30%');
$('#leftFilterBox').css('background-color', '#000');
}
And, the updated HTML
<div id='leftFilterBox'>
<div style='background: linear-gradient(#848484, #2E2E2E);color: white;line-height:2.2em;padding-left:5%;width:auto;font-weight:bold;'>Traffic Conditions
<div id='filterWindowNav'>
<img id='minimize' src='img/minimizeFilterWindow.png' />
<img id='maximize' src='img/maximizeFilterWindow.png' />
<img id='close' alt='close' src='img/closeFilterWindow.png' />
</div>
</div>
<br/>
<div id='filterContent'><span class='getLiveTrafficTitle'><center>Select date</center></span>
<hr width='85%' />
</div>
</div>
Below is my original question and code but per CoreyRS's comment let me add some detail. I want to create a div that falls own the page and disappears like a rock falling through the air. The catch is it must work in IE 9 and 8. I have found some CSS3 animations that work great in all but IE. Any help is appreciated. Please provide code examples.
Original Question and Code
I am attempting to use the slideDown animation in jQuery to animate a div. The idea is a div will show then slide down the page and then fade out. Preferably it would fade out while falling but I cannot even get the div to fall. Here is my code:
JS:
var $j = jQuery.noConflict();
$j(window).load(function() {
$j('#loading').fadeOut('slow', function() { //fade out loading div
$j("#content-wrap").fadeIn("slow", function() { // show content div
setTimeout( function() { // delay slideDown effect
$j('#animate').slideDown('slow', function() {
// script to fade out or hide animate div
}, 2000 );
});
});
});
});
HTML:
<div id="loading">
<h2 class="textcenter">Loading...</h2>
<img id="loading-image" class="center" src="/images/ajax-loader.gif" />
</div>
<div id="content-wrap" class="hide">
<div id="animate">
<img class="fear" src="/sign.png" />
</div>
<div class="img-center">
<img class="feature-image" src="/Prairie-Grass.jpg" />
</div>
</div>
What am I doing wrong and I will take any advice that will create a falling div on the screen that fades out that will work in IE 9 and 8.
Haven't tested but give this a go. You'll need to edit the width/height properties etc to your needs, and obviously don't use inline styling if you have a css stylesheet.
<style>
#animate {
width:100px;
height:100px;
position:fixed;
top:-100px;
left:50%;
margin-left:50px;
z-index:1;
}
</style>
<script>
var $j = jQuery.noConflict();
$j(window).load(function() {
$j('#loading').fadeOut('slow', function() {
$j("#content-wrap").fadeIn("slow", function() {
$j('#animate').delay(2000).animate({'top':'50%'}, 500);
$j('#animate').delay(2000).fadeOut(500);
});
});
});
</script>