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/
Related
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/
I'm using bootstrap's default navbar. I want the active page to be represented by a dark gray block dynamically upon clicking the link. I can't seem to get it to work. Here's the code I have so far. It's similar to this question except I'm trying to integrate it with Bootstrap.
Codeply went down?
New demo with edits here.
I think you want
$(".navbar-nav a").click(function() {
$(".navbar-nav > .active").removeClass("active");
$(this).parent().addClass("active");
return false;
});
Can anyone help me here? Js bin link. I am trying to build a photo upload div for the user. My plan is if a user hovers over the picture i show him option to upload a picture. If he leaves the mouse he sees the profile picture only. But the problem there is when the user leaves the mouse,mouseleave event hides entire div including the picture. I am not expert in jquery. Mistakes are the i way i hide this i think. But i can't figure out how only to hide the div created in mouseenter event. This is the script.
var imgUploadDiv = $('#promo-area');
imgUploadDiv.mouseenter(function() {
imgUploadDiv.append( "<div class='uploader'> <i class='fa fa-picture-o fa-4x' id='uploader-icon'></i></div>" );
});
imgUploadDiv.mouseleave(function() {
imgUploadDiv.hide();
});
Please check out the js bin link i mentioned to understand the problem clearly.
try using $( ".uploader" ).hide(); instead.
What you're doing now is hiding the entire div because you're using your cached variable imgUploadDiv which is set to mean the entire uploading area.
do it like this if you want only to hide the childs of imgUploadDiv which have the class .uploader
imgUploadDiv.mouseleave(function() {
imgUploadDiv.children('.uploader').hide();
});
I have a div in the middle of my web page that is placed in front of an iframe the with links along side of it. I would like to hide the div once any one of the links are clicked. How would I go about doing this using javascript? I am very new to this so please be as descriptive as possible so that I can understand.
Here is some of my html code. I have a number of links that appear in an iframe. I have the logo div positioned on top of the iframe and it loads when you enter the site. However I want to hide the logo when you click on anyone of the links.
<li>My Resume</li></br>
<li>My Course Work</li></br>
I used the jquery code noted by Dolours below along with extra coding within my the body of my html code, when you click on a link then the div disappears as I intended but then it reappears once you click on another link. I want it to disappear and stay away. Here is the additional code that I came up with
About Me
Does anyone know how I can make my logo stay away?
You can do this using jQuery:
// Get the iFrame jQuery Object
var $MyFrame = $("#iframeid");
// You need to wait for the iFrame content to load first
// So, that the click events work properly
$MyFrame.load(function () {
var frameBody = $MyFrame.contents().find('body');
// Find the link to be clicked
var link = frameBody.find('.link_class');
// Set the on click event for the link
link.on('click', function() {
// Hide the div inside the iFrame
$('#divID').hide();
});
});
You can use the code below
$('a').click(function() {
$('#divID').hide();
});
Assuming all links will load the iframe.
I've been trying to get this code to work. I have a hidden div that shows a flash video using the object/embed method.
This is the js code I'm using.
jQuery(document).ready(function(){
jQuery("a[id^='scrshot_']").fancybox(
{
'autoDimensions' : false,
'width' : 640,
'height' : 360
});
return false;});
I'm using this method I found on this site http://www.jdmweb.com/resources/fancy_videos and pretty easy to implement. I use dynamically created ID tags. BUT for some reason fancybox will open but the div inside stays hidden. When I use firebug to look at it, it shows the flash object inside but it still has the display:none attribute attached to it. How do you get it to show the contents inside that div and not the whole div? If the div is showing and use the link, fancybox open with the player fine. Obviously that wont work because I don't want the video to show until it launches in fancybox.
Example of my html code.
<a class='scrshot' id='scrshot_1' href='#showvid_1'>Click Here</a>
<div class='showvid' id='showvid_1'>my embedded code here</div>
Instead of hiding the div, make it visible but wrap it inside another div that is hidden.
(I don't know why fancybox doesn't toggle the visibility, rather annoying.)
try adding this to your jQuery(document).ready(function(){
jQuery('.scrshot').live('click',function(){
jQuery('.showvid').hide(); //hide any that might be open
jQuery(jQuery(this).attr('href')).show(); //show the div we clicked for
});
Have you looked at fancybox documentation/blog?
http://fancybox.net/blog (4. Show youtube clips. this must help);
http://fancybox.net/howto;
http://fancybox.net/api;