How do I make an image hidden after clicking anywhere inside a div and make it stay hidden until page refresh?
<style>
#containter:active img {display: none}
</style>
<div id="containter">
<img src="image.png">
</div>
This works but as soon as you move the mouse outside of the div, the image reappears. I know it supposed to do that, but how to make it remain hidden?
A simple way of doing this is to wrap the item you want to hide on click in <label> and use a rule like
:checked + img {
display: none;
}
http://jsfiddle.net/kGDQq/1/
Here's an unobtrusive example for JS:
html:
<div id="tempDiv">click me</div>
js:
document.getElementById("tempDiv").onclick = function(e) {
e.target.style.visibility = 'hidden';
}
and a jsfiddle for it
In order to be semantically correct I suggest you use a JavaScript solution and don't try to do it with CSS/HTML hacks. The below method attaches a new click handler to all elements with the class .hide-on-click, simply add the class to any element you want to hide on click.
jsFiddle
HTML
<div class="hide-on-click">Test 1</div>
<div class="hide-on-click">Test 2</div>
<div class="hide-on-click">Test 3</div>
<div class="hide-on-click">Test 4</div>
JS
(function () {
var elements = document.getElementsByClassName('hide-on-click');
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener('click', function () {
this.style.display = 'none';
});
}
})();
If you want the the space that the image took up not to collapse then you should use the visibility property.
this.style.visibility = 'hidden';
Related
I have the following div container:
<div class="col-md-8 grid-wrapper-div chatHistory">
...
</div>
With the CSS:
.chat .chatHistory {
overflow-y:scroll;
height: 550px;
}
and if the page is loaded than the scroll bar should be at bottom -> I use AngularJS.
Is there any possibility to scroll down with css or with AngularJS
[EDIT]
I have tried it like this but chatHistoryContainer.scrollHeight is undefined. Does anyone know why?
Use ngInit, which runs upon rendering content and $timeout to postpone scrolling to the next digest cycle in order to wait for the content rendered completely.
<div id="chat_history" class="col-md-8 grid-wrapper-div chatHistory" ng-init="scrollToBottom()">
...
</div>
myApp
.controller(function($scope, $timeout){
$scope.scrollToBottom = function() {
$timeout(function(){
var objDiv = document.getElementById("chat_history");
objDiv.scrollTop = objDiv.scrollHeight;
});
};
});
OK, what I need is fairly simple, though it's one of those things that I've never managed to get my head around when using CSS. So, here I am...
I'm using a custom template, built around Twitter Bootstrap.
This template features a section (declared as span6 row), containing small blocks (declared as span3). In the end, the sub-blocks form rows (2 blocks per row).
Here's a visual example :
The result is ok, though I'd still need one thing :
HOW do I make sure that 2 adjacent blocks have the exact same height? (e.g. The 1st block - "Some title here" - and the 2nd block - "Awesome work" - white rectangles being of the exact same height, no matter what the contents are... (much like the 2 last blocks)).
Any ideas?
P.S.
Please let me know, in case you need to know anything else about the "inner" structure.
I'm pretty sure it may have to do with "clear" fixes, etc - but to be honest I've never actually understood the... magic behind the trick... :(
Try the following:
1) Assigning parent div with "display:table" and child div's with "display:table-cell" like:
CSS:
.parent-div{
border: 1px solid grey;
display: table;
float: none;
}
.child div{
border: 1px solid grey;
min-height: 100%;
height: 100%;
display: table-cell;
float: none;
}
HTML:
<div class="span6 parent-div">
<div class="row">
<div class="span3 child-div">
......
</div>
<div class="span3 child-div">
......
</div>
</div>
2) You can also use "EqualHeights jQuery Plugin":
Include it your head by adding
<script language="javascript" type="text/javascript" src="jquery.equalheights.js"></script>
And call the function on your .parent-div as:
$('.parent-div').equalHeights();
For detailed usage and limitations, whether it is suitable for your website first read this and proceed.
<!-- ------------------------------------------
Bootstrap 2 : Markup
Credit : http://www.2scopedesign.co.uk/responsive-equal-height-columns-in-bootstrap/
------------------------------------------- -->
<div class="row">
<div class="span6">
<div class="content-box">
Content here
</div>
</div>
<div class="span6">
<div class="content-box">
Content here
</div>
</div>
</div>
<!-- ------------------------------------------
jQuery part
------------------------------------------- -->
<script>
//equal height plugin
$.fn.max = function(selector) {
return Math.max.apply(null, this.map(function(index, el) {return selector.apply(el);}).get() );
}
$(window).load(function(){
equalHeight();
});
$(window).resize(function(){
$('.content-box').css('height', '');
equalHeight();
});
function equalHeight(){
if ( $( window ).width() > 768 ) {
$('.content-box').height(function () {
var maxHeight = $(this).closest('.row').find('.content-box').max( function () {
return $(this).height();
});
return maxHeight;
});
}
else {
$('.content-box').css('height', '');
}
}
</script>
Set a min-width. So in your css have:
#whatevertheboxitscalled { min-width:100px; }
Obviously it doesn't have to be 100px, but whatever size fits best.
I want to show a div by hovering over its parent.
The code is quite big so I'll try to explain.
On the site there is a scrollable div (overflow:auto) which shows a table.
-> it shows 10 lines of the table and the rest (nearly 30) must be scrolled.
In every tr of my table there is a div(hover_over) that has a child-div (show_by_hower)
By hovering over the div (hover_over) the child-div (show_by_hower) should be displayed.
That works so far but the child-div (show_by_hower) is always under the scrolling div.
If I remove the overflow:auto; from the scrollable div it all works fine but I need the overflow auto.
#hover_over
{
position:relative;
width:20px;height:20px;
}
#hover_over:hover div
{
position:absolute;
display:block;
z-index:999;
width:310px;
height:125px;
}
#hover_over div { display:none; }
There is no other positioning in the code.
Here is a jsFiddle with one possible solution. I'm using jQuery's .hover() method to animate an element outside of the table and fill it with the content contained inside the table. This way, your pop-up element is not restricted to the bounds of the table.
Here is the jQuery code:
$(function() {
$(".hover_over").hover( function() {
hovDiv = $(this);
showDiv = $(".show_hover");
showDiv.html(hovDiv.children("div").html());
showDiv.css("top", hovDiv.offset().top)
showDiv.css("left", hovDiv.offset().left + hovDiv.width()).show();
}, function() {
$(".show_hover").hide();
});
});
And the HTML:
<div class="theTable">
<div class="hover_over">1
<div>I'm hidden! 1</div>
</div>
<div class="hover_over">2
<div>I'm hidden! 2</div>
</div>
<div class="hover_over">3
<div>I'm hidden! 3</div>
</div>
<div class="hover_over">4
<div>I'm hidden! 4</div>
</div>
<div class="hover_over">5
<div>I'm hidden! 5</div>
</div>
</div>
<div class="show_hover"></div>
And the CSS:
.show_hover {
display:none;
position:absolute;
background-color:black;
width:100px;
height:20px;
font-size:14px;
color:white;
}
.hover_over div { display:none; }
Update
Because you asked, I decided to make this work with plain javascript. It is not as easy to read, but the same idea applies: move the popup div outside the table and dynamically add the desired content and positioning with onmouseover and onmouseout event handlers.
Here is the new jsFiddle.
And here is the relevant code:
Javascript
(function() {
function hoverIn() {
var hovDiv = this;
var showDiv = document.getElementById("show_hover");
showDiv.innerHTML = hovDiv.children[0].innerHTML;
showDiv.className = "see";
var newTop = hovDiv.offsetTop + hovDiv.offsetParent.offsetTop + hovDiv.offsetParent.offsetParent.offsetTop;
showDiv.style.top = "" + newTop + "px";
var newLeft = hovDiv.offsetLeft + hovDiv.offsetParent.offsetLeft + hovDiv.offsetParent.offsetParent.offsetLeft + hovDiv.clientWidth;
showDiv.style.left = "" + newLeft + "px";
};
function hoverOut() {
document.getElementById("show_hover").className = "";
};
var hoverDivs = document.getElementsByClassName("hoverdiv");
for(var i = 0; i < hoverDivs.length; i++)
{
hoverDivs[i].onmouseover = hoverIn;
hoverDivs[i].onmouseout = hoverOut;
}
})();
CSS
#show_hover
{
display:none;
position:absolute;
top:0;
left:0;
}
#show_hover.see {
display:block;
background-color:green;
width:400px;
height:80px;
position:absolute;
top:20px;
left:20px;
}
Update 2
This answer is getting insanely long. Here's the new jsFiddle. This update allows you to hover over the shown div to interact with the objects inside. I made use of the basic idea behind the hoverIntent jQuery plugin, which is to place the onmouseout handler behind a setTimeout call that allows you half a second to move your mouse into the popup before it disappears. It's a bit fidgety, so you might play with the wait time until it does what you want.
Also, see this StackOverflow question if you want to just check to see where the mouse is at any given moment and trigger the show/hide behavior off that.
That said, here's the important part of the update:
var mouseInShowHover = false;
var showDiv = document.getElementById("show_hover");
showDiv.onmouseover = function() { mouseInShowHover = true; }
showDiv.onmouseout = function() {
mouseInShowHover = false;
showDiv.className = "";
}
function hoverOut() {
setTimeout( function() {
if( !mouseInShowHover )
showDiv.className = "";
}, 500);
};
Well, your JSFiddle example worked fine for me, so I'm assuming you're using IE8 or something that has very strict z-index rules.
Try adding this:
#divscroll tr:hover {
position:relative;
z-index:1;
}
JSFiddle example.
I'm using several WordPress loops and jQuery UI Tabs that result in the Main tabs and entry-content div markup below. The WordPress loops generate the "entry-post" markup in each tab div, but I'm not showing the php, as the resulting html markup in each tab div is the important part.
I'm also using a bit of jQuery to independently expand/collapse each entry-content div:
$(".entry-content").hide();
$(".entry-title").click(function() {
$(this).parent().children(".entry-content").slideToggle(500); });
What I've found is that each of the entry-content divs keeps their expanded state when switching tabs, i.e. if some of the entry-content divs are expanded in tabone and I switch to tabtwo and then back to tabone, they're still expanded in tabone.
What I need to do is collapse all the entry-content divs in a tab when a tab is changed. Below is the tab init and also the fx to change the tabs.
What do I need to add to this function to collapse all the entry-content divs when a tab is changed?
$(document).ready(function(){
var $tabs= $("#tabs").tabs();
});
$(function() {
$('#tabs').tabs({
fx: { opacity:'toggle' }
});
});
Main tabs and entry-content div markup:
<div id="tabs">
<ul>
<li>tabone</li>
<li>tabtwo</li>
<li>tabthree</li>
</ul>
<div id="tabone">
<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...
</div></div>
<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...
</div></div>
<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...
</div></div>
</div>
<div id="tabtwo">
<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...
</div></div>
<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...
</div></div>
<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...
</div></div>
</div>
<div id="tabthree">
....
</div></div>
The following code should collapse all .entry-content divs whenever a new tab is selected:
$(document).ready(function() {
var $tabs= $("#tabs").tabs({
fx : {
opacity: 'toggle'
},
select : function(event, ui) {
$(".entry-content").hide();
}
});
});
$("div.post [name^="entry-title"]").hide();
should do what you're wanting when attached next to your fx.
or:
$("#tabs a").click(function () {
$("div.post [name^="entry-title"]").hide();
});
I'm not sure i understand you're question completely. But if you wan't to check whether the tab is triggered or not, try use this:
$( ".selector" ).tabs({
show: function(event, ui) { ... }
});
Simplified how you could collapse all divs with class "entry-post", whenever the tab is showed:
$(document).ready(function(){
var $tabs = $("#tabs").tabs({
show: function(){
$('.entry-post').hide();
}
});
});
I'm not a jQuery expert, so here's straight javascript. Might at least help solve the problem...
Since you don't care what tab a div is on (since all divs should be hidden when a tab is changed) you could simply hide all divs on the page every time a tab is changed, regardless of what tab it's on.
var divList = document.getElementsByClassName("entry-content");
for(var divitem in divList){
divitem.style.display = "none";
}
I wish my jQuery was stronger so I could give it in that, but it may help...
Edit:
Just looking at what your example code, I guess something like this in jQuery:
$("#tabs a").click(function() { $(".entry-content").hide(); });
Something that closes all entry-content class divs when any tab is clicked.
You may want to make use of the existing jquery UI tabs library and this will solve a lot of your problems.
http://jqueryui.com/demos/tabs/
Using this will allow you to make a better association between your list items and the divs they are controlling. Add the reference in your header
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
or download it and remove what you don't need. Add the following to your CSS
.ui-tabs .ui-tabs-hide {
display: none !important;
}
and change your references so they are in keeping with the jqueryUI specification
<div id="tabs">
<ul>
<li>tabone</li>
and then the div ids to match
<div id="tabs-1">
<div class="entry-post">
this should make the association. You can then add the controlling behaviour so it should read
$(document).ready(function(){
$(function() {
$('#tabs').tabs();
});
and that will do away with the need to store the array of divs
you can then bind a function to the tabselect event which will hide the divs you want to collapse
$('#tabs').bind('tabsselect', function(event, ui) {
$('#tabs').children().not(ui.panel).children().children(".entry-content").hide();
});
your code should then read:
<head>
<title>Collapse Divs</title>
<style type="text/css">
.ui-tabs .ui-tabs-hide {
display: none !important;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(function() {
$('#tabs').tabs();
});
$('#tabs').bind('tabsselect', function(event, ui) {
$('#tabs').children().not(ui.panel).children().children(".entry-content").hide();
});
$(".entry-content").hide();
$(".entry-title").click(function() {
$(this).parent().children(".entry-content").slideToggle(500);
});
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li>tabone</li>
<li>tabtwo</li>
<li>tabthree</li>
</ul>
<div id="tabs-1">
<div class="entry-post">
...
<h1 class="entry-title">Title 3.3</h1>
<div class="entry-content">Lorem ipsum...</div>
</div>
</div>
</body>
I've got a page with a repeater and a bunch of documents that should be hidden to start and then shown with a plus sign next to each.
My question is - do I have to assign unique ID to each document DIV to make it be able to toggle hidden and shown?
What's the most code-efficient way to handle this?
Here is a quick example:
http://jsfiddle.net/aaamU/
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title></title>
</head>
<body>
<div id="repeater">
<div class="document">
<div class="title">Document 1</div>
<div class="button">+</div>
</div>
<div class="document">
<div class="title">Document 2</div>
<div class="button">+</div>
</div>
<div class="document">
<div class="title">Document 3</div>
<div class="button">+</div>
</div>
</div>
</body>
</html>
CSS
#repeater .document
{
height: 20px;
border: 1px solid black;
width: 200px;
padding: 10px;
}
.document .title
{
float:left;
}
.document .button
{
float:right;
}
JS
$(document).ready(function(){
$(".title").hide();
$(".button a").click(function(event){
$(this).parents(".document").children(".title").toggle();
event.preventDefault;
});
});
Here is a Fork with the sliding version:
http://jsfiddle.net/W5QkY/1/
You don't have to assign an ID, you can use their position in the document to identify the correct element.
For example, you have something like this:
<div id="documents">
<div> ... </div>
<div> ... </div>
<div> ... </div>
</div>
You can use jquery like so to trigger individual elements:
$('#documents > div').eq(0).show();
Where the number passed to the eq() method will return the div at that index.
no you dont have to assign them all a different Id. There are many ways to select multiple dom elements with one selector expression
you have a few options
1) you can assign them all the same class and then do $('.className').show()/.hide()
2) you can select them by a css selector related to the page's layout i.e $('#mainContent img').hide() will hide all images inside of a container (prob a div) with id mainContent
You could easily avoid unique id:s on the html tags by using jQuery's traversing capabilities:
<div class="frame">
[Document title] +
<div>[document contents, links or whatever go here]</div>
</div>
And the jQuery magic:
$(function() {
$('.frame a').click(function() {
var $t = $(this);
if ($t.html()=='+')
{
$t.html('-').next('div').show();
} else {
$t.html('+').next('div').hide();
}
});
});
You could obviously switch the .show()/.hide() calls to some animation of your choice.