Marquee scrolling gallery with flexible layout - javascript

I'm trying to set up a scrolling gallery, but not sure how to proceed.
The following is what I'm looking for (see attached as well):
15-20 images with different sizes
Define spacing between the images (pink areas)
The container to be the specific height on certain breakpoints (desktop, tablet, mobile), and then which the images will adapt to in order to keep their ratios and layout according to my attached example.
Scroll from right to left and start over once the last image is being shown, so it starts over smooth.
I'm thinking the following, but don't know how to make the images adopt the right way depending on screen size?
.container{
display: flex;
position: relative;
max-height: 700px;
height: 100%;
width: 100%;
overflow-x: hidden;
}
.image{
display: block;
position: absolute;
}

Related

How to maintain relative positions/sizes of dynamically sized, stacked div's

This page centers and shrinks my logo to fit in the browser window. It uses a single PNG file and CSS flexbox with max-width/max-height. (View code)
This page animates the same logo. However, in order to limit the ripple effect to just the blue portion, some changes were needed (view code):
Logo split into two parts and stacked on top of each other (position:absolute).
Hard-coded the size of the logo. (No longer sized based on size of browser window)
I can't figure out two things:
How do I change the hard-coded sizes back to dynamic sizes based on the browser size? I also hard-coded the top and left, but if the two images are centered and scaled by the same ratio, they should line up properly without offsets.
How do I vertically/horizontally center the logo, again? I think my previous flexbox CSS doesn't work because the elements have position:absolute. Update: I was able to get centering to work again, but this involved more hard-coded width/heights.
I think I can do this via JavaScript, but is a pure CSS/HTML solution possible? (I have a feeling centering and dynamically sizing elements with position:absolute might not be possible). If JavaScript is disabled, the solution should gracefully degrade (the two parts of the logo are correctly aligned; the logo fits inside browser window).
Example: https://jsfiddle.net/2rdjfwhb/1/
It is possible to do both with CSS, you just need another wrapper element around the "logo" class. This wrapper element can be positioned naturally inside of a flexbox. After that it's just about calculating the ratio you need for your logo image and the ripple canvas.
.parent {
max-height: 100%;
max-width: 100%;
}
.logo {
width: 100%;
height: 100%;
position: relative; /* Parent handles centering this guy now */
}
.logo-ligature {
width: 100%;
height: 100%;
position: relative; /* Positioned for z-index */
pointer-events: none;
}
.logo-background {
background-image: url(https://cdn.glitch.com/b2cea96d-c2a3-486e-90d5-f60a651a36e3%2Fle_square_light_noborder.png?1553791477453);
background-size: contain;
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
width: 75%;
height: 75%;
position: absolute;
top: 12.5%;
left: 12.5%;
}

How to hide scrollbars using jquery and scrolling divs without disabling rest of page?

See my problem here:
http://jsfiddle.net/nM6DF/
I want to have divs scroll on and off the screen using jquery, but I do not want any horizontal scrollbars. The only way I know how to do that is to make a container and do overflow:hidden. Here is my container CSS
#container {
top:0px;
position: absolute;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
I had to make the width and height 100% so that no matter what I scrolled across it would not be cut off.
When I make this container then everything behind it becomes unclickable and pretty much disabled. I want the page behind the scrolling divs to still behave normally where I can click and interact with it. How can I achieve that?

Resizing initial div load to fit to browser zoom?

So I am currently designing a website and one of things Im noticing is the div I have placed for the container doesnt exactly flow in the way I want it to when observed in different resolutions. Heres what I have in the CSS:
#container{
position: relative;
width: 100%;
height: 100%;
background-color: black;
}
#center{
background-image:url(http://farm4.staticflickr.com/3768/11633218256_30a04f01c3_o.png);
height:1080px;
width:1920px;
position:absolute;
top:50%;
left:50%;
margin-left: -960px;
margin-top: -540px;
overflow: hidden
}
And here is my HTML:
<div id="container">
<div id="center"></div>
</div>
I pretty much just want the center div to resize on initial load based on the level of zoom the browser is currently at and fit the edges of the div to that zoom while keeping the div's width and height proportions of 16:9. I would like to be able to apply the same scaling to everything that is nested within the div as well if this is possible. But I would like the user to be able to zoom in and out afterwards without the div resizing to fit the screen actively while he is zooming. Im mostly wanting this process without auto zooming the browser because I do not want to mess with the level of zoom the user has on other websites.
The paragraph explaining your goal is quite confusing. Can you explain what you're trying to do better?
#center{
transform:scale(1.5);
transform-origin: center center;
-webkit-transform:scale(1.5);
-webkit-transform-origin: center center;
}
This would scale your div, and all it's children, without changing it's aspect ratio.
Or maybe you could use an actual tag inside #center instead of a background-image. Then you could do this:
#center img{
width: 100%;
height: auto;
}
And this link is an indepth SO post on detecting cross-browser page zoom.

Webpage displays incorrectly on different resolutions due to incorrect css

I'm having some issues with a webpage of mine, mainly on mobile devices but it also affects desktop devices too, I would be willing to award a bounty (as and when stackoverflow allows me) to whomever can help with these problems
HTML: http://pastebin.com/raw.php?i=bbFsMcwT
CSS: http://pastebin.com/raw.php?i=SGMwt3cs
JSFiddle: http://jsfiddle.net/D8SJD/
Issue 1 - Left/Right Scroll Image Buttons
Currently my left and right scroll image buttons are done in html using onmouseover and onmouseout I want to be able to convert them into css based "buttons"
Issue 2 - Dynamic Resolution(s)
The header and footers aren't dynamic with different resolutions for example, I created the page designed on a 1680x1050 monitor which looks like: Desktop 1680x1050 however making the window smaller it looks like: Desktop Small Window
On a Nexus 4 mobile phone on default zoom it looks like: Mobile Original Zoom
On a Nexus 4 mobile phone zoomed out to as far as it can go it looks like: Mobile Max Distance
On a Nexus 4 zoomed out and scrolled to the bottom (so that the browsers URL bar disappears) it looks like: Zoomed out without URL bar (the footer of the actual webpage vanishes)
On a Nexus 4 zoomed out and scrolled just off from the bottom (so that the browsers URL bar is visible) it looks like: Zoomed out with URL bar (the footer returns)
.
The placeholder image and arrows are supposed to be in the center of the footer and headers and should shrink in accordance to the screen resolution.
Mobile device default zoom (if possible) needs to be decreased so they can see more and on getting smaller (if possible) if it gets close to Mobile Original Zoom then the Up to Top, Down to Key, placeholder logos should vanish...
Please see images at bottom of this post
For the mobile devices I tried things like below just for testing but none of them worked...
#media (max-width: 640px) {
#header > a img {
display: none;
}
}
EDIT 14/11/2013 # 01:58GMT
On a 1920x1080 screen it looks kind of okay although there is a big gap between the text and the placeholder image as seen below:
On a 1680x1050 screen it looks roughly how it should take note of where "Semi" is located and compare to the 1920x1080 image from above.
On a 600x600 screen it appears as follows, which as you can see there is a big gap between the placeholder and the left arrow but on the right arrow there is no gap and infact it overflows, as for the text it too is too far to the right.
Type
#media screen and (max-width:640px) {
/* Your specific styles go here */
}
and dont forget to add
<meta name="viewport" content="width=device-width,initial-scale=1.0">
Hope that helps :-)
I see a border around your links, remove from your links:
a{
border:none ;
}
for first issue you can do it with CSS, just remove <img> tag inside <a> tag like this:
<div class="footleft">
<a class="def" href="javascript: void(0);">
</a>
</div>
create image buttons like this:
then set background to <a> tag like this:
#footer .footleft a {
width: 100px;
height: 47px;
display: block;
background: url(path/to/leftarrow.png);
background-position: 0 0;
}
#footer .footright a{
width: 100px;
height: 47px;
display: block;
background: url(path/to/rightarrow.png);
background-position: 0 0;
}
#footer .footleft a:hover , #footer .footright a:hover{
background-position: 0 100%;
}
second issue, I think if you remove position:absolute; from #header .headimage and #footer .footimage it will be okay.
and if your want to centerize headmid and footmid and footmidtwo you have two choices,
First: set fixed width to them and use CSS like this:
#footer .footmid {
top: 50%;
left: 50%;
position: absolute;
font-size: 15px;
width: 292px;
margin-left: -146px;
}
#footer .footmidtwo {
top: 70%;
left: 50%;
position: absolute;
font-size: 15px;
width: 126px;
margin-left: -63px;
}
#header .headmid {
top: 60%;
left: 50%;
position: absolute;
font-size: 15px;
width: 302px;
margin-left: -151px;
}
Second: if you need to have dynamic width you can use this CSS and JQuery:
CSS:
#header .headmid {
top: 60%;
left: 50%;
position: absolute;
font-size: 15px;
}
#footer .footmid {
top: 50%;
left: 50%;
position: absolute;
font-size: 15px;
}
#footer .footmidtwo {
top: 70%;
left: 50%;
position: absolute;
font-size: 15px;
}
JQuery:
var $widthhead = $(".headmid").width();
var $widthfoot = $(".footmid").width();
var $widthfoot2 = $(".footmidtwo").width();
$(".headmid").css("margin-left",$widthhead/2*(-1));
$(".footmid").css("margin-left",$widthfoot/2*(-1));
$(".footmidtwo").css("margin-left",$widthfoot2/2*(-1));
jsFiddle is here
Okay I've tried to filter out all of the irrelevant code for this solution.
See the solution here.
Most of the time, it is best to use relative positioning to fit elements absolutely inside of another element. In your case, with three different strings to fit in a 300x80 window, it's a bit crowded. I tried to place things in a logical position to demonstrate.
By placing a container in the footimage div with relative position, you can then place every element inside the footimage div absolutely relavtive to the footimage div, rather than to the entire page.
For example, what you had:
#footer .footmid
{
position: absolute;
top: 50%;
left: 50%;
}
Will place the div of class footmid at a position 50% of the page height from the top of the page and 50% of the page width from the left of the page:
This will work if every user that visits your page has the exact same resolution, however it causes problems when the don't. Obviously, this isn't a perfect world, so different resolutions will visit your page.
What you can do is use relative positioning!
Basically I tell CSS that instead of moving 50% from the top and left of the window, move 50% from the top and left of the nearest parent element with relative positioning:
You can modify the bottom, left, and right attributes of my fiddle to move the footmid elements within the relative element .footimageContainer that is the same size and in the same position as the .footimage.
As far as your arrows, I wasn't quite sure what you were trying to accomplish; your question was pretty vague, so I simply made them fade out slightly when you mouseover them. Any mouseover/out events can be handled using CSS psuedo-elements.
.element //Native and mouseout
{}
.element:hover //onmouseover
{}
Remember that if you use pseudo-elements, you have to specify the attribute that will be changing in both the native and :hover rules.
.element
{color:red;}
.element
{color:black;}
If you have any additional questions on the arrows, let me know and I'll revise my answer.
http://jsfiddle.net/D8SJD/4/
Instead of using absolute positioning, you can just take advantage of the text-align center and images and text will center automatically.
If you want offset from center, try position:relative, and top, left, right etc and it will move relative to it's central position.
Elements that are display:inline; or display:inline-block; will align according to parents text-align property, in this case text-align:center.
#footer .footimage {
display:inline;
position:relative;
top:-10px;
}
#footer .footmid {
top: 50%;
width:100%;
position: absolute;
font-size: 15px;
}
#footer .footmidtwo {
top: 70%;
width:100%;
position: absolute;
font-size: 15px;
}
As per issue 2, i could be wrong but when targeting the image through the structure of the site
i.e.
headImg a img{...}
The style wouldn't work. But if you add classes to the images the style will work; the case could be that there are some unclosed divs or elements messing with the architecture.
<div class="headimage">
<img class="placeholder" src="http://placehold.it/300x80"/>
</div>
#media screen and (max-width: 640px) {
.placeholder {
display: none;
}
}
JsFiddle here - http://jsfiddle.net/Q5bEb/

How to make point where divs stop shrinking with browser size

There are a lot of dynamically designed websites out there where there divs or images shrink as the browser size decreases.
An example of this would be http://en.wikipedia.org/wiki/Main_Page
The div in which the text is in shrink as the browser size decreases. This happens up until a certain point, where it just decides to stop shrinking, and just start to cover the text boxes.
I would like to do this effect with a JSFiddle I am working on:
http://jsfiddle.net/MrLister/JwGuR/10/
If you stretch the size of the fiddle, you will see the pictures dynamically adapt.
The goal is to make it just stop shrinking at a certain point, and just start covering or caving in on this pictures. I want to do this because eventually it gets so small that they text on each image overlaps and it looks bad.
Here is the CSS for the Fiddle:
.figure {
position: relative;
display:inline-block;
max-width: 33%;
}
.figure .figcaption {
text-align: center;
height:0;
top: 40%;
width: 100%;
font-size: 55px;
color: white;
position: absolute;
z-index: 1;
}
.figure img {
display: block;
max-width: 100%;
}
Simply add a min-width size to the things you want to stop shrinking :)
Like so:
.figure {
position: relative;
display: inline-block;
max-width: 33%;
min-width: 150px;
}
Here's an updated fiddle: http://jsfiddle.net/jakelauer/JwGuR/13/
min-width:500px;
would cause the window to have a minimum width of 500px.
http://jsfiddle.net/JwGuR/14/ after you reach 500px the images stop resizing.
Here is an example of media queries. You use css to define min and max widths for certain cases. In your case, just give a max-width case and set the css properties there.
http://css-tricks.com/css-media-queries/
img{
width:100%;
}
#media all and (max-width: 699px) {
img{
width:500px;
}
}
This is a basic example. As Jake said, you can also just give it a min-width but in many cases, the layout of the page should change for mobile or tablet view where simply defining a min-width won't suffice

Categories

Resources