Back in 2006, it introduced itself as:
> jQuery is a new type of Javascript library. It is not a huge, bloated, framework promising the best in AJAX - nor is just a set of needlessly complex enhancements - jQuery is designed to change the way that you write Javascript.
> jQuery is a Javascript library that takes this motto to heart: Writing Javascript code should be fun. jQuery acheives this goal by taking common, repetitive, tasks, stripping out all the unnecessary markup, and leaving them short, smart and understandable.
Taken from: https://web.archive.org/web/20060203025710/http://jquery.com/
As a backend guy, Twitter Bootstrap is the best thing for something fast, simple and pretty clean. You only have to deal with the classes and the markup and that's it. Also you have some javascript plugins, if you want some blink.
Regarding the javascript thing, I mostly use jQuery. I didn't know much of javascript, but it made me do things in a fast way. It has a little learning curve but once you're at it, you can do some cool things.
Web Designer/Developer here.
You have a very good idea on deciding to code all by yourself, plus you'll be able to generate a good amount of content doing so. (a very important quality for a successful blog)
This is my advice for people want to build a website from scratch :
-Don't reinvent the wheel : There are plenty of frameworks/structures/libraries of code to work with. So try not bugging on something for a long time. Chances are someone already encountered the problem and there exists tools that solve it.
-Stay aware of trends : Try doing some research on what will make you look fresh and different from other blogs.
-Learn PHP : You don't really have a choice ;). All major CMS's like Wordpress work with PHP.
-http://stackoverflow.com/ : the best website ever for programming... you ask a question to the community and they answer! simple as that, I found that is one of the most efficient ways to learn.
Now for promoting your blog, I would recommend finding a very specific niche market that has alot of potentiel. You seem to have found one In my opinion. Don't throw content up in the air without a target public. After you have a good amount of regular visitors you can then start to do open up to a larger public and working on SEO.
Here are two very good tools for creating websites : http://getbootstrap.com/ http://jquery.com/
Hope this helps! :)
You could do it pretty easy with jQuery. With jQuery you can add and remove css classes with pretty simple code. Make the classes to make things black in your css. Without the black classes, things are white. Then make a button with the id of "switchcolors" or something
$(document).ready(function() {
$('#switchcolors').click(function(event){ $('body').toggleClass("black"); });
}
you need to link to the jquery javascript library too.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
Yes, that kind of stuff is done using Javascript, HTML, and CSS. However, it is by no means 'basic' - trying to write that code on your own in a way that works (or degrades gracefully) on all major browsers, while maintaining good coding practices, is definitely not an easy task. I would confidently guess that Google used an underlying Javascript UI library to accomplish a lot of the "core" drag and drop functionality, and then built the custom drag and drop interface on top of that. Google probably used either an in-house (not released to the public) solution or one of the major open source UI libraries (jQueryUI, YUI, etc).
In terms of learning how to make that kind of stuff, I'd recommend learning how to use jQueryUI (http://jqueryui.com), which requires learning Javascript and jQuery (http://jquery.com). jQueryUI is a user interface library built on top of jQuery, which is an incredibly useful and extensible Javascript library for almost all types of client-side scripting. Using both of these requires an understanding of how Javascript itself works, but using well-constructed existing libraries greatly simplifies the development process. Also, if you want to really know how it all works, jQuery and jQuery UI are open source, so you can browse (and contribute back to) the codebase as much as you want. Here's a jQuery UI demo of drag and drop functionality: http://jqueryui.com/demos/droppable/
Nice & thanks, I'm using bootstrap for the majority of it's structure. I generally run with NodeJS as a backend for all my data but as it stands I'm just making calls to json files, via javascript, this is for things like the vendor items & map icons. Due to time restrictions and laziness I'm using jQuery for the bulk of my javascript, but apart from one or two things, it could easily be vanilla javascript.
To learn more I'd recommend pulling other people's websites apart to see how they work, it's a good way to find interesting things too, like I did with bungie's. Good Luck!
OR:
// myWorks.txt index should be like that: {0 : "sentence0", 1: "sentence1", 2: "sentence2"} // Use jQuery $.ajax function: http://jquery.com/ $.ajax({ type: 'GET', url: 'http://localhost/path/to/myWords.txt', dataType: 'json', success: function(response) { // response is myWords.txt in Javascript array. var randomIndexNumber = Math.floor((Math.random()*10)+1); alert(response[0]); // Or: alert(response[randomIndexNumber]); }, error: function (xhr, ajaxOptions, thrownError) { alert('Error: Status code:'+xhr.status+', Message:'+thrownError); } });
hostinger is a webhost and really has nothing to do with javascript libraries per se. if your goal is to learn jquery, they can't help you. you can place a site there which includes code written with jquery. wordpress comes with jquery built in and therefore a wordpress site that you host could include some amount of javascript including things written with jquery.
but, if your goal is simply to learn jquery, you could read the jquery documentation and create a jsbin or codepen account for free. then try building a few things on those sites. between that and watching youtube videos you can get a long way.
There's a python web microframework called Flask http://flask.pocoo.org/ which sounds perfect for what you want (especially considering you've already written some stuff in python).
If you want to be able to use the arrow keys, and to get live feedback from your robot, then you'll almost certainly have to use Javascript as-well (which is what does any fancy browser stuff). There's a thing in Javascript called AJAX, and that allows the transfer of information between your browser and server, without reloading the page. The best documented implementation of AJAX is probably from the Javascript library called JQuery http://jquery.com/ .
It'll probably be a fairly steep learning curve but there is an active sub for flask https://www.reddit.com/r/flask where you can get good help.
>will make working with Django's python/SQL backend much easier
WAY easier. Since you seem relatively new to this stuff, I would recommend looking into JQuery, and JQuery learning (what I used for making the button and clicking work). Also, CSS will let you do a LOT of things with nothing more than simple html divs.
For example:
(html) <div id="map"> <div class="room"></div> </div>
(css) #map { background: url(myMap.jpg); width: 900px; height: 900px; } .room { background-color: transparent; width: 40px; height: 40px; border: 1px solid black; display: inline-block; }
will get you very far.
I would like to bring up the discussion about the use of Libraries in Development of incrementals, specifically in regards to Javascript.
I personally love to use JQuery and AngularJS.
AngularJS for me has the huge benefit of updating page variables without the need to constantly send an update. Its data linking is also a really powerful feature although I do not use it as much as I could, (works more for server side data).
JQuery makes things simple, it adds a lot of powerful features (event handling, animation, page manipulation) that help out a lot on the process of making incremental games.
Rather than go into a lot of detail (maybe another time) I am more interested in which libraries are used by the other developers out there, are there some you cant live without, or maybe you prefer to make everything from scratch.
JSON is just a string that can be parsed into a JavaScript Object. You can read all about the JSON syntax here. If you want to build something like this checkout jQuery. jQuery's ajax helper methods are capable of handling JSON requests for you so you don't have to do any additional work. JSON has pretty much replaced XML for API requests so it is a very valuable thing to learn.
Definitely a nice job for a first time. Design looks nice and clean, but also a lot like a Google product. You've also got an HTML5 doctype, so it's good practice to use more semantic tags (eg. <footer> instead of <div id="footer">).
[](/rscootacheer)Next stop: learn jQuery!
Going to be honest: with a site that looks like that, nobody will hire you, even if you're an amazing programmer.
Red text on blue with a script font. If you don't know colour theory, use Adobe's Kuler to help.
Gradient background
Aliased title font
Your main point (contact) is at the very bottom of the page
All the text is on the left of the screen.
The site layout is poor; the main content of the page should be held inside a centered, segmented box. Take a look at the jquery site for what I mean.
Even if you're mainly a programmer, having an ugly or unreadable website will turn the employer off immediately.
z-index only works for positioned elements (like position:absolute; position:relative; etc...)
When you load the page, one of the tabs is already "active" eg. selected? Then just define style for it, like this:
<div id="tab1" style="background-image: url('/url/to/background.jpg');"> <!-- content --> </div>
It would be more beneficial (eg. eloquent) to define this styling in internal or external stylesheet
With good JavaScript library (like the already proposed jQuery, which I too recommend), animation should be quite easy.
Happy learning!
Have you heard of JQuery? It will make writing javascript much easier.
Then you can do something like:
$('#linkID').click(function(event) { event.preventDefault();
~~$('#mydiv').append('myContent.html');~~
$('#mydiv').load('myContent.html'); //This should work
});
Note: that syntax might not be perfect, it was off the top of my head
EDIT: Also, with your current code, maybe you need to make it './games.html'? I'm not too familiar with vanilla javscript but it could be its not looking in the right path.
EDIT2: Hold on I don't think this works, let me check it out real quick..
Many of your questions are things that trouble beginners. I think you should have done a little more research before posting, though. I'll do my best to answer.
Menus are really all about personal taste. Sure, you can make a menu using pure CSS and ULs but to make it visually appealing, adding Javascript is needed. Take a look at jQuery for this. Their documentation is amazing and full. Just head to their site.
Building from scratch is a lengthy process for a beginner but for advanced developers, we can build an entire skeleton in minutes. Therefore, this depends on your skill level and interest in learning. Another option is simply downloading a CMS (look into Wordpress, Joomla, or Drupal) and installing themes. They will give you all of the functionality that you seek without all of the labor. All you will have to do is have access to the database and FTP.
If you have Dreamweaver, use it. I use Dreamweaver for handling all text and code files because of its code editing features. Notepad is more of a use-it-if-you-have-to tool.
Here's my 2 cents on the issue though: -Get access to the database and FTP and install Wordpress -Go and install a theme of choice for it (all covered in the documentation) -Use it to create pages
You'll be happier with the results and have much more free time for other stuff. PM me for more information if you wish.
If you have experience in another programming language, you'll find the basics of PHP really easy to learn. Just google for a PHP tutorial and mess around with a WAMP/LAMP install on your computer. You will also want to learn a framework for PHP since they really do a nice job doing a lot of the work for you and keeps you away from PHP's horrid library. I recommend codeigniter (http://codeigniter.com/).
In addition to php, if you're really new to web development, you probably should learn some javascript (also easy to learn with programming experience) and then the javascript framework jQuery (http://jquery.com/).
this advice is good, but not optimal. Placing alerts is indeed a temptation as it's easy, but, and this I promise you, is not even near to the best practice. If you are starting to program, which is awesome, you should take a few hours to learn to love chrome's or firefoxe's developer tools. I swear if you set a single breakpoint in the correct place you'll achieve the same than with your alert, only 1000 times better and it will also allow you to check the state of any other variable, only by hovering your mouse over it. Yes, it's that much better.
also a tip: when I used alerts I detested the little damn things popping up, so I programmed a personal "alerta()" method that printed alerts in a little absolute-positioned div in the upper-right corner of my pages, with a counter. It's my little console and I still use it when I definitely MUST use an alert.
as for additional advice (I know you didn't ask for any, but it maybe could help you), you should really consider using a simple yet extremely time-saving little wonder called jQuery. Take 15 minutes to check the site and if you don't like it, dismiss it.
aaaalso: using some code editor could help you check for spelling errors. You are using a computer to code; let the machine help you with stupid, circumstantial errors so you can focus your energy and skill to complex and intelligence-oriented tasks
: )
Here's some code that does a toggle client-side. Requires the jQuery library.
<a href="javascript:$('#comments').toggle();">toggle comments</a> <div id="comments" style="display:none";> <div class="comment_list"> </div> <form> <textarea>Comment</textarea> <input type="submit" /> </form> </div>
No. It's dying, and that's a good thing. If you're really worried, learn some JavaScript in depth; it's so similar to ActionScript that if you do end up needing Flash, you'll have a head start.
I've been a professional web developer for three years and perhaps twice I have had clients request a Flash site, and they were both very easily talked out of it. The argument "it won't work on iPhone/iPad" helps a lot.
You'd do much better to master a JavaScript framework; and much as I love MooTools, I'd suggest you go with jQuery, which seems to be winning the war.
Don't worry about 'picking coding late'. I started about a year ago (I'm 29 at the time) and I'm now working on my first actual (paid) full stack project. So hang in there!
About the subscription count, the API provides a way to retrieve it (see here).
It seems simple enough, I would suggest you give it a go, you'll learn a lot in the process.
Look into this:
Your script would follow steps like these:
Then CSS makes the progress bar fancy and whatnot.
On outsourcing. I can't give a good reference (not in the states, little experience with this kind of things), but I'd wager no more than US$50-70 for just the XP bar. Feel free to PM me if you'd like some more guidance.
There are many paths possible, really! It all depends on what you want to learn next: Sass will allow you to go beyond simple CSS to style your pages, while jQuery will wrap some Javascript functions that operate on DOM objects (ie. your web page) into more complex procedures and allow you to add further interactivity in your pages.
Regardless of the next step, you'll learn something new and relevant! Ultimately, why not take them all (not at the same time, of course)?
since css is intended for static pages and selecting is interactive, css alone won't cut it.
If you are looking for pre-existing solutions, jquery + datatables + Select Extension should do the trick on the javascript side of things.
I highly recommend learning JavaScript, and looking into using jQuery which makes life a lot easier (it's a library to add lots of tools in JavaScript). If you know some HTML and CSS it will make it much easier, if not you'll probably want to look into learning a bit about those too.
W3Schools is also a great site to learn the basics, and covers a lot of topics.
You're doing web development wrong if you can't get jQuery to work on IE 11.
FF and Chrome "work" for you because they handle dumb developer mistakes vs IE likes to think you can code.
Stick with HTML, CSS and JavaScript (if you're inexperienced with JavaScript I recommend using jQuery, it's a bit friendlier in terms of it's syntax for beginners is a good pragmatic choice if you have a deadline).
If you're happy to maintain it yourself then it's nice and easy, if he needs to be able to update it then it's a bit harder.
Assuming the former, stick with what you know, don't try re-invent the wheel. The key to not getting overwhelmed is to just start with the things you can do and wait until you get stuck. It's much easier to research a specific problem than just "learn how to do something".
You can accomplish most of this with HTML and CSS. In fact, assuming no CMS (content management system) is needed, you could potentially do it all in those two. Just play to your strengths.
I'd start by getting your stadium set up and some dummy dots positioned here and there. Then, create some visible tool-tips with your pictures etc in and when you're done styling them with CSS, hide them with display: none
.
Once you've done that it's just a case of having them appear when you hover/click/touch. For usability reasons I would not recommend just having it on hover (although if you were to do this you could achieve it with just the CSS :hover
pseudo-class eliminating the need for JavaScript. Having said that, better if you use JS to have them appear on touch/click.
If he wants to manage them then you have two main challenges that I can think of:
If this comment is remotely useful and that is the case I'm happy to follow up with some more ramblings
Yeah, it's a lot to take in, but realistically you don't have to, at least not yet. It would honestly be a waste of time for both of us for me to explain what jquery is besides at a hand-wavy level and for you to try to understand it.
http://jquery.com says (right at the top of the page below the header)
> What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
For a reddit comment, that's about as much detail as I can reasonably give. If you read that and don't understand it, you can ask questions like "what's document traversal? What's event handling? What's Ajax?" Of course you could look those up too, but those are much smaller questions that are easier to answer.
I would focus on just learning the ins-and-outs of javascript until you understand the basics. Then, you'll start to google "how to do this" and learn that libraries such as jquery make it a lot easier and it's a natural introduction.
It depends on the language.
In PHP the dollar sign symbol is used for denoting variables, and it's easy to parse. In PHP, I could do
$name = "Programming Parody"; echo "Hello $name";
Where as in C# it could be something like
var name = "Programming Parody"; Console.WriteLine("Hello " + name);
As for other languages, you may be talking about Javascript and jQuery. jQuery is a highly used Javascript library. I won't go into the details about it, but you can call jQuery functions using the dollar sign.
$('body'); //Gets the body element in the HTML DOM
Also as nutrick pointed out, you could do the same thing using jQuery().
I'm just using Visual Studio Express for Web. It's free and has pretty good editors for Html, Javascript and CSS.
I'm a full time web developer as well, mostly using Java/Spring so I'm more familiar with Eclipse as an IDE. But I know we have some C# projects coming soon so I wanted to get to know Visual Studio better.
I'm using Github for source control and web hosting, basically because it's free and fast with almost no limitations.
You can aggregate any web data by creating a chrome extension and using web technology like jquery. What you would need to do, would be fetching the table from the foreign site and place it into the current site.
Then you would only have to paste the data into your spreadsheet to apply your formula. But even that could be integrated into the extension.
I've you have some basic programming/scripting knowledge, that would be the way to go. If you need any help, just let me know
May want to look into jQuery. It's really good at things like this.
Using jQuery you can do something like this to change the css:
$("#elementID").css({ "backgroundColor": "black", "color": "white" });
You need to provide the jQuery min.map for you min.js file. Heres the one you need: http://code.jquery.com/jquery-1.9.1.min.map Which you may want to upgrade to 2.11 http://jquery.com/download/
Edit: I would also disable indexing in your wamp config: Options -Indexes (or similar)
because: http://www.betterexcuse.com/assets/
Oh and disable the server printout at the bottom of the error / indexes pages (you're giving away your apache version and much more!)
Your HTML is incorrectly formated and although it should not be a cause of code failure in this case, it's always a best practice to have it right : <div> shouldn't be inside <p> and each tags should close in the corresponding order.
What you're trying to do can be achieved with the <audio> tag introduced in HTML5 and compatible with most of the recent browsers. You should also look into a very popular javascript library called jQuery which makes writing JS much easier and less verbose.
Anyway, here is your code with some groovy music inside :) http://jsfiddle.net/3wTvb/
Not familiar with the site you mention, but when creating HTML-based games via Javascript, you're looking at one of two contexts:
Canvas drawing is what you want for more traditional gaming - a rectangular viewport with "stuff going on" inside. DOM manipulation would be a better choice if you're more concerned with page layouts that aren't constrained to a rectangular viewport - something more akin to "page views" of a web browser. You'd probably want the latter if you're going to be doing a lot of flowing of web-based content (such as verbose cards) into display areas.
So, by way of example, something like solitaire or UNO might be good for canvas drawing, whereas something like Arkham Horror might be better suited for DOM manipulation.
And of course, nothing is stopping you from combining the two, using a canvas element to draw a game board and location of pieces, and then using DOM manipulation to handle things like player inventory or chat.
There are scores of libraries and frameworks for working with both of those contexts. jQuery is one of the more popular DOM manipulation libraries. For canvas drawing, I'm less familiar with the libraries, but some googling found this review of several different libraries that are available.
You may also need a development environment for the server back-end. There are, of course, many solutions for that, but a pretty easy one to get into (depending on your background) and a widely-available one at various ISPs would be PHP, but the internet is full of people who would love to evangelize you to other stacks, so there's probably a language out there to fit your particular whims on the server side of things.
(If you know all of the above and are looking explicitly for a library aimed at board game development, can't help you there.)
Of course, it's more of a preference, and learning vanilla JavaScript is nice; however, I can promise you jQuery will ease your development, and takes less than 30 seconds to add.
http://jquery.com/
http://jqueryui.com/
It is a good quick look up for information and refresher (shit, is it display: none or display: hidden), but for a beginner, I wouldn't recommend it. http://w3fools.com/ for it's errors and use it's learning section.
Also for the OP, keep in mind for frontend there are only a handful of html tags you should be using and if a tutorial doesn't stress keeping layout in HTML and styling in CSS, it might be out of date.
Also, as for backend languages, I would recommend Ruby (with Ruby on Rails as a framework), Python and PHP (both with quite a few frameworks to choose). You can also do backend programming with Javascript using Node.JS but I'm not sure I would recommend this to a beginner.
Also, keep in mind that javascript style has changed in the past 5 years. I would recommend Javascript: the good parts to learn javascript. After you understand the basics of javascript and know WTF the DOM tree is, go learn some jquery.
If you're looking for a career in web development, just HTML and CSS isn't going to get you anywhere. However, they are definitely necessary skills. HTML and CSS are just the physical makeup of a webpage. You can make a page look nice with HTML and CSS but the page won't be interactive and interactivity is what makes the web so wonderful. However, if you just want a basic background in web design, then HTML and CSS are pretty much all you need. Again, if you are interesting in actually developing interactive websites then I would recommend looking into JavaScript and jQuery or PHP. jQuery is great for beginners and is quite easy to learn especially if you have a decent background in HTML and CSS. http://jquery.com/
Let's break it down...
Part 1: The initial column setup (MyNewFormLink) creates a calculated column that provides a link to "NewForm.aspx?ClientVal=" + whatever the title of the list item you wish to provide. The point of this is to inject a parameter for you to use in Part 2.
Part 2: The tutorial instructs you to use a Content Editor Web Part to put HTML (and more specifically, Javascript) directly into the page. What it fails to mention is what the point of the first line is. >01 <script type="text/javascript" src="../../Javascript/jquery-1.3.2.min.js"></script>
This tells the webpage to pull in a library of functions for use known as jQuery. jQuery allows us to manipulate the webpage (or DOM) dynamically in Javascript shorthand. You will need to download jQuery and store the jquery*.min.js where SharePoint can access it and provide an appropriate src URL. Now to the actual code...
>Lines 03 & 27-37
The init_fields() function is executed first, and it seeks to locate the form's input fields for reference later.
>Lines 05 & 14-25
The getQueryParameters() is executed second, it checks the URL of the current page and pulls out any parameters.
>Lines 08-11
This specifically defines what data we wish to provide where. It checks if a ClientVal was provided in the URL, if so it searches to see if there is a "Title" field and then supplies the value accordingly.
Let me know if you need further elaboration.
Okay great. Thanks for sharing!
If you're looking to get into web and mobile application design professionaly start with building solid design skills. This is so vital.
Typography, color, layout, design process (creative briefs, web design process etc).
Then you can move into learning html5 and css3 development. You'll also probably want to learn jQuery and a little bit of Javascript, enough to make interactions work in the browser.
Since the web is in constant flux things like html5boilerplate, compass, and jQuery make it bearable.
But if you're looking to get a job as a designer in any field you have to have a strong understanding of the basic graphic design principles and approach everything as a creative problem to solve.
Learning how to do an iPhone or Android application from scratch can be pretty daunting. You have to learn programming languages (which you may be adept in already) in order to get one developed and pushed. I've never done anything even remotely complex, nor do I understand what I'm doing when I am. It's really a computer science thing unless you're doing it day in and day out. If you want to, there are tons of tutorials to get started. When I design apps I only fill the role of UI/UX and then produce assets for developers to integrate, then QA the work to make sure my designs are upheld.
Ah. That part is handled in the web browser (preferably using jQuery).
You need two parts. Part one is logain2006's script (or something similar). Call it '/uptime'. Part two is the html that you send the client, call it '/index.html'.
Part two needs to have a <div>. The contents of that div will be replaced every x seconds with the output of /uptime via some javascript.
The main library I use is JQuery; there is no other way to describe it, except that it rocks!
I also use HTML5 Boilerplate as a starting point for my sites, again it rocks!
On my game building site, Play My Code, I also use SoundManager2 and Ace (which is especially excellent). However the graphics stack is my own due to the added optimzations I needed to ensure were in there (for example it's one of the few that supports good tinted images, in real time, on a HTML5 canvas).
After that, everything is my code. On the server I use my own MVC framework, and in the client all my major projects (such as SkyBrush or my programming language) are built as stand alone applications.
Core sites code however is normally structured differently as giant JS objects split up essentially to build namespaces. For example on the Studio Fortress site there is the 'sf.magnets' object that contains functions for handling all the magnets on the front page, and 'sf.skybrush' for setting up and integrating SkyBrush onto that page.
The idea is that the libraries are allowed to be complicated and over-engineered, but the sites must be dumb glue code.
One of the things that puts me off using frameworks is that I either feel I could build better in less time (which is true if I only need a small section), or it's too specific and I want something more special. For example I built my own colour picker for SkyBrush, rather then use those online, as it looks more unique (and takes up less space).
The biggest tip I can give is to think heavily about what it is you are building. Plenty of sites powered by JS are nothing like SkyBrush, and need entirely different libraries for solving different issues.
I'd also try and embrace JS's prototype model as much possible, and it's heavy use of closures, as they have helped me dig my way out of plenty of architectural issues.
I hope that helps!
If you only know basic HTML and CSS then you should start learning JavaScript. Then you can use JavaScript frameworks like JQuery which makes dealing with cross browser compatibility much easier.
example with JQuery (the audio element's id is "audio_element"): $('#audio_element').attr('src','http://www.example.com/song2.mp3');
This would change the audio element's source to song2.mp3
Using jQuery 1.6.4 in combonation with Modernizr 2.0.6 I came up with this
jQuery: // reformat SP tagging links $('img[src*="TagILikeIt"]').each(function () { var link = $(this).parents("a").eq(0); link.addClass("ir").addClass("tagILikeIt"); }); $('img[src*="TagsAndNotes"]').each(function () { var link = $(this).parents("a").eq(0); link.addClass("ir").addClass("tagMyTags"); }); CSS: /* tagging link replacements */ #taggingLinks { margin: 8px 0 0; } #taggingLinks .ir { display: inline; display: inline-block; } .ie7 #taggingLinks { width: 225px; height: 25px; } .ie7 #taggingLinks .ir { display: block; float: left; } .tagILikeIt { width: 121px; height: 25px; background: url(img/tagILikeIt.png) no-repeat; } .tagMyTags { width: 102px; height: 25px; background: url(img/tagMyTags.png) no-repeat; margin: 0 0 0 2px; } .tagILikeIt:hover, .tagMyTags:hover { background-position: 0 100%; }
edit: edited to properly display CSS as code block
Use a javascript function to keep track of time. Every so often (Say, ten minutes), use something like jquery to call a server side page (which may have been updated) and load a fragment of that page into the page currently in the browser.
setKarma($(this)) is basically calling a function called setKarma and giving it a parameter, something it needs to run it's logic. If you look for the setKarma function definition (it might be in a separate .js file included in the html header) you should see what's actually going on.
The parameter $(this), though, is actually the result of another function call. The $ is actually a function, similar to setKarma, and it is given 'this' as a parameter. Most likely the site uses jQuery. See this for an example. Note that this function runs first!
My guess is the setKarma function will have a test to figure out whether it was called through the + link or the - link. If it was the + link, it'll increment some variable and write it on the page. If it was the -, it'll decrement the same variable and write it on the page. The key is the function knowing which was clicked, + or -.
Definitely learn HTML + CSS first. It is important to 'know' html, but all that comes down to is knowing what elements exist that you need to use. CSS is the other 90% of getting a site to look how you want it.
You don't need much Javascript. Javascript is only used to do flashy looking things on the user's side of the page. It only runs after the html has loaded, so it's mostly used for adding 'icing' to the cake. If you want to do flashy Javascript things, for heaven's sake, don't write them using standard Javascript!!
jQuery is all the javascript you'll ever need. Check out jQuery Cycle and jQuery Corner to see what I mean. These are out of the box solutions where you literally put in one script tag and then 1 line of javascript, and now you have a fancy slideshow or other cool things.
If I were you I'd either:
Preload the select state for all of the navigation buttons upon first page load so they can get cached. Right now when you click a tab on an empty cache the page reloads, the images themselves load, but your menu bar is resized because the button image takes a while to download.
Since you've coded it in PHP, create one front end page and make AJAX calls to your PHP code that returns the HTML to put in the <div id="gallery">, if you haven't done this before you'll be surprised how easy it is to do with something like jQuery which even works on IE6.
Edit: Is your PHP script just going through a template? Seeing your HTML I'm going to assume so, you could look into using Smarty to make this look a little prettier by using a template which would probably also lead to nicer looking PHP code!
Edit 2: I saw else where you saying that you didn't want to use jQuery, I've made that same move before and ended up regretting it (Javascript is so much nicer with jQuery), but you can also do AJAX calls and make sure they work in IE6 like this:
var xmlhttp; if(typeof XMLHttpRequest == "undefined") { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } else xmlhttp=new XMLHttpRequest();
jQuery is probably your best bet. It makes ajax calls a lot simpler and cross browser compatible. There's a bit of a learning curve, but after you learn the basics, it makes life a lot easier. An ajax request looks like this - $.get("test.php", function(data){ alert("Data Loaded: " + data); });
where test.php is the script you want the server to run, and data is the response object. The response object can be xml, JSON or plain text. Hope this helps!
You need javascript for that, google «javascript calculator tutorial» and then adapt it to your needs. I found this one, it might help you but I'm not sure how good it is.
If you don't mind taking a bit more of time to learn a new skill, learn some JQuery basics instead (it's easy and it's built on top on javascript, so you'll learn that too) and by then you'll now how to make it very easily.
Yes, that's definately doable. For instance most (all?) of Google web products are based on HTML+JavaScript combo, including YouTube (now with HTML5 video support), Google Docs and Google Mail. Just check the demos for jQuery and cappuccino.
JavaScript and ActionScript are both flavours of EMCAScript. They share with Java (and C#) C-like syntax. Of course, there are nuances, different memory management techniques and, most importantly, different standard libraries, so transition between those are simple but not painless. Java is very widely used these days so it's a good language to start because of amount of avaliable tutorials, docs and large community as well as avaliability of free development tools.
Your code worked fine for me. I just copied it all into an HTML file and ran it in Chrome and Firefox.
Be sure to include the JS code in your HTML file (as you have it written), or put it in a .js file and reference it like this:
<script type="text/javascript" src="script.js"></script>
Also, I noticed that reset() is an existing Javascript function -- consider renaming your function.
Finally, are you familiar with jquery? It makes writing JavaScript fun and simple. I rewrote (most) of your code using jquery:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script> <script type="text/javascript"> $(ready); function ready(){ $("#image6").click(imagePopup); $('#hiddenContainer').click(resetPopup); } function imagePopup(){ var src = $(this).attr('src'); $("#popUp img").attr('src', src); $("#hiddenContainer").fadeIn(1000); } function resetPopup(){ $("#hiddenContainer").hide(); } </script>
<div id="hiddenContainer" style="display:none"> <div id="popUp"> <img src=""> </div> </div> <img id="image6" src="http://static.reddit.com/reddit.com.header.png" />
Javascript has its uses, but you can also gain a lot of power by extending the language. Two examples that come to mind are jQuery and Parenscript, the latter being very similar in concept to GWT. If you just don't like java, I understand that. I personally dislike java.
If you have the navigation code on each page, just put an extra class into the corresponding navigation element of each page, and style through your css file
example:
markup
<span class='page1'><span class='page2 active'> css
.active { background: #0f0 }
If you are using a single file for the navigation and including it on each page, then you will need to use javascript to add a class to the opened navigation element, then style that class in your css
example:
markup
<span class='page1'><span class='page2'> script
$('.page1').click(function(){$(this).addClass('active')}); css
.active{ background: #0f0 }
The JS is using jQuery
I just picked up JS on the job, but when you know another C-like language the syntax is pretty easy and familiar. The language definitely has a lot of quirks though, since it wasn't really designed so much as organically shat out by four or five different browser vendors.
I find the Mozilla Developer's Network to be the best site for reference information. It's also got a pretty extensive library of CSS and HTML if you're doing web stuff. If you're doing web stuff, find out if you're using JQuery, and if so look into that as well. There are other JS packages (approximately four trillion of them) out there that try to sand off some of the harsh edges, but JQuery is the most popular.
If you're using Javascript and not doing web stuff... then good luck.
>I think the problem with the first part is that I dont have jquery. Do you need to download it? I thought it was already on computers just like html, css, javascript etc.
Aha, yes, that will be the problem.
jQuery is a JavaScript program, just like div.js
. It a library that provides a bunch of functions that can help make writing other programs easier, and smooths over some differences between different browsers.
You can download jQuery from its website - the second one is probably what you want ("uncompressed, production"). Save the file to the same directory as the other files and point the script src
to it in your html file.
Once jQuery is loaded, the error in div.js
should disappear - the error is that it's trying to execute the $
function, which is something jQuery provides.
> When a link is selected the appropriate information must be displayed (the page itself is not redirected, the content changes based on the link selected).
This will likely require some JavaScript, or a library like jQuery or mooTools. PHP itself cannot make content appear based on actions/clicks performed on the DOM, this is where JavaScript comes in.
Once you have your JavaScript methods in place, you simply add their usage to the PHP script's output, which is likely going to be HTML by the sounds of it, and off you go. You will likely end up using DOM-ID's or a DOM-Class to determine which item is to be clicked and what respective data will be loaded.
I hope that helps steer you in the right direction. Good Luck!
The script requires jQuery for the $() selectors, and resulting jQuery object methods, to work. In the sample page, you can see:
<script type="text/javascript" src="jquery.js"></script>
Your page will need to also reference either your own copy of jQuery, or reference a CDN copy.
Check out the How jQuery Works page and the Download jQuery page for more help.
You're describing the base jQuery library. There's also jQuery UI and a whole ecosystem of jQuery plugins.
jQuery is just a set of libraries that doesn't mandate or promote any particular programming style. You can tinker with the DOM node by node if you wanted to, or you can just do an innerHTML
replacement with content generated from string concatenation, server-side templates or client-side templates in one shot.
I believe it does need a small explanation. Personally I didn't know what it was and had to dig around a bit.
Look at the jQuery page. If this was a post about jQuery reaching a new version and I didn't know what jQuery was I would've found out immediately.
We speak of the initial page load time until something useful appears. Every millisecond counts. Compare:
jQuery 2.1.3 ~ 84.3 kB (minified) vs. radio.js 0.2.0 ~ 0.9 kB (minified) + reqwest 1.1.5 ~ 9.5 kB (minified) ---> 84.3 kB - 10.4 kB = 73.9 kB overhead
http://www.easycsgobets.com/wp-includes/js/jquery/jquery.js?ver=1.11.1 script Suspicious http://www.easycsgobets.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1 script Suspicious
You are suspicious to jQuery (http://jquery.com/), kiddin' right?
Yeah, it uses knockout.js for data-binding and jQuery for animations. All the source is in the html file if you want to use it, but its probably not useful if your app is written in C#.
JavaScript is a language, I probably phrased it poorly. What you need is JQuery and SPServices to go along with your JavaScript. I'll set you up.
They're free!
Not OP but that jquery.min file is a javascript library known as jQuery. It's not code specifically for his website but rather code that helps make his life easier when working with javascript. Here's a link to the jQuery site where you can read more: http://jquery.com/
I'm having a hard time understanding what you're trying to do. Are your color products just a solid box of color, or are they shapes, or letters, or something of the sort? If you have an example image I think that'd help :)
As far as the material goes is this expected to be "Your Name" in said material or are you again just overlaying a square pattern onto a square of solid color.
If you could clear some of those things up I think it'd help us help you.
As far as certain technologies you'd need, you'd obviously need your general stack including html, css, and javascript. As far as I can tell this would be a simple click based web app. Perfect for learning javascript/jQuery
For web developers, a jQuery plugin called Timeago makes this easier for your visitors.
It changes all properly formatted abbr/time tags to read friendly phrases like "4 minutes ago" or "5 months ago." You just populate the tag with an ISO 8601 time format (with time zone), and it applies the changes and updates regularly. (i.e. the "4 minutes ago" will change to "5 minutes ago" after the browser window's been left open for a minute.)
<abbr class="timeago" title="2014-09-21T01:24:17Z">September 21, 2014</abbr>
I think that php and html documentation are easy to find and speak for themselves in terms of clarity. What I will give you is something you won't find in manuals and syntax, design standards.
As a starter, not saying that this is the be all end all, you will want to check out the following:
Normalize: http://necolas.github.io/normalize.css/
jQuery: http://jquery.com/
Clearfix: http://nicolasgallagher.com/micro-clearfix-hack/
I'm not going to tell you what any of these are. Do some research. For design inspiration you can always use Google since there are a ton of sites that document good design cases. designmeltdown used to be my favorite but its a trash heap now so do a little digging.
Don't use Flash. It's a dying technology. You can do all that with a combination of HTML, CSS and a bit of JavaScript. Some links you should check out:
If you stay with web development have a look on javascript and recent libraries like jQuery or Angular.js.
Web development isn't about just knowing html+css anymore. With Javascript you can manipulate you webpage on the fly and javascript libraries give you a toolbox to do it efficently.
If you knwo javascript you can also have a look at Node.js. Its a javascript derivate to write simple server code.
Simple. (view jsfiddle)
<div id="heading" onclick="document.getElementById('content').style.display = document.getElementById('content').style.display == 'none' ? 'block' : 'none'" >Header here</div> <div id="content">Content here</div>
If you're new to javascript and web development in general, I'd recommend learning and using jquery. Jquery is a javascript library that automates some tedious things in Javascript and makes the web developer's life a lot easier overall.
Equivalent code using jquery is here (much simpler):
<div id="heading" onclick="$('#content').toggle()">Header here</div> <div id="content">Content here</div>
If you want to try using pieces of code people made or test your own you should look at http://codepen.io
I find nice features and animations bin CSS there. And maybe look into jquery. Uses JavaScript but its relatively simple. http://jquery.com
Hrm haven't seen this one myself but have only tested this out personally on Firefox and Chrome (both on Linux and on Windows). Also another contributor (Nico) got it up w/out much hassle via Konqueror on KDE.
Are you running IE by any chance? jquery 2.x (which the web frontend uses) doesn't support IE,
Lets say my fond memories of all the time (years!) spend debugging IE issues is why I decided not to test / support this on IE. ;-)
I suppose if there is a demand for it, it can be included / supported, but would be looking for someone to help out w/ that as I'm not terribly interested in debugging those issues myself (plenty of other stuff on the roadmap! https://github.com/movitto/omega/wiki/TODO ).
In any case, thanks for the interest, hope we can resolve the root cause of your issue.
It's all JavaScript. Don't get fooled by the name; it's nothing like Java. Haha.
EDIT: Actually, it's JavaScript with jQuery, which is an important distinction. Still, almost everyone uses jQuery nowadays, so it's basically part of the language at this point.
There are plenty of free plugins and tutorials on how to create javascript effects. The best javascript library is jQuery and not too difficult to learn the basics. Check out http://jquery.com/ to learn more and for tutorials. Also a great place for tutorials is codrops: http://tympanus.net/codrops/.
If you have any questions, message us and we will be happy to help any way that we can.
This is a really stupid question but how do I download the jQuery plugin?
I went to the site http://jquery.com/download/ but when I clicked "download" nothing happens it just directs me to a page with a bunch of coding text.
Lots of sites use jquery, the all-in-one library for javascript.
There are a bunch of "site builder" type programs that will give you good jquery code to use.
To see a list, just google: jquery site builder
Good luck with whatever you decide to use!
iframes are generally considered bad practice. I would use AJAX fetching, with a library like JQuery to do something like that. best part is you dont reload the page, and you could even put animations between the ~~page~~ article loads
It depends on how you want to go about it, there are a lot of ways to skin this cat depending on the behavior you want. The problem here is that you're trying to assign a button ID to a php variable, when really the button should be just a trigger for the form. Button names should really only be used for display, not as data your script should act on.
The simplest way (but also the most html) is render the table row by row, render each button as you're rendering each row. Each button should be its own form, and contain a hidden form field for the row ID.
If you want to do it via AJAX post, then you'd do this:
This is very easy to achieve with jQuery and a little reading. The main benefit here is you're not duplicating a whole lot of code. You're essentially writing one function that can take input from any button.
Alternatively, you can mix the two. Create a single form with a hidden ID element, and have the button press on a given row alter a hidden id field in the form and submit it. Also very easy to achieve with jQuery.
What exactly do you mean, "learn AJAX"? AJAX isn't a language, it's a method of dealing with data in a web context. It stands for "Asynchronous Javascript and XML." Learning to use it properly requires understanding basic Javascript. Do you want to learn how it actually works behind the scenes? It involves using Javascript objects (mostly XMLHttpRequest but there are a few times other objects might be used for specific tasks) to format and pass data via request and response, and dynamic DOM manipulation is also usually grouped under the name "AJAX," although it's not strictly AJAX.
In addition to Javascript, it would be very helpful to become familiar with JSON and XML.
One of the most widely used Javascript frameworks for AJAX and DOM manipulation is jQuery. After you become familiar with the basics of AJAX, I would definitely look into that.
As ROFLrobert mentions Notepad++ is a great editor.
You should also consider using FireBug, it's an excellent tool to help you debug your web pages and make changes and view them on the fly.
For coding take a look at JQuery, it's a Javascript library that simplifies a lot of stuff, and provides a bunch of free, cool AJAX-ified web controls (e.g. stuff like Google's search box that can start trying to match your input while you type with search terms without having to mash a button).
Learn JavaScript, if you want to stay in front-end development. The easiest way to learn JavaScript is to use a toolkit like jQuery. With your CSS knowledge, you'll get a lot out of it.
On the backend, you might learn PHP. It's a pretty straightforward language.
Yeah sure, jQuery is actually a javascript library - www.jquery.com
I actually wrote the code off the top of my head so I assume it is correct - no testing.
jQuery allows you to use selected to select different elements in your page - this is pretty much identical to the way you select elements in CSS.
E.g. $('.word') selects all elements with a class of "word" $('#word_1') selects an element with an ID of "word_1" $('p.word') selects all paragraph tags with a class of word.
.hover is a jQuery function that receives two a inputs, what to do when you hover over an element, and what to do when you move off (blur) from an element.
The first function finds all items with a class of "word" and sets the CSS color to blue.
The second functions sets the CSS color to black (resetting the color if you started with black).
The extra line of code I wrote does exactly the same apart from it limits the words that are changed within one paragraph.
A) w3schools is pretty good for basic stuff, and it really doesn't do much more than that, so I'd ignore the haters.
B) It's mostly relevant to the opinions of people you'll get from sites like here :)
C) Until you find some application where XHTML will really be useful, forget about it, and xmlns, and all that stuff. Try on HTML5's doctype for size: <!DOCTYPE html>
. Neat, huh? See here for all the others.
D) Well, first you want to make sure you have the basics of Javascript down. Just go to http://jquery.com/ and look around. Explore, there's tonnes of stuff there to show you what it's about and how it works.
E) Just... starting off developers with security in the back of their mind, even if it's hardly worth touching the subject with them yet, is far better (imho) than not.
G) Nearlyfreespeach is probably good. Don't worry about CGI, it's just an underlying interface to get interpreters to talk to web servers. It's getting used less and less, since it's slow. A good exercise would be to install Apache, MySQL and PHP on your own computer manually. It will take a whole lot of googling, but you'd learn a lot about how a web stack works. If you like ruby, you can find out how to add that on after as well.
If you want to try the image upload one... don't even worry about users yet. Trust me. You can create whole projects on their own just about user management. For a "simple project" purpose, just get an anonymous, everyone-can-do-anything image gallery going. It's always possible to add a user management system on afterwards.
Isn't that just jQuery being cached? Instead of linking to Google's hosted version, some sites have a copy on their own servers. Doesn't look like a virus, just a widely-used JavaScript library that is redundantly cached.
Edit: Wait, those look like your files. Was this supposed to be a joke?
That's a fine site to start.
JavaScript is not related to HTML so yes, you will be starting from scratch and the syntax will be very different. The way that basic languages fit into a webpage is:
HTML is used to put data on the page. Like a paragraph or a heading or an image.
CSS is used to change the way HTML looks. Like change the color of the paragraph or the size of the image.
JavaScript is used to change the HTML and/or CSS of a page after it has loaded. It makes pages interactive without refreshing them. It can also be used to send and receive information from the server without refreshing (that technique is called Ajax). When you cast an upvote, that's JavaScript working.
The big technical difference is that HTML and CSS are just makeup languages. They can be used to put information on a page but they can't perform a calculation. JavaScript is a scripting language, which is closer to a programming language, and it can actually do logic. For example, you can use it to make a calculator.
jQuery is a very popular JavaScript library that gives you easier access to certain common JavaScript functions. Animating elements on a page, that Ajax technique I mentioned and more. It's syntax is simpler than raw JavaScript and less tedious. I recommend you have a look at it just for an idea of what JavaScript does, if nothing else.
Ok here are some basic instructions for the client-side route, let me know if i need to elaborate further on anything:
note: If the feed is not on your domain you will have to do this server-side or sign up for a Google feed API key
Edit: When developing javascript the firebug plugin for firefox or the chrome developer's console will help immensely.
Also jQuery has awesome documentation on their site if you need help with syntax or examples for the methods i mentioned.
Have you ever used jQuery? You can fade in/out any element on the page with one line of code, like this.
As for getting the images to to be place to the right of the previous image, you can use the float css style. Give every image a class like so. <img src='...' class='faded'/> Then create a css style for the class .faded { float: left; } That will stop the next image from getting placed below the previous. Then, using jQuery you can use that class to select the images you want to fade in. $('.faded').fadeIn();
Dreamweaver has good code hinting and code coloring, and it flags errors as you type.
The greatest boon to JS debugging for me has been the console in the Firefox 'Firebug' extension.
I just checked: Coda as good code hinting. Espresso, despite being a very highly recommended editor, didn't seem to have code hinting. TextWrangler is a good text editor (and it's free), but it also doesn't seem to have code hinting.
Also, just a quick tip: if you're not already using jQuery, you should be. It makes writing JS almost euphoric. Then of course, as you program reference the api at api.jquery.com.
Check out jQuery to simplify your life with some cool web controls.
Don't do annoying stuff like have it play audio once the visitor arrives or load a huge Flash animation.