Showing and hiding custom coded things

[Timoteh]

Hey,

i'm actually working on a project based on Lay Theme.
I'd like to have a twitter feed at the bottom of my front page, but just on the front page and i don't want to use anything like tweetwally because i want to be able to control the fonts, colors, and much more.

So i tried to make my own php script + tweetoauth and it's working.
But now, i can't find out how to push it at the bottom of my front page.

I tried to add a region in markup.php and it worked, but because the content is downloaded after my custom region, it always appears at the top of my front page for like 2 seconds and then goes to the bottom.

Any ideas how i could do that?

Thanks for your support,
Tim.

[arminunruh]

Hey Tim!

Cool ok,
Yeah, first the php gets loaded, then some javascript fetches all the json for the page and uses that to display it. That's why theres a delay in between.

You could give your twitter feed some css like .twitter-feed{display: none;} and then use js to show/hide the feed based on whether the frontpage has loaded.

Frontend.GlobalEvents.on("newpageshown", function(layoutObj, type, obj){
	if(type == "page" && obj.id == 1){
		console.log("it's your frontpage!");
		jQuery('.twitter-feed').fadeIn();
	}else{
		jQuery('.twitter-feed').fadeOut();
	}
});

( more info: http://laytheme.com/documentation.html#custom-javascript )

The "newpageshown" event fires when the content has loaded and is rendered. To find out the type and id which is "page" and "1" in this example here, please inspect your body tag on your frontpage. You will see it has a data-type and data-id attribute.

Your custom code will be overwritten once there is a new lay theme update. Maybe you can code your twitter feed as a wordpress plugin to avoid that. If you haven't written a WordPress plugin yet, it's not soo hard, basically you just write a php class and you can use the same wordpress php functions that you use for themes.

Your plugin could have a public function like <?php Yourplugin::showFeed(); ?>. You could call that function from within "Lay Options" -> "Custom CSS & HTML" -> "Custom HTML at bottom"
I think that field "Custom HTML at bottom" just spits out anything that you put in there, I guess php should work there too. Or your plugin might have sth like add_action('my_twitter_feed_plugin_hook', 'show_twitter_feed'); and then in "Custom HTML at bottom" you could write do_action('my_twitter_feed_plugin_hook')

[Timoteh]

You're the man !

So i used exactly what you told me and it worked.

Now i can customize my own Twitter feed, after i extracted the url/#/@, it's all beautiful.

But now, if i'm at the bottom of the page and decide to go to another page, then the twitter feed takes a little bit of time to get out, instead of getting out immediatly like the other content. Normal, i know, but do you have any idea how to counter this?

Thanks for the advice about the wordpress plugin, i think i kind of did it without even knowing it... haha

I'll look it up !

[arminunruh]

Ok, so every link in Lay Theme that just links to a subpage of your website has a "data-type" attribute and "data-id" attribute. Let's just focus on that it has a data-type attribute.
So you could do:

jQuery("body").on("click", "a[data-type]", function(event) {
	jQuery('.twitter-feed').fadeOut();
});