We Keep Coding

Reddit style voting system

Goal: Reddit style voting system
Two voting buttons (up/down), with the button that i have already clicked on a post indicates this e.g. by different background color. This should happen on page load based on database value and dynamically when I click it.
If I change a vote from up to down and vice-versa, both buttons should change.
Background:
As a base, I am using this plugin: https://janosgyerik.github.io/upvotejs .
It is basically running, and I managed to exchange the use of the .svg to show the arrows with text so that I can easily change what symbol to use for the buttons.
Problem:
With my limited knowledge, I am struggling for hours now to get the buttons to indicate the vote status on page load and to dynamically change them as mentioned above.
<div id="topic_{{$deal->id}}" class="topic pb-1 pt-1 pl-2 pr-2 upvote d-inline-flex btn vote-button border" data-id="{{$deal->id}}" data-votes="{{$deal->votes}}" >
<a class="upvote vote" data-value="1" data-id="{{$deal->id}}">
<span class="material-icons" style='font-size:24px;color:red' data-voted="{{$deal->upvoted}}" data-id="{{$deal->id}}">add</span>
</a>
<div class="count ml-3 mr-3" style='font-size:20px;color:red'>{{$deal->votes}}</div>
<a class="downvote vote" data-value="-1" data-id="{{$deal->id}}">
<span class="material-icons" style='font-size:24px;' data-voted="{{$deal->upvoted}}" data-id="{{$deal->id}}">remove</span>
</a>
<a class="star" style="display: none"></a>
</div>
I want to add the class "voted-toggle" to the span for the upvote or the downvote accordingly on page load and on click.
The "data-voted" attribute has value 1 for upvote, value -1 for downvote and 0 for no vote. The "data-id" attribute is the unique post id.
How can I achieve to add / remove the "voted-toggle" class to indicate which way the user has voted on page load and on click?

IE11 delays render until mouseover or mouse click with React

I've this functionality which allows user know when a change has been performed on an item by adding an orange dot next the item icon, so if this is a new item and user clicks on the icon a modal is displayed with a form, if any change on that form is perfomed the orange dot (which is an icon as well) appears next to the item's icon. This functionality is working with Chrome and Edge but I'm also supporting IE11, the problem is IE11 is not showing the orange dot icon when a change is performed. I reviewed the dom and the orange icon is there but is not visible until I click on the dom's element or when I click the section where the orange dot is suppose to be, in that moment the orange dot appears.
following is the original state, when I click the comment icon a modal appears with the form:
<div class="action-container">
<span class="action-comment">
<i class="comment-icon" aria-hidden="true"></i>
</span>
</div>
after a change is performed I got this in the dom:
<div class="action-container">
<span class="action-comment">
<i class="comment-icon" aria-hidden="true"></i>
</span>
<span class="action-orange-dot">
<div class="orange-dot"></div>
</span>
</div>
but in the browser the result is the same:
until I click where the orange dot is suppose to be
I have the compatible meta tag but there is no difference with or without it.
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
any idea?

How to make webpage not scroll to the top when data displayed on it changes

Sorry for weird title, but couldn't find better explanation.
I have spring webapp, which on one page has content similar to social network. In angularjs controller I have an array in which I store posts to be displayed on view. So with ng-repeat I am displaying the content of that array in controller. On the bottom of the page I have button that loads more posts (since I don't want all possible posts to be displayed at once), and I append new posts to array, and the list on actual page updates and show loaded posts, but when I click on that button that loads more posts browser scrolls to the top of the page, is there a way to somehow disable that scrolling to the top?
This is the shortened version of my code.
html:
<div class="main" ng-model="activities" ng-repeat="activity in activities">
<div class="helper" >
<center>
<p><img alt="{{activity.user.username}}" ng-src="pictures/{{activity.user.picture}}" height="50px"> </img> </p>
<p><a href="#" >{{activity.user.username}} </a></p>
<br />
<p class="date">{{activity.activity.datum}} </p>
<p>
{{activity.activity.tempo}}/km {{activity.activity.distance}} km</p>
<br />
</center>
</div>
<br/><br/>
</div>
<center>Load more</center>
</div>
js
$scope.loadMore = function(){
$scope.getActivities(3 , $scope.currentPage+1 , $scope.loggedInUser.username).then(function(response){
$scope.currentPage++;
for(var i = 0; i<response.length; i++){
$scope.activities.push(response[i]);
}
});
}
Every time $scope.activities is changed, that change is shown on the view automatically, but it also scrolls the page to the top.

<a href="#"> takes you to the top of the page. To prevent that behavior from your links, you can do any of the following
Use href="#!" (where ! is not an id of any element on the page)
Use href="javascript:void(0)"
Omit the href attribute completely, and style the link using CSS
See this question for more information.

Bootstrap toggle element and JavaScript

I have and element that should be displayed or hidden from different menu entries (e.g. its visibility toggled), and a toggle button that should switch the visibility of the element, but there are menu locations the element should be visible regardless of the toggle button state.
<a class="menu-bar" data-toggle="collapse" href="#menu">
<span class="bars"></span>
</a>
<div class="collapse menu surcarte" id="menu">
<div class="dansmenu">
some nice stuff comes here
</div>
</div>
HTML above is OK. But if add this code in a top menu bar :
<a data-toggle="collapse" href="#menu" onclick="somejavascript();return false;"> link 1 </a>
<a data-toggle="collapse" href="#menu" onclick="somejavascript();return false;"> link 2 </a>
<a data-toggle="collapse" href="#menu" onclick="somejavascript();return false;"> link 3 </a>
Each link will toggle the #menu element, first showing it, then hiding it and so and. But i want them to allways show the #menu element. Only the element with the "bars" class should act as a toggler.
I tryed to solve it with $("#menu").show();
but the jquery command seams not working.
Then i tryed the following to find out what happened:
click the link of class "menu-bar" to make the div appearing.
use the command $("#menu").hide(); => WORKS
click the link of class "menu-bar" to make the div disapear : DOES NOT WORK ANYMORE
click the link of class "menu-bar" to toggle the div once more : no effect
use the $("#menu").show(); => WORKS again
click the link of class "menu-bar" to make the div disapear : WORKS
use the $("#menu").show(); => DOSN'T work anymore.
It seems that there is a double imbricated toggle command and i can't escape it.
How do i write a working $("#menu").show(); ?

I finally found out my problem.
I was trying this :
$("#menu").toggle()
where the right syntax was :
$("#menu").collapse('toggle')
Special thanks to Rory McCrossan who showed me the strating point.

Cannot a Back button to nested list (Latest Version)

I'm having problems trying to get the back button to show in a nexted list. I can see that the same is happening to your demo's here:
http://jquerymobile.com/test/#/test/docs/lists/lists-nested.html
You can see the problem here:
http://jquerymobile.com/test/#/test/docs/lists/lists-nested.html&ui-page=Animals-8
or just click any list.
Here is my actually issue:
<ul data-role="listview" data-inset="true">';
<li data-icon="info">
<h3 class="ui-li-heading">Heading here</h3>
<p class="ui-li-desc">Author: <strong>some author</strong></p>
<p class="ui-li-desc">Description: <strong>some description</strong></p>
<ul data-role="listview" data-inset="true" data-add-back-btn="true">
<li>sometthing here</li>
</ul>
</li>
</ul>
Is this a bug or I'm I forgetting something?
Thanks
UPDATE: Another example:
<ul data-role='listview'>
<li>
<li><div>Some Text</div><p>ddd</p>
<ul data-role='listview'>
<li>
some text here
</li>
</ul>
</li>
</li>
</ul>
No back button. How do I make the back button appear?

To reenable the back button simply add data-add-back-btn="true" to the page container:
Related: JQuery Mobile Latest 03 June 2011 Version - No back button
You are using the tests and not the demo, so I guess this would be the latest (or close to) build.
http://jquerymobile.com/test/#/test/docs/lists/lists-nested.html
http://jquerymobile.com/demos/1.0a4.1/#docs/lists/index.html
UPDATE:
http://jquerymobile.com/test/docs/toolbars/docs-headers.html
Adding Back buttons
jQuery Mobile has a feature to automatically
create and append "back" buttons to any header, though it is disabled
by default. This is primarily useful in chromeless installed
applications, such as those running in a native app web view. The
framework automatically generates a "back" button on a header when the
page plugin's addBackBtn option is true. This can also be set via
markup if the page div has a data-add-back-btn="true" attribute.
If you use the attribute data-rel="back" on an anchor, any clicks on
that anchor will mimic the back button, going back one history entry
and ignoring the anchor's default href. This is particularly useful
when linking back to a named page, such as a link that says "home", or
when generating "back" buttons with JavaScript, such as a button to
close a dialog. When using this feature in your source markup, be sure
to provide a meaningful href that actually points to the URL of the
referring page (this will allow the feature to work for users in
C-Grade browsers. Also, please keep in mind that if you just want a
reverse transition without actually going back in history, you should
use the data-direction="reverse" attribute instead.
Maybe try:
$(document).bind("mobileinit", function(){
$.mobile.page.prototype.options.addBackBtn = true;
});