I have 2 columns. The right column is a normal scrollable pane of content. The left hand column, with classname sticky is the column I'm trying to toggle between fixed and static positioning. It must remain fixed in view as you scroll through the right hand column until the end. When you get to the end of the right hand column (and the next section becomes visible) the sticky div's position must change to static and scroll normally with the page. The following section must scroll in the same manner (normally) until it reaches the top of the browser window where the current sticky div in view changes to position fixed.
HTML:
<section>
<div class="c-2 sticky"></div> /* Background image */
<div class="c-2">
<p>Any volume of content. Must cater for long and short pieces</p>
....
</div>
</section>
CSS:
.content {
width: 100%;
overflow: hidden;
float: left;
padding-left: 130px;
position: relative;
}
.c-2 {
position: relative;
width: 50%;
left: 50%;
overflow: hidden;
background: #e4f;
}
.c-2.sticky {
background: url(img/holder.jpg) fixed top center no-repeat #fff;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: fixed;
left: 0;
width: 60%;
}
The JS is where I fall down, I just don't know how to begin to do this. I've tried using StickyKit but without any luck. I have a JSFiddle here: http://jsfiddle.net/6HPX5/
Hello please view this demo and tell me if something like this is what you want http://jsfiddle.net/6HPX5/130/ then i can make a better explanation about this.
You'll need to put an "anchor" in where the new section begins and then with jQuery, you'll want to see the position of this element, and then once you determine that the anchor is visible use jQuery(id).css() option to change the position.
OR another alternative would be to track scrolling, and when the element on the left needs to move, use animate to move it off the screen.
UPDATE
http://api.jquery.com/css/ - to change the position attribute.
http://api.jquery.com/scroll/ - to detect scrolling
http://api.jquery.com/position/ or http://api.jquery.com/offset/ - to get the position of your anchor.
And then you add this:
jQuery(window).scroll(function(e) {
//track scrolling
});
Related
I want to show an image over a menu in the right, but it doesn't work on IE and Microsoft Edge on Windows 10.
<div class="menuDiv">
<ul id="menu">
<div class="menu_image"></div>
<li><a><img src="img/image_1.png"></a>
<ul id="seccion_1"></ul>
</li>
<li><a><img src="img/report_image.png"></a>
<ul id="seccion_2"></ul>
</li>
</ul>
</div>
menuDiv uses menu of themeRoller of jqueryUI
.menu_image
{
right: 0px;
position: absolute;
content: url(../../../../../lib/img/image_logo.png);
background-repeat: no-repeat;
/* background-position: 98% 0%;*/
width: auto;
height: auto;
}
This is how it looks on Chrome and Firefox
This is how is looks on IE
How can I show the image on IE?
I set a similar example on jsfiddle
https://jsfiddle.net/kzxfu7j4/
add
.menu{
display: relative;
}
to your css or change your .menu_image as below:
.menu_image
{
content: url(../../../../../lib/img/image_logo.png);
background-repeat: no-repeat;
/* background-position: 98% 0%;*/
width: auto;
height: auto;
float:right;
}
Edit:
By the way make sure that the div has proper height and width, you can simply change its height and width to match the image height and width.
try this :
.menu_image
{
position: absolute; z-index: 9999;
content: url(../../../../../lib/img/image_logo.png);
background-repeat: no-repeat;
width: auto;
height: auto;
float:right;
}
If that not work, maybe it's the 'content' that the problem
I found a solution, I just set ":before" on the class menu_image and works
.menu_image:before
{
right: 0px;
position: absolute;
content: url(../../../../../lib/img/image_logo.png);
background-repeat: no-repeat;
/* background-position: 98% 0%;*/
width: auto;
height: auto;
}
The issue is your content CSS attribute. This is only valid when applied to ::before or ::after psudo-elements:
https://developer.mozilla.org/en/docs/Web/CSS/content
You have two options:
1) If the image is important in the context of the content (so you definitely want all users to see it) simply add an <img> in the markup.
Also, since you're positioning the images with absolute positioning, it makes more sense to me to add the actual <img> tag and position them directly as opposed to positioning empty div elements and setting the image as a background.
If the images represent navigational buttons, use this method 1.
2) If the image is not important to the content context, you can add it as a background image the conventional way, using:
background-image:url(...);
https://jsfiddle.net/rwhxpmfm/
Background images have accessibility issues (for example, they're not included when a webpage is printed on paper and screen readers can't access them...but screen readers can access an <img> element's alt attribute) so only use them if it's just for decoration and not part of the content's context.
I'm really new into html/css/javascript and I need some help with a site I'm trying to design.
My URL is this one: http://www.wideconcept.com/test2/test.html
It's a full-page background site, with the background image being responsive. The problem is when the user clicks on the "photos" link, and then on '1': the image that gets displayed on the screen as the new background is not positioned as the original background image, and also the height of page increases (the user can now scroll down).
How can I change the html/css code so that, when the user clicks on the 1st image, to display it in the same way as the background image?
Thanks!
EDIT - To be more specific: My main problem is that when I click the 1st photo link, the image is not displayed in the same position and dimensions as the original background image, even though the css properties for that are the same as the original background css properties.
I just realized your design was having some scroll position for the background image( which seems fine in firefox but not in chrome )
To fix the problem:
img { //line no. 375
display: block;
height: 1px;/*this fixes your bug*/
}
Another problem I found is that your div with id background, so add the following rule inside #background:
#background {
z-index: 1; /* to fix the layer bug*/
}
I think that you can define the main background in that way:
body{
overflow: hidden;
position: absolute;
min-height: 100%;
width: 100%;
height: auto;
top: 0;
left: 0;
background: url(assets/bg100.jpg) no-repeat center center;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
#Add the browser prefixed CSS:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
#And
background-size: cover;
}
And then when the user clicks the photos buttons change the background image url through jQuery/javascript.
For example, using jQuery this should be similar to this:
<script type="text/javascript">
$(document).ready(function() {
$('body').css('background-image', 'url(../images/backgrounds/header-top.jpg)');
});
</script>
Hope it helps.
Just like Halbano said, the problem are the <div id="background"> and the <div id="background-image">
You can fix it by doeing the following:
<div id="background background-image"></div>
Do this at the Background div.
Al of the sudden the image will drop a bit but that is simply fixed with css. Also a Menu with a button will pop-up. Apperantly the manu was there already but i could not see it in Chrome.
Good luck
Im using a float: right on my website. I want to make that div 100% of the window height minus a 10px margin. I want the height to resize with the page.
I also want the image in it to sit at the bottom of the 'container' minus 10px padding.
I've tried adjusting everything, and am sure its something in the code conflicting but i just can't work it out.
Thanks for any suggestions in advance.
I suggest you use absolute positioning instead of floating for this, you can make elements expand by setting for example top and bottom at the same time.
Absolute positioning could work for the image as well if you set its bottom to 10px (its offset parent will already be the right container, because any position other than the default static makes the element an offset parent).
Quick example:
/* this makes your body take up the whole screen */
html, body { height: 100%; }
/* the positioning magic */
#right { width: 100px; position: absolute;top: 10px; bottom: 10px; right: 20px; }
jsFiddle Demo
​UPDATE: and an updated jsFiddle to show an example on putting another element in the container and positioning it to the bottom.
#image { position: absolute; bottom: 10px; left: 20px; }
A website I am building has a fixed sidebar on the left at the center of the screen. It should always stay at the vertical center of the browser window when the page is scrolled.
How can I achieve this effect? Is there a pure css/html solution?
I thought about updating the sidebars position onscroll, but it is likely to flicker as the css top position gets updated. Is there any other solution? I would really like to do this with css only, but I wouldnt mind if jquery would provide the functionality I am looking for.
You probably need to add position: fixed; to the css to make it so that it does not move.
Here's what you are looking for. Please note that mobile browsers will ignore position:fixed so you will need to use some js to make it work for them as well. Also, make sure that the container's min-height is 200px;
#sidebar
{
height: 200px;
position: fixed; /* Keep in position on scroll */
top: 50%; /* push down 50% of container */
margin-top: -100px; /* bring back up 50% height of this element */
}
#container
{
min-height: 200px;
_height: 200px; /* IE6 always acts as though height is min-height unless overflow: hidden */
}
I'm trying out the jQuery Lavalamp menu and I'm trying to alter it and understand how it works at the same time. Thing is, all examples I've found consist of basically two images.
The background and the left image. That ok, but I want to create a menu where it consists of three images. The background, the middle and the left. And the middle should react in the same way as the left one, only be positioned in the middle of the menu item at all times.
Does anyone have any idea on what should be done to make this happen? I just need to somehow insert a static 15px div in between the structure.
Well, what they are doing is this:
Position the outer div under the list
Give it the image of the right and middle
Add a nested div, that is 100% of the width
Give that the left image, aligned left.
What you'll want to do is use 3 nested divs.
The outer div with the center/bg with background-position: center top;
The inner div with the left image with left top
The innermost div with the right image, background-position: right top;
I'll illustrate that in a moment...
[edit]
New markup in the js file:
<li class="back"><div class="left"><div class="right"></div></div></li>
New css:
.lavaLampWithImage li.back {
background: url("middle.jpg") no-repeat center top; // could be repeat-x
width: 9px; height: 30px;
z-index: 8;
position: absolute;
}
.lavaLampWithImage li.back .left {
background: url("left.jpg") no-repeat left top;
height: 30px;
}
.lavaLampWithImage li.back .right {
background: url("right.jpg") no-repeat right top;
height: 30px;
}
[another edit]
I did not realize you wanted a static thing in the middle.
Since you have 2 nested divs right now, would it work to add a third, like above?
Only this time assign the innermost div a width of 15px and add margin: 0 auto;
Leave the other 2 as they are.
Since the other 2 divs are filling up 100% of the free space this should place the third div in the middle.