I have a button that resides at the bottom of my page that is supposed to scroll to the top of the page when clicked.
I used identical code from another site that I've worked on to implement this feature, but for some reason nothing happens within the current site with the scrollTop feature.
I've tested the effect with another element on the page and it works if I set the 'button' as a different div, but when I revert it back to the div I want to be able to click from, again the feature no longer works.
Here is my code if anyone might be able to tell what is wrong.
Here is a fiddle of the actual page http://jsfiddle.net/6p6MZ/4/
What I have in my head tag:
<link rel="shortcut icon" href="images/favi.ico" />
<link href="css/about-3elements.css" rel="stylesheet">
<link href="css/pages.css" rel="stylesheet">
<link href="css/page-transitions.css" rel="stylesheet">
<link href="css/footer.css" rel="stylesheet">
<link href="css/responsive-mobile.css" rel="stylesheet">
<link href="css/responsive-tablet.css" rel="stylesheet">
<link href="css/responsive-1025-1500px.css" rel="stylesheet">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/modernizr.custom.28468.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
Script:
<script><!-----------------------------CONTROLS FOOTER BUTTON THAT GOES TO THE TOP OF THE PAGE----------------------------------->
$(document).ready(function(){
$(this).scrollTop(0);
});
$("#nav-arrow").click(function() {
$('html, body').animate({
scrollTop: $("html").offset().top
}, 750);
});
</script>
HTML:
<footer class="bottom-footer">
<div id="nav-arrow"><img src="images/nav-arrow.svg" width="35%"><br><span class="arrow-text" style="width:100px; color:#f8f4ec; font-family:myriad pro, arial, sans-serif; font-size:1.25em;">Back to top</span></div>
<section class="footer-section">
<ul>
<li>FAQ</li>
<li>TERMS</li>
<li>USAGE RIGHTS</li>
<li>PRIVACY POLICY</li>
<li>CONTACT</li>
<li>MEET THE STAFF</li>
</ul>
<div id="social-links-container">
<ul class="social" style="height:40px;">
<li><img src="images/twitter.svg" width="25%" alt="If you like our literary journal, follow 3Elements Review on Twitter" border="none"></li>
<li><img src="images/facebook.svg" width="25%" alt="If you find our literary journal interesting, like 3Elements Review on Facebook" border="none"></li>
<li><img src="images/google-plus.svg" width="25%" alt="Recommend our literary journal 3Elements Review on Google+" border="none"></li>
<li><img src="images/stumble.svg" width="25%" alt="If you like our literary journal, you can find our 3Elements Review page on StumbleUpon" border="none"></li>
</ul>
</div><!---------------SOCIAL LINKS CONTAINER END-------------------->
<h1 class="site-design"> © <script type="text/javascript">
var dteNow = new Date();
var intYear = dteNow.getFullYear();
document.write(intYear);
</script> 3Elements Literary Review, Chicago, IL Site design by Marlon Fowler</h1>
</section>
</footer>
</div><!------------------------CONTAINER THAT SURROUNDS ALL CONTENT BELOW THE NAVIGATION BAR END------------------------------->
Your example works, you just need to make sure jQuery is loaded. Here is your example with jquery loaded, done from the top left dropdown in jsfiddle.
http://bit.ly/1bJ8DXG
Live demo example
Why not simply scrollTop to 0 ?
$("#nav-arrow").click(function() {
$('html, body').animate({scrollTop: 0}, 750);
});
Any why in your code you have twice:
$(document).ready(function(){
$(this).scrollTop(0);
});
?
Why you have 4 times document.ready at all?
Related
I can't get my Flickity JS to work can I get some help. This is my HTML and JS. Please help I've watched 2 youtube videos and can't seem to get it working even though I do it exactly the same. The first part is my HTML and the second is my JS. I've tried removing my css to see if it affected it and it didn't. I'm trying to make it so it shows the images and the information on the list in a carousel using Flickity JS
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FlowTow</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/style.css" type="text/css">
<link rel="stylesheet" href="css/flickity.css">
<link rel="stylesheet" href="https://unpkg.com/flickity#2/dist/flickity.min.css">
<!-- Include Handlebars from a CDN -->
<script src="https://cdn.jsdelivr.net/npm/handlebars#latest/dist/handlebars.js"></script>
<script src="./js/main.js" type=module defer></script>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="js/flickity.js/"> </script>
<script scr="js/flickity1.js"></script>
<script src="https://unpkg.com/flickity#2/dist/flickity.pkgd.min.js"></script>
<div class="main-carousel">
<div class="ten-recent">
<ul id=fan1>
<header class="user">SiddharthToCool</header>
<li><img src=images/fantasy1.jpg alt="fantasy1"></li>
<li class="heart-btn">
<span class="heart"></span>
<span class="numb"></span>
</li>
<li>New Concept</li>
<li class="DOB">Oct 27th 2000</li>
</ul>
</div>
<div class="ten-recent">
<ul id=fan2>
<header class="user">LonJon</header>
<li><img src=images/fantasy2.jpg alt="fantasy2"></li>
<li class="heart-btn">
<span class="heart"></span>
<span class="numb"></span>
</li>
<li>Quick sketch xD</li>
<li class="DOB">Oct 27th 2000</li>
</ul>
</div>
<div class="ten-recent">
<ul id=fan3>
<header class="user">DrawnToLife</header>
<li><img src=images/fantasy3.jpg alt="fantasy3"></li>
<li class="heart-btn">
<span class="heart"></span>
<span class="numb"></span>
</li>
<li>Wish this was my house :c</li>
<li class="DOB">Oct 27th 2000</li>
</ul>
</div>
</div>
</body>
</html>
var elem = document.querySelector('.main-carousel');
var flkty = new Flickity( elem, {
// options
cellAlign: 'left',
contain: true
});
I followed the documentation and it works perfectly. You are probably importing the library wrong, I leave you the same code that you did using cdn
codesandbox-example
Note: I see a problem with codesandbox and you have to reload 2 times for flickity to work
The images in list with .slider class are not being displayed in browser window using MaterializeCSS, but it can be seen in elements. Do sequence of .css and .js loading in head matter?
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Yellowtail' rel='stylesheet' type='text/css'>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="slider">
<ul class="slides">
<li>
<img src="416.jpg">
</li>
<li>
<img src="417.jpg">
</li>
</ul>
</div>
</body>
</html>
First of all, you are including two versions of jQuery, remove the <script> tag for jquery-2.1.1.min.js.
The images are not being displayed because you are not initializing the slider. Add the following jQuery code:
<script>
$(function(){
$('.slider').slider();
});
</script>
Remove opacity: 0 for .slider .slides li
I am using a vanilla version of Bootstrap and trying to create a general template for a friend to use on all their sites. I've used Bootstrap before with no issues, but now am having an issue. To clarify: to my knowledge I have not altered the Bootstrap js or css code at all.
The problem is that links in the navbar are not clickable.
HTML Beginning
<head>
<title>Comic Title - Update Schedule</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<? require "walrus.php"; ?>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('.navbar-nav a[href]').click(function (e) { e.preventDefault(); });
});
</script>
<style>
.affix {
top: 0;
width: 100%;
}
.affix + .container-fluid {
padding-top: 70px;
}
</style>
</head>
<body>
<div class="container-fluid" style="background-color:#00FF00;color:#fff;height:150px;">
<h1>Example Header</h1>
<h3>You'll probably want a cool image here.</h3>
</div>
<nav class="navbar navbar-default" data-spy="affix" data-offset-top="150" style="z-index: 1001;">
<ul class="nav navbar-nav">
<li><a class="link" href="#">Home</a></li>
<li><a class="link" href="http://www.google.com">About</a></li>
<li><a class="link" href="http://www.google.com">Characters</a></li>
<li><a class="link" href="page.php?p=archive">Archive</a></li>
</ul>
</nav>
Posts I have looked at and have not worked (or were not permanent solution):
1 and 2.
The script you have in your HTML is what is preventing the links from being clickable.
Anchor tags are by default, clickable, however your jQuery function is using the event method, preventDefault, which does exactly what it says, prevents the anchor tags default event; being clickable.
Good luck!
My code works fine when viewing the web page on a computer, but when I use the emulator or iPhone with xCode the entire page does not load. Perhaps the top 10 - 25% of the page appears and the rest is cut off. Below is an example of code. All help is appreciated!
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
object {
width: 100%;
min-height: 100%;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" href="css/jquery-mobile-slide-menu.css" type="text/css" />
<script type="text/javascript" src="js/jquery-mobile-slide-menu.js"></script>
<script>
function MyFunction(id) {
var num=id;
if (num == "foxnews") {
$("#content").mobile.loadPage("http://m.foxnews.com");
}
if (num == "cnn") {
$('#content').load('http://m.cnn.com');
$('#content').trigger("pagecreate").trigger("refresh");
}
if (num == "home") {
location.reload();
}
//$("#content").html('<object data="http://www.foxnews.com" />');
//document.getElementById("content").innerHTML="<img src='Background.png'>";
}
</script>
</head>
<body>
<div id="side-menu">
<ul>
<li><a id="home" href="" onclick="MyFunction(this.id);">Home</a></li>
<li><a id="cnn" href="#" onclick="MyFunction(this.id);">   CNN</a></li>
<li><a id="foxnews" href="#" onclick="MyFunction(this.id);">   Fox News</a></li>
<li>Page 2<span class="icon"></span></li>
<li>Page 3<span class="icon"></span></li>
</ul>
</div>
<div data-role="page" id="about-the-band" data-title="Page Title" data-theme="b" class="pages">
<div data-role="header" data-theme="b">
Menu
<h1>Header</h1>
</div>
<div id="content" data-role="content">
<p>Content Goes Here</p>
</div>
</div>
<script type="text/javascript">
$(function(){
$('#side-menu').slideMenu();
});
</script>
</body>
</html>
keyword: crossdomain
Excerpt from deprecated Jquery Mobile:
"When jQuery Mobile attempts to load an external page, the request runs through $.mobile.loadPage(). This will only allow cross-domain requests if the $.mobile.allowCrossDomainPages configuration option is set to true."
Load page to a div jQuery Mobile:
$("#landingPage").live('pageinit', function() {
jQuery.support.cors = true;
$.mobile.allowCrossDomainPages=true;
});
but maybe i am completely on the wrong scent; but you should open a jsfiddle, otherwise its just like searching a needle in a haystack.
http://jspears8.mydevryportfolio.com/gallery1.html
I uploaded to my school portfolio in hopes of giving a real vision of what is taking place. The the first fancybox element you open doesn't work. I'm using a prebuilt fancybox css. I've tried several others. In my actual page, it loads an empty fancybox and will load anything cycled through, but that first click when you wander to the page is blank white each time.
What am I doing wrong? This is the gallery below.
<div id="gallery">
<img src="images/thumbs/AlatheusEberwolf_t.jpg" width="94" height="94" alt="Alatheus Eberwolf">
<img src="images/thumbs/Quentin_II_t.jpg" width="94" height="94" alt="Quentin II">
<img src="images/thumbs/RolithAlinaEngaged_t.jpg" width="94" height="94" alt="Rolith and Alina Get Engaged!">
<img src="images/thumbs/RolithAlinaMarried_t.jpg" width="94" height="94" alt="Rolith and Alina Get Married">
<img src="images/thumbs/Spear-of-the-Ancients_t.jpg" width="94" height="94" alt="Spear of the Ancients">
<img src="images/thumbs/Tep_Itaki_t.jpg" width="94" height="94" alt="Tep Itaki">
</div>
Javascript
$(document).ready(function() {
$('#gallery a').fancybox({
overlayColor: '#0CF',
overlayOpacity: .3,
transitionIn: 'elastic',
transitionOut: 'elastic',
easingIn: 'easeInSine',
easingOut: 'easeOutSine',
titlePosition: 'outside' ,
cyclic: true
});
}); // end ready
In a quick review of your page I can see the following:
You call twice jQuery (_js/jquery-1.7.2.min.js and _js/jquery.js)
Your call to the jQuery must be before the fancybox call
Take a look at the <head> tag in your HTML:
<meta charset="utf-8">
<title>Course Project</title>
<link type="text/css" rel="stylesheet" href="_css/layout.css">
<link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css">
<script id="twitter-wjs" src="http://platform.twitter.com/widgets.js">
<script src="_js/jquery-1.7.2.min.js">
<script src="_js/jquery.easing.1.3.js">
<script src="fancybox/jquery.fancybox-1.3.4.min.js">
<script src="_js/jquery.js" type="text/javascript">
<script src="_js/interface.js" type="text/javascript">
<style type="text/css">
<script type="text/javascript">
<link type="text/css" rel="stylesheet" href="dockstyle.css">
<style type="text/css">
<link type="text/css" rel="stylesheet" href="navstyle.css">
Your fancybox example works fine if you have only:
<link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css">
<script src="_js/jquery-1.7.2.min.js">
<script src="fancybox/jquery.fancybox-1.3.4.min.js">
So I believe some javascript methods are overiding.
I hope this helps