I'm looking for an HTML/CSS solution to this challenge:
I have multiple elements with the same class or same id, and I want to show/hide them all at the same time, using a button or toggle switch. So I then have a click event, when I click that class or ID representing all those elements, they all hide. When I click again, they must show again.
I would appreciate
Thanks
HTML and CSS are used to describe a static representation of content - there is no way dynamically hide/show content using HTML/CSS. You would need to use Javascript to do this. Code example (very simplistic and unelegant example):
<div id="somediv">Hide This</div>
<input type="button" onclick="hide('somediv')" value="Hide Div"/>
<script type="text/javascript">
function hide(div_id) {
document.getElementById(div_id).style.display = "none";
}
</script>
A nicer solution would be to use jQuery but I think for your case you should first learn the basics of Javascript and HTML/CSS before moving onto jQuery.
Do not use same ID for HTML elements! Use element class attribute. jQuery is nice thing, but is overkill for such thing :)
<div class="hide1">One</div>
<div class="hide2">Two</div>
One
Two
No hide
And simple JS code:
function ToggleVisibility(divClass)
{
var els = document.getElementsByClassName(divClass);
for(var i = 0; i < els.length; i++)
{
els[i].style.visibility = els[i].style.visibility == "hidden" ? "visible" : "hidden";
}
}
According to W3Schools, visibility is standart thing for all major browsers
http://www.w3schools.com/jsref/prop_style_visibility.asp
You can do it with just CSS.
See this simple example http://jsfiddle.net/rHSmV/ (Code Pasted Below).
See here http://dev.opera.com/articles/view/css3-show-and-hide/
and here http://cssdeck.com/labs/css-only-showhide
for more in depth examples
<html>
<head>
<style type='text/css'>
/* Use a checkbox to workaround showing and hiding */
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}
label {
cursor: pointer;
}
/* Shown */
div.showhide {
display: inline;
}
/* Hidden */
input[type=checkbox]:checked ~ div.showhide {
display: none;
}
</style>
</head>
<body>
<label for="showHide">Show/Hide</label>
<input type="checkbox" id="showHide">
<div class="showhide">
<p>Show and hide me without JavaScript!</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<div class="showhide">
<p>Show and hide me too without JavaScript!</p>
</div>
</body>
</html>
You can use jquery...
$("id of button").click(function(e) {
if($("class of elements").css("display") != "none") {
$("class of elements").hide();
$("class of elements").css("display","none");
} else {
$("class of elements").show();
$("class of elements").css("display","block");
}
});
There is no CSS solution for your task. Look for JQuery function .toggle().
$('.button').click(function(){
$('.some_class').toggle();
});
In Jquery, you could simply call:
$('.ToggleMe).toggle();
where .ToggleMe is the class of your element.
To toggle by ID:
$("#ToggleMe").toggle();
And to toggle my name:
$('div[name=ToggleMe]')
Related
I have a text field and an explaining div. Can I make this explaining div have opacity = 0 ONLY when I type something in the text field?
Thanks in advance for any help.
Here is the HTML code:
<input type='text' name='input' id="searchdevice" class="search-field" placeholder="" autofocus/>
<div id="explain">
Search your device in the text field
</div>
You can do it with just CSS if you set the input as required:
<input type='text' name='input' id='searchdevice' class='search-field' required='required' autofocus />
<div id='explain'>
Search your device in the text field
</div>
CSS:
/* Show by default */
#explain {
opacity: 1;
}
/* Hide it when input field has content */
#searchdevice:valid + #explain {
opacity: 0;
}
/* Remove "invalid" styling when input field is empty.
E.g. in Firefox, the input has a red box-shadow by default. */
#searchdevice:invalid {
box-shadow: none;
}
When you type something in the input field, it's "valid" and the #explain will have opacity of 0.
Browser support for the :valid selector: http://caniuse.com/#feat=form-validation
Demo: https://jsfiddle.net/2ozh40vp/1/
This will require JavaScript to listen to text input and hide the DIV.
Example using jQuery:
$('#searchdevice').on('input', function(){
$('#explain').addClass('hidden');
});
css:
.hidden {
opacity: 0;
}
Working fiddle: http://jsfiddle.net/spanndemic/kphgg2d0/
You can try:
$('#searchdevice').on('input', function(){
$('#explain').css('opacity', 0);
});
You only need this css line:
input:focus + #explain{opacity:0}
http://jsfiddle.net/kLLkyvyh/
Yes, javascript is good here though, functionality is kept where it belongs, responding to events in css is questionable practice. You'll want the keypress event for typing. The functions defined separately makes them easier to re-use.
var hideExplain = function() {
document.getElementById('explain').style.opacity='0';
}
document.getElementById('searchdevice').addEventListener("keypress", hideExplain);
see keypress example here
You might be better doing this though, as focus and blur will allow you to undo the effect when the user moves on. There's a show function included here too.
var showExplain = function() {
document.getElementById('explain').style.opacity='1';
}
document.getElementById('searchdevice').addEventListener("focus", hideExplain);
document.getElementById('searchdevice').addEventListener("blur", showExplain);
see the example here
You could use keypress to remove the tip and blur to reshow it, that way the tip would hang around for as long as possible for the user. See anothe example
Also, you would find it better to add and remove classes - here's an example with JQuery. Now your style classes are re-usable too.
CSS
.is-transparent {
opacity: 0;
}
.is-opaque {
opacity: 1;
}
JQuery
$('#explain').removeClass('is-opaque').addClass('is-transparent');
You can use this code:
<html>
<head>
<title>Some title</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
$('#searchdevice').blur(function(){
$('#explain').fadeTo(1000, 0);
});
});
</script>
</head>
<body>
<input type='text' name='input' id="searchdevice" class="search-field" placeholder="" autofocus/>
<div id="explain">Search your device in the text field</div>
</body>
</html>
Here you can try various effects through fadeto from the link - http://api.jquery.com/fadeTo/
I am not good with javascript or jquery, so maybe i will get help here. I need script, which automatically find element height, and put that height as css style in div.
I made simpe hover (overlay) effect, but as you can see in demo, when i am hovering image, overlay effect shows in all div. I need, that overlay will be displayed only in image dimensions.
I found this script:
$(document).ready(function() {
$('.overlay').click (function () {
alert($(this).height());
});
});
But this script is not what i am searching for. It gives me height when i am clicking on the element. But how i can make it to show me automatically when page is loaded? How can i post height to div style?
HTML
<div class="item">
<img src="http://placekitten.com/450/550" class="image">
<a class="overlay" href="#">
<h3 class="title">Some title</h3>
<div class="description">
<p>
Lorem ipsum dolor sit amet, <br>
consectetur adipisicing elit.
</p>
</div>
</a>
<div class="information">
<span>Some information, long text... etc</span>
</div>
</div>
CSS
.overlay {
width: 100%;
background-color: rgba(0,0,0,0.5);
position: absolute;
top: 0;
left: 0;
text-decoration: none;
color: #fff;
display: none;
}
DEMO http://codepen.io/anon/pen/raVLgV
Sorry for my BAD english, and thank you for any help.
in first: make sure the jQuery has beed loaded in document, so add follow code in demo
<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
Second the script
window.onload = function() {
$('.overlay').css('height', $('.image').height() );
}
why no using $(document).ready() ?
because window.onload will run after DOM and image load completed.
$(document).ready() run just DOM load completed.
Demo http://codepen.io/anon/pen/azOmom
I'm trying to use png images as separators in a web page but they don't appear. Am I missing something? And if I had to forgo the images how would you do it instead? Many thanks.
I have the following HTML:
<tr>
<td align="center">
<img class="Separator" align="center" style="width:70%" />
</td>
</tr>
and the following CSS:
.Separator {
background: url('/ct/images/L/Separator.png');
}
Just a regular ol <hr> tag will suffice - JSFiddle Demo
HTML
<p>Lorem ipsum dolor sit........rna, quis interdum orci rutrum quis.</p>
<hr>
<p>Sed mollis urna me............imperdiet ac augue. </p>
CSS:
hr {
border:0;
height:20px;
background:url("http://lorempixel.com/400/200/sports/") 0 0;
}
If the separator is merely a horizontal line, you can use the <hr/> tag in your HTML.
The purpose of the tag is to separate sections, and it should solve your problem aesthetically while providing the correct semantic tag (good for SEO and/or screen readers)
It's always important to remember that Google doesn't know what your image is of, but it knows that <hr/> is there to mark a separation.
Don't set background for img element... Do it with div:
.Separator
{
background: url('/ct/images/L/Separator.png');
width: 70 % ;
}
...
<div class="Separator"></div>
Try using
.separator:after {
content: url(image.jpg);
}
I have a select list with a specified width. text-overflow: ellipsis is working only with Firefox v15. It is not working with IE7-IE9 and Chrome. Is text-overflow : ellipsis supported in IE7- IE 9 and chrome? If yes, what am i missing here? Is there a work around to get a similar effect? Please help. Thanks in advance. Html is given below
<!DOCTYPE html>
<html>
<body>
<select style="white-space: nowrap;overflow: hidden;
text-overflow: ellipsis;width:70px;
">
<option>Volvooooooooooooo</option>
<option>Saabbbbbbbbbbbb</option>
<option>Mercedesaaaaaaaaaa</option>
<option>Audiiiiiiiiiiiiiii</option>
</select>
</body>
</html>
I think that text-overflow:ellipsis is not supported in Chrome when you put it into a select element, you can see an exemple here: http://jsfiddle.net/t5eUe/
You can do this programming. For example, if you use Rails, you have the function "truncate", if you use php, you have the function "substr".
I studied on net that text-overflow:ellipsis does not work on IE, when the container is a div or width attribute is not defined.
We can also use in IE -ms-text-overflow:ellipsis but is not recommended by MDN.
and coming to chrome, I think this link will solve your problem.
check this browser compatibility for text-overflow.
If these all doesnt work then go through jQuery to achieve this which works on all browsers.
.ellipsis {
white-space: nowrap;
overflow: hidden;
}
.ellipsis.multiline {
white-space: normal;
}
<div class="ellipsis" style="width: 100px; border: 1px solid black;">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div class="ellipsis multiline" style="width: 100px; height: 40px; border: 1px solid black; margin-bottom: 100px">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<script type="text/javascript" src="/js/jquery.ellipsis.js"></script>
<script type="text/javascript">
$(".ellipsis").ellipsis();
</script>
jquery.ellipsis.js
(function($) {
$.fn.ellipsis = function()
{
return this.each(function()
{
var el = $(this);
if(el.css("overflow") == "hidden")
{
var text = el.html();
var multiline = el.hasClass('multiline');
var t = $(this.cloneNode(true))
.hide()
.css('position', 'absolute')
.css('overflow', 'visible')
.width(multiline ? el.width() : 'auto')
.height(multiline ? 'auto' : el.height())
;
el.after(t);
function height() { return t.height() > el.height(); };
function width() { return t.width() > el.width(); };
var func = multiline ? height : width;
while (text.length > 0 && func())
{
text = text.substr(0, text.length - 1);
t.html(text + "...");
}
el.html(t.html());
t.remove();
}
});
};
})(jQuery);
I have following statement:
<font color="#2B547E">
Now I don't want to hard code it in my html; instead I want to apply a css class. I don't want this color for all fonts in my page, only for a specific part. I tried the following:
<font class="xyz" >
But it's not working. I can't use a div/span as it results in a new line in my html template due to some predefined stylesheet which I can't change.
How can I move that hard coded value to css?
If you can add a CSS class for this <font> element, you should be able to switch over to using a <span>:
HTML:
<span class="coloredText">text</span>
CSS:
.coloredText {
display: inline; /* will stop spans creating a new line */
color: #2B547E;
}
If you still find the span creates a line break, you can change the rule to
display: inline !important; - this will increase the precendence of this rule so it will take effect. I'm not sure if the use of !important is frowned upon by CSS-pedants, but it might help.
Should be:
HTML:
<font class="xyz">...</font> <!-- or any other tag -->
CSS:
font.xyz {color:#2B547E;} /* or just .xyz */
See also: Class and ID Selectors
First off, use a reset css to reset all your styles to a default of your choice.
I use this one, but there are others around : http://meyerweb.com/eric/tools/css/reset/
Then, write your css and use targeting to apply the styles to different elements
This link explains CSS specificity : http://www.htmldog.com/guides/cssadvanced/specificity/
<link rel='stylesheet' href='reset.css'>
<style>
#top p {
color: blue;
}
#bottom p {
color: red;
}
.black {
background: #000;
}
</style>
<div id='top'>
<p>This text will be blue</p>
<span class='black'>I have a black background</span>
<div>
<div id='bottom'>
<p>This text will be red</p>
<span class='black'>I have a black background too!</span>
<div>
You can use a combination like this:
<div class="xyz">Your content goes here...</div>
and the CSS can be:
.xyz {display: inline; color: #2B547E;}
This will solve the problem of new line and also give the desired color.
HTML
<p>Lorem ipsum dolor sit amet, <span class="xyz">consectetur adipiscing elit.</span> Mauris ultrices arcu eu velit euismod pulvinar.</p>
CSS
.xyz {
color: #66CD00; }
View a live example
I'm sort of lost as to what you can and can't do here ;) but I'll put this in incase
font[color="#2B547E"] {color: red;}
<p>I have following statement: <font color="#2B547E">I can't use a div/span as it results in a new line in my html template due to some predefined stylesheet which I can't change.</font></p>
Unfortunately IE7 has problems with this but it does target if you use font[color] {color: red;} - This will of course not enable you to specifically target by existing colors if that's what you're after - but it will target them all to bring them in line if that's all you require, a mixture of the two might provide a decent enough fallback?
Your problem might be a case of CSS specificity, i cant tell from the details provided. if your style for spans is defined through an ID such as
#somediv span{ display:block}
That css will overwrite something like
span.myspan{display:inline}
because the ID style is more specific, you can solve this a few ways, first you can set the style inline in the html.
<span style"display:inline; color:#2b547e;">some text</span>
or you can make a class and use a more specific style by including the parent ID in the css
#somediv span.myclass{display:inline}
Be more specific with your selector, instead of just div, use div.class, or div.id
<div class="Foo">
Bar
</div>
div.Foo {
color:#2B547E;
margin:0; /* overriding the predefined styles in other sheet */
padding:0; /* overriding the predefined styles in other sheet */
}
replace margin / padding with whatever is causing the new line.
Also I'd always recommend not using style tags; such as Font. Your Html should use declarative only tags. Not to mention the Font tag is deprecated.