Hello. I’ve searched everywhere for a solution and can’t find one. I’m using X Pro.
I want the top bar in the header (with the embedded audio) to be hidden until the user clicks the play character in the content area. See here:
http://courrielche.com/RedPilledAmerica/
I can’t find a solution.
I want it to be similar to what happens when the “play” character is selected on this site:
Please help! 
Hi There,
Thanks for writing in! Regretfully the given example site is using a custom coded jPlayer plugin (http://www.jplayer.org/). It can only be possible to do the same in your site using a custom development. Please be advised that custom coding is beyond the scope that we offer. We only cater getting your site set up, bug fixes and minor cosmetic changes. Please refer to any 3rd party developers to do this customization requests.
Thank you very much for your understanding.
Putting the example I gave aside, is there no way to expand a bar in the header by clicking a character in the content body?
Even when I try to move the bar with the audio embed out of the header and into the content body it doesn’t work. It used to with X Theme, but doesn’t with X Pro. I used this method and can’t get it to work anymore since converting to X Pro.
Hello There,
Are you referring to this JS code?
jQuery(document).ready(function($){
$('.section-expandable').slideToggle(0);
$('.section-trigger').on('click',function(e){
e.preventDefault();
$('.section-expandable').slideToggle('slow');
$('html, body').animate({
scrollTop: $(".section-expandable").offset().top
}, 700, 'swing');
});
});
This code will only work if you have a section that bears the class section-expandable. Please create a section next to your section with the play button and insert this custom class so that your code will work.
Please let us know how it goes.
Yes, I am referring to that JS code.
When I have the class “section-expandable” in the header bar that holds the embedded audio, it isn’t functioning. I currently shows a blank white space where the audio embed is located, and when I click on the play button in the content body, the section briefly expands above the header navbar then disappears.
Hello There,
Please remove the JS code as it may not apply to your site.
You can update it to this code instead:
jQuery(document).ready(function($){
$('.section-expandable').css('display', 'none');
$('.section-trigger').on('click touchend',function(){
$('.section-expandable').slideToggle('slow');
});
});
Please let us know if this works out for you.
Hello. Thanks for your help. That is not working either. When the play character is selected, the bar in the header with the embedded audio just opens and shuts and opens again just to display a white space.
Hello There,
The original code was specifically coded to show/hide a section. This code may not work perfectly when placed in your header. Please bear in mind that we are trying our best as we can to help make this code work for you. We are out of options here and since this is a custom development regretfully this is way beyond the scope of our support. We only cover getting your site set up, bug fixes and minor cosmetic changes. This request has something to do with the modifications for your site and not related to a bug or issue with the theme.
Thank you for your understanding.
I fixed the problem of it opening and then closing. There was a class “section-trigger” on both the play character and the row that the play character was on.
Now the problem is that the bar in the header that houses the embedded audio starts with an initial white space position. When I select the play character, it expands to show the audio player. How do I get rid of the initial white space?
Hello There,
Since you have made it work, please apply the section-expandable class to the bar itself and not on the embed code to prevent any extra spaces in your header. Having it that way, the bar itself will show/hide upon clicking the trigger element.
Hope this helps.
Thank you. This worked. However, for some reason, from my iPhone and iPad, when clicking the play character the audio bar opens and then immediately closes again. It isn’t happening from my computer desktop. I checked to see if I possibly placed an section-expandable in a row that only appears in mobile/ipad mode but can’t find anything.
Also @RueNel, once the audio bar is expanded, I want it to stick to the top…right above the main navigation bar when scrolling. At this point, when I scroll down, the audio bar disappears.
Hi @courrielche,
It’s a bit tricky since that code is a custom one in which the changes it applies aren’t included or integrated to the functionality of the header bar itself.
The sticky positioning is calculated based on the total height of all header bar, and since you alter that with the above custom code. The calculation is affected, now, the sticky bar of the audio is behind the 2nd header bar since the initial height of the 1st bar is zero (hence, the 2nd became first and on top). And all hidden element has zero dimension.
I tried some workaround but can’t fix it, I recommend contacting a developer to enhance the code. Maybe you’ll need to create your own sticky positioning to calculate the changes made this toggle code.
Thanks.
Hello @Rad,
I understand that it may be tricky with a header.
How about if I just move the audio embed to a section below the header, make it expandable by a trigger in the play character, then make it sticky below the header on scroll? That should be easily done, but I can’t get it to work.
I currently made the audio embed the top section, made it expandable on selecting the play character, but on scroll it sticks but the header overlaps. Can you help me with this?
That would require custom development which is outside the scope of our support. For this, please consult with a third party developer.
Thank you for understanding.
I figured it out using a sticky anything plugin. One final question (hopefully). When I scroll, the content is flowing above the sticky section. What can I do to make the content flow behind the sticky section?
I figured it out by setting the z-index in the sticky anything plugging to 99999.
Glad you’ve found a solution.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.