I have a carousel with 3 panes controlled by left and right arrows. I want the left arrow to disable on pane 1 and the right arrow to disable on pane 3, so the carousel doesn't loop round itself.
I have written a button disable function that appears to work, but won't when I try to call it from the correct pane.
Here is the javascript which advances the carousel pane, called on the right arrow button click:
if(currentPane==1){
currentPane=2;
$("#carouselDots").css('background-image', 'url(images/dots_2.png)');
}
else if(currentPane==2){
currentPane=3;
$("#carouselDots").css('background-image', 'url(images/dots_3.png)');
disableRButton();
}
here is the disableRButton function:
function disableRButton()
{
$("#carouselBtn").button("disable");
}
I also want the button to change its BG img when disabled this is what i'm trying to do in CSS:
.carouselBtn:disabled{
background:transparent url('images/carouselArrowDisabled.png')no-repeat;}
Any Ideas on why the button is not disabling would be great. Also, what is the correct way to use this disabled button tag in CSS, or is it better to change the button's BG img in javascript?
I don't think jquery has a button function that takes a string saying disabled. You need to add a disabled attribute to the button to disable it.
For example
$("my-button").attr("disabled", true);
You are using the :disabled selector correctly, but the first part of the selector is wrong I think. It should start with a . if carouselBtn is the name of a class of # if it is the name of the ID. You currently mix these in your different examples.
If you are using the jQuery UI Button Widget, you have to do it this way:
$("#carouselBtn" ).button({disabled:true});
Most likely it will work when you write "disabled" instead of "disable".
you set attr disable thats enough to avoid the clicks after using jquery to set background
function disableRButton()
{
$("#carouselBtn").attr("disabled",true);
$("#carouselBtn").css("background-image",'images/carouselArrowDisabled.png');
}
Related
I am very new to JS. How do I add onclick event to magento Advanced options so when selected first option it should automatically scroll (jump) to next option without having to manually scroll for the next option. Here is an example: Link to Example
Since you tagged 'jQuery' in your post I'm going to assume you want to use that.
Below is the code that would work on the example you gave, but it (especially the selectors) will be different for other templates.
// Click event handler
$('.optionblock input').click(function(){
// Check if there is a next option block
var $next = $(this).parents('.optionblock').next('.optionblock');
if($next.length) {
// Set scroll position to the next option block
$(window).scrollTop($next.offset().top);
}
});
This is just to get the idea. I didn't consider crossbrowser support and animated scroll effects.
Update: here you have a working example with the animated scroll effect: http://jsfiddle.net/66AmA/
Update 2: For your specific HTML-structure the code would be like this: http://jsfiddle.net/FFu6n/
Try to define "onChange" event to focus next input (or use other condition than onchange):
document.getElementById("myForm").elements[next].focus();
I am developing a website and I have used color box to show my image galleries, when click over each images color box will be appear. what i am asking for how can i disable or remove next and previous button from color box window? and also disable go to next image function from colorbox when we click over image.?
i had tried following changes: preloading: true, to preloading: false, but it's not working for me
In case someone still need it.
Set rel: 'nofollow' to disable grouping.
In your colorbox settings set loop to false
http://www.jacklmoore.com/colorbox check the loop feature on this page.
i have find out the solutions, $(".group1").colorbox({rel:'group1'}); change to $(".group1").colorbox({});
it will be disable next and previous buttons also disable image link to next one
I have a custom table which I'd like to use as the DropDown portion as a DropDownList.
Ideally, when users click on a DropDownList, it should show the custom table instead of the usual drop down. I thought it'd be easy to prevent the dropdown from opening without disabling the DropDownList control, however that doesn't appear to be the case.
Is there an easy way to prevent a DropDownList from opening without disabling it?
Edit: This has to work for an embedded IE 7 web browser, and e.preventDefault() does not work in that browser version
You can do something like this:
Basically, I have positioned an invisible div over the dropdown to block it, and you can handle the click with the onclick of the masking div.
EDIT: I have updated this http://jsfiddle.net/EdM7B/1/
<div id='mask' onclick='alert("clicked");' style='width:200px; height:20px; position:absolute; background:white;filter:alpha(opacity=0);'></div>
<select id='selectList' show=1 style='width:200px; height:20px;'>
<option>Test</option>
</select>
I had to use a sort of hack because IE doesn't seem to render divs properly that have no background colour set, so it wasn't working correctly. This works in my IE7.
If you want it to work in all browsers you'll need to add chrome/firefox opacity CSS or have some IE only CSS to apply background colour.
I think due to the way it's positioned above, the opacity is actually not working properly because the element is positioned absolutely, either way it seems to work. I originally had it as opacity 1, but that sounds wrong to me as we want it invisible, so I changed it to 0.
It's possible to stop the dropdownlist from showing by using jQuery's event.preventDefault in the mousedown event (demo: http://jsfiddle.net/RCCKj).
Also see this related question: stop chrome to show dropdown list when click a select
Put it inside a div like this:
<div id="dllDiv" style="width:200px;height:200px;">
< asp:DropDownList ID="DropDownList1" runat="server" style="z-index:-1000px;pointer-events:none;">
< /asp:DropDownList>
</div>
You should set the css property pointer-events to none, then you can show your table hidden in a div or loaded it by using ajax, something like this:
(document).ready(function() {
$("#dllDiv").click(function() {
alert('adasd');
});
});
Have you thought about using a mega menu for this, you can put anything you want in the dropped down portion - for example your table
I'm using the 0.3 version of the jQuery jCarousel script to display three carousels on the webpage I'm working on. Those three carousels work just fine.
The trouble is : you can't use them properly using the keyboard.
If you tab through the page, the focus goes to the first link of the first item in the carousel, even if this item is not visible ! (For example : click on a "next" link in one of the carousels, then use the tab key to browse : the focus will go to a link which is not visible inside of the carousel).
If you keep using the "tab" key, the focus will successively go to all the links of all the items in the carousel.
Instead of that : the focus should go to the first link of the first visible item ; then, if the last link of the last visible item is reached, then the focus should go out of the carousel (the next link outside of it, in fact).
A solution could be to use tabindex... but some parts of the page are shared with other pages of the website, so I just can't use tabindex in all the links of all my pages...
Instead of that, I had tried things like this :
$("#carousel-editos li a").focusin(function () {
$("#carousel-editos li.jcarousel-item-first .post-title a").focus();
return false;
});
but then it prevents any further use of the "tab" key...
I hope this is clear... Thanx for any help !
I think you need a combination of the answers that you've already provided. It seems like you should be able to use Javascript to dynamically set tabindex attributes on the HTML that you need to be tabbable (heh, new word). I'm thinking of something like this:
On page load, find all visible items in the carousel. Use jQuery to set the tabindex property for each item that you want in the tab cycle.
Assign tabindex properties to all other links on the page that you want to cycle through.
Add some jQuery to modify the tabindex attributes when the user changes the items in the carousel (click the next/prev buttons).
It would be much easier to help you if you made a simplified example in jsFiddle.
On the carousel createEnd and scrollEnd functions you can reset the contents of .jCarousel so that only the visible carousel items are "tabbable". I have done that in my code as follows:
var bannerSlider_scrollEnd = function(event, carousel) {
var $carousel = carousel.element(),
$items = carousel.items(),
$bannerContent,
$visibleItemsContent = carousel.visible().find('.bannerContent');
$items.each(function (index) {
$bannerContent = $(this).find('.bannerContent');
disableTabbing($bannerContent);
});
reenableTabbing($visibleItemsContent);
$visibleItemsContent.find(':focusable').eq(0).focus();
};
The disableTabbing($container) and reenableTabbing($container) lines refer to helper functions I coded into my site which basically find all :focusable elements in a given container and set the tabindex to "-1", then "0" respectively.
After this processes, users will be left tabbing only through visible carousel items instead of all carousel items.
i am working in html for a custom drop down menu. I want to click the arrow and the list to open the hidden options, but nothing happens when i click the arrow? I do not know what is wrong. http://jsfiddle.net/Hunter4854/rrmJR/1/
The easiest solution might be to just bind the click event on the arrow so that it triggers the click even of the drop down like this:
$('.arrow').click(function() {
$('.custom-select').trigger('click')
});
jsFiddle example.
BTW, any reason why you're using such an old version of jQuery?
I simply put your .arrow div into the custom-select div and it's working. It doesn't really matter where to put your arrow since you position it absolutely) The working example: http://jsfiddle.net/skip405/rrmJR/6/