How to make my image gallery width responsive to div below it? - javascript

I have an image gallery with name slider1_container and it's style properties are specified within the HTML code such as:
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width:700px;
height: 600px; background: #191919; overflow: hidden;">
This works perfectly, except that the slider is wider than the div box beneath this. This div box is 100% of the width of the parent class "rightcolumn", and my slider1_container div is ALSO within this class, but since it's width of 700px is set within the HTML code, it doesn't seem to be responsive at other viewport sizes.
I've tried to use media queries at various points to change the width of the slider1_container to something smaller than 700px, but it seems that the width specified in the HTML code overrules that.
[DEAD LINK REMOVED, PLEASE UPDATE]
If I set the 700px to auto, the width works perfectly BUT the image gallery shows only black when you load the page, until you choose another photo it will quickly appear (javascript issue it sounds).
If you resize the viewport on my site you can see the image gallery's width doesn't match the div box below it How can I make this responsive like the other div?
Thank you!!

Read the documentation for whatever slideshow plugin it is that you are using. It most likely has settings for responsiveness. If not, you can find a million different responsive slideshow plugins here

Related

Image in horizontal scroll are stretched

I have a gallery of images in a horizontal scroll.
The scroll got a fixed height and the image should take 100% of the scroll height.
Images got variable width but should keep his aspect ratio when they are in the scroll.
I made it simple in codepen but it was working without the toggle. Then I tested with my real spec:
First, it's hidden
Then on a user click on a button, the gallery becomes visible
Here is the codepen: https://codepen.io/Liroo/pen/zYYgGWz
The website where is the bug: http://framepictures.studio-push.com/photographie/making-of/#louis-vuitton
This simple (s)css:
&__gallery {
border-bottom: solid 1px white;
height: 32vw;
&__image {
height: 100%;
}
}
may work (because sometimes it's not) in the codepen but if you check the website link, it is always buggy.
You can update it with playing with the off class of the #toggle div and you will see this weird behavior.
I already made a javascript version of this bug but I would like to know if there is any CSS solution. (here my previous solution: http://jensingvarsson.studio-push.com/)
EDIT:
Here you can find the bug in the gallery: http://framepictures.studio-push.com/photographie/making-of/#louis-vuitton
Sometimes it stretch, sometimes, just images are cut because the parent div is less wide.

Dynamically div scrolling on mouse wheel both horizontal and vertically

I have a div name demo and i want to make this div scrolling when it exceeds it defined size . Also i want to track the height and width of div so that next time when i open my project it automayically assign that height and width to the div
Right now am giving hard coded double size of div height and width. Please let me know how it is possible and thanks in advance.
My div css is as follows
#demo{
top:80px;
position: absolute;
background-image:url(../images/bg6.jpg);
width: 2000px;
height: 1500px;
overflow: auto;
overflow-y: scroll;
}
If you want to fix the div in the screen, there is no need to track the scroll, you can make it fixed:
#demo{
top:80px;
position: fixed;
...
}
"Also i want to track the height and width of div so that next time when i open my project it automatically assign that height and width to the div"
You need to save those values, there are some ways to do that;
Database (by calling a php file for instance, you can associate that size to an user account, login etc.)
Cookies (its the easiest way, but the user will not have the data in other computers, and it will be wiped on a browser cache clean)
HTML5 api has also methods to keep data.

CSS3 or Jquery: popup of a thumbnail image when the thumbnail is hovered over

I need to list the thumbnail images on a page, all of which have fixed height and width. Once I hover any of them, I want the larger image display at a fixed position, i.e. top:50px and left:50px within its wrapper. The size of the larger image is also fixed, i.e. width:100px, and height: 100px.
I followed the instruction on
http://cssdemos.tupence.co.uk/image-popup.htm
but I could not figure out to put the larger image at a fixed position.
I would appreciate if you could help me in this
Thanks,
Position fixed, places the image(element) an amount of pixels based on the whole window. Not to the wrapper.
Position absolute places the image an amount of pixels based on its wrapper.
So try adding this.
.larger-image {
position: absolute;
top: 50px;
left: 50px;
}
If for some reason it doesn't work, please post your relevant code.

Unable to fit background image fit inside another image

Looking at this site I've noticed that the background image that displays the page bleeds out of the sides of the monitor. Is there a way to fix this?
img src="img/laptop.png" id="laptop" class="tour" alt="laptop" />
The laptop is a png with a transparent center. I was then apply a class to the laptop which would apply a background image behind the laptop. ie
.tour { background: url("../img/tour.jpg") center top no-repeat; }
The problem occurs when some of the images are larger than the width of the laptop
The simplest way would be to make the background of the image of the laptop white, which would then cover up the part of the image which 'bleeds out'.
Another quick solution would be to resize all the background images so that they fit properly within the monitor.
I think the way to do it properly is to have an absolutely positioned element which fits within the bounds of the laptop screen and shows the image.
Something along the lines of
<div class='image-container' style='position: relative;'>
<div id='background' style='position: absolute; left: 100px; right: 100px; top: 30px; bottom: 120px;></div>
<img src='img/laptop.png' />
</div>
This would need some proper measurement/testing of the actual margins on the image, and would need changes to the javascript and css to work/look right.
Don't specify a width for the "container clearfix" class, and then add an appropriate width, say about 920px to the monitor, so that it's size is more appropriate to cover the photos you're using.

How to get rid of border for an Iframe in IE8

I am creating a dialog with an iframe inside, the problem is that the border keeps showing in IE8, this works perfectly in any other browser.
This is what I have tried, I also tried border:none
$(d.dialog).find('#MyCoolDialogInner').html('<iframe src="/apex/EscalationForm?id={!Case.Id}" height="495" width="380" marginheight="0" marginwidth="0" frameborder="0"/>');
Thanks in advance
Add the frameBorder attribute (note the capital ‘B’).
So it would look like:
<iframe frameBorder="0">Browser not compatible.</iframe>
Have you tried setting it via CSS?
iframe {
border:0px none transparent !important;
}
Also, these seem to work too - marginheight="0" marginwidth="0" frameborder="0". Taken from this post on the same IE issue.
Try this:
<iframe frameborder="no" />
I realize IE8 is a nuisance when it comes to iFRAMES. "Frameborder" is deprecated in HTML5 so while it's the easiest option for IE8, this is not a long term solution.
I have successfully hidden borders and scrollbars by placing the iFRAME inside of a container. The iFRAME container itself is placed inside of a div for overall positioning on the web page. The iFRAME itself is absolute positioned and negative margins applied to both top and left in order to hide the top and left borders. Width and height of the absolutely positioned iFRAME should be coded at over 100% so it exceeds the parent size to the point that the right and bottom borders are not visible (also the scrollbars are not visible). This technique also makes the iFrame responsive because the iFRAME container uses percentages as well as the div that holds the container. Of course the iFRAME parent div must be set to overflow:hidden.
Here is an example code:
/*THE PARENT DIV FOR THE iFRAME CONTAINER*/
.calcontainer
{
width:100%; /*adjust iFrame shrinking here - if floating use percentage until no white space around image.*/
max-width:200px;
margin:auto;
}
/*THE RELATIVE POSITIONED CONTAINER FOR THE iFRAME*/
.calinside /*container for iFRAME - contents will size huge if the container is not contained and sized*/
{
position:relative; /*causes this to be the parent for the absolute iFRAME*/
padding-bottom: 100%; /* This is the aspect ratio width to height ratio*/
height: 0;
overflow:hidden; /*hides the parts of the iFRAME that overflow due to negative margins and over 100% sizing*/
}
/*THE ABSOLUTE POSITIONED iFRAME contents WITH NEGATIVE MARGINS AND OVER 100% SIZE IS CODED HERE. SEE THE NORMAL SETTINGS VERSUS THE IE8 SETTINGS AS MARKED. A SEPARATE CSS FILE IS NEEDED FOR IE8 WITH A CONDITIONAL STATEMENT IN THE HEAD OF YOUR HTML DOCUMENT/WEB PAGE*/
.calinside iframe
{
position: absolute;
top: 0;
left: 0;
width: 100% !important;/*must expand to hide white space to the right and below. Hidden overflow by parent above*/
height: 103% !important; /*must expand to hide white space to the right and below. Hidden overflow by parent above*/
/*IE8*/top: -2%;
/*IE8*/left: -2%;
/*IE8*/width: 114% !important;/*For IE8 hides right border and scroll bar area that is white*/
/*IE8*/height: 105% !important; /*hide white space and border below. Hidden overflow by parent above*/
}
frameborder can be a 1 or 0, not sure "no" is a valid value. Coda provides valid value options while coding and only 1 and 0 are available to use when I do this to my iframe.

Categories