I'm stuck on a problem, it's creating an image grid and I can't figure out how to start laying out items on the next line when I reach the end of the container. I'm aware I could use masonry but the problem with that is my gallery needs to be full width and with masonry, you get that 1px whitespace issue masonry 1px issue. and just using regular floats also won't work for me because my items have varying heights. any thoughts on how I could tackle this issue would be awesome
function layout() {
var itemPos = 0;
var itemHeight = [];
$('.gallery__item-list .gallery__item').each(function(index) {
itemHeight.push($(this).height());
$(this).css({
transform: "translate3d(" + itemPos + "px,0px,0)"
});
itemPos += $(this).width();
});
}
css
.gallery__item,.grid-sizer {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
#media screen and (min-width: 400px) {
.gallery__item,.grid-sizer {
width: 50%;} }
#media screen and (min-width: 600px) {
.gallery__item,.grid-sizer {
width: 33.333%;}
.gallery__item--body-posts{
margin-bottom: 0px;
} }
#media screen and (min-width: 1000px) {
.gallery__item,.grid-sizer {
width: 25%;
} }
You can set image width in percentage if that allows in your case. Suppose you have three images in a row you can set width:33% which will take the full width of a row. So according to count you should change the width of images. When you get first three images in row, next three will come in the second row.
I hope this solves your problem
Related
i have 4 inputs which have to be lined one after another and with the decrease in screenwidth the input box should move to next line and also width should be divided equally between 4 inputs and it get adjusted respectively to the screenwidth. smaller the screen the inputs will start looking like one below the other..
sharing the sandbox link herethis is what all i have tried..
edit: no harcoded width, it should be equally distrubuted to 4 inputs
You need to add a proper border-box, so your inputs will not overflow their container:
html {
box-sizing: border-box;
}
*, ::before, ::after {
box-sizing: inherit;
}
After that, you can set width: 25% to input containers, add small horizontal paddings and remove margin-right. Later you can set width to 50% and 100% with the help of media queries for specific screen sizes:
#media (max-width: 767px) {
.input-division {
width: 50%;
}
}
#media (max-width: 479px) {
.input-division {
width: 100%;
}
}
I'm trying to prevent the html page from moving, resizing while width page is under 1350 px.
Btw on my css code, for the width, height, transformation: translate, i'm using the value vmax , and not px or %. So the min-width maybe doesn't work with it, all of my elements keep resizing because they are using vmax, so they just adapt there size with the window size too.. :(
I tried this but this doesn't work too (I was trying to stop resizing the three white rectangle, tabcmp0, 1 and 2)
#media only screen and (max-width: 1350px) {
#tabcmp0 {
width: 370px;
}
#tabcmp1 {
width: 370px;
}
#tabcmp2 {
width: 370px;
}
body {
max-width: 1350px;
}
}
Code + preview
See this page for exemple , when she is less than some px, the page stop from resizing and a scroll bar appear, i want the same result but i don't know how to do it ...
i think there is no choice to return px model if you want to create a static content there.
#media only screen and (max-width: 1350px) {
#tabcmp0 {
width: 370px;
height:580px;
left:210px;
}
#tabcmp1 {
width: 370px;
height:580px;
left:590px;
}
#tabcmp2 {
width: 370px;
height:580px;
left:980px;
}
.select_dev {
width:202.5px;
}
body {
max-width: 1350px;
}
}
i think you should give all exact px values instead of dynamic vmax values like that for each element like headers, left menu etc...
jQuery code:
function thumb(id,ths) {
if (<?=$loggedin?>) {
$.post(base_url+"index.php/myad/addthumbs", {uniqueid:id});
$(ths).addClass("red");
} else {
_ths=$(ths);
var number = Math.floor(Math.random()*90000) + 10000;
$("#captcha").attr("data-id",id);
$("#captcha").text(number);
$("#pop").modal("show");
}
}
How can I center modal? Please help me and thanks in advance.
I find solution on google and on stackoverflow but question is asked for bootstrap based modal when it build by a pure jquery.
Give your popup a fixed css like this:
#pop {
position:fixed;
top:50%;
left:50%;
}
Then align it by it´s width and height in your JS:
$("#pop").css({
"margin-top":-($(this).height()/2),
"margin-left":-($(this).width()/2)
});
One method is you can adjust the percentage of margin-top style
.modal-dialog {
margin-top:10%; /* Based on your modal height adjust the percentage */
}
OR
.modal-dialog {
padding-top:10%; /* Based on your modal height adjust the percentage */
}
Without using jQuery, you can simply use display: table to the main content container together with margin: auto.
A working example of this centered modal is here.
Basically, these are the important rules:
.modal-content {
display: table;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
max-width: 60%; /* here you can also use a fixed width */
overflow: auto;
z-index: 50;
}
Use JavaScript or jQuery to trigger the opening and closing of the modal.
Link to site
I'm trying to format the menu on the above site, when it's in sticky mode (i.e. scrolled down), because at certain widths the Request a Quote button is obscured by the screen. I'm using Javascript to action the change only when the screen is scrolled down, and an additional CSS class to move the menu. Unfortunately it's not working - while I can move the menu using just CSS applied directly to the existing class, trying to tie this in with JS to make it scroll specific doesn't any effect.
Is anyone able to tell me where I'm going wrong please?
Thank you in advance.
Javascript
<script type="text/javascript">
$ = jQuery;
$(function() {
//caches a jQuery object containing the header element
var header = $(".header-widget");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 20) {
$(".header-widget").addClass("header-widget-shortheader");
$(".second-header-widget").addClass("second-header-widget-shortheader");
$(".navbar .nav").addClass(".stickyheader-midscreen-cta-fix");
} else {
$(".header-widget").removeClass("header-widget-shortheader");
$(".second-header-widget").removeClass(".second-header-widget-shortheader");
$(".navbar .nav").removeClass(".stickyheader-midscreen-cta-fix");
}
});
});
</script>
CSS
/* -----Moves menu to avoid cutting off CTA button with sticky header on mid-sized screen (toggle with JS in 'Header & Footer')----- */
#media screen and (min-width: 980px) and (max-width: 1189px) {
.stickyheader-midscreen-cta-fix {
margin: 40px 22% 0 0;
float: right;
}
}
Thanks to Marian07 for the support. This is where I ended up:
/* -----Fixes menu CTA button being cut off by mid size screens----- */
#media screen and (min-width: 980px) and (max-width:1084px) {
.sticky-enabled .navbar-wrapper {
margin-left: 0;
}
.sticky-enabled .navbar-wrapper a {
padding-right: 9px!important;
padding-left: 8px!important;
font-size: 95% !important;
}
}
#media screen and (min-width: 1085px) and (max-width:1200px) {
.sticky-enabled .navbar-wrapper {
margin-left: 0;
}
.sticky-enabled .navbar-wrapper a {
padding-right: 3px!important;
padding-left: 25px!important;
}
}
The problem is at line 6:
$(window).scroll(function() {
(did not actually call the function on scroll)
Solution:
$(window).on('scroll', function() {
For your design problem, you can decrease the width of the headers on certain screen sizes by adding the below code at the end of file: /wp-content/themes/customizr-child/style.css
#media screen
and (max-width:1200px)
and (min-width: 980px) {
.sticky-enabled .navbar-wrapper {
margin-left: 0;
}
.sticky-enabled .navbar-wrapper a {
padding-right: 7px!important;
padding-left: 7px!important;
}
}
remove . use only class name
$(".navbar .nav").addClass(".stickyheader-midscreen-cta-fix");
replace
$(".navbar .nav").addClass("stickyheader-midscreen-cta-fix");
$(".navbar .nav").removeClass(".stickyheader-midscreen-cta-fix");
replace
$(".navbar .nav").removeClass("stickyheader-midscreen-cta-fix");
I'm trying to add a map as a full screen background below my Bootstrap NavBar, but at the moment my code is causing the bottom of the map to overflow the page.
I've tried different margins and positions and I cant get it to show the map within the bounds of the page under the navbar. I understand part of the issue is having top:50px but I don't know how to rectify the problem.
My CSS code is as follows:
#map {
/* Set rules to fill background */
height: 100%;
width: 100%;
/* Set up positioning */
position: fixed;
top: 50px;
left: 0;
}
Here is a screen shot of my page, you can see in the bottom right that the map attribution and controls have been cut off:
You're setting your map height as 100%. Try setting a fixed height, instead.
If it's too wide, add this to your CSS files.
.gmnoprint img {
max-width: none;
}
Alternatively, try this if that doesn't work:
html,body {
height: 100%;
width: 100%;
}
.whateveryourmapis {
height: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin-top: -50px;
}
You need wait until div in which is content is displayed because google map chcecks it width wery early - and gets small width (or 0) and dont render.
Try this:
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
google.maps.event.trigger(map, 'resize');
});
It is callback - when div for content after click on tab is dispayed THEN 'resize' google map on correct width.
For me this works.