Ok so I want to make so in the profile list, you can click on the profile and it will be highlighted (another background color, lets say yellow). And when you have highlighted this and press "save", somehow i wish to pick the highlighted profiles id and output them.
So my first question:
http://jsfiddle.net/5pZ2v/3/
How can i do something like so you can pick/unpick by clicking/unclicking? And they will be highlighted. And how can i make a selector that grabs these highlighted profile boxes?
Maybe there already exists a function for this or plugin?
Else how can i do this clicking/unclicking to highlight/unhighlight and then output the highlighted element's id attribute in an alert, that appears when you click on a "Show what you choose" button
Use something like this:
$('div.profile').click(function(){
$(this).toggleClass('selected');
});
Then use div.profile.selected to style the selected profiles in your css. Then when you want to select all the divs that are highlighted just use $('div.profile.selected'). If you want to know how many are selected just use $('div.profile.selected').length. Here's an example:
http://jsfiddle.net/Paulpro/apvqM/
Did you try .toggleClass()?
i.e. create a css class highlight and add
$("div").click(function () {
$(this).toggleClass("highlight");
});
HTH
Ivo Stoykov
PS: Look documentation here
You can use the click function of jQuery to mark/unmark a div.
$("div.profile").click(function () {
// if it's unmarked we mark
if(!$(this).hasClass('selected'))
$(this).addClass('selected');
else
$(this).removeClass('selected');
}
You can then use each to get all the marked div :
$("div.selected").each(function () {
// do what you want
});
For the boxes not appearing black, it comes from a missing semicolon after the height attribute ;)
http://jsfiddle.net/vol7ron/5pZ2v/8/
First you need to give your DIVs an ID then look at my Fiddle.
$("div").click(function () {
$(this).toggleClass("highlight");
});
$('#save-button').click(function(){
$('#output').html(''); // clear the output div
// Loop through each selected div and output it's ID
$('div.highlight').each(function(){
$('#output').append('<div>' + $(this).attr('id') + '</div>')
});
});
Related
I am a beginner in the wonderful world of dev and I need help from you. Let me explain :
I have a menu that deploys when pressing on the burger and thus reveals three items .
On the one hand I am that when you click on an item the menu closes
And on the other hand I am cut the item to appear in the SPAN :)
$('li').click(function() { alert($(this).attr('id'));})
Thank you for your help.
DEMO JSFIDDLE
Envoy Everybody
simple as this : jsfiddle
added this
$('li').click(function() {
$('h1 + span').text( $(this).attr('id') )
$('#overlay').removeClass('open');
$('#toggle').removeClass('active');
})
also removed the class open from #overlay so after you click the li the menu closes, and removed the class active from the button so it changes from X to the hamburger lines . you can exclude these two lines if you don't need them
You successfully got the value of the id; now you just need to get the element you want to add it to, and add it.
Instead of putting the value in an alert, you'll use the value in jquery's text() function (assuming that you want the ID to be inside the <span> tag).
First, get the <span> element you want:
$('.top')
This gets all the elements with the class "top".
Now call the text() function (more info here: http://api.jquery.com/text/) on the element:
$('.top').text('your text here');
Instead of 'your text here', put the value of the ID in, like this:
$('.top').text($(this).attr('id'));
I'm using this code to change my buttons's class:
$('button').on('click', function(){
var btn=$(this);
if(btn.attr('class')=='tct-button'){
btn.removeClass('tct-button').addClass('tct-button2');
}
else{
btn.removeClass('tct-button2').addClass('tct-button');
}
});
The problem is that I have multiple div's with multiple buttons in each. I need to change this so that every time I click on a button in a div the others which were changed by a previous click (in that same div) change back to the default class which is 'tct-button', and just the last clicked button turns to 'tct-button2'. Would you please help me.
use toggleClass in jquery ,there is no need to check hasClass()
$(this).toggleClass("tct-button2 tct-button");
DEMO
Use hasClass()
Determine whether any of the matched elements are assigned the given class.
Code
$('button').on('click', function(){
var btn=$(this);
if(btn.hasClass('tct-button')){
btn.removeClass('tct-button').addClass('tct-button2');
}
else{
btn.removeClass('tct-button2').addClass('tct-button');
}
});
However I think you need
$('button').on('click', function(){
$('.tct-button2').removeClass('tct-button2'); //Remove all class
$(this).addClass('tct-button2'); //Add the class to current element
});
If you want to add an additional class to your buttons (tct-button2) whilst keeping tct-button on every button you could do what Satpal suggested.
However, from the sounds of it and I may be wrong, if you want to change the classes so that each button only has one class at a time on it (either tct-button or tct-button2) you can do similar to what Satpal suggested and use:
$('button').on('click', function(){
$('.tct-button2').addClass('tct-button').removeClass('tct-button2'); //Add original class and Remove tct-button2 class
$(this).removeClass('tct-button').addClass('tct-button2'); //Add the class to current element
});
Here is the example http://jsfiddle.net/lee_gladding/xao46uzs/
to only affect buttons in the div the clicked one belongs to, use a similar method to:
$('button').on('click', function(){
$(this).parent('div').find('.tct-button2').addClass('tct-button').removeClass('tct-button2'); //Remove all class in that div
$(this).removeClass('tct-button').addClass('tct-button2'); //Add the class to current element
});
(You might want to use a better selector for the parent, possibly a class or what ever your actual html uses)
Example:
http://jsfiddle.net/lee_gladding/xao46uzs/3/
I am trying to limit query calls using a function that will place edited items into an object then pass them to a PHP script to update only the edited information. In this case I am using jQuery's change() function, however I can not find a pseudo selector for select menu's (ie. :input, input:checkbox). The only idea I have left is to add a class to all the select menu's and go from there like so:
$(":input, input:checkbox, .selectedMenu").change(function() {
//Some Code here
});
I have checked all over and cannot find any information on this. Would this be the best way or is there an alternative?
Problem: How can you find out if any select menu has been put into focus using a pseudo selector or anything on those lines?
Select is its own tag. You don't need a psuedoselector:
$("select").change(function () { ... });
I think that all you want to do is use the select box that was changed, in this case you can do this
$(":input, input:checkbox, .selectedMenu").change(function() {
var $el = $(this);
alert($el.val());
});
you can add a focused class:
$(":input, input:checkbox, .selectedMenu").change(function() {
$(".focused").removeClass("focused");
this.addClass("focused");
//Some Code here
});
I would put this as a comment but I'm not allowed to... Maybe I misunderstood your question, but what about:
$(":input, input:checkbox, select")
i'm writing a small script to show/hide a div when other div is clicked, but I can't get the second div clickable.
Here's my code so far:
$(document).ready(function(){
$('div#ordontia').click(function(){
$(this).next('div#ordontia2').slideToggle("slow");
});
});
http://jsfiddle.net/65AK2/1/
Every time a "button" is clicked a new div with a description should appear on the bottom of the table. (the blue div on the bottom). If another button is clicked then the previous description should close and another one should open in the same place. (not implement yet)
Thanks in advance for any help!
Why do you want to select your element with next if it has an unique ID?
$(document).ready(function(){
$('div#ordontia').click(function(){
$('div#ordontia2').slideToggle("slow");
});
});
more general if you add more divs:
$(document).ready(function(){
$('.botaomedicina').click(function(){
$('#'+$(this).attr('id')+'2').slideToggle("slow");
});
});
with all others closing:
$(document).ready(function(){
$('.botaomedicina').click(function(){
$('.botaomedicinadescription').slideUp("slow");
$('#'+$(this).attr('id')+'2').slideToggle("slow");
});
});
Don't use $.next, it only selects siblings of the current element:
Get the immediately following sibling of each element in the set of
matched elements. If a selector is provided, it retrieves the next
sibling only if it matches that selector.
— jQuery documentation: .next()
Use the normal one:
$('div#ordontia2').slideToggle("slow");
Fixed it.
http://jsfiddle.net/65AK2/2/
firstly, it lookx like your toggled div was mal-formed. I didnt see a for it.
Secondly, if you know what the ID of the other div is, you dont need to say:
$(this).next("#item");
, it would make no sense.
$(document).ready(function(){
$('div#ordontia').click(function(){
$('div#ordontia2').slideToggle("slow");
});
});
remove this ;)
try this
$(document).ready(function(){
$('div#ordontia').click(function(){
$('div#ordontia2').slideToggle("slow");
});
});
updated fiddle http://jsfiddle.net/65AK2/4/
You can do it directly by an ID selector
http://jsfiddle.net/65AK2/3/
$(document).ready(function(){
$('#ordontia').click(function(){
$('#ordontia2').slideToggle("slow");
});
});
I'm fairly new to Jquery and Javascript in general and I was wondering, how do I change text on a button after hiding something.
as far as i know, you hide something via this code:
$("element").click(function() {
$("element2").hide("slow");
});
and to show something:
$("element").click(function() {
$("element2").fadeIn("slow");
});
so what i want to do is have an article type thing, and when a "hide" button is pressed, it hides all the paragraph text, but leaves another button saying "show"
How do I accomplish this?
You just need one button and change its text. Lets assume all the content is visible from the beginning. Add a button to your HTML and give it an ID so you can easily identify it:
<button id="toggleButton" type="button">Hide</button>
Then bind an event handler to the button which
toggles the visibility of the elements you want to show/hide and
changes the text content of the button
And here it is:
$('#toggleButton').click(function() {
// toggle visibility if all p elements
$('p').toggle();
// Change text based on current text
// If the current text is 'Hide' then we just hid the elements and
// we have to change the text to 'Show' (and vice versa).
$(this).text(function(i, current_text) {
return current_text === 'Hide' ? 'Show' : 'Hide';
});
});
DEMO
Reference: .click, .toggle, .text, conditional operator.
You have to adjust the selector to only match elements you really want to hide, but jQuery has great documentation about all possible selectors.
jQuery's documentation is pretty extensive and spending some time just reading through is worthwhile.
Since you are just starting, I recommend to read http://eloquentjavascript.net/ and/or the MDN JavaScript Guide, and the jQuery tutorial (in that order).
To Hide:
$("element").click(function() {
$("element2").hide("slow");
$("element").text('Show');
});
To Show:
$("element").click(function() {
$("element2").fadeIn("slow");
$("element").text('Hide');
});
Change button value like
$("element").click(function() {
$("element2").hide("slow");
$("#btnID").prop('value', 'Show');
});
$("element").click(function() {
$("element2").fadeIn("slow");
$("#btnID").prop('value', 'Hide');
});
I usually have two buttons, one with text show and another with hide text, then when you click in one of them show one and make all the stuff necessary and hide it shelf.
HTML:
Show
Hide
<p id="textshow" style="display:none"> lorem ipsum</p>
Javascript:
$('#bshow').click(function() {
$('#bhide').fadeIn();
$('#textshow').fadeIn();
$(this).hide();
});
I think this jsFiddle can help you: