How to fluid images when resize window?.
I have HTML code like this :
<div class="box">
<img src="http://demo.smooththemes.com/magazon/wp-content/uploads/2013/01/984632486_9d8ff89b63_b-642x336.jpg" />
</div>
And CSS :
.box {width:150px; height:60px; position:relative; overflow:hidden}
.box img{position:absolute; width:180px; height:80px; top:-10px; left:-10px}
When windows is resized, I want remove properties of (.box img): top:-10px; left:-10px and attribute more : min-width:100%, max-width:100%. It means we have :
.box img{
position:absolute;
width:180px; height:80px; min-width:100%;
top:(removed); left:(removed)}
How can I do it with Javascript or Jquery. Thanks for your help.
I tend to agree with #Phorden that media queries are a good route for this.
However, if you need to do it with JS / jQuery:
$(window).resize(function() {
$('.box img').css({'top': 'auto', 'left': 'auto', 'min-width': '100%'});
});
I don't know about a jQuery or Javascript solution, but if you want a pure CSS solution, CSS media Queries is probably what you want. It is a foundational concept of responsive web design. More info on CSS Media Queries here: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
add max-width:100% and height:auto to your images to make them resize proportional based on their parent:
.box img{
position:absolute;
top:-10px;
left:-10px
max-width: 100%; /* fits width of parent */
height: auto; /* resize height based on max-width, making it proportional *?
}
.
I think this script by Scott Jehl could be interesting for you although the images only change there dimensions at specific breakpoints.
picturefill
It's very useful as you can define different picture sources for various resolutions.
The markup needed in combination with this script looks e.g. like this:
<span data-picture data-alt="Image description">
<span data-src="small.jpg"></span>
<span data-src="medium.jpg" data-media="(min-width: 400px)"></span>
<span data-src="large.jpg" data-media="(min-width: 800px)"></span>
<span data-src="extralarge.jpg" data-media="(min-width: 1000px)"></span>
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
<noscript>
<img src="external/imgs/small.jpg" alt="Image description">
</noscript>
</span>
Related
i've done a horizontal picture gallery from the here: How do I allow horizontal scrolling only for a row of images and show overflow, without horizontally scrolling the rest of the page?
and i was wondering if there is anyway to change the slider at the bottom to something like a nano slider? Something like this:
I'd really appreciate some help
Use overflow-x: auto; on your container (section in your example)
<section>
<div class="pic-container">
<div class="pic-row">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="4.jpg">
<img src="5.jpg">
<img src="6.jpg">
</div>
</div>
</section>
CSS:
body {
overflow: hidden;
}
section {
/* The width of your document, I suppose */
width:600px;
margin: 0 auto;
white-space:nowrap;
overflow-x: auto;
}
.pic-container {
/* As large as it needs to be */
width: 1500px;
}
If i understand correctly, you want to change the styling for the scroll bar. If I'm correct, that isn't difficult. you should use Webkit Scrollbars for this. Here's a pretty good article on it.
you would probably want something like this:
::-webkit-scrollbar-track:horizontal {
height: 3px;
background: gray;
}
::-webkit-scrollbar:horozontal {
background: white;
}
I'm not completely sure about it, thought. It's been a while since I've needed to style scroll bars.
note: since this is webkit it won't work in firefox (or maybe explorer, not sure) as far as I know, the only way to do this would be with javascript.
I would like to make an image full screen when clicked on. Similar to hitting f11 in most modern browsers. I've tried screenfull.js but it is really buggy and not cross browser supported that well.
My HTML
<div id="photoFrame">
<img src="uploads/picture01.jpg" class="img" alt="PictureOne" />
<img src="uploads/picture02.jpg" class="img" alt="PictureTwo" />
<img src="uploads/picture03.jpg" class="img" alt="PictureThree" />
... and so on ...
</div>
My CSS
#photoFrame {
clear: both;
margin-left: 0;
width: 100vw;
display: block;
white-space:nowrap;
height:auto;
float:left;
overflow-x:scroll;
overflow-y: hidden;
clear:left;
background-color:#333;
padding-top:40px;
padding-bottom:40px;
}
#photoFrame img {
width:auto;
max-width:80%;
height:50vh;
overflow-x:auto;
overflow-y: hidden;
padding-right:10px;
padding-left:10px;
}
Side Notes
The img class on the elements can be used by any Javascript.
Any help would be great or even a point in the right direction.
Try something like...
$(".img").click(function(){
$(this).height($(window).height());
$(this).width($(window).width());
});
edit
For an f11 style full screen plugin you should check out https://github.com/kayahr/jquery-fullscreen-plugin. Then edit my above code to...
$(".img").click(function(){
$(this).fullScreen(true);
});
You should use a plugin like lytebox which is very simple to use and would give you a good result of what you want to achieve:
http://lytebox.com/
Just download the js from the above site and include that into your page
How to use:
http://lytebox.com/howTo.php
Its pretty simple and exactly what you want to do.
I'm trying to create a scrolling effect that preferably doesn't use javascript (CSS only) but I understand if it's not possible, just exploring options.
My page looks like this:
When scrolling down I want the background image to have a parallax-like effect, staying static while the body's background and frame move around it.
Here's a sample of code to work with:
http://jsfiddle.net/J8fFa/7/
HTML
<body>
<div class="border-bg">
<div class="image-bg"></div>
</div>
<div class="border-bg">
<div class="spacer">
</div>
</div>
</body>
CSS
body{
background-color:#aaa;
}
.border-bg{
width:80%;
margin:30px auto;
background-color:#fff;
padding:40px;
}
.image-bg{
background:url('http://i.imgur.com/7cM1oL6.jpg');
height:400px;
background-size:cover;
}
.spacer{
height:900px;
}
I can see how this would work if the image was the background for the body, but as this is sitting on top of the body is there any way I can manipulate it to have a similar visual effect?
change your .image-bg class to:
.image-bg{
background:url('http://i.imgur.com/7cM1oL6.jpg') fixed;
height:400px;
background-size:cover;
}
this will prevent the image from scrolling
updated fiddle: http://jsfiddle.net/J8fFa/9/
I have been trying to figure this out for a while and everything I try fails to produce the result I am after.
So the setup is as follows
HTML
<div class="container">
<div class="icon-holder">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png" class="icon"/>
</div>
<div class="icon-holder">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png" class="icon"/>
</div>
<div class="icon-holder">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png" class="icon"/>
</div>
<div class="icon-holder">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png" class="icon"/>
</div>
<div class="icon-holder">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png" class="icon"/>
</div>
</div>
CSS
.icon-holder {
float:left;
height:100%;
width:auto;
}
.container {
height:100px;
}
.icon {
height:auto;
width: auto;
max-height: 100%;
display:block;
}
.container-before {
height:100px;
}
.container-after {
height:20px;
}
Now the problem lies in that if I use javascript to resize the container I need the images to resize with it and have no spacing in between. I need a CSS solution that works, I know I can hack it with JS but thats not what I am trying to accomplish.
I have an example running at http://jsfiddle.net/twmxh/3/ of the whole issue with expected output.
UPDATE
Just a bit more about the implementation. The container div is actually a toolbar with a resize handle. So the container is the only element I can apply the new height on.
Can you do this
$("#resize").click(function() {
$('.container').height("20px");
$('.container .icon').width("20px");
});
This appears to be triggering some funny browser bugs - it works fine essentially in both Firefox and Chrome, but both screw up on the element resize in different ways. In IE10 your sample doesn't run at all.
However, for the intended result you shouldn't be using animate at all in these modern CSS3 days, just use CSS transitions instead, like this example Fiddle solving your case to work in all current browsers.
Try switching your CSS for the image size
width: 100%;
height: auto;
i don't think heights and percentages behave well in most browsers
This is generally how you can define the size for a "responsive" image... whereas the width will always fit the size of the container, and the height will follow suit automagically.
edit your code so that the animation scales by width rather than by height. see if that works.
Try adding to the dynamically changed widths
clear:right;
this will refresh the container
heres a link
http://www.w3schools.com/cssref/pr_class_clear.aspenter link description here
I have two divs with:
width:100%; height:100%
so my whole document has an height of 200%;
both div`s have an link to each other,
now when i click on the link, i want that the site smoothly slides to the other div,
I know how this would work in jquery , for example with .scrollto, but my client wants an app wihout frameworks. Only javascricpt and css!
I tried to achive it with translateY, but it didnt worked!
Here is an exemplary code:
http://jsfiddle.net/hSU7R/
The HTML
<div class="full" id="one">
<span style="width:100%; background-color:blue">
<a href="#two" >Scroll to 2</a>
</span>
</div>
<div class="full" id="two">
<span style="width:100%; background-color:blue">
<a href="#one" >Scroll to 1</a></span>
</div>
The CSS
html,body {
width:100%;
height:100%;}
.full {
height:100%;
width:100%;}
#one {background-color:green}
#two {background-color:red}
Is this what you're looking for? A fork of your jsFiddle.
There has to be a smarter way to do this, but that's why we have jQuery right? My basic idea was to grab each anchor and turn off the default click response. Then, replace it with one that starts a setInterval chain. Each time the interval transpires, the window will incrementally scroll based on a frame rate and an estimated total run time. The actual run-time seems to take longer than the input time, but it at least gives you a way to get started.
What is the main disadvantage to using jQuery? I would think you'd get better performance from their implementation, since the jQuery people work on this stuff all the time.
You can control the scroll (speed, direction, position(?)) behavior with css.
CSS3 transitions enables to specify the way an element will go from a state to another while scroling is not an element. But you can position the body.
There is 'scroll-snap-points' wich might relate.
A CSS technique that allows customizable scrolling experiences like
pagination of carousels by setting defined snap points.
jsfiddled example
CSS
.gallery {
font-size: 0;
margin: auto;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-points-x: repeat(1000px);
scroll-snap-type: mandatory;
white-space: nowrap;
width: 1000px;
}
img {
width: 100%;
}
HTML
<div class="gallery">
<img alt="" src="http://treehouse-codepen.s3.amazonaws.com/snap-points/1.jpg">
<img alt="" src="http://treehouse-codepen.s3.amazonaws.com/snap-points/2.jpg">
<img alt="" src="http://treehouse-codepen.s3.amazonaws.com/snap-points/3.jpg">
<img alt="" src="http://treehouse-codepen.s3.amazonaws.com/snap-points/4.jpg">
</div>