I have two buttons on my website, they should show content when someone clicks on the button. But instead of showing content, the button takes me back to the top of the page.
jQuery Code
/********************
* Enable Vacature Dropdown
* *****************/
var vacatureClickHandler = $(function(){
$(".vacatures li").on("click", "a", function(event){
if(event.target.attr('id') == 'link-0'){
$('#content-0').toggleClass('active').fadeToggle();
event.preventDefault();
} else if(event.target.attr('id') == 'link-1'){
$('#content-1').toggleClass('active').fadeToggle();
event.preventDefault();
}
});
});
$(".vacatures li").on("click", "a", vacatureClickHandler);
HTML for the jQuery
<div class="section vacatures">
<h2>VACATURES</h2>
<h3>OP ZOEK NAAR NIEUWE <span>COLLEGA's</span></h3>
<ul>
<li>
<a id="link-0" href=""><span>OPEN SOLLICITATIE</span><span><img src="../../img/arrow_down.png"</span></a>
<p id="content-0">Blablabla</p>
</li>
<li>
<a id="link-1" href=""><span class="strike">ALLROUND DESIGNER</span><span class="hired">HIRED!</span><span><img src="../../img/arrow_down.png"/></span></a>
<p id="content-1">Blablabla</p>
</li>
</ul>
</div>
Here's the jsFiddle, what it has to do: someone clicks on the dropdown button and then the content shows.
1) You're forgot to include jQuery in jsFiddle
2) Place event.preventDefault(); outside of your if else condition
3) Use this.id instead of event.target.attr('id')
Final code for your click function look like:
$(".vacatures li").on("click", "a", function (event) {
event.preventDefault();
if (this.id == 'link-0') {
$('#content-0').toggleClass('active').fadeToggle();
} else if (this.id == 'link-1') {
$('#content-1').toggleClass('active').fadeToggle();
}
});
Updated Fiddle
If you just have one sibling next to the link you don't need the id's, don't need to "switch" and can use the siblings() method. See this (jsfiddle below):
JS
$('ul.nav > li > a').on('click', function(e){
e.preventDefault()
$(this).siblings().slideToggle();
})
CSS
.content {
display:none;
}
HTML
<div class="section vacatures">
<h2>VACATURES</h2>
<h3>OP ZOEK NAAR NIEUWE <span>COLLEGA's</span></h3>
<ul class="nav">
<li>
<span>OPEN SOLLICITATIE</span>
<p class="content">Blablabla</p>
</li>
<li>
<span class="strike">ALLROUND DESIGNER</span>
<p class="content">Blablabla</p>
</li>
</ul>
</div>
http://jsfiddle.net/josfaber/W835D/
Related
So I have a Login form within a li tag.
HTML
<div class='container'>
<ul class="pull-right">
<li>A</li>
<li>E</li>
<li>Login
<div class="eagle form">
<form>
...
</form>
</div>
</li>
</ul>
</div>
I want to show() the form when users click on login, and hide()the form when users click elsewhere, using jquery.
I use this jquery code after read this answer: How to hide ul using jquery when users click elsewhere
JS
$(function () {
var sesion = $('.eagle.form');
$('.lion').on('click', function (e) {
e.stopPropagation();
sesion.toggle();
});
$(document).on('click', function (e) {
sesion.toggle();
});
});
However, when login form shows up and I want to interact with the fields on it, it hides again.
How can I fix the code? I think I'm missing one line.
Any suggestions to solve the problem are appreacited!
Demo
HTML:
<ul>
<li>
test
</li>
<div class="meh">
<li> Form
<ul class="form">
<li>
<form>
<input type="text" />
<input type="submit" />
</form>
</li>
</ul>
</li>
</div>
</ul>
Js:
$(".form").hide();
$(".toggleForm").click(function() {
$(".form").toggle();
});
$(document).on("click", function(e) {
if ($(e.target).closest(".meh").length == 0) {
$(".form").hide();
}
});
Is this what you're looking for?
Using the solution from this question: Use jQuery to hide a DIV when the user clicks outside of it
$(document).mouseup(function (e) {
var container = $('.form');
if (!container.is(e.target)
&& container.has(e.target).length === 0) {
container.hide();
}
$('HERE-GOES-li-CONTAINER').click( function(event) {
$('.form').toggle();
});
});
When I click on the menu, the menu shows up, but when the pointer is moved away from the menu, it hides after 2-5 seconds.
I want the menu to toggle when clicked, and explicitly hide when I click anywhere else on the page, as seen on this demo.
this fiddle
My code is as follows:
$(document).ready(function() {
$(".MyAccount").click(function() {
var X = $(this).attr('id');
if (X == 1) {
$(".submenu").hide();
$(this).attr('id', '0');
} else {
$(".submenu").show();
$(this).attr('id', '1');
}
});
//Mouseup textarea false
$(".submenu").mouseup(function() {
return false
});
$(".myaccount").mouseup(function() {
return false
});
//Textarea without editing.
$(document).mouseup(function() {
$(".submenu").hide();
$(".MyAccount").attr('id', '');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="MyAllMenu" style='margin: 50px'>
<div class="MyMenu">
<a class="MyAccount">
<span>My Settings</span>
</a>
<div class="submenu" style="display: none;">
<ul class="AllMenuList">
<li>
Dashboard
</li>
<li>
Profile
</li>
<li>
Settings
</li>
<li>
Send Feedback
</li>
<li>
Sign Out
</li>
</ul>
</div>
</div>
</div>
check on FIDDLE . onclick hide/show menu working now . i have added not(".myaccount",".submenu") to mouse up event of document.
$(document).ready(function() {
$(".MyAccount").click(function () {
var X = $(this).attr('id');
if (X == '1') {
$(".submenu").hide();
$(this).attr('id', '0');
}
else {
$(".submenu").show();
$(this).attr('id', '1');
}
});
//Textarea without editing.
$(document).not(".myaccount",".submenu").mouseup(function () {
$(".submenu").hide();
$(".MyAccount").attr('id', '');
});
});
The problem was that i have a dictionary application that reads any text from the page on hover, and when disabling this feature, every thing works as it should be.
I didn't notice that because I tried on two computers and it happened that i was using this app on both of them.
i have this html and javascript for my menu button
THIS IS THE HTML
MENU
<div class="mobilenav">
<li>HOME</li>
<li>SERVICES</li>
<li>WORK</li>
<li>TALK</li>
</div>
ICON
<a href="javascript:void(0)" class="icon">
<div class="MENU">
<div class="menui top-menu"></div>
<div class="menui mid-menu"></div>
<div class="menui bottom-menu"></div>
</div>
</a>
AND JS
$(document).ready(function () {
$(".icon").click(function () {
$(".mobilenav").fadeToggle(500);
$(".top-menu").toggleClass("top-animate");
$(".mid-menu").toggleClass("mid-animate");
$(".bottom-menu").toggleClass("bottom-animate");
});
});
i changed the ".icon" for an "a" so the menu closes as soon as i picked any option, now anytime i clicked on the scroll down button, contact and any other tag button the menu opens, is there any way to stop this from happening?
$("a") selects all links on the page.
Instead you only want the select .icon + the links in the .mobilenav, so you need to do $(".icon, .mobilenav a").
Note that JQuery selectors work almost the same as CSS selectors.
$(document).ready(function () {
$(".icon, .mobilenav a").click(function () {
$(".mobilenav").fadeToggle(500);
$(".top-menu").toggleClass("top-animate");
$(".mid-menu").toggleClass("mid-animate");
$(".bottom-menu").toggleClass("bottom-animate");
});
});
I have this html:
<ul id="ul_places_list">
<li data-placesCode="6">
<a class="places_dtl" href="#">
<div>
<img src="http://dev.mysite.it/images/9_1418893365.jpg">
</div>
<label>Coming Out</label>
</a>
</li>
<li data-placesCode="8">
<a class="places_dtl" href="#">
<div>
<img src="http://dev.mysite.it/images/9_1418893594.jpg">
</div>
<label>Friends</label>
</a>
</li>
</ul>
and this javascript
$(document).delegate('a','click',function(){//used to switch page
console.log('delegate executed');
var a = $(this);
if(a.attr('href') != '#'){
event.preventDefault();
toPage(a.attr('href'));
}
});
$(document).ready(function(){
$('#ul_places_list li').click(function(){
var code = $(this).attr('data-placesCode');
console.log('code is: ' +code);
});
});
The problem is that when I click on list element only the delegated click on the element fires and not the event on the "li" element.
The "li" elements are added after an Ajax call.
What's going? What am I missing?
This )}; was the problem. Should be this });.
$(document).delegate('a','click',function(){//used to switch page
console.log('delegate executed');
var a = $(this);
if(a.attr('href') != '#'){
event.preventDefault();
toPage(a.attr('href'));
}
});
$(document).ready(function(){
$('#ul_places_list li').click(function(){
var code = $(this).attr('data-placesCode');
console.log('code is: ' +code);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<ul id="ul_places_list">
<li data-placesCode="6">
<a class="places_dtl" href="#">
<div>
<img src="http://dev.mysite.it/images/9_1418893365.jpg">
</div>
<label>Coming Out</label>
</a>
</li>
<li data-placesCode="8">
<a class="places_dtl" href="#">
<div>
<img src="http://dev.mysite.it/images/9_1418893594.jpg">
</div>
<label>Friends</label>
</a>
</li>
</ul>
The below answer actually is just a different implementation of your code.
The real answer is
This )}; was the problem. Should be this });.
From the other answer: https://stackoverflow.com/a/27571915/561731
But you really should be using .on in new code :-)
Old answer:
Try using .on
So you can do:
$(document).on('click', 'a', function () {
//event for anchor tag
});
$(function () {
$('#ul_places_list').on('click', 'li', function () {
//stuff for li click event
});
});
if you add the "li" elements in a AJAX call you should add the click event after the elements load. Add this when ajax call end:
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(addEventToControls)
function addEventToControls()
{
$('#ul_places_list li').click(function(){
var code = $(this).attr('data-placesCode');
console.log('code is: ' +code);
});
}
The add_endRequest Manager fire the handler when a Ajax Call end.
i'm having some trouble.
I'm doing an asp.net mvc3 application and i downloaded some css menu, the thing is i want to keep the menu active after menu tab its clicked and only change when another one is clicked.
here's the code of the menu on _Layout.cshtml
<nav>
<div class="cssmenu">
<ul>
<li class='active'><span>#Html.ActionLink("Início", "Index", "Home")</span></li>
<li><span>#Html.ActionLink("Tarefas Contabilidade", "SelectEmpresa", "Empresa")</span></li>
<li><a href='#'><span>Clientes</span></a>
<ul>
<li><span>#Html.ActionLink("Listar clientes", "ListarEmpresas", "Empresa")</span></li>
</ul>
</li>
<li><a href='#'><span>Balancetes</span></a>
<ul>
<li><span>#Html.ActionLink("Listar registos", "ListaBalancetesPorSalaoMes", "Balancete")</span></li>
</ul>
</li>
<li><span>#Html.ActionLink("Sobre", "About", "Home")</span></li>
</ul>
</div>
</nav>
and i have this script:
<script type="text/javascript">
$("li").click(function () {
$("li").removeClass("active");
$(this).addClass("active");
});
</script>
the first tab that i put there class= "active" works, but the script doesn't seem to work when i click another menu tab, it only shows the first one active
a little help please :)
UPDATED
This is the rendered html:
<nav>
<div class="cssmenu">
<ul>
<li><span>Início</span></li>
<li><span>Tarefas Contabilidade</span></li>
<li><a href='#'><span>Clientes</span></a>
<ul>
<li><span>Listar clientes</span></li>
<li><span>Listar salões</span></li>
<li><span>Gerir empregados</span></li>
<li><span>Novo cliente</span></li>
<li><span>Novo salão</span></li>
</ul>
</li>
<li><a href='#'><span>Balancetes</span></a>
<ul>
<li><span>Listar registos</span></li>
<li><span>Upload novo balancete</span></li>
<li><span>Mapa Resultados/Gráfico</span></li>
<li><span>Mapas Contabilidade/Gestão</span></li>
<li><span>Análise Rentabilidade</span></li>
<li><span>Alterar taxas</span></li>
</ul>
</li>
<li><span>Sobre</span></li>
</ul>
</div>
</nav>
i dont know if i should put the javascript inside the div or something xD
Ty
You can use child selector which selects all direct child elements, Try the following:
$(document).ready(function(){
$(".cssmenu > ul > li").click(function () {
$(this).siblings().removeClass("active");
$(this).addClass("active");
});
})
If you want to select the li tags of the inner ul tags, you can try:
$(document).ready(function() {
$("ul:eq(1) > li").click(function() {
$('ul:eq(1) > li').removeClass("active");
$(this).addClass("active");
});
})
Can you try:
<script type="text/javascript">
$("li a").bind('click', function () {
$("li").removeClass("active");
$(this).addClass("active");
});
</script>
li items are not clickable, so you must bind the click event to a.
try
$("li").click(function (e) {
e.preventDefault();
$(this).siblings().removeClass("active").end().addClass("active");
});