I found this nice looking button on the web. Now I was wondering is it even possible to link something with it? The <a href""> is needed for the status of the button and the second href indside of the div doesn't work. Did the creator make a small mistake or would a button like this never work?
http://codepen.io/seansean11/pen/wHIae
I think the point of this button is to send something (probably a form) with AJAX and then show the thank you-side.
If you use it with a href to another page you will not see the thank you-side as you are leaving the page.
The href on the div will never work without some JavaScript. The button effect works without JavaScript but is kind of pointless on it's own.
Updated with example to use it as download link
In order to make the button work for non-JS users you should set the href to the file you want them to download. For non-JS users it doesn't show the thank you-side unfortunately.
I also added an ID (#btn-download) to the button to make it easy to get it in the JS.
HTML
<a id="btn-download" href="http://www.domain.com/some_file.pdf" class="flipper-container">
<div id="id" class="flipper">
<div class="front-face" data-icon="➣">Click Me</div>
<div class="back-face" data-icon="✓">Thank You</div>
</div>
</a>
JavaScript
(function (d, w) {
var button = d.getElementById('btn-download');
// Store the download link
var downloadLink = button.href;
// Set the href back to the id of .flipper
button.href = '#' + d.getElementById('id').id;
// Add the cross browser event listener
addEvent('click', button, function() {
// Send the user to the download link
w.location = downloadLink;
});
}(document, window));
// Taken from http://stackoverflow.com/a/6927800/3351720
// This is only to support IE8 and below
function addEvent(evnt, elem, func) {
if (elem.addEventListener) { // W3C DOM
elem.addEventListener(evnt, func, false);
}
else if (elem.attachEvent) { // IE DOM
elem.attachEvent('on' + evnt, func);
}
else { // Not much to do
elem[evnt] = func;
}
}
I haven't tested it in various browsers but I think it should work in all modern browsers (Chrome, Firefox, Opera and Safari) and Internet Explorer to atleast version 7.
altough a href attribute will work on a element only you may add a click event to any element to call a url
or you can wrap a span with an a
Related
in a web page, I am trying to open an overlay with the help of ng-click and there is no href available for this with the help of java script, respective overlay is being called. This function is working fine with keyboard when no screen reader is being used or NVDA screen reader is being used. However, when I use Jaws screen reader, functionality is not working at all. Can anyone suggest approach how to fix this issue without using href? here is code I am using
HTML
<a href="javascript:void(0)" ng-click="openModal()">
<h2 class="mu-item__title" ng-if="!hideInfo" data-share-title>{{videoData.title}} <span class="screenreader">{{item.contenttype_t}}</span></h2>
JavaScript code
$scope.openModal = function() {
if ($attrs.modalvideo) {
$scope.openInModal = true;
$scope.fromChild = false;
$scope.genericData.showModal = true;
$scope.genericData.isVideo = true;
$scope.modalData = $scope.videoData;
}
};
can anyone suggest what need to be changed in current code?
Thanks
Anubhav Mitra
Try using the button instead of anchor tag
<button aria-label="{{item.contenttype_t}}" ng-click="openModal()" ng-if="!hideInfo">
<h2 class="mu-item__title" data-share-title>{{videoData.title}}</h2>
</button>
I'm using jquery plugin token input for my dropdowns on this page
http://www.connectweb.com.au/search.aspx
It works fine in firefox in that I can click the arrow and the dropdown opens with the contents and allows me to scroll up and down using the scrollbar. However in IE and Chrome I cannot seem to scroll by moving the scroll bar up and down. Its some css somewhere but I'm struggling to find out what..any css experts out there want to take a quick look? would be appreciated : -)
thanks
Hello please take a look at the https://github.com/loopj/jquery-tokeninput/issues/130
The issue happens to be with the the way IE handles scroll bars versus chrome or firefox. The solution is to modify the inputtoken.js file as mentioned in the forum.
Here is the basic outline.
Declare a variable to hold the state
Check of the variable in the .blur event of the input_box
Add .mouseover, .mouseout to .dropdown
// 1. Keep track of mouse being over dropdown
var mouseOverDD;
// 2. IF the blur function
var input_box = $("<input type=\"text\" autocomplete=\"off\">")
.blur(function () {
if (!mouseOverDD) {
hide_dropdown();
$(this).val("");
}
})
// 3. Add over/out events
var dropdown = $("<div>")
.addClass(settings.classes.dropdown)
.appendTo("body")
.hide()
.mouseover(function(){
mouseOverDD = true;
})
.mouseout(function(){
mouseOverDD = false;
});
i want a anchor should act like and input type submit button.
i am using a jquery plugin library that actually uses input type submit but i have styled my buttons on anchors. i dont want to use
<input type="button">
or
<input type="submit">
i want to use anchors such as
<a href="javascript to submit the form" ></a>
and here is my jquery code where i want to use
{
var submit = $('<button type="submit" />');
submit.html(settings.submit);
}
$(this).append(submit);
}
if (settings.cancel) {
/* if given html string use that */
if (settings.cancel.match(/>$/)) {
var cancel = $(settings.cancel);
/* otherwise use button with given string as text */
} else {
var cancel = $('<button type="cancel" />');
how to use anchors instead of button.
If you want an anchor tag to act like a button just do this
<!--YOUR FORM-->
<form id="submit_this">.....</form>
<a id="fakeanchor" href="#"></a>
<script>
$("a#fakeanchor").click(function()
{
$("#submit_this").submit();
return false;
});
</script>
Since you're using jQuery, just use $() to select the form element, and call submit on it; hook all this up to the anchor via $() to find the anchor and click to hook up the handler:
$("selector_for_the_anchor").click(function() {
$("selector_for_the_form").submit();
return false;
});
Probably best to return false; to cancel the click on the anchor.
Off-topic: But note that this makes your page completely unusable without JavaScript, as well as making it confusing even for JavaScript-enabled browsers employed by users requiring assistive technologies (screenreaders, etc.). It makes the markup completely un-semantic. But since you'd said quite clearly that this was what you wanted to do...
<a id='anchor' href="javascript to submit the form" ></a>
now you can use jquery to add an event handler
$('#anchor').click(function (e) {
// do some work
// prevent the default anchor behaviour
e.preventDefault();
})
now you can style your anchor as you wish and it will act as a regular button
And what about:
<form id="formOne">
...
link here
</form>
you can use input of type image (it works as a submit button for a form) or in jquery:
$("a").click(function(event){
event.preventDefault();
$('form').submit();
})
How to disable/enable a button? which is not in a form , in a navBar. I'v tried some examples , all fail.
I'm changing my textarea text $("textarea").val(x); The text is changing , the problem it doesn't get auto re-size , I see the ugly scroll bar on the side , If I manually resize it , its OK... is there a method to force refresh or something like that?
Thanks
Update (TextArea):
If i click on the text area and then press any key -> it opens up as should be,
I'm trying to simulate it .. but fail , the binding is works , but the trigger for keypress/keydown doesn't , I tried some codes from googling, this should work , I think , mayb for nomral jQuery 1.6 , but not jQuery mobile.. My test are are on Chrome and iPhone 4
$('#textarea').bind('click', function() {
var e = jQuery.Event("keypress", { keyCode: 64 });
$(this).trigger( e );
});
UPDATE:
Link button example:
http://jsfiddle.net/gRLYQ/6/
http://jsfiddle.net/gRLYQ/7/ (Header button example)
JS
var clicked = false;
$('#myButton').click(function() {
if(clicked === false) {
$(this).addClass('ui-disabled');
clicked = true;
alert('Button is now disabled');
}
});
$('#enableButton').click(function() {
$('#myButton').removeClass('ui-disabled');
clicked = false;
});
HTML
<div data-role="page" id="home">
<div data-role="content">
Click button
Enable button
</div>
</div>
NOTE: - http://jquerymobile.com/demos/1.0rc2/docs/buttons/buttons-types.html
Links styled like buttons have all the same visual options as true
form-based buttons below, but there are a few important differences.
Link-based buttons aren't part of the button plugin and only just use
the underlying buttonMarkup plugin to generate the button styles so
the form button methods (enable, disable, refresh) aren't supported.
If you need to disable a link-based button (or any element), it's
possible to apply the disabled class ui-disabled yourself with
JavaScript to achieve the same effect.
Regarding your second question, you can cause a textarea to autogrow by triggering a keyup() event on it.
Considering your original example code, the following works for me:
/*Note: I'm using 'on' instead of 'bind', because that's what I've actually tested
with, but I'm pretty sure this will work with 'bind' as well*/
$('#textarea').on('click', function() {
//First we'll add some text to #textarea
$('#textarea').val('some dummy text to be added to the textarea');
//Then we trigger keyup(), which causes the textarea to grow to fit the text
$('#textarea').keyup();
});
Short and sweet version of the above, this time chained and with no comments:
$('#textarea').on('click', function() {
$(this).val('some dummy text to be added to the textarea').keyup();
});
Adapted from here.
I have a form with a textbox and a button. IE is the only browser that will not submit the form when Enter is pressed (works in FF, Opera, Safari, Chrome, etc.). I found this javascript function to try to coax IE into behaving; but no avail:
function checkEnter(e){
var characterCode
if (e && e.which) {
e = e
characterCode = e.which
} else {
e = event
characterCode = e.keyCode
}
if (characterCode == 13) {
document.forms[0].submit()
return false
} else {
return true
}
}
Implementation:
searchbox.Attributes("OnKeyUp") = "checkEnter(event)"
Any advice?
EDIT: This page on CodeProject outlines what Dillie was saying, and it works perfectly.
Just create a text input in a hidden div on the page. This will circumvent the IE bug.
Example div:
<!-- Fix for IE bug (One text input and submit, disables submit on pressing "Enter") -->
<div style="display:none">
<input type="text" name="hiddenText"/>
</div>
The other thing I have done in the past is wrap the form area in a Panel and set the DefaultButton attribute to the submit button you have. This effectively maps the enter key to the submission as long as you have a form element in focus in the panel area.
There is a good write up of this problem here, and a nice jquery based solution:
http://www.thefutureoftheweb.com/blog/submit-a-form-in-ie-with-enter
// Use the following Javascript in your HTML view
// put it somewhere between <head> and </head>
<script language="JavaScript" type="text/javascript"><!--
function KeyDownHandler(btn)
{
if (event.keyCode == 13)
{
event.returnValue=false;
event.cancel = true;
btn.click();
}
}
// -->
</script>
// Put this in your TextBox(es) aka inside <asp:textbox ... >
onkeydown="KeyDownHandler(ButtonID)"
When using display:none, IE won't see the button and therefore won't be able to use it to submit the form. Instead, you could use z-index and absolute positioning to hide it under another element, e.g. with the style:
position:absolute; bottom: -20px; left: -20px; z-index: -1;
Now it'll still be there, usable by IE, but hidden beneath another element.
Hide the button - not using display:none, but with the following styles:
position: absolute; /* no longer takes up layout space */
visibility: hidden; /* no longer clickable / visible */
If you do this, you won't need to add any other elements or hidden inputs.
This is due to a peculiarity in IE for single text field inputs.
A simple solution is to stop the page having a single text field by adding another hidden one.
<input type="text" name="hidden" style="visibility:hidden;display:none;" />
see..
https://web.archive.org/web/20210125133120/https://www.4guysfromrolla.com/articles/060805-1.aspx
Does it use a GET instead of a POST? Is the URL too long? I've seen that...
Basically, a form needs either a button, input type="submit" or an input type="image" to enable the builtin behaviour to submit a form on enter. You shouldn't need a javascript to submit it.