Any help with this would be greatly appreciated, I cant work it out.
I have a list of information contained within seperate div
On page load only the title of each div is showing.
<div class='listing' >
<a href="#" onclick="toggle_visibility('interactive');">
<h3 class='title'>Title</h3>
</a>
<div id="interactive" style="display:none;">
<div class="web"><p>#</p></div>
<div class="phone"><p>Tel: #</p></div>
<div class="email"><p>#</p></div>
<p>copy: ipsum blah </p>
<p>Blah Blah</p>
</div>
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
onclick toggles the visibility of the content. So far so good.
Say now I start to add some simple responsive design. If on small screen I want one column of div, no problem. If slightly wider I make a media query to adjust the width of the div accordingly.
Say I have 2 columns. If I onclick to toggle visibility it of course still shows the content in the 4 column responsive layout. But I want the unhidden content to now revert to full width (might be lot of content, and looks strange to extend down only half a column). So essentially I need the onclick toggle visibility div to always be full screen width.
Can I do this in css? I've tried styling the 'revealed' div but no joy.
Any pointers would be most welcome???!!!! Im sure its easy but Ive tried everything and Im still learning all this!
I recommend avoiding using JavaScript to change style directly whenever possible. Classes are better for this, and they let you do things like customize the styling via media queries, as well as animating content changes.
First, change your HTML to use a class rather than a hard style:
<div id="interactive" class="listing-item">
Next, change your JS to toggle the class, rather than change the style directly:
function toggle_visibility(id) {
var e = document.getElementById(id);
// Note: classList is IE10+, so you might have to do more work
// to support older browsers
e.classList.toggle('visible');
}
Finally, use CSS to handle the magic:
.listing-item {
display: none;
}
.listing-item.visible {
display: block;
}
#media (...) {
.listing-item.visible {
...
}
}
If you want to get fancy, try some CSS3 styling:
.listing-item {
overflow: hidden;
max-height: 0;
transition: all 0.2s ease-in-out;
}
.listing-item.visible {
// pick something reasonable here, to make sure your
// content is visible. Too high, and the animation will be off.
max-height: 999px;
overflow: visible;
}
Related
I am working on a form on a webpage. I want to have a button on a panel which when pressed expands a div (underneath the button) to make it visible and then invisible again when the button is pressed again - a kind of further details popout box. So far i have got this:
function blockappear() {
var ourblock = document.getElementById("theblock");
ourblock.style.transition = "all 2s";
if (ourblock.style.height == "0px") {
ourblock.style.height = "220px";
} else {
ourblock.style.height = "0px";
}
}
and this:
#theblock {
background-color: #a83455;
height: 220px;
width: 100%;
padding: 0;
margin: 0;
display: block;
}
and this:
<p><button type="button" onclick="blockappear()">Try it</button></p>
<div id="theblock">
Some text
</div>
And it seems to work which is quite pleasing (even though it has taken hours to get this far). The problem is this. I want the div to change from 200px to 0px including the contents not just to the extent it can according to the contents. At the moment the div shrinks, but the content "some text" stays put on the page. I have tried changing the display attribute of the div to 'block' and 'table' and still no joy. I thought that the point of a div was that it enclosed the content with the group tags and that the content could not exist without the div. If the div has 0px height how can the text still show?
Incidentally, if i just use display:none; on the div it works (without the transition of course). I need the content of the div to respond to the height of the div somehow - i suspect using the css properly.
I think this has been covered before by using jquery, but i want to use javascript now that i have started as it will probably take me another few hours if i start again with a whole new language :-)
Thanks for any help...
Add overflow: hidden; to your div. This will hide the content which doesn't fit into the container.
You want to use this CSS property on your div:
overflow: hidden;
This will make any content of #theblock bigger than #theblock itself invisible. So - if #theblock has height of 0px - all of its contents will be hidden.
Default value is overflow: visible;, so even content bigger than containing element itself will still be there for all to see. That's all there is to it.
Read more: overflow CSS property (MDN)
Structure:
<div id="content">
<div id="contentTitle" class="ParentCollapser FancyTitle">title</div>
<br />
some text
</div>
After the document loads, I have a js script that looks up all elements with "ParentCollapser" and attatches click driven functions to them that allow the user to collapse the parent when clicked (sets height to 0 right now).
The clicking action works great except for some styling issues - .FancyTitle is defined as such:
.FancyTitle{
margin-left:-40px;
margin-right:-40px;
margin-top:-20px;
margin-bottom:10px;
}
So basically it reaches outside the parent container by 20px on left/top/right. To hide the content, when collapsed i had to set the #content overflow:hidden but that also hides the parts of #contentTitle that reach outside and that looks like poo.
Is there any kind of exception that I can define for the title so it wouldn't be hidden no matter what? Other option would be to make structure alterations but I'd like to avoid that if possible since right now its super easy to use.
You could try fiddling with the negation CSS pseudo class not() with an appropriate selector. Example:
#content:not(#contentTitle) {
overflow:hidden;
}
CSS negation pseudo class
Just be mindful of browser compatibility.
Since the title should be shown all time there is no idea to hide it's parent. Therefore I added a child with the content in.
HTML
<div style="padding:100px;background:gray">
<div id="content" style="background:blue">
<div id="contentTitle" class="ParentCollapser FancyTitle">title</div>
<div class="contentChild">some text</div>
</div>
</div>
Now we hide the contentChild with js
JavaScript
this.Collapse = function() {
this.parent.querySelector("div.contentChild").style.display = "none";
this.collapsed = true;
};
this.UnCollapse = function() {
this.parent.querySelector("div.contentChild").style.display = "block";
this.collapsed = false;
};
Demo
I have a div called calendar that is inside a div called cal-container. The calendar has width:100% so currently it takes up the whole cal-container.
I need to add a side-panel div. This div will have a fixed width of 150 pixels. Thus, #calendar width should be #cal-container width - 150px. Is this possible with CSS or am I forced to use a table?
If it is possible, is there an example? I googled it but nothing like what I want came up.
The side-panel can be hidden and shown by click a button so adding padding will not work.
Here is an idea of what I mean:
The days part is #calendar, and the Unscheduled part is the side panel of 150px.
I tried floating the calendar left, and cloating the side panel right and giving it a width of 150px. But the idea is if I hide that div, the calendar should then take 100%.
Thanks
Like this, the blue would be side and calendar be the left, but calendar needs to take up the room side does not when hidden.
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/finished.html
Result of float:
Got a working solution for you here.
The code to get this working basically hinges on the following structure:
<div class="sideBar">
...
</div>
<div class="tableWrapper">
<table>
...
</table>
</div>
Next, make sure the elements have these significant CSS properties:
.sideBar {
float: right;
}
.tableWrapper {
overflow: hidden;
}
table {
width: 100%;
}
What's happening here is that the .sideBar floats right, and takes up whatever space it needs to. Meanwhile, the .tableWrapper will take up whatever space is left by virtue of overflow: hidden. Finally, tell the table to take up 100% of its available width.
Click the button in the demo to see the table automatically resize.
All major browsers and IE10 support flexbox. Not supported < IE10.
I am new to CSS3 transitions. I am trying to make a image slideshow for webkit only. there are 3 images aligned next to each other inside a wide DIV. This wide DIV is inside a container DIV whoose overflow property has been set as hidden. the width of the container DIV is equal to each Image, hence user can see only one image at a time.
here is the HTML and CSS for that.
HTML
<div id = "imageHolder">
<div id="slide1_images">
<img src="./images/fish.jpg" />
<img src="./images/desert.jpg" />
<img src="./images/space.jpg" />
</div>
</div>
CSS
#imageHolder
{
width: 320px;
height: 240px;
border: 1px solid grey;
overflow: hidden;
position: relative;
}
#slide1_images
{
position:absolute;
left:0px;
width:960px;
-webkit-transition: -webkit-transform 0.5s;
}
Now I have added a CSS hover selector in the code just to test the transition. when user hovers over the image (the inner DIV, to be precise), the whole set moves to left by 320 pixels (which is the width of each image).
CSS for hover
#slide1_images:hover
{
-webkit-transform:translate(-320px,0);
}
Upto this the code works perfectly, when I hover mouse over the first image, the set moves left and the 2nd image fits perfectly in the outer DIV.
What I want is, to perform the same action on Javascript button click. I have added a button called btnNext in my page. How can I fire the translate from the button click event? I tried the below but it does not work.
Javascript
<script type = "text/javascript">
function btnNext_clicked()
{
document.getElementById("slide1_images").style.-webkit-transform = "translate(-320px,0)"
}
</script>
I am sure I have done something stupid! could you please help me out fixing the Javascript function? Thanks a lot in advance :)
With the obvious caveat its for webkit browsers only you just need to use
.style["-webkit-transform"] = ..
as - cannot be used in an inline propery name here: style.-webkit-transform
From JavaScript you can access -webkit-transform property in this way:
var style = document.getElementById("slide1_images").style;
style.webkitTransform ='translateX(-320px)';
You can make it cross-browser friendly by accessing following properties:
transform
webkitTransform
MozTransform
OTransform
msTransform
I'm trying to make a gallery using divs that change their height when you click on them. Ideally, this would include animation to smoothly expand the div's height. There will be several of each div on each page, so it needs to just expand that section.
It's actually supposed to turn out something like the news section on this page: http://runescape.com/
I'd like to do it with JavaScript/jQuery if possible.
$('div').click(function(){
$(this).animate({height:'300'})
})
Check working example at http://jsfiddle.net/tJugd/
Here's the code I ended up using:
JS:
document.getElementById("box").addEventListener("click", function() {
this.classList.toggle("is-active");
});
CSS:
#box {
background: red;
height: 100px;
transition: height 300ms;
width: 100px;
}
#box.is-active {
height: 300px;
}
HTML:
<div id="box"></div>
Fiddle:
https://jsfiddle.net/cp7uf8fg/
try
$('div').toggle(function(){
$(this).animate({'height': '100px'}, 100);
}, function(){
$(this).animate({'height': '80px'}, 100);
});
DEMO
jQuery rules. Check this out.
http://api.jquery.com/resize/
The complete solution:
Both spacer DIV and Margin or Padding on content DIV works but best to still have a spacer DIV.
Responsive design can be then applied to it in your CSS file.
This is mutch better as with JAVA the screen would flicker!
If you use a grid system there will be a media query part there you need to include your settings.
I use a little spacer on HD screen while its increasing till mobile screen!
Still if you have breadcrumb in header multiple lines can be tricky, so best to have a java but deferred for speed resons.
Note that animation is for getting rid of flickering of screen.
This java then would only fire if breadcrumb is very long otherwise single CSS applied via the grid and no flickering at all.
Even if java fired its doing its work via an elegant animation
var header_height = $('#fixed_header_div').height();
var spacer_height = $('#header_spacer').height() + 5;
if (header_height > spacer_height) {
$('#header_spacer').animate({height:header_height});
};
Note that I have applied a 5px tolerance margin!
Ho this helps :-)
I know this is old, but if anyone seems to find their way here. #JacobTheDev answer is great and has no jQuery! I have added a little more for use cases where the event is not being assigned at the same point your toggling the css class.
HTML
<div id='item' onclick='handleToggle()'> </div>
JS
handleToggle(event){
document.getElementById(event.target.id).classList.toggle('active')
}
CSS
#item {
height: 20px;
transition: 1s;
}
.active {
height: 100px;
}