I'm editing a start page made by someone else (found here: http://defined04.deviantart.com/art/KMay-Start-Page-184915031?q=gallery%3Adefined04%2F790342&qo=0). This lets you switch search engines by clicking on the different tabs. Is there a way to have the search box automatically selected when I select a tab? At the very least, how can I get the default engine to be selected on page load?
On the click handler of your tab, do this....
document.getElementById('tabs-container').getElementsByTagName('li').onclick = function () {
document.getElementById('search-input-' + this.id).focus();
}
Of course, change it to suit your HTML. Hopefully if you have a tie like that between them, you can write one event handler and not three.
You can use javascript focus() for that. Execute the script when the tab is changed.
Related
How do I disable a Bootstrap button after it is clicked using Javascript.
I am using the onclick event but it doesn't get disabled.
Code:
<div class="panel-heading">
<div class="btn-group pull-right">
Assign
Upload
</div>
</div>
$("#buttonid").on("click", function() {
$(this).prop("disabled", true);
});
add
$(this).prop("disabled",true);
to you click event function
The following solution can be used when an element (e.g. button, or link) is rendered as an A (anchor) tag (e.g. command link-buttons in ASPX pages). (Anchors do not have an (HTML) disable attribute, so cannot simply be disabled by setting that attribute. Slightly confusingly, Bootstrap will make the button appear to be disabled, but in practice another click (or worse still, double-clicks) will cause an on-click or href (where this is actually "javascript:...") to be re-invoked.)
NB: Needs jquery.
Add the script from the jsfiddle reference below, to your master page or individual pages.
Apply the disableafteroneclick class to any button rendered as an anchor (A) where you want to restrict second/double clicks
Optionally, add to the a/button data-disabledtext attribute (this will replace the text on the button after the first click.
NB: The disabled nature of the button will only be removed when the page is re-rendered - so this is mostly used where (for example) a submit button which must be click only once, will move the user to another page.
You'll see I've used the lines:
if ($(this).attr("href")) window.location = $(this).attr("href");
return false;
for the first click (where the invocation is needed) - which might have been replaced with simply:
return true;
...but discovered that this doesn't work for IE <= 8 - and our clients need to provide support for IE8! If you know you won't need that, then you certainly could use the simplified code created by that replacement.
Code is at:
https://jsfiddle.net/robertgalesorguk/qbq1n369/4/
How to know when click into iframe in html? because i want to close the dropdown component when click into iframe.
I searched by google, there is a solution using window.blur, but this method isn't standard.
Any helps are appreciate, thanks!
You may be able to do this with Javascript. The following question covers some methods on how you might implement an OnClick() method for iframes:
Adding click event handler to iframe
From there, you could probably have the function go ahead and close the dropdown.
Without knowing more about your code, we can only really suggest general solutions.
I don't think there is a direct way to get a click on iframe in javascript. But there is way around for it.
What we can instead do is track if the user hovers over the iframe and using $(window).blur() we can know if the focus has shifted from current window i.e. the webpage to iframe embedded. Focus shift will mean that user has clicked inside the iframe. Once we capture $(window).blur(), we can toggle dropdown state.
var iframeHover;
$('iframe').hover(function() {
iframeHover = true;
}, function() {
iframeHover = false;
});
$(window).blur(function() {
if (iframeHover)
$("#dLabel").dropdown('toggle');
});
Working Plnkr is: Plnkr
I want to click a <select> but stop it to show his dropdown list
$('select').click(function(){
if ($(this).find('option').size() > 20) {
// some code to do my job
return false;
}
});
The code return false can stop dropdown list display in Firefox(actually, the dropdown list display first and hide after a short while), but not work in Chrome.
I also tried let the <select> to be disabled, trigger blur() on it, or trigger click() on other element, but the dropdown list is still there unless user click somewhere else.
Is this possible? ... and Thanks!
Long story is here (if you have interested in why I want to do that):
As you know, sometimes there will be a <select> with too many
<option> in it, and when you click it, there will be a long dropdown
list. Find what you need in a long dropdown list is a terrible job...
But unfortunately there is a lot in my site.
So I think the simplest way is to write some javascript to change
that, when option is more than 20, show a dialog with a filter and a
new <select> which only have filtered <option> to let find easy.
And my problem is the dropdown list is still display, make my users
confused... They don't know where to operate. "the dialog or the
origin select".
The problem is that the default action of a select element occurs on the mousedown event, rather than click (or mouseup), so you'll need to bind an event handler to mousedown instead:
$("select").mousedown(function(e) {
if ($(this).find('option').length > 20) {
e.preventDefault(); //return false will also work
}
});
Here's a working example. Note that I've used the preventDefault method of the event object, simply because I think that makes it clearer what's actually happening. However, return false will work too.
I wanted to disable all form controls (with the 'form_control' class) in a table (id 'details_table'), including selects, and point users to an 'edit' button that opens a modal. A small tweak to the previous answers seemed to work in both Firefox and Chrome on Linux. Not tested in other browsers yet.
$('#details_table').on('mousedown', '.form-control', function(e) {
alert("Please click on the Edit button to modify details.");
e.preventDefault();
this.blur();
});
Let's say I have a web page with a header menu, when I click the header menu, it calls a servlet that creates the sidebar. Is it possible that without using the document.getElementById? And just simulate keystrokes tab and enter via JavaScript so I don't have to click the menu to view the sidebar?
Could you describe what you want to achieve a bit more?
What I understood is that you want to be able to show ( and may be also hide) the sidebar with the tab button.
You could use the .keypress() function in jQuery - http://api.jquery.com/keypress/
Also check out this tutorial on Nettuts, I think it may be useful for you -
http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-a-keypress-navigation-using-jquery/
You can use the attribute tabindex on the elements that makes your menu.
eg: <ul tabindex="1">... and set the focus on the first one when opening the page.
They will act as form field when you press tab.
Then for the enter place a single onkeyup listener on a parent node common to all menus items:
menuParent.onkeyup = function(ev){
var selectedMenu = ev.target || ev.srcElement,
keycode = ev.keyCode;
if(keycode === 13){
//the user pressed enter
}
...
}
You can do what you want using JavaScript, but there's a much easier way to do it than by simulating keystrokes.
I am assuming that what happens when you click the link is that a JavaScript function is called, which causes the submenu to appear. All you need to do is to find out what that function call is (let's say it's called "callTheFunction"), and then call it onload, like this:
<script type="text/javascript">
window.onload=callTheFunction;
</script>
Hopefully that will give you the idea. If you need any more help, please provide a URL or code sample.
I am in charge of a website at work and recently I have added ajaxy requests to make it faster and more responsive. But it has raised an issue.
On my pages, there is an index table on the left, like a menu. Once you have clicked on it, it makes a request that fills the rest of the page. At anytime you can click on another item of the index to load a different page.
Before adding javascript, it was possible to middle click (open new tabs) for each item of the index, which allowed to have other pages loading while I was dealing with one of them.
But since I have changed all the links to be ajax requests, they now execute some javascript instead of being real links. So they are only opening empty tabs when I middle click on them.
Is there a way to combine both functionalities: links firing javascript when left clicked or new tabs when middle clicked?
Does it have to be some ugly javascript that catches every clicks and deal with them accordingly?
Thanks.
Yes. Instead of:
...
Do this:
...
And then in your JS, hook the link via it's ID to do the AJAX call. Remember that you need to stop the click event from bubbling up. Most frameworks have an event killer built in that you can call (just look at its Event class).
Here's the event handling and event-killer in jquery:
$("#thisLink").click(function(ev, ob) {
alert("thisLink was clicked");
ev.stopPropagation();
});
Of course you can be a lot more clever, while juggling things like this but I think it's important to stress that this method is so much cleaner than using onclick attributes.
Keep your JS in the JS!
Yes, You need to lookup progressive enhancement and unobtrusive Javascript, and code your site to work with out Javascript enabled first and then add the Javascripts functions after you have the basic site working.
I liked Oli's approach, but it didn't discern from left and middle clicks. checking the "which" field on the eventArgs will let you know.
$(".detailLink").click(function (ev, ob) {
//ev.which == 1 == left
//ev.which == 2 == middle
if (ev.which == 1) {
//do ajaxy stuff
return false; //tells browser to stop processing the event
}
//else just let it go on its merry way and open the new tab.
});
It would require some testing, but I believe that most browsers do not execute the click handler when you click them, meaning that only the link is utilized.
Not however that your handler function needs to return false to ensure these links aren't used when normally clicking.
EDIT:
Felt this could use an example:
<a href="/Whatever/Wherever.htm" onclick="handler(); return false;" />
link text
For more info and detailed explanation view my answer in another post.
Possibly, I could provide two links each time, one firing the javascript and another being a real link that would allow for middle click.
I presume, one of them would have to be an image to avoid overloading the index.
The onclick event won't be fired for that type of click, so you need to add an href attribute which would actually work. One possible way to do this by adding a #bookmark to the URL to indicate to the target page what the required state is.