i want two things to happen when i move the mouse over an image, is there a way to write the code that way?
<a href="http://google.com/" target="_new"
onMouseOver="MM_swapImage('301','','/w/w-1.gif',1)"
onMouseOut="MM_swapImgRestore()">
this is the original code for general rollover images in dreamweaver, but i want to add more to onMouseOut= and Over= like onMouseOut="MM_swapImgRestore()";"some command" or how can i write this? im using javascript
i appreciate any help!
The onMouse* properties usage is deprecated in modern browsers.
You should use addEventListener or something corresponding instead.
These 'listeners'-based implementations allow to add as much event-handlers as you want to any event.
I don't remember exact cross-browser syntax for this, but you can see it inside the the source code of any popular JS framework (like jQuery or Prototype or MooTools), or just use this framework.
Ofcourse it's possible to do something like:
onMouseOver="func1();func2();func3();"
But it's a bad-practice because this approach is incompatible with much of third-party JavaScript libraries you probably will use.
Have it call a function that calls both functions.
EDIT It's even easier. Just do
onMouseOver="func1(); func2()"
Using the idea of Vadim, you can do this:
// Others (Chrome, Firefox, etc)
document.addEventListener("mouseover",function(){thingone(); thingtwo();},false);
// IE
document.attachEvent("onmouseover",function(){thingone(); thingtwo();});
PS: Shall I quote cdhowie too, for the function names?
Related
Is there a way possible to do code when the target value changes?
Like:
mod.t[id].messages
In here I have messages that is a holder of objects that contain messages.I want to run my code when the container's values change.Is it possible?
You can use Object.watch but its only implemented in gecko and mostly used for debugging purposes.
That said if you don't need IE6 I'd suggest giving a look at this implementation which works on all modern browsers.
Also, some people might suggest to bind the value to a DOM element, but you REALLY shouldn't do that.
How can I disable firebug using Javascript? I want to do this to hide the workings of my webpage from visitors. Is there any option to do this?
You can't. The best you can do is obfuscate your JavaScript.
Actually scratch that. The best you can do is move all the security-critical code to the server. You should be doing that anyway.
You can't do it. Check this stackoverflow question on different methods others have adopted as a work around of sorts
As Amadan said, you can't disable particular source-viewers.
But you can use a hack. It works only with viewers, that add them selves to the DOM. You just have to delete specified node. Did a look-around with Firebug Lite for Chrome.
DON'T use this approach, only for fun :)
Please tell me, how to apply CSS on javascript Alert.
Thanks
You cannot. alert() simply shows a native message box, so it'll look however the OS makes it look.
In general, you shouldn't be using alert boxes because they are annoying and they block the entire browser.* You could always create a fake alert box with JavaScript that achieves the same effect. You could then style it however you want with normal CSS. If you use jQuery, there's SimpleModal (demos).
* Modern browsers tend to only block the window that spawned the alert, but they're still annoying and you still shouldn't use them. :)
It is not possible, or else people will use it to phish.
you might want to check jConfirm (jQuery plugin)
http://abeautifulsite.net/2008/12/jquery-alert-dialogs/
No you can't do that. I would suggest you either let it be, or use a modal window. You can also try using modal/dialog plugins e.g. http://docs.jquery.com/UI/Dialog
You can use the sweet alert library of js
official website
github
You can also customize the alerts with simple CSS.
If I have a CSS solution for all browsers except IE then what should be chosen for IE?
CSS expression in IE conditional comments
or
JavaScript in IE conditional comments
or
jQuery + plugin in IE conditional comments
Which will be less slow in rendering speed?
CSS expressions only work in Internet Explorer only, so you'll have to use Javascript in some form, for complex styles. Firefox, Safari and Chrome recognise a lot of CSS3 so if you're trying to do something like rounded corners or multiple backgrounds you could use that and look for an expression equivalent for IE.
However, I would recommend using jQuery. It's built to be cross-browser, and your code will likely end up simpler than using combinations of expressions/browser-specific styles.
jQuery plugin, if I'm already using jQuery.
I don't think I ever used CSS expression, not even as a hack.
As for a non-jQuery JavaScript library - I'd have to learn it from scratch, it might re-implement some of jQuery's features (so doesn't benefit from jQuery's engine, cross browser, etc), and it may not be written in the convenient style of jQuery, like chaining and liberal null checks.
You should avoid CSS expressions.
As for JavaScript vs. jQuery, that depends. If I can do it in just a few lines of JS without cross-browser issues, and I'm not already using jQuery for other stuff, there's no reason to load the entire jQuery library. Anything much more complicated than a few document.getElementById or alert calls, though, and I'm likely to want jQuery available, and at that point I might as well be using jQuery plugins
Do not use CSS expressions.
The reason:
CSS expressions can be evaluated many hundreds of times per second. Especially considering that IE is not the fastest horse in the race, don't do that to the poor old browser.
The average IE CSS expression is evaluated over one thousand times in the time the person views the page.
What's more, it is just Javascript - it doesn't work if JS is off, creates the same garbage global variables, et al. So the gain is nill, the loss is high.
Do not include JQuery just for this.
But if it (or Mootools etc.) is included, use them by all means.
Creating your function without JQ is simple and straightforward.
Just have it run on page load and resize (http://www.devarticles.com/c/a/JavaScript/OnReset-OnResize-and-Other-JavaScript-Events/1/) and that should do the trick.
Use IE conditional comments and you are even valid.
<!--[if IE]>
<script>
var dumbIE = function (){
//your stuff
}
onload=onresize=dumbIE;
</script>
<![endif]-->
Although I strongly disrecommend using CSS expressions (is there really no "normal" CSS hack for the particular problem? doublecheck it, twice, if necessary ask question here), I would go ahead with it. This removes the risk that the your application breaks in case that the user has JS disabled. JS is at its best when used unobtrisively and in your case it is clearly not the solution.
Updated to new focus: If you've got it looking good in everything but IE (an all too common situation...) then you need some method of writing code that only IE sees/executes. You can do this with browser sniffing in JavaScript, conditional comments in CSS and HTML. IE CSS bugs (anyone else have some good links?)
(Old answer:)
CSS expressions: Internet Explorer only shortcut.
JavaScript: Have to code every stinking thing yourself. Works "cross browser", but you still need to test in all the browsers to make sure it's doing what you want.
jQuery: cross browser, easy, simple. :D
Wait for Microsoft to improve IE.. haha.
Ignore IE -> Encourage your web-visitors/users yo download/use a different browser (IMHO, firefox is a really, really good choice, if not the best)
There are ways of making IE 'compatible' with modern, css-stylized websites (such as the well-known comment <!--[if lte IE 6]>...<[endif]--> and so on.. but anyway, it's up to you.
With javascript event timers, you can relatively easily determine how long it too for the page to render in the browser, especially when using tools like Jiffy. However, is it possible to capture more granular events such as individual image/object download times using javascript in the page? I am fairly sure this is not possible, but wanted to confirm with the javascript guru's of SO.
Thank you in advance.
Sadly, unless you load the images using the javascript image object manually instead of in the markup, I don't believe this is possible. that's why you usually see this functionality in things like firefox plugins
You could look at the Net tab in Firebug. I don't know if it can give you same information via Firebug Lite in other browsers or not.
If what you want to time can be put into an event that has a callback, you can check the time before and after. So anything you do with Ajax you can time. What exactly are you trying to time? Can you be more specific?
I'm not totally familiar with this jQuery plugin, but it may be of help to you:
http://plugins.jquery.com/project/timers