Use hover or onmouseover/onmouseout? - javascript

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.

Related

Replace or even better remove inline styles with Javascript or jQuery?

Before I posted this question I searched Google (and Stackoverflow) and though there are quite some results for this, I simply don't understand most offered solutions.
Problem I am experiencing is that I use a script which fetches RSS feeds from our main website. This works perfectly, however it also displays the used inline styles, which are being used sometimes. Ofcourse this messes up the way things looks and looks rather, lets say, unprofessional.
I checked the source of what's being loaded and as far as I can tell, the main culprit is an inline style called:
<span style="font-family: verdana,geneva;">text</span>
Less frequent are the following ones (but still rather see them go as well):
<em>text</em>
<strong>text</strong>
<em class="moz-txt-slash">text</em>
<span class="moz-txt-tag">text</span>
Can these all be removed with jQuery or Javascript? Apparently it's possible, but I don't know how. And should I put everything in a seperate div-container?
I can live with the unnecesarry 'p's and 'br's, but rather see the other ones removed.
Anyone out there who is willing to help me with this? My gratitude!
//edit
Thank you all for the quick responses... Highly appreciated.
I use a script called MagicParser to fetch those RSS feeds. I don't know much about coding like PHP, jQuery and Javascript, but I will try to use the solutions. I hope it will work. The first one didn't though :/
You can easily target all elements that have inline styles with $("[style]") and remove the styles with .removeAttr("style"):
$("[style]").removeAttr("style");
If you have a DOM node or jQuery collection and want to remove styles from its descendants, simply use .find("[style]").removeAttr("style") on it instead.
Classes are not the same as inline styles, but you can also remove those with .removeClass().
You can use jquery:
$("#myID").attr("style","[Nothing here, or eventually styles to override]");
More info there:
http://api.jquery.com/attr/

Questions about JavaScript and a vertical, multi-level navigation bar

Is it possible to make a vertical, multi-level navigation bar using only CSS and WITHOUT using JavaScript?
Like the one in here:
http://www.dhtmlgoodies.com/scripts/slidedown-menu2/slidedown-menu2.html#
I am trying to avoid using JavaScript because browsers today has an option that can disable JavaScript codes. I don't want my webpages to be broken because of that settings. Should I even be thinking about this? Or should I just use JavaScript anyway?
I was hoping on using only CSS for this, though I'm not sure if CSS is enough for this.
EDIT: By the way, is there a CSS selector when you click an <a> tag? Something like 'a:click'. I only know a:hover.
You won't be able to have any sort of animation like that example, unless you use CSS3 animations, in which case you will have LESS support than if you used JavaScript.
If it were me, I would just use JavaScript to do it. If the user has it turned off, they will still receive the menu, just not the animation (if you code it correctly).
There are some examples here of what you can do with CSS:
http://www.cssmenus.co.uk/dropdown.html
CSS is mainly for styling your webpages, while JavaScript is mainly for giving them different behaviors and interactivity.
That said, CSS3 is doing a lot to change that. But, if you want a web page with any kind of Cross- browser support currently, that's not really an option.
Like you have said, users have the option of disabling JavaScript, which is a good thing for security. This, however, means that you should always try to make any JavaScript supplementary to your page, so there is still some functionality even if JavaScript is disabled.
If you want any interesting effects in your menu, you will need some mix of CSS and JavaScript, and if you define and apply your styles within your CSS documents and not from within your JavaScript, you will still sustain some level of usability

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.

Proper way to render initially hidden HTML elements

I'm for years using something like this in my HTML for elements which should be hidden:
<div style="display: none"></div>
It's ok, but I can't stand in-line styles anymore.
Hiding elements programatically in JavaScript window.onload event is too late -- it will flash on the screen.
I can create CSS class 'hidden', but with browser's aggressive loading strategies (like in Opera) the block may appear for a second (before CSS is loaded).
Is there any better way?
As far as I know the class="hidden" method is the best and most commonly used. I suggest you use class="hidden".
"but with browser's aggressive loading strategies (like in Opera) the block may appear for a second (before CSS is loaded)."
I don't use Opera, but if any browser loaded the page before applying styles then a lot would look wrong, not just your hidden elements. I don't know of any browser doing this.
I have recently started using node objects, and I like this approach more and more. This way you don't have to use hidden HTML elements, you just place, for example, an anchor:
<a name="some-anchor" id="some-anchor-id" />
and then replace it with a created node. This way you won't have to worry about elements flickering on load, because there won't be any.
Depending on what the element is, it might be acceptable to generate and insert the element using javascript after the page has loaded (rather than hiding it after page load). Just a thought, although it wouldn't degrade gracefully for users without javascript enabled...
You could add to the hidden style a fixed position which would bring it out of a browsers window. This may be a solution to avoid having the div blink in Opera.
For example:
.super_hide{
position:fixed;
top:-1000px; /* you would need to know how height the content is or put something huge*/
}
Hoping this will help!
If you have a HTML only page those elements would be shown?
These elements are shown to screen readers by default, that's not very nice or accessible is it?
If you have HTML+CSS only page you can't unhide these elements, then there's no point in them apart from black hat SEO tricks.
If you have a HTML+CSS+JS page then there is value in have them.
There is only value in having them when you have JS enabled. This means they should _exist in the javascript
Use javascript to create these elements and inject them in the DOM.
if your build your website from the ground up using HTML, HTML+CSS, HTML+CSS+JS then you would realize they belong in your javascript code. Feel free to read more about Progressive Enhancement
You could define the class in of the page. It's slightly cleaner than inline, but you would have to have that single class definition on all pages. But then again, I'd try to use a single dynamic footer/header anyway..

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/

Categories