Consider the below code snippet:
<div class="row">
<div class="col-sm-12">
<div class="form-group form-group-default">
<label>OPTIONS</label>
<div class="checkbox">
<input type="checkbox" id="checkbox2">
<label for="checkbox2">Email</label>
</div>
</div>
</div>
</div>
Whenever I hover over the <div class="checkbox">, focus event of <div class="form-group form-group-default"> gets triggered; where as in css code I didnt find any relevant hover code for <div class="checkbox">.
As far as i know all events of DOM will get propagate through it's parents. Unless some event handler stops it.
Look at this example.
<!-- https://jsfiddle.net/z0ncxhfq/ -->
<div class="parent">
<a class="dontpropagate child" href="#one">Link one</a>
</div>
<div id="dont" class="parent">
<a class="child" href="#two">Link two</a>
</div>
<script>
var elements = document.querySelectorAll(".dontpropagate");
for(var i = 0, len = elements.length; i < len; ++i) {
elements[i].addEventListener("click", stopPropagation, false);
}
function stopPropagation(event) {
event.stopPropagation();
}
</script>
If I understood it right, you have to simply remove the form-group styling.
Try:
.form-group:focus,
.form-group:hover,
.form-group:active {
outline: none !important;
}
Related
I have a navigation that is horizontal. Under every choice I have a div that opens up on click. But the problem is that it binds it's position to the parent navigation button. I want every div that opens on the exact same spot. I want every child div that opens to open from the first element in the navigation bar.
So in this case i want the white open div to bind to "Nyheter" instead. I really can't solve it, I tried set a div element before the navigation that all div that opens binds to in css but it not seems to work.
<div class="Container">
<nav class="NavHorizontal Grid Grid--alignMiddle">
#Navigation.RenderNavigation("master/navigationDesignHeader.cshtml", navigationSettings)
</nav>
</div>
//NavigationDesignheader.cshtml under this line
var elementId = 1;
foreach (var node in nodes)
{
var idElement = "megaMenu" + elementId;
<div class="NavHorizontal-item Grid-cell u-sizeFit" id="#idElement">
<a class="Button Button--tab navigationHeaderLink u-pointer" onclick="toggleMenu('#elementId')">
#node.Name
</a>
#RenderMegaMenu(node.Nodes, node.Link, node.Name)
</div>
elementId++;
}
Megamenu:
<div>
<div id="megaMenuDropdown" class="Container megaMenuDropdown-content displayNone">
<div class="Grid Grid--withGutter">
<div class="Grid-cell u-sizefull u-mt-10">
#nodeName
<div class="megaMenuToggle-closeBars u-pointer" style="float:right">
<span class="megaMenuToggle-closeBar"></span>
<span class="megaMenuToggle-closeBar"></span>
</div>
</div>
</div>
<hr class="colorBlue" />
<div class="Grid Grid--withGutter">
<div class="Grid-cell u-size12of12 u-md-size6of12 u-lg-size6of12">
<ul>
#foreach (var node in firstColumn)
{
<li class="u-mb-10 linkHover">
<a class="userLink colorBlue" href="#node.Link">#node.Name</a>
</li>
}
</ul>
</div>
#if (moreThanTen)
{
<div class="Grid-cell u-size12of12 u-md-size6of12 u-lg-size6of12">
<ul>
#foreach (var node in secondColumn)
{
<li class="u-mb-10 linkHover">
<a class="userLink colorBlue" href="#node.Link">#node.Name</a>
</li>
}
</ul>
</div>
}
</div>
</div>
</div>
Any suggestions?
I have a set of nested divs that look like this (this is just an example, the structure can vary):
<div class="container">
<div class="dummy">
<div class="target one"></div>
<div class="dummy">
<div class="target two">
<div class="dummy"></div>
<div class="target three"></div>
</div>
</div>
<div class="target four"></div>
</div>
</div>
I now want to select the <div>s with classes one, two and four. What I would need is a recursive selector (like $(.container div.target)) which aborts the search down a branch after it found an element and instead continues with the next branch.
$(.container div.target) selects all the targets, which is not what I want. $(.container div.target:first-of-type) almost does what I want; it selects one and two, but not four.
Is there a jQuery selector that can do what I want? If not how could I implement this behaviour in JavaScript?
You can try using the following code:
$('.container div.target').not(function () {
return $(this).parents('div.target').length > 0
})
It uses jquery .not() method to eliminate <div class='target'> elements having another <div class='target'> element somewhere up in the dom hierarchy.
$(document).ready(function () {
$('.container div.target').not(function () {
return $(this).parents('div.target').length > 0
}).each(function () {
console.log($(this).attr('id'));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="dummy">
<div id="1" class="target one"></div>
<div id="-1" class="dummy">
<div id="2" class="target two">
<div id="-2" class="dummy"></div>
<div id="3" class="target three"></div>
</div>
</div>
<div id="4" class="target four"></div>
</div>
</div>
So after trying out different things, I figured that writing my own function to do this would probably be the best solution. This is what I came up with:
$.getHighestElements = function(startPoint, selector, child = false) {
var elems = [];
startPoint.children('div').each(function () {
if($(this).hasClass(selector)) {
elems.push($(this));
} else {
$.merge(elems, $.getHighestElements($(this), selector, true));
}
});
if(child)
return elems;
else
return $(elems).map(function() { return this.toArray(); });
}
const elements = $.getHighestElements($(.container), "target");
This returns a wrapped set of elements that can be used just like any other jquery wrapped set.
Is it possible to assign a role to all elements with a given class? I'd want to turn this:
<div class="a" role="button">Text!</div>
<div class="a" role="button">More text!</div>
into this
<div class="a">Text!</div>
<div class="a">More text!</div>
<style>
.a {
role: button
}
</style>
I've found solutions for filtering by role in css but nothing to assign a role to elements using css.
let buts = document.getElementsByClassName("a");
for(let i = 0; i < buts.length; i++){
buts[i].setAttribute("role", "button");
}
<div class="a">Text!</div>
<div class="a">More text!</div>
You can achieve with pure JavaScript through forEach() method.
document.querySelectorAll(".a").forEach(function(role){
role.setAttribute('role', 'button');
});
<div class="a">Text!</div>
<div class="a">Text #2</div>
<div class="a">More text!</div>
I just want to add a tooltip to the element which is clicked.
Tooltip is added to all repeat elements when clicked. Please help me.
<div ng-repeat="item in listOfMenu" class="repeat_container">
<div ng-repeat="menu in item" class="repeat_block" ng-click="getTool(menu,menu.pricelist.length)" >
<div class="shadow img_cont">
<img src="{{menu.itemimage}}" class="item_img">
<div ng-repeat="innerItem in menu.pricelist | limitTo:1">
{{innerItem.itemprice}}
</div>
</div>
<div>
{{menu.menuitemname}}
</div>
<div ng-repeat="menu in addToCart" class="add_circle" ng-show="circle">
{{menu.quantity}}
</div>
</div>
</div>
Change the div in:
<div ng-repeat="menu in item" class="repeat_block" ng-click="getTool(menu,menu.pricelist.length)" ng-class="{'clicked': menu.clicked}">
In getTool method
menu.clicked = true;
but you should put clicked:false to all others menu in items
I have an Angular application that renders spans based on whether they're needed or not (many ng-if's). I need to wrap these spans in a div based on their content/class names.
So, for example:
<div class="1"></div>
<div class="2"></div>
<div class="3"></div>
I don't want to do anything. But with
<div class="1"></div>
<div class="2"></div>
<div class="3"></div>
<div class="4"></div>
I DO want to wrap these 4 divs in a parent div <div class="parent"></div>, but only if the four appear one after the other. Is there a way to do this in CSS? Can I just use a combo of selectors to manipulate the four elements if they appear consecutively?
so you cant do this using just css and html, like the comments above, you need to use some form of javascript to manipulate the dom. heres an example using jQuery. hope it helps!
$(document).ready(function() {
$('.wrapme').each(function() {
var myElement = $(this);
var next1 = $(this).next();
var next2 = $(this).next().next();
var next3 = $(this).next().next().next();
if (next1.hasClass('wrapme') && next2.hasClass('wrapme') && next3.hasClass('wrapme')) {
var html = '<div class="parent"></div>';
next3.after(html);
var parent = next3.next('.parent')
parent.append(myElement);
parent.append(next1);
parent.append(next2);
parent.append(next3);
}
});
});
.parent {
background-color:lightgray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapme">1</div>
<div class="wrapme">2</div>
<div class="wrapme">3</div>
<span>BREAKKKKKK</span>
<div class="wrapme">1</div>
<div class="wrapme">2</div>
<div class="wrapme">3</div>
<div class="wrapme">4</div>
<span>BREAKKKKKK</span>
<div class="wrapme">1</div>
<div class="wrapme">2<div>
<span>BREAKKKKKK</span>
<div class="wrapme">1</div>
<div class="wrapme">2</div>
<div class="wrapme">3</div>
<div class="wrapme">4</div>
<span>BREAKKKKKK</span>
<span>BREAKKKKKK</span>
<div class="wrapme">1</div>
<div class="wrapme">2</div>
hey hey
<div class="wrapme">3</div>
<div class="wrapme">4</div>
<span>BREAKKKKKK</span>