I have a menu where I would like a sub-menu to appear as long as the user is in that menu; Much like you would find in a mega-menu.
I'm using jQuery to select the elements.
This is the markup structure:
As you can see each <li> i.e. global-nav__list-item contains an anchor which represents an element in the main navigation.
Also nested in there is the corresponding div element i.e. collapsible__content which represents the mega-menu.
I thought this script could drill down and simply add and remove the class collapsible__content--expanded on collapsible__content which would solve my problem.
$('.global-nav__list-item').mousemove(function() {
$(this > '.collapsible > .collapsible_content').addClass('collapsible__content--expanded');
}, function(){
$(this > '.collapsible > .collapsible_content').removeClass('collapsible__content--expanded');
})
What am I doing wrong?
Firstly, your selector isn't valid. You need to use find() when attempting to select child elements from the this reference: $(this).find('.collapsible > .collapsible_content').
Secondly, mousemove() doesn't accept multiple functions. Assuming you're expecting to add/remove the class on mouseenter/mouseleave you could use hover instead, along with toggleClass():
$('.global-nav__list-item').hover(function() {
$(this).find('.collapsible > .collapsible_content').toggleClass('collapsible__content--expanded');
});
Better still, you could use CSS alone to achieve this:
.global-nav__list-item .collapsible > .collapsible-content {
display: none;
}
.global-nav__list-item:hover .collapsible > .collapsible-content {
display: block;
}
The above is assuming the .collapsible__content--expanded is just hiding/showing content. If not, you'd simply need to copy the relevant styles in to the above.
Try this:
$('.global-nav__list-item').mouseover(function() {
$(this).find('.collapsible > .collapsible_content').addClass('collapsible__content--expanded');
});
$('.global-nav__list-item').mouseout(function(){
$(this).find('.collapsible > .collapsible_content').removeClass('collapsible__content--expanded');
})
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'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 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
I have created a Responsive Sub-Menu for a Responsive Website that actives at equal to or less than 768px. I have it set up to where jQuery removes the link for the Parent List Item and displays the sub-menu onClick.
The problem is, there is a Parent that has no children and I am trying to only remove the link(href) of Parent Elements that do have children. But, I even applied it in an If statement so it wouldn't remove the parent link if it has no children, that didn't work. So I tried siblings, which I thought would make more sense. But it is still not behaving as so.
Here is my jQuery for this:
if (jQuery(".navigation > ul > li > a").siblings("ul")){
jQuery(".navigation > ul > li > a").removeAttr("href");
};
You may see an example here: http://stlredtails.com/construction/
Edit: The Contact link is the link that has no "ul" children, practical terms, there is no sub-menu.
Thank you!
your if statement always returns true and your following command removes the href attribute from all matched elements. you will need to loop through the matching anchors and process an if statement for each one.
jQuery(".navigation > ul > li > a").each( function() {
if(jQuery(this).siblings("ul").length) {
jQuery(this).removeAttr("href");
}
});
I'm not exactly sure if I understand what you are asking, but it sounds like you may be in need of jQuery's :empty and/or :parent selectors.
Try something like:
$(".navigation > ul:parent > li > a")
jQuery :empty documentation
jQuery :parent documentation
jQuery Siblings Not Working?
It is working. Yet it always evaluates to a jQuery wrapper object even if it matched nothing, and that value is truthy so your if-block always executes. Check for the .length-property to be not 0.
I have it set up to where jQuery removes the link for the Parent List Item and displays the sub-menu onClick.
There is absolutely no reason to remove the href attribute. To prevent following the link even if you clicked ("activated") it, call preventDefault() on the event object in the click event handler!
Can I change style of some div link. Here is what I mean
<div id="somediv">something/div>
Lets say I have css like this :
#somediv a{
color:#000;
}
Now for instance upon some action such as mouse click on any element I want to change somediv a link css to
#somediv a{
color:#00ffff;
}
I know how to select div, by using Document.get.elementById('somediv') Is it possible to select a by using above method or any other?
Thank you
DETAILS: Yes I know how to select it using jquery, or prototype .. I can't use any of those..
If you just want to apply a style to a particular element, it's very easy to do:
document.getElementById('whatever').style.color = '#f0f';
If you actually want to apply cascading styles (eg: #someDiv a), then it's not so easy (though it is definitely possible). I would suggest applying a new class to something, and having a pre-existing rule in your CSS.
CSS:
#someDiv a {
color: #000;
}
#someDiv.awesome a {
color: #f0f;
}
Javascript:
document.getElementById('someDiv').className = "awesome";
Yep, you can modify the actual CSS rules at runtime. See Totally Pwn CSS with Javascript for more details.
If you're using jQuery or YUI, there's some good info in question 1079237
document.getElementById ( 'somediv' ).children[0].style.color = 'new color';
assuming the A tag will be the first element inside your DIV
You could use CSS behaviors for this:
For instance:
#somediv a:hover
{
color:#0ff;
}
Otherwise, you may create a dedicated class (used when an element is click for example):
#onclickclass
{
color:#0ff;
}
Then in JavaScript, on onClick event, do:
document.getElementById('somediv').className = 'onclickclass';
And to change the style use
document.getElementById('somediv').className = 'your-css-class';
If you really want to select the anchor you would have to then traverse the document.getElementById('somediv').children array.
As others have suggested though the simpler answer would be to set the className attribute on your div and let the CSS style cascade onto the anchor tag.