Develop Reference

How to keep submenu opened after page load in JavaScript

I have almost done my work and my client ask for keeping submenu opened when user click the item in the menu and also set active color. The idea is better orientation when user actualy is. In React App it wouldn't be problem, cuz whole app works like single page. In this case i've decided use only HTML/JS as my challenge.
Is it even possible somehow keep menu opened/open again menu when new page is loaded please?
I tried make from this app something like single page app by some tutorials like "load paghe without refresh" etc, but nothing worked.
menu
<div class="menu">
<div class="item">
<a class="sub-btn">
Matice
<i class="fas fa-angle-right dropdown"></i>
</a>
<div class="sub-menu">
<a
href="/pages/matice/zakladni-operace.html"
id="matice/zakladni-operace"
onClick="reply_click(this.id)"
class="sub-item">
Základní operace
</a>
<a
href="/pages/matice/hodnosti.html"
id="matice/hodnosti"
onClick="reply_click(this.id)"
class="sub-item">
Hodnost
</a>
<a
href="/pages/matice/determinanty.html"
id="matice/determinanty"
onClick="reply_click(this.id)"
class="sub-item">
Determinanty
</a>
<a
href="/pages/matice/inverzni-matice.html"
id="matice/inverzni-matice"
onClick="reply_click(this.id)"
class="sub-item">
Inverzní matice
</a>
<a
href="/pages/matice/maticove-rovnice.html"
id="matice/maticove-rovnice"
onClick="reply_click(this.id)"
class="sub-item">
Maticové rovnice
</a>
<a
href="/pages/matice/vlastni-cisla-a-vektory.html"
id="matice/vlastni-cisla-a-vektory"
onClick="reply_click(this.id)"
class="sub-item">
Vlastní čísla a vektory
</a>
</div>
</div>
</div>

You can try to get window.location.href on load of your page and add style classes depending on conditionally with something like
<div class="<%= 'yourStyleClass' if #url== 'urURL' %>"> to set active color

You could use AJAX to call the page. But that doesn't sound like what you want. An alternative way in javascript would be to get the current window.location.href when the page loads, then inject a class name into the relevant node, and have the css for that class make it visible and highlighted.
If you're using a library like jQuery this shouldn't be too hard to achieve.

IOS 9 is blocking modal mobile links

My website uses modal to display information that requires buttons to be clicked e.g. back and submit. Now the link appears to be broken even though it's target is another page. The page reloads on any button click.
This has been working thus far but some users have been having issues with submitting the information. When myself and my colleagues then tested what was causing the issue we found out that the problem was only affecting devices running iOS9.
We looked up some information and found it might be something to do with having an empty href.
<ul>
<li><a class="pop" href="#" target="#modal" data-id="deposit-funds.aspx">Deposit Funds</a> <span class="moreinfo" title="How to deposit funds into your investor account"></span></li>
<!--<li><a class="pop" href="#" target="#modal" data-id="dynamic-invest.aspx">Dynamic Invest</a> <span class="moreinfo" title="Dynamic investing explained"></span></li>-->
<!--<li><a class="pop" href="#" target="#modal" data-id="auto-invest.aspx">Auto Invest</a> <span class="moreinfo" title="Autoinvest guidelines, setting criteria and turning on and off"></span></li>-->
<li><a class="pop" href="#" target="#modal" data-id="current-investments.aspx">Current Loans</a></li>
<li><a class="pop" href="#" target="#modal" data-id="my-resale.aspx">My Resale Offerings</a></li>
<li><a class="pop" href="#" target="#modal" data-id="completed-investments.aspx">Completed Loans</a></li>
<li><a class="pop" href="#" target="#modal" data-id="bids-outstanding.aspx">Bids Outstanding</a></li>
<li><a class="pop" href="#" target="#modal" data-id="my-transactions.aspx">Transaction History</a></li>
</ul>
</div>
If anybody has had the same problem or has any ideas on a potential fix a point in the right direction would be most appreciated.

I had this problem a while back and if I remember correctly I update the href to href="javascript:;". This tricks the browser in to running some empty javascript instead of doing nothing at all (which is why iOS blocks it, I believe). Your other javascript will also run on click as well.
I also believe I ventured down the path of changing the <a> tags to <span> tags; as far as I remember, this also worked, but wasn't a great fix for my problem.

Customization of AddThis code not working

I'm trying to add the AddThis widget to my page and customize it according to this page: http://support.addthis.com/customer/portal/articles/381263-addthis-client-api
However it doesn't seem to be working.
I am trying to output a custom selection of items, with my code being:
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript">var addthis_config = {data_track_addressbar:true,services_compact:"facebook,twitter,google_plusone,pinterest,email"};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxxxxxxxxxxxxxxx"></script>
As you may be able to figure out I'm just trying to display these services: facebook,twitter,google_plusone,pinterest,email
But the output I get is: print,twitter,facebook,email
What am I doing wrong?

The parameter "services_compact" is used to specify the services you want to see in the compact menu when you hover over the plus button. To specify the buttons in the order you want, try this:
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_google_plusone"></a>
<a class="addthis_button_email"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
By default the widget tries to detect the user's preferred services, but you can override that if you like. Here's the specific section in the Client API that described this:
http://support.addthis.com/customer/portal/articles/381263-addthis-client-api#rendering-preferred-services
Hope this works for you.

Showing larger images with AddThis widget

I'm using the AddThis widget and I copied the default code for the first option they have, which is the one with the facebook like, tweet etc... that code being:
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_pinterest_pinit"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxxxxxxxxxxxxxxxx"></script>
<!-- AddThis Button END -->
However I wanted to add a Google Plus button as well, so I added this in to the code:
<a class="addthis_button_google_plusone"></a>
However this output a much smaller image compared to the others. Is there any way to get the more appropriate sized image?
Here is what it currently looks like:
As you can see the Google Plus icon is too small, however that's the right icon I want, just bigger; don't want the "badge".

Update:
Use size to size your buttons:
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
Link to guide - Larger Standard
Add this third party buttons - link (like Google +1)
Also, Code (maybe this is what you want):
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_google_plusone_badge" g:plusone:href="...your-link..."></a>
</div>
OR, in your code itself, just add another anchor tag to the div:
<a class="addthis_button_google_plusone_badge" ></a>

capture click of addThis button

I am using the addThis widget to display Facebook, Twitter, Google, Blogger, Wordpress logos on my site.
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-1324kj34h243kjh2"></script>
I would like to know of a way that I can capture when someone clicks one of the buttons for Google Analytics tracking reasons. I have attempted to add an onClick to an anchor, but this does not fire - presumably because the markup is re-written by the included JavaScript.
This is my code:
<div class="addthis_toolbox addthis_default_style">
<div class="share-icons" id="share-icons">
<span id="share-title">Share</span>
<span class="spacer"></span>
<a class="addthis_button_email left" title="Email" onClick="_gaq.push(['_trackSocial', 'addThis', 'email']);"> </a>
<a class="addthis_button_facebook left" title="Facebook"> </a>
<a class="addthis_button_twitter left last" title="Twitter"> </a>
<a class="addthis_button_google left" title="Google">
<img src="images/google.gif" alt="G" />
</a>
<a class="addthis_button_blogger left" title="Blogger"> </a>
<a class="addthis_button_digg left last" title="Wordpress"> </a>
</div>
</div>
I am using the addthis_config to report GA activity at the moment, but I wish to report to two profiles, so I am looking for a way of capturing the click as that seems like the best way around the problem.

Make sure you have that div appended on the DOM to ensure you could use events. Otherwise check liveQuery.
I haven't used addThis widget but I would try with jQuery using class name:
$.('.addthis_button_email').click(function(){
//Count it...
});
Or using a custom method in every button:
<div class="addthis_toolbox addthis_default_style">
<div class="share-icons" id="share-icons">
<span id="share-title">Share</span>
<span class="spacer"></span>
<a class="addthis_button_email left" title="Email" onClick="notifyGA(information....)"> </a>