I need to implement a drop down menu like the one in the image. I know how to accomplish something like this when there is no 'go' button but how would I do this with the the 'go' button? Is there a way to allow the user to select a link but not trigger it unless the user clicks the go button? Is there a jquery plugin or something for this kind of behavior?
Im not very good with JS, so sample snippets to illustrate your suggestions will go a long way to helping me understand - thanks!
You can prevent the default behavior of the links, like this:
$(document).ready(function() {
$("#menu a").click(function(event) {
event.preventDefault();
});
});
So the user won't be redirected when choosing the link, but won't break that behavior in case he wants to open it in a new tab/window, which is cool.
And for redirecting the user when he clicks, you can just attach an event to the GO button which finds the selected a, takes its href, and set the current location to it's value.
You could do something like this:
$("#menu a").click(function(event) {
$("#menu a").removeClass('selected');
$(this).addClass('selected');
return false;
});
Then:
$("#buttonid").click(function(event) {
window.location.href = $("#menu a.selected").attr('href');
});
Related
I'm trying to write some jQuery to disable my registration button unless my survey button has been clicked (which opens a modal window). Can anyone help me?
I need users to click the popup survey button before they press the main registration button.
All I really have at the moment is the jQuery to disable the register button:
jQuery(document).ready(function($) {
$("#registerButton").attr('disabled', 'disabled');
});
The class for my survey button is: .btn-survey
You can try the following
jQuery(document).ready(function($) {
$("#registerButton").attr('disabled', 'disabled');
$("#surveyButton").click(function(){
$("#registerButton").removeAttr("disabled"); // removing attribute
})
});
Just like how you disabled it in the first place.
$('.btn-survey').click(function() {
$('#registerButton').removeAttr('disabled');
});
I have a hidden link and a button.
I want when users click on the button they will go to the link.
Why I'm not just show the link so users can click through the link because I don't want users see the link that appear at the bottom of browser.
<a id="stack" href="http://stackoverflow.com/"></a>
<button id="goTo">Stackoverflow</button>
Is it possible?
Maybe like this :
$(document).ready(function(){
$("#goTo").on('click',function(e){
e.preventDefault();
window.location = $("#stack").attr('href');
});
});
Add simple jquery to relay the click on the button. You can leave the a link out.
$("#goTo").click(function(){
window.location = "http://stackoverflow.com/";
}
How do I unbind the window when clicking an anchor tag with a unique ID? I am trying to use beforeunload so that when a user tries to navigate away from the page, they get a prompt asking to confirm they want to do so, but there is an anchor tag on the page that I would like to have not make this occur when clicked. It currently pops up the alert box because of navigating away from the page, but I want to create an exception for this anchor tag. How would I do this? I have tried unbinding onbeforeunload when a user clicks the anchor tag, but I believe my code might be wrong. any suggestions as to a fix for this? I do not understand binding and unbinding very well, so please be patient with me.
Thanks.
this is the code for what I am trying to do:
$('#catshopbuy').click(function(){
$(window).unbind('beforeunload');
});
Rest of the jQuery:
$(window).bind('click', function(event) {
if(event.target.href) $(window).unbind('beforeunload');
});
$(window).bind('beforeunload', function(event) {
$('div.offerWindow').css("visibility", "visible");
return 'Press "Stay on Page" and get a special offer!';
});
$('#catshopbuy').click(function(){
$(window).unbind('beforeunload');
});
It should be $(window).unbind('beforeunload');.
So something like this:
$(function() {
$(window).bind('beforeunload', function() {
return 'Press "Stay on Page" and get a special offer!';
});
$('#catshopbuy').click(function(){
$(window).unbind('beforeunload');
});
});
I have a webpage which contains one section called 'answer'. The 'answer' section should be hidden until users click the 'show-answer' hyper link.
So I use JQuery toggle command to achieve this:
$('.show-answer').toggle(function() { show_answer ...} ,
function() {hide_answer ...} )
It works well by itself.
However, I got a problem when I add another form on the same page. When the form is submitted, I redirect it to this page with an anchor "#xxx" appended in the end.
Then I found that the toggle function got triggered unexpectedly. Basically, if the 'answer' section is hidden before the form submitted, it becomes visible after the browser is redirected to the page.
May be using a click handler will help you
$(document).ready(function(){
$('.answer').on('click', function(e){
e.preventDefault();
$('.show-answer').toggle('show');
//Or use the following
//$('.show-answer').slideToggle();
});
});
A fiddle is here.
Here's what I want to achieve:
When an HTML link is clicked, I want to animate it before leaving the page
If the link is opened in a new window/tab, the animation should not take place
How on earth do I achieve this?
You could use javascript
$(function(){
$(".btn").bind("click",function(){
$(this).animate({'left': '100px'}, 100, function(){
window.location.href = index.html
})
})
})
But you'll have to stop the default action if your button is a link.
You'll need to capture the click event, prevent the default action, do the animation, then load the new page.
If using jquery (Available as a jsfiddle):
$('a').click(function (event) {
event.preventDefault();
$(this).animate({
//whatever
}, function() {
location.href = $(this).attr("href");
});
});
Update: Here's the new jsfiddle that accounts for the situation mentioned in the comments, go there for the updated code. The trick is to look for the keypress of ctrl or command, and abort the newly defined animated click handler if either key is pressed.
Note: The window needs focus before it can detect a keypress, in jsfiddle, that means the frame needs focus before it'll work.