Guest Posted May 6, 2021 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
Guest Posted May 6, 2021 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.
Guest Posted May 6, 2021 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:
Recommended Posts
Archived
This topic is now archived and is closed to further replies.