[Resolved] How to use codepen code to generatepress?

Home Forums Support [Resolved] How to use codepen code to generatepress?

Home Forums Support How to use codepen code to generatepress?

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #574787
    lee

    I see tom and leo, recommend the codepen.io code

    test a codepen.io code insert into a wordpress post or pages

    Can’t succeed !!!!!

    Can you teach me????

    for example
    https://codepen.io/tgallimore/pen/awGzD

    Can’t succeed !!!!!
    Can’t succeed !!!!!
    Can’t succeed !!!!!
    Can’t succeed !!!!!

    GeneratePress 2.1.1
    GP Premium 1.6.2
    #575288
    Leo
    Staff
    Customer Support

    Hi there,

    Can you try the JS code in wp_footer?

    #575319
    lee
    <script>
        $('.tabgroup > div').hide();
    $('.tabgroup > div:first-of-type').show();
    $('.tabs a').click(function(e){
      e.preventDefault();
        var $this = $(this),
            tabgroup = '#'+$this.parents('.tabs').data('tabgroup'),
            others = $this.closest('li').siblings().children('a'),
            target = $this.attr('href');
        others.removeClass('active');
        $this.addClass('active');
        $(tabgroup).children('div').hide();
        $(target).show();
      
    })
        
    </script>
    <script>https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js</script>

    wp_footer
    wp_head

    Can’t succeed !!!!! Format failed

    #575734
    Tom
    Lead Developer
    Lead Developer

    Try replacing all $ instances with jQuery.

    #575766
    lee

    Hi tom

    First
    Try replacing all $ instances with jQuery.

    <script>
    jQuery(document).ready(function() { 
    
    (function (jQuery) { 
        jQuery('.tab ul.tabs').addClass('active').find('> li:eq(0)').addClass('current');
        
        jQuery('.tab ul.tabs li a').click(function (g) { 
            var tab = jQuery(this).closest('.tab'), 
                index = jQuery(this).closest('li').index();
            
            tab.find('ul.tabs > li').removeClass('current');
            jQuery(this).closest('li').addClass('current');
            
            tab.find('.tab_content').find('div.tabs_item').not('div.tabs_item:eq(' + index + ')').slideUp();
            tab.find('.tab_content').find('div.tabs_item:eq(' + index + ')').slideDown();
            
            g.preventDefault();
        } );
    })(jQuery);
    
    });
    </script>
    <script>https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js</script>

    hook wp_footer or wp_head ok

    then

    Code Module GeneratorCode Module Generator

    <style>@import url(https://fonts.googleapis.com/css?family=Roboto:300); .tab { padding-top: 50px; margin-bottom: 20px; position: relative; overflow: hidden; background: #fff; width: 70%; margin: 0 auto; font-family: 'Roboto', sans-serif; line-height: 1.5; font-weight: 300; color: #888; -webkit-font-smoothing: antialiased; } .tabs { display: table; position: relative; overflow: hidden; margin: 0; width: 100%; } .tabs li { float: left; line-height: 38px; overflow: hidden; padding: 0; position: relative; } .tabs a { background-color: #eff0f2; border-bottom: 1px solid #fff; color: #888; font-weight: 500; display: block; letter-spacing: 0; outline: none; padding: 0 20px; text-decoration: none; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; border-bottom: 2px solid blue; } .tabs_item { display: none; padding: 30px 0; } .tabs_item h4 { font-weight: bold; color: blue; font-size: 20px; } .tabs_item img { width: 200px; float: left; margin-right: 30px; } .tabs_item:first-child { display: block; } .current a { color: #fff; background: blue; } </style><div class="tab"> <ul class="tabs"> <li><a href="#">Tab01</a></li> <li><a href="#">Tab02</a></li> <li><a href="#">Tab03</a></li> </ul> <!-- / tabs --> <div class="tab_content"> <div class="tabs_item"> <img src="https://cdn.dribbble.com/users/545884/screenshots/3695553/news.png"> <h4>Tab 01 Neque ipsum dolor.</h4> <p>Consectetur adipisicing elit. Neque, repellat facilis totam ab eos distinctio sint atque maiores! Dignissimos, molestiae, rem accusantium iure vitae voluptatum voluptas repudiandae deserunt dolore quis! Quisquam mollitia eius sed.</p> </div> <!-- / tabs_item --> <div class="tabs_item"> <img src="https://cdn.dribbble.com/users/545884/screenshots/3576036/liberosis_--_10.png"> <h4>Tab02 Maiores, suscipit</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, suscipit, eaque asperiores neque numquam nam possimus dolorem ipsa aspernatur reiciendis?</p> </div> <!-- / tabs_item --> <div class="tabs_item"> <img src="https://cdn.dribbble.com/users/545884/screenshots/3557299/mo-t.png"> <h4>Tab03</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, excepturi, minima, corporis deserunt quia quae sit officiis labore inventore autem a delectus consequuntur voluptatem modi eligendi similique sed nam vitae.</p> </div> <!-- / tabs_item --> </div> <!-- / tab_content --> </div> <!-- / tab --><script>$(document).ready(function() { (function ($) { $('.tab ul.tabs').addClass('active').find('> li:eq(0)').addClass('current'); $('.tab ul.tabs li a').click(function (g) { var tab = $(this).closest('.tab'), index = $(this).closest('li').index(); tab.find('ul.tabs > li').removeClass('current'); $(this).closest('li').addClass('current'); tab.find('.tab_content').find('div.tabs_item').not('div.tabs_item:eq(' + index + ')').slideUp(); tab.find('.tab_content').find('div.tabs_item:eq(' + index + ')').slideDown(); g.preventDefault(); } ); })(jQuery); });</script>

    ok.

    null

    but,If use simple css Add to css and wordpress editor html , hook wp_footer or wp_head js Unable to output

    #575770
    lee

    Sorry

    codepen.io scss to css ok

    hahaha

    #576218
    Tom
    Lead Developer
    Lead Developer
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.