I've been working on a new layout here: http://meaaas.tumblr.com/ it's a completely horrizontal layout, meaning it completely scrolls from side to side instead of up and down. Is there any possible way to use the current code i have to make it so that the posts would align to the vertical center instead of just being aligned to the top?
Easiest way to do it would be to write a quick little Jquery script:
var contain = $('#posts').height();
$('.post').each(function(){
var spacing = (contain - $(this).height());
var top = spacing/2;
$(this).css('margin-top', top);
});
UPDATE
Include this at the bottom of the page, before the 'BEGIN TUBMLR CODE' tag:
<script type="text/javascript">
$(document).ready(function(){
var contain = $('#posts').height();
$('.post').each(function(){
var spacing = (contain - $(this).height());
var top = spacing/2;
$(this).css('margin-top', top);
});
});
</script>
This is something notoriously tricky to do. This Article has a few suggestions, each with Pros and Cons.
If you're willing to add some javascript, that might be the simplest thing to understand. Just write some code that checks the size of the window and calculates what the top-margin should be. You could also add a resize function so that the margin is recalculated when the window size is changed (use the window.onresize event)
UPDATE here's some very naive javascript:
function verticallyCenter(elementID){
var windowheight = document.documentElement.clientHeight;
document.getElementById(elementID).style.marginTop = windowheight / 4;
}
Add that into a <script> block in the <head> of the page and then add onload="verticallyCenter(elementID)" to the <body> tag. You'll need to replace elementID with the ID of the div you want to center. You probably also want to account for the height of the content better than just using a quarter of the page height.
Related
I have a carousel (Owl Carousel) with vertically centered controls. Because of the structure, I have to absolutely position the previous and next arrow. Because the page is responsive, their position is dynamic. The size of the controls may also change.
I've written a function that runs on load and resize. It gets the height of the image and the height of the controls, subtracts the latter from the former, divides by two, and then uses that number as the controls' margin-top.
It works, but I'm questioning if I'm getting and using all the variables correctly. Does JavaScript read in order? Where it runs the first line, then the next, then the next... I'm strong in CSS but JS has always been a crutch.
Can I write this more efficiently?
function centerCarouselControls() {
var carouselImage = $('.carousel-card > img');
var carouselControls = $('.owl-nav > div');
var carouselHeight = carouselImage.outerHeight();
var controlHeight = carouselControls.outerHeight();
var controlMargin = (carouselHeight - controlHeight) / 2;
carouselControls.css('margin-top', controlMargin);
}
$('.carousel-card > img').load(centerCarouselControls);
$(window).on('resize', centerCarouselControls);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I feel like this might be the type of question that gets flagged on here for not being specific enough. If that's the case, could someone please point me to a community where this would be more appropriate? Thanks!
In some browsers your code works like firefox 51, but it is more complete code this:
carouselControls.css('margin-top', controlMargin + 'px');
I currently have a 'widget' div which has a static height, within it is an image which also has a static height. The only thing that can have a dynamic height is the title which can change from 1-3 lines long.
What's happening is that I'm trying to make the description within the div (which can be quite long) ellipsis before the containing div ends, taking into account the title which can vary in height.
I'm using a jQuery plugin called dotdotdot which docs can be found here http://dotdotdot.frebsite.nl/
The plugin is working but I think my JS might be off a bit. Would love some help as I just can't get my brain around it.
Fiddle Here
You can see it clearly on the fiddle but JS below.
$(document).ready(function () {
$(".caption").each(function () {
var authorheight = $('.meta').height();
var h2height = $('h4').height();
$(".desc").height(250 - h2height - authorheight);
$(".desc").dotdotdot({
after: "a.readmore"
});
});
});
Any help would be brilliant!
Thanks
You were doing everything right except for calculating the Height.
var authorheight = $('.meta').innerHeight();
var h2height = $('h4').innerHeight();
the above help you get the height along with the padding and everything.
Then next id you left padding which you have applied to .caption so your
height for .desc becomes as below
$(".desc").height(250 - h2height - authorheight -40);
UpdatedFiddle
How can I set up 2 html div tags, one float left (actually containing the Google Earth Plugin), one float right (initially hidden)?
The content of the right div will be dynamically populated with a number of different dialogs and then made visible. Once visible it's width can expand further.
I need the left div to shrink to accommodate the right div when ever the right div toggles from invisible to visible or whenever it's width adjusts.
Just adjust the width of your left div with some javascript?
Depending on your layout you can use % or px or whatever you prefer.
Here´s a really simple example showing how to do it with a percentage based layout:
HTML
<div class="l">LEFT</div>
<div clasS="r">RIGHT</div>
<br>
<a>TOGGLE R</a>
JS
(function($) {
var visible = false;
$("a").click(function(event) {
event.preventDefault();
$("div.r").toggle();
$("div.l").css("width", 50+(visible*50)+"%");
visible = !visible;
});
})(jQuery);
Try it out in the fiddle here: http://jsfiddle.net/ZbzL5/
Here an example:
You have to make an event when the new div is get visible and change the width of the left div.
JS:
$(function(){
$("button").click(function(){
var precSize = $("#width_input").val();
var parentWidth = $(".wrapper").width();
var leftOldSize = $(".left").width();
var newSize = parentWidth * ( (100 - parseInt(precSize)) / 100);
$(".left").width(newSize);
$(".right").width( $(".right").width() + (leftOldSize - newSize));
});
});
jsFiddle
basically to make google earth aware that div size changed you need
google.maps.event.trigger(map, "resize");
reference : so g map resize
But in your scenarion you can also trigger the abovein the resize event of the right div using jquery. $('div').bind('resize', function(){})
I'm using JQuery and learning as I go, I was just curious is there a way to have a DOMwindow auto resize to its content?
I managed to figure out how to change the parameters to take % width and height instead of px but I'm finding that a dynamic resizing view would utilize my site's purpose better.
Should I be looking into a different type of code to accomplish this?
If you had a containing wrap element, which holds all of the content, and is not set to 100%:
<div id="main_container">
// page contents
</div>
You could now get the dimensions of the containing element and then resize your window to suit.
In jQuery:
$(document).ready(function() {
var myElement = $('#main_container');
var sWidth = myElement.width();
var sHeight = myElement.height();
window.resizeTo(sWidth, sHeight);
})
There are other ways of doing this, if you search thoroughly on this website, you will find your answer. You can use (document).width() and (window).width(), as this answer describes: jQuery(document).width() doesn't include width outside of viewable area
Here's what i have so far:
function loadOff(){
$(document).ready(function(){
$("#eLoader").ajaxStop(function(){
$(this).hide();
$("#eventsContent").show();
var h = document.body.scrollHeight;
$("#bodyBackground").css("height",h+100+"px");
$("#sidePanel1").css("height",h-105+100+"px");
$("#bottom").css("top",h+100+"px");
});
});
}
This is a callback function for a JQuery ajax function, basically what is does is when all ajax is finished .ajaxStop() it hides the loader then shows the content.
The problem i am having is adjusting bodyBackground, sidePanel, and bottom to fit the content. I dont care to have it elastic and retract for short content at this point, i would just like it to extend to proper positioning based on content length.
All divs are absolutely positioned. The numbers in the function are broken down simply to make it easy to explain. -105 is the offsetTop of that element and +100 is the margin between the end of the content and the elements.
if there is a better, more efficient way to achieve this outcome, please, do tell.
Thanks.
Based on your code, the only thing you ought to see is the top 105px of #sidePanel1. Is that your intent? (h = the bottom of the window, according to your code.)
Sticking with the JQuery patterns, you would use
var h = $(window).height();
Maybe you're looking for this instead of the browser window's height? It will get the height of the content element.
$("#eventsContent").outerHeight();