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
Related
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();
});
});
I want to hide a div when an a has a specifc href and show it when it doesn't have that specifc href
I've tried this:
if($('a[href="#intro"]').not(".active"))
{ $('.navbar-brand').hide();}
else {$('.navbar-brand').show();}
But this is not working as expected, it hides that div when that specific href has a class of active.
What am I doing wrong ?
Try this
var show = $('a[href="#intro"]').hasClass('active');
$('.navbar-brand').toggle(show);
I think you don't use well :not see https://api.jquery.com/not-selector/
if($('a[href="#intro"]:not(".active")')
{ $('.navbar-brand').hide();}
else {$('.navbar-brand').show();}
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/
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?
My website has a navigation bar that when clicked targets an iframe.
i would like the "active" link color to be changed.
P.S can't use jQuery, only JS and CSS.
my idea was to have an ID named ACTIVE and give the clicked link the ID active, after removing the ID from all the rest.
though i have no idea how its possible to do so.
on the other hand another option is to do the same only using a class called ACTIVE, my problem there is each link has allready a class assigned to id, and i have no idea how to remove one class out of two.
This is a problem best solved using classes. If you can't use jQuery, you can add classes in JavaScript via something like:
document.getElementById("someID").className += " newClass";
Remove a class using regex:
document.getElementById("someID").className = document.getElementById("someID").className.replace(/\bnewClass\b/,'');
If it doesn't make sense to give each link an ID, you can attach a click handler:
onclick="changeColor(this)"
And add the subsequent function:
var activeLink;
function changeColor(elem){
if(activeLink)
activeLink.className = activeLink.className.replace(/\bnewClass\b/,'');
elem.className += " newClass";
activeLink = elem;
}