I have an anchor like:
<a href="#" onclick="showInfo();" class="nostyle" ></a>
I don't have id or class name because I generated it dynamically in xslt.
When I click on it, it shows a previously hidden div that contains an <a id='close'> tag. The idea is to change the background color of the first anchor when I click on the close button, but I don't know how I can set that up.
How can I get the anchor which was clicked and therefore change it?
Check out this solution for a page that has multiple hidden divs, and each div has a show/hide link
http://jsfiddle.net/qfQhq/
This works for 1 div and 1 hide and 1 show link
An easy way to do this, is when you click the link to show the hidden div, save a reference to the link by stashing the $(this) pointer into a global variable and then displaying the hidden div. If the link which opens the hidden div has a background-color (or class to do so) you may want to remove it at this point. (if the color only shows up when you close the div, you may want it to disappear when you open the div too?)
Once you click the close button, you can simply reference the same global variable as if it is a DOM element, and change it's background color (or add a class to it, that does it for you).
$(document).ready(function(){
1) Create Global Variable
var showInfoLink = "null";
2) Store $(this) (DOM Element that triggered showInfo();)
function showInfo() {
showInfoLink = $(this);
showInfoLink.removeClass("highlighted"); //if you closed the div & opened again
$("#hidden_div_selector").css("display", "block"); //show hidden div
}
3) Change background-color or the link
$("#hidden_div_close_button_selector").click(function(){
if (showInfoLink != "null")
{
showInfoLink.addClass("highlighted"); //color the background of the link
$(this).css("display", "none"); //hide the hidden div
showInfoLink = "null";
}
}
4) CSS For 'highlighted' class (changed bg color)
.highlighted {
background-color: #de9f3c; //random color
}
make sure this is all in $(document).ready()
});
You have to pass a reference of the first anchor to the showInfo function.
Like onclick="showInfo(this);".
You can set the background color when close button is clicked since you have a reference to the first anchor. Make sense?
Related
Sorry for the title, I found no better way to describe it.
I have a list-group and want the buttons to show a specific color when active.
but somehow, the embedded spans capture the click and seem to not count as part of the a.
how can I fix this?
I want the button to change color, no matter where I click (on span or anywhere else)
The code is here:
https://jsfiddle.net/zj6uwmvu/
thanks
Here is the revised code for your click handler. If the event target is not a link, it means that the child badge was clicked. If this is the case, we find the closest link (the parent) and assign it as the target.
$('.location').find('.location-picker-list .list-group-item').on('click', function(e) {
var target = $(event.target);
if (!target.is('a')) {
target = target.parent('a')
}
e.preventDefault()
target.closest('.list-group').children(".active").removeClass('active')
target.addClass('active')
})
https://jsfiddle.net/zj6uwmvu/11/
instead of getting the item by "a", try getting it by its class like this:
.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover{
background-color: red; //instead of red put the color that you want.
}
I am using a database to create divs and then naming them from a field in a database.
Within this div is a "delete" link that I'd like to be able to create a div below the original div with a message such as "are you sure you want to delete this?"
But my issue comes to when the database has to generate more than one of these original divs, meaning that the "delete" link will be used more than once in different places or the different divs.
I am unsure on how to create a Javascript/jQuery script where it would:
1. check what the ID of the parent div is (div#parent -> ul -> li -> a).
2. generate a new div below the parent div (not inside).
3. once an option is selected, remove the generated div.
Heres an example of the layout that I'd like to work with:
link to image
As you can see, the generated jQuery div would be outside of the parent div it also has the id of the parent div with "_delete" added onto the end. The functions are there as an example for naming the functions...
Would this be possible?
EDIT - I have gotten it somewhat working, now the issue is when it creates the extra div it doesn't stop you from making more than one... How can I limit this?
What I have done so far
function action() {
var visable = false;
if(visable==false) {
$("#foo").append('
<div id="action_foo" class="action-warn center">
Are you sure you want to delete "<span>foo</span>"?
Yes / No
</div>
')
visable = true;
} else if(visable==true) {}
}
Yes it is possible.
$('#foo_delete').sibling('#parent') will allow you to select "parent".
http://api.jquery.com/siblings/
Try using insertAfter.
http://api.jquery.com/insertafter/
You can remove generated div also with sibling.
Try calling $('#parent').sibling('#foo_delete').remove() on parent's delete anchor.
Try this:
$(document).ready(function(){
$('#foo ul li.right').click(function(){
var _parent = $(this).parent(), // gets immediate parent which is ul
_gparent = _parent.parent(); // gets grandparent which is #foo
$('<div id="foo_delete" class="action-warn center">-Delete Warning Text-</div>').insertAfter(_gparent); // insertAfter(); puts the content right after _gparent.
});
$('#foo_delete a').click(function(){
$('#foo_delete').remove();
});
});
Here is the code: http://jsfiddle.net/celiostat/NCPv9/
the 2 Jquery plugin enables to change (and set):
- background color of div to gray
- text color to red.
Problem is I have to exactly point the mouse exactly ON the text so that text changes color too.
I would like to change background Div color AND text by clicking -- anywhere -- in the div
Tried various combination from other post..but nothing worked.
(ideally I would also like to change picture at the same time !)
$(".item_unselected").on("click", function() {
$(this).toggleClass("gray_cliked_box");
$(".item_unselected").not(this).removeClass("gray_cliked_box");
});
$(".item_text_in_menubar").on("click", function() {
$(this).toggleClass("blue_cliked_text");
$(".item_text_in_menubar").not(this).removeClass("blue_cliked_text");
});
You're fairly close, but the reason you have to click on the text is because you're only setting the class for the text once you click on it - you never set it from when you click on the div. Thankfully, you can optimize (and fix) your code by only having one event. If you click on a div, you simply set both items.
You can do this using the find method in jQuery to find the span that you want to modify when clicking on the div. The updated JS is as follows:
$(".item_unselected").on("click", function () {
$(".item_unselected").removeClass("gray_cliked_box");
$(".item_text_in_menubar").removeClass("blue_cliked_text");
var $this = $(this);
$this.addClass("gray_cliked_box");
$this.find(".item_text_in_menubar").addClass("blue_cliked_text");
});
Updated Fiddle: http://jsfiddle.net/NCPv9/3/
What this actually does, is remove the class from all the objects, and then just simply add the classes back to the ones you want. You also don't have to use toggleClass. You know you're adding it so just use addClass.
This is a CSS problem, not a jquery problem. I updated your last CSS selector to:
.gray_cliked_box .item_text_in_menubar { /*for jquery*/
color: red;
}
and the text changes to red when clicked.
The added selector says that children of .gray_clicked_box with a class .item_text_in_menubar should be red. This supercedes other definitions of .item_text_in_menubar because it's a more specific selector.
http://jsfiddle.net/NCPv9/4/
I'd like to make a div overlay for multiple divs. This code does
function showOverlay()
{
var o = document.getElementById('overlay');
o.style.visibility = 'visible';
}
function hideOverlay()
{
var o = document.getElementById('overlay');
o.style.visibility = 'hidden';
}
How can I make this code work so that I don't have to duplicate the javascript with a new ElementId for each div I'd like to hide/show ?
hide</div>
show
Thanks.
See this fiddle http://jsfiddle.net/5sVvA/
Use jquery with this function
$('.showlink').click(function () {
$('#' + $(this).attr('rel')).show();
});
$('.hidelink').click(function () {
$('#' + $(this).attr('rel')).hide();
});
Then create <a> links with class showlink or hidelink or whatever class depending on what function do you want to call and rel='XXX' where XXX is the ID of the div you want to show/hide, you must make a new link with a new rel for each div that you want to hide or show.
If I misunderstood your question please tell me.
To set it hidden by default, you must use in css display: none; for the divs you want to be hidden by default, then if you click on hide, nothing hapens (it is already hidden!) but on show, it will show up, and if you then click on hide, it will hide again :)
About the rel stuff on css, you can't, it is a HTML property, not a css one, you must set it on the <a> tag.
To hide the text among it's div, you can use this http://jsfiddle.net/robhunter/5sVvA/1/ and adapt it to your code, basically you set it hidden by default, and when you click on show link, you find the hide link and show it up.
With this code, you must set an id to each link with this format
rel + hidelink in this case it will be overlay1hidelink because rel=overlay1, so for rel=overylay2 it will be overlay2hidelink and so on...
Give all the <a>'s that you want for this the same class. And then give any new <a>'s you add later the same class as well..
and then use document.getElementsByClassName document.getElementsByClassName
The Issue
My script should be hiding all elements with class "gallery-collapse" then opening the select content based on the link clicked.
Right now, multiple divs will sometimes display when clicking between items.
The Ideal
Ideally, it would make sure all other elements are closed, mutually exclusive to the item clicked on. (i.e. clicking on an anchor with "speaker1-expand" would close all elements with class "gallery-collapse" and then toggle the "speaker1-content")
The Script:
<script>
j(".speaker1-content, .speaker2-content, .speaker3-content, .speaker4-content, .speaker5-content, .speaker6-content, .speaker7-content").hide();
j('.speaker1-expand').click(function(){
j(".gallery-collapse").hide();
j('.speaker1-content').slideToggle('slow');
});
j('.speaker2-expand').click(function(){
j(".gallery-collapse").hide();
j('.speaker2-content').slideToggle('slow');
});
j('.default-expand').click(function(){
j(".gallery-collapse").hide();
j('.speaker-default').slideToggle('slow');
});
</script>
The JS Fiddle
http://jsfiddle.net/2SCJe/10/
You can probably shorten the code to something like:
j("[class*='-content']").hide();
j('[class^="speaker"]').click(function(){
//Find the right class to toggle
var class = j(this).attr("class").split("-")[0];
class += "-content"; // <---This is now the correct class to slide down
//re hide everything
j("[class*='-content']").hide(); // <--- re-hide everything
j(".gallery-collapse").hide();
//Show it
j("." + class).slideToggle("slow");
});
Fiddle demoing the concept: http://jsfiddle.net/Y6mHj/