MediaWiki:Common.js: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary Tag: Reverted |
||
Line 20: | Line 20: | ||
// Update the fixed column content with card information | // Update the fixed column content with card information | ||
var entryNumber = $(this).find('.entry-number').text(); | var entryNumber = $(this).find('.entry-number').text(); | ||
var people = $(this).find('.people').text(); | var people = $(this).find('.people').text(); | ||
// Update the fixed column content | // Update the fixed column content | ||
$('#article-title').html('<p class="article-entry-number">' + entryNumber + '</p><p class="article-people">' + people + '</p>'); | $('#article-title').html('<p class="article-entry-number">' + entryNumber + '</p><p class="article-people">' + people + '</p>'); | ||
// Apply the fade-out effect to the #list element | // Apply the fade-out effect to the #list element | ||
Line 62: | Line 37: | ||
$('#show-article-wrapper').css('display', 'none'); | $('#show-article-wrapper').css('display', 'none'); | ||
} | } | ||
}); | |||
// Add hover effect using JavaScript | |||
$('#show-article-wrapper').on('mouseenter', function () { | |||
$(this).addClass('hovered'); | |||
}).on('mouseleave', function () { | |||
$(this).removeClass('hovered'); | |||
}); | }); | ||
} else { | } else { |
Revision as of 12:35, 9 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'); // 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 $('#show-article-wrapper').css('display', 'block'); // Update the fixed column content with card information var entryNumber = $(this).find('.entry-number').text(); var people = $(this).find('.people').text(); // Update the fixed column content $('#article-title').html('<p class="article-entry-number">' + entryNumber + '</p><p class="article-people">' + people + '</p>'); // Apply the fade-out effect to the #list element $('#list').addClass('fade-out'); }); // Attach a click event listener to close the fixed column $('#show-article-wrapper').on('click', function (event) { // Hide the fixed column when clicked outside or on the close button if (event.target.id === 'close-button' || !$.contains(this, event.target)) { // Remove the fade-out class when hiding the fixed column $('#list').removeClass('fade-out'); $('#show-article-wrapper').css('display', 'none'); } }); // Add hover effect using JavaScript $('#show-article-wrapper').on('mouseenter', function () { $(this).addClass('hovered'); }).on('mouseleave', function () { $(this).removeClass('hovered'); }); } else { console.log('No cards found.'); } });