I have two div on page. One of them is hidden, and another one is visible. Both of them is on the same place, and form layers. The first is on background (we don't see it), and the second is overlay (we can see it).
I want to have button to be able to switch visibility of div. When I press the button it must change visibility of div (fist does to the background, the second goes to overlay).
How can I do it with jQuery?
UPD
Here is my try http://jsfiddle.net/0qth6jdn
The problem is I don't know how to make layers with div.
If you just need to change the visibility, Jquery's .toggle() may be the easiest way to go.
Jquery Toggle Docs
If you set both div's classes to be the same, even easier. Just call toggle on the button's click event:
$(".myClass").toggle();
Here's a simple example:
JsFiddle Example
EDIT
Here is your own fiddle updated. Instead of visibility: hidden, I've changed your style to display: none;, as it allows you to use Jquery's .toggle() without having to check for any condition:
Your JsFiddle Updated!!
Do this when your button is clicked (you have to change IdOfDiv1 and IdOfDiv2 to your actual div ids):
$("#IdOfDiv1").toggle();
$("#IdOfDiv2").toggle();
You can do like this:
You create a <input type="checkbox"> ABOVE THE <div> you want.
You give it a nice id like 'div-toggler`.
You set this css:
#div-toggler ~ #your-hidden-div {display:none;}
#div-toggler:checked ~ #your-hidden-div {display:block;}
You create a new <label for="div-toggler"> inside the other <div>
Style it the way you wish, to look like a button.
If you care about old browsers, that don't support :checked on css, use [checked] instead.The you create a <label onclick="var e=document.getElementById(this.getAttribute('for'));e.setAttribute('checked',e.checked);" for="div-toggler"> if it doesn't work after the css change.
UPDATE:
After seeing the new update, it's clear:
if ($('#first').visibility == 'hidden' && $('#second').visibility == 'visible'){
should be
if ($('#first').css('visibility') == 'hidden' && $('#second').css('visibility') == 'visible'){
UPDATE 2:
Actually, this is the right code:
window.replaceDiv=function() {
if ($('#first').css('visibility') == 'hidden' && $('#second').css('visibility') == 'visible'){
$('#first').css('visibility','visible');
$('#second').css('visibility','hidden');
}
}
Here it is: http://jsfiddle.net/gughtms7/
There are a million ways to do this. If both divs have an id, you can simply toggle them, like so:
$('#id-of-your-button').on('click', function(){
$('#id-first-div').toggle();
$('#id-second-div').toggle();
});
Another way would be to toggle a class on a parent element:
$('#id-of-your-button').on('click', function(){
$('#parent').toggleClass('switch');
});
And than apply all changes via css
#parent #id-second-div {
display: none;
}
#parent.switch #id-first-div {
display: none;
}
#parent.switch #id-second-div {
display: block;
}
It all depends on your situation
Related
I had a problem that a new dynamic div is added with the dynamic class name while the page is refreshed every time.
For example
<div class="ABGeGGCcJeBCDEGD" data-app-name="">
Here the class=" ABGeGGCcJeBCDEGD", when I reload the page the class name is changed automatically.
So, I need to remove or hide that div.
Note
The div is not present in the code side, but it is created dynamically.
Thanks in advance
You should find another way to identify div instead of class name, e.g. DOM tree.
Also you can try to make "white list" of visible divs. Something like
Make ALL divs hidden
Get white list and show divs with these classes.
You can use event on id
Example is here.
$('#testDiv'). remove()
Let me know if this case is not going to work
You have 3 options, as far as I can see.
1. Does the class always start or end the same way?
If so, you can target that in CSS.
div[class^="ABGe"] { display: none; }
div[class$="DEGD"] { display: none; }
2. Does the element have any other classes or attributes that you can target.
If so, you can target them in CSS instead.
div[data-app-name] { display: none; }
3. Can you modify the markup?
If so, you can wrap the element in something that won't change.
<div class="hide-contents">
<div class="ABGeGGCcJeBCDEGD" data-app-name="">
</div>
You can then target that in CSS.
.hide-contents > div { display: none; }
I hope one of those options is useful.
I want to make a div appear when I click on another div. I was thinking of doing this by using JavaScript to change the class of the div when the other div is clicked on.
This is the HTML of the div I want to appear:
<div id="menutext1" class="hidden"></div>
This is the HTML of the control div (the one to click on to make the above div appear):
<div id="menu1"></div>
This is the CSS:
.hidden { display: none; }
.unhidden { display: block; }
I've looked everywhere and nothing seems to work for me!
I don't have much experience with JavaScript or JQuery but I can understand it.
Thanks in advance :))
.addClass(), .removeClass() should do what you need. .toggleClass() might also be useful. You want to do something like this in your onClick() method:
$('#menu1').click(function() {
$('#menutext1').addClass('unhidden')
});
Swap in toggleClass() if you want to be able to hide/unhide. I should add that these are JQuery functions so make sure to include JQuery in your project.
You have several options to achieve this:
$('#menu1').on('click', function(){
$('#menutext1').show();
// OR
$('#menutext1').toggleClass('hidden unhidden');
// OR
$('#menutext1').removeClass('hidden ').addClass('unhidden');
});
Demo
Note: When working with jQuery and DOM-Manipulation have a look at the .ready() function.
Reference
.on()
.toggleClass()
.removeClass()
.addClass()
.show()
You can do it without JQuery using the classList.toggle method. And you don't really need the unhidden class. When the hidden class is toggled off, the div should return to its default display (block).
// get the element you want to click on
var controlDiv = document.getElementById('menu1');
// assign a function to run when it is clicked
controlDiv.addEventListener('click', function() {
// turn the hidden class off or on
document.getElementById('menutext1').classList.toggle('hidden');
});
initially i say that i'm newbie with jquery and js :D , i need to create a function in jquery to add a css rule after click event on a button, i have done it and it works:
$(".resp-toogle").on("click",function() {
$(".fit").css('top','200px');
});
in this case when there's a click action on .resp-toogle, there's a css rule added for fit css class. But i need that clicking again on .resp-toogle , would be a reset top margin for fit class.
I have checked documentation and tested something but i don't find solution.
I know i need study and test with jquery :).
Assuming that you want successive clicks on the element to enable/disable the top CSS positioning on the .fit element, you can use toggleClass.
Firstly, setup the class in your CSS:
.fit.top {
top: 200px;
}
Then, use the toggleClass() function in your jQuery code:
$(".resp-toogle").on("click",function() {
$(".fit").toggleClass('top');
});
Example fiddle
What you need is a sort of toggle button so try this:
add a css class
.themargin{
top: 200px;
}
then toggle the class on each click
$(".resp-toogle").on("click",function() {
$(".fit").toggleClass('themargin');
});
function docs here
I've been researching some ways to show and hide HTML elements, and I ended up finding this.
My intention is to use a way to show and hide elements without the need to use JavaScript, JQuery, or anything else other than CSS and HTML, so I opted for the use of the attribute "tabindex", and then I created the following simple case of study...
HTML:
<div id="root" tabindex="1">
<div>DIV A</div>
<a class="hidden" href="http://www.google.com">LINK</a>
<div class="hidden">DIV B</div>
<input class="hidden" type="submit" value="input"/>
</div>
CSS:
.hidden
{
color: red;
display: none;
}
#root:FOCUS .hidden
{
display: block;
}
If you look according to the code, the inner div can be easily clicked and selected. However, the link and the button unfortunately can not be clicked or selected. In an attempt to do so, the focus of root div is lost.
My question is very simple. Is there one, or different ways that this can be bypassed / solved without the use of JavaScript or JQuery or something? (CSS and HTML only)
If it was not clear, my intentions are to hide elements so that when they are revealed they can be used. I would like to create a menu that contains submenus, and the submenus appear only when their parent menu is clicked (and not when the mouse passes over them).
Ah! And I have to mention ... I also found a solution that uses checkbox. Unfortunately, this is not feasible, because I would not have to click again on the element so that it is hidden. That is, I'd like just click outside of the element make it to hide its internal element, so I opted for the "tabindex".
Thanks in advance for your attention and patience.
You should add the FOCUS to the hidden class as well so the focus is not lost when selecting those.
#root:FOCUS .hidden,
.hidden:FOCUS
{
display: block;
}
The problem in your code is that whenever you are clicking a hidden class child element, the parent element is losing focus. Thus the css style is applying to default which is to hide the child elements with hidden class.
I think this can be solved using javascript.
function focusRoot(e) {
e.currentTarget.parentElement.focus();
return;
}
var root = document.getElementById('root');
var cs = root.children;
for (var i = 0; i < cs.length; i++) {
var c = cs[i];
c.onfocus = focusRoot;
}
Working fiddle
I have this javascript code that creates a slider:
http://jsfiddle.net/samccone/ZMkkd/
Now, i want to use this code on a checkbox input. the problem is that the code creates a child element that slides in it's parent using a css position, and an input cannot have a child.
My idea was to use background-position and just slide the background of the input from left to right using css instead of using real positioning.
How can I adapt this script? It is quite easy I think but after a couple of tries I just gave up, i'm not good enough :).
Thanks for your help,
Christopher
Believe it or not, for checkboxes a switch effect is possible to create without JavaScript.
If you follow your checkbox with a label:
<input type="checkbox" id="jim" />
<label for="jim"></label>
You will find that you can select the label with the next sibling selector:
input + label { /* some CSS */ }
Why is that useful? Because using the pseudo selector :checked you can now style the label based on the state of the checkbox:
input + label { background-position: 0 0; }
input:checked + label { background-position: 100% 0; }
Clearly, due to the for="jim" attribute, clicking on the label will change the state of the checkbox. So if you hide the checkbox, you end up with a styled, clickable label.
input { display: none; }
Of course, labels can have children so you can be as fancy as you want with your recreation of a switch. And you should be careful to include :focus styles as well, for people who tab to your checkbox rather than click on it.
For browsers that do not support the :checked pseudo class (IE8 and below), it's pretty easy to emulate with a global handler and a 'checked' class. Something like:
jQuery(document).bind('change', function(e){
var elem = jQuery(e.target);
// If this is not a checkox, do nothing.
if (elem.attr('type') !== 'checkbox') { return; }
// Add or remove checked class based on current state.
if (elem.attr('checked')) { elem.removeClass('checked'); }
else { elem.addClass('checked'); }
});
...should do it.
You might need to store some data in object properties (or the .data() api), but your background position idea should work just fine. Just replace your calls to .offset().left with .css('background-position') (you'll have to split and parseInt the string it returns tho) and keep plugin' away at it.