This is my first question.
My code is here on codepen.
I've been tinkering with Bootstrap, CSS, and jQuery in this code in an attempt to place a full-width background image behind the last featurette(From Bootstrap demo) item on my page. I'm guessing the problem stems from the bootstrap container class, but I am hoping for a work around.
I've enclosed the featurette with a div tag, applied an ID of "background1" to it, then used CSS in my attempt to set position to absolute and left:0.
This gets me the position I want (except I'd also like the background image to be responsive as in Bootstrap img-responsive), but the childen? tags inherit the opacity and positioning.
I've tried z-index:-1 unsuccessfully. What also seems to be happening is that the low opacity has allowed the footer to creep up into my last featurette item as if opacity also messes with the z-index.
So my questions are:
How can I stretch a BG image across the back of the featurette or any other set of grouped items within DIV tags?
How can I make this BG image responsive with Bootstrap or apply the img-responsive class through CSS?
Happy New Year! Thanks for reading!
Don't wrap your content. Use <div id="background1"></div> right before the content, and this:
#background1 {
width: 100%;
height: 100%;
position: absolute;
opacity: 0.3;
left: 0;
background-size: cover;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Kiyomizu-dera%2C_Kyoto%2C_November_2016_-01.jpg/800px-Kiyomizu-dera%2C_Kyoto%2C_November_2016_-01.jpg");
}
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 have a list of <li>'s and a icon next to it which on hover shows an overlay with the information about the 'test'. something like below:
test1
test2
test3
and so on....
html:
<span class="account-info-icon"></span> // icon is the build using image sprites
<div id ="hover-container>
//details about the 'test1','test2'..so on
</div>
js:
$('span.account-info-icon').on("mouseenter", function(event){
$("#hover-container").show();
}).on("mouseout", function(){
$("#hover-container").hide();
});
The above code works fine to show/hide the div container on hover. However I'm having issues with the positioning of the overlay. im using css to position the overlay, as a result of which, the overlay is always positioned below irrespective of which ever icon i hover.
in short because im hard coding the values of the <div> conatiner the overlay always shows at one place and does not move as per the hover over the icons.
Below is the css im using to position the overlay.
CSS:
#hover-container{
display: none;
position: relative;
top: -750px;
left: 943px;
padding: 2px 0 0 9px;
}
Basically what i m trying is to allign the overlay per the flow of the hover. so when i hover over , say: 'test1' icon, the overlay should display next to it. I'm not sure if this is achievable via CSS or Js.
Any ideas appreciated!!!!
Thanks in advance!
To simplify this exercise, become familiar with two css position values: "position:relative" and "position:absolute". Also, proper container arrangement will help you get favorable results.
On the premise that #hover-container just happens to generically refer to a non-replicated ID property in your html, it can have this css definition:
#hover-container{
display:none;
position:absolute;
padding: 2px 0px 0px 9px;
left:100px;
}
Each instance of your span should then be in a wrapper container to help guide the hover to appear exactly where you want it:
.info-row-wrapper {
position:relative;
}
Pulling all of these together, you have:
<div class="info-row-wrapper">
<span class="account-info-icon"></span> // icon is the build using image sprites
<div id ="hover-container>
//details about the 'test1','test2'..so on
</div>
</div>
Here, the wrapper container gives a shell that the absolute positioned element appears inside of. The absolute positioned element respects the position of the parent html container that is explicitly positioned relative (if not already assigned a css position attribute)
please refer to the fiddle - http://jsfiddle.net/L33jo3j7/4/
Pretty much $el.hover() solves the thing.
and let me know if you have any doubts.
This looks better-
http://jsfiddle.net/L33jo3j7/4/
I am trying to figure out how to create an image gallery like the one illustrated below so I can place it onto my website. I am wondering if anyone can point me in the right direction for a tutorial? I have found a lot of nice galleries that will display my images, but none of them displays the images like in the filmstrip style I am after.
Requirements of gallery:
When clicking on the arrows, the gallery strip will either shift
left/right by one picture
Hovering over the image will darken the image, and display some
caption about the image
I just answered a question where someone was using carouFredSel. This jQuery plugin looks like it would work pretty well, though I do not think it has the built-in hover effect. To be honest though, that is the easier part.
The trick is to make the width slightly larger than the images to show, which leads to the partial images on each side.
Here is a jsfiddle to illustrate.
UPDATE:
The OP asked if the page nav links could be repositioned. I modified the jsfiddle to work this way. The additions were as follows:
.list_carousel {
position: relative;
}
#prev2 {
position: absolute;
top: 35px;
left: 0;
}
#next2 {
position: absolute;
top: 35px;
right: 0;
}
If you have a relatively positioned container element, you can absolutely position child elements. I added relative positioning to the list_carousel container, then I could absolutely position the nav arrows within the container. Change the top value to position vertically, and left/right to position horizontally.
I also removed the pager all together, as it was not a requirement based on the original example. If you change the page arrows to images it is pretty much what you want.
MORE UPDATES
I decided to take it one step further and make the hover effect work more like the example. See the new jsfiddle. The changes are:
Added span wrappers around all text within list items
Added $(".list_carousel li span").hide(); to hide all the spans
Modified hover event to toggle spans
I also added some CSS to position the span text:
.list_carousel li {
position: relative;
}
.list_carousel li span {
position: absolute;
bottom: 0;
display: block;
text-align: center;
width: 100%;
}
FINAL UPDATE (I PROMISE!)
I decided to go all in and add the transparency layer too: jsfiddle
Hover modifications:
$(this).prepend($("<div class='hover-transparency'></div>")); and $(this).find("div:first").remove(); to add/remove transparency layer on hover in/out.
CSS modifications:
.hover-transparency {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.60);
}
These style the transparency layer. Change to suit your taste.
Something like jCarousel should do the trick. Once you have the carousel functionality in place, you can add in the hover affect via CSS and a span that contains the caption.
I was just looking at ContentFlow Plugin which is JavaScript based.
They include a separate library of additional plugin you can use that takes care of your Slideshow requirements, in particularity this one HERE. When you use the mousewheel over the 3 images, it scrolls by 1. That said, you can mod the plugin to do the same when the arrow buttons are clicked.
Sample plugin markup looks like:
{
shownItems: 3, //number of visible items
showCaption: true // show item caption
width: 100, // relative item width
height: 100, // relative item height
space: 0.4 // relative item spacing
}
To address that the captions should be visible only on mouse hover, I would set showCaption to always be true along with using a jQuery .hover(); Event Listener that will use .show(); and .hide(); on the caption Class Name .caption when required. Also, using jQuery to set the opacity can be done within the .hover(); event too.
The latest version of ContentFlow v1.0.2 supports multiple instances on the same webpage if that's ever required.
After looking through W3Schools I'm still not sure if this is possible or not.
The idea is to have the div be a progress bar. (Yes, I am aware of jQuery UI's progress bar.) I would like it to start out 100% filled with one background-image, but overtime have it fill from 0%/100% to 100%/0%.
I see that it is possible to have multiple background images specified using css: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_background_multiple
but I am not sure how to extend that logic to having only % widths. Any ideas? Thanks
You can't set the width of a background image. But the solution is easy. The div by itself is the progress bar at 0% (so has the unloaded background image), then have another div inside that which is the actual progress (which animates from 0% to 100% and has the loaded background image). So you animate the width of the div inside the progress bar to represent progress.
This site has a few examples that use a span within a div:
http://css-tricks.com/css3-progress-bars/
it's not using images (just CSS3), but you could easily update it have background images on both the span and the div. CSS3 does allow multiple background images (http://www.css3.info/preview/multiple-backgrounds/) but I'm not really sure if it's the best use for your example.
Using position: absolute; or position: relative;, it's possible to overlay one image with another; you'll have to be careful with the z-index, though. You'll then be able to animate the width of the image you want to act as the 'progress meter' using jQuery's animate() function, like this (assuming your progress meter image width starts out at 0px and will end up at 100px):
$("#progress_meter").animate( {"width": "100px"}, 5000);
No, but you can set another div on top of the initial div and have a higher z-index property.
For example, on the code below, div-a will be on top of div-b:
.div-a {
with: 50%;
height: 30px;
z-index: 2;
}
.div-b {
width: 100%;
height: 30px;
z-index: 1;
}
I am trying to add the thumbnails section of the js gallery in the footer of a web page. I've never broken up a gallery before and figured it's the only way to achieve this look
http://img69.imageshack.us/img69/5923/bsade.jpg
The link for what I have now is this: http://www.marisaraskin.com/two.html.
(The borders are just guides for me while I'm still working on it)
The CSS code for the thumbnails container is:
.galleria-thumbnails-container {
height: 100px;<br>
bottom: 0;<br>
position: absolute;<br>
left: 10px;<br>
right: 10px;<br>
z-index: 1;<br>
border:1px solid yellow;<br>
}
I'm not sure what my other options are for this. I was maybe thinking overlapping the content container over the footer with z-index. Though I'm iffy about that especially because everyone's screen resolution is different. I can post more code per request. I am not sure what else you need to see as of now.
In case you need to know I'm using a gallery js called "Galleria" (classic).
If I were you I'd modify the js script so that you can populate blocks that are not contiguous in the actual HTML code, but here's a rough approach to doing it all through css:
remove position:relative from #container
remove position:relative from .galleria-container
add position:absolute to .galleria-stage and remove left and right
positioning. Also, add top:90px (or something close to that) and
give it a width: width:920px.
change .galleria-thumbnails-container to use absolute positioning and
use the bottom:___ property to set it where you belong.
Basically what you're doing here is removing all the relatively positioning in the parent elements of the gallery so that the gallery segments all all being positioned with respect to the page rather than any of their parent elements. Once this is done, you can just modify the absolute positioning and width of the stage block and the thumbnail block so that they sit where you want them.