I have a website that has a design like google web store. This is what it looks like:
if you'll notice in the bottom area the 2 boxes are not filling up the space above.
boxes is wrap by ul and items are in li. The list items are float by left and ul is has a clear.
Here is the link for jsfiddle http://jsfiddle.net/wTCKr/
Please suggest CSS or any JS that will fix this. Thank you.
If you want large boxes on the right, you will need to float them right so that the smaller boxes on the left will fill in correctly.
<li class="items big" style="float:right">
See this updated JS Fiddle fork.
This will not solve the problem if you put the big box in the middle. If you also need to support that case, I would suggest it's time to use absolute positioning and some jQuery or JS to do the layout for you.
Update: I enjoy a quick challenge, so I wrote some JS to do absolute positioning for you. I used jQuery, but you can convert it to straight JS if you don't use jQuery on your site. The code assumes that you have the right number of boxes in a valid order (eg. you can't put a big box on the last row if all the other rows are filled with small boxes).
You can do the ul { top: -200px or margin-top: -200px;} , which would work.
Related
I have an Ecommerce software that a company i work for is using. I'm trying to change the layout that the software outputs for variable products.
Sadly i do not have the ability to change the HTML. My plan is to .append a div using Jquery then swapping the Selection Menus at the bottom of the layout to the new created div using the flexbox order rule. Flex Rule Here This in theory would allow me to move the selection menus into the row above them, and place them right below the forms on the left side of the page, and keep the proof image on the right side still. Here is a visual example...
As you can see they have the layout set up with an un-ordered list, and the sections are list elements within the un-ordered list.
The code i'm trying to acheive this with is..
$('#right-column').append('<div id="selection-swap">Swap Here</div>');
Could someone take a look at my Codepen and let me know what i'm doing wrong here?
Codepen Here
I not very familiar with html, css and javascript
I am using twitter bootstrap, I'd like to have a section indicator in a long page that shows the relative position of the current view relative to the entire ver long scrollable page.
The sample of what I want to achieve is in:
http://global.tommy.com/int/en/Collections/start
I managed to do that with <ul> <li>, however, I'd also like to animate the arrow movement from one <li> to the next <li> as the user scroll up and down within the page. I managed to scope out the code for the <ul> <li> but have no idea how to animate the movement... could anyone help me point to the specific animation part or recommend some javascript or css library for that? Probably I missed twitter-bootstrap elements too, however I did not find any so far... Thanks!
EDIT:
My code in jsfiddler, however, it doesn't seem to work in jsfiddler:
The ul li code
What I wanted to achieve is exactly like the animation on the left side of Tommy Hilfiger's page when you scroll up and down, the arrow will keep track of which section you are in by adjusting the arrow's position pointing to the specific section on the li
Without more detail I can't really go into specifics, but I can at least suggest jQuery's animate function. It makes animating css properties very easy.
To animate the scrolling of the page, take a look at this library:
https://github.com/davist11/jQuery-One-Page-Nav.git
you can use the same js to animate the movement of the arrow as well
I'm using jQuery to expand a div while hovering it so it covers the entire width of the page. It contains a large table and I'm required to build for a low resolution but in reality everyone has a higher so this is an accepted workaround. My problem is that the div "jumps" down below the other divs instead of covering them as I would like it to. Anyone know how this can be achieved?
I've created a jsfiddle of it so you get the main idea: http://jsfiddle.net/MRNxt/1/
Hover the grey box and make it expand to the right covering the #asd2 in the sidebar instead of below it.
Check this fiddle: http://jsfiddle.net/MRNxt/4/
The solution involves adding absolute positioning to the log div when expanding and taking it out when collapsing. Also included is a small fix to avoid flickering while animating.
Add this css:
#asd2{
position:absolute;
z-index:-1;
}
#log{
background:white;
}
Example: http://jsfiddle.net/MRNxt/2/
Is there a reason that using something like lightbox/thickbox isn't suitable?
Alternatively, you will need to play around with absolute positioning and z-index. I'd advise figuring out your ideal layout before working on the animation. Put it together in CSSEdit/Firebug/whatever so that your boxes are exactly where you want them to be and then it will be simple to add to the animation script.
Or just use an off-the-shelf lightbox.
This won't be the perfect answer:
http://jsfiddle.net/MRNxt/7/
but here I used a subContainer to allow you to have a 100% width and some border.
So about to lose my marbles over this one..
My Problem: I need to have text within a unordered list that vertically aligns baseline, but also does something like (text-overflow:ellipsis) ONLY after one line wrap .
What I'm coming to a conclusion on is this CAN NOT only be done with CSS, (if it can please show me!)
Here's a fiddle if it helps!
http://jsfiddle.net/5NVze/
Also a image of what I'm trying to accomplish...
http://img535.imageshack.us/img535/2307/exampleps.jpg
So solution is you CAN NOT accomplish this with just css!
Here is a simple example with Mootools/CSS http://jsfiddle.net/5NVze/5/
http://jsfiddle.net/yxhzU/1042/
I'm trying to modify this example so that within the top carousel you are able to see 10% of the slides on either side.
Any help getting me pointed in the right direction would be great, thanks!
Viewable area would look something like this:
______ _________________________ _______
______| |_________________________| |_______
prev^ ^current^ ^next
http://jsfiddle.net/yxhzU/1069/
I modified the plugin code you were using. I didn't test it fully, but this will give you a good idea of what you have to do.
I did the following modifications:
Added 2 additional settings
itemwidth - This is a number from 1-100 which symbolizes the percentage of the carosel width that a single item takes up.
startingoffset - Similarly it is the amount of starting space on the left is left open also percentage based (0-100)
Finally I modified all the calculations where the elements are wrapped and animated to use new "calculated" widths that include the above scaling.
The problem you were having is that many jquery plugins and the jquery UI stuff wrap your elements in additional "divs" and other DOM objects. So while you were using styles to change the width of your pages in the carosel, they were actually inside other things. I don't think you could make it work with only css anyway because the animation portions of the code were based off a width that was measured internally.
Edit:
Just FYI, I only viewed it in Chrome.