Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search
    1. Home
    2. dani
    • Profile
    • Following 0
    • Followers 0
    • Topics 42
    • Posts 122
    • Best 20
    • Controversial 0
    • Groups 0

    dani

    @dani

    21
    Reputation
    739
    Profile views
    122
    Posts
    0
    Followers
    0
    Following
    Joined Last Online
    Website danielcampbell.ca Location Paris

    dani Unfollow Follow

    Best posts made by dani

    • RE: Draggable elements

      hi,

      like this : http://danielcampbell.ca/post-it
      ???

      add this to 'custom HTML at top' :

      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

      <script>

      window.laytheme.on("newpageshown", function(layoutObj, type, obj){

      jQuery( function() {
      jQuery(".post").draggable();
      } );

      /* click div to bring to front */
      jQuery(function() {
      var maxz = jQuery('.post:last').css("zIndex");
      jQuery(".post").on("drag",function(){
      maxz++;
      jQuery(this).css('z-index',maxz);
      } );

      /* fade in divs - set .post to opacity:0; /
      jQuery('.post').each(function(i) {
      jQuery(this).delay((i++) * 500).fadeTo(1000, .99).css({"margin-left":i
      100, "margin-top":i*100});
      } );

      /* close parent div on x */
      jQuery('.close').on("click", function () {
      $(this).parent('div').fadeOut();
      });
      });
      });
      </script>

      and this to CSS
      (modify as your like) :

      /* post-it */
      .post {
      z-index: 1;
      position: absolute;
      width: 300px;
      min-height: 200px;
      padding: 20px;
      opacity: 0;
      overflow: scroll;
      background-color: #ffffbc;
      cursor: grab;
      cursor: -webkit-grab;
      }
      .close {
      display:inline-block;
      }
      .close::after {
      content: "\00D7";
      text-align: right;
      display:inline-block;
      position: absolute;
      font-size: 30px;
      font-weight: 100;
      right: 12px;
      top: 0px;
      width: 20px;
      height: 20px;
      z-index: 3;
      color: black;
      }
      div.close:hover:after {
      color: red;
      }

      Have fun :D

      posted in General Discussion
      dani
      dani
    • RE: Changing Background Image

      Hi Lee,

      I've tried to do this as well with the carousel, but it's kind of a hack.

      You can always use the same script on the site and add it to your custom css/html.

      I extracted the essentials for you here:

      http://codepen.io/cestdani/pen/bWGBgE

      Note that when you add javascript you'll need to read this:
      http://laytheme.com/documentation.html#custom-javascript

      also use 'jQuery' instead of the '$' shorthand for wordpress compatibility.

      Best,
      Dani

      posted in General Discussion
      dani
      dani
    • How to integrate CSS into text area

      Hi Forum,

      I wrote a little bit of CSS to fade in/out an image in a absolute positioned div when hovering over text.

      It works in an isolated environment :
      http://codepen.io/cestdani/pen/LWQNxO

      but when integrated into LAY it doesn't work anymore.
      http://visuel.org/XAMP/test-caption-image

      Could you tell me how I could integrate this code, or suggest another way to do this?

      I tried the same idea with jquery, but still doesn't work when trying to integrate.

      http://codepen.io/cestdani/pen/mWXOrj
      http://visuel.org/XAMP/test-caption-image-2

      Thanks!
      Daniel

      posted in General Discussion
      dani
      dani
    • Using carousel feature as a cover (or full row bg image)

      Hi Armin,

      I'm wondering if there is a easy way to combine the code for a carousel and cover feature.
      ie. I want to have a fading slideshow that functions just a cover (fills the browser width and height).
      Or if there is a way to adjust the carousel with css so it adjusts to 100vh/100vw, that could work too.
      (something like an option on the carousel instance 'use as full row bg image).

      Here is the carousel without left/right margins, but there is still a bottom margin but the browser edge is as an absolute boundary, unlike a cover or full row bg image.

      http://visuel.org/sg

      Thank you!
      Dani

      posted in General Discussion
      dani
      dani
    • Webfont font family avoiding faux-bold/italics

      Hi Forum,

      I Want to use the font family Garamond (included on Mac).
      The webfont is a backup for those who don’t have Garamond on the system (the mac default version).
      So I converted and uploaded the files.

      garamond.woff
      garamond-italic.woff
      garamond-bold.woff

      PROBLEM: faux italics, faux bold

      I want Garamond to act as a font-family with specific character sets for italic and bold.

      I found this article that proposes a fix:

      http://www.metaltoad.com/blog/how-use-font-face-avoid-faux-italic-and-bold-browser-styles

      And here is my CSS

      • {
        font-family: ‘Garamond’;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        }

      @font-face {
      font-family: ‘Garamond’;
      src: url('http://www.anneslacik.com/wp-content/uploads/Garamond.woff');
      font-weight: normal;
      font-style: normal;
      }
      @font-face {
      font-family: Garamond;
      src: url('http://www.anneslacik.com/wp-content/uploads/Garamond-Italic.woff');
      font-weight: normal;
      font-style: italic;
      }
      @font-face {
      font-family: Garamond;
      src: url('http://www.anneslacik.com/wp-content/uploads/Garamond-Bold.woff');
      font-weight: bold;
      font-style: normal;
      }

      I left the Text Format font feild blank.

      So my questions:

      1. Is there a way to do this within the text formats?
      2. is this going to cause any conflicts?

      Thanks,
      Daniel

      posted in General Discussion
      dani
      dani
    • RE: Accordeon-feature or plugin?

      @dani example:
      http://66.199.141.101/~dbvincze/works/

      posted in General Discussion
      dani
      dani
    • RE: Accordeon-feature or plugin?

      try this:

      HTML

      <div class="more">Click here for more info</div>
      <div class="less">Here is the hidden content</div>
      

      Use <div> instead of <p>, so that you can use <p> within the hidden content.

      CSS

      /* open close dots - see JS */
      .more:hover:after { 
          content: " ○○○";
      }
      .more:after {
          content: " ●●●";
      }
      .less { 
        display:none; 
      }
      

      JS

      <script>
      window.laytheme.on("newpageshown", function(layoutObj, type, obj){
          
      /* open close dots */  
          jQuery('.more').click(function(){
              jQuery(this).next().slideToggle();
              jQuery('.less').not(jQuery(this).next()).slideUp();
          });
        
      });
      </script>
      
      posted in General Discussion
      dani
      dani
    • RE: Q Translate X is DEAD?

      @Richard I'm trying it out now... thanks

      posted in General Discussion
      dani
      dani
    • RE: How to Menu Dropdown?

      @sidyou

      put this in your desktop CSS, and then add sub menu items in 'menus'

      nav.primary .sub-menu {
      display: none;
         position: absolute;
         left: -10px;
         top: 40px;
         padding: 10px;
      
      }
      nav.primary .sub-menu li{
         display: block;
         padding-bottom: 5px;
      }
      .menu-item:hover .sub-menu{
         display: block !important;
      }
      li.menu-item-has-children{
         position: relative;
      }
      posted in General Discussion
      dani
      dani
    • RE: sticky

      @Sophie1000 Hi Sophie, there are almost some solutions, but nothing that works easily and without some little bugs... did you find anything? Please let me know. Thanks

      posted in General Discussion
      dani
      dani

    Latest posts made by dani

    • RE: Accordeon-feature or plugin?

      @dani example:
      http://66.199.141.101/~dbvincze/works/

      posted in General Discussion
      dani
      dani
    • RE: Accordeon-feature or plugin?

      try this:

      HTML

      <div class="more">Click here for more info</div>
      <div class="less">Here is the hidden content</div>
      

      Use <div> instead of <p>, so that you can use <p> within the hidden content.

      CSS

      /* open close dots - see JS */
      .more:hover:after { 
          content: " ○○○";
      }
      .more:after {
          content: " ●●●";
      }
      .less { 
        display:none; 
      }
      

      JS

      <script>
      window.laytheme.on("newpageshown", function(layoutObj, type, obj){
          
      /* open close dots */  
          jQuery('.more').click(function(){
              jQuery(this).next().slideToggle();
              jQuery('.less').not(jQuery(this).next()).slideUp();
          });
        
      });
      </script>
      
      posted in General Discussion
      dani
      dani
    • RE: Mouse hover effect italic

      Try it with

      transition: all 200ms;

      :D

      posted in General Discussion
      dani
      dani
    • RE: Q Translate X is DEAD?

      @Richard I'm trying it out now... thanks

      posted in General Discussion
      dani
      dani
    • RE: qTranslate-XT (3.10.0), last version does not work anymore ;(

      @Markus It's no longer supported by WP!

      posted in Bug Reports
      dani
      dani
    • Q Translate X is DEAD?

      https://wordpress.org/plugins/qtranslate-x/

      WP is not longer supporting this plugin. I've had some problems with it recently, perhaps that's why.

      posted in General Discussion
      dani
      dani
    • RE: Editing Page using "Element Grid/Masonry" with text causes endless text doubles

      Yeah it's an incompatibility with Q-Translate X....

      posted in Bug Reports
      dani
      dani
    • RE: No Images on tablet and phone

      This is helpful :D

      https://wordpress.org/plugins/really-simple-ssl/

      posted in Bug Reports
      dani
      dani
    • Change swiper autoplay transition speed

      Hi,

      I'm trying to send a new speed variable to the carousel swiper function. The JS is

      var w = jQuery(a).find(".swiper-container"),
                                 m = new Swiper(w[0], {
                                     speed: 350,
                                     effect: "slide",
                                     spaceBetween: v,
      

      And I'm adding this in an HTML block on the page

      <script>
      jQuery( document ).ready( function() {
      
         const imageCarousel = jQuery ( '.swiper-container' ),
            swiperInstance = imageCarousel.data( 'm' );
      
         swiperInstance.params.speed = '1000';
      
         swiperInstance.update();
      }); 
      </script>
      

      Error in the console is:

      (index):1352 Uncaught TypeError: Cannot read property 'params' of undefined
          at c.Channel.<anonymous> ((index):1352)
          at p (backbone.min.js?ver=1.4.0:2)
          at f (backbone.min.js?ver=1.4.0:2)
          at c (backbone.min.js?ver=1.4.0:2)
          at c.Channel.n.trigger (backbone.min.js?ver=1.4.0:2)
          at frontend.app.min.js?ver=3.8.5:1
      

      Anyone know how to set a new speed via a script?

      Thanks!

      posted in Addons
      dani
      dani
    • RE: Horizontal Scroll Gallery

      @felix_rabe said in Horizontal Scroll Gallery:

      <script>jQuery(function () {
      jQuery.fn.hScroll = function (amount) {
      amount = amount || 120;
      jQuery(this).bind("DOMMouseScroll mousewheel", function (event) {
      var oEvent = event.originalEvent,
      direction = oEvent.detail ? oEvent.detail * -amount : oEvent.wheelDelta,
      position = jQuery(this).scrollLeft();
      position += direction > 0 ? -amount : amount;
      jQuery(this).scrollLeft(position);
      event.preventDefault();
      })
      };
      });
      jQuery(document).ready(function() {
      jQuery('.div').hScroll(30); // You can pass (optionally) scrolling amount
      });
      </script>

      Hey Felix,

      Can you show the working code (HTML)?

      Thanks!

      posted in General Discussion
      dani
      dani