I have 8 hidden sections with display:none; on my site that are triggered with jQuery to show when a select id is selected. When i try to start building the structure inside the hidden element #Restaurant (like this)
<div id="common">
<div id="Restaurant" class="common_reveal">
<div class="common_title">test</div>
</div>
</div>
It doesn't work. However, if i just insert plain text or <span>, it does...
Is there a reason for why it wont display additional <div>'s within the hidden element?
JS
$('#business_type').change(function(){
$("#common div").each(function() {
$(this).attr("style", "display: none;");
})
$("#" + $(this).val()).attr("style", "display: block;");
})
CSS
#common {
}
.common_reveal {display: none;}
You are picking all divs inside your #common element, try this:
$("#common >div").each(...)
Related
I have a div tag which contains other elements like form, button etc. div is stretching to entire width of the screen. So I am told that display="inline-block" would fix the issue. But I am also using display attribute to display the div based on some condition
<div display={some condition}...>
So how to handle this situation?
I hope if this helps you
HTML
<div id="selected">
Ahmed
</div>
Javascript
if(your condation){
const div = document.getElementById('selected').style.display ="inline-block"
}else if(your condation){
//code
}
.
.
.
else{
//code
}
I want to hide all the elements on the page, but only show the contents of div.k1. There are many more elements on the page. How do i do it in pure CSS?
<div>1-this will hidden</div>
<div class="k1">
2-this div will displayed
<p>3-this will displayed</p>
<p>4-this div will displayed</p>
<div>
5-this will displayed
<p>6-this will displayed</p>
<div>
7-this will displayed
<p>8-this will displayed</p>
</div>
</div>
</div>
<div>9-this will hidden</div>
<div>10-this will hidden</div>
<div>1-this will hidden</div>
<div class="k1">
2-this div will displayed
<p>3-this will displayed</p>
<p>4-this div will displayed</p>
<div>
5-this will displayed
<p>6-this will displayed</p>
<div>
7-this will displayed
<p>8-this will displayed</p>
</div>
</div>
</div>
<div>9-this will hidden</div>
<div>10-this will hidden</div> 11,12,13..
If all the elements you want to hide are div's that are directly within the body you can do something like the following.
var items = document.querySelectorAll("body>div:not(.k1)");
for (var i = 0; i < items.length; i++) {
items[i].style.display = 'none';
}
Basically what this does is select all the div elements that are directly within the body that do not have the class k1. Then it does a for loop on those items and sets each item to not display.
For a CSS solution you could just do something similar if the conditions are the same as I mentioned above.
body>div:not(.k1) {
display: none;
}
If you are interested in learning more about CSS selectors I'd encourage you to take a look at the W3 schools page on it.
Here's a crude way of doing this for divs nested up to 2 layers deep (as in your example). As you can see here, the problem is hiding all divs based on the tagName ('div'), unless they either have the className "k1" or are children of a div with that className. So we actually have to check at least 3 conditions before applying the hidden property. You can, of course, go deeper, if needed, by adding parentNode.parentNode.parentNode... and so on. But I would almost certainly approach this instead by assigning a class to the elements I want hidden, with an ID on the one I want to reveal. This is just a way of doing the job without changing any of your html.
const allDivs = document.getElementsByTagName('div');
for (let i = 0; i < allDivs.length; i++) {
if(allDivs[i].className !== "k1" && allDivs[i].parentNode.className !== "k1"){
if (allDivs[i].parentNode.parentNode.className !== "k1"){
allDivs[i].hidden = true;
}
}
};
<div class="k1">
2-this div will displayed
<p>3-this will displayed</p>
<p>4-this div will displayed</p>
<div>
5-this will displayed
<p>6-this will displayed</p>
<div>
7-this will displayed
<p>8-this will displayed</p>
</div>
</div>
</div>
<div>9-this will hidden</div>
<div>10-this will hidden</div>
Cheers!
When using ng-hide or ng-show directives a .ng-class is added or removed so DOM elements are visible or not.
However they kinda get positional "removed" as for example, hiding or showing two continous div elements one on top of the other.
<div ng-show="condition1">First div</div>
<div ng-show="condition2">Second div</div>
So, if condition1 evaluates to false first div will be hidden BUT second div will take the position which the just hidden div took.
How can I avoid that? I only want DOM elements to be invisible but not to get somehow removed.
First workaround.
I tried to overried .ng-hide class and getting a secondary class, only-hide, for elements on which I wanted this effect:
.ng-hide.only-hide {
visibility: hidden !important;
}
But didn't get results so far.
I achieved it with this second class approach by setting:
.ng-hide.only-hide {
visibility: hidden !important;
display: block !important;
}
As Angular sets .ng-hide with display:none, I make it invisible but present setting display:block.
To preserve and maintain the space occuped by the div you can't use directly ng-hide or ng-show.
You can use the ng-style directive as following:
<div ng-style="conditionHide1">First div</div>
<div ng-style="conditionHide2">Second div</div>
then your conditionHide1 and conditionHide2 should be like
if (condition1)
$scope.conditionHide1= {'visibility': 'hidden'}; // then div1 will hidden.
else
$scope.conditionHide1= {'visibility': 'visible'}; // then div1 will visible.
if (condition2)
$scope.conditionHide2= {'visibility': 'hidden'}; // then div2 will hidden.
else
$scope.conditionHide2= {'visibility': 'visible'}; // then div2 will visible.
You can change the visibility of the button by changing the $scope.conditionHide1 and $scope.conditionHide2 according to your conditions.
Solution2 by using a custom directive:
Create a new directive named condition and relative to an Attribute. Set-up a watch to watch the value of the attribute and, based on the value, set to the element (in this case the div) an appropriate css style. The value is mapped to the variable showDiv which change his value by clicking on the button. Clicking on the button, the value showDiv became the opposite !showDiv and the watch change the visibility from visible to hidden and vice-versa.
angular.module('MyModule', [])
.directive('condition', function() {
return {
restrict: 'A',
link: function(scope, element, attributes) {
scope.$watch(attributes.condition, function(value){
element.css('visibility', value ? 'visible' : 'hidden');
});
}
};
})
.controller('MyController', function($scope) {
$scope.showDiv = true;
});
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='MyModule' ng-controller='MyController'>
<div condition='showDiv'>Div visible/invisible</div>
<button ng-click='showDiv = !showDiv'>Hide div or show it</button>
</div>
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Is there any way to hover over one element and effect a different element?
How to change the div background image,in mouse over the another div,using css .
With the markup you supplied, this is indeed possible with CSS alone:
<a>
<img src="http://placehold.it/100x100" />
<div>
</div>
</a>
You can use the :hover pseudo selector to select the div when the anchor has been hovered
a:hover div
{
background-image: url(http://placehold.it/400x400);
}
This will change the div's background when the anchor is hovered. This doesn't work in all cases, you must be aware of the relationship of the elements and use the appropriate selector. If the elements have no relationship, you will have to use Javascript (or one of its libraries.)
http://jsfiddle.net/Kyle_Sevenoaks/fPGU3/
This will achieve what you're looking for though there are better ways to do this, using sprites and background-position for example. However:
Your HTML
<a class="selector">My Link</a>
Your CSS
.selector {
background-image:url(myImage.jpg);
}
.selector:hover {
background-image:url(myHoverImage.jpg);
}
Jquery solution
HTML
<a class="selector" data-type="bgChanger1">
My Link
</a>
<div data-type="bgChanger1">
...
</div>
JQUERY
$(document).ready(function()
{
var hoverElement = $('.selector'),
dataType = hoverElement.attr('data-type'),
linkedDiv = $('div[data-type="' + data-type + '"]');
hoverElement.hover(function(e)
{
e.preventDefault()
linkedDiv.css('background-image', 'hoverImage.jps');
},
{
linkedDiv.css('background-image', 'normalImage.jpg');
});
});
You can use jquery to do this.
Your markup:
<div id="div1"></div>
<div id="div2"></div>
Your script:
$("#div1").mouseover( function() {
$("#div2").css("background-image", "url('image.png')");
});
just add a jquery script as follows:
$(document).ready(function() {
$('#div1').hover(function(){
$('#div2').css("background","url(image_url)");
});
});
I'm struggling with this bit of code, and I'm not sure if it's even possible. I have a list of divs within a single parent element, and I need to collapse and expand certain sets. Here's an example:
<div id="parent">
<div class="alway_show">ALWAYS SHOW ME</div>
<div class="collapse_me">COLLAPSIBLE</div>
<div class="collapse_me">COLLAPSIBLE</div>
<div class="collapse_me">COLLAPSIBLE</div>
<div class="alway_show">ALWAYS SHOW ME</div>
<div class="collapse_me">COLLAPSIBLE</div>
<div class="collapse_me">COLLAPSIBLE</div>
<div class="collapse_me">COLLAPSIBLE</div>
</div>
So, in the initial state, .collapse_me will be display:none. There will be a link in always show to expand ONLY the collapsed divs below that particular .always_show div. I know this would be ten million times easier if the collapsible divs were in their own div, but I don't have control over the code. I have to make it work as is using jquery. Possible?
$('div.always_show').nextAll().each(function() {
if($(this).is('.collapse_me')) {
$(this).toggle();
}
else {
//this will halt the each "loop", stopping before the next .always_show
return false;
}
});
Of course you should not use my initial selector 'div.always_show', but rather supply it the actual element, which will be the parent of the clicked link. For example:
$('#expand_anchor').parent().parent().nextAll()...
var fncdiv = function(){
var el = this;
do{
el = $(el).next();
if ($(el).hasClass("collapse_me") )
$(el).toggle();
else
break;
}while (true)
};
$('#parent div.alway_show').bind("click", fncdiv);
You shouldn't need to use jQuery. It only requires some clever CSS:
#parent
{
/* normal parent css here */
}
#parent div
{
display: block;
}
#parent.collapsed
{
display: block;
}
#parent.collapsed div
{
display: none;
}
Selectors are applied in order of specificity. Since '#parent.collapsed div' is more specific than '#parent div', it should override. Now, all you need to do, is set the parent div's class, and you're done. You can use javascript to add/remove the 'collapsed' class to the DIV at runtime to toggle expansion without any additional effort:
// Mootools:
$('parent').addEvent('click', function()
{
$('parent').toggleClass('collapsed')
});