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>
Related
As you can see above, I cannot select the overflowed events on the calendar date. It looks like it's because I have the overflow:hidden/visible toggle triggering on the class of the calendar date: '#cell-shell'.
Here is the HTML code for that specific date:
<td>
<div id="09" class="cell-shell>
<div class="date-num">9</div>
<div class="event-wrap>
<span></span> <!--these hold edit buttons when editor is logged in-->
<span></span>
<div id="e1" class="cell-data">Event 1</div>
</div>
<div class="event-wrap>
<span></span>
<span></span>
<div id="e2" class="cell-data">Event 2</div>
</div>
<div class="event-wrap>
<span></span>
<span></span>
<div id="e3" class="cell-data">Event 3</div>
</div>
<div class="event-wrap>
<span></span>
<span></span>
<div id="e4" class="cell-data">Event 4</div>
</div>
... <!-- pattern repeats-->
</div>
</td>
Here is my current relevant CSS:
.cell-shell {
height: 152px;
width: 152px;
overflow: hidden;
}
.cell-shell:hover {
overflow:visible;
}
.event-wrap {
position: relative;
display: inline-block;
font-size: 0;
}
.event-wrap:hover {
opacity: .5;
}
Is there any way through CSS or JS that I can prioritize the '#cell-data' elements? I need to be able to click on those events 6 & 7 and beyond, but once my mouse wanders out of the '9' '.cell-shell' box into the '16' '.cell-shell' box, '16' seems to take over.
EDIT: I added more information as requested by david. I thought it was irrelevant but perhaps not. I added the elements as well as the children below them. I also added in the event-wrap CSS
It looks like it's not because you mouse over 16, but because your mouse went between the event divs, thereby touching the 16 div between the event divs.
See the frame below where you're over an event on top of 16 just before you cross the gap:
The way that hover works is that if the mouse is over any sub-element of the element with hover, that hover CSS will continue to be used. But the moment the mouse leaves the border-box of the sub-element AND is outside of the element with over, the hover CSS will stop working.
I bet that if you're fast and accurate enough, you can get the mouse to clip over the gap between frames and keep it open. But your users might not find that useful. ;P
One method that might fix this would be making sure that the event divs have no space between them. That means no margins separating them.
In order to keep your current visual without having to add too much code, you can do something like the following:
...
<div class="event-wrapper"><div id="e1" class="cell-data">Event 1</div></div>
<div class="event-wrapper"><div id="e2" class="cell-data">Event 2</div></div>
...
...where the event-wrapper class looks like:
.event-wrapper {
margin: 0px;
padding: 0px;
}
Another method might be having the whole date box expand its size, but that might require some changes to how the layout works in order to keep it from messing things up.
Anyway, I hope that helps.
Use z-index to give priority to your cell-data elements over '16'.
Find a sample demo of it's usage below:
https://www.w3schools.com/cssref/pr_pos_z-index.asp
Add CSS property z-index: -1 into your css.
.cell-shell {
height: 152px;
width: 152px;
overflow: hidden;
z-index: -1 // Here
}
.cell-shell:hover {
overflow:visible;
z-index: -1 //Here
}
Hope it will work for you.
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.
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>
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
Let's say I have something like below:
<div id="outer">
<img src="my_first_image.gif" alt="My first image" />
<div id="inner_div">Some text here...</div> <img src="my_second_image.gif" alt="My second image" />
</div>
My inner_div contains some texts. How do I make it so that I not only display my first image, my inner div and my second image next to one another and also make sure that the total width of my outer div expand to take the full width of the browser window (with my elements still displayed one next to each other no matter how long the text in my inner div becomes). Is this possible with just straight css or am I gonna need some jQuery to do that?
NOTE : The elements must also be vertically centered with regards to each other and within the outer div
Thank you
Actually, for the web standard, you shouldn't place <div> next to <img> or <img> next to <div>.
The solution to your question is to wrap all contents within #outer, say each item wrapped up in a tag, then applied some CSS to them (like float: left).
For example,
<div id="outer">
<div class="inner"><img src=".."/></div>
<div class="inner"><img src=".."/></div>
<div class="inner">some very long text</div>
</div>
Which
<style type="text/css">
.inner {
float: left;
}
</style>
If you also want it to vertically centered to outer, your css would be like this.
<style type="text/css">
#outer {
display: table;
}
.inner {
display: table-cell;
vertical-align: middle;
}
</style>
There are more approach to this, but I think this is the easiest one.
Hope this helps.
I think this is what you want, if I understand you correctly?
<style>
#outer #inner_div{float:left;}
#outer img{clear:left;}
</style>
Try this
CSS
#outer{
width:100%;
}
#outer div, #outer img{
width:33%;
display:inline-block;
vertical-align:middle;
text-align:center;
}
HTML
<div id="outer">
<img src="my_first_image.gif" alt="My first image" />
<div id="inner_div">Some text here...</div>
<img src="my_second_image.gif" alt="My second image" />
</div>
Need some cross-old-browser work for inline-block, but you get the idea.
Presto http://jsfiddle.net/EPpAn/
I expect this is what you want: http://jsfiddle.net/linmic/CCut8/
Cheers