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!
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
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.
So here we are: http://greeceinsiders.com/VLASIOS/offcanvas/studio.html
I followed the instructions for having the orbit slider in a page but this one doesnt seem to be working. I read from other users that they experience similar problems. Can anyone help?
<ul data-orbit class="orbit-slides-container">
<li data-orbit-slide="1">
<img src="images/studio/1.jpg" />
<div class="orbit-caption">...</div>
</li>
<li data-orbit-slide="2">
<img src="images/studio/2.jpg" />
<div class="orbit-caption">...</div>
</li>
<li data-orbit-slide="3">
<img src="images/studio/3.jpg" />
<div class="orbit-caption">...</div>
</li>
</ul>
and at the end of the closing body tag I include the javascripts:
<!-- Check for Zepto support, load jQuery if necessary -->
<script>
document.write('<script src=/javascripts/vendor/'
+ ('__proto__' in {} ? 'zepto' : 'jquery')
+ '.js><\/script>');
</script>
<!-- Included JS Files -->
<script src="javascripts/foundation/foundation.js"></script>
<script src="javascripts/foundation/jquery.js"></script>
<script src="javascripts/foundation/jquery.foundation.reveal.js"></script>
<script src="javascripts/foundation/jquery.foundation.orbit.js"></script>
<script src="javascripts/foundation/jquery.foundation.forms.js"></script>
<script src="javascripts/foundation/jquery.placeholder.js"></script>
<script src="javascripts/foundation/jquery.foundation.tooltips.js"></script>
<script src="javascripts/foundation/jquery.foundation.alerts.js"></script>
<script src="javascripts/foundation/jquery.foundation.buttons.js"></script>
<script src="javascripts/foundation/jquery.foundation.accordion.js"></script>
<script src="javascripts/foundation/jquery.foundation.navigation.js"></script>
<script src="javascripts/foundation/jquery.foundation.mediaQueryToggle.js"></script>
<script src="javascripts/foundation/jquery.foundation.tabs.js"></script>
<script src="javascripts/foundation/jquery.offcanvas.js"></script>
<script src="javascripts/foundation/app.js"></script>
<script>
$(document).foundation();
</script>
<!-- Orbit Bullet Slide Indicator -->
<ol class="orbit-bullets">
<li data-orbit-slide-number="1"></li>
<li data-orbit-slide-number="2" class="active"></li>
<li data-orbit-slide-number="3"></li>
</ol>
You don't have Zepto uploaded to your server or it's in the wrong file location. You're getting the following NOT FOUND error: http://greeceinsiders.com/javascripts/vendor/zepto.js
The problem have bugged me for couple of days and I still can't managed to solve it.
in my main jsp file [ the tab or button]
<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
<li><a id="stream" href="" data-toggle="tab">Stream</a></li>
<li><a id="me" href="" data-toggle="tab">Me</a></li>
<li><a id="findout" href="" data-toggle="tab">Find Out</a></li>
</ul>
</div>
in my main jsp file [ the div to display another jsp ]
<div class="tab-content">
<div id="suggestion"></div>
<div class="tab-pane" id="function_stream"></div>
<div class="tab-pane" id="function_me"></div>
<div class="tab-pane" id="function_findout"></div>
</div>
and some javascript
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/find_out.js"></script>
<script type="text/javascript" src="js/me.js"></script>
<script type="text/javascript" src="js/stream.js"></script>
<script type="text/javascript" src="js/suggestion.js"></script>
in my find_out.js
$(document).ready(function(){
$('#function_findout').hide();
$('#findout').click(function(){
$('#suggestion').hide();
$('#function_stream').hide();
$('#function_me').hide();
$('#function_findout').show();
$('#function_findout').load('findout.jsp');
});
});
// and some google map code here( it work perfectly fine in normal (html + js) but not now
since I do load jsp page from another page, i believe there's the problem
The error log keep showing the error in this particular line which is
google.maps.event.addDomListener(window, "load", initialize);
last but not least my findout.jsp file
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCWDPCiH080dNCTYC-uprmLOn2mt2BMSUk&sensor=true"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
<script type="text/javascript" src="js/tooltip.js"></script>
<div class="map">
<div id="map_canvas"></div>
</div>
I'm no javascript ninja, but i'd like to incorporate this library in a site targeting tablets. Here is the library :
jPanelMenu
Here is my redered html:
<script src="/Scripts/jquery-1.7.1.js"></script>
<script src="/Scripts/jPanelMenu-1.0.0.min.js" type="text/javascript"></script>
<header class="main">
<ul id="menu">
<li>Overview</li>
<li>Usage</li>
<li>Inner-Workings</li>
<li>Animation</li>
<li>Options</li>
<li>API</li>
<li>Tips & Examples</li>
<li>About</li>
</ul>
</header>
<script type="text/javascript">
$(document).ready(function () {
var jPM = $.jPanelMenu();
jPM.on();
});
</script>
<body>
All i see in the browser is a normal UL bulleted list. No Js errors in chromes dev tools. Anyone ever use this plugin or know what im doing wrong?
Thanks!
EDIT:
Here is updated code with solution from dbaseman
<html>
<script src="/Scripts/jquery-1.7.1.js"></script>
<script src="/Scripts/jPanelMenu-1.0.0.min.js" type="text/javascript"></script>
<header class="main">
<div class="menu-trigger">Click Me</div>
<ul id="menu" style="display: none;">
<li>Overview</li>
<li>Usage</li>
<li>Inner-Workings</li>
<li>Animation</li>
<li>Options</li>
<li>API</li>
<li>Tips & Examples</li>
<li>About</li>
</ul>
</header>
<script type="text/javascript">
$(document).ready(function () {
var jPM = $.jPanelMenu();
jPM.on();
});
</script>
<body>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index.Tablet</title>
</head>
<body>
<div>
tablet home
</div>
</body>
</html>
</body>
</html>
You need to add a "trigger" element to enable the menu (it looks for .menu-trigger by default):
<div class="menu-trigger">Click me to trigger</div>
(Also, apparently it expects the menu element to be hidden initially, so use <ul style="display: none;" ...>.)
Demo
You need to change trigger to anchor tag
<a class="menu-trigger" href="#menu">Click Me</div>
You can see it in the Jpanelmenu webpage source.