I would like the scroll bar (from jScrollPane) to show up with every tab (from Soh Tanaka). Currently, it shows up for the first tab, but it falls back to the browser default for the second, third, fourth tabs…
See my live example here: jScrollPane and Tabs, almost working together
How can I get the scroll bar to display on every tab? Thanks!
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($) {
jQuery('.scroll-pane').jScrollPane({
verticalDragMinHeight: 20,
verticalDragMaxHeight: 20,
horizontalDragMinWidth: 20,
horizontalDragMaxWidth: 20
});
});
<script type="text/javascript">
$(document).ready(function() {
//When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});
You need to re-initialise jScrollPane after you have shown each tab. A simple example here:
http://jscrollpane.kelvinluck.com/invisibles.html
In your case you could try:
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn().jScrollPane(); //Fade in the active ID content and apply jScrollPane
return false;
});
(I somehow posted this answer to the wrong question yesterday - so sorry for the delay in answering!)
Related
I have three buttons and three sections, which contain the menu. For each button one of the three specific sections should be displayed. When you move over the button, the corresponding section (menu) should be displayed, but then disappear again. When clicking the section should be permanently displayed and fixed.
Here is the CSS code I have. Unfortunately the point with the disappearance, as soon as you leave the button does not work.
Unfortunately, I have no HTML code, because I do it through a theme builder and would like to add accordingly only the CSS code.
<script>
var divs
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
btn1.onmouseover = function(event){
event.preventDefault();
toggleDivs("sect1");
};
btn2.onmouseover = function(event){
event.preventDefault();
toggleDivs("sect2");
};
btn3.onmouseover = function(event){
event.preventDefault();
toggleDivs("sect2");
};
function toggleDivs(s){
//reset
document.getElementById("sect1").classList.remove("shown");
document.getElementById("sect2").classList.remove("shown");
document.getElementById("sect3").classList.remove("shown");
//show
document.getElementById(s).classList.add("shown");
}
//force button1 state initialise, if required
//btn1.focus();
//btn1.click();
</script>
<style>
.elementor-editor-active .hidden{
display:block;
}
.hidden{
display:none;
}
.shown{
play: block !important;
}
</style>
Hi I'm currently working on a reactjs web application and trying to provide accessibility features in web pages. In one page there's a drawer popping up once a button clicked, and I wanted to make sure the tab navigation only through the drawer without going outside of the drawer when it expanded. How can I do that?
Here I have attached the screen shot of the page including the expanded drawer.
I'd recommend writing a keyboard handler in JavaScript to restrict tab order to the pop-out "drawer" (or modal as I'd call it).
Hidde de Vries wrote an excellent short tutorial on this, see here.
I adapted this very slightly:
// Function to trap tab movement to a specific container element
trapFocusInArtworkModal = function (el) {
// Gather all focusable elements in a list
var query = "a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type='email']:not([disabled]), input[type='text']:not([disabled]), input[type='radio']:not([disabled]), input[type='checkbox']:not([disabled]), select:not([disabled]), [tabindex='0']"
var focusableEls = el.querySelectorAll(query);
var firstFocusableEl = focusableEls[0];
var lastFocusableEl = focusableEls[focusableEls.length - 1];
// Add the key listener to the modal container to listen for Tab,
// Left Arrow, Right Arrow, Enter and Escape
el.addEventListener('keydown', function(e) {
var isTabPressed = (e.key === "Tab" || e.keyCode === KEYCODE_TAB);
var isEscPressed = (e.key === "Escape" || e.keyCode === KEYCODE_ESCAPE);
// Define behaviour for Tab or Shift+Tab
if (isTabPressed) {
// Shift+Tab
if (e.shiftKey) {
if (document.activeElement === firstFocusableEl) {
// Move keyboard focus to the last focusable element in the container
lastFocusableEl.focus();
e.preventDefault();
}
}
// Tab
else {
if (document.activeElement === lastFocusableEl) {
// Move keyboard focus to the first focusable element in the container
firstFocusableEl.focus();
e.preventDefault();
}
}
}
// Define behaviour for Escape
if (isEscPressed) {
// This will close out the modal when the Escape key is pressed
// by clicking the modal's close link/button
el.querySelector("a").click();
}
});
};
// Find the modal
var modal = document.querySelector("[role='dialog']");
// Attach the trap keyboard function to the modal
trapFocusInArtworkModal(modal);
You can then attach the code to run when the page has loaded.
I am doing JSF primefaces project.We have primefaces file upload component in a div id="dropBox" which accepts drag and drop files.Normally if you drop a file anywhere on the page, browser opens it up.I want to disable this behavior and allow drops only in the div dropBox. following code disables file drag and drops on entire page .
$(document).bind({
dragenter: function (e) {
e.stopPropagation();
e.preventDefault();
var dt = e.originalEvent.dataTransfer;
dt.effectAllowed = dt.dropEffect = 'none';
},
dragover: function (e) {
e.stopPropagation();
e.preventDefault();
var dt = e.originalEvent.dataTransfer;
dt.effectAllowed = dt.dropEffect = 'none';
}
});
I am trying to build a site that dynamically loads the pages. Certain pages have extra javascript that they load. I need to be able to unload this javascript when the page changes. Is that possible? My code so far (work in progress still):
//When page loads...
$("ul.toggle li:first").addClass("active").show(); //Activate first tab
var taburl = $("ul.toggle li:first a").attr("href").substr(1);
$(document).ready(function(e) {
$.ajax({
type: "POST",
url: taburl+'.php',
data: '',
dataType: "html",
success: function(d){
$('#main').html(d);
}
});
});
//On Click Event
$("ul.toggle li").click(function() {
$("ul.toggle li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$("#main").fadeOut(500);
$("#main").html('');
var activeTab = $(this).find("a").attr("href").substr(1) + '.php'; //Find the href attribute value to identify the active tab + content
$("#main").load(activeTab).fadeIn(500); //Fade in the active ID content
});
Let me know if any other info is needed.
WHAT I HAVE:
3 buttons
when one is clicked it gets hidden and its corresponding box is shown
in each box is a link to close the box
when clicked the box hides
WHAT I NEED:
when the close link is clicked and the box closes, i need the button to be shown again
SUMMARY:
button click toggles button hide / box show, close click toggles box hide / button show
current code
you just needed to add $('.showSingle').removeClass('selected'); to the $('.hide').click() function and add a return false at the end of it so that the link's href doesnt get called (putting the # in the url) I also rewrote the first click event so that its consistent with the second.
$(function(){
$('.showSingle').click(function() {
$(this).addClass('selected').siblings().removeClass('selected');
$('.targetDiv').hide();
$('#div' + $(this).data('target')).show();
});
$('.hide').click(function() {
$('.targetDiv').hide();
$('.showSingle').removeClass('selected');
return false;
});
});
When you click on each button you have a call that adds the class 'selected' to the button pressed and removes the same from all other buttons. This class is making the button hidden. What you need to do then is when the close link is pressed, remove the class from all buttons.
$('.hide').click(function() {
$('.targetDiv').hide();
$('.showSingle').removeClass('selected');
});
Try this.
$(window).load(function(){
$('.showSingle').on('click', function () {
$(this).addClass('selected').siblings().removeClass('selected');
$('.targetDiv').hide();
var srcId = $(this).data('target');
$('#div' + srcId).show();
$('.targetDiv').click(function(){
$('.targetDiv').hide();
$(".showSingle[data-target='" +srcId +"']").show();
});
});
Here's a code that work with your current HTML. It comes with two options, hide the button text or hide the button itself. Also as a side note, if you use on() keep using it--don't switch to .click()
JSFiddle Demo
$(function() {
$('.targetDiv').hide(); //Start off with boxes hidden
$('.showSingle').on('click', function() { //Link clicked
$('.targetDiv').hide(); //Hide any open boxes
$('.selected').removeClass('selected'); //Show all buttons
//$(this).children('div').addClass('selected'); //Hide button text
$(this).addClass('selected'); //Hide button box
var id = $(this).data('target'); //Get desired target
$('#div'+id).show(); //Show target box
return false; //Stop link from going anywhere
});
$('.hide').on('click', function() {
$('.targetDiv').hide(); //Hide any open boxes
$('.selected').removeClass('selected'); //Show all buttons
return false; //Stop link from going anywhere
});
});