I'm relatively new to Rails and Javascript and JQuery are completey foreign to me. I need a little help getting started with JQuery and FullCalendar.
I'm reading this:
http://arshaw.com/fullcalendar/docs/usage/
But I don't know where to actually put any of the stuff mentioned.
I tried sticking it in the view for my Calendar - but that doesn't do anything and just prints out the contents of my JQuery code.
I'm guessing i'm supposed to put this stuff into a *.js file and reference it in my view. But I'd appreciate some guidance.
Yes, You will want to place the Javascript and Jquery code in your assets/javascript folder in either the application.js, or the .js file that matches your controller/model schema. Then in your application layout file, place the
<link rel='stylesheet' type='text/css' href='fullcalendar.css' />
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript' src='fullcalendar.js'></script>
lines in the .
Related
I am very new to web design and trying to build a responsive page using Bootstrap. Everything works except my linked JS. I am sure the path is right but neverthelast I tried to put my JS on server and indicated the full path through http:// but still not working. I even put all my scripts in the head section just in case but still not working. Start getting frustrated anyone please can help me guys :) The JS is in the 'scripts' folder which is in the same folder with my 'index.html'.
This is my html in the head section:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="scripts/script.js"></script>
And here is my external JS:
$(document).ready(function(){
$("#menu").slideUp("slow");
});
Your problem is loading in the jQuery. It's trying to load your first script from a relative path. Try replacing the first script with <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
I found this really cool plugin for Bootstrap that measures password strength. It looks good, and I want to use it, but I can't figure out how to make it work. According to the Github page, all you have to do to use it is "Just invoke the plugin on the password fields you want to attach a strength meter to.". Unfortunately, they don't tell you where to put the files, nor which javascript files you actually need to use.
I've been Googling every possible iteration of ways to add or install plugins for Bootstrap, and have come up empty each time. Does anyone have an answer here?
I guess the github pages can be confusing with all those source files. All you need to do is get the latest minified file from this page:
https://github.com/ablanco/jquery.pwstrength.bootstrap/tree/master/dist
Download it, upload it, and load it into your HTML somewhere after your original bootstrap javascript file using
<script type="text/javascript" src="file/location/pwstrength-bootstrap-1.2.3.min.js"></script>
When you've done that, add the following javascript code to invoke the plugin on a class or element:
$(document).ready(function(){
$(':password').pwstrength();
});
Just include the plugin css and javascripts after defining bootstrap in head of your html page.
something like this:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="your plugin source"></script>
To add to previous solutions: also make sure to include jquery in your html because it's required by bootstrap's js.
I am trying to make a small app in angular and am trying to include the Bootstrap CDN into the head section. My current head section looks like this:
<head>
<script src="http://code.angularjs.org/angular-1.0.0rc3.min.js"></script>
<script src="todo.js"></script>
<link rel="stylesheet" href="todo.css">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/3.0.3/css/bootstrap-combined.min.css" rel="stylesheet" media="screen">
</head>
When I go to refresh the page none of the bootstrap changed have been made. Is this something going on with Angular or am I just making a dumb mistake?
You have the wrong URL. You can plug it into your browser to see where it takes you.
yours:
http://netdna.bootstrapcdn.com/twitter-bootstrap/3.0.3/css/bootstrap-combined.min.css
correct one:
http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css
To make sure you have the correct one, always get it from here: http://getbootstrap.com/getting-started/
For me, Instead of using CDN, Adding and referencing the bootstrap css file locally in dist folder(or whatever folder you have generated via Angular fixed the issue.
I am trying to integrate the colorbox lightbox plugin as instructed on there website
I have successfully integrated on one of my pages but i cannot get it to load correctly for the other 3 (in same directory). Onlick it goes to a new page with the full size image on a white background!
An example of this working on my site is here....
http://www.transformyourshape.co.uk/cost-of-Herbalife.php
I have put the exact same scripts, in the exact same places as in this working one on my other page here...
http://www.transformyourshape.co.uk/Herbalife-Weight-Loss.php
But it just won't load the plugin and i have no idea why.
Can anyone see where or why this has gone wrong?
I would appreciate any help, no matter how minor so i can get this resolved
Thanking you all in advance!
You have included two versions of jquery, which causes $.colorbox to become undefined after second inclusion:
<head>
..
<script type="text/javascript" src="Scripts/js/contactForm/jquery-1.8.3.min.js">
</script>
..
..
<!--Colourbox Scripts & CSS -->
<script src="Scripts/js/colourbox/jquery.colorbox.js"></script>
<link href="css/colourbox/colorbox.css" rel="stylesheet" type="text/css">
..
..
<script type="text/javascript" src="cw4/js/jquery-1.7.1.min.js"></script>
..
</head>
This is the weirdest thing. When I moved what little working code I had from my development setup to some kind of test server (and believe me when I tell you that that was painfull), I realized that all of my Javascript functionality wasn't working. After doing a little investigation (fiddler2), I found that I am getting a 404 error when loading my scripts. Well when I look in the directory where the code says they are located, I am ABLE to find them. In other words, they are where they said they were. What in sam hill is going on here? Could it possible be how I have my IIS server set up? I looked in the Handler mappings for my website (one of several websites on this server under the sites\default web site node) in IIS I noticed that .js is not even found in there. Would that have anything to do with it? If that is way off base, have you ever experienced anything like this? How can I go about solving this issue?
Thanks for your help.
EDIT: Examples of how I call my scripts
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<link href="../../Content/dataTable.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="../../Content/jqUIcss/jquery-ui-1.8.14.custom.css" />
<script type="text/javascript" src="../../Scripts/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="../../Scripts/jqUI/jquery-ui-1.8.14.custom.min.js"></script>
<asp:ContentPlaceHolder ID="HeadContent" runat="server" />
EDIT 2
Just checked and my application pool inside of IIS 7 is set to integrated. So that probably isn't it.
My thought about your problem.
Did you drag and drop the file name into view? (this will fill path relative to file to your js file)
this is happening often if you have areas.
step 1
check that file name is in correct location and you have the correct name.
step 2
check whether you can access file from url link on the location you know to be sitting in
step 3
validate your request via firebug or something else that will show you request for the file.
step 4
is the file / folder accessible via your application / do you have access rights to the location
if this fails i would presume there is something wrong with IIS or settings of your application/ website
this is just quick thought for you...
Figured it out...
Talking to a co-worker of mine I discovered what he does in situations like this...
<script src="<%=ResolveClientUrl("~/Scripts/lib/jquery.js")%>" type="text/javascript"></script>
ResolveClientUrl plus the "~" infront of the Folder where I expect the jquery library to be seems to work.
I had a similar problem with asp.net mvc and css and javascript url.
Sometimes I need to use the function Page.ResolveClientUrl
and other time Page.ResolveUrl does the tricks
This happened to me with I was using MS Edge.
I went to the upper right hand corner, clicked the three dots, clicked 'More Tools', 'Developers Tools' to get the developers window
Then I right-clicked on the browser's 'Refresh' icon (the circle arrow), and selected 'Empty Cache and Hard Refresh'.
Everything was then fine. It's one of those answers that's sometimes too easy to get