I have two issues:
Having a problem with Jquery's animate() not working smoothly on Chrome, Safari and Opera. The Jquery animate()function works fine in Firefox but does not run smoothly using the other browsers(Just pops up as opposed to raising smoothly)
When I click the button to activate the div it moves up but when I click to return the div to its normal state to slide back down, it does not work.
Any suggestions with rewriting my code/logic? Thank You!
Html:
<link rel="stylesheet" type="text/css" href="icons-portfolio/foundation-icons/foundation-icons.css">
<!-- CSS for resets -->
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<!-- CSS for other styles -->
<link rel="stylesheet" type="text/css" href="css/components.css">
<!--*****Need JS Libraries in head ************ -->
<!--<script src="js/modernizr.custom.38675.js"></script>-->
<script src="js/modernizr.custom.79941.js"></script>
<!--
This script enables structural HTML5 elements in old IE.
http://code.google.com/p/html5shim/ -->
<!--[if lt IE 9]>
<script src = "//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!-- Part 1: Wrap all page content here -->
<div class="wrap">
<header>
<div>
<h1 class="mainHeadNav">CSS3 Effects 'N Stuff</h1>
</div>
<img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png" alt="Fork me on GitHub">
</header>
<!-- grid -->
<main class="grid_main">
<section class="userBox">
<div>
<figure class="user_photo_container">
<figcaption class="user_name">
<span>Menu</span>
</figcaption>
</figure>
<ul class="user_inner" id="main-dash">
<li>Back to Portfolio<i class="fi-photo"></i></li>
<li>Facebook<i class="fi-social-facebook"></i></li>
<li>Twitter<i class="fi-social-twitter"></i></li>
<li>Instagram<i class="fi-social-instagram"></i></li>
<li><a id="dashClick" href="#">Dashboard<i class="fi-page"></i></a></li>
</ul>
</div>
</section>
<section class="boxFeatures box1">
<div class="inspire">
<h2>Transition</h2>
</div>
</section>
<section class="boxFeatures box2">
<div class="inspire">
<h2>Hover & Scale</h2>
</div>
</section>
<section class="boxFeatures box3">
<div class="inspire">
<h2>Sideways Flip</h2>
</div>
</section>
<section class="boxFeatures box4">
<div class="inspire">
<h2>3D</h2>
</div>
</section>
<!-- Dashboard start -->
<div id="Dashboard">
<h2 class="dashTitle">Project Information</h2>
<div class="dashInnerAdd">
<p>
Welcome to my project CSS3 Effects N' Stuff! I started this project to develop different cool effects using the new CSS3 Properties. Feel free to fork over the repository and contribute! If you like the project and want to chat email me: amechiegbe#gmail.com
</p>
</div>
</div>
</main> <!-- end grid main-->
</div> <!--end wrap -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/application.js"></script>
Javascript:
$(function() {
//Modernizer Test
Modernizr.addTest("keyframe", Modernizr.testAllProps('animationName'));
Modernizr.prefixed('requestAnimationFrame', window, true);
// global functions
var dash = $('#Dashboard');
var dashBtn = $('#dashClick');
var clicked = false;
dashBtn.on('click',function (e) {
e.preventDefault();
if(clicked === true || clicked === false) {
dash.animate({"top":0}, 400, function () {
console.log('Up');
});
} else {
clicked = true;
dash.animate({"top":600}, 400, function () {
console.log('Down');
});
}
});
//make it height of document
dash.document.height();
});
Without your code it is hard to see which effect you are using or how you are easing it. You can use the properties of .animate to change the way it runs smoothly.
https://api.jquery.com/animate/
.animate( properties [, duration ] [, easing ] [, complete ] )
The default easing is Swing.
I would say to try linear... to me that is more "smooth".
http://api.jqueryui.com/easings/
Related
I have a wierd situation, where my webpage used to load just fine, before I put it online with hosting and domain. Now the Modal, that's supposed to popup on click, takes so long to load (in particularly through safari, firefox and IOS) that it undermines the whole purpose of the page. And so it's a real problem. At this point it seems to load just fine in chrome though.
I have tried several things, for example thoroughly checking my FTP-client, deleting, editing code, re-uploading but at this point, nothing has worked. Can anyone offer some insight as to where I go wrong?
window.onload = function() {
const span = document.querySelectorAll(".PopUp");
span.forEach(LIelm => {
LIelm.addEventListener('click', showHideModal)
})
};
function showHideModal(e) {
const projectNode = e.target.parentNode.parentNode;
if (!projectNode.matches('.Project, .modal-content')) return;
e.preventDefault();
if (projectNode.matches('.Project')) {
document.getElementById(projectNode.dataset.modal).style.display = "block";
} else {
projectNode.parentNode.style.display = "";
}
}
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="ModalPopUp.js"></script>
</head>
<body>
<div class="content">
<ul style="list-style: none;">
<li class="Project" data-modal="myModal_1">
<span id="myBtn_1">
Lirma Type
</span>
<span id="year">
2019
</span>
<div class="Describtion">
<p>Typedesign</p>
<br>
<span class="PopUp">Images</id>
</div>
<div id="myModal_1" class="modal">
<div class="modal-content">
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="Images/Lirma/type.jpg" alt="img" width="100%">
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</body>
<script src="ModalHide.js"></script>
<script src="pExpand.js"></script>
What seems to take so long to load are the images so I see in Chrome it does not take so long because it is using the cache memory if you clean it and run it again it takes about 20 seconds
1.-chrome no cache
2.-chrome cache
Try using an image compressor to reduce weight and improve download time
https://compressjpeg.com/es/
I'm trying to make a html button send certain string to my localhost socket server.(or even console.logging) and then another when i release it. the sending itself seems to be going fine but the mousedown event only happens when i release the button.
Ask away if you want, since i know it seems like a pretty trivial thing, but i just can't seem to get it to work. onclick also only works when mouse is released. And the only thing i can find that's vaguely related when i look it up is w****ing3schools, where the example works, but if i implement it as test in my code it doesnt.
Here is the html with js code, don't worry about asking for more source codes ^^
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initialscale=1, minimum-scale=1">
<link rel="stylesheet" href="css/reset.css" type="text/css">
<link rel="stylesheet" href="css/stylesheet.css" type="text/css">
<title>Project pong game</title>
<!-- SCRIPTS -->
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="js/script.js" type="text/javascript"></script>
<script>
var socket = io();
function doorClicked(){
socket.emit('door', function(data){
socket.send("Door");
});
}
function blueUpPressed() {
socket.emit('blueMov', function(data){
socket.send("1:0");
});
}
function redUpPressed() {
socket.emit('redMov', function(data){
socket.send("1:0");
});
}
function blueDownPressed() {
socket.emit('blueMov', function(data){
socket.send("0:1");
});
}
function redDownPressed() {
socket.emit('redMov', function(data){
socket.send("0:1");
});
}
function blueUpReleased() {
socket.emit('blueMov', function(data){
socket.send("0:0");
});
}
function redUpReleased() {
socket.emit('redMov', function(data){
socket.send("0:0");
});
}
function blueDownReleased() {
socket.emit('blueMov', function(data){
socket.send("0:0");
});
}
function redDownReleased() {
socket.emit('redMov', function(data){
socket.send("0:0");
});
}
</script>
</head>
<body>
<!-- BEGINSCHERM -->
<img src="img/red&blueglitch.gif" id="e-pong-logo" alt="logo e-pong"/>
<button id="startBtn">Start</button>
<div id="opacityLayer" class="team"></div>
<!-- Tutorial RED -->
<section id="tutorialRed1" class="team">
<button id="nextRed2" class="nextBtnStyle red"></button>
</section>
<section id="tutorialRed2" class="team">
<button id="nextRed3" class="nextBtnStyle red"></button>
</section>
<section id="tutorialRed3" class="team">
<button id="nextRedStart" class="nextBtnStyle red"></button>
</section>
<!-- Tutorial BLUE -->
<section id="tutorialBlue1" class="team">
<button id="nextBlue2" class="nextBtnStyle blue"></button>
</section>
<section id="tutorialBlue2" class="team">
<button id="nextBlue3" class="nextBtnStyle blue"></button>
</section>
<section id="tutorialBlue3" class="team">
<button id="nextBlueStart" class="nextBtnStyle blue"></button>
</section>
<!-- BLUE TEAM -->
<section id="blueteam" class="team">
<img class="glitchEffect" src="img/blueteamglitch.gif"/>
<section id="booster">locked</section>
<button id="blueUp" class="buttonStyle" onmousedown="blueUpPressed()" onmouseup = "blueUpReleased()"></button>
<button id="blueDown" class="buttonStyle" onmousedown="blueDownPressed()" onmouseup = "blueDownReleased()"></button>
<img id="startBlueTutorial" class="infoBtn" src="img/infoBtn.png"/>
</section>
<!-- RED TEAM -->
<section id="redteam" class="team">
<img class="glitchEffect" src="img/redteamglitch.gif"/>
<section id="booster">locked</section>
<button id="redUp" class="buttonStyle" onmousedown="redUpPressed()" onmouseup = "redUpReleased()"></button>
<button id="redDown" class="buttonStyle" onmousedown="redDownPressed()" onmouseup = "redDownReleased()"></button>
<img id="startRedTutorial" class="infoBtn" src="img/infoBtn.png"/>
</section>
<!-- Tutorial 1/2 INFO -->
<section id="tutorialRedInfo" class="team"></section>
<!-- Tutorial 2/2 INFO -->
<section id="tutorialBlueInfo" class="team"></section>
</body>
When you click a navigation item at the top of the screen, a blank div pops up with a huge "x" image that when clicked, the x image is suppose to close the blank div and everything else. For "jobs, contact, press, and legal" it doesn't work when clicked but for "support" it works perfectly. I put the code side by side to see errors, copy the support code and paste for others... basically everything imaginable for 1-2hours. I found a glitch that when you open the "support" first then close it out and open another one, the x image works but I don't know why. Here is my html and the rest of the code will be uploaded to codeine
demo:
http://codepen.io/anon/pen/dvzgrY
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Nunito:700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="magicstyle.css">
<body>
<!-- Section for Jobs Popup -->
<div id="job-popup">
<div class="x-div1"><img class="x-icon1" id="fadeX1" src="Pictures/web%20x%20icon%20white.png"></div>
<div id="job-content">
<h1 id="jobWords"></h1>
</div>
</div>
<!-- Section for Contact Popup -->
<div id="contact-popup">
<div class="x-div2"><img class="x-icon2" id="fadeX2" src="Pictures/web%20x%20icon%20white.png"></div>
<div id="contact-content">
<h1 id="contactWords"></h1>
</div>
</div>
<!-- Section for Press Popu -->
<div id="press-popup">
<div class="x-div3"><img class="x-icon3" id="fadeX3" src="Pictures/web%20x%20icon%20white.png"></div>
<div id="press-content">
<h1 id="pressWords"></h1>
</div>
</div>
<div id="legal-popup">
<div class="x-div4"><img class="x-icon4" id="fadeX4" src="Pictures/web%20x%20icon%20white.png"></div>
<div id="legal-content">
<h1 id="legalWords"></h1>
</div>
</div>
<div id="support-popup">
<div class="x-div5"><img class="x-icon5" id="fadeX5" src="Pictures/web%20x%20icon%20white.png"></div>
<div id="support-content">
<h1 id="supportWords"></h1>
</div>
</div>
<div id="top-bar">
<a class="burger-nav"></a>
<div id="nav-menu">
<span id="job">Jobs</span>
<span id="contact">Contact</span>
<span id="press">Press</span>
<span id="legal">Legal</span>
<span id="support">Support</span>
</div>
</div>
<div id="container">
<div id="name-div">
<h1 id="name">Open Touch</h1>
</div>
<ul class="bubbles">
<li id="firstCircle"></li>
<li id="secondCircle"></li>
<li id="thirdCircle"></li>
<li id="fourthCircle"></li>
<li id="fifthCircle"></li>
<li id="sixthCircle"></li>
</ul>
</div>
</body>
</head>
</html>
Any help will be greatly appreciated :D
The problem is that all your popup containers (job-popup, contact-popup, etc) are positioned absolutely at the same location with the same z-index. Since the support-popup is last in your html, it's hiding all the popup containers underneath it. You are never actually clicking on the other x-icons (only on the top support one), and therefore, the click handlers are not getting triggered.
For a quick fix, you could update the z-index, in your nav click handlers. For example:
$("#job").click(function() {
$("#job-popup").fadeIn(300);
$("#job-popup").css({'z-index': 15});
$("#job-content").fadeIn(300);
$("#jobWords").fadeIn(300);
$(".x-icon1").fadeIn(300);
$("#name").fadeOut(300);
$("#container").css("-webkit-filter", "blur(10px)");
}
and then move it back down here
$(".x-icon1").click(function() {
$("#job-popup").fadeOut();
$("#job-popup").css({'z-index': 10});
$("#job-content").fadeOut();
$("#jobWords").fadeOut();
$(".x-icon1").fadeOut();
$("#name").fadeIn();
$("#container").css("-webkit-filter", "blur(0px)");
}
and then replicate this for all your click handlers.
But you should also consider refactoring your html/css, since the structure is incorrect (body within head, for example), and a lot of the css is probably unnecessary.
Hi Im trying to get my code to work for checking if the html is right in the textarea. If it is right it will open another page with what was in the textarea already as a website (this part works I checked before creating the if else). I only want that to happen if the code in the textarea is the same as what I put in my value in javascript (this dosent work). Heres my whole html for that page.
<!DOCTYPE html>
<html>
<head>
<title>Lesson 1</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.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.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<script type="text/javascript">
function ShowResult()
{
var check = x ;
var html = "<h1>This is Heading 1</h1><h2>This is Heading 2</h2><h3>This is Heading 3</h3><h4>This is Heading 4</h4><h5>This is Heading 5</h5><h6>This is Heading 6</h6><p>This is Paragraph Text</p><blockquote><p>This is in a qoute</p><small>Person <cite>Source Title</cite></small></blockquote>" ;
if (check === html) {
my_window = window.open("about:blank", "mywindow1");
my_window.document.write('<!DOCTYPE html><html><head><title>Lesson 1 Result</title><link href="css/bootstrap.min.css" rel="stylesheet"></head><body>' + '<div class="alert alert-dismissible alert-info"><button type="button" class="close" data-dismiss="alert">×</button><strong>Tip</strong> This is your code editor output. It will sow up when you are right in your lesson. To go back and continue close this tab ( click the x on the top bar of your web browser )</p></div><p>' + x + '</body></html>');
}
}
</script>
<body>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">Learn Lesson 1 HTML Syntax</div>
<div class="panel-body">
</div>
</div>
<!-- Ad starts here-->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- LRN Ad -->
<ins class="adsbygoogle"
style="display:inline-block;width:320px;height:100px"
data-ad-client="ca-pub-9273905782779277"
data-ad-slot="9421350343"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- ends here -->
</div>
<div class="container">
<textarea style="font-size:15px; resize: none; height: 600px; width: 100%; font-family: Consolas,monaco,monospace; background-color: #6F6F6F; color: #F9F9F9;" onblur="x=this.value">
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>
<p>This is Paragraph Text</p>
<blockquote>
<p>This is in a qoute</p>
<small>Person <cite>Source Title</cite></small>
</blockquote>
</textarea>
<div class="col-md-12">
<br />
<a onclick="ShowResult()" class="btn btn-default btn-lg btn-block">Try it out</a>
<!-- Ad starts here-->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- LRN Ad -->
<ins class="adsbygoogle"
style="display:inline-block;width:320px;height:100px"
data-ad-client="ca-pub-9273905782779277"
data-ad-slot="9421350343"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- ends here -->
<hr>
<br/>
<p>Copyleft ;-) Maksim Tonyushkin 2015</p>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
The part that doesn't work is:
<script type="text/javascript">
function ShowResult()
{
var check = x ;
var html = "<h1>This is Heading 1</h1><h2>This is Heading 2</h2><h3>This is Heading 3</h3><h4>This is Heading 4</h4><h5>This is Heading 5</h5><h6>This is Heading 6</h6><p>This is Paragraph Text</p><blockquote><p>This is in a qoute</p><small>Person <cite>Source Title</cite></small></blockquote>" ;
if (check === html) {
my_window = window.open("about:blank", "mywindow1");
my_window.document.write('<!DOCTYPE html><html><head><title>Lesson 1 Result</title><link href="css/bootstrap.min.css" rel="stylesheet"></head><body>' + '<div class="alert alert-dismissible alert-info"><button type="button" class="close" data-dismiss="alert">×</button><strong>Tip</strong> This is your code editor output. It will sow up when you are right in your lesson. To go back and continue close this tab ( click the x on the top bar of your web browser )</p></div><p>' + x + '</body></html>');
}
}
</script>
The value x is given on the textarea onblur="x=this.value".
Any help?
Textareas have no value attribute. You need to use innerHTML
I solved my problem by like dis (the reason it wasn't working was because of the spacing):
<!DOCTYPE html>
<html>
<head>
<title>Lesson 0</title>
<link rel="icon" type="image/png" href="favicon.ico">
<!-- Bootstrap -->
<link href="css/bootstrap.min.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.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<script type="text/javascript">
function ShowResult()
{
var x = document.getElementById("html").value
var z = document.getElementById("answer").value
if (x === z) {
my_window = window.open("about:blank", "mywindow1");
my_window.document.write('<!DOCTYPE html><html><head><title>Lesson 0 Result</title><link href="css/bootstrap.min.css" rel="stylesheet"></head><body>' + '<div class="alert alert-dismissible alert-info"><button type="button" class="close" data-dismiss="alert">×</button><strong>Tip</strong> This is your code editor output. It will show up when you are right. To go back and continue close this tab ( click the x on the top bar of your web browser )</p></div><p>' + x + '</body></html>');
}
}
</script>
<body>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">Learn Lesson 0 Geting started</div>
<div class="panel-body">
The first lesson will be a tutorial on how to use this website. This part of the webpage is the part that teaches about code and gives you examples. Below is what you will need to do to complete this lesson. The gray box is your code editor. Inside it you will write your code for the lesson. Good luck on your first lesson (click answers if you need help).
</div>
</div>
<ul class="nav nav-tabs">
<li class="active">Steps</li>
<li class="">Answer</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="home">
<div class="list-group">
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">1.</h4>
<p class="list-group-item-text">Click on the code editor and between the <code><h1></code> and <code></h1></code> tags write <kbd>Advertisement</kbd></p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">2.</h4>
<p class="list-group-item-text">Click Submit on the bottom of the page</p>
</a>
</div>
</div>
<div class="tab-pane fade" id="profile">
<textarea id="answer" style="font-size:15px; resize: none; height: 400px; width: 100%; font-family: Consolas,monaco,monospace; background-color: #F9F9F9; color: #6F6F6F;">
<h1>Advertisement</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>
<p>This is Paragraph Text</p>
<blockquote>
<p>This is in a qoute</p>
<small>Person <cite>Source Title</cite></small>
</blockquote></textarea>
</div>
</div>
<!-- Ad starts here-->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- LRN Ad -->
<ins class="adsbygoogle"
style="display:inline-block;width:320px;height:100px"
data-ad-client="ca-pub-9273905782779277"
data-ad-slot="9421350343"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- ends here -->
</div>
<div class="container">
<textarea id="html" style="font-size:15px; resize: none; height: 600px; width: 100%; font-family: Consolas,monaco,monospace; background-color: #6F6F6F; color: #F9F9F9;">
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>
<p>This is Paragraph Text</p>
<blockquote>
<p>This is in a qoute</p>
<small>Person <cite>Source Title</cite></small>
</blockquote></textarea>
<div class="col-md-12">
<br />
<a onclick="ShowResult()" class="btn btn-default btn-lg btn-block">Submit</a>
<!-- Ad starts here-->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- LRN Ad -->
<ins class="adsbygoogle"
style="display:inline-block;width:320px;height:100px"
data-ad-client="ca-pub-9273905782779277"
data-ad-slot="9421350343"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- ends here -->
<hr>
<br/>
<p>Copyleft ;-) Maksim Tonyushkin 2015</p>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
I'm having problems implementing the One Page Nav and scrollTo jQuery plugins (Seems I need more reputation to post the links, so I hope you know which plugins I'm referring to). I'm a complete beginner to Javascript and I just want the links of my navigation bar to have a scrolling effect as seen here.
I've pasted the entire code of my html page below as I'm not sure where I've gone wrong. For now I've left in the ready functions from both plugins (although I have tried with only one - and also tried attaching it to 'div#nav', '#navbar', etc.).
<html>
<head>
<meta charset="utf-8">
<title>deepeedesigns - Portfolio site of Web Designer Dan Pierce</title>
<link rel="icon" type="image/png" href=""><!--favicon-->
<meta name="description" content=""><!--description that appears under Google listing-->
<meta name="keywords" content="">
<meta name="robots" content="">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/jquery.scrollTo.js"></script>
<script src="js/jquery.nav.js"></script>
</head>
<body>
<div id="header">
<div class="container">
<div id="navbar">
<div id="logo"><img src="images/logo.png"></div>
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div><!--navbar-->
</div><!--container-->
</div><!--header-->
<div id="home">
<div class="background">
<div class="container">
</div><!--container-->
</div><!--background-->
</div><!--home-->
<div id="about">
<div class="background">
<div class="container">
</div><!--container-->
</div><!--background-->
</div><!--about-->
<div id="portfolio">
<div class="background">
<div class="container">
</div><!--container-->
</div><!--background-->
</div><!--portfolio-->
<div id="contact">
<div class="background">
<div class="container">
</div><!--container-->
</div><!--background-->
</div><!--contact-->
$(document).ready(function() {
$('#nav').onePageNav();
});
$(document).ready(function() {
$('#nav').$scrollTo();
});
</body>
</html>
Where is your opening <script> and closing </script> tag for the jQuery?
Update:
Why declare $(document).ready twice?
$(document).ready(function() {
$('#nav').onePageNav();
$('#nav').scrollTo();
});
You do not need to use Jquery to scroll top. You can use it on window object
window.scrollTo(0,0);
But if you want to animate or want to perform scroll on specific element, then you can use jquery
$("html, body").animate({ scrollTop: 0 }, "slow");
In your code, you have to write your javascript code inside <script></script> tag.
There is an spelling mistake of scrollTo instead of $scrollTo
Back To Top Link
HTML
<a class="btn-go-top" href="javascript:window.scrollTo(0,0);">Go to top</a>
CSS
.btn-go-top {
position:fixed;
bottom: 20px;
right: 20px;
}