I'm trying to get a fixed background to work with Fullpage JS. No matter what I do the backgrounds stay there or they don't show up at all. I tried a JS Fiddle but I can't get that to work at all either. https://jsfiddle.net/jpking72/jqa7wapt/9/
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.4/jquery.fullPage.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.4/jquery.fullPage.js"></script>
<style type="text/css">
#fullsite {
background-attachment:fixed;
}
#section1 {
background:url(/images/pwHoustonDowntown.jpg) no-repeat 0 0 fixed / cover;
}
#section2 {
background-color:#CCCCCC;
}
#section3 {
background:url(/images/pwHoustonWindow2.jpg) no-repeat 0 0 fixed / cover ;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#fullsite").fullpage({
})
})
</script>
</head>
<body>
<div id="fullsite">
<div class="section" id="section1">
<h1>
Section 1
</h1>
</div>
<div class="section" id="section2">
<h1>
Section 2
</h1>
</div>
<div class="section" id="section3">
<h1>
Section 3
</h1>
</div>
</div>
</body>
</html>
That's a bug in some browsers. Nothing to do with fullpage.js. Fullpage.js uses the translate3d property of css3 which is the one causing the bug in some browsers.
To solve it you have two options:
Use css3:false in fullpage.js options. It won't go as fluid, but you'll have your fixed background working.
Use scrollBar:true. You'll get a scrollbar and it might not go as fluid as well.
As you can see in the fixedBackgrounds.html provided in in fullpgae.js, it uses css3:false.
$('#fullpage').fullpage({
verticalCentered: false,
//to avoid problems with css3 transforms and fixed elements in Chrome, as detailed here: https://github.com/alvarotrigo/fullPage.js/issues/208
css3:false
});
You need to include jquery into your project. Jquery should be included first
$(document).ready(function () {
$("#fullsite").fullpage({
});
});
Related
I'm using textillate.js to add animation to text. My html page looks like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Textillate</title>
<link rel="stylesheet" href="animate.min.css">
<script src="jquery-3.5.1.min.js"></script>
<script src="jquery.lettering.js"></script>
<script src="jquery.textillate.js"></script>
</head>
<body>
<div class="tlt">
Hello world
</div>
<script>
$('.tlt').textillate({ in: { effect: 'bounceInDown' } });
</script>
</body>
</html>
where the included scripts and css are taken from the following links:
https://raw.githubusercontent.com/jschr/textillate/master/jquery.textillate.js
https://code.jquery.com/jquery-3.5.1.min.js
https://raw.githubusercontent.com/davatron5000/Lettering.js/master/jquery.lettering.js
https://raw.githubusercontent.com/animate-css/animate.css/master/animate.min.css
The problem is that whatever I set as effect in the in object, the result is always the default textillate animation: the chars appear one after the other from left to right, and I can control the order of the appearing letters (e.g. setting shuffle: true, etc..), but not the animation type.
This is pretty much the example code that textillate offers on his github page, so I don't have any idea on where is the problem.
I think the problem is related to animate.css reference, i change it and it works. Hope it helps.
$('.tlt').textillate({ in: { effect: 'flipInY' } });
$('.tlt2').textillate({ in: { effect: 'rollIn' } });
$('.tlt3').textillate({"loop":true,"in":{"effect":"fadeInDownBig","shuffle":false,"reverse":false,"sync":false},"out":{"effect":"hinge","shuffle":true,"reverse":false,"sync":false}});
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.compat.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.6.1/jquery.lettering.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/textillate/0.4.0/jquery.textillate.js"></script>
<div class="tlt">
Hello world
</div>
<div class="tlt2" >
Hello world
</div>
<div class="tlt3" >
Hello world
</div>
I'm trying to change the class name for a tab when I click it. I also want it to change back to the original one when I click a different tab.
I setup a very basic webpage just for testing. The full code of the page is copied below. Right now, this isn't working as it should, even though similar code was tested in JSfiddle and did work there. Note that the design part is showing up fine. Here are the two css rules that are part of this and the code for the full page follows:
.member_nav { float:left; margin-right:1px;height:65px;text-align:center;background-color:#636464;padding:0 20px 0 20px;font-size:15px;font-weight:bold;color:#fff;line-height:60px;}
.member_nav_clicked { float:left; margin-right:1px;height:65px;text-align:center;background-color:#0099cc;padding:0 10px 0 10px;font-size:15px;font-weight:bold;color:#fff;line-height:60px;}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Nav</title>
<link href="css_new/style.css" media="screen" rel="stylesheet" type="text/css">
<script type="text/javascript">
$(document).ready(function() {
$('.member_nav').on('click', function() {
$(this).addClass('member_nav_clicked').siblings().removeClass('member_nav_clicked');
});
});
</script>
</head>
<body>
<div class="member_nav">
Nav 2
</div>
<div class="member_nav">
Nav 3
</div>
<div class="member_nav">
nav 4
</div>
<div class="member_nav">
Nav 5
</div>
</body>
</html>
Here is the code I found that was causing everything to not work on the real site. This was in the head right below the jQuery call:
<script type="text/javascript">
var popup_jq = jQuery.noConflict();
popup_jq(document).ready(function() {
popup_jq("#various1").fancybox({
'titlePosition' : 'inside',
'transitionIn' : 'none',
'transitionOut' : 'none',
'showCloseButton' : true
});
});
</script>
Hi I have been having this problem for about 4 months now i gave up at first but now i have to solve it am trying to do a zoom in effect on hover and i did all the code and it works properly, but when i copy it and paste it in the editor or like the code it self it doesn't work i tried Firefox (latest version) and Google chrome(also latest version) but still no effect happens nothing and also i tried using Google's cdm and also tried downloading the jQuery from the website itself nothing worked out please help me as i am just a beginner in coding thank you
My HTML :
<html>
<head>
<title>Random Page</title>
<link rel="stylesheet"; type="text/css"; href="Stylesheet.css" media="all">
</head>
<body>
<img src="RandomPage.png">
<p style="margin-right:220px; margin-top:20px; float:right; font-size:22px; font-family:century gothic; id="nav2" ">I <a id="nav" href="">HOME</a> I <a id="nav" href="">Apple</a> I <a id="nav" href="">Android</a> I <a id="nav" href="">Gaming</a> I <a id="nav" href="">Random Tech</a> I <a id="nav" href="">About Us</a> I </p>
<div id="menu">
<img style=" margin-top:10px; margin-left:10px; border-radius:4px; " src="RandomGaming.png" class="resizableImage">
<img style=" margin-top:10px; border-radius:4px;" src="RandomFashion.png" class="resizableImage">
</div>
</body>
my script :
$(document).ready(function(){
$('.resizableImage').mouseenter(function() {
$(this).stop().animate({ width: "+=10%", height: "+=10%" });
});
$('.resizableImage').mouseleave(function() {
var x = $(this).attr('width'),
y = $(this).attr('height');
$(this).stop().animate({ width: x, height: y });
});
});
Thank You In Advance
You need to add the jquery library, and it has to be the first thing you add.
Paste this <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> in your head tag, and make sure it's the FIRST script there.
Your sample HTML is not including jQuery.
Put the follwoing script below the script in your head. So liek this:
<head>
<title>Random Page</title>
<link rel="stylesheet"; type="text/css"; href="Stylesheet.css" media="all">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- include future js scripts here -->
</head>
Then JUST before your closing </body> tag, add the jQuery code, like so:
<script>
$(document).ready(function(){
$('.resizableImage').mouseenter(function() {
$(this).stop().animate({ width: "+=10%", height: "+=10%" });
});
$('.resizableImage').mouseleave(function() {
var x = $(this).attr('width'),
y = $(this).attr('height');
$(this).stop().animate({ width: x, height: y });
});
});
</script>
Note: It's more efficient and allows your pages to load faster if your JS scripts are included before your closing tag above the functions..but for simplicity sake, I included it in the <head>, which is not bad either.
Hello I am trying to create sliding out tabs on this website: http://imaginationmuzic.com/
I am referring to the red 'Contact Us' and blue 'Twitter' tabs at the left and right of the site.
Currently the Contact Us tab opens up in a top to down motion; I would like it to open up from left to right like a sliding out tab.
Here is the code I used in the header:
$(document).ready(function(){
$(".btn-slide2").click(function(){
$("#panel2").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
I also would like the opposite to be done for the Twitter tab (have it open left to right).
Any help would be appreciated.
Some crude js code I made to demonstrate.
<!DOCTYPE HTML>
<html>
<head>
<!--Add style sheet-->
<link rel="stylesheet" type="text/css" href="soc.css">
<!--Add jquery-->
<script src="jquery-1.10.2.js">
</script>
<!--Add script for this page-->
<script src="soj.js">
</script>
</head>
<body>
<div id="container">
<div id="panel"> </div>
<div id="contact"> </div>
</div>
</body>
<html>
-------------css----------
#panel{
height:500px;
width:200px;
background-color:#EE4488;
}
#contact{
position:relative;
top:-500px;
left:200px;
width:10px;
height:50px;
background-color:#22EEFF;
}
#container{
position:relative;
left:-200px;
}
------------JS---------
$(document).ready(function(){
var pos='in';
$("#contact").click(function(){
if(pos=='in'){
$("#container").animate({left:'0px'
});
pos='out';
}
else
{
$("#container").animate({left:'-200px'
});
pos='in';
}
});
});
I am wondering if there is a compatibility problem between JQM and Flot.
I've looking for documentation about this, but there is not a lot...
Here is the issue: depending on the order in which I load the libraries, things work while others don't:
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
<script src="js/jquery.flot.js"></script>
<script src="js/jquery.flot.resize.js"></script>
<div id="placeholder" style="width: 60%;height:40%"></div>
--> Here the chart is not displayed: "Uncaught Invalid dimensions for plot, width = 671, height = 0"
Now if I remove JQM:
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script src="js/jquery.flot.js"></script>
<script src="js/jquery.flot.resize.js"></script>
<div id="placeholder" style="width: 60%;height:40%"></div>
--> Here the chart is displayed and the resize works, so I guess this problem comes from JQM but I have no idea what...
I've tried to load things in different orders, but nothing helps.
Does anybody know a workaround for this ?
Here is the full code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
<script src="js/jquery.flot.js"></script>
<script src="js/jquery.flot.resize.js"></script>
<style type="text/css">
html, body {
height: 100%; /* make the percentage height on placeholder work */
}
.message {
padding-left: 50px;
font-size: smaller;
}
</style>
</head>
<body>
<h1>Flot test</h1>
<div id="placeholder" style="width: 60%;height:40%; text-align: center; margin:0 auto;"/>
<script type="text/javascript">
$(function () {
var c1_values = [[0, 0],[1, 1],[2, 4],[3, 9],[4, 16],[5, 25],[6, 36],[7, 49],[8, 64],[9, 81],[10, 100],[11, 121],[12, 144],[13, 169],[14, 196],[15, 225],[16, 256],[17, 289],[18, 324],[19, 361]];
var c1_data = [{ data: c1_values, label: "curve1"}];
$.plot($("#placeholder"), [
{
data: c1_values,
lines: { show: true, fill: false }
}
]);
});
</script>
</body>
</html>
I am currently trying this "no conflict" function, but no result for now.
jQuery Mobile automatically wraps all your content in a page if you don't include on yourself. Generally, that means you ought to do it yourself in your code! So, first step is to move your placeholder into a jQM template:
<div data-role="page">
<div data-role="header">
<h1>Flot test</h1>
</div>
<!-- /header -->
<div data-role="content">
<div id="placeholder" style="width: 60%;height:40%; text-align: center; margin:0 auto;"
/></div>
<!-- /content -->
</div>
<!-- /page -->
Now, it seems to be a common problem that the content div does not stretch to fill the whole available vertical space. I found two solutions, neither of which seem very ideal.
Use CSS to try and make the content div full height (note that data-role"content" becomes a CSS class of ui-content):
.ui-content {
height:100%;
width:100%;
position:absolute;
}
Use Javascript to fix the content height dynamically as you go along (do this before your flot call). Taken from here:
var fixgeometry = function () {
/* Some orientation changes leave the scroll position at something
that isn't 0,0. This is annoying for user experience. */
scroll(0, 0);
/* Calculate the geometry that our content area should take */
var header = $(".ui-header:visible");
var footer = $(".ui-footer:visible");
var content = $(".ui-content:visible");
var viewport_height = $(window).height();
var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
/* Trim margin/border/padding height */
content_height -= (content.outerHeight() - content.height());
content.height(content_height);
}; /* fixgeometry */
$(window).bind("orientationchange resize pageshow", fixgeometry);
Neither of those solutions seemed to work particularly well for me, although they both did "work" as far as showing the graph.
I've posted an example of the 2nd version here: http://alpha.jsfiddle.net/ryleyb/mz24P/
The CSS is there as well, commented out if you want to try that instead.