drag and drop eventim works but I can't run it with the buttons I added.
I know I should run as on click, but I didn't get any results.
Can you help? Thanks ...
https://codepen.io/celilsahin/pen/BqGvLm
<ul class="handles list">
<li class="red"><span>::</span></li>
<li class="purple"><span>::</span></li>
<li class="orange"><span>::</span></li>
<li class="yellow"><span>::</span></li>
<li class="blue"><span>::</span></li>
</ul>
<button>Add</button>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.sortable.js"></script>
<script>
$(function(){
$('.handles').sortable({
handle: 'span'
});
("button").click(function(){
$( ".handles" ).append($('<li class="red"><span>::</span></li>').hide().fadeIn(300));
});
});
</script>
You can get it adding $('.handles').sortable('refresh'); in code
$("button").click(function(){
$( ".handles" ).append($('::').hide().fadeIn(300));
$('.handles').sortable('refresh');
});
Related
In my HTML I have ol and li this is my HTML
and I have script for those links, like when I click on it i kept a alert to check it its not working
$('#namesId ol li').click(function() {
alert('clicked');
//ToDo
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="col-sm-4" id="namesId" style="padding:0px">
<ol style="padding-left: 10px;">
<li class="v">Funny 10 second video! - YouTube (360p)</li>
</ol>
</div>
click function id not working what is the problem with it.
Try this:
$('#namesId ol').on('click', 'li', function(e){
e.preventDefault();
alert('clicked');
});
As you said li are generated dynamically, You have to use jQuery event-delegation
So do like below:-
$('#namesId ol').on('click',"li",function(e) {
e.preventDefault();
console.log('clicked');
//ToDo
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-4" id="namesId" style="padding:0px">
<ol style="padding-left: 10px;">
<li class="v">Funny 10 second video! - YouTube (360p)</li>
<li class="v">Wildlife</li>
</ol>
</div>
it should be:
$('#namesId ol li:nth-child(1)').click(function() {
alert('clicked');
//ToDo
}); //for first li click
$('#namesId ol li:nth-child(2)').click(function() {
alert('clicked');
//ToDo
}); //for second li click
Below Code working fine.
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<ol id="namesId" style="padding-left: 10px;">
<li class="v">Funny 10 second video! - YouTube (360p)
</li>
<li class="v">Wildlife</li>
</ol>
<script>
$('#namesId li').click(function() {
alert('clicked');
//ToDo
});
</script>
</body>
</html>
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<ol id="namesId" style="padding-left: 10px;">
<li class="v">Funny 10 second video! - YouTube (360p)
</li>
<li class="v">Wildlife</li>
</ol>
<script>
$('#namesId li').click(function() {
alert('clicked');
//ToDo
});
</script>
</body>
</html>
You have indicated a name for the selector #namesId, but it's not defined anywhere.
Put it this way and it will work:
<div id="namesId">
<ol style="padding-left: 10px;">
<li class="v">Funny 10 second video! - YouTube (360p)
</li>
<li class="v">Wildlife</li>
</ol>
</div>
My problem is this. that i create a list of <li> in side <ul> element. when you click on one of thouse <li> elements, the others disappear. now when you click on [See all items], the previous list appears agen. But now when you click on the other element, nothing happens. That should be because the new element doesn't know what todo when you click it. we need a callback! But i don't get what should i write in to this callback function?!
My Code: http://jsfiddle.net/cRcNB/.
In JS section there is easying.js and quicksand.js befor. so scroll down(all the way) and you'll see my (Short)code. :)
I ll post my code here as asked:
$(document).ready(function(){
var $holder = $('ul.holder');
var $data = $holder.clone();
$('ul.holder li').click(
function(e){
$holder.quicksand($(this),{
duration: 800,
});
return false;
});
$('#all').click(
function(e){
$new = $data.find('li')
$holder.quicksand($new,{
duration: 800
}
);
return false;
});
})
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</head>
<body>
<ul>
<li id='all'>[See all items]</li>
</ul>
<ul class='holder'>
<li data-id="1" data-type="a">heaven</li>
<li data-id="2"data-type="b">love</li>
</ul>
</body>
</html>
Quiksand1.3.js and Easing.js is required as well.
Try replacing
$('ul.holder li').click(
function(e){
$holder.quicksand($(this),{
duration: 800,
});
return false;
});
with:
$('ul.holder').on('click', 'li', function(e){
$holder.quicksand($(this),{
duration: 800,
});
return false;
});
This will bind the click handler to the <ul> which is always in the DOM. When you are removing the <li>'s you are also throwing away their click handlers. This could be the problem.
Here is a simpler version of the code:
Markup:
<ul>
<li id='all'>[See all items]</li>
</ul>
<ul class='holder'>
<li data-id="1" data-type="a">heaven</li>
<li data-id="2"data-type="b">Earth</li>
<li data-id="2"data-type="b">Dirt</li>
<li data-id="2"data-type="b">Peace</li>
<li data-id="2"data-type="b">More</li>
</ul>
jQuery:
$("#all").on("click",function(){
$(".holder li").show("slow");
});
$(".holder li").on("click",function(){
$(".holder li").not($(this)).hide("slow");
});
JSFiddle: http://jsfiddle.net/5ChVE/5/
I am currently working on building a small menu that will change divs based upon which one it clicked. So if one is clicked it will show the div associated with it and hide the others, ect. But I cannot get it to work, nor can I figure out why. Any help would be appreciated. Thanks.
Below is my code. I've clipped out the content as there was a lot of it.
<script type="text/javascript">
$('.mopHeader').click(function() {
$('#raid-progress-mop').show();
$('#raid-progress-cata').hide();
$('#raid-progress-wotlk').hide();
$('#raid-progress-tbc').hide();
$('#raid-progress-vanilla').hide();
});
$('.cataHeader').click(function() {
$('#raid-progress-mop').hide();
$('#raid-progress-cata').show();
$('#raid-progress-wotlk').hide();
$('#raid-progress-tbc').hide();
$('#raid-progress-vanilla').hide();
});
$('.wotlkHeader').click(function() {
$('#raid-progress-mop').hide();
$('#raid-progress-cata').hide();
$('#raid-progress-wotlk').show();
$('#raid-progress-tbc').hide();
$('#raid-progress-vanilla').hide();
});
$('.tbcHeader').click(function() {
$('#raid-progress-mop').hide();
$('#raid-progress-cata').hide();
$('#raid-progress-wotlk').hide();
$('#raid-progress-tbc').show();
$('#raid-progress-vanilla').hide();
});
$('.vanillaHeader').click(function() {
$('#raid-progress-mop').hide();
$('#raid-progress-cata').hide();
$('#raid-progress-wotlk').hide();
$('#raid-progress-tbc').hide();
$('#raid-progress-vanilla').show();
});
</script>
<span class="h4">Raid Progress <span class="mopHeader">MoP</span> <span class="cataHeader">Cata</span> <span class="wotlkHeader">WotLK</span> <span class="tbcHeader">TBC</span> <span class="vanillaHeader">WoW</span></span>
<div id="raid-progress-mop">
<ul id="raid-mop">
<li>Content A</li>
</ul>
</div>
<div id="raid-progress-cata">
<ul id="raid-cata">
<li>Content B</li>
</ul>
</div>
<div id="raid-progress-wotlk">
<ul id="raid-wotlk">
<li>Content C</li>
</ul>
</div>
<div id="raid-progress-tbc">
<ul id="raid-tbc">
<li>Content D</li>
</ul>
</div>
<div id="raid-progress-vanilla">
<ul id="raid-vanilla">
<li>Content E</li>
</ul>
</div>
Wrap your code in:
$(function(){ ... });
...which is the short form of:
$(document).ready(function(){ ... });
Cheers
You need to put the script underneath your markup. Either that, or put it inside document.ready callback:
$(document).ready(function() {
// code here
});
The problem is that when the script appears above the markup, it will execute before the HTML is loaded, and so the browser won't yet know about raid-progress-mop, etc.
How about doing that a little more dynamically inside a ready() function :
<script type="text/javascript">
$(function() {
$('[class$="Header"]').on('click', function() {
var myClass = $(this).attr('class').replace('Header', '');
$('[id^="raid-progress"]').hide();
$('#raid-progress-' + myClass).show();
});
});
</script>
jsBin demo
Wrap your code into a ready finction and this code I wrote is all you need:
$(function(){
$('span[class$="Header"]').click(function(){
var classNameSpecific = $(this).attr('class').split('Header')[0];
$('div[id^="raid-progress-"]').hide();
$('#raid-progress-'+classNameSpecific).show();
});
});
Explanation:
$('span[class$="Header"]') = target any span element which class ends with Header
Now just attach a click handler to all that spans.
Than, to hide all your div elements do:
$('div[id^="raid-progress-"]').hide(); = will hide any div which id starts with raid-progress-
and than you just need to target the div that contains the magic word:
$('#raid-progress-'+classNameSpecific).show();
$('.mopHeader') isn't defined yet. wrap your script with $(function(){...})
I have a Jquery Drag Drop List which I want to update immediately in MYSQL using Jquery Ajax Post.
Because I can drag elements between lists (more than one list), I need to get the parent ID (parent being list category ID - where the draggable is dragged to)
When I drag from one category / list to another I am always given the former ID..
For example:
CAT 1 ------------ CAT 2
If I was to drag something from CAT1 to CAT2 - the ID would be CAT1 and not the new category ID...
I have added my codes below:
Jquery:
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.ui.core.js"></script>
<script src="js/jquery.ui.widget.js"></script>
<script src="js/jquery.ui.mouse.js"></script>
<script src="js/jquery.ui.sortable.js"></script>
<script>
$(function() {
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".mouseup").mouseleave(function(){
var sparent = $(this).parent().attr("id");
alert(sparent);
});
});
</script>
LIST HTML:
<div class="demo">
<div class="box">
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default mouseup">Item 1</li>
<li class="ui-state-default mouseup">Item 2</li>
</ul>
</div>
<div class="box">
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-highlight mouseup">Item 1</li>
<li class="ui-state-highlight mouseup">Item 2</li>
</ul>
</div>
</div>
Any help would be appreciated.
Thank you in advance!
What you want is here:
http://jqueryui.com/demos/draggable/#events
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable",
stop: function(event, ui) { alert($(ui.item).parent().attr("id") }
}).disableSelection();
Placing your code in the stop callback will allow you check the right ID.
Event that you need to handle is received.
$(".connectedSortable" ).on( "sortreceive", function(event, ui) {
alert(ui.item.parent()[0].id);
// also ui.sender will hold original list, from where element was taken
});
EDITED: depending on the fact if you need to handle case when items were just reordered, ie you drag and drop within same list, or not you are going to use received or stop event.
received will fire only in case you drag to another list.
stop will fire even if you leave item in the same list.
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");
});