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
}
Related
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!
<! DOCTYPE html>
<html>
<head>Sample</head>
<body>
<div class="panelBody">
<div class=panel-section></div>
<div class=panel-section style="display:block"></div>
</div>
</body>
</html>
In given Snippet there are two elements with same class. I have to select the element which does not having style attribute.If i tried to search with panel-section class its giving ambiguity error.So how to select div element which does not having style attribute.i.e
<div class=panel-section></div>
Try this:
//div[#class='panelBody']/div[not(#style)]
Explanation: First find the div with class panelBody, then find child div elements in the panelBody div which doesn't contain #style attribute.
Use findElements method if there are more than one div element without #style attribute, otherwise findElement() method would suffice.
Since there are more than one elements with same class name, you need to use Selenium's driver.findElements() method. I have tried getting this element, but I wonder if it is clickable. Only element can actually be useful here is text Sample.
Check below code. Let me know if it is similar to what you are looking for.
List<WebElement> linksize=null;
String links[]=null;
linksize = driver.findElements(By.cssSelector("div[class=panel-section]"));
int linksCount = linksize.size();
links= new String[linksCount];
for(int i=0;i<linksCount;i++)
{
links[i] = linksize.get(i).getAttribute("style");
if(links[i].isEmpty())
{
System.out.println("I am div without style");
linksize.get(i).click();
}
}
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(...)
I have a website and an element on it, build using JQuery. I've entered the element but it seems it's bottom falls below my taskbar, and the web page doesn't notice it or something so I can't scroll. How can I force the HTML page to be 'longer' so the user can scroll?
Add a height value into the body property of your css.
body{height:#;}
Make sure overflow isn't hidden.
You have an element with that set .cls-mobile-flash {overflow: hidden;}
Maybe start with that, but we really need to see your code. Maybe do a JSfiddle
How can I force the HTML page to be 'longer' so the user can scroll?
Just add <br/> at the bottom of your page like this :
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
PS. no need for the enclosing slash-brace at the end for html4, just use <br>
For your specific situation, you can check for 'overflow' and fixed height values.
In my case, I have a div with a GridView in it and I wanted this div to be aoutoresizable, depending on the size of the window.
$(window).resize(function () { $("#<%=divGV.ClientID%>").height(getH()); });
function getH() {
var windowH = $(window).height();
var topOfDiv = $("#<%=divGV.ClientID%>").offset().top;
var variableH = 40; //40 to maintain the window height in order to not have the scrollbar in the browser
var gvH = $("#cphMaster_gv").height() + variableH;
var h = windowH - topOfDiv - variableH;
if (h > gvH) { return gvH; }
else { return h; }
}
divGV is div, cphMaster_gv is my GridView.
Hope this gives you an idea...
I'll try to explain:
I have numerous div classes, but for the sake of simplicity, let's say I only have 3.
Someone is viewing DIV 1, and I want to give them the option of only printing DIV 1, omitting 2 and 3.
However, on the same page, I would like to give them the option to ONLY PRINT DIV 2. Or only print DIV 3.
I think I get how you can omit certain things from getting printed. But how can you select a section here or there on the same page to be printed with a print link.
Thanks,
Tracy
You can use jQuery to show/hide divs. Read the jQuery tutorial:
http://docs.jquery.com/Tutorials
The code will look this way:
<script>
function showDiv(n) {
$('.divs').hide();
$('#div_'+n).show();
}
$(document).ready(function() { showDiv(1); });
</script>
<a href='javascript:showDiv(n)'>show div n</a>
<div class='divs' id='div_n'>I'm div n</div>
There are many related posts on printing div content, this particular question was still open though it was asked in '10.. Following JavaScript function can be used for printing content of a selected Div tag. Hope this helps. Declaimer: I used some of the existing answers, fixed/enhanced code/error(s) to work with (and tested on) IE-8.
function printDiv(divName) {
var divToPrint = document.getElementById(divName);
var newWin = window.open('', 'PrintWindow', 'width=400, height=400, top=100, left=100', '');
newWin.document.open();
newWin.document.write('<html><body onload="window.print()">' + divToPrint.innerHTML + '</body></html>');
newWin.document.close();
setTimeout(function () { newWin.close(); }, 10);
}
Call printDiv from anywhere in page or from within selected Div. Here is test link:
Print Customer Data
Print Order Data
Assign respective IDs to Div that is to be printed:
<div id="divCustomerData">Div Contents goes here... </div>
The only catch right now is it loses css styles. I'll update response when i get a chance to fix it. Thanks.
https://github.com/jasonday/jquery.printThis
I would give each div an id, and then using the above plugin (i wrote) specify according to div id.