Isotope troubles with layout - javascript

I am working on this site:
http://www.thecarlossanchez.com/Test/thecarlossanchez/Galleries/stilltest.html
When I created the thumbnails everything worked great, but for some reason it added all this extra space if you scrolled to the right. Everything worked the way it should with in the window and it never made me scroll right ever, so I ignored the extra space.
Now I am adding Isotope in order to filter the content, but when a category is selected all the thumbnails drop down and to the right. Something is centering the content to all that extra space. And I am not familiar enough with jquery to figure what where the problem is.
Here is an example of how it should work without isotope:
http://www.thecarlossanchez.com/Galleries/people.html
Any ideas on how to fix this?

Upon checking on your site, I noticed you got an enormous padding size being set on your gallery element.
Currently it's :
.gallery{
width:80%;
padding:800px; /* enormous padding */
position:relative;
}
I've changed that to padding: 0; and the extra space at the right side is removed.
.gallery should look like this now:
.gallery{
width:80%;
padding:0;
position:relative;
}
Also if you want to center your gallery when the page is resized, add margin: 0 auto to .gallery element.
e.g.
.gallery{
width:80%;
padding:0;
position:relative;
margin: 0 auto; /* center gallery */
}

Related

buttons not keeping up with slider when window re-size

Whenever i re-size my window the slider buttons (next/previous) disappear and do not move with the slider. Any idea on how to fix this?
JSFIDDLE:https://jsfiddle.net/b31kvqwr/
Buttons CSS:
#nav img {
position: absolute;
top: -10px;
cursor:pointer;
color:grey;
width:40px;
height:30px;
}
#prev {
margin-left: 530px;
font-size: 10px;
}
#next {
right: -30px;
margin-top: 13px;
}
PS: if the result in the jsfiddle doesn't show, expand the result tab.
This is how the slider looks like when full screen (the right way);
This what happens when i re-size the browser horizontally:
The buttons aren't moving with the slider. Any help please?
The problem at the moment is that you are using margin-left:530px; meaning that the arrows will always be 530px from the left of the screen no matter the size of the screen. It also looks like what ever is wrapping it has a set width and isn't resizing, your code was to messy for me to find this but there are a few thing that I found to make the problem a little better,
https://jsfiddle.net/b31kvqwr/2/
I have managed to keep it the correct place for a lot of the, however to improve get it working perfectly you will need to create 1-2 #mediaqueries to tweet the alignments at different sizes to make it perfect.
The way I did this was by changing margin-left to position:absolute and use a left positioning instead on your prev and next buttons;
#prev {
left: 50%;
font-size: 10px;
position:absolute;
}
#next {
margin-top: 13px;
left:58%;
position:absolute;
}
As I side note I would recommend cleaning up your code like #TingGaint said as it is insanely messy. Also when posting on stack try only include the relevant code not all of it as it makes it quicker and easier to look through and help.
EDIT
I have found the problem, still do what I said above however now instead of have the arrows div where they are now, move them out and so there below <div id="wrapper"> however you will have to play around with the placement as they will be at the top of the screen. However now they stay in the same place when re-sizing!
Example - https://jsfiddle.net/b31kvqwr/4/

Floated divs with absolute images not clearing

In this link, you see a page I am working on. When you change your window size, you will see that it is responsive.
However, the three rotating image boxes that are floated, with height auto and a clearing div under them, are not clearing.
The aim is to have the div containing these rotating images, and 20px padding on both top and bottom of it.
My css currently:
.rightbox{width:100%; clear:both; float:none; height:auto; min-height:inherit;}
#rotating-item-wrapper, #rotating-item-wrapper2, #rotating-item-wrapper3 {margin: 10px 20px 0px; float: left; left:0; transform:none; height:auto;}
less than 576px:
#rotating-item-wrapper, #rotating-item-wrapper2, #rotating-item-wrapper3 {margin: 5px 10px 0px; float: left; left:0; transform:none; width:26%;}
.rotating-item, .rotating-item2, .rotating-item3{width:100%; height:auto;}
I believe this will take you in the right direction: http://www.quirksmode.org/css/clearing.html
You can set height to .advertpanel. Current height of floated element is 0, so clear doesn´t work in this case (you clear after 0) - due to absolutely positioned images in carousel.
For mobile phone, <576px, you can hide that, it´s so tiny and mobile phone users has nothing from that.
the problem is not you clear:both, it's clearing the float but the problem is the floating element's height.
your rotating images is absolute while the container, eventhough it's relative and floating, doesnt get the height of the image inside it. try give a height value (the height of your slideshow image) instead of height:auto of the container.
Fixed with JavaScript.
<script>
var rotating = function(){
var getheight = $('.rotating-item'); /* cache the selector */
$('.advertpanel').css({ height: getheight.height() });
}
$(document).ready(rotating);
$(window).resize(rotating);
</script>

Allowing elements to float off the screen horizontally

I'm in a bit of a pickle here, i have 6 <li> element sets in the same <ul>. Here's a demo. My goal is to allow the elements to overflow off the right of the page and I will cycle through them later with javascript. For some reason no matter what I try it just pushes the other elements down. i have tried:
float:left;
display:inline-block;
every flavor of display actually, also tried clear:both; I have also tried setting the list in a div and setting the width to a ridiculous pixel width and hoping that would push it off the edge properly but it did nothing.
Any ideas?
I want to try to avoid javascript solutions, but everything is welcome.
note:
eventually these will be more that 20% width, each <li> will span the screen width and move in when jquery says so
You need to make your li width a fixed width instead of 20%, if you have it as a percentage then it doesn't matter how big your container is, the li will always be 20% of that width.
Also make sure the li container has a big enough width to contain your li's
Something like this
http://jsbin.com/eyemaf/1/edit Hope this link works I don't usually use jsbin
.bodynavs{
width:200px;
min-height:100px;
border:1px solid green;
}
#slideimages{
list-style-type:none;
padding:0;
margin:0;
overflow:hidden;
width: 2000%;
}
You'll want to try changing the white-space CSS property:
white-space: nowrap;
This will cause your list elements to be all on one line, going off-screen as intended, to be scrolled in as necessary.

How do i get the "dropdown" menus in a nav bar to drop down in the right spot?

I'm creating a vertical navigation bar, which has sub menus pop up to the right on mouseover.
The only problem is when i mouseover the categories, no matter whether they are positioned near the top or bottom of the navigation bar, their sub category bar appears up to the right of the top of the nav bar.
I did some reading on how to make these, and supposedly im supposed to set positioning to absolute, and then do an offset from left. This is my css code for the submenus:
#sidenav2 li ul
{
position:absolute;
left:200px;
Top:0px;
display:none;
}
So i figured that it might have something to do with the top setting, and got rid of that. To my surprise, it almost worked. Each submenu was popping up at a different spot corresponding to the element hovered over. The only problem was that they were popping up about 10 pixels too low. Not really understanding how the css rules applied, i figured maybe i could apply a small bottom offset to make each submenu go up a little bit, but then they all started popping up near the bottom.
I dont understand how to fix this, and to make things worse, im not sure how to keep up with this seemingly arbitrary results, or the rules that determine them.
If it makes any difference, my menu items and sub menus arent written in static html, theyre the result of a mysql query which puts each of every category's children inside an unordered list within that item's list.
Here is my other pertinent css code. The problem may very well be somewhere here.
#sidenav2
{
float:left;
width:200px;
border: solid black 1px;
height:1000px;
background-color:red;
margin-top:-10px;
}
#sidenav2 ul
{
position: relative;
list-style-type:none;
border:0px;
padding:0px;
background-color:red;
}
#sidenav2 ul li
{
display:block;
padding:5px;
color:white;
cursor:pointer;
}
Any help or insight would be greatly appreciated!
You have to give position: relative to your li's

CSS Dynamic Margin on Window Resize

Can I dynamically ensure that the content always remains centered in the window pane on this website?
Right now it uses a static margin-left on the .items class, and it uses jquery tools.
http://andstones.ca/newsite/
Can I do it in just CSS or CSS and Javascript?
Thanks,
Kory
I didn't quite see what part you were talking about as it looks like most of it works just fine.
For auto-centering, you should use auto for margins:
margin: 0 auto;
Put that one whatever div you want centered.
Lets say that you want to center a container with 900px wide, the most cross browser way that I've used is:
div#container{
width:900px;
position:relative;
left:50%;
margin-left:-450px;
}
This goes to the center of the x axis and stays there regardless of other elements of that page!
Of course that this only works with a fixed width and not a dynamic one!
If i remember correctly, you have to use the following in IE
text-align: center;
Even to center a div

Categories