I'd like to hide a column in css for only one specific page and i saw several options for it, but every one uses page id. What if two pages have the same id and the differences are only in the class definitions?
I want to use the 'display none' tag only on /Page 2/.
Here is the example:
/Page1/
<body id="body" class="bootstrap-body page-body home_body body-admin-logged" role="document">
/Page 2/
<body id="body" class="bootstrap-body page-body list_page_body category_list_body body-pathway-top body-admin-logged" role="document">
/Column - Page2/
The html code
<aside class="col-md-3 col-sm-12 col-xs-12 column-left">
/Column-Page2/ css code
.column-content-left, .column-left {
float: left;
}
If I use the display none in the css above, it will works perfectly. The problem is that it reflects on /Page1/ too.
Is it possible to do that in css or javascript, without accessing the html?
You can select the body css too like this:
body.list_page_body .column-content-left, body.list_page_body .column-left {
display: none;
}
This should only trigger for the body with the class .list_page_body (or you can use another class specific to that page.
Use a class unique to the second page, for example list_page_body and in your css
.list_page_body .column-content-left, .list_page_body .column-left
{
display:none;
}
It is possible in javascript. Just get the url of the page using window.location.href and add a class or something if it's the page you want the special treatment on.
The classes that distinguish page 2 from page one are: list_page_body category_list_body and body-pathway-top. So you can use any of them to implement your CSS on page 2 without effecting page 1.
Example:
body.category_list_body .column-left{
display:none;
}
You can do it with jQuery by aiming the url path
jQuery(function ($){
var pathname = window.location.pathname;
if (pathname == "/page2/"){
$(".column-class").css("display","none");
}
})
If page 2's body tag has a unique class, you can use the .parent .child {} CSS selector. From what you've provided:
body.list_page_body .column-content-left, body.list_page_body .column-content-left {
display: none;
}
Just so you know, with parent / child selectors, you can use either .parent .child or .parent > .child. The former would select all instances within .parent that the .child class is used in the document:
<body class="parent">
<div class="child">
<div class="child">
</div>
</div>
</body>
In the example above, .parent .child {} would apply rules to both the initial .child as well as the nested .child.
The latter .parent > .child applies to only direct descendants. Using the same example above, only the initial .child element would be selected by .parent > .child. The nested .child wouldn't be affected.
Related
This is the code at a high level, and there are multiple such lists I have of the following structure:
<li class="wrap-input">
<p>Some sentence</p>
<select class="form-control">
...
</select>
<div class="button-in-input">
...
</div>
</li>
.
.
.
What I want to do is, whenever the user focuses on the "form-control" select, then the div with the "button-in-input" class should be shown, but only in that particular li element. i tried it with this jquery code:
$(".form-control").focusin(function() {
$(".button-in-input").show();
}).focusout(function() {
$(".button-in-input").hide();
});
But of course, this generalizes to all the li elements I have. I'm assuming there is a way to do it with the this keyword but note that the select and div elements are siblings.
Any help would be appreciated!
PS: I want to avoid using IDs otherwise there would be tons of repetetive code
You can do this with pure CSS.
.wrap-input .button-in-input {
display: none;
}
.wrap-input select.form-control:focus + .button-in-input {
disply: block;
}
The select in the second selector is not necessary, but it helps in case there's a different item with the same class.
you can simply use :focus in css to do it, no fancy javascript code needed for this
.form-control:focus + .button-in-input {
display: block;
}
I have a function that recursively adds more divs to a HTML page upon user interaction. These divs represent objects and the inputs represent these object's properties. The problem is that these objects are nested inside eachother - the part where I need help in is by selecting only child div's informations. I'll try and illustrate the issue:
<div class="all">
<div class="resource"> //lets call this resource "resource 1"
<div class="method"> // this method as "method 1"
<div class="method"> // this method as "method 2"
<div class="resource"> // this resource as "resource 2"
<div class="method"> // this method as "method 3"
<div class="resource">
<div class="resource">
...
We have this div "resource", that inside it can be found either another "resource" or "method". Now, the problem is I have to select only child divs in loops. Example:
I'd have to select only the methods inside resource 1.
What i've tried:
Selecting it using css selectors:
resource1.querySelectorAll(".resource > .method")
but this returns me all three methods (and I need it to return only the 2 method nested directly beneath it). I believe this happens because this selector searches for all divs "method" beneath "resouce" divs (and as all these nested divs have the same classnames, it cannot tell them apart).
Selecting it using html selection. e.g:
resource1.getElementsByClassName("method");
again, I needed it to return me only the methods directly beneath document.getElementsByClassName("resource")[0] (that is equal to resource 1), but instead, it returns me not only the methods directly beneath it, but also all the methods found in resources inside resource 1.
Using Jquery:
Searching for more possible solutions, I've found this Jquery line:
$('.resource').find('.method').first().siblings('.method').addBack().show()
but I believe it does not work for my case. For this I made it so all primary resources ("resource" divs that are children to no other "resource") have className = "primaryResource". so that:
$('.primaryResource') //returns me all the primary resource divs. This works as intended.
$('.primaryResource')[0] //then returns me the first primary div, but
$('.primaryResource')[0].find('.method') or $('.primaryResource')[0].find('.resource') // does
not return me anyhting, instead it catches Uncaught TypeError: $(...)[0].find is not a function
You need Jquery object to apply find:
$($('.primaryResource')[0]).find('.method')
Run
To enforce only top level div is read...
replace this
resource1.querySelectorAll(".resource > .method")
with this
resource1.querySelectorAll(".all > .resource > .method")
here is a sample fiddle.
document.querySelectorAll('.all > .resource:first-child > .method')
This will make sure that the selected <div>s are direct children (not grandchildren) of the <div class="all"> element and only the first resource's methods get selected.
The first selector is really close. You are retrieving all methods that are directly under any resource. Of course, you'd like to retrieve all methods under one specific resource.
I'm not sure which resource you want to select, but in the case you want the first one, you can use the following code:
(plain javascript)
document.querySelectorAll('.resource:first-child > .method').forEach(function(el) {
el.classList.add("selected");
});
$('.resource:first-child > .method').addClass("selected");
(jquery)
Demo: https://jsfiddle.net/2bpfuge4/1/
(function() {
document.querySelectorAll('.resource:first-child > .method').forEach(function(el) {
el.classList.add("selected");
});
})();
.resource,
.method {
width: 100%;
height: 50px;
display: inline-block;
}
.resource {
background-color: green;
padding-left: 50px;
}
.method {
background-color: red;
}
.selected {
background-color: yellow;
}
<div class="all">
<div class="resource">
<div class="method"></div>
<div class="method"></div>
<div class="resource">
<div class="method"></div>
</div>
</div>
<div class="resource">
<div class="method"></div>
<div class="method"></div>
<div class="resource">
<div class="method"></div>
</div>
</div>
</div>
You might need to select a different element. You can use :nth-child to select a specific item, or use multiple > selectors to walk the element tree.
I'm looking for a way to retrieve, in javascript, the max possible width of an HTML element with display: inline-block.
My goal is to insert some elements in a page generated by a CMS.
I need the max possible width to adjust the content to be inserted in it.
Example:
HTML:
<...>
<div class="ib">
<div class="b">
<div class="b" id="my_content">
...
<div>
<div>
</div>
<...>
CSS:
.ib {
display: inline-block;
}
.b {
display: block;
}
I can only manage the element "my_content" and it's content. The parent elements are generated by the CMS, and I cannot change anything.
Using jQuery is ok.
[EDIT]
Here's a jsfiddle for a better explaination.
Before inserting content in #my_content, I need to know the available width.
If there's no content in #my_content, I get a width of 0, even if I set width:100% and max-width:100%.
The CMS currently generates this structure. As I don't have any control on this, it may change in the future.
I'm taking my first steps with Polymer.js, and I'm struggling with creating a pseudo-element.
This is what I tried:
In my host document:
<style type="text/css">
#host::x-a-cool-test {
color: green;
}
</style>
<div id="host">
<my-custom-element></my-custom-element>
</div>
In my custom element:
<element name="my-custom-element">
<template>
<style>
#host {
* { display: block; color: blue; }
}
</style>
<div id="group" pseudo="x-a-cool-test">
just some text
</div>
</template>
<script>
Polymer.register(this);
</script>
</element>
That will show just my text in blue. That is correct, because according to this, rules wrapped in a #host have higher specificity than any selector in the parent page.
My question:
If I delete color: blue from inside the #host block in my template, the text is shown in black and NOT green as I would expect. Why is that???
I believe this plunker works how you want it to. Basically, the CSS pseudo-element has to be applied directly to the custom element (in this case the my-custom-element). I switched id="host" to it (instead of its parent div) and the code worked.
<div>
<my-custom-element id="host"></my-custom-element>
</div>
Note: The overriding nature of #host may change. Some (myself included) think it should be more for providing default, fallback styles. In this case rules in the host document will override #host rules instead of the other way around.
Assume we have an element that is similar to this
<div id="navigation">
<div class="nav-block-1">....</div>
<div class="nav-block-2">....</div>
This is the offer
Report
</div>
Now I want to hide all the elements including the textelements but not the nav-block-2, so is there a way through which I can do this? Something like using CSS negation?
I tried using
#navigation :not(.nav-block-2) {
display:none;
}
but this seems to negating even the elements inside nav-block-2? Am I doing something wrong here? Any ideas?
Maybe not what you want but here's what i'd do.
#navigation * {
display:none;
}
#navigation a {
display:inline;
}
EDIT:
As it says in the comments in your question, I think it's difficult to do a :not when there's no tag around the text.
Try this
#navigation div:not(.nav-block-2) {
display:none;
}
<div id="navigation">
<div class="nav-block-1">Div 1</div>
<div class="nav-block-2">Div 2</div>
This is the offer
Report
</div>
Use this:
#navigation > *:not(.nav-block-2) {
display:none;
}
However, you can't hide single text nodes. You will need to put the "This is the offer" in a paragraph or at least in a <span> tag to hide it, or you would need to hide the whole #navigation which inevitable contains the .nav-block-2.