-
AuthorPosts
-
October 6, 2014 at 8:05 am #330727
I have a web site built on the Corona theme for my law firm. I like the theme. I am rebuilding the site locally using the new Enfold theme to make it responsive. I am finding Enfold easier to work with. I have very limited knowledge of coding.
I have included this CSS code to have the accordian operate like it does in Corona. I am not sure if this is correct but it seems to work the way I want it to work. I got this from another post on this forum.
/* Re-position Magazine Text Position*/
#top .aviaccordion-preview-title {vertical-align: bottom;}
#top .aviaccordion-preview-title-wrap {height: 100px;}#top .aviaccordion-preview-title-pos { height: auto; }
When a visitor lands on the home page, is there any code I could add to have the accordian slider run once and then come to a stop, rather than repeating?
Thanks,Scott Lanin
October 7, 2014 at 11:42 am #331503Hi Scott!
You can set “Autorotation active? Check if the slideshow should rotate by default” to “No”. In the accordion settings modal.
This will cause the accordion not to rotate automatically when the page is loaded.
Cheers!
ArvishOctober 7, 2014 at 2:46 pm #331619Hi Arvish, Thanks for the response. Maybe I wasn’t clear. I want the accordian slider to rotate when the page is loaded – but to only rotate one time and then stop. Do you know the settings or CSS for that?
Scott
October 9, 2014 at 4:17 am #332866Hey!
Try adding this at the very end of your theme / child theme functions.php file:
function add_custom_script(){ ?> <script> (function($){ $(window).load(function() { setTimeout(function(){ $('.aviaccordion-inner').trigger('mouseleave'); }, 12000); }); })(jQuery); </script> <?php } add_action('wp_footer', 'add_custom_script');
Change 12000 by the amount of time (miliseconds) your slider takes to do a full rotation (i tested this with 3 slides + autorotation set to 3 seconds).
Cheers!
JosueOctober 9, 2014 at 5:26 am #332904Thanks so much Josue for taking the time. I appreciate your effort. One of the things that always concerns me about editing the code in certain pages is that it may be lost or overwritten when the theme or wordpress is updated and I won’t remember what I did previously to change the page manually. I prefer not to do any hacking.
I actually tried Arvish’s suggestion to turn off active autorotation and that may serve my purposes. It will keep the images all the same width when the page loads – that allows a user to see the text overlay for each image at once – I like that because each image corresponds to a practice area for my law firm and I want visitors to see all of them. However, using the accordian also will allow a visitor to select one image (one of our law practice areas), have the image expand with a hover, or have the image link to more info on a separate page, if they choose. This is probably the easiest solution because it will allow me to configure this from within the dashboard without code changes that may be overwritten later. I don’t have the same concern about adding CSS code to the theme options general styling because that shows the changes in one location that is easy to just copy and reuse if I were to do an update.
For now, I am trying to develop the site using Enfold and am building it in Microsoft Webmatrix on my local drive so I don’t have anything to show you yet.
Regards,
Scott- This reply was modified 10 years, 1 month ago by scottlanin.
October 9, 2014 at 5:34 am #332910Great, let us know if there’s anything else we could help with :)
Cheers!
Josue -
AuthorPosts
- You must be logged in to reply to this topic.