Is a slide-in effect for event details possible in the main list view?

Start
Prev
1
Next
End

jonmar
Topic Author
Junior Member

8 years 2 months ago - 8 years 2 months ago #13143 by jonmar

Is a slide-in effect for event details possible in the main list view? was created by jonmar

Okay, I need to create a calendar theme that looks and works like this:

So the left side of the image is how the event would be displayed by default on the site. Only the event image is shown. Then when you move your mouse cursor over the event image, the event details slide in from the bottom, as shown on the right side of the image.

Is this possible? Do I need to do a lot of custom PHP to get it done, or are there some cool CSS tricks that I can use?

ic_rounded seems like a good starting point, as it already displays the event image automatically in the background of the event box. I would then just need to shape the box and make it larger, and then somehow implement the slide-in effect.

Thanks!

Last edit: 8 years 2 months ago by jonmar.

Please Log in or Create an account to join the conversation.

jonmar
Topic Author
Junior Member

8 years 2 months ago #13144 by jonmar

Replied by jonmar on topic Is a slide-in effect for event details possible in the main list view?

Actually, I already found this. Makes me very optimistic that it can be done with iCagenda!

stackoverflow.com/questions/16989585/css...from-left-transition

Please Log in or Create an account to join the conversation.

Lyr!C
Administrator
Lead Developer

8 years 2 months ago #13163 by Lyr!C

Replied by Lyr!C on topic Is a slide-in effect for event details possible in the main list view?

Hello,

What i would recommend :
- do first a HTML/css page to test your design for one event (using css3 or script). (eaiser first to create with no php data, but just inline content)
- When you will have one HTML structure ready for 1 event, you will be able to create a custom theme pack and then integrate your HTML in the YOURTHEME_events.php file
- You will just have after to replace "inline text/image" by php variables (this is where i will be able to help you, but you will fincd exemple with core theme pack ic_rounded ;-)

Note: i have already started to work on a similar design. No currently ready, and not enough time to finish it (only list view done) but when i will be able to work again on it, it will be a new theme pack for Pro versions of iCagenda ;-)

Best Regards,
Cyril

Latest version : iCagenda 3.9.7
We recommend every user to keep iCagenda updated.
Don't forget to have your Joomla!™ up-to-date!

Do you like iCagenda?
I would appreciate if you could take 5 minutes to post a review on JED (Joomla Extensions Directory) .

Please Log in or Create an account to join the conversation.

jonmar
Topic Author
Junior Member

8 years 1 month ago - 8 years 1 month ago #13232 by jonmar

Replied by jonmar on topic Is a slide-in effect for event details possible in the main list view?

Hi!

I've made good progress with this. I have the slide effect working like I want it to. I have a few questions, though.

Can I control the quality of the thumbnail image that the calendar events list page loads as a bg image? My boxes are bigger than ic_rounced and the images are blurry as a result.

I'm using <?php echo $CATEGORY_COLOR; ?> to get the background color for the container that slides into view. Is there a way I can set opacity for the background color?

Thanks!

Last edit: 8 years 1 month ago by jonmar.

Please Log in or Create an account to join the conversation.

Lyr!C
Administrator
Lead Developer

8 years 1 month ago #13242 by Lyr!C

Replied by Lyr!C on topic Is a slide-in effect for event details possible in the main list view?

Hi!

Can I control the quality of the thumbnail image that the calendar events list page loads as a bg image? My boxes are bigger than ic_rounced and the images are blurry as a result.

Yes, you can get the thubmnails as set in the global options of iCagenda component.

Maybe set just differently the size and quality i for the "medium" thumbnail size in global options > general settings, and then reload the page ;-)

I'm using <?php echo $CATEGORY_COLOR; ?> to get the background color for the container that slides into view. Is there a way I can set opacity for the background color?

Yes!

In the iC Library i've created for iCagenda, i have added a bunch of functions.
AS the color is saved in Hex format, we just need it to be converted to rgb (and then add the opacity).

Try this :

<?php echo 'rgba(' . iCColor::hex_to_rgb($CATEGORY_COLOR) . ', 0.5)'; ?>

Hope this helps ?

Regards,
Cyril

Please Log in or Create an account to join the conversation.

jonmar
Topic Author
Junior Member

8 years 1 month ago #13244 by jonmar

Replied by jonmar on topic Is a slide-in effect for event details possible in the main list view?

Amazing, thank you!

That code worked perfectly. Exactly what I needed.

I wish you made slideshows and other extensions for Joomla. I'd buy all my stuff from you.

The following user(s) said Thank You: Lyr!C

Please Log in or Create an account to join the conversation.

Lyr!C
Administrator
Lead Developer

8 years 1 month ago #13262 by Lyr!C

Replied by Lyr!C on topic Is a slide-in effect for event details possible in the main list view?

You're welcome jonmar!

Yes, i would love to write other extensions (and i've got full of ideas) but for now, i prefer to focus on iCagenda (as i have already many things i want to do for this extension ;-)