Clicking JS Tabs Causes Browser to Scroll Up - javascript

EDIT: I found why it is doing this, but a question has now arisen from this.
Scroll down to where I said "edit" at the bottom to help me with the new issue that has come up.
The page can be seen here: http://www.remodeling-buffalo.com/bathroom/swanstone-bath-and-alcove-walls.php
If you scroll down to the bottom and click one of the tabs underneath the section "video" it jumps up the page. It only happens if you scroll down so the video is above the bottom of your browser.
Here is the page code that I have for the tabs:
<ul id="tabs" class="filter-nav option-set">
<li><a class="selected" href="#">Acetone Test</a></li>
<li>Impact Test</li>
<li>Heat Test</li>
</ul>
<div id="tab-items" class="margin_top_55 textcenter">
<hr class="dashed margin_bottom_15">
<section>
<div>
<p>
<video id="sublime" class="sublime center" poster="/resource/video/bathroom/tub-and-shower/modular/swanstone/swanstone-chemical-test.jpg" width="640" height="320" data-name="Swanstone - Chemical (Acetone) Test" data-uid="56410b5b" preload="auto">
<source src="/resource/video/bathroom/tub-and-shower/modular/swanstone/swanstone-chemical-test.mov" />
</video>
</p>
<h3>Acetone Test</h3>
<h5 class="grey">Impervious To Chemicals</h5>
</div>
</section>
<section>
<div>
<p>
<video id="sublime2" class="sublime center" poster="/resource/video/bathroom/tub-and-shower/modular/swanstone/swanstone-impact-test.jpg" width="640" height="320" data-name="Swanstone - Impact Test" data-uid="12be3c75" preload="auto">
<source src="/resource/video/bathroom/tub-and-shower/modular/swanstone/swanstone-impact-test.mov" />
</video>
</p>
<h3>Impact Test</h3>
<h5 class="grey">Impact Resistant!</h5>
</div>
</section>
<section>
<div>
<p>
<video id="sublime3" class="sublime center" poster="/resource/video/bathroom/tub-and-shower/modular/swanstone/swanstone-heat-test.jpg" width="640" height="320" data-name="Swanstone - Heat Test" data-uid="403140c8" preload="auto">
<source src="/resource/video/bathroom/tub-and-shower/modular/swanstone/swanstone-heat-test.mov" />
</video>
</p>
<h3>Heat Test</h3>
<h5 class="grey">Withstands Heat!</h5>
</div>
</section>
and here is the JS code that I have
$(function() {
$("#tabs").tabs("#tab-items section", { effect: 'fade', fadeOutSpeed: 0, fadeInSpeed: 400 });
$(".option-set").on("click", "a", function(e) {
$(this).addClass('selected') .parent().siblings().find("a").removeClass('selected'); });
});
It calls out to jquery.tools.min.js which is just the "tabs" of the jqueryUI. That file can be seen here: http://www.remodeling-buffalo.com/resource/js/jquery.tools.min.js
EDIT: Fixed Issue on my own, but have a question now for best method
It seems to be a problem with the div going hidden instantly, and the other fading in, so this code right here:
{ effect: 'fade', fadeOutSpeed: 0, fadeInSpeed: 400 });
So the issue is that even though it's impossible to see, both sections go invisible for like .0000 MS but it is forced to push the page up there is nothing there (if you know what I mean).
So I can fix this by changing the "fadeOutSpeed" from 0 to 1, and it no longer does this, although it does look a little goofy. Is there a better effect to use which would stop this from happening? It appears as if having a fade does this problem.
Thanks for the help guys! :)

That is your own code in custom.js:
$('.navbar a, .scroll a, .smoothscroll a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
Uncaught TypeError: Cannot read property 'top' of null (repeated 4 times)
}, 850,'easeInOutExpo');
/*
if you don't want to use the easing effects:
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1000);
*/
event.preventDefault();
});
The buttons are $('.smoothscroll a'), so your scrollTop makes it scroll top!

Maybe this scrollfix can fix it?
$(".option-set").on("click", "a", function(e) {
var scrollTop = $(window).scrollTop();
$(this).addClass('selected').parent().siblings().find("a").removeClass('selected');
$(window).scrollTop(scrollTop);
});

I would suggest you just use divs or spans instead of a tags. Then just use css to style it to look like a link.
Example:
myclass {
cursor: pointer;
}

Related

How to load the embeded video only after some click-event was triggered. jQuery

What I have now satisfies me in terms of an overall effect: Click on "show me", it displays an YT Video, when clicked once again - vid will hide etc. BUT even when site is loaded in the first place (and YT video is hidden) - all of its (Mb) size is counted as it was displayed causing the website to load slowly. My question is how to load the embeded video (with its size) only after I clicked on "Show me" element.
This is what I have:
HTML:
<div class="#">
<span class="#" id="show_me"><i class="icon fa-angle-down"></i>Show Me</span>
<span class="#" id="shown">
<iframe width="100%" height="315" src="https://www.youtube.com/embed/#" frameborder="0" allowfullscreen></iframe>
</span>
</div>
JS:
$(document).ready(function(){
$("#show_me").click(function(){
$("#shown").toggle();
});
});
CSS:
#shown {
display: none;
}
Try something like this:
HTML:
<div class="#">
<i class="icon fa-angle-down"></i>Show Me
<div id="i_frame"></div>
</div>
JS:
$(document).ready(function(){
$("#show_me").click(function(e){
e.preventDefault();
if ($(this).is(".opened") ) {
$(this).removeClass("opened");
$(this).find(".icon").removeClass("fa-angle-up").addClass("fa-angle-down");
$("#i_frame").hide().html("");
} else {
$(this).addClass("opened");
$(this).find(".icon").removeClass("fa-angle-down").addClass("fa-angle-up");
$("#i_frame").show().html("<iframe width='100%' height='315' src='https://www.youtube.com/embed/#' frameborder='0' allowfullscreen></iframe>");
}
});
});
CSS:
#i_frame {
display: none;
}
https://jsfiddle.net/jeremykenedy/fkcnncjm/

Create slider placeholder to solve anchor issues

I am currently building a site and using the smoothy template located here:
Smoothy Template
If you keep refreshing the site, you'll see the Nivo Slider does not load immediately. This causes all my anchor links to the main page to be thrown off vertically by the same height as the slider images once the Nivo Slider has loaded. I've tried several solutions, such as setting the image height and width manually, and also using a placeholder that fades out once Nivo Slider has loaded, but to no avail.
Here is my code:
<div id="sliderwrapper">
<div id="slider" class="nivoSlider templatemo_slider">
<img src="images/slider/img_1_blank.jpg" width="1050" height="500" alt="slide 1" />
<img src="images/slider/img_2_blank.jpg" width="1050" height="500" alt="slide 2" />
<img src="images/slider/img_3_blank.jpg" width="1050" height="500" alt="slide 3" />
</div>
<div id="preloader" class"nivoSlider templatemo_slider">
<img src="images/preloader.jpg" width="1050" height="500" />
</div>
</div>
And here is my function:
$(window).load(function() {
$('#slider').nivoSlider({
effect:'random', //Specify sets like: 'fold,fade,sliceDown'
slices:12,
animSpeed:500, //Slide transition speed
pauseTime:3000,
startSlide:0, //Set starting Slide (0 index)
directionNav:false, //Next & Prev
directionNavHide:true, //Only show on hover
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){}, //Triggers after all slides have been shown
lastSlide: function(){}, //Triggers when last slide is shown
afterLoad: function(){ $('#preloader').fadeOut(500);} //Triggers when slider has loaded
});
});

Stop simple JavaScript slideshow after one loop

I know very little about JavaScript at all, but I'm looking for a solution to a simple code that I'd like to use. I'm not trying to execute any slides or fades, just a simple slideshow that switches from one image to the next. I want the slideshow to play through just once, and then stop on the last image in the sequence. Any help would be greatly appreciated!
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.next()
.end()
.appendTo('#slideshow');
}, 3000);
As I said, it's a very simple code. The first GIF runs only once, the second GIF loops. I would like the slideshow to stop on the looping GIF. I'm wondering if the '3000' (which I know corresponds to the length of each slide) can be changed to accomplish what I'm looking for. Or else adding a stop function... which I don't know how to write.
<div id="slideshow">
<div>
<img src="https://31.media.tumblr.com/e2c4bbaeb781a3b834cd09549595393f/
tumblr_noy3q3l1dy1uwyyx9o2_1280.gif">
</div>
<div>
<img src="https://33.media.tumblr.com/1d6495399687801067d62c83c4218644/
tumblr_noy3q3l1dy1uwyyx9o1_1280.gif">
</div>
</div>
Ok I have made this with the objective of being as clear and simple for you to understand as possible, (since you new to js...)
JS/Jquery:
$(function () {
setTimeout(playSlideShow, 3000);
function playSlideShow() {
var currImgContainer = $('.showImg');
if (!$(currImgContainer).hasClass('lastImg')) {
$('.showImg').removeClass('showImg').next().addClass('showImg');
setTimeout(playSlideShow, 3000);
}
}
});
So here we find the imgContainer(div) with the class "showImg", then using chaining, we remove the class and add it to the next imgContainer(div). Therefore toggling the CSS to show/hide the image until it finds the div that has the class "lastImg".
CSS:
.slideShow > div:not(.showImg) {
display: none;
}
.showImg {
display: block;
width: 400px;
height: 400px;
}
HTML:
<div class="slideShow" id="slideshow">
<div class="showImg">
<img src="Images/img1.png" alt="" />
</div>
<div>
<img src="Images/img2.png" alt="" />
</div>
<div>
<img src="Images/img3.png" alt="" />
</div>
<div class="lastImg">
<img src="Images/img4.png" alt="" />
</div>
</div>
This way you can have as many images as you want, just make sure the last div has class "lastImg" and the first one has the class "showImg".
Here is a fiddle
Hope it helps...
Try this:
var intervalID = null;
var iterator = 0;
var intervalDuration = 3000;
var slideshow = $('#slideshow');
var divs = slideshow.find('div');
//divs.filter(':gt(0)').hide();
divs.eq(iterator).show();
intervalID = setInterval(function(){
divs.eq(iterator).hide();
iterator += 1;
if (iterator === divs.length - 1) { clearInterval(intervalID); }
divs.eq(iterator).show();
}, intervalDuration);
#slideshow > div { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="slideshow">
<div>
<img src="https://dl.dropboxusercontent.com/u/45891870/Experiments/Codepen/PIXI/0.4/images/JS.jpg" />
</div>
<div>
<img src="https://dl.dropboxusercontent.com/u/45891870/Experiments/Codepen/PIXI/0.4/images/PIXI.jpg" />
</div>
<div>
<img src="https://dl.dropboxusercontent.com/u/45891870/Experiments/Codepen/PIXI/0.4/images/JS.jpg" />
</div>
</div>
The HTML structure is same as yours but the only thing that I have changed are the image sources (tumbler images weren't loading for me). But JavaScript has been changed completely.
Add as many DIVs as you like in your HTML to test it out. Hope it helps.
Update #1:
Added CSS to hide the divs by default.
Increased the intervalDuration to 3000. Just to make sure there is ample time for the images to be loaded.
Commented the filter line of JS.
Added another JS line right below the previous filter line.
This update should also load your GIF only when it is needed to appear, hence will not be running in the background.
Let me if this works.

Colorbox help! Embed a youtube video

I am completely new to javascript and using colorbox. I can get the video to load and close as I would like. However, I don't know how to change the formating of the box or how to make the background more opaque while the pop-up apears. I have the following code:
{js}
<br>
<br>
<h1>hello world! This is soooooo exciting! </h1>
<p><a href="javascript:void jQuery.colorbox({
html:'<iframe width=600 height=400 src=http://www.youtube.com/embed/eh-0knDpn5g frameborder=10 allowfullscreen></iframe>'
})"> <img src="/uploads/features/featured-block-1.jpg" /></a></p>
Also I have been having this weird problem where I close the pop-up, but the background still stays opaque.
If anyone could post some code examples or explain to me how/if the colorbox takes parameters, I would greatly appreciate it.
All options you can find on this page: ColorBox
Here is example:
$.colorbox({ href: 'http://www.youtube.com/embed/eh-0knDpn5g', width: '600px', height: '400px', iframe: true });
<a class='youtube' href='http://www.youtube.com/watch?v=VOJyrQa_WR4'>Business Cats</a>
<script>
$('.youtube').colorbox({iframe: true, width: 640, height: 390, href:function(){
var videoId = new RegExp('[\\?&]v=([^&#]*)').exec(this.href);
if (videoId && videoId[1]) {
return 'http://youtube.com/embed/'+videoId[1]+'?rel=0&wmode=transparent';
}
}});
</script>

Pause and resume jquery animation?

Here's a fiddle:
http://jsfiddle.net/vBt5E/
I want to pause and unpause an endlessly scrolling jquery animation on hover, without any weird jumps.
html like this:
<div id="vertical-carousel">
<div class="imagecolumn">
<img src="http://placekitten.com/200/120" width="200" height="120">
<img src="http://placekitten.com/200/100" width="200" height="100">
<img src="http://placekitten.com/200/80" width="200" height="90">
</div>
</div>
​
javascript like so:
var imageColumn = $('.imagecolumn');
origColumnHeight = imageColumn.height();
$(document).ready(function() {
var columnDupe = imageColumn.contents()
.clone()
.addClass('dupe')
.appendTo(imageColumn);
function scrollColumn() {
imageColumn.css({'top': '0'})
.animate({top: -origColumnHeight},15000, 'linear', scrollColumn);
}
scrollColumn();
});
I know this has been asked in different form before but the various answers aren't working for me. I looked at Tobia Conferto's "Pause" plugin and just couldn't get it to work. Ditto this one, which is supposedly even buggier.
Please post a working fiddle if you can, it really helps. Thanks!
Using the "Pause" plugin, you can get it working by doing the following:
$(".imagecolumn").hover(function() {
$(this).pause();
}, function() {
$(this).resume();
});
Example: http://jsfiddle.net/charlescarver/vBt5E/1/
Make sure you include the plugin on your page! https://raw.github.com/tobia/Pause/master/jquery.pause.min.js
P.S. I prefer PlaceDog.

Categories

Resources