I have a slideshow on a website i am creating and I would like to know using how could i click on a separate image and add that to the slideshow dynamically using only simple javascript
Something like this
$(".separateImage").click(function(){
$("#slider").append("<img src='1.jpg'/>");
});
Using a JavaScript framework such as jQuery (which you really should, even for small features as it makes sure that your code is cross-browser compliant):
$("img.addtoslide").click(function() {
$(this).clone().appendTo("#slideshow");
});
The above code (which is based on jQuery syntax) would then work for all images you add to the document without having to write new code for each one.
I really recommend that you use some kind of framework for manipulating the HTML DOM. It's such messy business to try and create cross-browser safety yourself.
There are a bunch of tiny JS frameworks out there that use a syntax similar to jQuery if you're worried about the size.
Related
I have heard that HTML5 uses some sort of javascript within... Does CSS3 also does that, I don't think the transitions can work otherwise..
Reason of asking, I don't want any javascript in my CSS part.. I am trying to build a pure css library like pureio and bootstrap, they both contain javascript also although..
HTML5 doesn't have any javascript within as such.
Some new elements when implemented by the browser may however have some of the HTML5 features rendered using JS or at least provide a JS API as per specification.
Like any other HTML version prior that, otherwise we wouldn't be able to bind events or control HTML elements via Javascript.
And for CSS no, of course not there is no JS dependencies. How would CSS work when JS is disabled?
And remember browsers have access to the all computer power. It wouldn't make a lot of sense to ignore that and do everything in Javascript.
We have Tabs-Menu controls which rely on jQuery library and the dev-manager insist that i should get the functions that controls are using into a separate java-script file so we don't have to reference/rely on the whole jQuery, so it made me wonder.. is it a bad idea to edit the jQuery files ?
Yes it is a very bad idea. It would be a nightmare to maintain with all the bug fixes and feature changes the jQuery team would make.
You should write plugins to modify the behavior as you want.
The gzipped production version of jQuery is 31K. Not only is this an unmaintainable idea, but this is a pre-optimization. Any images beyond tiny PNGs or GIFs will likely be as large or larger than the entire jQuery library.
Additionally, this is time that could be spent addressing actual problems. I don't know what sort of userbase you're targeting, but unless every one of your users is on dialup, 31K will take no time at all to download.
is it a bad idea to edit the jQuery files ?
Yes. If you edit the core jQuery library, you make it much more difficult to use future versions of jQuery, which may include important new features, bug fixes, etc. If you make your changes in plugins, as you should, you can just drop in the new versions of jQuery when they're released.
Well I'd say it's a pretty bad idea. You really want the responsibility of maintaining the mess you have left after chopping it out? Are you an expert on the jQuery library? Do you understand all of the side effects? You would be better off rewriting portions of your Tabs-Menu controls without jQuery than trying to chop out bits of jQuery. I presume that the issue is that you don't want the "overhead" of including a relatively large script for a small set of features. This is unfortunately the way of jQuery. Either
Accept that you have to use jQuery, and make the most of having it referenced
Rewrite your Tabs-Menu controls without jQuery
any other option is going to be painful. Insist that your dev-manager reads the answers to the question.
Here's my problem: I've got this nice Office Minibar implementation which I want to use on my project. However, I need to apply the Jquery code to dynamically created textarea elements, hence requiring the use of
$("#textarea_id").minibar(); //minibar() applies the minibar to the selected textarea element
However, i'm at a complete loss on how to do it. Any help would be great appreciated. The Minibar coding is fairly simple:
http://www.jankoatwarpspeed.com/post/2010/05/23/microsoft-office-minibar-jQuery-CSS3.aspx
Start out reading the jQuery plugin authoring guide. It does a really good job of walking you through things. If you want to cut to the chase, read the summary and best practices section.
Basically, it'll look like this:
(function($){
$.fn.minibar = function () {
// minibar initialization code here
};
})(jQuery);
jQuery's plugin authoring is a great starting point.
I also agree that the Plugin Authoring tool is a good start.
Also there is a Jquery Plugin Skeleton that provides a commonly used plugin pattern.
I noticed that in your code you have static ids and markup. It may be better to create these elements dynamically so people that use your plugin don't have to add them and there are no id or class name conflicts.
Do I need somehow "prepare" my HTML before moving on to making my page more sexy with jQuery?
What I mean is there some rule that says that HTML modification with jQuery is easier when HTML has "this" and "that" and "that too"? Some "HTML design patterns" like we have in C++ for example?
My HTML is generated by PHP application from templates and data retrieved from mySql database, and it is styled with CSS so I have ids and classes and almost all "components" on pages are inside divs (with id or class or both) so I presume that it is "jQuery ready" but maybe I should add something more to HTML or think about something?
I mostly have a complete vision what I want to accomplish with jQuery and how page should look like and behave when I finish so it is "only" matter of implementing it but I don't want to get too deep and suddenly discover that if I done something at the beginning my work would be easier and faster.
One advice: generate valid HTML according to whatever DOCTYPE you are using and have fun with jquery. Also avoid mixing markup and javascript: keep them separate and progressively enhance your markup with javascript features.
What you need to do is create a bare HTML page that is usable as-is, meaning, no Javascript required to operate it – that's the ideal anyway, building a web app usually means there's a dependency on Javascript, but you should only use JS when necessary.
Adding Javascript should only enhance your UI while CSS should add the presentation on top of the existing HTML structure. In other words, an HTML page without CSS and Javascript should look and read well.
Is there a way to create your own HTML element? I want to make a specially designed check box.
I imagine such a thing would be done in JavaScript. Something akin to document.createHTMLElement but the ability to design your own element (and tag).
No, there isn't.
The HTML elements are limited to what the browser will handle. That is to say, if you created a custom firefox plugin, and then had it handle your special tag, then you "could" do it, for varying interpretations of "doing it". A list of all elements for a particular version of HTML may be found here: http://www.w3.org/TR/html4/index/elements.html
Probably, however, you don't actually want to. If you want to "combine" several existing elements in such a way as they operate together, then you can do that very JavaScript. For example, if you'd like a checkbox to, when clicked, show a dropdown list somewhere, populated with various things, you may do that.
Perhaps you may like to elaborate on what you actually want to achieve, and we can help further.
Yes, you can create your own tags. You have to create a Schema and import it on your page, and write a JavaScript layer to convert your new tags into existing HTML tags.
An example is fbml (Facebook Markup Language), which includes a schema and a JavaScript layer that Facebook wrote. See this: Open Graph protocol.
Using it you can make a like button really easily:
<fb:like href="http://developers.facebook.com/" width="450" height="80"/>
The easiest way would be probably to write a plugin say in Jquery (or Dojo, MooTools, pick one).
In case of jQuery you can find some plugins here http://plugins.jquery.com/ and use them as a sample.
You need to write own doctype or/and use own namespace to do this.
http://msdn.microsoft.com/en-us/magazine/cc301515.aspx
No, there is not. Moreover it is not allowed in HTML5.
Take a look at Ample SDK JavaScript GUI library that enables any custom elements or event namespaces client-side (this way XUL for example was implemented there) without interferring with the rules of HTML5.
Take a look into for example how XUL scale element implemented: http://github.com/clientside/amplesdk/blob/master/ample/languages/xul/elements/scale.js and its default stylesheet: http://github.com/clientside/amplesdk/blob/master/ample/languages/xul/themes/default/input.css
It's a valid question, but I think the name of the game from the UI side is progressive markup. Build out valid w3 compliant tags and then style them appropriately with javascript (in my case Jquery or Dojo) and CSS. A well-written block of CSS can be reused over and over (my favorite case is Jquery UI with themeroller) and style nearly any element on the page with just a one or two-word addition to the class declaration.
Here's some good Jquery/Javascript/CSS solutions that are relatively simple:
http://www.filamentgroup.com/examples/customInput/
http://aaronweyenberg.com/90/pretty-checkboxes-with-jquery
http://www.protofunc.com/scripts/jquery/checkbox-radiobutton/
Here's the spec for the upcoming (and promising) JqueryUI update for form elements:http://wiki.jqueryui.com/Checkbox
If you needed to validate input, this is an easy way to get inline validation with a single class or id tag: http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/
Ok, so my solution isn't a 10 character, one line solution. However, Jquery Code aside, each individual tag wouldn't be much more than:
<input type="checkbox" id="theid">
So, while there would be a medium chunk of Jquery code, the individual elements would be very small, which is important if you're repeating it 250 times (programmatically) as my last project required. It's easy to code, degrades well, validates well, and because progressive markup would be on the user's end, have virtually no cost on the server end.
My current project is in Symfony--not my choice--which uses complex, bulky server-side tags to render form elements, validate, do javascript onclick, style, etc. This seems like what you were asking for at first....and let me tell you, it's CLUNKY. One tag to call a link can be 10 lines of code long! After being forced to do it, I'm not a fan.
Hm. The first thought is that you could create your own element and do a transformation with XSLT to the valid HTML then.
With the emergence of the emerging W3 Web Components standard, specifically the Custom Elements spec, you can now create your own custom HTML elements and register them with the parser with the document.register() DOM method.
X-Tag is a helpful sugar library, developed by Mozilla, that makes it even easier to work with Web Components, have a look: X-Tags.org