Basically there are 4 images that scroll off the page. Now when a user clicks the link, that one scrolls off. But I wanted to added an additional animation where a paragraph (".image_text p") appears on page as well and then when another link is clicked, that text goes along with rest of image and scrolls off. Everything works except the animation of the paragraph part.
The problem:
The text is all squished together (there's four paragraphs and they are overlapping each other)
When I click - it doesn't even have time to fade it- and foes swirving off page before it fades.
First time page loads, the first paragraph doesn't even appear at all - when button is clicked, all paragraphs appear. It's supposed to be the first paragraph appears on page load and then click then the next paragraph appears as first scrolls away with image.
The markup and css are correct. I think problem is somewhere in this javascript:
$(function() {
$('#slideshow').crossSlide({
sleep: 2,
fade: 1
}, [
{ src: '../images/img1.png' },
{ src: '../images/img2.png' },
{ src: '../images/img3.png' },
{ src: '../images/img4.png' }
])
$(".paging").show();
$(".paging a:first").addClass("active");
$(".image_text p:first").addClass("active");
//Get size of the image, how many images there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});
//Paging and Slider Function
rotate = function(){
$activep = $('.image_text p:first');
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
$(".paging a").removeClass('active'); //Remove all active class
$(".image_text p").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
$activep.addClass('active');
//Slider Animation
$(".image_reel").animate({
left: -image_reelPosition
}, 500 );
$(".image_text p").animate({
opacity: .99,
left: -image_reelPosition
}, 500 );
};
//Rotation and Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 7 seconds
$active = $('.paging a.active').next(); //Move to the next paging
$activep = $('.image_text p').next(); //Move to the next paging
if ( $active.length === 0) { //If paging reaches the end...
$active = $('.paging a:first'); //go back to first
}
rotate(); //Trigger the paging and slider function
}, 7000); //Timer speed in milliseconds (7 seconds)
};
rotateSwitch(); //Run function on launch
//On Hover
$(".image_reel a").hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation timer
});
//On Click
$(".paging a").click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation timer
return false; //Prevent browser jump to link anchor
});
});
CSS for paragraph:
.image_text p {
text-align: right;
width: 500px;
opacity: 0;
position: absolute;
top: 0;
left: 0;
}
As it can bee seen the reason why the text isn't shown is because the opacity starts at 0. But this is intended because it's supposed to fade in. However, it appears it doesn't fade in but rather only becomes visible when link is clicked and by that time it scrolls off the page.
The solution was to specify how may p tags and multiple that by width of container and then specifying the container with the css declaration overflow:hidden, which hides all p tags except the current. Also, p tags had to be floated left in order to get them to behave inline:
.window {
margin-top: 20px;
height:286px;
width: 655px;
overflow: hidden;
position: relative;
}
.image_text {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.image_text p {
float: left;
margin-left: 10em;
}
Related
I have a div .move that starts to move from left to right when the button "go div" is clicked.
Then I have two div .sound in the center of content div with an audio element.
I want that when the div .move arrives to .sound div, the audio inside .sound div starts to play.
But how to say whenever .move div arrives at .sound element, every audio elements in .sound div starts to play?
https://jsfiddle.net/dda5z70r/
jQuery:
$( "#div" ).click(function() {
https://jsfiddle.net/popnoodles/dda5z70r/5/
Check for collision each animate step.
Add your code to play the sound where I have added a class to show this visually.
NB I added the ID bar to the bar that moves because it's faster to search the DOM for an ID than a class. If you have more than one moving bar I can alter this.
$( "#go" ).click(function() {
var stop = $(".stop").offset().left;
var obj = document.getElementById("audio");
// how to say whenever .move div arrives at .sound element, the sound associated to that .sound div starts to play?
//obj.play();
$( "#bar" ).animate({
opacity: 0.25,
left: stop-($(".stop").width()+$(this).width()),
}, {
duration: 5000,
step: function(){
$('.sound').each(function(){
if (collision($(this), $('#bar'))){
$(this).addClass('playme');
} else{
$(this).removeClass('playme');
}
});
}, complete: function() {
$(this).css('left',0);
$(this).css('height','100%');
}});
});
function collision($div1, $div2) {
var x1 = $div1.offset().left;
var r1 = x1 + $div1.width();
var x2 = $div2.offset().left;
var r2 = x2 + $div2.width();
if (r1 < x2 || x1 > r2) return false;
return true;
}
I have a back to top image that popups when the user scrolls beyond 280. The issue is when you reach the bottom the image is over links in the footer. So I want to change the position of the image once the user is about 90px from the very bottom of the page - I want "bottom": '35px' to be 95. The page height is always changing fyi. Code I have:
function update() {
if ($(window).scrollTop() > 280) {
$('#btt').animate({
"bottom": '35px'
}, 300);
}
else {
$('#btt').animate({
"bottom": '-80px'
}, 300);
}
}
setInterval(update, 500);
It might be better to check for the scroll position only when the page has been scrolled rather than just checking every 1/2 second.
I've put together a working demo of what I think you want here: http://jsfiddle.net/swpqpv4r/5/
Basically we need to look at the scroll position of the bottom of the window as we scroll instead of the top by using document.body.scrollTop + $(win).height(). Normaly we might want to worry about what could happen if the window were to be resized, but we calculate this each time inside of the scroll event, so it shouldn't be an issue if the window changes sizes.
Next we need to know when the top of the footer has scrolled above the bottom of the window. We can use $("#footer").position().top; to see where it's top position is.
Hopefully the code is commented enough to help explain it. Let me know if you have any questions.
HTML
<header>Top</header>
<br><br><br> <!-- Lots of these for testing -->
<footer id="footer">Bottom</footer>
<a id="btt" href="javascript:{};">Back to top</a>
JavaScript
$(function(){
//select once and re-use later
var $win = $(window);
var $btt = $("#btt");
var $foot = $("#footer");
var bttDisplay = 500;
var footerHeight = $foot.outerHeight();
var footerTop = $foot.position().top;
function updateScroll() {
var scrollBottom = document.body.scrollTop + $win.height();
if (scrollBottom >= bttDisplay && scrollBottom <= footerTop) {
//show it by setting the bottom position to 0
animateBtt(0);
}else if (scrollBottom >= footerTop) {
//move it up above the footer's top position
animateBtt(footerHeight);
}else {
//hide it by setting the bottom position to the negative value of it's height
animateBtt($btt.height() * -1);
}
}
function animateBtt(pos){
$btt.animate({
"bottom": pos
}, 300);
}
//run initially
updateScroll();
//Create a var to hold the timer
var scrollTimer = null;
$win.on("scroll",function(ev){
//when scrolling, clear the timer
clearTimeout(scrollTimer);
//Now set the timer to run a function after a small delay.
//This prevents the update from happening too many times when you scroll
scrollTimer = setTimeout(updateScroll, 50);
});
//click to scroll back up
$btt.on("click",function(){
$('html, body').animate({scrollTop:0},300);
})
});
CSS
html,body{
margin:0;
padding:0;
}
header, footer{
background: #CCC;
padding: 10px;
}
#btt{
position:fixed;
height: 30px;
width: 100px;
text-align:center;
bottom: -30px;
right:0;
background: #F00;
color: #FFF;
z-index: 1000;
}
So I have a slideshow on my website with images with no links. It also has buttons on the bottom to navigate to the other pictures, one for each image. I am trying to add another image, this one with a link to another part of the website. I would believe to add the picture
to the list of
<img src="/images/home-slideshow/photo-01.jpg" alt="" width="684" height="325">"
<img src="/images/home-slideshow/photo-02.jpg" alt="" width="684" height="325">"
"
I would just add the same but add
<img src="/image/home-slideshow/photo-06.jpg" alt="" width ="684" height="325">
The question I had was is there anything else I have to change somewhere else?
Also, I have to add a button for that image, would adding this linked photo to the slideshow affect the buttons in some weird way?
EDIT:
here is my slideshow javascript. But it doesnt look like it makes them strictly images?
$(document).ready(function() {
//Show the paging and activate its first link
$(".paging").show();
$(".paging a:first").addClass("active");
//Get size of the image, how many images there are, then determine the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});
//Paging and Slider Function
rotate = function(){
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
$(".paging a").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
//Slider Animation
$(".image_reel").animate({
left: -image_reelPosition
}, 500 );
};
//Rotation and Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 7 seconds
$active = $('.paging a.active').next(); //Move to the next paging
if ( $active.length === 0) { //If paging reaches the end...
$active = $('.paging a:first'); //go back to first
}
rotate(); //Trigger the paging and slider function
}, 7000); //Timer speed in milliseconds (7 seconds)
};
rotateSwitch(); //Run function on launch
//On Hover
$(".image_reel a").hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation timer
});
//On Click
$(".paging a").click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation timer
return false; //Prevent browser jump to link anchor
});
});
I just want the #menu to fade when the scroll bar is moving to provide a less cluttered interface. Is there code that would allow this?
I guess basically what I'm looking for is how to grab the scroll bar movement event. To slowly fade out the #menu after 1 seconds of scrolling and bring back the #menu after 2 second of scroll-bar inactivity.
Thank you so much!
var $menu = $("#menu");
var opacity = $menu.css("opacity");
var scrollStopped;
var fadeInCallback = function () {
if (typeof scrollStopped != 'undefined') {
clearInterval(scrollStopped);
}
scrollStopped = setTimeout(function () {
$menu.animate({ opacity: 1 }, "slow");
}, 2000);
};
$(window).scroll(function () {
if (!$menu.is(":animated") && opacity == 1) {
$menu.animate({ opacity: 0 }, "slow", fadeInCallback);
} else {
fadeInCallback.call(this);
}
});
http://jsfiddle.net/zsnfb/9/
This sets the scroll event to do a few things. First it clears a timeout to fade the menu div back in. After that, if the menu isn't already faded out, it fades the menu out and sets the timeout in the callback. If the menu is already faded out, it just sets the timeout. If the user stops scrolling, the menu will fade back in after 2 seconds.
There are other solutions that use fadeOut() and fadeIn(). My only issue with those functions in this case is that setting display: none; to the menu div will affect the layout of the page, where setting visibility: hidden; or opacity: 0; shouldn't affect the layout.
Right using the following:
$('body').scroll(function(){
$('#menu').fadeOut();
var scrollA = $('body').scrollTop();
setTimeout(function(){
if(scrollA == $('body').scrollTop()){
$('#menu').fadeIn();
}
}, 200);
})
So we record the scroll amount, wait 200 milliseconds and then see if the scroll has changed, if not we fade the menu back in.
I think this is what you are looking for http://jsfiddle.net/wfPB6/
There are two elements on this page that have Javascript attached. The donate box on the left, and the image slider in the centre. The image slider just rolls round on a time delay while the donate box changes its left-position on hover, then returns when hover is released. This works OK in FF and Chrome.
In IE there seems to be some sort of clash between the two elements. As soon as I run the hover command the slider stops working. The hover also only works once, and needs a page refresh before it'll run again.
Is there any way to fix this?
This is the code for the image slider:
<script type="text/javascript">
$(document).ready(function() {
//Set Default State of each portfolio piece
$(".paging").show();
$(".paging a:first").addClass("active");
//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});
//Paging + Slider Function
rotate = function(){
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
$(".paging a").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
//Slider Animation
$(".image_reel").animate({
left: -image_reelPosition}, {
duration: 2000,
easing: 'easeInOutQuad'
})
}
//Rotation + Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $('.paging a.active').next();
if ( $active.length === 0) { //If paging reaches the end...
$active = $('.paging a:first'); //go back to first
}
rotate(); //Trigger the paging and slider function
}, 6000); //Timer speed in milliseconds (3 seconds)
};
rotateSwitch(); //Run function on launch
//On Hover
$(".image_reel a").hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation
});
//On Click
$(".paging a").click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
});
});
</script>
and this is for the donate box:
$(document).ready(function() {
$('#donatebox').hover(function() {
$('#donatebox').animate({
'left': parseInt($(this).css('left'),10) == 295 ?
$(this).animate({'left': '0px'}, 1000,'easeOutQuad') :
295
});
});
});
It's beyond me so I've worked round it another way that doesn't need parsing (which I really don't understand...)
$(document).ready(function() {
$('#donatebox').mouseenter(
function() {
$('#donatebox').animate({"marginLeft": -5}, 1000, "easeOutBounce");
});
});
$(document).ready(function() {
$("#donatebox").mouseleave (
function() {
$(this).animate({"marginLeft": -5}, 20).animate({"marginLeft": -305}, 700, "easeOutQuad");
});
});
Something's causing a Javascript error in your jQuery "easing" plugin, when the div has eased back into its slot. This is why no scripts are running after you use the Donate box once.
If you use Developer Tools in IE, you'll find that the error is caught. Then (although the animation is decoupled so you can't just go up the callstack) it is deducible that the issue is in the animation that you instigate from your custom.js:
$('#donatebox').animate({
'left': parseInt($(this).css('left'),10) == 295 ?
$(this).animate({'left': '0px'}, 1000,'easeOutQuad') :
295
});
^ Doesn't look right to me.
You also have duplicate HTML node IDs overimage. IDs are unique; perhaps you meant to use classes?
Maybe it help you.
Ticket on jQuery Bug Tracker
This is caused by Invalid Argument exception on Line: 8538 of jquery-latest.js