I have an interface that you can press edit to bring up borders and change the background color of other divs. The edit button gets replaced by cancel and save buttons. I want the borders and background to change on clicking edit and revert to normal on clicking save or cancel.
I am able to make the divs change when clicking edit, but I can't make them change back on clicking cancel or save. I'm using the exact same Jquery function for both.
//show lines on clicking edit
$(".editbutton").click(function() {
$(this).parent().find(".material_input").css("border-bottom", "1px solid #ccc").css("background-color", "#fafafa");
});
//hide lines on clicking save or cancel
$(".label-container button").click(function() {
$(this).parent().find(".material_input").css("background-color", "#fff");
});
I know that my second one doesn't include the border. I'm just trying to get the background back to white first.
Edit: It looks like there's a problem with the second function accessing the DOM because I can do this easily in Codepen. If someone can help me straighten this out that'll be great.
Here's the DOM for the relevant classes:
.parent > .editbutton
.parent > .button-wrap > .label-container
.parent > .section > .fields > .material_input
Based on the updated question, it seems changing $(this).parent() to $(this).parents('.parent') inside the click handler for save or cancel button should solve this.
use classes instead .css function that you can remove class when you click cancel or add more function if this has class
Related
I've got a basic example of a few buttons populated in a basic modular popup. I was going to ask how they change the state from active to inactive as in my code I don't see any visible change.
I was adding custom JS to add "active" class on click action and remove on the second click but still at least one button (recently clicked) remained selected even without "active" class attached to it.
I've prepared the code example in Codepen.io https://codepen.io/krzysztof-d/pen/rNLqdMv but I found out that those buttons over there behave even differently as they are not stay selected as they should by default, right?
Please let me know what I am missing
<button type="button" class="btn btn-outline-secondary w-100">1</button>
Update:
So the default behaviour of the buttons is different depending if in Desktop or Mobile view. You can test on Codepen example - in mobile last clicked button remains "selected/dark" (with change colour and focus around it) when in desktop view it instantly change back to white colour after mouse go away.
Now I work on selecting multiple buttons by adding active state - but I don't know how to handle this mobile behaviour as at least one button looks like selected even without "active" class attached to it.
My questions is how to make such button to look normal again (as other not selected) programatically?
In another words it doesn't seem to be a problem to make a multiple selection but I want to allow to deselect some buttons if someone make a mistake and this is where the weird part became. Here is the another link to Codepen with the same example with some JS added to add/remove active class from buttons - check it out in mobile view https://codepen.io/krzysztof-d/pen/OJXBwYm, try to select a few numbers and then deselect one or two.
Update with screenshot on request - button six in mobile view seem like selected but actually it was just deselected and class .active has been removed from it.
First or all, you don't need to write your own JavaScript to toggle the .active class on the buttons. Bootstrap has the button plugin you can use:
<button type="button" class="btn btn-outline-secondary w-100"
data-toggle="button" aria-pressed="false">1</button>
That would automatically toggle .active class when selecting/unselecting the button.
jsfiddle demo: https://jsfiddle.net/davidliang2008/mfqyp8j3/6/
Secondly, when you select a button, there are 2 things going on. Bootstrap addes .active (if you're using the button plugin) and .focus class:
.active: gives you the same background on the button just like when you hover it
.focus: adds shadows around the button
When you click somewhere else, only .focus class would be removed. That's why you should see the button is filled with the background color without the shadows, the same as you hover over it.
When you unselect a button but your mouse is still pointing at it, .active class is removed but the hover effect as well as .focus is still going on, making the button look like you haven't unselected it.
As soon as your mouse moves away, the hover effect is gone, and only .focus is left. That's why you should see the button only has shadows.
If you want to distinguish the select and unselect state of the button a little bit more, you can write CSS to disable hover effect if the button is .focus but not .active:
.selector .btn.focus:not(.active):hover {
color: inherit;
background-color: inherit;
border-color: inherit;
}
jsfiddle demo: https://jsfiddle.net/davidliang2008/mfqyp8j3/17/
Codepen demo: https://codepen.io/davidliang2008/full/yLJRZYy
A gif to show it's working properly in mobile view:
I'm trying to create a simple drag and drop web application using jquery.
everything so far works as it should.
now what I am trying to do is to add a button to the page so when its clicked, it will FLIP the selected image and I am not having any luck with at all.
I have created a jsfiddle so you can see it for yourself: http://jsfiddle.net/7btkn17q/8/
drag and drop a book image onto the box bellow it and click once inside it, and you will see a button appear at the top of it which says flip.
I need to use that button to flip the selected image.
for that I used this:
$('#flip').click(function(e){
if( $(e.target).closest(".drag").length > 0 ) {
$(e.target).closest("#droppable .drag img").css('border', 'solid 5px #000');
}
});
but this does not have any affect on the image(s) at all. I know that the code above is not for flipping the image(s). i just created that code as a test to see if I can access the image(s) on button click with no luck.
could someone please advise on this?
EDIT:
EVEN though I thought this would work, it didn't and I am so confused on why it didn't work:
$('#flip').click(function(e){
if($(e.target).closest(".drag").length > 0 ) {
$(e.target).closest("#droppable .drag").find('img').css('border','5px solid #000');
}
});
Second Edit:
I've tried to use the remove() function to see if i could get the img and somewhat I could make it work but similar to the answer bellow, it will remove ALL the img's instead of removing the selected only:
$(e.target).parent().siblings(".drag" ).find(".img" ).remove();
is there any way to apply the CSS or remove() to the selected element only?
When selecting an image, you can set a class to it. Let's add selected to it.
When selecting another image we just remove the selected class from other elements and add it to the one we just selected.
Here's my fiddle
Another problem I noticed, was that you were trying to test this by changing the border of the selected element. When you click the flip button, the image gets unselected and the border is changed to medium none (Remember, firebug/devtools are your friends.).
So I changed it to change the outline css property to see that the button works.
You also might want to update from jQuery 1.6 as the event handling is so much easier with the .on() function.
'.closest()' only travels up the DOM tree; you'll need to do something like this to target the images:
$('#flip').click(function(e){
if( $(e.target).parent().siblings(".drag").length > 0 ) {
$(e.target).parent().siblings(".drag").find('img').css('border','5px solid #000');
}
});
updated jsfiddle: http://jsfiddle.net/7btkn17q/9/
So I have a sprite of buttons that I want to use for my website (https://www.metsales.com/MetropolitanSales/microsite/epson/images/epson_buttons.png),
and I was wondering if it is possible to set a section of each button to open up a drop down menu.
This may get a bit confusing but, for each button, when you hover over the entire button I have a hover image in the sprite, but I want to distinguish between clicking the arrows on each button and the button itself. So the arrows will bring a drop down menu and the button will take you to an overview page.
How can I go about doing this? haven't been able to find anything with nearly enough information to help me out.
Simple approach would be put a child in the link, if child is clicked... open dropdown, if not follow link
Position and size the child accordingly
<a class="buttonClass" href="foo.html"><span class="toggleDropdown"></span></a>
jQUery
$('a.buttonClass').click(function(e){
if( $(e.target).is('.toggleDropdown') ){
/* prevent href being opened*/
e.preventDefault()
/* run dropdown code here */
}
})
User wouldn't see child as it would be transparent
Yes you can all you need to do is tweak the elements inside each button, in my case i use a and div ul please review this demo
http://jsfiddle.net/BFWQa/13/
and ask any question if it's what you expected.
You should use from background-image and background-position rules of CSS. for more details check this link.
Please voteup it or/and mark it as answer if it helped you.
I'm using Javascript/Jquery to have a button toggle which div is displayed in the user's window. I have my initial background div #container which gets toggled with a different div if the user clicks on a certain location. A back button is toggled on once the new div is displayed. I want the back button to switch the div back to the initial #container if it is pressed. The back button's display should be toggled off again if this happens.
Since I have different divs that the back button shows up in, I need to determine which background div the user is viewing in order to toggle that specific div off and the #container back on. The container will not display again if I do not toggle the current div off.
Here's my code for an example of one instance:
JS:
$(document).ready(function()
{
$("#backButton").click(function(e)
{
if(THE CURRENT DIV IS REGION 1)
{
$("#container").toggle(); //toggle the container on
$("#region1").toggle(); //toggle region 1 off
$("#backButton").toggle(); //toggle the back button off
}
});
});
Obviously, I do not know what code to use to determine which div the user is looking at. I tried if(document.getElementById('region1');) but it didn't work; I didn't think it would, but that's the direction I'm going as to how to determine the current div.
Any help would be greatly appreciated!
if($('#region1').is(":visible")){ etc... }
If you are talking about a back button located in the DOM inside the div region1, you could use:
if($(this).parents("#region1").length > 0)
Which says "if the number of parents of this button containing ID region 1 are non-zero". For more information see parents. In general the traversing functions in jQuery will be helpful to you.
This might be what you're looking for:
http://api.jquery.com/parent-selector/
If all you're doing is switching two DIVs back and forth, you don't even have to check which DIV is currently displayed, because the .toggle() function should do that for you out-of-the-box.
Consider you have two DIVs, make sure one is hidden and one is shown, like so:
<div id="region1">foo</div>
<div id="region2" style="display:none;">bar</div>
Now, when you click on the button, you just have to call .toggle() on both of them.
$('#backButton').click(function(){
$('#region1, #region2').toggle();
});
You can even get by with using only one button to do that, and just switch the text inside the button if you'd like.
// inside the click handler
$(this).val( $(this).val() == 'Next' ? 'Back' : 'Next' );
Full code example here: jsFiddle example
In php code some english words are populating from database (postgres) and put into li.
What I need is each li should have delete button which is hidden during load. When mouse is hover that image should be visible.
After that, delete operation will be performed on database side using ajax and that li will be removed.(no problem with it as I already coded).
I gone though this link, but instead of only button click event is fired for whole li block.I don't want this because in future I will add more button like edit,spam like that.
Same thing can be seen when you hover on comment you have made and delete icon will appear in stackoverflow.
jQuery will save your day.
<li>words <img src="delete.jpg" style="display:none;"/></li>
$('li').mouseover(function(event)
{
$(this).find('img').show();
});
$('li').mouseout(function(event)
{
$(this).find('img').hide();
});