We Keep Coding

hiding elements with javascript vs jquery

I was wondering about hiding elements with DOM, the person in the course is doing this by setting the display to none
document.getElementById("id-name-1").style.display = "none";
document.getElementById("id-name-2").style.display="none";
We are hiding two elements here, now both elements have the same class. I have been converting what the course is showing me into jQuery as well for added challenge. The jQuery code that I used is as follows, the name of the class they both has is say dice.
$(".dice").hide();
This hides both elements at the same time, which way would be better? I know that if I had other elements with class dice it would also hide them. So maybe that is why the other way is better? Thank you for your thoughts -- I am new to this.
Stephen

If you use vanilla javascript, can do something like
document.getElementsByClassName('className').forEach(el => el.style.display = "none")
I recommend you use vanilla javascript instead of JQuery because is most probably that you will use javascript than jquery in a new project. and on the other hand, will be more easy for you use libraries like react if you have a good vanilla javascript foundation.

Your question is open ended. No right or wrong answer.
$(".dice").hide();
As mentioned, this will hide all elements with Class "dice". If you want to be more specific, you can be:
$("#id-name-1", "#id-name-2").hide();
This selector uses IDs and selects both elements.
Your selector can be more vague or more precise as needed.
See More: https://api.jquery.com/category/selectors/basic-css-selectors/

Document.querySelectorAll(".dice") would also be able to the above based on the style using purely javascript. So it all comes down to preference since it works the same way with display:none;.
Also,.hide() takes in optional arguments/callback functions which can help with hiding the element(s).

How can I create a pop up like the one Google Calendar uses ?

when you click on an empty space in Google Calender in order to add an event or when you click in an already placed event you will get a very nice popup having info about the event (please see attached image).
How can I create a similar pop up windows using CSS and Javascript (I prefer jQuery). I am also using Bootstrap if that helps.
Please notice that the popup position depends on where I will click so let's say that I have an html table and depending on which I will click the popup will be generated near to this position and will point to that specific .
Also notice the close behaviour (close button and if I click out of the popup it will close).
If there are more than one good answers I will accept the simplest one that works with jQuery (and jQuery UI) and Bootstrap - I'd grateful if not other frameworks were used.
Thanks !

There is a plugin called jquery tip-tip which might do what you are after. You essentially want to display some HTML above the area you have clicked. Tip-tip can display html as a 'bubble' above the point you have clicked. It's also easy to style. It is mainly used for tooltips but I see no reason why it can't be adapted to do this.
http://code.drewwilson.com/entry/tiptip-jquery-plugin
(p.s. you would need to use the 'content' property to set the content)
"content: string (false by default) - HTML or String to use as the content for TipTip.
Will overwrite content from any HTML attribute."

I assume that you are talking regarding the tooltips here is link which will help you
http://jquerytools.org/demos/tooltip/index.html
http://coding.smashingmagazine.com/2007/06/12/tooltips-scripts-ajax-javascript-css-dhtml/
http://craigsworks.com/projects/qtip/
http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/

The other answers contained links about tooltips. However, I believe that a dialog component like the jQuery UI dialog would match your requirements better.

Perhaps this did not exist back in March when this question was asked, but current version of Bootstrap has popovers like the one in the question. See:
http://twitter.github.com/bootstrap/javascript.html#popovers

You can use FireBug to analyse the page and check the actual values for CSS properties (ie. what colour is the border, or how much padding is there).

css3 animation on click

The following zip contains the website html and required files: http://dl.getdropbox.com/u/4281191/login.zip
When you hover the html (html:hover) you see a animation that transforms the container into a loginbox, I want that to happen when I click on "Login" at the "Hello, Guest" menu instead.
Anyway to get this done? I'm new to js...
Additional info:
the css is inside the html,
and the css3 animation gets triggered by:
html:hover id/class {
property: value;
}
Thanks for any help!
And I can't vote at comments since I don't have enough reputation...but I could do some free design work for the person who helps me ^^

I still don't know much about animations, but for what matters here, you could use something like the .classname:active or .classname:focus selectors. But as soon as you click something inside it (e.g. a text box), the style will disappear.
So, for this, it really depends. Do you just want a menu that has links that take the user to another page (for this case, you'll be fine) or do you want a login form (for this case, forget it, use jquery)?
For today and future reference, save this link because it'll be your best friend:
http://www.w3.org/TR/selectors/#selectors
Update
Yes, I hovered but I didn't look at the code. I looked now and, unfortunately, the answer is no. You can't affect some upper level object like that using CSS.
For that use jQuery. The simpler way would be use jQuery to add a class to the element you want to change (like $("#the-object-id").addClass('class-name')). To keep the effect add the duration argument. Read this page about Adding a class using jQuery.

Use hover or onmouseover/onmouseout?

I am building custom buttons(sliding doors) for a new website. The buttons will not trigger a link but a javascript that then submits the form.
My solution is to use div (instead of link) with span within.
The question is if I should use onmouseover/onmouseout or is hover a preferred?
Pleas note : My website demands javascript else it wont work at all, so there is no problem to use javascript for the button, the question is which way that is the most correct?

I would do it with CSS because it would require less code and it would work with Javascript disabled

If you are talking about jQuery events, it doesn't matter, it's the same.
If you're talking about HTML onmouseover/onmouseout vs. CSS:hover, go for CSS:hover.
It's far easier to maintain, looks cleaner and decreases the size of your HTML which is a mess most times, anyways.

The solution for this is to simple use onmouseover/onmouseout on the div element. It will generate some code but it will be safe to use even in IE6.
This will ofcource demand javascript but that will have to do.

style a form (select) using javascript, no framework?

anyone know how i can style a form element with javascript, but without a framework?
Found a nice plugin for jquery but I don't use jquery at all on my website so I want to avoid it if possible..
I want to create a select box that looks like this:
http://iforce.co.nz/i/qebncmoz.png
to clarify, i want to set an image/background on the select box so that I can have a custom dropdown arrow

You can style elements through the style attribute (replacing '-' with camel case) like this:
document.getElementById('elem').style.backgroundColor = 'red';
But it's better to put the styles in CSS and just change classes in JavaScript instead:
document.getElementById('elem').className = 'roundedCornerButton';

You have to use a different element. <select> can't be used because you can't style it very well using CSS, save for the background colour and font.
The best direction I can point you in is http://v2.easy-designs.net/articles/replaceSelect/ - it seems to explain how to do what you want to do pretty well.

You won't need Javascript for that, pure CSS will do.
Check this article for example:
Style Web Forms Using CSS

The styling is done through CSS, not JS. JQuery is used for shortcuts in Javascript.
There is no "replacement" happening - the tag is still there under the scene but good use of CSS is what makes it look like that image.

There is a number of drop down menu replacements out there that don't require a framework. Try Googling javascript drop down. See a fancy example here.
But consider using a framework. 20-50kb are not that much anymore in these times, it's not that much even for a dialup line. Frameworks provide a lot of little helpers for all sorts of tasks and you can link even to Google hosted versions, with the great likelihood that the user already has them cached.

If the form element has an ID associated, then you can use code similar to the following:
elem = document.getElementById(elemId);
elem.style.background = 'white';
I assume you want to dynamically change the element style; differently, you don't need JavaScript to obtain what you want.

It's not possible without javascript see here my question How to style a <select> dropdown with CSS only without JavaScript?
And if uyou don't want to use any framework then try this
http://v2.easy-designs.net/articles/replaceSelect/