Задать вопрос

Buck

Лайки

  • Как добиться такого эффекта при наведении?

    Get-Web
    @Get-Web Куратор тега CSS
    Front-End Developer
    Интересная задача. В общем весь фокус в том, что поверх видимых карточек, лежит точно такая же сетка с невидимыми карточками у которых есть только синий border. На сетку, которая лежит сверху, наложена маска:
    mask: radial-gradient(320px 320px at var(--x) var(--y), black 1%, transparent 40%);

    То есть у всего блока с синими border остается видимым только радиальный градиент в 320px, а x и y это координаты курсора. Ну и грубо говоря получается такая картина:

    Ответ написан
    4 комментария
    4 комментария

  • Как записывать данные в texarea из CKEditor 5 Balloon Block?

    @sequelone Автор вопроса
    Разобрался в проблеме. Не в ту секцию код пихал. Вот рабочий вариант:

    <script src="https://cdn.ckeditor.com/ckeditor5/21.0.0/balloon-block/ckeditor.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/21.0.0/balloon-block/translations/ru.js"></script>
<script>
  const textarea = document.querySelector( '#editor' );
	BalloonEditor.create( textarea , {
	      language: 'ru',
        removePlugins: [ 'Table' ],
        toolbar: [ 'bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote' ]
    })
		.then( editor => {
			window.editor = editor;
			
			editor.model.document.on( 'change:data', ( evt, data ) => {
            console.log( data );
            $('textarea#tickets-editor').html( editor.getData() );
        } );
		} )
		.catch( error => {
			console.error( 'There was a problem initializing the editor.', error );
		} );
</script>


    Тоесть надо было в секцию .then( editor => {...} код добавить:

    .then( editor => {
			window.editor = editor;
			
			editor.model.document.on( 'change:data', ( evt, data ) => {
            console.log( data );
            $('textarea#tickets-editor').html( editor.getData() );
        } );
		} )
    Ответ написан
    Комментировать
    Комментировать

  • Как в NextJs объединить два ajax запроса в getInititalProps?

    @dmitriu256 Автор вопроса
    Мой вариант решения
    Post.getInitialProps = async ({query, req}) => {
   //console.log(query);
    if(!req){
        return ({post: null})
    }

    const postApi = await fetch(`https://jsonplaceholder.typicode.com/posts/${query.id}`);
    const post = await postApi.json();

    //Получаем id пользователя
    const userId = post.userId;

    const userApi = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
    const user = await userApi.json();
   
    return ({post: post, name: user.username});
}
    Ответ написан
    Комментировать
    Комментировать

  • Как скрыть option в select при выборе другого option в select?

    0xD34F
    @0xD34F Куратор тега JavaScript
    О каких select'ах идёт речь:

    const first = document.querySelector('#first');
const second = document.querySelector('#second');

    Кого надо скрывать - объект, ключами которого являются значения option'ов первого select'а (эти выбираем), а значениями - массивы значений option'ов второго select'а (а эти прячем):

    const hideOptions = {
  1: [ '12', '14', '15' ],
  2: [  '1', '11', '16' ],
};

    Слушаем на первом select'е событие change, переключаем видимость optoin'ов во втором:

    first.addEventListener('change', function() {
  Array.prototype.forEach.call(second, function(n) {
    n.hidden = this.includes(n.value);
  }, hideOptions[this.value] ?? []);
});

    или

    .hidden {
  display: none;
}

    first.onchange = e => {
  const toHide = hideOptions[e.target.value];
  for (const n of second) {
    n.classList.toggle('hidden', toHide?.indexOf(n.value) > -1);
  }
};
    Ответ написан
    3 комментария
    3 комментария