Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
The community reviewed whether to reopen this question 9 months ago and left it closed:
Original close reason(s) were not resolved
Improve this question
I am trying to hide an HTML element with CSS.
<select id="tinynav1" class="tinynav tinynav1">
but it's very resilient, even with the Google Inspect element I cannot change the styling.
It's simple, just set the display property to none in CSS:
#tinynav1
{
display:none
}
again when you would like to show it set the display to block.
visibility: hidden hides the element, but it still takes up space in the layout.
display: none removes the element completely from the document. It does not take up any space, even though the HTML for it is still in the source code.
Other advantages of using display:
display:none means that the element in question will not appear on the page at all (although you can still interact with it through the DOM). There will be no space allocated for it between the other elements.
visibility:hidden means that unlike display:none, the element is not visible, but space is allocated for it on the page.
use display:none; or visibility:hidden;
CSS:
select#tinynav1 { display: none; }
or if multiple selects should be hidden, use the corresponding class:
select.tinynav1 { display: none; }
As inline-style you could do it also (which you can try for inspector):
<select id="tinynav1" style="display: none">
You can use display:none or visibility:hidden, based on your requirements:
#tinynav{display:none;}
or
#tinynav{visibility:hidden;}
Refer the below URL for better understanding of display:none and visibility:hidden.
Difference between "display:none" and "visibility:hidden"
If you want to hide it and collapse the space it would need, use display: none; if you want to keep the space, use visibility: hidden.
<select id="tinynav1" class="tinynav tinynav1">
CSS
.tinynav {
display: none;
}
Use style="display:none" directly on the <select> or create a css class having that setting and assign the class to the <select>.
Use this CSS
.tinynav {
display: none;
}
or
.tinynav {
visibility: hidden;
}
The difference is that the former will make the select not rendered at all and the latter will make the select rendered (it will take the space of the document) but it will be completely invisible;
Here's a fiddle to show the difference: http://jsfiddle.net/rdGgn/2/
You should notice an empty space before the text in third line. It is the select that is rendered but not visible. There is no space before the second line of text, because the select is'nt rendered at all (it has display:none).
There is also a third option which is
.tinynav {
opacity: 0;
}
It behaves almost the same as visibility: hidden but the only difference is that with opacity: 0 you can still click the select. With visibility: hidden it is disabled.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I must not know how to phrase this question properly because a few hours later, I still have yet to find the coding that will implement what I want. . .
I do NOT want a continuously-scrolling one-page website of multiple 'sections'. I want to create a single-page website with four content sections, and each section will remain hidden until the link designated for it is clicked & reveals the content. I am looking for the simple framework---html, css, JavaScript/Jquery/whatever (I'm not sure which would be best).
A website that replicates what I want: http://giorgibou.com/
What I am about to say is more of suggestions/tips than actual solution.
I visited the link http://giorgibou.com/ and explored for a bit.
I'v realized that every time when you click a navigation, the URL of website doesn't change. I don't exactly know what tools you're using to make a website but if you're using javascript, html, css and jquery you can simply look into frameworks like Node JS. You can easily manipulate and control routes.
For example: If "Home" link is clicked, then render "some_page.html" without directing to new link or any.
I hope this helps you a bit. Node JS is pretty good framework to consider when building a single page website/ a dynamic website/ a static website.
You can hide all of your page sections with CSS, except when the .active class is applied to it. You can use javascript or jquery to add and remove the .active class on corresponding link click like you are saying:
HTML
<div class="page-section page-1 active"></div>
<button class="link link-1">Page 1 link</button>
CSS
.page-section {
display: none;
}
.page-section.active {
display: block;
}
JS
function pageActivator(page) {
$('.page-section').removeClass('active');
page.addClass('active');
}
$('.link').click(function() {
var pageNum = parseInt($(this).attr('class').match(/\d+/g)[0]);
pageActivator($('.page-' + pageNum));
});
Here is full codepen example to get started: http://codepen.io/StefanBobrowski/pen/PpvBdg
I made a basic replica of that website you posted here, take a look: https://jsfiddle.net/o2gxgz9r/5165/
here's a brief structure:
<div class="sidebar">
<a id="something1">Some Link</a>
<a id="something2">Another Link</a>
</div>
<div class="main_window">
<section class="slider">
</section>
</div>
With some CSS
.sidebar, .main_window {
height: 100vh;
float: left;
}
.main_window {
width: 70%;
}
.slider {
height: 400vh;
margin-top: 0;
}
.sidebar {
width: 30%;
}
You can then do some onclick() events with jQuery, ex
$('#something1').click(function() {
// change margin-top of .slider
});
then change the margin-top property of .slider to negative multiples of your window height (to make it scroll up) and have it animate
Basically there's a sidebar on the left and a content area. Both are floated left so they're in line with each other, and their heights are set to the full height of the window. In the div to the right there's another section that's 4 times the height of the window. It holds your content. When you click on the links, the jQuery will change the margin-top of that slider window, which moves it up and down. If you take the overflow:hidden off of the main_window, you'll get a better idea of what's happening. For more content, just adjust the height of the main_window section and modify the JavaScript accordingly. There's a more elegant way to do the JavaScript without that switch case, but I was lazy.
Though this question is a bit vague, I believe what you need to research is the CSS display value. Using jQuery's toggle method it is rather simple to hide/show sections by clicking links or buttons:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- These buttons hide or show both sections plus all buttons,
depending on their current display value (none or block) -->
<button class="tog" style="display: none" onclick="$('.tog').toggle()">
Section 1
</button>
<button class="tog" onclick="$('.tog').toggle()">
Section 2
</button>
<div class="tog" style="background-color: green; color: white">
This is Section 1.
</div>
<div class="tog" style="background-color: blue; color: white; display: none">
This is Section 2.
</div>
This is a very broad question. You can look at how the effect you want to use is implemented on that site by right-clicking and selecting 'View Source.' There are many ways to accomplish this with or without external libraries depending on exactly what you want.
A less flashy solution is to have each section have style {display: none} by default then have this changed on button click. If you did this you'd have to also reset the other sections when the button was clicked.
This question already has answers here:
:last-child not working as expected?
(3 answers)
Closed 7 years ago.
Could you please tell me why CSS is not working on last button. Actually I give border to last button of button bar. I also apply important to that last button or of bar. But it is not taking CSS. Here is my last button CSS:
.button_account_bar > .button:last-child {
border-top-right-radius: 8px!important;
border-bottom-right-radius: 8px!important;
}
http://codepen.io/anon/pen/oXdoBy
The issue is because last-child means it has to be the last child of the parent. Applying it to .button does not mean "last child button", it still has to be the very last child, regardless of if it's a button or not.
What you are basically saying is: apply style if it's a .button AND if it's the last-child
It seems you can use last-of-type instead:
.button_account_bar > .button:last-of-type {
border-top-right-radius: 8px !important;
border-bottom-right-radius: 8px !important;
}
You can check out browser support for last-of-type here
Note that you don't actually need !important at all, but you may have some other reason for it so I will leave that for you to decide on.
The last button is not the last child of its parent. You have another element, .toggle_button_div as the last child of .button_account_bar.
One way to solve it is to wrap the buttons in a new <div> and then refer to that in your CSS rule:
.button_account_bar > div > .button:last-child {
...
Demo here
In your code .button_account_bar is the parent class so it's last child is div which class is "toggle_button_div, so style for ".button_account_bar > .button:last-child" is not working use div-class="toggle_button_div" outside the div-class="button_account_bar" for proper work of your style, and absolutely your code will work. or you can use last-of-type in place of last-child
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I'm creating pages for a site, and I've been having to use <br> scripts to conform the text to make it readily readable on smaller devices as well as larger.
Is there a way to constrain the text to a percentage of the page without altering the other content? (at 80% of the browser window) much like an image can be constrained to the size of the browser page. Would I need to create an actual text document and insert it as an image?
I've tried using "textarea", "body", "hgroups", and "p" to no avail. I'm referring to using something like:
<img src="example.jpg" width="50%" alt=""/>
but with a text area, box, etc. and allowing it to expand vertically as an inverse proportion to the width. I'm not really picky so long as it doesn't need a scroll bar and can display the entire paragraph. I'm not looking to change the size of the text itself.
In a sense that makes the width and height inverse properties so that all the text will be viewable. It should still conform to the browser window at a certain percentage of the window rather than the default 100%. I've also tried using borders, margins, and padding. I have the feeling I'm just missing a key component.
#some_div{
width:80%;
margin-left:none;
}
Add width as 80% and take out left margin and also padding if possible.
Simplest way I can think of:
p.full-width {
width:80%;
padding: 0 20% 0 20%;
text-align:left;
}
I'm not sure I understood you quite well. Is it making a text be like a background image? To be behind of all the content and adjust according to the window size?
If so, maybe this?
div.text-bg-container {
position:absolute;
width:100%
height:100%;
font-size:80%
z-index:-1;
}
HTML: structure (which boxes are within other boxes)
CSS: styling (setting widths, borders, animations)
JS: interaction (add click listeners, send JSONs over http://, etc)
Target your HTML <div> tag or whatever with DOM selectors:
CSS:
.someDivClass {
width: 80%
}
#someDivID {
left: 0%,
right: 20%
}
JS:
var element = document.querySelector(".someDivClass")
or
var element = document.querySelector("#myID")
then
element.setAttribute("style", "width:80%");
or
element.addEventListener("click", function (e) {
alert('hello')
});
for example
Only one element can have a unique ID id="myDivID", where as many elements can have the same class="myDivClass" defined in their <div> tag (div is the most basic DOM element, and most every DOM element is a div with additional, baked in functionality by default)
Good luck!
If you need to set the size of an element relative to browser window, you can use Viewport-percentage lengths. Something like:
p {
font-size: 10vw;
}
Here is a simple jsFiddle example. Resize your browser window to see the difference.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
How to hide a div with jQuery?
Is there any way to hide the content of div in css without using the display: none;
because it remove the object from code.
I also used the visibility: hidden;
but the image content of div still display
Place the contents inside of a inner div and set that inner div to display none.
Set visibility to hidden and don't set the visibility of the descendants (the images that are showing up) to visible.
with jQuery you can do
$('div').hide();
If you want to be more specific you can use an id or class name instead if div.
ex: $('#myid').hide();
You can store the contents in temporary and then do empty, restore these content to the DIV when you need.
var contents= $('divId').html();
$('divId').html('');
I have a set of divs like so:
<div id="textArea">
<div id="text"></div>
</div>
CSS properties:
#textArea {
height: auto !important;
min-height: 2em;
overflow: hidden;
}
#text{
display: none;
}
I'm filling in the div with the id of "text" with error messages coming back from a POST request using jQuery. The size of the data coming back is not static, but my problem is that the div is not adjusting.
I am basically trying to mimic the Ruby on Rails default flash message that will push divs further down the page with a dynamically adjusted div.
I think you are simply doing too much - A div should automatically expand to fit the text content inside it, unless you have a specific rule saying otherwise. Do you have a rule that specifies a height for all divs? Is that why you have the height: auto !important here? Are you using a reset stylesheet? Something external to these rules is affecting your divs.
Hope that this points you the right way.
Div's should update height and width automatically unless otherwise told to. What is your jQuery code to update the div? What are you using to reveal the div to the browser (since it's currently set to display:none)? Have you tried using firebug to inspect the elements?