I'm slowly learning to implement Javascript into my websites to generate automated changes, actual code is scary for my graphic designer approach but I think I'm getting there.
I followed an exercise some time ago that had me make a countdown clock that resets every time it reaches 0, nothing to crazy but it got me thinking:
Is there any way to make that reset affect the content of the entire page?
The practical case that made me think of it is the website of a restaurant that has a different coupon every day of the week, they upload the coupon code to their social media everyday but if I could develop a site that loops the codes depending on the day and make it change the text content and the stylesheet on it's own the process would be automatic.
I can't figure out how you'd link the clock reset to that change though, tried searching for it and I think this might be solved with some AJAX shenanigans, but it seems to be a bit too specific to find, any guidance would be greatly appreciated.
Hi and welcome to stackoverflow. This is a very general question. It is hard to answer without specificity that requires knowledge the community doesn't have. For example:
When you say "I followed an exercise some time ago...", what did the code look like? What was your final product? How is JavaScript used?
When asking a question in stackoverflow, it can be helpful to share a snippet of what the code looks like so that others can help by testing the code themselves and giving feedback. Or at the very least observing the functionality and maybe catching small syntax errors.
To the second point of "Is there any way to make that reset affect the content of the entire page?" Yes. There are MANY MANY MANY ways to affect content of a page, either in pieces or in its entirety. Once again it depends on what you want to do with the code that YOU have specifically. Even with the basic tools of HTML and JavaScript you can do this. You don't need "AJAX shenanigans" LOL.
If you are just starting out, dig deep into the basics of JavaScript(if that is your preferred language). You will find a whole host of versatile functionality through creating objects, methods, manipulating the DOM, building your own event handlers, etc. Also if none of what I just wrote makes any sense, then you now have some terms worth researching on your own.
I hope that this is helpful for you, and I wish you the best of luck on your coding journey.
I am trying to bind tagsinput with source option but it is not working. I am not understanding what I am missing there. Its a small code which I took from their official site http://www.jqueryscript.net/demo/Nice-Tags-Manager-Plugin-with-jQuery-Bootstrap-Bootstrap-Tags-Input/examples/. Also there is no error on console. fiddle
$(document).ready(function () {
$('#aa').tagsinput({
source:['ams','bms','lite']
})
});
This might not be the answer you are looking for but I feel that I must share my experience. I've tried A LOT of these third-party javascript tagging systems (including yours). Some didn't workedl; some did but some functionality was missing, etc. The solution that I've found to work best is selectize.js. It has most of the required functionality, here is some of it:
Add and remove items in any order without touching your mouse.
You can choose whether the user can create new tags or use only the ones you've provided for them
You can limit the count to your tags
It has a nice interface
It is fairly simple to use
I know this doesn't answer your question but I just feel obliged to tell you given the fact that I've wasted so much time searching for that kind of thing.
Is there a way to add, specifically, form elements for every day that are distinguishable per day? Below is an example.
I know FullCalendar is built to handle "Events", so from what I can tell in the docs, it's not really possible. But I'm not a Javascript guru either, so would anyone else know of a solution? I'm hoping to not have to reinvent the wheel.
That's an interesting idea which I haven't attempted yet. I don't think there is a callback like onRenderDay(), so you'll probably have to hack it in there. I'd suggest adding your code into the viewDisplay callback. Something like this maybe:
$('#calendar').fullCalendar({
viewDisplay: function(view) {
$("#calendar .fc-view-month td").append('<input type="checkbox"/>AM<br>');
}
});
You may need to tweak the selector, perhaps use .fc-grid. You could also customize it to not include <td> elements with a class of .fc-other-month, so that only actual days of the currently viewed month will have the extra content in them and not days from the previous or next month that are in this month's view.
I'm assuming that any events will overlap on top of your content, so this might all be for naught anyway. Unless you aren't going to show events, in which case you could probably solve this better without fullcalendar.
Also, your image looks like you want just a single week to show. I don't thin that is possible with fullcalendar. Besides, if that is what you want, there would be much simpler ways to do it than using fullcalendar.
Good luck!
I am looking for some kind of example of a Javascript Time Picker that is similar to the one used in Windows to pick the time...well except with out the seconds being in their. I have a mockup in place at the moment but trying to figure out how some of the user functionality should be be as it is two inputs and a dropdown. I guess I just am not happy with it at this point.
Thanks ahead of time for any help
There are a number of jQuery plugins that you can use for the perfect looking time picker control.
Here is a good one: http://plugins.jquery.com/project/timepicker
The Windows time picker (if you're referring to the one to change the system clock) is basically just a masked edit text box. If you're looking for something similar, you just need some JavaScript to do masked edits, like this one:
http://digitalbush.com/projects/masked-input-plugin/
To make it specifically for time, you should be able to easily add logic to ensure the hours don't go over 12 (or 24), and the minutes don't go over 59.
Personally, I prefer the way Google Calendar does time selections. There is a jQuery plugin for this which can be found here:
http://labs.perifer.se/timedatepicker/
Here's a cool one.
http://www.java2s.com/Code/JavaScript/GUI-Components/FancyTimePicker.htm
An online example of the control is posted here.
Like Dan said, if you are looking for a masked text input and if you want to use the PrototypsJS framework, there is http://code.google.com/p/phenx-web/ .
And if you want a good date/time picker, you could use this : http://home.jongsma.org/software/js/datepicker (also PrototypeJS). I'm currently working on it with Jerermy Jongsma to add more features.
I'm pretty fond of the jQuery stuff, There is a fairly nice one here.
I ended up creating a prototype time picker that for the time being is less fancy than a lot of the others out there. It shows up a regular input until you click on it then it shows a dropdown that has times in it.
I can share the code if anyone is interested
A timepicker shouldn't slow down the user's interaction, should be pretty straightforward without having to play with it for a while, and should be keyboard-accessible for users who can't manipulate a mouse. The time-picking functionality provided by the Any+Time™ Datepicker/Timepicker AJAX Calendar Widget with TimeZone Support meets all of these design goals, supports countless date/time formats and is easy to customize using CSS or jQuery UI.
A good test of timepicker usability is to think of an odd time (say, 10:32pm) and then see how long it takes to accurately select that time using various time pickers. You can probably do it with Any+Time™ faster than you can even write out the time by hand... how's that for speed and ease of use? :-p
Locked. This question and its answers are locked because the question is off-topic but has historical significance. It is not currently accepting new answers or interactions.
I've had a lot of good experiences learning about web development on w3schools.com. It's hit or miss, I know, but the PHP and CSS sections specifically have proven very useful for reference.
Anyway, I was wondering if there was a similar site for jQuery. I'm interested in learning, but I need it to be online/searchable, so I can refer back to it easily when I need the information in the future.
Also, as a brief aside, is jQuery worth learning? Or should I look at different JavaScript libraries? I know Jeff uses jQuery on Stack Overflow and it seems to be working well.
Thanks!
Edit: jQuery's website has a pretty big list of tutorials, and a seemingly comprehensive documentation page. I haven't had time to go through it all yet, has anyone else had experience with it?
Edit 2: It seems Google is now hosting the jQuery libraries. That should give jQuery a pretty big advantage in terms of publicity.
Also, if everyone uses a single unified aQuery library hosted at the same place, it should get cached for most Internet users early on and therefore not impact the download footprint of your site should you decide to use it.
2 Months Later...
Edit 3: I started using jQuery on a project at work recently and it is great to work with! Just wanted to let everyone know that I have concluded it is ABSOLUTELY worth it to learn and use jQuery.
Also, I learned almost entirely from the Official jQuery documentation and tutorials. It's very straightforward.
10 Months Later...
jQuery is a part of just about every web app I've made since I initially wrote this post. It makes progressive enhancement a breeze, and helps make the code maintainable.
Also, all the jQuery plug-ins are an invaluable resource!
3 Years Later...
Still using jQuery just about every day. I now author jQuery plug-ins and consult full time. I'm primarily a Djangonaut but I've done several javascript only contracts with jQuery. It's a life saver.
From one jQuery user to another... You should look at templating with jQuery (or underscore -- see below).
Other things I've found valuable in addition to jQuery (with estimated portion of projects I use it on):
jQuery Form Plugin (95%)
jQuery Form Example Plugin (75%)
jQuery UI (70%)
Underscore.js (80%)
CoffeeScript (30%)
Backbone.js (10%)
Rick Strahl and Matt Berseth's blogs both tipped me into jQuery and man am I glad they did. jQuery completely changes a) your client programming perspective, b) the grief it causes it you, and c) how much fun it can be!
http://www.west-wind.com/weblog/
http://mattberseth.com/
I used the book jQuery in Action
http://www.amazon.com/jQuery-Action-Bear-Bibeault/dp/1933988355/ref=sr_1_1?ie=UTF8&s=books&qid=1219716122&sr=1-1 (I bought it used at Amazon for about $22). It has been a big help into bootstrapping me into jQuery. The documentation at jquery.com are also very helpful.
A place where jQuery falls a little flat is with its UI components. Those don't seem to be quite ready for primetime just yet.
It could be that Prototype or MooTools or ExtJS are as good as jQuery. But for me, jQuery seems to have a little more momentum behind it right now and that counts for something for me.
Check jQuery out. It is very cool!
A great resource for learning jQuery is: Learning jQuery. The author, Karl Swedberg, also co-wrote the book titled... ready? Yup, Learning jQuery. Remy Sharp also has great info geared towards the visual aspects of jQuery on his blog.
--SEAN O
I used Prototype for about six months before I decided to learn jQuery. To me, it was like a night and day difference. For example, in Prototype you will loop over a set of elements checking if one exists and then setting something in it, in jQuery you just say $('div.class').find('[name=thing]') or whatever and set it.
It's so much easier to use and feels a lot more powerful. The plugin support is also great. For almost any common js pattern, there's a plugin that does what you want. With prototype, you'll be googling for blogs that have the snippet of code you need.
It is very much worth it. jQuery really makes JavaScript fun again. It's as if all of JavaScript best practices were wrapped up into a single library.
I learned it through jQuery in Action (Manning), which I whipped through over a weekend. It's a little bit behind the current state of affairs, especially in regard to plug-ins, but it's a great introduction.
There are numerous JavaScript libraries that are worth at least a cursory review to see if they suit your particular need. First, come up with a short list of criteria to guide your selection and evaluation process.
Then, check out a high level framework comparison/reviews somewhere like Wikipedia, select a few that fit your criteria and interest you. Test them out to see how they work for you. Most, if not all, of these libraries have websites w/ reference documentation and user group type support.
To put some names out there, Prototype, script.aculo.us, Jquery, Dojo, YUI...those all seem to have active users and contributers, so they are probably worth reading up on to see if they meet your needs.
Jquery is good, but with a little extra effort, maybe you'll find that something else works better for you.
Good luck.
I found that these series of tutorials (“jQuery for Absolute Beginners” Video Series) by Jeffery Way are VERY HELPFUL.
It targets those developers who are new to jQuery. He shows how to create many cool stuff with jQuery, like animation, Creating and Removing Elements and more.
I learned a lot from it. He shows how it's easy to use jQuery.
Now I love it and I can read and understand any jQuery script even if it's complex.
Here is one example I like "Resizing Text"
1- jQuery:
<script language="javascript" type="text/javascript">
$(function() {
$('a').click(function() {
var originalSize = $('p').css('font-size'); // Get the font size.
var number = parseFloat(originalSize, 10); // That method will chop off any integer
// from the specifid varibale "originalSize".
var unitOfMassure = originalSize.slice(-2); // Store the unit of massure, Pixle or Inch.
$('p').css('font-size', number / 1.2 + unitOfMassure);
if (this.id == 'larger') {
$('p').css('font-size', number * 1.2 + unitOfMassure);
} // Figure out which element is triggered.
});
});
</script>
2- CSS Styling:
<style type="text/css" >
body{
margin-left:300px;text-align:center;
width:700px;
background-color:#666666;}
.box {
width:500px;
text-align:justify;
padding:5px;
font-family:verdana;
font-size:11px;
color:#0033FF;
background-color:#FFFFCC;}
</style>
2- HTML:
<div class="box">
Larger |
Smaller
<p>
In today’s video tutorial, I’ll show you how to resize text every
time an associated anchor tag is clicked. We’ll be examining
the “slice”, “parseFloat”, and “CSS” Javascript/jQuery methods.
</p>
</div>
I highly recommend these tutorials:
http://blog.themeforest.net/screencasts/jquery-for-absolute-beginners-video-series/
There are a number of resources to learn jQuery (which is completely worth it IMHO). Start here http://docs.jquery.com/Main_Page to read the jQuery documentation. This is a great site for seeing visually what it has to offer:
http://visualjquery.com/1.1.2.html. Manning publications also has a great book which is highly recommended called jQuery in Action. As far as JavaScript libraries are concerned, this one and Prototype are probably the most popular if you're looking to compare jQuery to something else.
I started learning by looking at jQuery extensions to see how other developers work with the jQuery language. It not only helped me to learn jQuery syntax but also taught me how to develop my own extensions.
jQuery worths learning!!! I recommend reading "Learning jQuery" and "jQuery in Action". Both books are great with expalanation and examples. The next step is to actually use it to do something. You will find official http://docs.jquery.com docummentation very useful. I use it as a reference, google it all the time :)
Also "Learning jQuery" blog mensioned by Sean is also very useful. Also jQuery HowTo is also has a great collection of jQuery code snippets.
I haven't seen JQ-Fundamentals - by Rebecca Murphey mentioned anywhere here.
It is a very good book. It also explains the fundamentals of JavaScript required to understand the basics of JQuery.
Jquery.com is well organized and has many great examples. You don't need to buy a book. I found it easy to pickup on the fly by just referencing website's documentation. If you're someone who learns best by doing, I'd suggest this approach.
And yes, it's absolutely worth learning. It'll save you a lot of time and you'll actually look forward to doing JavaScript work!
I use Prototype, which I like. I'm afraid I don't know jQuery, so I can't compare them, but I think Prototype is worth checking out. Their API docs are generally pretty good, in my experience (which certainly helps with learnability).
Hey, I am biased in that I now work with these guys, but Carsonified offers some great resources for people learning and improving their jQuery skill set.
Just next Monday there is an online conference on jQuery featuring John Resig himself - http://carsonified.com/online-conferences/jquery/
Also, they now offer video tutorials via their membership scheme on the Think Vitamin blog,
I know there's a lot of free resource out there, I guess the difference here is the quality of the content you get. hope it's useful!
Below link my be helpful for you if you know SQL (Only css selectors).
http://karticles.com/2011/06/learning-jquery-with-sql-basic-selectors
http://karticles.com/2011/06/learning-jquery-with-sql-attribute-selectors