Hope you are all well.
I am trying to create my own video gallery using html, CSS, and Javascript.
My idea is that there are thumbnails that are hyperlinks that when clicked, scroll to the top and plays a youtube video in an iframe.
So far i have managed to get both the scroll to top and changing the iframe source to work individually. But, annoyingly, they do not seem to work when they are together.
Could anybody give me tips on the best way of achieving my goal?
Here is the jsfiddle of the 'changing iframe source' code working: jsfiddle.net/2SH97/ (This has the design of the page and what it'll look like at the end)
Here is the jsfiddle of the 'scroll to top' code: jsfiddle.net/RpPEe/229/ (a short version of the scroll to top with my attempt to change iframe source)
Thanks in advance.
Best,
function scrollt(){
$("body").animate({
scrollTop: 0
}, 600);
}
$("[target='projectsiframe']").on('click',function () {
$("#ifr").attr('src',$(this).attr('href'));
scrollt();
});
DEMO
http://jsfiddle.net/2SH97/3/
Related
I would like to "restart" a gif from the beginning when I scroll down or up, and come back into view.
So for exemple, my page load, the animation start -> I scroll down or up -> I come back to the div with the gif, the gif has been reset.
I have found this great piece of js in codepen, which is working great when I scroll to the top and come back, but doesn't work when I scroll Down and come back.
https://codepen.io/anon/pen/aWvagO?editors=0010
the code looks like this :
$(window).scroll(function() {
var current = $(this).scrollTop(),
path = '//cdn.pbrd.co/images/5QABxgAp7.gif',
visible = $('img').css('opacity') != 0;
if (current > 200) {
if (!visible) $('img').attr('src', path).fadeTo(400,1);
}
else if (visible) $('img').fadeTo(0,0);
});
Is there a simple way to make it work and keeping the code simple like this ?
Thanks a lot
I might be too late and this might be a bad solution. However, I solved a similar problem by having two duplicated gifs and alternating between the two when 'restarting' the gif. This seamlessly restarted the gif when needed, and technically it was the same gif. Hope this helped, Good luck!
We have been looking for a while now but still haven't found the solution to this matter.
We are designing the site in wordpress
URL: http://jouwdesign.be/fontanella/site/lunchmenu/
The golden menu (.submenu) has a script linked to it wich should add the class 'test' when scrolling vertically past 100 pixels. For some reason it wouldn't even display a classchange when inspecting in chrome or any other browser. We already tried to disable all custom js and plugins but no luck so far.
Here is the jQuery:
jQuery(document).ready(function($) {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if ($(window).scrollTop() >= 100) {
$(".submenu").addClass("test");
}
});
});
Anyone who has experienced the same problem in wordpress or any other ways?
Thanks!
Found the solution. I had to remove 'height 100%' on my body tag in css
All works fine now!
I'm very confused with my current webpage: http://armandbakx.nl/ - (adjusted it, I'm not here for self-promotion).
The idea is that I have a couple of images on my page, which are clickable. Once clicked a scrollable container should pop up, showing more information and images.
So far, with the help of some great people here, I've managed to make the JavaScript work. The only problems I'm running into right now are that when I click an image, the entire 'back-page' shifts. I'm not sure what's causing this, and even more unsure how to solve it.
Secondly, when an image is clicked and the scrollable container 'hovers' over the main page, it seems that other images still respond to clicking.. I've already hammered the z-index up to ridiculous amounts but it still does this. I don't think this is a JavaScript issue, but can't fathom what causes this in the css.
Thirdly, when an .img is clicked, and you scroll through the content of the scrollable container, when you click back towards the main page, it often also ends up scrolled upwards or downwards. How do I prevent this from happening?
I hope it's somewhat comprehensible and I hope someone is willing to help me.
I have a codepen here with everything this page runs on at the moment, except for the images.
Codepen
$('img').on('click', show);
$('.overlay').on('click', hide);
function show(){
$('.scroll-container').eq($(this).parent().index()).addClass('show');
$('.content-container').addClass('no-scroll');
$('.overlay').addClass('opacity');
}
function hide() {
$('.scroll-container').removeClass('show');
$('.content-container').removeClass('no-scroll');
$('.overlay').removeClass('opacity');
}
I decided to just answer your third question, and this approach might prevent the other issues as well.
Inside of your show function, make the keep track of the position the browser was in when the content opened. Then, in your hide function, return the browser to that position. This should prevent your boxes from moving around.
Here is an example. I wrapped everything in an immediately-invoked function to prevent the variables from being globals.
(function(){
var currentTop = 0;
$('img').on('click', show);
$('.overlay').on('click', hide);
function show(){
currentTop = $(window).scrollTop();
$('.scroll-container').eq($(this).parent().index()).addClass('show');
$('.content-container').addClass('no-scroll');
$('.overlay').addClass('opacity');
}
function hide() {
$(window).scrollTop(currentTop);
$('.scroll-container').removeClass('show');
$('.content-container').removeClass('no-scroll');
$('.overlay').removeClass('opacity');
}
})();
First, how to make this function run ONLY on scroll? Second, how to loop/repeat this function ONLY on window scroll infinitely?
$(function(){
$(".media-nav2").transition(
{ y: -600 }, 1500,
'cubic-bezier(.69,.19,.35,.83)');
});
I'm using the above function with this plugin https://github.com/rstacruz/jquery.transit.
Here is my webiste http://dev1.envisionwebdesign.co/johnreid/campaign.html. It's a one page parallax with no scroll bars. You navigate using the top menu and mouse/touch scroll. If you check this link http://dev1.envisionwebdesign.co/johnreid/campaign.html, you can see that the div .media-nav2 immediately transitions when the page loads.
Basically I'm trying to create a parallax effect where when you scroll down to the next page/section, the div .media-nav2 scrolls up. Here's a link to the fiddle http://jsfiddle.net/newmedia85/92YgR/. I have included a link to the onepage parallax jquery for the entire site. The way the one page parallax works is making it really hard for me to solve this. Any help appreciated!
use jquery scroll function
$(window).scroll(function () {
$(".media-nav2").transition({
y: -600
}, 1500, 'cubic-bezier(.69,.19,.35,.83)');
});
I've searched everywhere but couldn't find anything that suited to me.
I would like to do something like on this site:
http://fromtheroughmovie.com
I've looked into the js (800kb!), and from what I could see, it's using scrollTo to stealthily scroll towards elements depending on mouse position.
The closest script I could find was this : http://scripterlative.com/files/cursordivscroll.htm
But it scrolls only when towards the edges (I hacked it to try with a superior size but it stutters with Chrome).
Does anyone know how to do a complete mouse scroll (div is 4000px large, with 6 big divs positionned as absolute)? I tried a lot of things but this leads to nowhere for now.
If more information is needed, just ask.
Thanks in advance.
Have you looked at this plugin?
http://demos.flesler.com/jquery/scrollTo/
It's a pretty adaptable plugin with lots of scrolling functionality. It uses a function called 'scrollTo' which is maybe what you saw in that site's code?
In your example code from scripterlative, you can adjust the scroll area to be from just around the edges. The example is set to 20% boundary:
new CursorDivScroll( 'userComment', 20, 10 );
You can change the second param to be 50 and see if that helps.
As for the original site you need to tidy the javascript up to see how it all works. The page content is loaded via AJAX. Search for function runTransition(page). This pulls in the 'home' page, after the intro. This content contains a more useful bit of javascript: http://www.fromtheroughmovie.com/js/main-home.js
From there, you can see how the cast images are scrolled:
<div id="home-mosaic">
<ul>
<li id="cast-image1">...</li>
<ul>
</div>
The javascript that does the hard work seems to be a jQuery animate:
$("#home-mosaic > ul > li").mouseenter(function() {
$(this).find("div.home-mosaic-separation").animate({'width': (currentWidth*0.20) + 'px', 'left': (currentWidth*0.40) + 'px'}, 400);
});
$("#home-mosaic > ul > li").mouseleave(function() {
$(this).find("div.home-mosaic-separation").css({'width': (currentWidth*0.02) + 'px', 'left': (currentWidth*0.49) + 'px'});
});
Hope that helps!