GaryDG Posted May 6, 2021 Share Posted May 6, 2021 Site URL: https://startrescue.org/ There is a counting ticker that is placed in the secondary navigation, so it appears in the right part of the header in desktop view. Is there a way to continue showing the ticker in the header in mobile view? Now, by default, it disappears along with all the other navigation links in mobile view. I have researched a bit and have found that this may be accomplished by javascript and css. Anybody know how this can be done? Thank you Link to comment
GaryDG Posted May 6, 2021 Author Share Posted May 6, 2021 I found a similar post titled "How to make header icons persist from web to mobile view? "with a solution posted by tuanphan that almost works for me. I copied the code solution in Add to Settings > Advanced > Code Injection > Header: <script> $(document).ready(function() { $('<a href="tel:0123.456.789"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path d="M20 22.621l-3.521-6.795c-.008.004-1.974.97-2.064 1.011-2.24 1.086-6.799-7.82-4.609-8.994l2.083-1.026-3.493-6.817-2.106 1.039c-7.202 3.755 4.233 25.982 11.6 22.615.121-.055 2.102-1.029 2.11-1.033z"/></svg></a><a href="mailto:abc@xyz.com"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path d="M0 3v18h24v-18h-24zm21.518 2l-9.518 7.713-9.518-7.713h19.036zm-19.518 14v-11.817l10 8.104 10-8.104v11.817h-20z"/></svg></a>').insertBefore('button.Mobile-bar-menu'); }); </script> And replaced the function code with mine: <script> $(document).ready(function() { $('<div class="tick" data-value="00000" data-did-init="handleTickInit"><div data-value-mapping="indexes" data-layout="horizontal fit" data-transform="round -> pad(00000) -> split -> delay(random, 100, 150)"><span data-view="flip" data-transform="arrive(1, 0.01) -> round -> limit(0,9)"> </span><span data-view="flip" data-transform="arrive(1, 0.01) -> round -> limit(0,9)"> </span><span class="tick-text-inline">,</span><span data-view="flip" data-transform="arrive(1, 0.01) -> round -> limit(0,9)"> </span><span data-view="flip" data-transform="arrive(1, 0.01) -> round -> limit(0,9)"> </span><span data-view="flip" data-transform="arrive(1, 0.01) -> round -> limit(0,9)"> </span></div><p id="ticker-caption">ANIMALS TRANSPORTED<br />TO DATE BY START</p></div>').insertBefore('button.Mobile-bar-menu'); }); </script> I can see that the ticker is appearing, but the data is not showing through. Does anybody know why? Thanks. Link to comment
GaryDG Posted May 6, 2021 Author Share Posted May 6, 2021 I forgot to add images that might help explain the problem. Here is how it should look: But it looks like this: Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment