JQuery mobile: Vertically and horizontally center multiple images using grid - javascript

I'm building an app using jquery mobile.
I want to vertically and horizontally center multiple images using grid, i want the images to be exactly in the center of the page. I'v tried everything but nothing really worked.
I want it exactly to look like whats in this pic:
Sample
and here is my code:
<div data-role="content">
<div class="ui-grid-a">
<div class="ui-block-a">
<img alt="" src="http://i.imgur.com/MIK25Fd.png" style="width: 100%;">
</div>
<div class="ui-block-b">
<img alt="" src="http://i.imgur.com/MIK25Fd.png" style="width: 100%;">
</div>
<div class="ui-block-a">
<img alt="" src="http://i.imgur.com/MIK25Fd.png" style="width: 100%;">
</div>
<div class="ui-block-b">
<img alt="" src="http://i.imgur.com/MIK25Fd.png" style="width: 100%;">
</div>
</div>
</div>
I would love if it can look exactly like the image attached.
Thank you.

You can scale the content div to take the device height:
$(document).on( "pagecontainershow", function(){
ScaleContentToDevice();
$(window).on("resize orientationchange", function(){
ScaleContentToDevice();
})
});
function ScaleContentToDevice(){
scroll(0, 0);
var content = $.mobile.getScreenHeight() - $(".ui-content").outerHeight() + $(".ui-content").height();
$(".ui-content").height(content);
}
Then use some CSS on the grid to center everything within the scaled content:
<div id="GridWrapper">
<div class="ui-grid-a centeredGrid">
<div class="ui-block-a" >
<img alt="" src="http://i.imgur.com/MIK25Fd.png" >
</div>
<div class="ui-block-b">
<img alt="" src="http://i.imgur.com/MIK25Fd.png" >
</div>
<div class="ui-block-a" >
<img alt="" src="http://i.imgur.com/MIK25Fd.png" >
</div>
<div class="ui-block-b">
<img alt="" src="http://i.imgur.com/MIK25Fd.png" >
</div>
</div>
</div>
#GridWrapper{
position: relative;
height: 100%;
}
#GridWrapper .centeredGrid{
position: absolute;
width: 380px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
DEMO

You can try with flexbox properties.
.ui-block-a,.ui-block-b{
width: 30px;
height: 30px;
margin: 5px;
}
.ui-grid-a{
display: flex;
align-items: center;
min-height: 15em;
justify-content: center;
}
For further information about flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Related

size of the box is not fixed with the photo size [duplicate]

This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 2 years ago.
I'm trying to create a photo gallery similar to https://unsplash.com/ (with unsplash API -> https://unsplash.com/developers)
But the size of the box is not fixed with the photo.
<div className="imageGrid__container">
<div className="imageGrid__column">
<div className="imageGrid__item">
<img
className="imageGrid__itemImage"
src=""
/>
</div>
<div className="imageGrid__item">
<img
className="imageGrid__itemImage"
src=""
/>
</div>
<div className="imageGrid__item">
<img
className="imageGrid__itemImage"
src=""
/>
</div>
</div>
<div className="imageGrid__column">
<div className="imageGrid__item">
<img
className="imageGrid__itemImage"
src=""
/>
</div>
<div className="imageGrid__item">
<img
className="imageGrid__itemImage"
src=""
/>
</div>
<div className="imageGrid__item">
<img
className="imageGrid__itemImage"
src=""
/>
</div>
</div>
<div className="imageGrid__column">
<div className="imageGrid__item">
<img
className="imageGrid__itemImage"
src=""
/>
</div>
<div className="imageGrid__item">
<img
className="imageGrid__itemImage"
src=""
/>
</div>
<div className="imageGrid__item">
<img
className="imageGrid__itemImage"
src=""
/>
</div>
</div>
</div>
CSS File :
.imageGrid__container {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
gap: 30px;
padding-left: 100px;
padding-right: 100px;
}
.imageGrid__item {
margin-bottom: 20px;
border: 1px solid red;
width: 100%;
}
.imageGrid__itemImage {
width: 100%;
background-size: cover;
background-position: center center;
object-fit: contain;
background-repeat: no-repeat;
}
Can you tell me where my mistake is?
Excuse me, the language is not very good.
I tried many things but it did not get better.
The inline and inline-block elements have extra space due to the way setting elements on a line works. You can fix that setting with display: block; to img tags or margin-bottom: -4px;.
In your case, I think the display: block; is better.
Other solutions you can check out here

menus overlapped on slider

Menus are getting hided due to slider overlapping on the menus .unable to see my menus.menu - lessons are not visible. im using jssora22l which is getting overlapped on my menu 'Lessons' under the tab of Courses. tried with z index 1000 but still im not getting the menus.
code
https://codepen.io/krishnakernel/pen/YNzppX
<header class="headerpart">
<div class="container">
<div class="logo">
<a href="#">
<img class="abc" src="images-Logo.png" alt="krishnamohan" height="50" width="235" />
</a>
</div>
<div class="menu" >
<nav>
<ul>
<li>Home</li>
<li>
Courses
<ul>
<li>Lesson</li>
<li>Practicals</li>
<li>Projects</li>
</ul>
</li>
<li>Contact</li>
<li>login</li>
<li>Sign up</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="jssor_1" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 1300px; height: 500px; overflow: hidden; visibility: hidden;">
<!-- Loading Screen -->
<div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
<div style="position:absolute;display:block;background:url('img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div>
</div>
<div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 1300px; height: 500px; overflow: hidden;">
<div data-p="225.00">
<img data-u="image" src="img/red.jpg" />
<div style="position:absolute;top:30px;left:30px;width:480px;height:120px;z-index:0;font-size:50px;color:#ffffff;line-height:60px;">TOUCH SWIPE SLIDER</div>
<div style="position:absolute;top:300px;left:30px;width:480px;height:120px;z-index:0;font-size:30px;color:#ffffff;line-height:38px;">Build your slider with anything, includes image, content, text, html, photo, picture</div>
<div data-u="caption" data-t="0" style="position:absolute;top:120px;left:650px;width:470px;height:220px;z-index:0;">
<img style="position:absolute;top:0px;left:0px;width:470px;height:220px;z-index:0;" src="img/c-phone-horizontal.png" />
<div style="position:absolute;top:4px;left:45px;width:379px;height:213px;z-index:0; overflow: hidden;">
<img data-u="caption" data-t="1" style="position:absolute;top:0px;left:0px;width:379px;height:213px;z-index:0;" src="img/c-slide-1.jpg" />
<img data-u="caption" data-t="2" style="position:absolute;top:0px;left:379px;width:379px;height:213px;z-index:0;" src="img/c-slide-3.jpg" />
</div>
<img style="position:absolute;top:4px;left:45px;width:379px;height:213px;z-index:0;" src="img/c-navigator-horizontal.png" />
<img data-u="caption" data-t="3" style="position:absolute;top:740px;left:1600px;width:257px;height:300px;z-index:0;" src="img/c-finger-pointing.png" />
</div>
</div>
<div data-p="225.00" style="display: none;">
<img data-u="image" src="img/purple.jpg" />
</div>
<div data-p="225.00" data-po="80% 55%" style="display: none;">
<img data-u="image" src="img/blue.jpg" />
</div>
<a data-u="any" href="" style="display:none">Full Width Slider</a>
</div>
<!-- Bullet Navigator -->
<div data-u="navigator" class="jssorb05" style="bottom:16px;right:16px;" data-autocenter="1">
<!-- bullet navigator item prototype -->
<div data-u="prototype" style="width:16px;height:16px;"></div>
</div>
<!-- Arrow Navigator -->
<span data-u="arrowleft" class="jssora22l" style="top:0px;left:8px;width:40px;height:58px;" data-autocenter="2"></span>
<span data-u="arrowright" class="jssora22r" style="top:0px;right:8px;width:40px;height:58px;" data-autocenter="2"></span>
</div>
https://codepen.io/krishnakernel/pen/YNzppX
screen shot
This is likely a z-index issue as many people have pointed out, you should add the following to your css:
.headerpart {
position: relative;
z-index: 1;
}
The menu div needs a higher z-index and either position: relative; or position: absolute; in order for the z-index to work.
.headerpart .menu {
z-index: 2; /* higher z-index for the menu div */
}
I also noticed from your codepen that > .jssorb05 div, .jssorb05 div:hover, .jssorb05 .av has a value of overflow: hidden; which could also be potentially causing the issue. You might need to change that to overflow: visible; OR overflow: auto;
The codepen provided does not help much as you have not added the styles for your menu HTML.
<header class="headerpart" style="z-index:9999;position:relative;">
<div class="container">
<div class="logo">
<a href="#">
<img class="abc" src="images-Logo.png" alt="krishnamohan" height="50" width="235" />
</a>
</div>
<div class="menu" >
<nav>
<ul>
<li>Home</li>
<li>
Courses
<ul>
<li>Lesson</li>
<li>
<a href="#">
Practicals
</a>
</li>
<li>Projects</li>
</ul>
</li>
<li>Contact</li>
<li>
login
</li>
<li>Sign up</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="jssor_1" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 1300px; height: 500px; overflow: hidden; visibility: hidden;">
<!-- Loading Screen -->
<div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
<div style="position:absolute;display:block;background:url('img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div>
</div>
<div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 1300px; height: 500px; overflow: hidden;">
<div data-p="225.00">
<img data-u="image" src="img/red.jpg" />
<div style="position:absolute;top:30px;left:30px;width:480px;height:120px;z-index:0;font-size:50px;color:#ffffff;line-height:60px;">TOUCH SWIPE SLIDER</div>
<div style="position:absolute;top:300px;left:30px;width:480px;height:120px;z-index:0;font-size:30px;color:#ffffff;line-height:38px;">Build your slider with anything, includes image, content, text, html, photo, picture</div>
<div data-u="caption" data-t="0" style="position:absolute;top:120px;left:650px;width:470px;height:220px;z-index:0;">
<img style="position:absolute;top:0px;left:0px;width:470px;height:220px;z-index:0;" src="img/c-phone-horizontal.png" />
<div style="position:absolute;top:4px;left:45px;width:379px;height:213px;z-index:0; overflow: hidden;">
<img data-u="caption" data-t="1" style="position:absolute;top:0px;left:0px;width:379px;height:213px;z-index:0;" src="img/c-slide-1.jpg" />
<img data-u="caption" data-t="2" style="position:absolute;top:0px;left:379px;width:379px;height:213px;z-index:0;" src="img/c-slide-3.jpg" />
</div>
<img style="position:absolute;top:4px;left:45px;width:379px;height:213px;z-index:0;" src="img/c-navigator-horizontal.png" />
<img data-u="caption" data-t="3" style="position:absolute;top:740px;left:1600px;width:257px;height:300px;z-index:0;" src="img/c-finger-pointing.png" />
</div>
</div>
<div data-p="225.00" style="display: none;">
<img data-u="image" src="img/purple.jpg" />
</div>
<div data-p="225.00" data-po="80% 55%" style="display: none;">
<img data-u="image" src="img/blue.jpg" />
</div>
<a data-u="any" href="" style="display:none">Full Width Slider</a>
</div>
<!-- Bullet Navigator -->
<div data-u="navigator" class="jssorb05" style="bottom:16px;right:16px;" data-autocenter="1">
<!-- bullet navigator item prototype -->
<div data-u="prototype" style="width:16px;height:16px;"></div>
</div>
<!-- Arrow Navigator -->
<span data-u="arrowleft" class="jssora22l" style="top:0px;left:8px;width:40px;height:58px;" data-autocenter="2"></span>
<span data-u="arrowright" class="jssora22r" style="top:0px;right:8px;width:40px;height:58px;" data-autocenter="2"></span>
</div>
Set a z-index to the header. Don't forget to add a relative position to header for z-index work.
.headerpart{z-index:9999;position:relative}
This is z-index issue give z-index value high to the menubar try the below z-index value to menu class
.menu
{
z-index:9999;
position:relative
}

Rescaling images based off parent image in Bootstrap

I am using bootstrap to add responsive images to my webpage. The problem is that I have several overlapping images which then don’t get rescaled correctly.
Diagram Example
Not sure if I’ve set something up wrong, am missing something or trying to over-reach beyond what bootstrap can do.
This is the test code I’m using, I’ve kept it generic.
HTML:
<div class="col-lg-12" >
<!-- Images inside the container image that are not being rescaled -->
<div class="children_Images">
<img class="img-responsive" id="image_1" src="insideImage_1.png" alt="" style="left: 0.6em; top: -0.5em"/>
<img class="img-responsive" id="image_2" src="insideImage_2.png" alt="" style="left: 0.6em; top: -0.5em"/>
<img class="img-responsive" id="image_3" src="insideImage_3.png" alt="" style="left: 0.6em; top: -0.5em"/>
</div>
</div>
CSS:
.container{
border: 2px solid red;
position: relative; /* Allows children to be placed relative to the panel */
font-size: 10px;
z-index: 0;
height: 100%;
width: 100%;
}
.container img{
max-width:100%;
width: auto;
position: absolute;
border:5px solid green;
}
.children_Images
{
transition: all 1s ease-in-out;
}
.children_Images:hover
{
transform: scale(1.05) translate(4em);
}
I’m just wondering if this is possible with CSS and Bootstrap or should I be doing something with JavaScript that rescales all the children images once the parent image’s size has been altered?
What you should do is this
<div class="container">
<div class="col-xs-4">
<img src="" alt="" />
</div>
<div class="col-xs-4">
<img src="" alt="" />
</div>
<div class="col-xs-4">
<img src="" alt="" />
</div>
</div>
And css
.container img {
max-width: 100%;
}

How to put four images 2x2 on other image as background, CSS?

I try to put 4 images (same size) on 5th image defined as BG.
This is how it looks like now:
It works fine if height is fixed but in my case the height might change and I get this behavior:
This issue is not surprises me because I use % but not px.
When width changes, the style left: 13% changes
Very important!!! I can use only "%"
How can I achieve 1st image I posted even if height changes?
Here is relevant code:
<!-- BG image -->
<div style="position: relative; right: 0; top: 0; height:100%">
<img src="img/groups/pic-shade.png" style="
position: relative;
top: 0%;
right: 0%;
height: 17.6%;
">
<!-- left-top image -->
<img
style="position: absolute;
height: 42.25%;
top: 0%;
left: 0%;" src="img/group_6.png">
<!-- right-top image -->
<img
style="position: absolute;
height: 42.25%;
top: 0%;
left: 13%;" src="img/group_6.png">
<!-- left-bottom image -->
<img
style="position: absolute;
height: 42.25%;
bottom: 0%;
left: 0%;" src="img/group_6.png">
<!-- right-bottom image -->
<img
style="position: absolute;
height: 42.25%;
bottom: 0%;
left: 13%;" src="img/group_6.png">
</div>
[EDIT]
I tried to put right: 0% instead left: 13% but it doesn't help me because BG div has bigger width then BG image:
Here is root DIV selected:
DEMO
Don't use position absolute -- it breaks the flow and relationship between elements which means they can not show any response to each others width height changes.
Instead use the table technique -- check the demo.
HTML
<div class="bg-image-wrapper">
<div class="table">
<div class="row">
<div class="cell"><img src="http://placehold.it/100x100" alt="" /></div>
<div class="cell"><img src="http://placehold.it/100x100" alt="" /></div>
</div>
<div class="row">
<div class="cell"><img src="http://placehold.it/100x100" alt="" /></div>
<div class="cell"><img src="http://placehold.it/100x100" alt="" /></div>
</div>
</div>
</div>
CSS
img{
display:block;
}
.table{
display: table;
}
.row{
display: table-rwo;
}
.cell{
display:table-cell;
}
.bg-image-wrapper{
display: inline-block;
background: url(http://placehold.it/200x200);
border-radius: 10px;
overflow: hidden;
}
<!-- BG image -->
<div style="background-image:url("img/groups/pic-shade.png"); position: relative; right: 0; top: 0; height:100%">
<table>
<tr>
<td>
<img style="height: 100%;width: 100%;src="img/group_6.png">
</td>
<td>
<img style="height: 100%;width: 100%;src="img/group_6.png">
</td>
</tr>
<tr>
<td>
<img style="height: 100%;width: 100%;src="img/group_6.png">
</td>
<td>
<img style="height: 100%;width: 100%;src="img/group_6.png">
</td>
</tr>
</div>

Header not staying in place

I've positioned the header of my page to be always at the top by using
position:fixed;
This works perfectly fine, but not on Chrome on my android devices. The header get's pushed away by something and is placed where it shouldn't be: a few 100 pixels from the top instead of 0 pixels from the top.
My guess is that it's caused because of some javascript i'm using. The first piece of javascript is when a user presses an icon a menu shows up, this is the code:
<script type="text/javascript">
$(document).ready(function() {
$('#toggle').click(function(){
$('div.showhide').toggle();
});
});
</script>
The second code is when a user scrolls away from the header the header closes:
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(window).scroll(function() { $('.showhide').fadeOut("fast");
});
});//]]>
</script>
This is my page code:
<div class="showhide">
<div class="menubg">
<div class="menu">
<div class="container">
<div class="item">
<div class="img">
<a href="conv.cfm" style="color: white; text-decoration: none;"><img style="margin-top: 8px;" src="img/conversations.png" alt="conversations" />
</div>
<p>Gesprekken</a></p>
</div>
<div class="item">
<div class="img">
<a href="home.cfm" style="color: white; text-decoration: none;"> <img src="img/high_res.png" alt="notifications" style="height: 38px; margin-left: 23px;" class="nav left" />
</div>
<p>Vrienden</a></p>
</div>
<div class="item">
<div class="img">
<a href="profile.cfm" style="color: white; text-decoration: none;"><img src="img/hoofd.png" alt="me" />
</div>
<p>Ik</a></p>
</div>
<div class="clear"></div>
<div class="item">
<div class="img">
<img src="img/HC.gif" alt="reception" />
</div>
<p>Receptie</p>
</div>
<div class="item">
<div class="img">
<a href="settings.cfm" style="color: white; text-decoration: none;"><img src="img/wrench.gif" alt="settings" />
</div>
<p>Instellingen</p></a>
</div>
</div>
</div>
</div>
</div>
<div class="headbg">
<div class="header">
<a href="#">
<img src="img/conversations.png" alt="conversations" class="nav left" />
</a>
<a href="#">
<img src="img/high_res.png" alt="notifications" style="height: 38px; margin-top: -1px;" class="nav left" />
</a>
<a href="#">
<img src="img/habbobtn.png" alt="habbologo" class="nav right" id="toggle" />
</a>
</div>
</div>
<div class="content">
</div>
// Page continues after this but it isn't causing the problem
Forgot to add it, but this is my css code:
.menubg {
width: 100%;
background-color: #201d19;
}
.menu {
width: 320px;
height: 190px;
margin: 0 auto;
overflow: hidden;
}
.showhide {
display: none;
}
.container {
width: 290px;
height: 160px;
background-color: #201c18;
border: 1px solid #282420;
border-radius: 5px;
position: absolute;
padding: 5px;
margin: 10px;
}
// This is not all the css, if it's needed i'll add it
If anyone could help me out with this problem i would appreciate it!
I've created a sample fiddle with header and content div.
#header
{
position:fixed;
...
top:0;
left:0;
}
#content
{
margin-top:set your header height;
}

Categories

Resources