Expand multiple divs to fit horizontal width of screen - javascript

I am making a menu which has three parts to it:
Menu links left
Images
Menu links right
I need the menu links on the left and right to expand the full width of the screen and the image to be in a div with a fixed width and centered.
So I have the following setup
<div class="menuLinks">Some links</div>
<div class="menuImage"><img src="" alt="" /></div>
<div class="menuLinks">Some links</div>
And the css
.menuLinks{width:100%;float:left;}
.menuImage{width:400px;float:left;}
Any help with this is much appreciated.
Thanks

This is a solution which is Fully CSS and HTML.
CSS
#wrapper{
width:100%;
text-align:center;
overflow: auto;
}
#block-images{
background-color: silver;
width: 400px;
margin:0 auto;
position:absolute;
left: 50%;
margin-left: -200px;
}
.wrapper-menu-left{
float:left;
width:50%;
}
.wrapper-menu-right{
float:right;
width:50%;
}
.menuBlock{
text-align: left;
}
#mLeft{
background-color: green;
margin-right:200px;
}
#mRight{
background-color: navy;
margin-left:200px;
}
HTML
<div id="wrapper">
<div class="wrapper-menu-left">
<div class="menuBlock" id="mLeft">left</div>
</div>
<div class="wrapper-menu-right">
<div class="menuBlock" id="mRight">right</div>
</div>
<div id="block-images">images</div>
</div>

Here is your html menu :
<div class="menuLinks" name="links">Some links</div>
<div class="menuImage"><img src="" alt="" /></div>
<div class="menuLinks" name="links">Some links</div>
<div class="menuImage"><img src="" alt="" /></div>
<div class="menuLinks" name="links">Some links</div>
Just use css to size menuImages :
<style>
.menuImage{width:400px;float:left;}
</style>
Use javascript on load to find screen resolution and find each link div size :
<script language="javascript">
function resizeMenu()
{
var linksList = document.getElementsByName('links');
for(var i = 0; i < linksList.length; i++)
{
linksList[i].style.width = (screen.availWidth
- 2 * (400) //size of total images)
/ linksList.length; // total number of linksCount
}
}
resizeMenu();
</script>

Related

scrolling lightbox gallery

I have a scrolling a gallery that looks like this, I need to add an option that on click on one of the pictures, the clicked picture will cover 100% height and width of the screen, and the scrollbar will still appear under the picture in order to move to the next or the previous pictures that also will be in size of 100% of the screen.
It should look like this.
This is the gallery that on the first example:
$('.imageWrapper img').click(function() {
$('.scrolls img').css({
'width': '100%',
'height': '100%'
});
$('.footerclass').css({
'display': 'none'
});
});
.wrapper {
margin: auto;
text-align: center;
position: absolute;
bottom: 0;
width: 100%;
}
.scrolls {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
.scrolls img {
width: 275px;
cursor: pointer;
display:inline-block;
display:inline;
margin-right: -5px;
vertical-align:top;
}
.imageWrapper {
display: inline-block;
position: relative;
margin-bottom: 120px;
}
.imageWrapper img {
display: block;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="wrapper" id="column">
<div class="scrolls">
<div class="imageWrapper">
<img src="images/01.jpg" />
Link
</div>
<div class="imageWrapper">
<img src="images/01.jpg" />
Link
</div>
<div class="imageWrapper">
<img src="images/01.jpg" />
Link
</div>
<div class="imageWrapper">
<img src="images/01.jpg" />
Link
</div>
<div class="imageWrapper">
<img src="images/01.jpg" />
Link
</div>
<div class="imageWrapper">
<img src="images/01.jpg" />
Link
</div>
<?php include 'footer.php';?>
</div>
</div>
</body>
I tried to add a JS that will change the size of all pictures to 100% height and width on click on one the picture. You could see that in the snippet.
My problem is how to display the specific picture that the user clicked on in 100% and still to have an option to scroll to previous or next pictures.
If you want to display the specific picture that the user clicked then I would suggest using $(this).css() selector instead of $(.scrolls img).css() to point more accurately to the image you're looking to render 100%.

Reorder Divs that aren't Siblings

Related: Use CSS to reorder DIVs
In my case, my HTML looks more like this:
<div class="container">
<div class="gallery">
<div class="image-wrap"> stuff </div>
<div class="thumbnails"> stuff </div>
</div>
<div class="info"> stuff </div>
</div>
I want .thumbnails and .info to switch places visually, but without affecting the styles or position of anything else. The all the html (and most of the css) inside .gallery is generated by a plugin that I can't edit.
This is what you can assume about the styling:
.thumbnails {
width: 100%;
height: 100px;
}
.info {
width: 100%;
min-height: 125px;
}
I considered using absolute positioning, but .info has a variable height because it has variable content length.
I'd prefer pure a CSS solution, but I'm open to jQuery/JS solutions if necessary.
If .info has a known height, then you can trick this using the float properties and behavior:
.thumbnails {
float:left;
clear:left;
width:100%;
}
.gallery:before {
content:'';
float:left;
height:130px;/* this should be the height and margins used by .info .... but js do not access pseudo element */
}
.info {
height:100px;
display:flex;
border:solid tomato;
justify-content:center;
align-items:center;
background:turquoise;
color:white;
font-size:2em;
}
<div class="container">
<div class="gallery">
<div class="image-wrap"> image-wrap </div>
<div class="thumbnails"> thumbnails </div>
</div>
<div class="info"> info </div>
</div>
codepen to play with
You can use flexbox to reorder flex items, and display: contents to make all the elements participate in the same flex formatting context.
.container {
display: flex;
flex-direction: column;
}
.gallery {
display: contents;
}
.thumbnails {
height: 100px;
order: 1;
}
.info {
min-height: 125px;
}
<div class="container">
<div class="gallery">
<div class="image-wrap"> image-wrap </div>
<div class="thumbnails"> thumbnails </div>
</div>
<div class="info"> info </div>
</div>
Currently, display: contents is only supported by Firefox.
Right, so I don't think you'll be able to achieve this just with css, because you want to actually change the structure... Javascript definitely will be required here:
(function($) {
$(function() {
$(".container").each(function() {
var container = $(this);
var gallery = container.children(".gallery");
container.children(".info").appendTo(gallery);
gallery.children(".thumbnails").appendTo(container);
});
});
})(jQuery);
Hope this helps!

view enlarged image ontop of content on mouseover with javascript

I am trying to use javascript to show a larger version of my image on mouseover. I have the functionality working however the display property is not right and I need the image to be shown ontop of the page content i.e like a popout.
How an I add this to my code. The problem I have is that my page is divided into columns so the image is restricted by the width of the column so I need a way to override that i.e. use a popout.
DEMO - js fiddle
html:
<div class="column1">
<div class="enlarge">
<img id="test" src="example.jpg" onmouseover="bigImg(this)" onmouseout="normalImg(this)" width="400" height="300" class="img-responsive" alt="image">
<div id="test1" class="test1" style="display:none;">
<img width="800" src="example.jpg" alt="" />
</div>
</div>
</div>
<div class="column2">
A LOT OF TEXT IN HERE
</div>
javascript:
function bigImg() {
$("#test1").show();
}
function normalImg() {
$("#test1").hide();
}
It would be restrictive to code your script using specific elements (IDs). Would advice you to use element classes instead.
You can achieve what you want several ways, here is one using absolute positioning for the big image:
$('.small-image').on('mouseenter', function(e) {
$(this).siblings('.big-image').show();
}).on('mouseleave', function(e) {
$(this).siblings('.big-image').hide();
})
body {
overflow-x: hidden;
}
.row::after {
content: ' ';
display: block;
clear: both;
}
.column {
float: left;
}
.column1 {
width: 20%;
}
.column2 {
width: 80%;
}
img {
max-width: 100%;
height: auto;
display: block;
}
.enlarge {
position: relative;
}
.big-image {
display: none;
position: absolute;
left: 100%;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="column column1">
<div class="enlarge">
<img src="http://lorempixel.com/400/300/" class="small-image" alt="image">
<div class="big-image">
<img src="http://lorempixel.com/400/300/" alt="" />
</div>
</div>
</div>
<div class="column column2">
A LOT OF TEXT IN HERE
</div>
</div>
Also on Fiddle.
Try putting the img tag outside of the column1 div and then it will no longer be restricted.
If the img is not showing ontop of the text try add css value z-index.
img {
z-index:2;
}
use :
$("#test" ).hover(function() {
$("#test1").show();
},function(){
$("#test1").hide();
});
https://jsfiddle.net/2rt836co/4/

Simple Coding Issue with HTML/CSS Caption within a div

Could somebody please take a look at this livelink of my web page? I have a caption in the top right hand side of each of the divs in my layout div, however I have one horizontal box (the first one) where the caption extends to the bottom of the div instead of only having a height of 20px. I have been searching through this code but I can not see why.
Thanks in advance
HTML
<div class="col">
<div class="trigger vertical img1">
<div tabindex="0" class="maincontent">
<div class="slider static">
<div class="just_text">
<div class="caption-box">Caption</div>
<img src="slide1.png" height="400" width="200" />
</div>
<div class="just_text">
<div class="caption-box">Caption</div>
<img src="slide2.png" height="400" width="200" /></div>
<div class="just_text">
<div class="caption-box">Caption</div>
<img src="slide3.png" height="400" width="200" /></div>
<div class="just_text">
<div class="caption-box">Caption</div>
<img src="slide4.png" height="400" width="200" /></div>
</div>
</div>
</div>
</div>
CSS
.caption-box {
position: absolute;
right: 0;
height: 20px;
width:100px;
background-color: red;
color: #fff;
z-index: 999;
}
Add !important to your height, this will fix it...
.caption-box {
position: absolute;
right: 0;
height: 20px!important;
width:100px;
background-color: red;
color: #fff;
z-index: 999;
}
You've a
.trigger.vertical * {
height: 400px;
}
in your CSS, that force the heigh of the caption to 400px.
It happens only to the first caption because only the first caption is a child of a .trigger.vertical
Inspecting the element with Chrome shows that the height of 20px is overridden by this CSS class:
.trigger.vertical * {
height: 400px;
}
I noticed that there are quite a few differences in the layout between IE11 and Chrome 41.0.2272.118 so there are likely other issues with the layout.

two divs with dynamic width when spanning two lines

I'm working on a mobile site page, I got two divs in a parent roughly set up like so:
<div id="parent">
<div id="left" style="float:left;"> </div>
<div id="right" style="float:right;"> </div>
</div>
They both have a min-width and margin set.
They display next to each other fine. But I want to set it up so that if the width is too small (say on an iphone), they span two lines and take up the whole width of the page by itself.
At the moment, I can't get the width to dynamic jump to 100% of the page when they span two lines. All it does is the left div sticks to the left and the right div to the right.
I've read somewhere about using inline block, and toying with the overflow and position but I can't get it to work.
Any tips or suggestions?
Thanks.
edit:
Here's the css I'm using at the moment
<div style="width:96%;">
<div style="float:left; min-width:220px; margin:10px auto 5px auto;">
content
</div>
<div style="float:right; min-width:230px; margin:0px auto 5px auto;">
content
</div>
</div>
Try this
CSS
#parent {
border : 2px solid #000;
overflow:hidden;
}
.parent div {
min-height: 200px;
padding: 10px;
}
#left {
background-color: gray;
float:left;
margin-right:20px;
width:140px;
}
#right {
background-color: white;
overflow:hidden;
margin:10px;
min-height:170px;
}
#media screen and (max-width: 400px) {
#left {
float: none;
margin-right:0;
width:auto;
border:0;
}
}
HTML
<div id="parent">
<div id="left">left</div>
<div id="right">right</div>
</div>
DEMO
You have to set media queries for the style tags. Take the CSS out of the inline and set them in the stylesheet instead.
#media only screen and (min-width: 481px) {
#left {float:left;}
#right {float:right;}
}
The DIVs then only float to the left and right if the screen is wider than 480px:
<div id="parent">
<div id="left" > </div>
<div id="right"> </div>
</div>

Categories