I am using enquire.js to set my RoyalSlider's height dynamically to the height of the element right next to it. This is working in Firefox, but in Safari on load, the height of the slider is the minimal height possible (so the height of the arrows). Only after I resize the window, the correct height is adapted.
enquire.register("screen and (max-width: 53.999em)", {
match : function() {
$('.slide').css('height', "10em");
}
}).register("screen and (min-width: 54em)", {
match : function() {
var height = $('.one:first').outerHeight(true) * 2;
$('.slide').css('height', height);
window.onresize = function() {
var height = $('.one:first').outerHeight(true) * 2;
$('.slide').css('height', height);
}
},
unmatch : function() {
$('.slide').css('height', "10em");
}
});
I tried to set a static height in CSS for the inital load, but the style is not adapted.
Got it working now with a solution just using CSS :)
See this: https://stackoverflow.com/a/6615994/1478344
HTML:
<div id="slide-container">
<div id="slide">
SLIDE
</div>
</div>
CSS:
#slide-container
{
display: inline-block;
position: relative;
width: 66.666%;
}
#gallery-container:after
{
content: '';
display: block;
margin-top: 30.333%;
margin-top: -moz-calc( 33.333333% - 1.111111em ); /* because of some padding things */
margin-top: -webkit-calc( 33.333333% - 1.111111em ));
margin-top: calc( 33.333333% - 1.111111em );
}
#slide {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: silver /* show me! */
}
Though for the future I don't know why it didn't work …
Related
I have problem with Safari. Gives me wrong height property after using a .height() function. Only this one browser works wrong, others gets me correct height.
HTML + CSS:
.col-header-content {
width: 100%;
position: absolute;
top: 50%;
color: #fff;
text-align: center;
}
<div class="cat-col-wrapper">
<div class="cat-col-header">
<div class="col-header-content">
/* next content DOM with
width: 100%;
position: relative
float: left;
*/
</div>
</div>
</div>
JS FILE:
(function($) {
$(window).load(function(e) {
_E.Controller();
}
_E = {
Controller: function() {
$('.cat-col-wrapper').each(function(index, el) {
var headerContent = $(this).find('.col-header-content');
console.log(headerContent.height());
}
}
}
}(window.jQuery));
When real height of element is 185px, Safari gives me 584px.
.cat-col-header had a css transform property on .3s and when page was loading script first calculate height and then make transform to correct css width.
Example solution:
JS:
$(window).load(function(e) {
$('body').addClass('loaded');
});
$(document).ready(function(e) {
/* count what you want and watch out on Safari browser */
});
CSS:
body.loaded .cat-col-header {
transition: .3s;
}
What I'd like to do is animate a small image as well as a div (or an image within a div) from the right to the left of the screen, repeating once the image/div leaves the screen.
I found an example online that moves an image/div from left to right, but not all the way to the other side of the screen, and I am struggling to make it from right to left.
Here's what I have been doing
function moveTruck() {
$("#ImageToMove").animate({
"margin-right": "5000px"
}, 3000, function () { $("#ImageToMove").css("margin-right", "10000"); moveTruck(); });
}
moveTruck();
Playing with the margin-right values. My CSS class is:
.HomeImageAnimate{
position:absolute;
margin-top:80px;
right:1000px;
}
Try setting , animating left property using values of window.innerWidth , container element width
(function fx(el) {
$(el).css("left", window.innerWidth)
.animate({
left: "-" + (window.innerWidth - $(el).width() * 2)
}, 3000, "linear", function() {
fx(this)
})
}($("div")))
body {
overflow: hidden;
}
div {
width: 50px;
height: 50px;
position: absolute;
}
img {
background: gold;
width: 50px;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div>
<img />
</div>
Try this out, this truck div repeatedly goes from right to left.
HTML:
<div class="truck"></div>
CSS:
body{
background: green;
overflow: hidden;
}
.truck {
margin-top:20px;
width: 272px;
height: 174px;
cursor:pointer;
position: absolute;
margin-right: -150px;
z-index: 3;
background: red;
border-radius:4px;
width:200px;
height:50px;
}
JS:
$(function() {
var moveTruck = function(){
$(".truck").delay(2000).animate( {'right': '120%' }, 5000,'linear',function(){
$(this).css({'right': '-50px'});
moveTruck();
});
}
moveTruck();
})
CODEPEN DEMO
function move(){
width = $(window).width();
objectWidth = $('#demo').width();
margin = width + objectWidth + 'px';
restart = -100 - objectWidth + 'px';
$('#demo').animate({
'margin-left': margin
}, 3000, function(){
$('#demo').css('margin-left', restart);
move();
});
}
move();
Try this out, it calculates the exact width of object and window - should always work no matter the screen size. You were trying to use an absolute pixel value, won't always work.
https://jsfiddle.net/w9pgmm9d/3/
I have grid like this and my sidebar take 4 of 12 col near to 33.3% and my sidebar is parent element
$susy: (
columns : 12,
gutters : 1/1.618033989/1.618033989/1.618033989,
math : fluid,
output : float,
gutter-position : inside,
);
#include border-box-sizing;
.sidebar {
height: 100vh;
#include span(4);
}
and I have div tag in my side bar and width of child is 100% of parent, now I want height of child be width of parent*number
I have tried some thing like this
width: 33.3333vw;
height:20.601112354vw;
but that work when we are out of grid when there is no parent element
and I have tried this
#container {
display: inline-block;
position: relative;
width: 50%;
}
#dummy {
margin-top: 75%; /* 4:3 aspect ratio */
}
#element {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: silver /* show me! */
}
but there is many bugs in this method like you put 2 or more div tag in child and working with this should be full of tricks
I want some method that simply get width of parent and multiply that and make that height of child element.so when we resizing browser when width of parent get change -> height of child get change
var width = $('.child').width();
var parentWidth = $('.sidebar').width();
var ratio = parentWidth/1.618033989;
$(".child").height(ratio);
$( window ).resize(function() {
var width = $('.child').width();
var parentWidth = $('.sidebar').width();
var ratio = parentWidth/1.618033989;
$(".child").height(ratio);
Im trying to set different 'margin-top' values to the '.copy' based on screen width. Think it will need to be set with JS variables but open to hear the best solution.
Hover blue block to see js effect
Existing example:
JS Fiddle
JS
$('.thumb').hover(function () { //Frame 2
$('.copy').animate({'margin-top':'80px'});
}, function () { //Frame 3
$('.copy').animate({'margin-top':'140px'});
});
Ideally I would like to set a margin-top for screen widths, >768px, >1024px, + 1281px
You can do this purely with CSS using media queries and transitions. No JS needed. http://jsfiddle.net/h6dT2/2/
.thumb {
background: blue;
position: absolute;
height: 200px;
width: 100%;
}
.copy {
margin: 0 auto;
margin-top: 140px;
opacity: 0;
width: 200px;
-webkit-transition: .5s all ease;
}
.thumb:hover .copy {
margin-top: 80px;
opacity: 1;
}
body {
margin: 0px;
color: #fff;
}
#media (max-width: 1024px) {
.copy {
margin-top: 20px;
}
}
This doesn't solve every part of your problem, but it gives you a good idea of where to go.
Did you mean screen height or screen width?
if you want to do height, you could just use a percentage value like:
'margin-top': '25%'
That will adjust to the height.
If you want to do a calculation based on width you'll need to call the width() method on the window
$(window).width();
So you could say:
var width = $(window).width();
'margin-top': width
To get more with your example of certain screen widths, you could do something like:
var windowWidth = $(window).width();
var margin= 0; //default value
if(windowWidth > 1281) {
margin = 100;
}
else if(windowWidth > 1024) {
margin = 75;
}
else if (windowWidth > 768) {
margin = 50;
}
else margin = 25;
then in your JQuery you could say:
$('.thumb').hover(function () { //Frame 2
$('.copy').animate({'margin-top':margin});
}, function () { //Frame 3
$('.copy').animate({'margin-top': (margin+60) }); //or whatever calculation you want to do for the other value, it's up to you.
});
I've a sticked element which gets the top-alignment from current scroll-offset. Problem is, that the layout is not "retriggerd" if the space from it is free. So there stays a ghost-gap where the sticked element was...
http://fiddle.jshell.net/pPc4V/
The markup is pretty simple:
...
as well as the js:
var $win = $(this);
var sticked = document.querySelector('a.sticked');
$win.on('scroll', function () {
var scrollTop = $win.scrollTop();
sticked.style.top = scrollTop + 'px';
// $win.resize();
});
...and the css looks good so far:
a {
display: inline-block;
width: 90px;
height: 90px;
background: deepskyblue;
}
.sticked {
position: relative;
top: 0;
left: 0;
background: tomato;
}
I tried to trigger the resize-event on scroll (as you see above uncommented), but no success! Any ideas, how to retrigger the layout so that the free-gap is filled with the next floated element?
Update
To clarify what I mean I made a simple image-timelime:
Step 1
Step 2
Step 3
The issue is that you are setting position fixed on an element which is displayed inline. That will cause that space to occur. I have redid your jsFiddle with proper alignment.
To fix it, I added the class "stuck" only when the document's scrollTop position is greater than the scrollTop position of your target element.
jsFiddle: http://fiddle.jshell.net/pPc4V/44/
HMTL:
<div id="grid">
etc...
</div>
CSS:
#grid {
height:1000px;
overflow:hidden;
float:left
}
#grid > a {
display: inline-block;
width: 90px;
height: 90px;
background: deepskyblue;
}
.stuck {
position: fixed;
background: navy !important;
}
JS:
$(window).on('scroll', function () {
var $doc = $(document),
parentElement = $('#grid'),
childToGetStuck = parentElement.find('a:nth-child(5)');
if ($doc.scrollTop() > childToGetStuck.scrollTop()) {
childToGetStuck.addClass('stuck');
//console.log($('.stuck').scrollTop())
} else {
childToGetStuck.removeClass('stuck');
}
});