Weird bottom area from fullpage.js - javascript

Now i try to make my site by fullpage.js plugin.
https://github.com/alvarotrigo/fullPage.js#callbacks
But there is a weird bottom area inside the section that have content which longer than their section height. (Section that have scrollOverflow)
Like this.
This is my code.
$(document).ready(function() {
$('#fullpage').fullpage({
'navigation': true,
paddingTop: '0',
paddingBottom: '0',
scrollOverflow: true,
afterLoad: function(anchorLink, index){
//using anchorLink
if(anchorLink == 'grey-fade-bg-slide'){
//alert("eoaehou");
$("body").css("background-image","url('img/team-bg.jpg')");
}
if(anchorLink == 'banner-slide'){
//$("#map").css("height","120px");
if(window.location.href.indexOf("our-team-bg-slide") > -1 || window.location.href.indexOf("contact-us-bg-slide") > -1 ) {
//alert("ccccc");
$("body").css("background-image","url('img/team-bg.jpg')");
}
}
if(anchorLink == 'blue-bg-slide'){
//alert("eoaehou");
$("body").css("background-image","url('img/banner-bg-image.jpg')");
}
},
afterRender: function(){
initMap();
$(".our-team-bg-section h3").css("margin-top","120px");
$(".contact-us-bg-section h3").css("margin-top","60px");
$(".grey-fade-bg-section h3").css("margin-top","120px");
}
});
});
All js file that i included.
<script src="js/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/scrolloverflow.min.js" type="text/javascript"></script>
<script src="js/jquery.fullPage.min.js" type="text/javascript"></script>
<script src="js/jquery.easings.min.js" type="text/javascript"></script>
So anyone know how to fix this?
Thanks!

You should be using the class fp-auto-height as detailed in the fullpage.js docs.
See the demo online or the one in codepen.
<div class="section">Whole viewport</div>
<div class="section fp-auto-height">Auto height</div>

Related

Javascript conflict between responsive-menu and responsiveslides

I am working on a responsive layout using javascript, responsive-menu and javascript, responsiveslides.
When I have only one javacript at a time on the page, they work fine, but together the responsive-menu doesn't work. If I put the javascript for the responsive-menu at the bottom of the page, the menu works fine but the slide show doesn't work. Any suggestions would be appreciated.
Here is my javascript call out:
<script src="respond.min.js"></script>
<link rel="stylesheet" type="text/css" href="menu_files/responsive-menu.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="menu_files/jquery.responsive-menu.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#JQResponsiveMenu1").fdResponsiveMenu({windowMinWidth:1000,autoHighlightCurrentPage:false,subMenuOpenOnClick:false,subMenuTransitionEasing:"easeOutSine",subMenuTransitionDuration:300});
});
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"> </script>
<link rel="stylesheet" type="text/css" href="responsiveslides.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="responsiveslides.min.js"></script>
<script type="text/javascript"> // You can also use "$(window).load(function() {"
jQuery(window).load(function() {
// Slideshow 1
jQuery("#slider1").responsiveSlides({
maxwidth: 800,
speed: 800
});
// Slideshow 2
jQuery("#slider2").responsiveSlides({
auto: false,
pager: true,
speed: 300,
maxwidth: 540
});
// Slideshow 3
jQuery("#slider3").responsiveSlides({
manualControls: '#slider3-pager',
maxwidth: 540
});
// Slideshow 4
jQuery("#slider4").responsiveSlides({
auto: false,
pager: false,
nav: true,
speed: 500,
namespace: "callbacks",
before: function () {
jQuery('.events').append("<li>before event fired.</li>");
},
after: function () {
jQuery('.events').append("<li>after event fired.</li>");
}
});
});
</script>
It's not advisable to load more than one version of jQuery on a site. I'd remove v1.8 and see how that does. If it fails, remove 1.10 instead. Some changes in 1.10 might break your plugins.

Jquery menu and photo gallery not working in IE

My site is under development and seems to be just dandy on all browsers except for IE10.:
For some reason the menu bar and photo gallery, which are both powered by Jquery just dont work.
Here is my code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript" src="jQuery Sliding Flexible Menu v2/deploy/js/jquery.sliding-flexible-menu-v2.js"></script>
<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="jQuery Sliding Flexible Menu v2/deploy/css/sliding-flexible-menu-v2.css">
<script type="text/javascript">
$(document).ready(function() {
//Horizontal
$("div.menu-horizontal").slidingFlexibleMenuv2({
buttonSpacing: '1'
});
$(".fancybox").fancybox(
{
transitionIn : 'elastic',
transitionOut : 'elastic',
easingIn : 'easeOutBack',
easingOut : 'easeInBack',
speedIn : '650',
speedOut : '650',
changeSpeed : '650',
padding : '0px',
});
});
function MM_effectAppearFade(targetElement, duration, from, to, toggle)
{ Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
}
</script>
<script type="text/javascript" src="fancyapps-fancyBox-2bb0da9/source/jquery.fancybox.pack.js"></scr ipt>
<link type="text/css" rel="stylesheet" href="fancyapps-fancyBox-2bb0da9/source/jquery.fancybox.css">`
Anyone got a clue why this aint working in IE????
Full site here
http://www.heggie5.webspace.virginmedia.com
Cheers
There are two solutions to this problem:
Place the fancybox css/images as is (as provided by fancybox download) and place fancybox folder in your application root
Modify the jquery.fancybox-1.3.x.css
1.Look for the comment /* IE */
2.Change the src for DXImageTransform.Microsoft.AlphaImageLoader filter for all classes
Please note, approach 1 is better in my opinion, because if you make change to fancybox css file, updgrades would be difficult.

JQuery FancyBox overlay color

I have tried to get a Fancybox iFrame to load automatically and to give the overlay a different color.
So far so good on the autoload.
Got it working.
The color I couldn't get to change.
Now I tried several examples many listed here. But I guess I am doing something wrong.
In my head code I am loading :
<script type="text/javascript">
$(document).ready(function(){
$('.fancybox').fancybox();
// Change title type, overlay closing speed
$(".fancybox-effects-a").fancybox({
helpers: {
'overlayColor' : '#ec2d2d',
title : {
type : 'outside'
},
overlay : {
speedOut : 30,
css: {
'background-color': '#ec2d2d'
},
},
overlayColor: {
css: '#ec2d2d',
}
}
});
$("#hidden_link").fancybox().trigger('click');
});
</script>
And my HTML is like this :
<a class="fancybox fancybox.iframe" id="hidden_link" href="iframe.html" title="HOI">Iframe</a>
It opens onload. But I cannot get the overlay to turn red.
What am I missing here?
I have tried as you see several options. But none used the right way.
TIAD
Edit:
When I try to add this code:
$(".fancybox").fancybox({
beforeShow : function() {
$('.fancybox-overlay').css({'background-color' :'#ec2d2d'});
}
I seem to make a mess of the Syntax. Because it doesn't respond to this script. But I am clueless of how to do this correctly.
This is what I got now:
<script type="text/javascript">
$(document).ready(function(){
$(".fancybox").fancybox({
beforeShow : function() {
$('.fancybox-overlay').css({'background-color' :'#ec2d2d'});
},
helpers: {
title : {
type : 'outside'
},
overlay : {
speedOut : 30,
css: {
'background-color': '#ec2d2d'
},
},
overlayColor: {
css: '#ec2d2d',
}
}
});
$("#hidden_link").fancybox().trigger('click');
});
</script>
Also adding the CSS code makes no difference:
#fancybox-overlay{
background-color:#ec2d2d !important;
}
Could it be that there is another JS file loaded that overwrites all of my settings??
These are the libraries loaded:
<script type="text/javascript" src="../lib/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="../lib/jquery.mousewheel-3.0.6.pack.js"></script>
<script type="text/javascript" src="../source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.5" media="screen" />
<link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
<script type="text/javascript" src="../source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
<script type="text/javascript" src="../source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript" src="../source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
Just set the background color before showing of fancybox.
$(".fancybox").fancybox({
beforeShow : function() {
$('.fancybox-overlay').css({'background-color' :'#ec2d2d'});
}
});
and then remove .fancybox() from $("#hidden_link").fancybox().trigger('click');
Just like this it'll work perfectly.
You should be able to change the overlay color in CSS
#fancybox-overlay{background-color:#ec2d2d !important;}
You can execute the overlay alone,
$.fancybox.helpers.overlay.open({parent: $('body')});

Jquery conflict, one script won't work with another

I have jquery script for menu and other for gallery, how to enable both of them to work? Below is my code
I also have some expanding box problem on the li element, whit thi explanation:
Any content that does not fit in a fixed-width or -height box causes the box to expand to fit the content rather than letting the content overflow.
Affects: Internet Explorer 6.0
Likelihood: Likely
And also double float margin bug error:
When a margin is applied to a floated box on the same side as the direction of the float, the margin is doubled. This bug only affects the first float in a row of one or more floats.
Affects: Internet Explorer 6.0
Likelihood: Very Likely
It is very urgent,pls help!
SCRIPT FOR MENU BAR
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript" src="../../js/jquery.easing.min.js"></script>
<script type="text/javascript" src="../../js/jquery.lavalamp.min.js"></script>
<script type="text/javascript" src="../../js/image_fade.js"></script>
<script type="text/javascript">
$(function() {
$("#lava_menu").lavaLamp({
fx: "backout",
speed: 700
});
});
</script>
SCRIPT FOR GALLERY
<script type="text/javascript"src="../../hisasann-jStack/js/jquery.js"></script>
<script type="text/javascript" src="../../hisasann-jStack/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="../../hisasann-jStack/js/jStack.js"></script>
<!-- syntax -->
<link rel="stylesheet" href="http://hisasann.com/housetect/js/dp.SyntaxHighlighter/Styles/SyntaxHighlighter.css" type="text/css" />
<script type="text/javascript" src="http://hisasann.com/housetect/js/dp.SyntaxHighlighter/Scripts/shCore.js"></script>
<script type="text/javascript" src="http://hisasann.com/housetect/js/dp.SyntaxHighlighter/Scripts/shBrushXml.js"></script>
<script type="text/javascript" src="http://hisasann.com/housetect/js/dp.SyntaxHighlighter/Scripts/shBrushCss.js"></script>
<script type="text/javascript" src="http://hisasann.com/housetect/js/dp.SyntaxHighlighter/Scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="http://hisasann.com/housetect/js/dp.SyntaxHighlighter/Scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="http://hisasann.com/housetect/js/dp.SyntaxHighlighter/Scripts/shBrushCss.js"></script>
<script type="text/javascript" src="http://hisasann.com/housetect/js/dp.SyntaxHighlighter/Scripts/shBrushJava.js"></script>
<script type="text/javascript" src="http://hisasann.com/housetect/js/dp.SyntaxHighlighter/Scripts/shBrushRuby.js"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
dp.SyntaxHighlighter.ClipboardSwf = 'http://hisasann.com/housetect/js/dp.SyntaxHighlighter/Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
// fadeInOut
$("#logo").fadeOut().fadeIn();
// smooth scroller
$("a[href^=#]").click(function() {
var hash = this.hash;
if(!hash || hash == "#")
return false;
$($.browser.safari ? 'body' : 'html')
.animate({scrollTop: $(hash).offset().top}, 1500, "easeInOutBounce");
return false;
});
});
var options = {
isClickAnimation: true,
isPositionRandom: true,
durationOut: 300,
durationIn: 200,
easingOut: "easeInOutBack",
easingIn: "easeOutBounce",
moveLeft: 250,
moveTop: 150,
opacityOut: 0.6,
opacityIn: 1,
delay: 10,
direction: "next",
callback: function() {}
};
$(window).bind("load", function() {
// jStack
var jstack = $("#imageBox").jStack(options);
$("#next").click(function() {
jstack.next();
});
$("#prev").click(function() {
jstack.prev();
});
$("#shuffle").click(function() {
jstack.shuffle();
});
});
</script>
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript"src="../../hisasann-jStack/js/jquery.js"></script>
if im not mistaken, both of them are jquery library?, they probably has conflict with each other if they are loaded on the same page, this problem occured to me, what i did was removed one of the library,

jQuery overwriting each other, noConflict doesn't work

I have 3 jquery scripts on my page. The 2nd script for the menu is interfering with the 3rd script, the carousel. When I take out the 2nd script, the carousel works again. I tried putting in noConflict, but maybe I'm putting it in the wrong place because it breaks even more things. Here's my code:
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($){
$('#main-menu').prepend('<div id="menu-icon">Menu</div>');
$("#menu-icon").on("click", function(){
$("#nav").slideToggle();
$(this).toggleClass("active");
});
});
</script>
<script type="text/javascript" language="javascript" src="js/jquery.carouFredSel-5.5.0-packed.js"></script>
<script type="text/javascript" language="javascript">
$(function() {
$('#foo4').carouFredSel({
responsive: true,
width: '100%',
scroll: 2,
items: {
width: 400,
visible: {
min: 6,
max: 6
}
}
});
});
</script>

Categories