We Keep Coding

CSS Styles not being removed after class is removed

I am sitting with an issue where CSS styles don't get removed from an anchor tag when the css class is removed via AJAX, it only happens on a mobile device. This doesn't happen when using a desktop browser.
Have a look here using a mobile device.
You will note that the filters turn red when you select them, but deselecting them doesn't remove the red.
The code that is used there:
$('.tagsContainer .tagsContainerA').click(function () {
vm.alphabet("");
clearAlphabet();
$('.pagination.alphabet .alphabetAll').addClass('currentPage');
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
}
else {
$(this).addClass('selected');
}
return false;
});
Any ideas what could be causing this on a mobile device?

The problem has to do with the hover, not the click function.
This happens because the hover is triggered in mobile while the element is focused also.
Just add this to your css:
#media screen and (max-width: 768px) {
.places-filter .places-tags li:hover {
background-color: #d1d1d1;
background: #d1d1d1;
}
}
This way you will 'disable' the hover function and only have the click one in mobile.
Another solution is placing the hover effect only in screens bigger than X amount.

Javascript/ Jquery slide menu not working in Chrome

I've been working on a website and when testing it out on a VM the slide menu didn't work. I've since managed to replicate the error in newer versions of Chrome The page is
http://paperfromabc2xyz.co.uk/
When you shrink the screen size small enough to loose the main menu you'll get a NAV Burger icon. Clicking this should slide a menu in. The Javascript file is 'App.JS'

The click does not get caught, somehow because the span does not have dimensions (the :before element does not expand it).
Add this to your styles:
span.Burger{ display: inline-block; }

for a start use a library as Jquery to simplify your code; then put your javascript code in an $(document).ready(function () {} then then add to your css : span.Burger{ display: inline-block; }

Responsive menu: on hover submenu shows error

Big story short: I created a responsive menu from a tutorial. The menu is supposed to show the submenu when you hover on portfolio button, and when on mobile mode you need to press the button to show the submenu (that works fine). The problem is that the tutorial had a error: if you press the portfolio button in desktop mode the submenu will not show again unless you press (click) the button, like in mobile mode.
Here's the live example: http://armandorodriguez.pe/info
I tried to write the code here but didn't understand the instructions, so here's the jsfiddle: jsfiddle.net/x44w1twf/
So basically what i need is that if I'm on desktop mode it always shows the submenu on hover, even if I press the portfolio button, and in mobile only when i press the button. Now I suppose this can be solved with a simple code in js, but I don't know nothing of js, so any help will be appreciated.

The thin is that when you click on the element to hide it that set the style inline display: none and that overwrite the style:
header nav ul li:hover .children {
display:block;
}
So add !important to the style like this:
header nav ul li:hover .children {
display:block !important;
}
Here a working jsfiddle example
For the normal behavior in mobile just add the style inside a media like this:
#media screen and (min-width: 800px) {
header nav ul li:hover .children {
display:block !important;
}
}

How can I remove caret on Bootstrap 3 menu and show dropdown on hover?

I have set up Bootstrap 3 on my Wordpress theme and I have got the submenu working correctly on a mobile (grey arrow to indicate it is a dropdown which opens on click).
On a desktop I would like the dropdown to work on hover without the arrow image. Is there a way to do this without affecting the mobile layout? see this.

I get it, you don't want the users to see the "caret" on the desktop. This could be achieved with minimal amount of Media Queries. It should be something along these lines. I got the Desktop breakpoint Media query code right from Bootstrap 3 Docs.
#media (min-width: 1200px) {
.navbar-nav .caret {
display:none;
}
.dropdown:hover .dropdown-menu {
display: block;
}
}

You can use Jquery hover to activate the drop-down
Try this
$(document).ready(function() {
$('.nav li.dropdown').hover(function() {
$(this).addClass('open');
}, function() {
$(this).removeClass('open');
});
if($(window).width() > 750)
{
$('b.caret').hide()
}
});
DEMO

Hide Div When Clicked

I've got a little HTML/CSS/JQuery drop down menu working. My pseudo code for it is:
function closeMenus() {
$('.subMenu').css('display', 'none');
}
#mainMenu ul li .subMenu {
display: none;
position: absolute;
}
#mainMenu ul li:hover .subMenu {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainMenu">
<ul>
<li>
Menu Header
<div class="subMenu" onClick="closeMenus();">Menu Content</div>
</li>
</ul>
</div>
The CSS works so when someone hovers over Menu Header, the subMenu appears below it and disappears when the mouse leaves the menu. My problem comes when a user clicks an item in the menu; I'd like to hide the menu. The JavaScript hides the menu fine but when the user mouses over the menu header again, it doesn't reappear. It appears that CSS won't override the JavaScript display property. Most, if not all, of the links won't be going to other pages, just calling more JavaScript.
Anyone have any ideas how to hide the sub menu on click so that it will be again visible, or do I need more Javascript to show the menu every time someone hovers?

Use JQuery more fully -- look into the .toggle() command and bind it via click:
$('.subMenu').click(function() {$(this).toggle();});
Then you can eliminate most of your other code.

You're trying to do half of it with CSS and half of it with jQuery. Just do it all with jQuery: http://jsfiddle.net/hw5qr/
$('.subMenu').click(function() {
$(this).hide();
});
$('#mainMenu').hover(function() {
$(this).find('.subMenu').show();
}, function() {
$(this).find('.subMenu').hide();
});

Stryle attribute has highest priority.
$('.ftpBrowseSubMenu').css('display','none');
make
<div style="display:none">
, so rule
#mainMenu ul li:hover
has lower priority against style attribute. So, you have to do everything with javascript.

Like you already said are element styles stronger than css styles (unless you use !important). So you have to to do everything with Javascript what shouldn't be to hard. You have just to register two more event listener: onmouseover and onmouseout. With them you can set the display property to the correct value and it will work this way.