I have a simple blog page - a list of posts that each consist of a title and contents. When the page loads I want all posts' contents hidden until their titles are clicked. The following code accomplishes this but with an unwanted side effect - the on-page-load hide() function that hides each post's content also hides the background of the containing (id="content") div:
Relevant JavaScripts:
$(document).ready(function() {
$(".blog_post p").hide();
//BLOG CONTENT ANIMATION
$('.blog_post').click(function() {
$(this).find('p').slideToggle(130);
});
});
Summary of blog page:
<section class="grid_7">
<div id="content">
<div class="blog_post">
<div class="blog_head">
<h2>Title</h2>
</div>
<p>Contents</p>
</div>
</div>
</section>
Relevant CSS:
section {
border: 1px solid white;
}
#content {
margin: 20px;
background-image:url('../images/content_background.jpg');
}
When the page loads the list of titles displays without the #content parent div's background. However when I click on a post's title the #content div's background shows up behind all posts up to and including that one.
Any idea what's going on?
It sound like you have some CSS that applies to the blog_head elements, that makes them float, for example:
.blog_post { float: left; }
In that case, the reason that the background doesn't show up is that the height of the content div is zero. A floating element doesn't affect the size of its parent, and when the content div only contains the headers, the height becomes zero. The background is still there, but there is no area where it's visible.
Add an overflow to the content div, that will make it contain its children:
#content { overflow: hidden; }
Note that this will not hide anything as long as you don't specify a size for the content element, it will just change how it's rendered so that it will become a container for its children.
A bit of a stab in the dark: Your #content div will, of course, be a lot shorter as the blog posts aren't there, basically consisting just of the divs with the titles. Perhaps that's the problem.
Does the image have a blank (or subtle) bit at the top or something, so that it's only apparent that it's there when there's more content in the #content div (e.g., when it's taller)? Or is there some other reason you can see that when #content is really short, you wouldn't see the background on the part of it that's there? (You can use the debugging tools in most modern browsers to see what the dimensions of the #content div are when the paragraphs are hidden; or slap a border on it temporarily, but tools these days are pretty good.)
Basically, since the jQuery doesn't, of course, actually hide the background, it must be a side-effect of the paragraphs being hidden — because of the effect that has on the dimensions of the #content div.
This is working fine for me:
HTML:
<div class="blog_post">
<div class="blog_head">
<h2>Title</h2>
</div>
<p>Contents</p>
</div>
</div>
CSS:
section {
border: 1px solid white;
}
#content {
margin: 20px;
background-image:url('http://bluebackground.com/__oneclick_uploads/2008/04/blue_background_03.jpg');
}
JS
$(document).ready(function() {
$(".blog_post p").hide();
//BLOG CONTENT ANIMATION
$('.blog_post').click(function() {
$(this).find('p').slideToggle(130);
});
});
Check it live here: Jsfiddle example
Related
I'm working on a site that has all of its pages basically "slide" around on the main landing page. So you basically start on a div with an ID of "main" that also has a class of "currentpage." If you click a nav menu item, the content slides away, and the next page's content slides into place. This new content's primary div would have a new id (let's say #about), and now the "currentpage" class is added to this div as well.
The thing is, the body tag has a background-image attached to it (it used to have a full screen video, but I set that to hide, and then there's this bg image behind it). I'd like to change the background image depending on which "page" you are on. At first, I set it up so that #about had a background-image set up, and so forth for the rest of the page IDs. The thing about this is that the content of the primary div is padded a whole bunch, so you would see the specified #about background image, but then you'd actually also still see that original image from the body tag behind it.
Thus, I'd like to change the actual body tag's background image property depending on which ID you're on.
I figured some means of checking if you're on a specified ID, as well as if the class for that div is set to "currentpage" would be step 1, with step 2 then changing the background image if that condition is true.
Here is what I have tried so far, to no avail:
Attempt 1:
if ($this.is('#about')) {
$('.bgimage').css({"background":"url(imageurlhere)"});
}
This didn't do anything.
Next, I found this old SO thread and tried to modify it just to see it in action to know if I was on the right path. Here's what I used:
Attempt 2:
if ($("#about").hasClass("currentpage")) {
$('#about').css({"background-color":"red"});
}
Unfortunately, this also didn't cause anything differently) when I went to About.
And yes, I had cleared cache out each time, and manually even went to the JS file to ensure it had the new code blocks each time.
Edit
Here is the basic page format:
<body class="video">
<div class="preload">Whole lot of stuff in here for a preload overlay</div>
<nav>Nav is here</nav>
<main>
<div id="pt-main" class="pt-perspective ">
<div class="page-1 currentpage" id="main"></div>
<div class="page-2" id="about"></div>
<div class="page-3" id="services"></div>
<div class="page-4" id="portfolio"></div>
<div class="page-5" id="contact"></div>
</div>
</main>
The "currentpage" class will go to a different div if the corresponding link in the nav is clicked. So, click About in the nav, currentpage class drops from #main and ends up in same div as #about
And then the CSS for the body tag is as follows:
.video {
background: url(../img/video_bg.jpg);
background-size: cover;
}
I basically want to make it so that background (image) of .video changes when you end up on #about, #services, #portfolio, etc.
TL;DR
Can anyone help me with this code block? How do I check if an div with a specific ID also has a class, and then modify the .bgimage CSS to change its background?
Edit 2:
I came up with a workaround for this. Here's what I did:
1) I set the overall background color to #000, removed the original bg-image altogether, and actually restored a full-screen video I'd previously hid
2) I edited each nav menu item to have a hidevid class, except for the Home link, which I made showvid
3) I created CSS for each "page" ID (ie #about {background-image: url(image);}
4) I created a new CSS class: .hidethis {display: none;}
5) I then implemented the following jquery:
$(document).ready(function(){
$(".hidevid").click(function(){
$("video").addClass("hidethis");
});
$(".showvid").click(function(){
$("video").removeClass("hidethis");
});
});
What this does is set the background to black, but that's not seen on the landing ("home") page, just the video. However, clicking a nav menu item will "slide" the next "page" into view, displaying its background image and changing the video to have a display: none property, basically hiding it and the extra content (the nav) just has a black background behind it.
Using vanilla JavaScript (pure JavaScript), you can check if a div has a particular class name and based on the results, change the css by doing this:
var x = document.getElementById('about');
var y = document.querySelector('.bgimage');
if (x.classList.contains('currentpage')){ // if #about has "currentpage" class, run the following
x.style.background = 'red'; //change background-color of #about to red
y.style.background = 'url(imageurlhere)'; // change background-image of .bgimage
}
jsFiddle: http://jsfiddle.net/AndrewL64/nqjypevh/10/
your codes is wrong. true usage is this.
css('background-color','red')
I came up with a workaround for this. Here's what I did:
1) I set the overall background color to #000, removed the original bg-image altogether, and actually restored a full-screen video I'd previously hid
2) I edited each nav menu item to have a hidevid class, except for the Home link, which I made showvid
3) I created CSS for each "page" ID (ie #about {background-image: url(image);}
4) I created a new CSS class: .hidethis {display: none;}
5) I then implemented the following jquery:
$(document).ready(function(){
$(".hidevid").click(function(){
$("video").addClass("hidethis");
});
$(".showvid").click(function(){
$("video").removeClass("hidethis");
});
});
What this does is set the background to black, but that's not seen on the landing ("home") page, just the video. However, clicking a nav menu item will "slide" the next "page" into view, displaying its background image and changing the video to have a display: none property, basically hiding it and the extra content (the nav) just has a black background behind it.
I’m making a whole lot of assumptions and guesses. You only showed one css class. From the description it sounds like the problem is actually using CSS to cover the background, and that if it weren’t for that, there would be no need to change the class on the body. The basic solution, move the initial background from the body to the #main div, move the padding to the .page-1, .page-2 etc. divs. Also, if the background images are transparent also give a background-color.
I’m assuming the nav does not have a background image and stays put. I’m also assuming you already have the sliding of the sections in place, I didn’t show that but instead just a simple display none/block just to keep it simple. I also didn’t show the js (but you shouldn’t need to change the body class.) I also left the html alone.
body {
margin: 0;
height: 100%;
}
nav {
height: 50px;
background-color: #ccc;
}
main {
background-image: url(https://picsum.photos/200/300?image=0);
background-size: cover;
}
.pt-perspective > div {
height: calc(100vh - 50px);
padding: 50px;
background-repeat: no-repeat;
background-color: aqua;
background-size: cover;
background-image: url(https://picsum.photos/200/300?image=0);
display: none; /* or positioned off screen, wherever you already have it */
}
.pt-perspective .currentpage {
display: block;
}
.pt-perspective .page-1 {
background-image: url(https://picsum.photos/800?image=1);
}
.pt-perspective .page-2 {
background-image: url(https://picsum.photos/800?image=2);
}
.pt-perspective .page-3 {
background-image: url(https://picsum.photos/800?image3);
}
.pt-perspective .page-4 {
background-image: url(https://picsum.photos/800?image=4);
}
.pt-perspective .page-5 {
background-image: url(https://picsum.photos/600?image=5);
}
<body class="video">
<!-- <div class="preload">Whole lot of stuff in here for a preload overlay</div> -->
<nav>Nav is here</nav>
<main>
<div id="pt-main" class="pt-perspective ">
<div class="page-1 currentpage" id="main"></div>
<div class="page-2" id="about"></div>
<div class="page-3" id="services"></div>
<div class="page-4" id="portfolio"></div>
<div class="page-5" id="contact"></div>
</div>
</main>
I am trying to create a "document viewer" of sorts using html and css. I'm wanting the end result to look somewhat of a pdf when viewed in an iframe with no border.
I have a parent div setup with a class of paper. This has some box shadow and other styles attached to it.
<div class="paper">
</div>
Within this I have children divs setup with a class of page. This is where all the content sits for the page.
<div class="page">
</div>
My problem is when the content gets too long for a page and you scroll to the next "page" it all mixes together and looks like junk. I have attached a code pen to further assist in being able to visually see what I am struggling with.
CodePen
CodePen Link Here
You can change your page class in CSS with this:
.page {
height: 100%;
margin-bottom: 15px;
padding: 20px;
display: table;
text-align: center;
}
What is the problem?
If the content in your pages gets too long, it overflows the height end kind of "bleeds" on the next page.
What to do?
You should set a fixed height of 100vh to your paper
Then, tell it not to expand with: overflow: scroll
Use min-height to set the height of your page, instead of height: it will naturally expand the height of the pages instead as you content grows
Finally, just in case, set overflow: hidden to page
I'm creating an HTML/CSS application, and I'm a bit stuck.
Let's say that I have 2 elements positioned next to eachother display: inline-block
Every element has again a couple of elements which are placed next to eachother.
See the following illustration that tries to explain it:
So, the image below describes 3 different levels of elements:
Level 1: Red - Outer element
Level 2: Yellow - Wrapper element
Level 3: Green - Content
In HTML, this could be constructed writting like the following:
<ul id="holder">
<li>
<div>
<div class="col">Col 1</div>
<div class="col">Col 2</div>
</div>
</li>
<li>
<div class="col">Col 1</div>
<div class="col">Col 2</div>
</li>
</ul>
The UL represents the red element, the LI represents the yellow elements and the DIV elements represents the green elements.
Now, let's say that our red element has a fixed width and I place the overflow on hidden. This means that when I resize the page, the elements on the right dissapear when they don't fit the page.
But here the problem arizes, when I do resize the window, and the window becomes too small to render everything, immediately, the latest LI element is not visible on the screen anymore.
Is there any CSS way to make sure that no the LI element are hidden but the DIV elements inside the LI? When both DIV elements are hidden, off course the LI element can be hidden aswell since it's empty?
If there's no CSS way to do this, anyone minds putting me in the right direction by using JavaScript or something else?
Here's a jsFiddle to explain it a bit more.
Kind regards
The li disappears from view because it's in display: inline-block.
As soon as the window isn't wide enough, it moves below the first li.
You can see this happen if you release the #holder's height (height:auto).
The solution is to add white-space : nowrap to force the li to stay in one line.
Updated fiddle :
https://jsfiddle.net/zLqfe4z8/4/
It's not a problem of your elements hiding because there's not enough width, it's because they're wrapping because there's not enough width (and then being hidden by the overflow: hidden).
You can see this happening if you remove the height constraint on your wrapper:
#holder { overflow: hidden; border: 1px solid red; }
The fix is simple, stop it from wrapping using white-space: nowrap:
#holder { white-space:nowrap; overflow: hidden; border: 1px solid red; height: 52px; }
I have a page that has no vertical scroll, rather, everything is displayed horizontally.
if you scroll all the way to the end of my page (all the way to the right) you will see my contact info.
For example:
<div1></div1>
<div2></div2>
<div3></div3>
<divN></divN>
In this case, div1 is the most left item, with div2 in the center div3 to the right of it... and all the way at the end, divN is displayed.
every div is 500 px wide.
I can set my page width to 20000px ( for 4 divs ) and that works great.
However, I wanna make my page dynamic and each div, other than divN is loaded from a database. This means, each time I add content, I have to manually increase my page width.
Is there a way to automate this process.
As per i understand may be that's you want this:
.parent{
overflow:hidden;
white-space:nowrap;
}
.parent > div{
width:500px;
height:300px;
border:1px solid red;
display:inline-block;
*display:inline;/*For IE7*/
*zoom:1;
white-space:normal;
}
Check this http://jsfiddle.net/HJsrJ/
Why don't you use width:100% for an external div and make other divs width:33% with every content floated in the right way?
See example
You could save the CSS into a table, inserting placeholders where you want to dynamically change values. Heck, this could even just be a template file somewhere. Then, whenever you publish a new section on the base, pull the template, string-replace the placeholders, and then write the new CSS out to file.
Make sense?
Another option would be to give each of these div a class then use javasript to count the number of classes present multiply this by the required width of each div then use javascript to set the page width with the on document ready event.
I'm not 100% sure what OP wants here, but here's a 'solution':
HTML:
<div class="parent">
<div id="div1">1 has content</div>
<div id="div2" class="nocontent"><!-- no content --></div>
<div id="div3">3 has content</div>
<div id="div4">4 has content</div>
<div id="div5" class="nocontent"><!-- no content --></div>
<div id="div6" class="nocontent"><!-- no content --></div>
</div>
CSS:
.parent {
white-space: nowrap;
}
.parent > div {
display: inline-block;
width: 200px;
margin-left: 1px;
background: #eee;
}
.parent > .nocontent {
display: none;
}
JavaScript (jQuery):
$(function() {
// Simulate loading content
setTimeout(function() {
$('#div2').text('2 has content now').removeClass('nocontent');
}, 3000);
});
Demo:
http://jsfiddle.net/foxbunny/EY9sc/
I have a container div element that has overflow:hidden on it. Unfortunately this property is required on it because of the way the site is made.
Inside this div it's all the site content, including some tooltips. These tooltips are displayed with jQuery when you mouse over a link or something.
The problem is that some of these tooltips will display partially hidden because of the overflow thing above, because they are positioned outside the container div...
Is there any way to be able to show a specific element from inside this container, even if it's out of its boundaries? Maybe a javascript solution?
the html looks like this:
<div style="overflow:hidden; position:relative;">
the main content
<div style="position:absolute;left:-100px;top:-50px;"> the tooltip thing </div>
</div>
try this:
<div style="position:relative;">
<div style="overflow:hidden; position: relative; width: {any}; height: {any};">the main content<div>
<div style="position:absolute;left:-100px;top:-50px;"> the tooltip thing </div>
</div>
just place your main content to another div inside the main div and give provided css to hide the content if overflowing...
CSS works like a box, and sometimes, you have elements "flowing out". Setting overflow: hidden on the main element hides contents that flow out of this box.
Consider the following:
HTML
<div class="box">This box has a height and a width. This means that if there is too much content to be displayed within the assigned height, there will be an overflow situation. If overflow is set to hidden then any overflow will not be visible.</div>
<p>This content is outside of the box.</p>
CSS
.box {
border: 1px solid #333333;
width: 200px;
height: 100px;
overflow: hidden;
}`
This outputs the following:
Note that the rest of the texts that overflow are hidden.
if overflow:hidden is to contain floats, then there are other ways that would allow tooltips to not be cut off. look foe clearfix:after