• Как обрезать список не разделяя его(не руша dom узел ul)?

    SlavaMaxwell
    @SlavaMaxwell Автор вопроса
    0xD34F, ладно, уважаемый, спаибо и на этом)
    Написано
  • Как обрезать список не разделяя его(не руша dom узел ul)?

    SlavaMaxwell
    @SlavaMaxwell Автор вопроса
    0xD34F, мдэ, дерзкий куратор)
    Написано
  • Как обрезать список не разделяя его(не руша dom узел ul)?

    SlavaMaxwell
    @SlavaMaxwell Автор вопроса
    0xD34F это конечно немного получше, но реальный список вот, column-count не юзат дробное значение и column-count: 1,5 не поставить, это не весь список, на хабре ограничения
    <ul class="tabs__list-cars">
                            <div class="tabs__column">
                                <ul class="tabs__name-to-a">
                                    <li><a class="first-el" href="">Ac</a></li>
                                    <li><a href="">Acura</a></li>
                                    <li><a href="">Alfa Romeo</a></li>
                                    <li><a href="">Alpina</a></li>
                                    <li><a href="">Alpine</a></li>
                                    <li><a href="">Am General</a></li>
                                    <li><a href="">Ariel</a></li>
                                    <li><a href="">Aro</a></li>
                                    <li><a href="">Asia</a></li>
                                    <li><a href="">Aston Martin</a></li>
                                    <li><a href="">Audi</a></li>
                                    <li><a href="">Austin</a></li>
                                    <li><a href="">Autobianchi</a></li>
                                </ul>
                                <ul class="tabs__name-to-b">
                                    <li><a class="first-el" href="">Baltijaz Dzips</a></li>       
                                    <li><a href="">Bentley</a></li>
                                    <li><a href="">Bertone</a></li>
                                    <li><a href="">Bitter</a></li>
                                    <li><a href="">Bmw</a></li>
                                    <li><a href="">Brabus</a></li>
                                    <li><a href="">Brilliance</a></li>
                                    <li><a href="">Bud</a></li>
                                </ul>
                                <ul class="tabs__name-to-c">
                                    <li><a class="first-el" href="">Cadillac</a></li>     
                                    <li><a href="">Changanfeng</a></li>     
                                    <li><a href="">Chery</a></li>
                                    <li><a href="">Chevrolet</a></li>
                                    <li><a href="">Chrysler</a></li>
                                    <li><a href="">Citroen</a></li>
                                    <li><a href="">Cizeta</a></li>  
                                </ul>
                            </div>
                            <div class="tabs__column">
                                <!-- <ul class="tabs__name-to-c">
                                    <li><a href="">Changanfeng</a></li>     
                                    <li><a href="">Chery</a></li>
                                    <li><a href="">Chevrolet</a></li>
                                    <li><a href="">Chrysler</a></li>
                                    <li><a href="">Citroen</a></li>
                                    <li><a href="">Cizeta</a></li>
                                </ul> -->
                                <ul class="tabs__name-to-d">
                                    <li><a class="first-el" href="">Dacia</a></li>
                                    <li><a href="">Dadi</a></li>
                                    <li><a href="">Daewoo</a></li>
                                    <li><a href="">DAF</a></li>
                                    <li><a href="">Daihatsu</a></li>
                                    <li><a href="">Daimler</a></li>
                                    <li><a href="">Datsun</a></li>
                                    <li><a href="">De Tomaso</a></li>
                                    <li><a href="">Dolorean</a></li>
                                    <li><a href="">Deerways</a></li>
                                    <li><a href="">Dodge</a></li>
                                    <li><a href="">Dongfeng</a></li>
                                    <li><a href="">Doninvest</a></li>
                                    <li><a href="">Ds</a></li>
                                    <li><a href="">Dw Hower</a></li>
                                </ul>
                                <ul class="tabs__name-to-e">
                                    <li><a class="first-el" href="">Eagle</a></li>       
                                </ul>
                            </div>
                            <div class="tabs__column">
                                <ul class="tabs__name-to-f">
                                    <li><a class="first-el" href="">Faw</a></li>     
                                    <li><a href="">Ferrari</a></li>
                                    <li><a href="">Fiat</a></li>
                                    <li><a href="">Ford</a></li>
                                </ul>
                                <ul class="tabs__name-to-g">
                                    <li><a class="first-el" href="">Gaz</a></li>
                                    <li><a href="">Geo</a></li>
                                    <li><a href="">Gmc</a></li>
                                    <li><a href="">Gonow</a></li>
                                    <li><a href="">Gordon</a></li>
                                    <li><a href="">Great Wall</a></li>
                                </ul>
                        </ul>
    Написано
  • Почему скрипт не работает в хроме?

    SlavaMaxwell
    @SlavaMaxwell Автор вопроса
    Павел, затем, чтобы мне надо чтобы слайдер заработал на 1201px и не более, такая задача стоит, на компе нет слайдера, на планшете и мобилах есть
    Написано
  • Почему скрипт не работает в хроме?

    SlavaMaxwell
    @SlavaMaxwell Автор вопроса
    Павел, 1201 все верно, опечатался я, а что с условием не так?
    Написано
  • Смена текста на кнопке Vue?

    SlavaMaxwell
    @SlavaMaxwell Автор вопроса
    fallus, думаю, что да
    Написано
  • Смена текста на кнопке Vue?

    SlavaMaxwell
    @SlavaMaxwell Автор вопроса
    Andrey Vasilev, вот рабочий код анимации, но не менятся текст кнопки
    <template>
        <section class="v-portfolio portfolio">
            <div class="container">
                <h2 class="title--section">Портфолио</h2>
                <div class="portfolio__wrap">
                    <v-portfolio-item 
                       v-for="work in portfolio"
                       :key="work.id"
                       :portfolio_data="work"
                    />
                </div>
                <div class="portfolio__hidden">
                    <div class="portfolio__wrap-hidden">
                        <!-- <v-portfolio-item 
                        v-for="work in portfolio"
                        :key="work.id"
                        :portfolio_data="work"
                        /> -->
                        <v-portfolio-item-hidden 
                            v-for="workHidden in portfolioHidden"
                            :key="workHidden.id"
                            :portfolio_data_hidden="workHidden"
                        />
                    </div>
                </div>
            </div>
            <button class="portfolio__dropdown-btn learn-more" @click="toggle">
                <span class="circle" aria-hidden="true">
                  <span class="icon arrow"></span>
                </span>
                <!-- <span class="button-text">{{btn}}</span> -->
                <!-- <span class="button-text">Смотреть больше</span> -->
                <span class="button-text">{{btnText}}</span>
    
    
            </button>
    
    
     
    
    
        </section>
    </template>
    
    <script>
        import vPortfolioItem from './v-portfolio-item'
        import vPortfolioItemHidden from './v-portfolio-item-hidden'
    
    
        export default {
            name: 'v-portfolio',
            components: {
                vPortfolioItem,
                vPortfolioItemHidden
                
            },
     
            data() {
                return {
                    portfolio: [
                        {
                            image: 'med-clinic.jpg',
                            id: '1'
                        },
                        {
                            image: 'savanna.jpg',
                            id: '2'
                        },
                        {
                            image: 'bedroom-market.jpg',
                            link: 'https://bedroom-market.000webhostapp.com/',
                            id: '3'
                        },
                        {
                            image: 'fish-market.jpg',
                            id: '4'
                        },
                        {
                            image: 'music-arsenal.jpg',
                            id: '5'
                        },
                        {
                            image: 'build-home.jpg',
                            id: '6'
                        },
                    ],
    
                    portfolioHidden: [
                        {
                            image: 'mosteo.jpg',
                            link: '',
                            id: '1'
                        },
                        {
                            image: 'medical-expres.jpg',
                            link: '',
                            id: '2'
                        },
                        {
                            image: 'kamen.jpg',
                            link: '',
                            id: '3'
                        },
                        {
                            image: 'market-sale.jpg',
                            link: '',
                            id: '4'
                        },
                    ],
    
                    // btn: 'Показать',
                    // toggle1: false
                
                }        
            },
            
            methods: {
                toggle(){
                    let container = document.querySelector('.portfolio__hidden')
    
                    if (!container.classList.contains('active')) {
                        container.classList.add('active');
                        container.style.height = 'auto';
    
                        let height = container.clientHeight + 'px';
    
                        container.style.height = '0px';
    
                        setTimeout(function () {
                            container.style.height = height;
                        }, 0);
    
                    } else {
                        container.style.height = '0px';
    
                        container.addEventListener('transitionend', function () {
                        container.classList.remove('active');
                        }, {once: true});
                    }
    
                }
      
            },
    
    
             computed: {
                btnText: function() {
                    if(this.toggle1) {
                    return 'Скрыть'
                }
                
                return 'Показать'
                }
            }
    
        }
    </script>
    
    <style>
        .portfolio__hidden {
        -webkit-transition: height 0.5s ease;
        -o-transition: height 0.5s ease;
        transition: height 0.5s ease;
        overflow: hidden;
        }
    
        .portfolio__hidden:not(.active) {
        display: none;
        }
    </style>
    Написано
  • Смена текста на кнопке Vue?

    SlavaMaxwell
    @SlavaMaxwell Автор вопроса
    Andrey Vasilev,
    <button class="portfolio__dropdown-btn learn-more" @click="toggle = !toggle">
                <span class="circle" aria-hidden="true">
                  <span class="icon arrow"></span>
                </span>
                <!-- <span class="button-text">{{btn}}</span> -->
                <!-- <span class="button-text">Смотреть больше</span> -->
                <span class="button-text">{{btnText}}</span>
    
    
            </button>
    поменял , не работает
    Написано
  • Смена текста на кнопке Vue?

    SlavaMaxwell
    @SlavaMaxwell Автор вопроса
    Andrey Vasilev, такой вариант работает
    <template>
        <section class="v-portfolio portfolio">
            <div class="container">
                <h2 class="title--section">Портфолио</h2>
                <div class="portfolio__wrap">
                    <v-portfolio-item 
                       v-for="work in portfolio"
                       :key="work.id"
                       :portfolio_data="work"
                    />
                </div>
                <div class="portfolio__hidden" v-if="toggle1">
                    <div class="portfolio__wrap-hidden">
                        <v-portfolio-item 
                        v-for="work in portfolio"
                        :key="work.id"
                        :portfolio_data="work"
                        />
                    </div>
                </div>
            </div>
            <button class="portfolio__dropdown-btn learn-more" @click="toggle1 = !toggle1">
                <span class="circle" aria-hidden="true">
                  <span class="icon arrow"></span>
                </span>
                <!-- <span class="button-text">{{btn}}</span> -->
                <!-- <span class="button-text">Смотреть больше</span> -->
                <span class="button-text">{{btnText}}</span>
    
    
            </button>
    
    
     
    
    
        </section>
    </template>
    
    <script>
        import vPortfolioItem from './v-portfolio-item'
    
    
        export default {
            name: 'v-portfolio',
            components: {
                vPortfolioItem
                
            },
     
            data() {
                return {
                    portfolio: [
                        {
                            image: 'med-clinic.jpg',
                            id: '1'
                        },
                        {
                            image: 'savanna.jpg',
                            id: '2'
                        },
                        {
                            image: 'bedroom-market.jpg',
                            id: '3'
                        },
                        {
                            image: 'fish-market.jpg',
                            id: '4'
                        },
                        {
                            image: 'music-arsenal.jpg',
                            id: '5'
                        },
                        {
                            image: 'build-home.jpg',
                            id: '6'
                        },
                    ],
    
                    // btn: 'Показать',
                    toggle1: false
                
                }        
            },
            
            methods: {
                toggle(){
                    let container = document.querySelector('.portfolio__hidden')
    
                    if (!container.classList.contains('active')) {
                        container.classList.add('active');
                        container.style.height = 'auto';
    
                        let height = container.clientHeight + 'px';
    
                        container.style.height = '0px';
    
                        setTimeout(function () {
                            container.style.height = height;
                        }, 0);
    
                    } else {
                        container.style.height = '0px';
    
                        container.addEventListener('transitionend', function () {
                        container.classList.remove('active');
                        }, {once: true});
                    }
    
                }
      
            },
    
    
             computed: {
                btnText: function() {
                    if(this.toggle1) {
                    return 'Скрыть'
                }
                
                return 'Показать'
                }
            }
    
        }
    </script>
    
    <style>
    .portfolio__hidden {
      -webkit-transition: height 0.5s ease;
      -o-transition: height 0.5s ease;
      transition: height 0.5s ease;
      overflow: hidden;
    }
    
    .portfolio__hidden:not(.active) {
      display: none;
    }
    </style>
    НО не работает анимация в методе toggle при клике, поскольку она привязана была к кнопке
    Написано
  • Смена текста на кнопке Vue?

    SlavaMaxwell
    @SlavaMaxwell Автор вопроса
    Сергей Некий В смысле?
    Написано
  • Смена текста на кнопке Vue?

    SlavaMaxwell
    @SlavaMaxwell Автор вопроса
    Andrey Vasilev, попробую и сообщу
    Написано
  • Смена текста на кнопке Vue?

    SlavaMaxwell
    @SlavaMaxwell Автор вопроса
    Andrey Vasilev, в vif toggle или toggle1 вставить?
    Написано
  • Смена текста на кнопке Vue?

    SlavaMaxwell
    @SlavaMaxwell Автор вопроса
    Andrey Vasilev, а в методах что указать? Там же изначально toggle функция клика? Ты же клик поменял на toggle1и значит в методы toggle1 надо записать? Это просто переименование, дата и метод так и останутся с одним именем toggle1
    Написано
  • Смена текста на кнопке Vue?

    SlavaMaxwell
    @SlavaMaxwell Автор вопроса
    Andrey Vasilev, ты как-то запутанно говоришь :) поможешь проще пожалуйста объяснить где toggle менять, а где оставить?
    Написано
  • Смена текста на кнопке Vue?

    SlavaMaxwell
    @SlavaMaxwell Автор вопроса
    Andrey Vasilev, не совсем тебя понял, где переименовать, а где не трогать?
    Написано
  • Смена текста на кнопке Vue?

    SlavaMaxwell
    @SlavaMaxwell Автор вопроса
    Andrey Vasilev не помогло, у меня иной случай, тут он и дата и в методах затесался
    Написано
  • Смена текста на кнопке Vue?

    SlavaMaxwell
    @SlavaMaxwell Автор вопроса
    Дмитрий Беляев, не сработало, ошибка, у меня одинаковые в дата и методах
    Написано
  • Смена текста на кнопке Vue?

    SlavaMaxwell
    @SlavaMaxwell Автор вопроса
    Дмитрий Беляев, сработает?
    Написано
  • Смена текста на кнопке Vue?

    SlavaMaxwell
    @SlavaMaxwell Автор вопроса
    Дмитрий Беляев, вижу, как исправить? подскажите пожалуйста?
    Написано