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.
Related
tl;dr version: want to position half an image outside of the bxslider div however overflow:hidden causes every slide of the carousel to show up.
Code I'm using: http://www.dtcontentguy.com/bxslider/
Screenshots: http://screencast.com/t/bTTvC4VPEQ
Long version:
So configuring bxslider for a carousel to use on my site.
How it should look like (in photoshop) (see screenshot 1)
My main concern is the circular png I'm using. To match the style, I want to position the top half of it outside the div. I position it then it looks like this, all cut off (screenshot 2)
That's because by default there is a overflow:hidden to hide the other portions of the carousel. If I turn off the overflow:hidden, the image looks fine but of course the other items show (screenshot 3)
How do I get the image to conform with the carousel but get around the overflow:hidden?
Thanks!
One approach could be to increase the height of the container and push the content down like so:
/* Increase container height, align background to bottom */
.bx-wrapper .bx-viewport {
height: 456px!important;
background-repeat: no-repeat;
background-position: bottom center;
}
/* Push slider arrows down */
.bx-wrapper .bx-controls-direction a {
margin-top: 25px;
}
.bxslider {
margin: 0;
}
/* Push slider content down */
.bxslider li {
padding-top: 184px;
}
/* Position image at top center */
.bxslider li img {
position: absolute;
top: 0;
left: 50%;
margin-left: -91px;
}
I have a list of post on a WordPress website that has an excerpt and an image. Each on in a column. One floated left, one floated right.
What I want to achieve is to alternate each post so that the first has a left aligned image, and right aligned text; then the second has a right aligned image and left aligned text, and then the next, left aligned image, right aligned text.
Perhaps there is a PhP or JS/Jquery way of doing this?
*Please see image so you can see what I mean.
There is also a basic HTML/CSS JSFiddle here: jsfiddle.net/huwrowlands/7WGTm/
Thanks
Now try to this
Used to pseudo-classes :nth-child(even) in your css define this in parents div as like this
.hp-module:nth-child(even) > .col:first-child{
float:right;
}
Demo
more about nth-child
CSS3 Pseudo (odd,even)
Using the new pseudo class :nth-child(odd) or :nth-child(even) it's very easy.
.hp-module {
width: 100%;
}
.col{
width: 46%;
padding: 2%;
float: right;
text-align: center;
}
.hp-module:nth-child(odd)>div{
float:left;
}
Demo
http://jsfiddle.net/7WGTm/3/
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
});
Suppose the image is 100w x 300h. But I have a div that is always 100x100. I want to center the image (so that the top and bottom get cut off)
Note: The height will always be variable. It's not always 300.
How can I do that in JQuery?
Why don't you just set the image as a background property of the div? Straight CSS solution, no js necessary:
.cutoffAndCentered { width: 100px; height: 100px; background: url('image.jpg') no-repeat center center; }
Or you can always do the same via jQuery:
$('.myDiv').css('background','url(image.jpg) no-repeat center center');
You should use display: table-cell and overflow:hidden;
This tutorial should help http://www.brunildo.org/test/img_center.html
I'm trying to get various locations to appear on a image with mouseovers. So basically I have an image and when you hover over a link nearby a hoverbox appears at the location specified in CSS on the image. However I'm trying to get it to happen with multiple links without creating code for each CSS box.
I have something like 50 links and and when I hover over one I want to be able to pull from a db or text file to grab the location where it should create a hover on the image. My original thought was using PHP to help pull in the information from a file, put it into an array and then having the CSS update on the fly. This seems doable if the user just clicks the link as then I can tell CSS what place in the array to look for the location. I am unsure how I could get this to work with mouseovers if at all possible.
The CSS code is very basic at the moment as shown below.
#box {
position: absolute;
top: 100px;
left: 200px;
background-color: #ffffff;}
Let me know if anything doesn't make sense or if I'm just forgetting something.
Thank you!
Ok, so what you're trying to do is called a CSS sprite. Here's what you want (my example is orthogonal to your code, but teaches the principle):
.link {
width: 50px;
heigh: 50px;
float: left;
text-indent: -9000px;
background-color: transparent;
background-image: url(path/to/sprite.png);
background-repeat: no-repeat;
}
.link#one {
background-position: 0px 0px; /* This one is top left on the image. */
}
.link#two {
background-position: 0px 50px; /* This one is 50px from top and 0px from left on the image. */
}
You can see where to go from here (and you don't need to use .link#one. I just used it for example purposes. You could just use #one, or even a class .one.
Practice with this and you'll get how it works soon enough. Here's some sample HTML:
<a id="one" class="link">One</a>
<a id="two" class="link">Two</a>
Just through all that together, and make your image a 100px tall by 50px wide .png file with 50px x 50px for each link.