When I click on "Tools" tab, nothing happens: tabs don't switches, not toggles.
$('[data-toggle="tab"]').click(function(e) {
var $this = $(this),
loadurl = $this.attr('href');
$.get(loadurl, function(data) {
$('#content').html(data);
});
$this.tab('show');
return false;
});
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<ul class="nav nav-tabs nav-justified" role="tablist">
<li role="navigation" class="active">My links</li>
<li role="navigation">Statistics</li>
<li role="navigation">Tools</li>
<li role="navigation">Payments</li>
</ul>
</div>
<div id="content" class="container">
</div>
Where I am wrong?
Put
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
before
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
like this:
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
bootstrap.min.js requires jquery.min.js to run first before it.
Related
I'm trying to use bootstrap for the first time and I understand I need to link the js and stylesheets in the head, this is in a master page btw. I did that and It's supposed to set the active class to whichever page is clicked on. I'm not sure what I'm doing wrong, sorry if this has a simple solution I'm not aware of.
<head runat="server">
<title></title>
<link href="Style/css/bootstrap.css" rel="stylesheet" />
<script src="Style/js/bootstrap.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js"></script>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
https://pastebin.com/nBKYaRzh
this code wouldn't format properly here so I had to post it on pastebin.
<nav class="navbar-default menu">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand">Shittalk.tf</a>
</div>
<ul class="nav navbar-nav">
<li class="active" >Home</li>
<li>About</li>
<li>Donate</li>
</ul>
</div>
</nav>
<script type="text/javascript">
$(document).ready(function(){
$('.menu li').click(function(e) {
console.log("hello")
var $this = $(this);
$("li").removeClass("active")
$this.addClass('active');
e.preventDefault();
});
});
</script>
Don't forget to add Bootstrap and jQuery for this.
working example
The localScroll plugin doesn't work for me. The console doesn't say anything and I don't see the error.
Here is my code:
<script type="text/javascript" src="js/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.min.js"></script>
<script type="text/javascript" src="js/jquery.localScroll.js"></script>
<div id="navbar" class="collapse navbar-collapse">
<ul id="navigation_menu" class="marginul nav navbar-nav">
<li class="active">Mapa</li>
<li>Nosotros</li>
<li>Contacto</li>
</ul>
</div>
Then I have 3 sections with id and their content:
<section id="mapa" class="section_mapa"></section>
<section id="institucional" class="section_institucional fondoinstitucional"></section>
<section id="contacto" class="section_contacto">
My jQuery's code:
<script type="text/javascript">
$(document).on("ready",function(){
$("#navigation_menu").localScroll({
duration:1000,
});
});
</script>
Please help me!
Thanks!
I'm doing a javascript vertical submenu, I'm using yui tools but the submenu is duplicated, I don't know what part of code is wrong.
YAHOO.util.Event.onContentReady("menu_vertical", function() {
var elMenu = new YAHOO.widget.Menu("menu_vertical", {
width: '550px'
});
elMenu.render();
elMenu.show();
});
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.0/
build/menu/assets/skins/sam/menu.css">
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/
yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/
container/container_core-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/menu/
menu-min.js"></script>
<div id="menu_vertical" class="yuimenu">
<div class="bd">
<ul class="first-of-type">
<li class="yuimenuitem">MENU1
</li>
<li class="yuimenuitem">MENU2
</li>
<li class="yuimenuitem">MENU3
<div id="consectetuer" class="yuimenu">
<div class="bd">
<ul>
<li class="yuimenuitem">SUBMENU1
</li>
<li class="yuimenuitem">SUBMENU2
</li>
<li class="yuimenuitem">SUBMENU3
</li>
</ul>
</div>
</div>
</li>
<li class="yuimenuitem">MENU4
</li>
</ul>
In your JSFiddle you linked, your href and src tags have spaces in the path and these link and script tags must not be embedded inside of a script since they are raw HTML. Here is an updated JSFiddle, but you still have issues.
You are attempting to reference plain http over an https connection, this is not safe, and JSFiddle and Stackoverflow will not allow you to do such a thing.
Other than that, your code looks fine. The Menu Family: Multi-tiered Menu From Markup example that I found using Google may be a good place to check if your code is correct. Here is the "clean page" of that example.
YAHOO.util.Event.onContentReady("menu_vertical", function () {
var elMenu = new YAHOO.widget.Menu("menu_vertical", {
width: '550px'
});
elMenu.render();
elMenu.show();
});
<script src="http://yui.yahooapis.com/2.3.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script src="http://yui.yahooapis.com/2.3.0/build/container/container_core-min.js"></script>
<script src="http://yui.yahooapis.com/2.3.0/build/menu/menu-min.js"></script>
<link href="http://yui.yahooapis.com/2.3.0/build/menu/assets/skins/sam/menu.css" rel="stylesheet"/>
<div id="menu_vertical" class="yuimenu">
<div class="bd">
<ul class="first-of-type">
<li class="yuimenuitem">MENU1</li>
<li class="yuimenuitem">MENU2</li>
<li class="yuimenuitem">MENU3
<div id="consectetuer" class="yuimenu">
<div class="bd">
<ul>
<li class="yuimenuitem">SUBMENU1</li>
<li class="yuimenuitem">SUBMENU2</li>
<li class="yuimenuitem">SUBMENU3 </li>
</ul>
</div>
</div>
</li>
<li class="yuimenuitem">MENU4</li>
</ul>
</div>
</div>
I need the navigation tab on the left side to slide down its contents on hover. But the code is not working. What might be the problem.
<ul class="nav nav-tabs nav-stacked">
<li id = "mousehover">
<a style="background-color:#f78144; color: #000; text-align: center;" href="#">Time Table</a>
</li>
</ul>
<div id = "hovercontent">
Contents 1
</div>
<script type = "script/javascript">
$(document).ready(function(){
$("#mousehover").hover(function(){
$("#hovercontent").slideDown("slow");
});
});
</script>
Replace
<script type="script/javascript">
with
<script type="text/javascript">
or just use
<script>
<script type = "text/javascript">
$(document).ready(function(){
$("#mousehover").hover(function(){
$("#hovercontent").slideDown("slow");
});
});
</script>
replace script/javascript by text/javascript
I have created an expand / collapse menu on a site I created in Wordpress
http://www.ogormanconstruction.co.uk/
Once you click on any of the li's the URL changes but the page does not seem to refresh to display the correct content
I'm not too familiar with javascript so I was wondering how I could make this effect work
<script type='text/javascript' src="/wp-content/themes/child/scripts/jquery-1.6.2.min.js"></script>
<script type='text/javascript' src="/wp-content/themes/child/scripts/jMaster.js"></script>
<script type='text/javascript' src="/wp-content/themes/child/scripts/supersleight.plugin.js"></script>
<script type="text/javascript" src="/wp-content/themes/child/scripts/hashchange.js"></script>
<script type="text/javascript" src="/wp-content/themes/child/scripts/actions.js"></script>
<script type="text/javascript" src="/wp-content/themes/child/scripts/tinyscroll.js"></script>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['aspnetForm'];
if (!theForm) {
theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
</head>
<body <?php body_class(); ?>>
<div id="header">
<ul id="nav">
<li class="clearfix">
<div class="clearfix">
<div id="menuNav">Menu</div>
<ul class='clearfix'><li><strong>O'Gorman Construction Ltd</strong><ul class='clearfix'><li><a href='/about-us'>About Us</a><li><a href='/contact'>Contact</a></li></li><li><a href='/work'>Work</a></li><li><a href='/recruitment'>Recruitment</a></li></ul></li><li><strong>Services</strong><ul class='clearfix'><li><a href='/site-logistics'>Labour Supply</a></li><li><a href='/waste-management'>Drainage</a></li><li><a href='/security-services'>Fencing</a></li><li><a href='/traffic-management'>Demolition</a></li></ul></li><li><strong> </strong><ul><li><a href='/multi-service-gangs'>Ground Works</a></li><li><a href='/facilities-accomodation'>Multiservice Gangs</a></li><li><a href='/small-works-maintenance'>Engineering</a></li><li><a href='/catering-services'>Water Treatment</a></li></ul></li></ul>
</div>
</div>
</li>
</ul>
</div>
<h2>Work</h2>
<div class="leftCol">
<div class="rightCol gallery">
<ul id="homeGallery">
<li id="prevControl">Previous</li>
<li id="galleryItems">
<ul>
<li>
<div class="galleryImage"><img src='/wp-content/themes/child/images/1.jpg' /></div>
<div class="galleryText"><div class="leftCol noborder" style="text-align: left;"><strong>Project I</strong></div></div>
</li>
<li>
<div class="galleryImage"><img src='/wp-content/themes/child/images/2.jpg' /></div>
<div class="galleryText"><div class="leftCol noborder" style="text-align: left;"><strong>Project II</strong></div></div>
</li>
<li>
<div class="galleryImage"><img src='/wp-content/themes/child/images/4.jpg' /></div>
<div class="galleryText"><div class="leftCol noborder" style="text-align: left;"><strong>Project III</strong></div></div>
</li>
</ul>
</li>
<li id="nextControl">Next</li>
<li id="copyright">© O'Gorman Construction Ltd</li>
</ul>
</div>
</div>
<div id="main">
It looks like it has to with $(window).hashchange(); which you are calling in the
$(document).ready(function ()
I think it is causing all of the links in your page to add a hash rather than redirect to another url.
For example, if you hover over the "Work" link, you can see the url it's supposed to go to in the bottom left corner:
http://www.ogormanconstruction.co.uk/work
But when you click on it, all that happens is the url is changed to:
http://www.ogormanconstruction.co.uk/#/work
which doesn't actually redirect you.
Is hashchange part of Wordpress, or is something you'ved added?