I'm using Foundation 5 magellan navigation but smooth scroll doesn't work. In example all is fine: http://foundation.zurb.com/docs/components/magellan.html
My code: http://jsfiddle.net/5LKzf/
<head>
<link rel="stylesheet" href="css/foundation-5.2.2/css/foundation.css" />
<link rel="stylesheet" href="css/foundation-5.2.2/css/normalize.css" />
<script src="css/foundation-5.2.2/js/vendor/modernizr.js"></script>
</head>
<body>
//my link
<li class="item-109 menu-el active"><dd data-magellan-arrival="/"><a href="#/" >Main Page</a></dd></li>
//my anhor
<a class="link-pos" data-magellan-destination="/" name="/"> </a>
<script src="css/foundation-5.2.2/js/vendor/jquery.js"></script>
<script src="css/foundation-5.2.2/js/vendor/fastclick.js"></script>
<script src="css/foundation-5.2.2/js/foundation.min.js"></script>
<script>
$( document ).foundation();
</script>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/main.js"></script>
</body>
Did I forget to include any files?
According to the docs
"Make sure jquery.js, foundation.js, and foundation.magellan.js have been included on your page before continuing. For example, add the following before the closing tag:"
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.magellan.js"></script>
According to the code you posted, you are missing the magellan js, which would explain why it doesnt work!
I have worked with Foundation 5, and with some features you need to ensure you include the relevant javascript.
I hope this helps!
Related
I just created the most basic TimelineView under FullCalendar:
<!DOCTYPE html>
<html lang='fr'>
<head>
<meta charset='utf-8' />
<link href='./fullcalendar/packages/core/main.css' rel='stylesheet' />
<link href='./fullcalendar/packages/timegrid/main.css' rel='stylesheet' />
<link href='./fullcalendar/packages-premium/timeline/main.css' rel='stylesheet' />
<link href="layout.css" rel="stylesheet" />
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.js'></script>
<script src='./fullcalendar/packages/core/main.js'></script>
<script src='./fullcalendar/packages/timegrid/main.js'></script>
<script src='./fullcalendar/packages/core/locales/fr.js'></script>
<script src='./fullcalendar/packages-premium/timeline/main.js'></script>
<script src='./fullcalendar/packages-premium/resource-common/main.js'></script>
<script src='./fullcalendar/packages-premium/resource-timegrid/main.js'></script>
<script src='./fullcalendar/packages-premium/resource-timeline/main.js'></script>
<script src="./jquery-3.4.1.min.js" type="text/javascript"></script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
<script>
var calendarEl = document.getElementById('calendar');
calendar = new FullCalendar.Calendar(calendarEl, {
schedulerLicenseKey:'',
plugins: ['resourceTimeline' ],
defaultView: 'resourceTimelineMonth'})
calendar.render();
</script>
The issue is that it renders a grey column in the 2nd place which I do not want
How to remove / hide this column ?
Thanks
You forgot to include the resource-timeline CSS file. I can't reproduce your problem with a standard Scheduler setup. Demo: https://codepen.io/ADyson82/pen/WNQyrzN
But if you remove that file then your problem starts to occur. Demo: https://codepen.io/ADyson82/pen/mdeKVLQ
I can also see that the relevant CSS file is missing from your code shown above. In your case I expect you need a link like this:
<link href='./fullcalendar/packages-premium/resource-timeline/main.css' rel='stylesheet' />
The FullCalendar plugin index shows what JS and CSS file (if any) is needed for each plugin to work correctly.
I have written a simple example to demonstrate the use of bootstrap notify but its not working.
Below is my code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="bootstrap-notify.js"></script>
<script src="bootstrap-notify.min.js"></script>
<script>$.notify("Hello World");</script>
</head>
<body>
</body>
Replace your script as below just add ready function it work fine. and also add bootstrap css for look good.
<script>
$(document).ready(function(){
$.notify("Hello World");
});
</script>
I tried to add to textarea a line of the row numbers with this example:
http://alan.blog-city.com/jquerylinedtextarea.htm
this is my code and I allready use the css and js in my project:
<!DOCTYPE html>
<html>
<head>
<title>CODE</title>
<link href="jquery-linedtextarea.css" rel="stylesheet">
<script src="jquery-linedtextarea.js"></script>
</head>
<body>
<textarea class="lined" name="mytext"></textarea>
<script>
$(function () {
$(".lined").linedtextarea(
{ selectedLine: 1 }
);
$("mytext").linedtextarea();
});
</script>
</body>
</html>
what I wrong ?
It seems you forget to call Jquery Library...
Just add the code below on your <head>:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </script>
And I believe you should delete that part:
$("mytext").linedtextarea();
I've made a code. It works for me. Check it out...
<html>
<head>
<title>JQuery LinedTextArea Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://files.aw20.net/jquery-linedtextarea/jquery-linedtextarea.js"></script>
<link href="http://files.aw20.net/jquery-linedtextarea/jquery-linedtextarea.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h1>JQuery LinedTextArea Demo</h1>
<p>Add a scrollable lined area to a standard TextArea control.</p>
<textarea class="lined" rows="10" cols="60">
JavaScript was originally developed by Brendan
Eich of Netscape under the name Mocha,
which was later renamed to LiveScript,
and finally to JavaScript.
The change of name from LiveScript to JavaScript roughly
coincided with Netscape adding support for
Java technology in its Netscape Navigator
web browser.
</textarea>
<script>
$(function() {
$(".lined").linedtextarea(
{selectedLine: 1}
);
});
</script>
</body>
</html>
I am having trouble redirecting my website if it detects that CSS3 is not supported. I use CSS3 animations so I decided to test for them but I can't get it to redirect let alone do an alert() message in my . Please help me out. Thank you!
<!DOCTYPE html>
<html>
<head>
<title>95.3 FM - KXLE Stream</title>
<script type="text/javascript" src="modernizr.custom.86596.js"></script>
<link rel="icon" type="image/png" href="images/favicon.png">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet">
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui-1.10.3.custom.js"></script>
<script type="text/javascript" src="js/js.js"></script>
<script> //THIS IS WHAT WILL NOT WORK********************************************
if (!Modernizr.cssanimations) {
window.location.href = 'www.google.com';
}
</script>
</head>
You want to use
if (Modernizr.cssanimations) {
window.location.replace("http://google.com");
}
Solved it! I was not pointing to the proper location of the modernizer js file in my head.
i am pretty new to mootools, i found it faster/smoother for animations than jquery so i decided to give it a try.
I don't get why the following code is not working, it is working on jsfiddle with Mootools core and Mootools more 1.3.1
<html>
<head>
<script src="mootools-more-1.3.1.1.js" type="text/javascript"></script>
<script src="mootools-core-1.3.1-full-compat.js" type="text/javascript"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
var myVerticalSlide = new Fx.Slide('paragraph', {mode:'horizontal'}) ;
$('v_slideout').addEvent('click', function(event){
event.stop();
myVerticalSlide.toggle();
});
});
</script>
</head>
<body>
<div id="paragraph">This is a paragraph.</div>
<a id="v_slideout" href="#">Test</a>
</body>
</html>
Can't seem to figure it out, i only could get it worked on jsfiddle.
Any suggestion is appreciated.
Edit: http://jsfiddle.net/F54s3/ << It doesn't work as it should in FF but still it does something, on Opera it seems fine though.
I might have messed up the code as i am pretty new to it, but i am trying to figure out why it works on jsfiddle and doesn't work on my index.html.
The order of your script includes looks suspicious to me:
<script src="mootools-more-1.3.1.1.js" type="text/javascript"></script>
<script src="mootools-core-1.3.1-full-compat.js" type="text/javascript"></script>
Shouldn't the mootools-core file come first?
For example:
http://jsfiddle.net/AxJq9/ (throws Javascript error)
<script src="http://mootools.net/assets/scripts/mootools.more.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.1/mootools.js" type="text/javascript"></script>
http://jsfiddle.net/AxJq9/1/ (doesn't throw an error)
<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.1/mootools.js" type="text/javascript"></script>
<script src="http://mootools.net/assets/scripts/mootools.more.js" type="text/javascript"></script>