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!
Related
This is my html for a dropdown menu. Initially, in CSS the menu is on display: none; .
<!doctype html>
<html>
<head>
<title>DropDown Menu</title>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>DropDown Menu</h1>
<div id="menuButton" >Menu Button</div>
<div>
<ul id="dropdown">
<li>
Home</a>
</li>
<li>
Services</a>
</li>
<li>
About</a>
</li>
<li>
Contact</a>
</li>
<li>
Partners</a>
</li>
</ul>
</div>
<!-- Load the CDN first -->
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- If CDN fails to load, serve up the local version -->
<script>window.jQuery || document.write('<script src="js/jquery-2.1.4.js"><\/script>');</script>
<script src="js/script.js"></script>
</body>
</html>
And this is my jQuery script:
// script.js
$(function () {
$( "#menuButton" ).click(function() {
$( "#dropdown" ).slideToggle();
});
});
The above jQuery does not work. However, if, inside the div I add a <p> tag with id= menuButton, it works perfectly fine. Could anyone please help me with this? I have been struggling for a while.
check this fiddle, I have corrected some issues in your markup such as making
Home</a>
to
Home
Your code work fine otherwise
There are a few problems in your code:
1. Wait for DOM
The problem is that your script is probably executed before the DOM is ready. You should trigger the script only once document is ready - i.e.:
$(document).ready(function() {
$( "#menuButton" ).click(function() {
$( "#dropdown" ).slideToggle();
});
});
Otherwise you are trying to add a click handler to a not-yet-existing #menuButton.
2. Fix the <a> tags
The following line of code
Home</a>
Should become:
Home
Do the same fix for other anchor tags as well.
Other than the markup issues in HTML, your code runs just fine as I have checked it via Jsfiddle https://jsfiddle.net/bryomckim/pmw7xjwf/
js
$(function () {
$( "#menuButton" ).click(function() {
$( "#dropdown" ).slideToggle();
});
});
css
#dropdown {
display: none;
}
<!doctype html>
<html>
<head>
<title>DropDown Menu</title>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="style.css">
<!-- Load the CDN first -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>DropDown Menu</h1>
<div id="menuButton" >Menu Button</div>
<div>
<ul id="dropdown">
<li>
Home</a>
</li>
<li>
Services</a>
</li>
<li>
About</a>
</li>
<li>
Contact</a>
</li>
<li>
Partners</a>
</li>
</ul>
</div>
</body>
</html>
I am writing a simple HTML page using the Twitter Bootstrap.
But the navbar and links are rendered as normal HTML on the browser.
I have referred to multiple sites but the same steps are given everywhere. I am not sure where I am going wrong.
Code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel= "stylesheet" href= "css/bootstrap.css" type="text/css">
<title> Bootstrap example</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<h1>Hello, world!</h1>
<div class ="container">
<h1>Bootstrap Site</h1>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active">Home</li>
<li>Projects</li>
<li>Services</li>
<li>Downloads</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
You're using incorrect quotations (” instead of " or ') and missing a few equals (=) signs. Change:
<meta charset=”utf-8”>
<link rel ”stylesheet” href ”css/bootstrap.css” type=”text/css”>
...
<script src ”js/bootstrap.js”></script>
To:
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.css" type="text/css">
...
<script src="js/bootstrap.js"></script>
You are not including bootstrap (probably wrong copy/paste from somewhere).
change
<link rel ”stylesheet” href ”css/bootstrap.css” type=”text/css”>
<script src ”js/bootstrap.js”></script>
to
<link rel="stylesheet" href="css/bootstrap.css" type="text/css"></link>
<script src="js/bootstrap.js"></script>
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.
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?
I have tried to work this out but not getting anywhere with it. Basically I would like my custom spinner loader image to appear first for few seconds then it fades out and then the Div with id=home should then fadeIn with all its contents.
I have tried several approach but not close to desired result. If there is any useful link that would help please post link.
My HTML page:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="stylesheet" type="text/css" href="css/mystyles.css"/>
<link rel="stylesheet" href="css/mytheme.min.css" />
<link rel="stylesheet" href="css/structure-1.3.2.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script src="js/myscript.js"></script>
</head>
<body>
<div class="css-loader-icon"><img src="css/images/loader.gif"/></div>
<!-- Page: home -->
<div id="home" data-role="page" data-position="fixed" data-theme="a" data-title="My first app">
<div data-role="navbar" data-mini="true">
<ul>
<li><a href="#home" class="css-hnav" >Home</a></li>
<li><a href="#home" class="css-hnav" >Contact</a></li>
</ul>
</div><!-- navbar -->
<div data-role="content" class="css-listview">
<ul class="css-ul-list">
My Blogs
Tweet with me
</ul>
</div>
</div><!-- page -->
JS:
$(function() {
$(".css-loader-icon").fadeOut(2000, function() {
$("#home").fadeIn(1000);
});
});
CSS:
.css-loader-icon {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
#content {display:none;}
Well try with loader icon displaying instead of hiding it in CSS and hiding #home div.
display:none;
#home{ display:none;}
Then your js will hide loader gif after 2 secs and show #home div. As gif is already hidden you are not able to feel the effect.