Lightbox image max-height = user screen height - javascript

I'm building an image gallery for a photographer. You can find the site here.
What I'm trying to do is set the height of the image so that it will never fall off the screen. In other words:
lightbox img { max-height:100%; max-width:auto; }
This however, doesn't work. Since my ul parent's height is larger than the screen.
The images are all around 1000px or higher. And ofcourse we don't want to offer them falling off the screen. Does anyone have any idea how I might solve this problem?
Thanks in advance!

With pure CSS you could use media queries for example: (attention -> CSS3!)
#media screen and (max-height:700px) {
#lightbox img { max-height: 690px; }
}
With jquery its more dynamic and even simpler:
$('#lightbox img').css('max-height', $(document).height()));

Related

Issue with iFrame Element not re-sizing within container

I am working on a small VA project and I am attempting to pull stats from another website. The only way I have been able to find out how to do this, is by using an iFrame with the clip function.
Website is: NWGlobalVA.com
Now the Issue I am having is if you go to the main page and re-size the browser in anyway it pushes behind the map element. I have tried everything in my knowledge and research to make it re-size with the container.
Below is the code I use with the iFrame and CSS to do the clipping. Any help would be much more appreciated then you will understand. I have been trying to do this for a couple days now. Ideally I would rather just get the information once every 15 minutes and pass it to my database. However on the website none of the tables are defined and I would know how to go about that.
<style>
.iframeb {
position: absolute;
left:-384px;
right:0px;
top: -145px;
clip: rect(190px, 625px, 350px, 400px);
}</style>
<iframe width="890" height="1900" src="http://fscloud-infotool.de/index.php?page=vasystem&subpage=vadetails&id=10277" class="iframeb" scrolling="no" frameborder="0"></iframe>
The way I deal with iframe size is with javascript (jquery):
I calculated the original iframe aspect ratio by taking the width/height. So in your case: 890/1900.
<script>
function size_iFrame()
{
// If the width and height of the iframe are set
// as attributes (<iframe width='890' height='1900'>),
// you can have the js calculate it for you.
// aspect= $('iframe').attr('width') / $('iframe').attr('height');
aspect= 0.47;
$('iframe').css('width', '100%');
$('iframe').css('height', $('iframe').width() / aspect);
}
$(document).ready(function()
{
size_iFrame();
$(window).resize(function()
{
size_iFrame();
});
}
</script>
This will fit the iframe to the width of its container and give it the same aspect ratio as it initially had.
Edit: To answer your question, i'd call it from the ready callback and setup and window resize callback to call every time the screen size changes. I edited my code above to show this.
Edit2: As #mugé points out, you'll also need to remove your iframe css styling for my method to work.
In responsive design, I assign the iframe a container sized inside the CSS. For example,
CSS
.iframe_container {
display: inline;
float: left;
width: 89%; //whatever width you want
}
You will need to eliminate your .iframeb absolute, right, left positionings, because the container will take care of it all, unless you are talking about the 'List' parameters on top of the map, I would try to use #media to arrange clean lists according to screen sizes for the .iframeb class.

Display different image on various devices

I'm using Joomla 3.3.4 FYI.
I have an image on the front page (http://www.ckdev.info/cdp) that's a call to action to complete a form for a free estimate. It's great in desktop or tablet (landscape) as the form appears to the right.
However, when viewed on other devices or orientations, the viewport is too small to have the sidebar showing on the right and it drops to the bottom. So the "right arrow" image doesn't make logical sense.
What I want to do is a bit of an "if-else" solution. If screen width is xx px or greater show "right-arrow.jpg", else "down-arrow.jpg". I will attach a anchor to the form so that clicking/touching down-arrow.jpg when displayed will scroll down to the form.
I'm afraid I'm no coder so, while I have no doubt this can be done, I have no clue how! Thanks.
You can do it with css media-queries.
Try this: (change 900px and 899px to your desired values)
#media(min-width: 900px) {
#img {
width: 100%;
height: 150px;
background: url('http://www.ckdev.info/cdp/images/estimate.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
}
#media(max-width: 899px) {
#img {
width: 100%;
height: 100px;
background: url('http://www.ckdev.info/cdp/images/estimate.png');/*change image url*/
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
}
Check it out here: jsFiddle (resize result window width to more than 900px)
I've just made your image different size on different media queries, but instead change your background url to your desired image.
You can make this happen using jQuery without anything extra as long as you don't mind some odities in the width of the window that come from the scrollbar. Ill get back to the scrollbar in a sec. To test the width you can use jQuery(window).width(). This will return the width of the window in pixels. Exactly what you are looking for. An example snippet:
jQuery(document).ready(function(){
if (jQuery(window).width() > 1000){
jQuery(<select img here>).attr('src', '/path/to/new/image.jpg');
}
});
I notice that you dont have a class or id on the image you mentioned. I would suggest adding an id to make it easier to select. For example, <img src="/cdp/images/estimate.png" alt="Get a free interior or exterior painting estimate" id="estimate-with-arrow">. If you make this change you can swap out <select img here> for 'img#estimate-with-arrow' (this will select an the image with id estimate-with-arrow). And voila, image swap.
I will note three things.
First, that this will only work on initial page load. If a user loads the page at full desktop width then shrinks it down, the image will not change when it passes the break point. You need to bind to the resize to get this to work:
jQuery(window).resize(function() {
<code here>
});
Second, I set up this particular code to swap out the image for any screen over 1000 px. This means you will only ever load one image for smaller devices, saving bandwidth. This is preferred, ad mobile plans are more finicky.
And third, the scrollbar. Testing the window width using jQuery will not match the same break point as css. I use modernizr to get around this. This is a bit more advanced though.
What you want is a CSS media query to change the displayed image.
For a smartphone like the iphone in portait it would be something like that:
#media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) 
{ /* STYLES GO HERE */}
For more details take a look at:
w3schools
cssmediaqueries

Section overlays on another

Dear Stackoverflow community,
I'm very desperated about following setup:
- I have a Website with a Jquery onepagescroll design.
- If the width of the browsers window is below a certain point (769px) the onepagescroll disapears
- Instead a Gumby based design gets activated
But when happening so
... the third of the three sections overlays over the second one a
... after the first section is a gap
I researchead about four hours on this problem and couldn't solve it.
I hope you can help me.
Yours Sinceryl,
yooui
Code:
index.html (http://pastebin.com/6fMtkBbm)
jquery.onepage-scroll.js (http://pastebin.com/FnQWWe7J)
To fix the spacing and overlap, take a look at your CSS. The three "section" elements each have a height of 100%, you'll have to change that in your responsive styles.
So try adding something like this:
#media only screen and (max-width: 768px) {
.onepage-wrapper .section {
height: auto;
}
}

Hiding an element with hide() causes a page "jump"

I'm trying to create an effect where I display a big logo on page load. When the user scrolls pass the logo and navigation, I want to display a fixed nav bar with a smaller logo. I then want to hide the big logo so that when the user scrolls to the top they still see the fixed nav bar (i.e. the big logo and original navigation stay hidden).
However, when I remove a big block element with the .hide() property it causes the page to "jump" as the display:none property gets set. This reduces the usability of the page, as the location jumps the size of the element that was removed, potentially confusing users.
Is there a way I can get the effect I want, while still providing a smooth experience to the user? I've been thinking of potential options, but have been drawing blanks. Hoping you guys can inspire me :)
A simple JS fiddle can be seen here: http://jsfiddle.net/darudude/vA5WG/ (Note: You'll have to increase the result section to 720+px to get it to work properly - I'm still working on the responsive part)
The code in question:
function UpdateTableHeaders() {
var menu = $(".main_nav_menu"),
offset_top = menu.offset().top;
var scrollTop = $(window).scrollTop();
if (scrollTop > (offset_top + menu.height()))
{
$(".clone").addClass("floating_header");
$(".big_logo").hide();
}
}
$(window).scroll(function(){
UpdateTableHeaders();
});
You can try this ,
Add a new style
<style>
.hide {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
</style>
And change your JS to
$(".big_logo").addClass('hide');
Instead of
$(".big_logo").hide();
Use visibility:hidden then
$(".big_logo").css('visibility','hidden');
Maybe it is because a different browser - margin/padding thing. Have you tried to add this to the body element (or to the container element if it inherits some margins/paddings)
body{
margin:0;
padding:0;
width:100%;
}

Proportionally resizing a full-screen image using "supersized" jQuery plugin

I'm using a jQuery plugin called Supersized to display images in full screen.
You can see a sample here (on homepage): http://mysampleconcept.com/situs4/
If you try to shrink the screen, you will notice that the image will resize too, however it may shrink too much that the image will look bad.
The same plugin is used here as well: http://mysampleconcept.com/situs3/; however, the resizing is done differently so the image doesn't go out of proportions.
I have tried to compare the plugins settings on both sites and they both seem to be similar.
I have tried setting the image width and height to 100% !important in my css and it didn't help.
Any suggestion on how to achieve the same behavior?
The issue is from the common css that does your image all base on "max-width:100%".
Check your css reset if there is something like
img { max-width: 100%; }
The supersized official has a solution for the file "supersized.3.2.7.js":
https://github.com/buildinternet/supersized/issues/103
If you can not solve it by following the official solution, try only add this in your supersized css:
#supersized img { max-width: none; }
this tricky is by http://blog.valderama.net/node/30
When I removed
#supersized img {
width: 100% !important;
height: 100% !important;
}
it seems to work.
Although not an optimal solution, I was able to solve this by adding min-width and min-height to the supersized image

Categories

Resources