I'm trying to make a web app that allows (student) users to see all possible class schedules that they can have. Right now, I've got a list of classes that fit certain constraints (users desired classes). I want to create all possible schedules that can be made with combinations of these classes. It seems like FullCalendar might be what I want to display these schedules (just in a week view or something) but i'm not sure if I can make FullCalendar just display a possible schedule and then allow the user to click through the possible schedules without assigning all the classes dates or something on the back end.
In a nutshell:
Is FullCalendar what I want to use for this? Or is there something else better suited to my goal?
Below is the code I have so far (still figuring out how to get lists of all possible schedules from this list)
<!DOCTYPE html>
<html>
<head>
<script src='../lib/jquery.min.js'></script>
<script src='../lib/jquery-ui.custom.min.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<h2 id="search_results"></h2>
<div id="morning_results_container">
<h5>Morning Courses</h5>
<ul id="morning_results_list">
</ul>
</div>
<script>
$(document).ready(function() {
$.getJSON("http://vazzak2.ci.northwestern.edu/courses/?term=4540&subject=EECS", function(result) {
var earlyCourses = [];
$(result).each(function (index, item) {
$('#search_results').text((index+1) + " total courses");
if (item.start_time > '10:00:00') {
if (item.meeting_days === 'We'){
console.log(item);
$('#morning_results_list').append('<li>' + item.title + '</li>');
}
}
});
});
});
</script>
</head>
<body>
<div id="resultarea"></div>
</body>
</html>
Thanks for any experiential advice you can offer!
Yes, I think you can achieve what you like to do with jquery FullCalendar plugin you are using. I'm not sure whether there is a better plugin for your purpose. FullCalendar pretty much provides a very good user interface for a interactive calendar for any type of web app.
However it's up to you to implement what it should do in your web app based on the UI interactions of a user. Could you provide a example of a JSON output with all the schedules? As I understood your question, maybe you can allow the user to select a schedule from a drop-down list and then show the classes in the calendar for a selected schedule.
[Update]
function load_all_classes()
{
$.getJSON("http://vazzak2.ci.northwestern.edu/courses/?term=4540&subject=EECS", function(data) {
window.all_classes = data;
});
}
function update_calendar(classes)
{
//update calendar to display the given classes
}
function get_classes_before_10_am()
{
var results = [];
$(window.all_classes).each(function (index, the_class) {
if (the_class.start_time <= '10:00:00') {
results.push(the_class);
}
});
return results;
}
$(document).ready(function() {
load_all_classes();
$('#select_schedule').change(function(){
if ($(this).val = 'Before 10 am')
{
update_calendar(get_classes_before_10_am());
}
else if ($(this).val = 'After 10 am')
{
update_calendar(get_classes_after_10_am());
}
//...etc
});
});
Related
I'm new at jQuery, so I expect there is an easy answer.
I have a JSON file with different text strings for different dates. I also have an html range slider that I uses the <datalist> tag to define specific dates on the slider. I have written a $.getJSON function that nests a $.each() function to pull the strings from the JSON file.
I need to write in the functionality to display different strings based on the slider position.
This is my jQuery:
var location = $('#state-dates')[0];
$(document).on('input', '#state-dates', function() {
if (location === 1911) {
$.getJSON('Arizona.json', function(inputOne){
$.each(inputOne.first, function(i, field){
$("#leg-control").html(field.legControl);
});
});
}
else if (location === 1943) {
$.getJSON('Arizona.json', function(inputTwo){
$.each(inputTwo.second, function(i, field){
$("#leg-control").html(field.legControl);
});
});
}
});
And my HTML:
<input type="range" min="1911" max="2013" class="bar" step=".1" list="date-list" value="1911" id="state-dates">
Is there a different jQuery method that I should be using to detect the change in the slider, and so display the new string? I also realize that I should probably use < or > instead of = since I want the same text to only change when it reaches a new defined position. Thank you!
EDIT
To help clarify, I'm adding in the relevant JSON and HTML.
JSON:
{
"first": [
{
"legControl": "Not recorded",
}],
"second": [
{
"leg-control": "Democratic",
}]
}
And the HTML for entering the text:
<div class="json-text">
<p class="fill-in" id="leg-control"></p>
</div>
I was able to work out a solution with a web developer friend of mine, so in case anyone else stumbles across this question, the solution I used:
//call the JSON file and store it as a variable called jdata
$.getJSON('Arizona.json', function(json) {
jdata = json;
});
var slider = $('#sliderValue')[0];
slider.oninput = function() {
var position = this.value;
var jrows = $(jdata).filter(function (i, n) {
return n.sYear <= position && n.eYear > position;
});
$("#year-start").html(jrows[0].jsonLineOne);
$("#year-end").html(jrows[0].jsonLineTwo);
};
Essentially this takes the slider input, and runs a return command to check the position. If it is within the bounds of one subsection of the JSON file, then that section is pulled. Hopefully this helps anyone else who comes across it in the future.
I have almost finished my own website, and I am wondering how simple I can implement search function in current page. It's static and only need to show list items which include users' input. Some answers from stackoverflow advise Google API, but it will show Google logo in the search box, that's not work for me.
Is there any 3rd party API or some simple code can satisfy my requirement?
It's not easy to create your own search library, and also you don't need Google Search API if you only require search function in static website.
You can consider to use Angular JS to excute.
1.1 Defined ng-app & ng-controller to main body function
<body ng-app="instantSearch" ng-controller="InstantSearchController">
1.2 Add ng-model to search box function
<input ng-model="searchString">
1.3 Add ng-repeat to div or li function to show the data based on search from input box
<div ng--repeat="i in items | searchFor: searchString">
2.1 Define a new module for your app
var app = angular.module("instantSearch", []);
2.2 Create the instant search filter
app.filter('searchFor', function() {
return function(arr, searchString) {
if(!searchString){
return arr;
}
var result = [];
searchString = searchString.toLowerCase();
angular.forEach(arr, function(item) {
if(item.title.toLowerCase().indexOf(searchString) !== -1){
result.push(item);
}
});
return result;
};
});
2.3 Edit your controller
function InstantSearchController($scope) {
$scope.items = [
{
title1:'abc',
title2:'def'
},
{
title1:'ghi',
title2:'jkl'
}
];
}
And now you can display the items which has the same result in your search box.
Alright, I'm currently working to create on an account mainpage a applet to show each "kid" the user has registered to the site. My idea is simple :
Kid 1 / Kid 2 / Kid 3
As buttons (with style and such) when he goes on this page. When he clicks on one of those buttons/names, I use javascript to show the description of the infos of the kid, etc. When I click on another name, the current content closes and shows the new appropriate content.
The content is dynamically created, so the id's of the divs containing the info are named after the number of kids. Example : content_Info_Kid1, content_Info_Kid2, ... It doesnt matter how many kids there are, they will be named content_Info_Kid32 if need be.
Now, I'm not too comfy with AJAX and javascript in general. In fact, I am not at all.
My first idea was to do this in a separate javascript file.
$(document).ready(function() {
$("#content_info_kid1").hide();
$("#content_info_kid2").hide();
$("#content_info_kid3").hide();
$("#KID_1").click(function () {
if ($("#content_info_kid1").is(":hidden")){
$("#content_info_kid2").hide();
$("#content_info_kid3").hide();
$("#content_info_kid1").show("slow");
$(this).css("font-weight","bold");
$("#KID_2").css("font-weight","normal");
$("#KID_3").css("font-weight","normal");
}
});
$("#KID_2").click(function () {
if ($("#content_info_kid2").is(":hidden")){
$("#content_info_kid1").hide();
$("#content_info_kid3").hide();
$("#content_info_kid2").show("slow");
$(this).css("font-weight","bold");
$("#KID_1").css("font-weight","normal");
$("#KID_3").css("font-weight","normal");
}
});
$("#KID_3").click(function () {
if ($("#content_info_kid3").is(":hidden")){
$("#content_info_kid2").hide();
$("#content_info_kid1").hide();
$("#content_info_kid3").show("slow");
$(this).css("font-weight","bold");
$("#KID_1").css("font-weight","normal");
$("#KID_2").css("font-weight","normal");
}
});
});
Obviously, this is not dynamic. And I don't want to create 32 alternatives, of course. Can somebody point me the right direction to create a dynamic way to show my content based on the number of kids ?
EDIT (see bottom for updated on loading just one kid data at a time)
An example on how you could achieve that:
<style type='text/css' media='screen'>
button { margin-left:20px; display:inline; }
</style>
<script type='text/javascript' src='jquery-1.7.1.min.js'></script>
<script type='text/javascript'>
function loadKidData(kidID) {
switch (kidID) {
case 1 : $('#kName').text(' John Doe');
$('#kNickname').text(' Speedy');
$('#kHobbies').text(' Booling');
break;
case 2 : $('#kName').text(' Mathews Doe');
$('#kNickname').text(' Slowy');
$('#kHobbies').text(' Basketball, baseball');
break;
case 3 : $('#kName').text(' Jackson Doe');
$('#kNickname').text(' J-DOE');
$('#kHobbies').text(' Archery');
break;
case n : $('#kName').text(' Enne Doe');
$('#kNickname').text(' The-Nanny');
$('#kHobbies').text(' Anything goes');
break;
default : $('#kName').text('');
$('#kNickname').text('');
$('#kHobbies').text('');
}
}
jQuery( function () {
$('.nav').click( function () {
loadKidData($(this).html().replace('KID ','')*1.0); // *1.0 same as parseInt(...,10).
})
});
</script>
</head>
<body>
<button class='nav' >KID 1</button><button class='nav' >KID 2</button><button class='nav' >KID 3</button>
<div id='KID_INFO' style='margin:20px auto; overflow:auto; ' >
<p>Name:<span id='kName'></span></p>
<p>Nickname:<span id='kNickname'></span> </p>
<p>Hobbies:<span id='kHobbies'></span> </p>
</div>
</body>
Sample at: http://zequinha-bsb.int-domains.com/kidsinfo.html
Now, as far as dynamically displaying the data, it will have to do with your resources: database? If so, you could read the data and pass it over:
$.get('url-of-the-database-reading-script',function (data) {
// assumed all data comes back formatted:
$('#KIDS_INFO').html(data);
});
I can/could help you further, more details would help. Are you using classic asp (.asp); php; etc?
EDIT:
Instead of this:
jQuery( function () {
$('.nav').click( function () {
loadKidData($(this).html().replace('KID ','')*1.0); // *1.0 same as parseInt(...,10)
})
});
Do this:
jQuery( function () {
$('.nav').click( function () {
$.get('your-data-fetching-url?kidID='+$(this).html().replace('KID ','')*1.0, function (data) {
//assumed the data comes back formatted:
$('#KIDS_DATA').html(data);
})
})
});
Note that I put a question mark at the end of the url; followed by the querystring kidID=
Give each "Kid" button the same class and use that for the click handler. From there, you can associate the "content_info_kid" with the "kid" button either by
1)Using the index of the element. The button for kid2 should be index 1 relative to its parent and the content_info for kid2 should also be index 1 relative to its parent.
or
2)Extract the number from the ID of the button.
Both approaches are documented below.
$('.kid_button').click(function(){
// get number from index (this starts at '0')
// if your kid #'s start at 1, you should add 1 to this
var id = $(this).index();
// OR...get number from id where id format is kid_{#}
var id = $(this).attr('id').split('_').pop();
// now we have the number to append to everything else
// we should also associate all "content_info" with a class
// which we will call "kid_content"
if($("#content_info_kid"+id).is(":hidden")){
// hide all of the 'kid_contents'
$(".kid_content").hide();
// show the one we want
$("#content_info_kid"+id).show("slow");
// normalize all buttons
$(".kid_button").css("font-weight","normal");
// bold this one
$(this).css("font-weight","bold");
}
});
I've looked around a lot, and can't seem to find anything that's simple enough for me to do...
I've set up a web page that detects which browser is currently running, and if it's something other than Firefox 4.0, it displays a hidden div that gives a warning stating that the page is best viewed in Firefox 4.0 or greater. Within that div is a button that hides the div onclick.
I'm looking for a way to remember that this button has been clicked during a session, so that when a user clicks on my "home" page, they don't get the same message every time.
Current code:
<head>
<script src="js/browsercheck.js"></script>
<script type="text/javascript">
// external script "browsercheck.js" checks
// which browser/version is being used
// check browser and display message if != Firefox 4.0 or >
function checkBrowser() {
var browser = BrowserDetect.browser;
var version = BrowserDetect.version;
if (browser == "Firefox") {
if (version >= 4) {
// do nothing
}
} else {
document.getElementById("coverall").style.visibility="visible";
document.getElementById("browser").innerHTML = browser + " " + version;
}
}
// remove overlay if user commands
function removeCoverall() {
document.getElementById("coverall").style.visibility="hidden";
}
</script>
</head>
<body>
<div id="coverall" style="visibility:hidden;">
<p>I see you're using <span id="browser"></span>. Please use Firefox.</p>
<button type="button" onclick="removeCoverall()">I understand</button>
</div>
</body>
Using jQuery and the cookie plugin, you can do:
function removeCoverall() {
$.cookie("user_clicked_ok", "true");
document.getElementById("coverall").style.visibility="hidden";
}
$(window).ready(function() {
if ($.cookie("user_clicked_ok")=="true") {removeCoverall();}
});
More details at: http://www.electrictoolbox.com/jquery-cookies/
In the removeCoverall function you could set a cookie which indicates that the user closed the div and in checkBrowser function verify if the cookie is present before showing the div.
You seem to have the right idea, you need cookies! YUM!
JS
function removeCoverall() {
var date = new Date();
date.setTime(date.getTime()+(7*24*60*60*1000));// expires in one week
document.cookie = 'skipNotify=1;expires='+date.toGMTString()+'; path=/';
document.getElementById("coverall").style.visibility="hidden";
}
Now retrieving the cookie can be difficult in javascript, but you can use PHP!
PHP
function checkBrowser() {
<?php if(isset($_COOKIE['skipNotify']))echo'return;';?>
var browser = BrowserDetect.browser;
var version = BrowserDetect.version;
if (browser == "Firefox") {
if (version >= 4) {
// do nothing
}
} else {
document.getElementById("coverall").style.visibility="visible";
document.getElementById("browser").innerHTML = browser + " " + version;
}
}
The above code injects a return statement if the user has the cookie, so the call to the function won't do anything.
As mentioned in the other posts, I highly recommend you use jQuery for all your javascript needs. It's very popular, stable and useful! I only gave my answer as it does not use any third party solution.
I know blinking is not a nice thing. However...
I have a long complex HTML form with a number of compulsory fields. As well as highlighting the empty text boxes I want to draw attention to them by flashing the text of the question for maybe three seconds.
All the javascript/css methods I can find all seem to fall over when there is more than one such item to blink or are designed for leaving the item blinking all the time.
Any suggestions for how to achieve this?
The method at What is the replacement for a blinking text in a web page? seems like overkill.
thanks
Derek
I've tried this (to blink each designated span just over three seconds) but it only works on the first item it's called for:
function blinkOn(span){
span.counter=0;
span.defColor=span.style.color;
span.alertTimerId =setInterval("blinkOnce('"+span.id+"')", 400 );
}
function blinkOnce(spanID){
var span=document.getElementById(spanID)
span.counter++;
if(span.style.color==span.defColor){
span.style.color='transparent'}
else{
span.style.color=span.defColor;
}
if(span.counter>8){
blinkOff(span);
}
}
function blinkOff(span){
clearInterval(span.alertTimerId);
span.style.color=span.defColor;
}
I use jQuery for this kind of thing, personally:
$('#element_id')
.fadeOut(300)
.fadeIn(300)
.fadeOut(300)
.fadeIn(300)
.fadeOut(300)
.fadeIn(300)
.fadeOut(300)
.fadeIn(300)
.fadeOut(300)
.fadeIn(300);
Quite inelegant I know but it does the job. jQuery UI does have some more concise effects.
The only place I use it is for when a user adds something to a shopping basket without redirecting to the basket page, just to make sure they know that it's been added.
See:
http://api.jquery.com/fadeIn/, http://api.jquery.com/fadeOut/ and http://jqueryui.com/docs/show/ (pulsate, in particular)
I'm not exactly clear about the behavior you desire, but it sounds like you might be able to flash the question (or take some kind of action) using a Javascript timer. You can create unique timers for each element that you want to flash. And you can flash them once or set them up to repeat infinitely or up to a limit. Here's one example:
http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/
I took some time to work this out this morning. If you haven't gotten yours to work yet, I hope you can adapt this to help.
<html>
<head>
<script type="text/javascript">
var idArray = [];
var defaultColor = '#000000';
function makeItemsBlink(blinkTime) {
blinkForTime('q1', blinkTime, '#ff0000');
blinkForTime('q2', blinkTime, '#00ff00');
blinkForTime('q3', blinkTime, '#0000ff');
}
function blinkForTime(id, blinkTime, blinkColor) {
idArray[id] = setInterval('toggleColor("' + id + '", "' + blinkColor + '")', 400);
setTimeout('stopBlinking("' + id + '")', blinkTime);
}
function stopBlinking(id) {
clearInterval(idArray[id]);
document.getElementById(id).style.color = defaultColor;
}
function toggleColor(id, blinkColor) {
var e = document.getElementById(id);
var currentColor = e.style.color;
if (currentColor == defaultColor) {
e.style.color = blinkColor;
}
else {
e.style.color = defaultColor;
}
}
</script>
</head>
<body onload="makeItemsBlink(3000);">
<div id="q1">Test question 1</div>
<div id="q2">Test question 2</div>
<div id="q3">Test question 3</div>
</body>
</html>