I can't seem to find the problem in my code. It seems that the #fullpage section selector doesn't work for some reason.
I made sure all my sections have a set position, and it still doesn't work as expected.
My HTML and my CSS...
body {
margin:0;
padding:0;
font-family:verdana;
}
#fullpage {
height:100vh;
}
#fullpage section {
height:100vh;
}
#fullpage section h1 {
margin:0;
padding:0;
line-height:100vh;
}
#fullpage section:nth-child(1) {
background-color:red;
}
#fullpage section:nth-child(2) {
background-color:blue;
}
#fullpage section:nth-child(3) {
background-color:green;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="fullpagecss.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.js">
</script>
<script src="http://code.jquery.com/jquery-3.4.1.js">
</script>
<script src="jquery.fullpage.js">
</script>
</head>
<body>
<div id="fullpage">
<section><h1>Section 1</h1></section>
<section><h1>Section 2</h1></section>
<section><h1>Section 3</h1></section>
</div>
<script type="text/javascript">
FastClick.attach(document.body);
$('#fullpage').fullpage();
</script>
</body>
</html>
Really confused why it isn't working.
Not sure it is the selector. Might be the markup. The fiddle was not working for me. Edited things a little:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.css" integrity="sha256-l0tJvh77claYa8GowKaFNxtuRWZICtwHTk7+0tgsiZY=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.js" integrity="sha256-DYZMCC8HTC+QDr5QNaIcfR7VSPtcISykd+6eSmBW5qo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.extensions.min.js" integrity="sha256-SjXUPmxobD+vLCws0crIzpdBrHgDjs8jamhUMv0eRac=" crossorigin="anonymous"></script>
</head>
<body>
<div id="fullpage">
<section class="section"><h1>Section 1</h1></section>
<section class="section"><h1>Section 2</h1></section>
<section class="section"><h1>Section 3</h1></section>
</div>
</body>
</html>
No change to the CSS:
JS:
$(document).ready(function() {
FastClick.attach(document.body);
$('#fullpage').fullpage({
//options here
autoScrolling:true,
scrollHorizontally: true,
navigation: true,
navigationPosition: 'right',
});
});
Not even sure that is the fullpage library you are using. There are a ton of options when initializing. With this one, the sections apparently need to have class="section" .
Related
Just wanted to ask a quick question with my jquery code. just started using Jquery/JS and I feel like there is a cleaner way to do this. It does fade to "and much more" but when it goes back, its not a fade its more of a switch.
$(document).ready(function() {
setInterval(swapText, 4000);
function swapText(){
$("#profile-text-fade").fadeOut(500, function() {
$(this).fadeIn(1000).delay(2000);
$(this).html('and much more!');
$(this).fadeIn(2000, function () {
$(this).html('In the making, Soon to show all the work I can crate!');
});
});
}
});
body {
background-color: #FFC85E;
}
.aligh {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.jumbotron_resize {
padding-top: 18%;
padding-bottom: 10em;
margin-bottom: 10em;
background-color: #FFC85E;
font-size: 1.2em;
}
h1, p{
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Profile Test Page">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Salvador Cervantes">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel='stylesheet' type:'text/css' href='../CSS/main.css'>
<title>
Test page
</title>
</head>
<body>
<div class="align">
<div class="jumbotron jumbotron-fluid jumbotron_resize">
<div class="container">
<h1 class="display-3">test Profile</h1>
<p id='profile-text-fade' class="lead">In the making, Soon to show all the work I can crate!</p>
</div>
</div>
<footer>
<div>
<p>© 2017
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src='../js/main.js'></script>
</body>
</html>
Now what I'm trying to do is to fadeout the text that is on the webpage and replace it with "and much more!" and then fade back to the original text of "in the making...". right now, the last part just snaps back to place and dones't fade. Any help would be amazing!
Thank you
Your text is not fading in as you don't fade it out. ie it does: $("#div").fadeIn().fadeIn()
Change your last fadeIn to:
$(this).fadeOut(500, function() {
$(this).fadeIn(2000, function () {
$(this).html('In the making, Soon to show all the work I can crate!');
You might like to consider a refactor to create a list of messages and then simply loop through them. This will also be re-usable and allow you to add more messages without lots of nasty callback-chaining, eg:
var msgs = ["msg1", "msg2"];
var indx = 0;
$("#div").text(msgs[indx]);
setInterval(function() {
$("#div").fadeOut(
500,
function() {
indx++;
if (indx>=msgs.length) indx=0;
$(this).text(msgs[indx]);
$(this).fadeIn(500);
});
}, 3000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='div'>initial message</div>
I think this is what you needed edited your code, you have to fadeOut it before the last fadeIn, (i have slightly increased the interval for some smooth effect)
$(document).ready(function() {
swapText();
setInterval(swapText, 6000);
function swapText(){
$("#profile-text-fade").stop();
$("#profile-text-fade").fadeOut(1500, function() {
$(this).html('and much more!');
$(this).fadeIn(1500);
$(this).fadeOut(1500, function () {
$(this).fadeIn(1500);
$(this).html('In the making, Soon to show all the work I can crate!');
});
});
}
});
body {
background-color: #FFC85E;
}
.aligh {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.jumbotron_resize {
padding-top: 18%;
padding-bottom: 10em;
margin-bottom: 10em;
background-color: #FFC85E;
font-size: 1.2em;
}
h1, p{
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Profile Test Page">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Salvador Cervantes">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel='stylesheet' type:'text/css' href='../CSS/main.css'>
<title>
Test page
</title>
</head>
<body>
<div class="align">
<div class="jumbotron jumbotron-fluid jumbotron_resize">
<div class="container">
<h1 class="display-3">test Profile</h1>
<p id='profile-text-fade' class="lead">In the making, Soon to show all the work I can crate!</p>
</div>
</div>
<footer>
<div>
<p>© 2017
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src='../js/main.js'></script>
</body>
</html>
I want to change the markdown height to fill div height but I can't make it.
I have the following files -
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/bootstrap-markdown.min.css" rel="stylesheet">
<link href="admin.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="md-editor active half-width">
<textarea id="target-editor" class="target-editor-twitter md-input"> </textarea>
</div>
<div id="result" class="half-width">
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/bootstrap-markdown.js"></script>
<script src="assets/js/markdown.js"></script>
<script src="assets/js/to-markdown.js"></script>
<script src="app.js"></script>
</body>
</html>
app.js
window.onload = function(){
$('#target-editor').markdown({
savable:true,
onShow: function(e){
e.hideButtons("cmdPreview");
},
onSave: function(e) {
alert("Saving '"+e.getContent()+"'...")
},
onChange: function(e){
var content = e.parseContent()
$('#result').html(content);
}
});
};
admin.css
body, html{
height:100%;
}
.half-width{
width:50%;
float:left;
height:100%;
padding:10px;
margin:0;
position:relative;
}
and the output is -
How to change markdown height to fill div height?
Look at snippet
window.onload = function(){
$('#target-editor').markdown({
savable:true,
onShow: function(e){
//e.hideButtons("cmdPreview");
e.$textarea.css('resize','vertical');
e.$textarea.css('height', ($(".md-editor").height()-90)+'px');
},
onSave: function(e) {
alert("Saving '"+e.getContent()+"'...")
},
onChange: function(e){
var content = e.parseContent()
$('#result').html(content);
}
});
};
$(window).resize(function(){
$("#target-editor").height(($(".md-editor").height()-90)+'px');
});
body, html{
height:100%;
}
.half-width{
width:50%;
float:left;
height:100%;
padding:10px;
margin:0;
position:relative;
}
.md-editor>.md-header {
margin-left: 5px;
}
.md-editor {
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-markdown/2.2.1/js/bootstrap-markdown.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-markdown/2.2.1/css/bootstrap-markdown.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="half-width">
<textarea id="target-editor" class="target-editor-twitter md-input" data-provide="markdown-editable" rows="20"> </textarea>
</div>
<div id="result" class="half-width">
</div>
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<title>Prueba</title>
</head>
<body>
<div class="prueba"></div>
</body>
</html>
CSS:
.prueba {
height: 100px;
width: 100px;
background-color: green;
}
JS (Edited):
var main = function() {
$('.prueba').click(function() {
$(this).removeClass('.prueba');
});
};
$(document).ready(main);
It (still) doesn't work. Can someone help me?
To select class, you should preface class name with a dot:
$('.prueba')
JQuery docs you may want to review.
I'm studying Jquery, and I was trying to do a simple SlideShow, but nothing happens...
Here's my HTML
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/Style.css">
<meta charset="UTF-8">
<title>SlideShow</title>
</head>
<body>
<div id="slides">
<img src="imgs/1.jpg">
<img src="imgs/2.jpg">
<img src="imgs/3.jpg">
</div>
<script type="text/javascript">
$(function(){
$("#slides").cycle({
fx: 'fade',
speed:2000,
timeout:4000,
});
})
</script>
<script type="text/javascript" src="js/Jquery.js"></script>
<script type="text/javascript" src="js/Cycle.js"></script>
</body>
</html>
My Css:
*{
margin: 0;
padding: 0;
}
#slides{
width: 1024px;
height: 768px;
margin: 0 auto;
overflow: hidden;
}
I also tried to change, this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
for this:
<script src="js/jquery-1.11.0.js"></script>
Nothing...
You need to include jQuery before your Cycle plugin, so reverse the order of your scripts here:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/Cycle.js"></script>
Also, it's better to include CSS before Javascript as well as putting your Javascript at the bottom of your page before closing </body> tag.
I am having trouble getting the Javascript to work. All three are in the same folder. Also Chrome takes a while to open, but Firefox is instant. Thanks.
My HTML:
<html>
<head>
<title></title>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<script type='text/javascript' src='script.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
</head>
<body>
<div>Hover Over Me!</div>
</body>
</html>
My CSS:
div {
height: 100px;
background-color: #ABCDEF;
font-family: Verdana, Arial, Sans-Serif;
font-size: 1em;
text-align: center;
}
My Javascript:
$(document).ready(function(){
$('div').mouseenter(function(){
$(this).fadeTo(1000, 1);
});
$('div').mouseleave(function(){
$(this).fadeTo(1000, .25);
});
Order of script files: Since your script file is using jQuery it should be included after the jQuery library.
Please have a look at the browser console to see whether there is any error as the first step of debugging client side script issues
<html>
<head>
<title></title>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<script type='text/javascript' src='script.js'></script>
</head>
<body>
<div>Hover Over Me!</div>
</body>
</html>
Also you are missing closing brackets at the bottom of script
$(document).ready(function () {
$('div').mouseenter(function () {
$(this).fadeTo(1000, 1);
});
$('div').mouseleave(function () {
$(this).fadeTo(1000, .25);
});
});
Demo: Plunker