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.'); } });