MediaWiki:Common.js: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| Line 5: | Line 5: | ||
// Find all elements with class "card" | // Find all elements with class "card" | ||
var cards = $('.card'); | var cards = $('.card'); | ||
var showArticleWrapper = $('#show-article-wrapper'); | |||
// Log a message if cards are found | // Log a message if cards are found | ||
| Line 16: | Line 17: | ||
// Show the fixed column | // Show the fixed column | ||
showArticleWrapper.css('display', 'block'); | |||
// Update the fixed column content with card information | // Update the fixed column content with card information | ||
// ... (your existing code for updating content) | |||
// Apply the fade-out effect to the #list element | // Apply the fade-out effect to the #list element | ||
| Line 56: | Line 27: | ||
// Attach a click event listener to close the fixed column | // Attach a click event listener to close the fixed column | ||
$( | $(document).on('click', function (event) { | ||
// | // Check if the click is outside of the #show-article-wrapper | ||
if (event.target. | if (!showArticleWrapper.is(event.target) && showArticleWrapper.has(event.target).length === 0) { | ||
// Remove the fade-out class when hiding the fixed column | // Remove the fade-out class when hiding the fixed column | ||
$('#list').removeClass('fade-out'); | $('#list').removeClass('fade-out'); | ||
showArticleWrapper.css('display', 'none'); | |||
} | } | ||
}); | }); | ||
// Hover effect for scrolling | // Hover effect for scrolling | ||
showArticleWrapper.hover(function () { | |||
// On hover, enable scrolling on #show-article-wrapper | // On hover, enable scrolling on #show-article-wrapper | ||
$(this).css('overflow-y', 'auto'); | $(this).css('overflow-y', 'auto'); | ||
Revision as of 11:27, 10 January 2024
$(document).ready(function () {
// Log a message to the console
console.log('JavaScript is working!');
// Find all elements with class "card"
var cards = $('.card');
var showArticleWrapper = $('#show-article-wrapper');
// Log a message if cards are found
if (cards.length > 0) {
console.log('Found all cards:', cards);
// Attach a click event listener to each card
cards.on('click', function () {
// Log a message when a card is clicked
console.log('Clicked on card:', this);
// Show the fixed column
showArticleWrapper.css('display', 'block');
// Update the fixed column content with card information
// ... (your existing code for updating content)
// Apply the fade-out effect to the #list element
$('#list').addClass('fade-out');
});
// Attach a click event listener to close the fixed column
$(document).on('click', function (event) {
// Check if the click is outside of the #show-article-wrapper
if (!showArticleWrapper.is(event.target) && showArticleWrapper.has(event.target).length === 0) {
// Remove the fade-out class when hiding the fixed column
$('#list').removeClass('fade-out');
showArticleWrapper.css('display', 'none');
}
});
// Hover effect for scrolling
showArticleWrapper.hover(function () {
// On hover, enable scrolling on #show-article-wrapper
$(this).css('overflow-y', 'auto');
}, function () {
// On hover out, disable scrolling on #show-article-wrapper
$(this).css('overflow-y', 'hidden');
});
} else {
console.log('No cards found.');
}
});