I am relatively new to learning HTML, CSS and JavaScript. I am creating a sort of test site, just for learning purposes and have started diving in to mobile responsive websites.
I have a test site which has a mobile navigation button hidden, with a CSS media query to set the display to block and hide the normal navigation menu. I also have list items for the mobile navigation menu. To show/hide this, I've created a .toggleClass() jQuery function:
function clicktouchmenu()
{
$('#menuico').on('click touch', function()
{
var $mobmen = $(".mobilemenu");
$mobmen.toggleClass('clicked');
});
};
The above is working, but I wanted to add a .slideToggle() to the menu for effect. If I add this in underneath the .toggleClass() as $('.clicked').slideToggle(); the menu acts a bit strange, if I click on the menu icon, nothing happens, but repeatedly clicking, it seems to kick in to life and start working sliding up and down.
As I am fairly new to this, I expect I am doing this completely wrong, or over complicating something which is probably quite simple.
Try removing the clicked class and using only slideToggle() on the mobilemenu like so:
$('#menuico').on('click touch', function()
{
var $mobmen = $("#mobilemenu")
$mobmen.slideToggle();
});
I think the problem is that if the clicked class is toggling whether or not the menu is shown then it's interfering with slideToggle(). This is because the purpose of slideToggle() is to make something look like it's sliding in and out of view (aka toggling whether or not it's hidden but with an animation). So you only need one or the other but slideToggle() obviously includes the animation.
I've added a fiddle, but it's just a demo as I don't know what your HTML or CSS is like:
fiddle: https://jsfiddle.net/668mucca/3/
Link to the entry on slideToggle() in the jQuery docs for good measure: http://api.jquery.com/slidetoggle/
Related
I've written a jQuery code that adds and removes css classes from the accordion based on some condition. It works fine the fist time it loads but when I click on any links on the page and go to another page from there, it doesn't work when I come back to the same page.
Is it jQuery or React?
Here's my jQuery code.
$(function(){
$(".accordion").on("click", ".accordion-header", function(e){
if(!$(this).hasClass("has-add-bg")){
$(".accordion-item").removeClass("add-bg");
$(".accordion-header").removeClass("has-add-bg");
$(this).addClass("has-add-bg");
$(this).parent().addClass("add-bg");
}else{
$(this).parent().removeClass("add-bg");
$(this).removeClass("has-add-bg");
$(".accordion-item").removeClass("add-bg");
}
})
})
I tried using state but the problem is I want to add or remove the class of only the accordion I've clicked on. Not sure how to achieve that result just with state so wrote jQuery.
on my website I have a mobile menu. When I click a link a link in the menu the menu doesn't disappear.
From reading other posts I have a quite good idea what I have to do. But I don't get the code working, because I am completely new to javascript and probably just do something wrong.
The div I want to hide when clicking a link (in this same div) is defined with a class mobilemenuitems
As I already mentioned the links are within this div.
unfortunately I cannot add a class or an id to the links because I only have frontend access.
The website is here.
https://test.vereinonline.org/HTC_Uhlenhorst/?module=*Tennis Please note that the menu button only appears on mobile devices (width < 1000px)
In this jsfiddle the Problem is scaled down to the root.
http://jsfiddle.net/TheBB23/d6s3Ln50/3/
I am pretty sure that the problem is with the javascript:
document.getElementById(mobilemenuitems a).addEventListener('click', function(e) {
document.getElementById('mobilemenuitems').remove();
});
I believe you are trying to hide the div with class mobilemenuspace when any of the links inside it are clicked. To do so, you can use the following -
$('a').click(function(e){
e.preventDefault();
if ($(this).parents('.mobilemenuspace').length) {
$('.mobilemenuspace').hide();
}
});
Working sample - https://jsfiddle.net/zv18xuhL/
A pure JS solution forked from your Fiddle -
http://jsfiddle.net/e69snqjk/
I have a basic JS flashcard game I made. There are 12 "answer buttons" for a user to choose from.
On mobile, the answer buttons retain the hover effect/focus(?) after being tapped (this does not happen on desktop, any browser). This is very confusing from a user standpoint as it can appear as though the app/flashcard is stuck or not updating.
I'm using Bootstrap 4.1.
Here is my button code, but there's nothing unusual about it:
<button type="button" id="E" class="btn btn-lg btn-info ansBtn" value="E">Answer</button>
I've looked at similar questions (but they were regarding bootstrap 3), which suggested using either an anchor tag instead of the button tag, but that didn't work (with and without the href attr).
I've also tried another suggestion to include this bit of jQuery, but it doesn't seem to work with 4.1 either. I've used button ID, and other classnames, but it has not worked.
$(".btn").mouseup(function(){
$(this).blur();
});
Suggestions? Thanks!
Update
So here is the latest. I've added the below CSS. This give mobile users the experience I want (a "flash" of background-color/border-color change only on click/tap). HOWEVER, now when using my macbook pro and TAPPING with my trackpad, the effect does not occur! It works when I click with the trackpad, but not tap with the track pad. :(
.btn.btn-info {
background-color: #17a2b8
}
.btn-info:not(:disabled):not(.disabled).active,
.btn-info:not(:disabled):not(.disabled):active,
.show > .btn-info.dropdown-toggle {
background-color: #117a8b;
border-color: #10707f;
}
You can always add a .setTimeout() function on the objects .onHover() or .onClick() event. This will allow your flashcard to be flipped/blurred after a certain amount of time. Alternatively, you can simply change the functionality of your application for mobile browsers and make it so you have to click to see the answer. You should also look into the .focus() method and possibly try to change focus to another element on the page. If none of this is working, it is probably some quirk with jQuery. I would suggest trying to selct the element this way:
document.querySelector(".btn").onmouseup = function(){
this.blur();
});
or:
document.querySelector(".btn").onmouseup = function(){
document.body.focus();
});
I'm currently implementing a bootstrap accordion widget, and would like to place an element on each panel's body that allows me to switch the currently open panel (expands another and hides the others). I'm currently doing this by using a jQuery wildcard selector to collapse all the panels, and then showing the one I need:
$(".displayPanel").click((e) => {
$("[id^='collapse']").collapse('hide');
$("#collapse" + e.target.text).collapse('show');
})
For some reason this seems to affect the default Bootstrap behavior of opening and closing panels (Panels end up getting left open, etc). Here is a minimal example to demonstrate the issue. Is there a better way to go about accomplishing something like this?
Thanks in advance.
You must to wait for "hide" and then you can run "show". Here the updated fiddle.
Probably it would be cleaner if there was an event to indicate when "Hide" is completed.
$(".displayPanel").click((e) => {
$("[id^='collapse']").collapse('hide');
setTimeout(function(){
$("#collapse" + e.target.text).collapse('show');
},1000);
});
I'm looking for javascript that will allow more HTML to appear on a website when a user clicks on an icon. I'm working on my first ever mobile design, and am building a prototype with html,css and javascript. Here is what I have so far: http://www.patthorntonfiles.com/snk_mobile
What I want to happen is when users click on the search icon at the top, a search box appears. I don't want the jquery accordion effect or something similar. I just want some HTML to appear and then disappear when a user clicks on the icon again or hits search.
Any recommendations for code or libraries for me to look at what be great. I don't need you to give me the code, but my Google searches aren't turning up exactly what I'm looking for.
Here's a non-jQuery solution:
document.getElementById("identifier").style.setProperty("visibility", "hidden");
and
document.getElementById("identifier").style.setProperty("visibility", "visible");
I know you said you don't want to use the jQuery accordion effect, but using jQuery to animate the opacity?. Please see below.
$("#idClicked").click(function() {
$("#searchBox").fadeTo("fast", 1);
});
jQuery's hide() and show() will do exactly that (they don't have any accordion effect, they just appear and dissapear with no ornaments).
$('#HtmlId').hide();
$('#HtmlId').show();
Additionally you get toggle(), to hide if shown and show if hidden:
$('#HtmlId').toggle();
---- Edit ----
After reading your comment, imagine you have the html:
<li><img id='hideShowIcon' src="patthorntonfiles.com/snk_mobile/search.gif"; width="50px'"/></li>
And the div to hide/show is:
<div id="search"> <gcse:search></gcse:search> </div>
Then you bind the click event to the image with the callback function performing the toggle:
$("#hideShowIcon").click(function() {
$('#search').toggle();
});
----- Edit 2-----
I saw your site and you don't have a document ready function. Basically it should look like this:
$(document).ready(function() {
$("#hideShowIcon").click(function() {
$('#search').toggle();
});
});
If you don't add this, jQuery tries to bind the action to an element that doesn't exist yet.