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":i100, "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

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

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

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

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

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

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>

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

@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;
}

@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

@Monamos Hire @arminunruh to make a variant LAY theme licensable for your use.

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

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>

Try it with

transition: all 200ms;

:D

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

@Markus It's no longer supported by WP!

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.

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

This is helpful :D

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

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!