Alternate Column Position (Left & Right) - javascript

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/

Related

Positioning a div relative to SCREEN and a COL div

I'm trying do this to long time, but... no luck. The question itself is a little simple.
I need make a div to begin on the left side of screen and ending on the end of a col-xx-x div, which in turn is inside a row div, which in turn is inside a container div.
I've already done it with jQuery, but I'm searching for a way to do that using only HTML and CSS.
I made a image to a better understanding:
(The red square is the div that i want, but it's obvious)
Note: Notice that on my image I used a col-md-6 div, but the col is indeterminate (col-xx-x), I used 6 only to draw.
Here is a fiddle with the code using jQuery:
https://fiddle.jshell.net/b8xcp6j7/
You can adjust .box element width to 200%, set position to relative, left to -100%
.box {
width: 200%;
border: 4px solid red;
padding: 15px;
position:relative;
left:-100%;
}
jsfiddle https://fiddle.jshell.net/6a0uac4y/2/

Make <p> tag remaining width of div with a link (which has an icon as a background) to the right of it

This is my html:
<div id="cobcContainer" class='floatLeft' style="width: 50%">
<p id="containerText">Random long text here. This text takes up two lines when it is inside it's container div (inside cobcContainer).</p>
<a class="square bookIcon" href="/"></a>
</div>
In the CSS (there is a style.css which I do not have access to) the
<a class="square bookIcon" href="/"></a>
has a background image and the width of it is 100px.
There is not any other CSS in this. When I view the webpage, the container is 50% and the text appears first and then the link / icon appears below it. How do I make the link / icon appear to the right of the text (make the text aligned to the left of the icon / link)? I need this to be a responsive design so I am trying to use percentages here (other than the link / icon which has a fixed width of 100px).
JQuery / JS can be used.
Note: I am not allowed to use
<table>
tags nor
display: table-cell
(these rules were set by the corporation).
p is a block level element, so any element after it will be below it. and as you have defined 100px width for a tag,
1) you can do this,
#containerText{
display:inline-block;
}
and define some width to it.
2) Or simply put
.square { float:left; }
This will float to the left and a tag will just come beside it.
Are you looking for something like this? http://jsfiddle.net/swm53ran/63/
You can use
#containerText {
display:inline-block;
}
And in tandem (not necessary) to push the link to the right side of the div:
.bookIcon {
float:right;
}
If float:right isnt used, then the link will be on the right, right next to the text
You can set the width of p tag using calc and add a float: left to the anchor tag.
a.square {
width: 100px;
display: block;
height: 10px;
float: left;
}
p {
float: left;
width: calc(100% - 100px);
margin: 0;
}
Fiddle

How to center a div with transition animation

This is demo: Demo
The demo will work only on webkit browsers, (chrome or safari)
There are four box, each have a title. When users clicks to expand the div. The div is made to expand. Initially the title is in left, but when the div is expanded the title must move to center with animation.I have made the div to align center using padding, but there is a problem, that for varying text-width the padding has to be changed to make the title properly centered. Please take a look at the code, you will understand it better
Remove the padding, center the title on the h3 and try to animate the width of the title between auto and 100%; Use the nowrap to make sure the title stays on one line.
h3 {
text-align: center;
width: auto;
white-space: nowrap;
...
}
Then animate to
.expand h3 {
width: 100%;
}

Why am I getting a large white space below all HTML content?

For some reason on this page using a mega drop down there is a giant white space below the all the content enabling you to scroll past the footer. Can you please help me figure out what is going on?
I'm quite certain it has to do with the mega drop down because when you hover over it the white space disappears. (menu item 'coop and career' is mega)
http://www.georgiancollege.ca/student-success/
Strangely, these two pages also use it and don't have the issue (some other styles are messed up on these two, but that doesn't affect it as I had them on the same theme/styles as the broken page and they still didn't have it - they're on broken styles currently so another dev can look into something else)
http://www.georgiancollege.ca/athletics/ (fitness center menu item)
http://www.georgiancollege.ca/sdvadev/ (programs menu item)
Thanks.
EDIT: also when you inspect the element the white space gets proportionally larger compared to the size of the inspector toolbar - if that helps.
try to set#menu-item-197 {overflow:hidden}
or simply #pagenav li {overflow:hidden}
It might be because of the relative positioning. For instance, a div block naturally structered at the bottom is forcefully placed at the top. In this case, the space of the div block will always be preserved thus leaving behind white spaces!!!
It is because in custom.css you had:
#wrapper {
min-height: 100%;
position: relative;
}
remove min-height: 100%, and it works well.
P.S.
I'll change footer to be without absolute positioning, because it makes horizontal bar to appear under the browser window, like this:
#footer {
bottom: 0;
height: 60px;
width: auto;
margin-top: 10px;
margin-bottom: 0;
padding: 1%;
text-align: center;
}

jQuery - LavaLamp menu with multiple images?

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.

Categories