I have a Bootstrap Rating component and I have to use on-leave method to call my javascript function. Except in IE all the other browsers execute on-leave function on click event also. But in IE, till I leave the stars'div the function is not called. I can not even use ng-click as it is not supported by Bootstrap Rating component (My angular version is 1.1.5)
<div id="ratingDiv{{$index}}" style="display:none;" class="ratingDivClass">
<span class="ratingPoorClass">Poor</span>
<rating id="rateStars" onclick="$jq('#loader').show();" value="userRating" max="5"
on-hover="hoveringOver(value)"
on-leave="saveRating(message.id,userRating,$index,message.entity);"></rating>
<span class="ratingGoodClass">Very Good</span>
</div>
Problem: In IE, till I leave the div the function is not called
Tried:
Calling function on on-click and not on-leave: It does not pass scope related parameters
Trigger mouseleave() method on on-click of the div: Did not work :(
Please let me know if anyone has any solution for this.
I have experienced a similar problem with angularjs and IE. In my case the key-down did not work and the the solutions was to use the key-up event (see http://api.jquery.com/keyup/).
In your case you may be having this issue https://github.com/angular/angular.js/issues/1277
I am not familiar with 'on-leave' above, but you could try the jquery blur method instead: https://api.jquery.com/blur/
Based on docs of ng-mouseleave, you can try the below code.
On my last project i used below code for IE8 to support some functions..
You could try on-leave also.
<!--[if lte IE 8]>
<script>
document.createElement('ng-include');
document.createElement('ng-pluralize');
document.createElement('ng-view');
document.createElement('alert');
document.createElement('progress');
document.createElement('ng-mouseleave');// try this
// Optionally these for CSS
document.createElement('ng:include');
document.createElement('ng:pluralize');
document.createElement('ng:view');
</script>
<![endif]-->
Related
I'm awful with javascript and I'm having a problem with this one.
I'm using this code
<script>
function changeNavigation(id){
document.getElementById('members')
.innerHTML=document.getElementById(id).innerHTML
}
</script>
and HTML
`<span onClick="changeNavigation('members')" >MEMBERS</span>
<span onClick="changeNavigation('help')" >HELP</span>`
<div id="members>...</div>
<div id="help" style="display: none;>...</div>
But I can't get <span onClick="changeNavigation('members')" >MEMBERS</span> to actually go to an element "members" without duplicating everything inside of it in another id.
Is there a way to do this?
This can be done using only standard javascript, but personally I'd recommend going ahead and getting used to using jQuery. Here's an example jsfiddle using jQuery: http://jsfiddle.net/JnvCR/2/
Don't forget to include jQuery in your website:
<script src="http://code.jquery.com/jquery.js"></script>
You need to correct your syntax errors. Use onclick instead of onClick (pedantic). Make sure you close your attributes properly, you are missing a few closing " marks.
updated html
<span onclick="changeNavigation('members')" >MEMBERS</span>
<span onclick="changeNavigation('help')" >HELP</span>`
<div id="members">...</div>
<div id="help" style="display: none;">...</div>
There is also an error with your logic as you are simply replacing the contents of div#members with itself.
Updated JS without syntax errors, but still with dodgy logic
function changeNavigation(id){
document.getElementById('members').innerHTML=document.getElementById(id).innerHTML;
}
Demo fiddle
http://jsfiddle.net/ADGCV/
As far as your actual question goes, can you explain what you would like to happen a bit better??
Here's a possible solution http://jsfiddle.net/ADGCV/1/
I need to create a simple button made only of an image, and which will open a JQuery Dialog when the user clicks on it.
I am doing some reading and notice many solutions: <button>, <image> with a <a>, using CSS to modify a button background, etc...
This is confusing, what is the proper way to implement my image button?
Thanks.
P.S.: The button/image should be focussable. An operational JSFiddle example is welcome.
The proper way largely depends on what the button will do if JavaScript is not available.
If you are going to submit a form then:
<button> <img src="..." alt="..."> </button>
If you are going to go to a URL then:
<img src="..." alt="...">
If you are going to do absolutely nothing (generally not a good idea, you should follow the principles of Progressive Enhancement and Unobtrusive JavaScript, but acceptable if you only generate the button with JavaScript in the first place and the loss to the user is convenience rather then essential functionality):
<button type="button"> <img src="..." alt="..."> </button>
You then bind the JavaScript to either the form's submit event, or the button/anchor's click event and prevent the default behaviour so the form won't be submitted / the link won't be followed if the JavaScript executes successfully.
Create a button and put background-image for it.
Checkout the fiddle.
http://jsfiddle.net/siyakunde/Y38nz/
I found the solution after many struggles: http://jsfiddle.net/YRY8M/3/.
<html>
<head></head>
<body>
<input type="image" tabindex="0" onclick="doSomething()" src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/White_and_yellow_flower.JPG/320px-White_and_yellow_flower.JPG"
/>
<br />
<button tabindex="1">I am focussable too !!!</button>
</body>
</html>
And some javascript:
function doSomething() {
alert('Hello!');
}
It depends on what you want to do in every case. There is no guideline that says "you should do it like this", but there are situations that some cases are more suitable than others.
For example according to this review, IE versions of 8 and below have some buggy behaviour regarding <button> tag when trying to use it as a submit button.
Ηowever the <button> has some new attributes added in HTML5 which you can see here , ammong them is autofocus and other useful that will be supported by most modern major browsers.
In your case that you want to maintain the "focus" (i assume with tabbing support), if you use a single <image> as a button (with or without <a>), you will have to add some JS code to make the image focusable when the appropriate tab is pressed. So you will have to write a bit more code to do the same thing.
There is one more solution which might be suitable for you, since you do not need to submit the form to server side. Using the <input type="image" type and defining the src attribute inside it, will be focusable and not require neither any JS code to run nor any difficult CSS. You can find more about it's syntax here
So, it ends up to you to decide which one of all them to use.
I would use the one that i find more flexible, easier for me to code, easily reusable and is supported by most of my target browsers.
Use jQuery as you own it...
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<style type="text/css">
#theBtn{
margin: 20% auto 0;
background: url('http://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/White_and_yellow_flower.JPG/320px-White_and_yellow_flower.JPG');
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<div id="theBtn"></div>
<script type="text/javascript">
$(document).ready(function(){
$("#theBtn").click(function(){
if(confirm('Are you sure?')){
$("#theBtn").fadeOut('slow');
}
});
});
</script>
</body>
</html>
Inside a <button> tag , put your image, and attach an click event to <button> to open the dialog on click.
JSFiddle
First thing, There is either an image or a button. But not both.
I would say, create an image and place your code in the onclick() function of that image.
var img= $("#my-image-id");
image.click(function() {
// your code here
}
As I know You can't change the look of the Safari buttons thats why I suggest to use a for the solution. Here is my simple code: http://jsfiddle.net/djgBK/1/
The basis is:
Take an a element put the link content to the left,
Then replace it with image that is actualy it's background. Becouse it's a element user can select it usin only TAB button.
What's more using an a elemet will let You to put title which will be displayed after hovering/entering over the button.
document.getElementById("ctrl").disabled = true;
this works in IE but does not works in mozila. What shoul I do?
Did you try:
document.getElementById("ctrl").setAttribute('disabled', true);
<body>
<input id="btnSubmit" type="button" value="submit" onclick="disabled(this);"/>
<script>
function disabled(ctrl) {
ctrl.disabled = true;
}
</script>
</body>
It is hard to tell what the issue is that you are having. Does mozilla do anything when the code is executed? does it display an error? What version of ie did you test it with? And can you also provide the html for the ctrl element?
One of the issue with IE and the getElementById method is that in some versions of the browser it will match on the id attribute of a tag as well as the name attribute (which does not follow the JavaScript spec). In Mozilla it is only matching using the id attribute.
http://msdn.microsoft.com/en-us/library/ms536437(VS.85).aspx
I have a button on click of which I want to go one step back using javascript. for this I am using window.history.go although this works fine in IE7 and firefox it is not working in IE6 and there is no change as the user stays on the same page.
I m attaching the event to LinkButton
IE6 has trouble with window.history.go(). It works on regular links like this:
<a href='#' onclick='history.go(-1);'>Back!</a>
But some others won't work. You could try this:
<button onclick='history.go(-1);'>Back!</button>
But I'm not quite sure if that would work. You could also show a button for all other browsers and a link for IE:
<button id='backButton' onclick='history.go(-1);'>Back!</button>
<!--[if IE 6]>
<script type='text/javascript'> document.getElementById('backButton').style.display = 'none'; </script>
<a href='#' onclick='history.go(-1);'>Back!</a>
<![endif]-->
It would offcourse be better to add the behaviout in a seperate javascript file instead of inline in the HTML. But I think you get the idea.
Use history.back()
I know that you can use a javascript: pseudo protocol for URLs in an <a> tag. However, I've noticed that Firefox and IE will both allow 'javascript:' to precede javascript code within a <script> tag. Is this valid syntax? Does it change the scoping rules?
Examples:
I've seen this many times:
<a onclick="javascript:alert('hello world!');">Hello World!</a>
But is this legal/valid syntax and does it do anything special:
<script type="text/javascript">
javascript:alert('hello world!');
</script>
Outside of the href attribute (where it is a protocol specifier), name: just creates a label (such as one might use with a continue or break).
See: Do you ever need to specify javascript: in an onclick?
You need the javascript: "protocol" when you want to put JavaScript in the href attribute of a link.
<!-- does not work -->
link
<!-- does work -->
link
<!-- also works -->
link
As far as I know (and please, if I'm wrong, someone correct me) there is no difference in scope, but there is a very important difference about this.
<!-- does not work -->
link
<!-- alerts "undefined" -->
link
<!-- works as expected, alerts "<url>#" -->
link
One thing to consider, our testers would always ding us if we did something like
<a href='javascript:openwindowmethod("url");'> stuff </a>
Rather than
<a href='url' onclick='return openwindowmethod(this.href);'> stuff </a>
The first method would only work if you click on it but not if you shift or alt clicked on it, or right clicked and went to open in a new window.
The second method would support all of that, as well as the ability to function the way it intended if the user just plain clicked the link.
The javascript: syntax can be used anywhere in a URL and executes the following string as a script. It is part of the HTML spec and AFAIK is supported by all current major browsers.