Javascript accordion

[MAN]

Hi! Congratulations for this wonderful theme.

I'm trying to add this accordion: http://uniondesign.ca/simple-accordion-without-jquery-ui/ to my website.

I'm using the HTML in the "code" field inside the "+ Text" option, the script in "custom <head>", and the css in "Custom CSS for Desktop Version". It isn't working, what am I doing wrong?

Thanks in advance!

[arminunruh]

I don't know. Does it work when you are on the page where the accordion is and you just refresh?

[arminunruh]

Ok I think I know why it doesn't work. You shouldn't use $(document).ready(function($) { }); but try

Frontend.module("GlobalEvents").on('projectpageshown', function(){

});

Your js goes inside that function. U can try that!

[MAN]

Hey Armin, thanks for your answer. I finally desisted with the accordion, but I'm still having problems using any javascript. I'm using a row background image as a front page cover and I want it to fade in when it loads.

I'm trying with:

<script>
Frontend.module("GlobalEvents").on('projectpageshown', function(){
$('#main-region').fadeIn();
});
</script>

And CSS:

#main-region {
display: none; 
}

And it's not working. Any ideas?
Thanks for your help, cheers!

[arminunruh]

#main-region {
display: none!important; 
}

Maybe like this?

[MAN]

@arminunruh The CSS is working, the problem is in the script... How would you do a fadein load for the background image, anyway? Thanks!

[arminunruh]

You can use "Lay Options" -> "Intro" to create a frontpage cover.
Well, it's hard to say from here what's wrong with your JavaScript. Do you get any errors in your console, what happens?

JS in general should run fine.
Maybe it's easier if you insert your custom HTML with the "Lay Options" -> "Misc Options" -> "HTML at Top" field.

And I don't really get what you mean with this:

I'm using a row background image as a front page cover and I want it to fade in when it loads.

A row background image is part of the grid which is inside of #main-region. It seems like you are trying to hide #main-region with CSS and then show it using JS and I'm not sure if that makes any sense.

[MAN]

@arminunruh I'm creating a one-page portfolio where the first row is a fullscreen pic. The problem is that it makes a sudden appearance after 1 sec of blank space. The non background images load smoothly.

Any idea about how to get this fadein effect? Thanks again.

[arminunruh]

Awh ok, now I know what you mean.
Hm, it's not really easy to do that. The fullbleed images are not faded in because they are background images of rows and background images can't have opacity.

Well set the opacity of the row to 0 with CSS. Specify a CSS transition for the opacity of the first row and then set the opacity to 1 with js.

[arminunruh]

hey MAN! I just tested it and realized this event "projectpageshown" is only triggered when you navigate to a new page, not on initial load.

Well then you're probably better off using jquery document ready.
Making it easier to use ur own js is def something I need to work on and write a little tutorial about in "how to use" for a later update.

edit: Ok it just didnt work cause my page was empty -.-

[MAN]

Sorry I'm late, I didn't see your answer. Yes, some kind of tutorial would be useful for non-professional coders as I am...
I think a great use for fullscreen row is to use it like a cover, so I think would be great to improve its loading... otherwise the feeling is so tough.

Anyway, I'm enjoying a lot using Lay, congrats again for your work!