Impossible de sur-ligner dans le custom code, vous aussi ?

Hello tout le monde, j’espère que vous allez bien 🙂
Petit problème sur une font intégrer en API avec Adobe Fonts.
J’ai vraisemblablement un problème de line-height, que je n’arrive absolument pas à régler. Sans parler du rendu complètement dégueulasse sur des paragraphes “classiques”.
Je précise mais sur Mac ( aucun problème ), c’est uniquement sur PC qu’il y a ce problème 😕
J’ai déjà essayé la technique de Timothy Tricks mais ça ne marche pas ( cf la vidéo )

Yo

Je suis le seul a avoir des border bizarre sur des éléments ?
J’ai beau créer d’autres div vide et juste ajouter une border au pif, j’ai des tirets et d’autre truc dedans qu’on peut voir sur le screen

Bonjour à tous,

J'ai un petit souci de rendu de font entre figma et Webflow
La première capture est le figma, la seconde l'inté dans Webflow. Les 2 utilisent la même font, à savoir Roboto Mono (celle que j'ai intégrée dans Webflow m'a été fournie par le client, c'est donc celle qu'il a utilisée dans Figma).

Avez-vous déjà eu ce genre de problème ? Perso c'est la première fois. J'ai souvent des rendus légérement différents au niveau des weight, mais la c'est quand même assez flagrant

Salut tout le monde !
J’ai un petit pbm sur ce site : https://www.tamias.com/fr
Je n’arrive pas à caler ma vidéo (qui actuellement a un margin top négatif) en fonction des tailles d’écrans)
Soit la vidéo passe au dessus du texte, soit j’ai un énorme espace...

ça me rend dingue, surtout que pour mieux gérer la chose je me suis dis que j’allais ajouter des breakpoint en plus, mais au final je pense que je me suis tirée une balle dans le pied 😞

Merci tout le monde !

Hello 🤙
Je débarque sur GSAP avec une animation au scroll toute simple mais ça fait 2 semaines que je n’ai pas réussi à trouver la solution 😅 Les markers de déclenchement ne sont pas alignés avec “start” et “end” qui débarquent avant la section désignée ! Intuitivement je dirais que c’est lié à quelque chose de mal agencé dans mon Webflow. La dinguerie c’est qu’on a testé avec Théo et l’animation fonctionne parfois au premier chargement mais pas en suite !

Bref si vous avez un peu de temps à m’accorder, merci d’avance.
https://mobrand-studio.webflow.io/projets/leica
https://preview.webflow.com/preview/mobrand-studio?utm_medium=preview_link&utm_source=[…]emId=6703154fed5bb8f328a54015&locale=fr-FR&workflow=preview

Hello tout le monde,
Est-ce que quelqu'un a déjà custom le curseur d'une lightbox ouverte ? Je galère à ce que ce soit fluide et à enlever le custom quand je ferme la lightbox 😂
Si vous avez des tutos, je suis preneuse ! C'est chatgpt qui m'a aidé pour le moment :)

Hello tout le monde!
Est ce quelqu’un a déjà eu un bug de scroll de la partie editor sur des sites avec Lénis scroll ?

Hello,

J’ai besoin d’un expert en JavaScript. Actuellement, j’ai un flux JSON sur chaque calendrier qui vérifie si la disponibilité est supérieure à 0. Si c’est le cas, la case est colorée en bleu. Pour chaque calendrier, j’ai défini un code pour l’aéroport de départ (« departureAirportCode ») et un code pour l’aéroport d’arrivée (« arrivalAirportCode ») pour aller chercher le flux JSON du vol (https://preprod4.ttinteractive.com/Zenith/FrontOffice/LaCompagnie/BookingEngine/GetAvailabilitySummary?departureAirportCode=${departureAirportCode}&arrivalAirportCode=${arrivalAirportCode}&startDate=2024-10-01&endDate=2024-10-30&prbdCodes=V,N,X)

Cependant, la cliente souhaite que l’on puisse sélectionné dans chaque dropdown afin de changer la ville de départ et la ville de retour. J’ai attribué une valeur à chaque choix. Par exemple, si l’on sélectionne Orly, le code « ORY » est utilisé pour le « departureAirportCode ». Dans ce cas, le « arrivalAirportCode » doit automatiquement être défini sur « ERW ». De même, lorsqu’on sélectionne New York, cela doit automatiquement mettre « arrivalAirportCode » à ORY .

Merci !

<!-- Div où le calendrier sera affiché -->
<div id='calendar'></div>
<div id='calendar2'></div>




   <script>
           document.addEventListener('DOMContentLoaded', function() {
            var selectedDate1 = null;
            var selectedDate2 = null;

            var calendar1 = initializeCalendar('calendar', 'ORY', 'EWR', function(date) {
                selectedDate1 = date;
                updateSelectedDates();
            });

            var calendar2 = initializeCalendar('calendar2', 'EWR', 'ORY', function(date) {
                selectedDate2 = date;
                updateSelectedDates();
            });

            var bookingButton = document.getElementById('bookingButton');
            
            if (bookingButton) {
                bookingButton.addEventListener('click', function(event) {
                    event.preventDefault();
                    if (selectedDate1 && selectedDate2) {
                        const url = buildBookingURL(selectedDate1, selectedDate2);
                        window.location.href = url;
                    } else {
                        alert('Veuillez sélectionner les dates de départ et de retour.');
                    }
                });
            } else {
                console.error("Le bouton de réservation n'a pas été trouvé dans le DOM.");
            }

            function initializeCalendar(elementId, departureAirportCode, arrivalAirportCode, onDateSelect) {
                var calendarEl = document.getElementById(elementId);

                var calendar = new FullCalendar.Calendar(calendarEl, {
                    initialView: 'dayGridMonth',
                    selectable: true,
                    unselectAuto: false,
                    selectMirror: true,
                    firstDay: 1,
                    locale: 'fr',
                    dayHeaderFormat: { weekday: 'narrow' },
                    headerToolbar: {
                        left: 'prev',
                        center: 'title',
                        right: 'next'
                    },
                    height: 'auto',
                     longPressDelay: 1,
                    dateClick: function(info) {
                        handleDateSelection(info.date, calendar);
                        onDateSelect(info.date);
                    },
                    datesSet: function() {
                        updateSelectedDateDisplay(calendar);
                    },
                    touchstart: function(info) {
                        handleDateSelection(info.date, calendar);
                        onDateSelect(info.date);
                    }
                });

                function handleDateSelection(date, calendar) {
                    clearSelectedDate(calendar);
                    updateSelectedDateDisplay(calendar, date);
                }

                function clearSelectedDate(calendar) {
                    calendar.el.querySelectorAll('.selected-date').forEach(el => {
                        el.classList.remove('selected-date');
                    });
                }

                function updateSelectedDateDisplay(calendar, date) {
                    if (date) {
                        var dateElement = calendar.el.querySelector('.fc-day[data-date="' + date.toISOString().split('T')[0] + '"]');
                        if (dateElement) {
                            dateElement.classList.add('selected-date');
                        }
                    }
                }

                calendar.render();
                fetchFlightsAndColorCalendar(calendar, departureAirportCode, arrivalAirportCode);

                return calendar;
            }

            function fetchFlightsAndColorCalendar(calendar, departureAirportCode, arrivalAirportCode) {
                const url = `<a target="_blank" rel="noopener noreferrer" href="https://preprod4.ttinteractive.com/Zenith/FrontOffice/LaCompagnie/BookingEngine/GetAvailabilitySummary?departureAirportCode=${departureAirportCode}&arrivalAirportCode=${arrivalAirportCode}&startDate=2024-10-01&endDate=2024-10-30&prbdCodes=V,N,X">https://preprod4.ttinteractive.com/Zenith/FrontOffice/LaCompagnie/BookingEngine/GetAvailabilitySummary?departureAirportCode=${departureAirportCode}&arrivalAirportCode=${arrivalAirportCode}&startDate=2024-10-01&endDate=2024-10-30&prbdCodes=V,N,X</a>`;
                fetch(url)
                    .then(response => response.json())
                    .then(data => {
                        colorCalendarDays(data, calendar);
                    })
                    .catch(error => console.error('Erreur lors de la récupération des données:', error));
            }

            function colorCalendarDays(data, calendar) {
                const availableDates = data.Response.Days
                    .filter(item => item.Availability > 0)
                    .map(item => ({
                        start: item.Date.split('T')[0],
                        display: 'background',
                        backgroundColor: getColorByAvailability(item.Availability),
                        classNames: ['tarif-promo']
                    }));
                calendar.removeAllEvents();
                calendar.addEventSource({ events: availableDates });
            }

            function getColorByAvailability(availability) {
                return availability > 0 ? '#99BFE1' : 'white';
            }

            function updateSelectedDates() {
                console.log('Dates sélectionnées:');
                console.log('Calendrier 1 (Départ):', selectedDate1 ? formatDate(selectedDate1) : 'Aucune date sélectionnée');
                console.log('Calendrier 2 (Retour):', selectedDate2 ? formatDate(selectedDate2) : 'Aucune date sélectionnée');
                
                if (bookingButton) {
                    if (selectedDate1 && selectedDate2) {
                        bookingButton.disabled = false;
                    } else {
                        bookingButton.disabled = true;
                    }
                }
            }

            function buildBookingURL(outboundDate, inboundDate) {
                const baseUrl = '<a target="_blank" rel="noopener noreferrer" href="https://fo-emea.ttinteractive.com/Zenith/FrontOffice/LaCompagnie/fr-FR/BookingEngine/SearchResult">https://fo-emea.ttinteractive.com/Zenith/FrontOffice/LaCompagnie/fr-FR/BookingEngine/SearchResult</a>';
                const params = new URLSearchParams({
                    OutboundDate: formatDate(outboundDate),
                    InboundDate: formatDate(inboundDate),
                    OriginAirportCode: 'ORY',
                    DestinationAirportCode: 'EWR',
                    Currency: 'EUR'
                });

                // Ajouter les informations des voyageurs
                const travelers = [
                    {key: 'AD', index:0, value: document.getElementById('adulte').value},
                    {key: 'CHD', index:1, value: document.getElementById('enfant').value},
                    {key: 'INF', index:2, value: document.getElementById('bebe').value},
                ];

                travelers.forEach((traveler, index) => {
                    if (traveler.value > 0) {
                        params.append(`TravelerTypes[${index}].Key`, traveler.key);
                        params.append(`TravelerTypes[${index}].Value`, traveler.value);
                    }
                });

                return `${baseUrl}?${params.toString()}`;
            }

            function formatDate(date) {
                const d = new Date(date);
                d.setMinutes(d.getMinutes() - d.getTimezoneOffset());
                return d.toISOString().split('T')[0];
            }
        });
    </script>