Home › Forums › JavaScript › Make my minum height smaller and no scroll bar
- This topic is empty.
-
AuthorPosts
-
December 3, 2014 at 3:46 pm #189881
geedi
ParticipantSite Persistest.nl Wordpres 4
HI i wanna reset my minum heigt change this code
“ttr_content_and_sidebar_container”style=”min-height: 520px;”in to
“ttr_content_and_sidebar_container”style=”min-height: 20px;”it is possible to this with inspect element of mozilla but i cant find the filles exept this javascript note
<script type=”text/javascript”>
jQuery(document).ready(function(){
var window_height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
var body_height = jQuery(document.body).height();
var content = jQuery(“#ttr_content_and_sidebar_container”);
if(body_height < window_height){
differ = (window_height – body_height);
content_height = content.height() + differ;
jQuery(“#ttr_content_and_sidebar_container”).css(“min-height”, content_height+”px”);
}
});
</script>December 3, 2014 at 4:51 pm #189883Shikkediel
ParticipantLooks like it is only 520px because you don’t have any or much content on the page yet. It will become smaller otherwise. To change it directly, you could do this :
Query(“#ttr_content_and_sidebar_container”).css(“min-height”, ”20px”);
December 3, 2014 at 7:59 pm #189887ParticipantThe script looks quite functional to create a full window layout, even though I suspect it was written by someone that didn’t have a whole lot of experience with jQuery and the fact that it would be better to also use it on window resize.
What I can’t figure out though is why it seems to add extra pixels, making the scrollbar appear.
Edit – I think it’s adding the height of the address bar…
You could try changing this :
var window_height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
into this :
var window_height = $(window).height();
December 4, 2014 at 11:45 am #189953ParticipantHI i have tried both of your answers to my quistion it does,nt work 100 procent if i do this it makes the slider to big and it sticks out to the left and a white area below the footer . so what can i do to fix this.
below is the full code file .December 4, 2014 at 11:47 am #189954Participant<!DOCTYPE html>
<!–[if IE 6]>
<html id=”ie6″ <?php language_attributes(); ?>>
<![endif]–>
<!–[if IE 7]>
<html id=”ie7″ <?php language_attributes(); ?>>
<![endif]–>
<!–[if IE 8]>
<html id=”ie8″ <?php language_attributes(); ?>>
<![endif]–>
<!–[if !(IE 6) | !(IE 7) | !(IE 8) ]><!–>
<html <?php language_attributes(); ?>>
<!–<![endif]–>
<head>
<?php wp_head(); ?>
<meta charset=”<?php bloginfo( ‘charset’ ); ?>”>
<meta name=”viewport” content=”width=device-width”>
<meta name=”description” content=”Add the site description here” />
<meta name=”keywords” content=”First keyword, second keyword,” />
<?php $theme_path = get_template_directory_uri(); ?>
<script type=”text/javascript”>
jQuery(document).ready(function(){
var inputs = document.getElementsByTagName(‘input’);
for (a = 0; a < inputs.length; a++) {
if (inputs[a].type == “checkbox”) {
var id = inputs[a].getAttribute(“id”);
if (id==null){
id= “checkbox” +a;
}
inputs[a].setAttribute(“id”,id);
var container = document.createElement(‘div’);
container.setAttribute(“class”, “ttr_checkbox”);
var label = document.createElement(‘label’);
label.setAttribute(“for”, id);
jQuery(inputs[a]).wrap(container).after(label);
}
}
});
</script>
<script type=”text/javascript”>
jQuery(document).ready(function(){
var inputs = document.getElementsByTagName(‘input’);
for (a = 0; a < inputs.length; a++) {
if (inputs[a].type == “radio”) {
var id = inputs[a].getAttribute(“id”);
if (id==null){
id= “radio” +a;
}
inputs[a].setAttribute(“id”,id);
var container = document.createElement(‘div’);
container.setAttribute(“class”, “ttr_radio”);
var label = document.createElement(‘label’);
label.setAttribute(“for”, id);
jQuery(inputs[a]).wrap(container).after(label);
}
}
});
</script>
<script type=”text/javascript” src=”<?php echo $theme_path?>/html5shiv.js”>
</script>
<script type=”text/javascript”>
jQuery(document).ready(function(){
var window_height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
var body_height = jQuery(document.body).height();
var content = jQuery(“#ttr_content_and_sidebar_container”);
if(body_height < window_height){
differ = (window_height – body_height);
content_height = content.height() + differ;
jQuery(“#ttr_content_and_sidebar_container”).css(“min-height”, content_height+”px”);
}
});
</script>
<title>
<?php
global $page, $paged;
wp_title( ‘|’, true, ‘right’ );
bloginfo( ‘name’ );
$site_description = get_bloginfo( ‘description’, ‘display’ );
if ( $site_description && ( is_home() || is_front_page() ) )
echo ” | $site_description”;
if ( $paged >= 2 || $page >= 2 )
echo ‘ | ‘ . sprintf( __( ‘Page %s’, CURRENT_THEME ), max( $paged, $page ) );
?>
</title>
<link rel=”stylesheet” href=”<?php bloginfo( ‘stylesheet_url’ ); ?>” type=”text/css” media=”screen”/>
<!–[if lte IE 8]>
<link rel=”stylesheet” href=”<?php echo get_template_directory_uri() ?>/menuie.css” type=”text/css” media=”screen”/>
<link rel=”stylesheet” href=”<?php echo get_template_directory_uri() ?>/vmenuie.css” type=”text/css” media=”screen”/>
<![endif]–>
<script type=”text/javascript” src=”<?php echo $theme_path?>/prefixfree.min.js”>
</script>
<!–[if IE 7]>
<style type=”text/css” media=”screen”>
#ttr_vmenu_items li.ttr_vmenu_items_parent {display:inline;}
</style>
<![endif]–>
<?php if (get_option(‘ttr_custom_style’)):?>
<style>
<?php $custom_style = get_option(‘ttr_custom_style’);
echo $custom_style;?>
</style>
<?php endif;?>
</head>
<body <?php body_class(); ?>>
<?php if(isset($_POST[‘wp_customize’]) && $_POST[‘wp_customize’]==’on’):?>
<input type=”image” alt=”Back to Top” src=”<?php echo get_template_directory_uri().’/images/gototop.png’;?>”/>
<?php else:?>
<?php if(get_option(‘ttr_back_to_top’,true)): ?>
<input type=”image” alt=”Back to Top” src=”<?php echo get_option(‘ttr_icon_back_to_top’,get_template_directory_uri().’/images/gototop.png’);?>”/>
<?php endif; ?>
<?php endif; ?><
div>
<?php
if( is_active_sidebar( ‘headerabovecolumn1’ ) || is_active_sidebar( ‘headerabovecolumn2’ ) || is_active_sidebar( ‘headerabovecolumn3’ ) || is_active_sidebar( ‘headerabovecolumn4’ )):
?><?php if ( is_active_sidebar(‘headerabovecolumn1’) ) : ?><?php theme_dynamic_sidebar( ‘HAWidgetArea00’); ?><?php else: ?>
<?php endif; ?>
<?php if ( is_active_sidebar(‘headerabovecolumn2’) ) : ?><?php theme_dynamic_sidebar( ‘HAWidgetArea01’); ?><?php else: ?>
<?php endif; ?>
<?php if ( is_active_sidebar(‘headerabovecolumn3’) ) : ?><?php theme_dynamic_sidebar( ‘HAWidgetArea02’); ?><?php else: ?>
<?php endif; ?>
<?php if ( is_active_sidebar(‘headerabovecolumn4’) ) : ?><?php theme_dynamic_sidebar( ‘HAWidgetArea03’); ?><?php else: ?>
<?php endif; ?>
<?php endif; ?>
<?php $var = get_post_meta ( $post->ID, ‘ttr_page_head_checkbox’, true );
if ($var == “true” || $var == “”):?>
<header id=”ttr_header”></header>
<?php endif; ?><?php
if( is_active_sidebar( ‘headerbelowcolumn1’ ) || is_active_sidebar( ‘headerbelowcolumn2’ ) || is_active_sidebar( ‘headerbelowcolumn3’ ) || is_active_sidebar( ‘headerbelowcolumn4’ )):
?><?php if ( is_active_sidebar(‘headerbelowcolumn1’) ) : ?><?php theme_dynamic_sidebar( ‘HBWidgetArea00’); ?><?php else: ?>
<?php endif; ?>
<?php if ( is_active_sidebar(‘headerbelowcolumn2’) ) : ?><?php theme_dynamic_sidebar( ‘HBWidgetArea01’); ?><?php else: ?>
<?php endif; ?>
<?php if ( is_active_sidebar(‘headerbelowcolumn3’) ) : ?><?php theme_dynamic_sidebar( ‘HBWidgetArea02’); ?><?php else: ?>
<?php endif; ?>
<?php if ( is_active_sidebar(‘headerbelowcolumn4’) ) : ?><?php theme_dynamic_sidebar( ‘HBWidgetArea03’); ?><?php else: ?>
<?php endif; ?>
<?php endif; ?>
<?php
if( is_active_sidebar( ‘menuabovecolumn1’ ) || is_active_sidebar( ‘menuabovecolumn2’ ) || is_active_sidebar( ‘menuabovecolumn3’ ) || is_active_sidebar( ‘menuabovecolumn4’ )):
?><?php if ( is_active_sidebar(‘menuabovecolumn1’) ) : ?><?php theme_dynamic_sidebar( ‘MAWidgetArea00’); ?><?php else: ?>
<?php endif; ?>
<?php if ( is_active_sidebar(‘menuabovecolumn2’) ) : ?><?php theme_dynamic_sidebar( ‘MAWidgetArea01’); ?><?php else: ?>
<?php endif; ?>
<?php if ( is_active_sidebar(‘menuabovecolumn3’) ) : ?><?php theme_dynamic_sidebar( ‘MAWidgetArea02’); ?><?php else: ?>
<?php endif; ?>
<?php if ( is_active_sidebar(‘menuabovecolumn4’) ) : ?><?php theme_dynamic_sidebar( ‘MAWidgetArea03’); ?><?php else: ?>
<?php endif; ?>
<?php endif; ?>
<nav id=”ttr_menu”>
<h3 class=”menu-toggle”><?php _e(‘Menu’,CURRENT_THEME); ?></h3><ul class=”ttr_menu_items”>
<?php echo theme_nav_menu(‘ttr_’,’primary’,’menu’,False);?></nav>
<?php
if( is_active_sidebar( ‘menubelowcolumn1’ ) || is_active_sidebar( ‘menubelowcolumn2’ ) || is_active_sidebar( ‘menubelowcolumn3’ ) || is_active_sidebar( ‘menubelowcolumn4’ )):
?><?php if ( is_active_sidebar(‘menubelowcolumn1’) ) : ?><?php theme_dynamic_sidebar( ‘MBWidgetArea00’); ?><?php else: ?>
<?php endif; ?>
<?php if ( is_active_sidebar(‘menubelowcolumn2’) ) : ?><?php theme_dynamic_sidebar( ‘MBWidgetArea01’); ?><?php else: ?>
<?php endif; ?>
<?php if ( is_active_sidebar(‘menubelowcolumn3’) ) : ?><?php theme_dynamic_sidebar( ‘MBWidgetArea02’); ?><?php else: ?>
<?php endif; ?>
<?php if ( is_active_sidebar(‘menubelowcolumn4’) ) : ?><?php theme_dynamic_sidebar( ‘MBWidgetArea03’); ?><?php else: ?>
<?php endif; ?>
<?php endif; ?>
December 4, 2014 at 12:04 pm #189955ParticipantI think that code above might be removed by the mods but it can be seen by visiting the page of course. First of all – I noticed a typo in my original post. It says ‘Query’, missing the j in front. Since that variable (var content) was defined earlier in the script, you could also write it like this :
content.css(“min-height”, ”20px”);
Which I think was your original question. This doesn’t really do much though, other than remove the ‘automatic’ rendering of a full screen layout. So it will leave the footer hanging around. I’ll have another look at that specific piece of code to see where it might be miscalculating the needed height.
December 4, 2014 at 12:26 pm #189956Participantso change jQuery(“#ttr_content_and_sidebar_container”).css(“min-height”, content_height+”px”);
that into content.css(“min-height”, ”20px”);
December 4, 2014 at 2:00 pm #189958ParticipantIndeed, but all this does is make the minimum height of your total content 20px. This will in practice make the script itself useless.
Looking at the code, it should normally ‘fill up’ the screen when the content is smaller than the size of the screen itself. But for some reason it is adding around 41px too many, for which I haven’t found the cause (yet).
If you would like a full screen layout like it’s intended to do, you can also use this instead :
<script type=”text/javascript”>
$(document).ready(function() {
var w_height = $(window).height();
var b_height = $(document).height();
var content = $(‘#ttr_content_and_sidebar_container’);
if (b_height < w_height) {
differ = (w_height – b_height);
content_height = content.height() + differ – 41;
content.css(‘height’, content_height);
}
});
</script>Note how at the end the difference in height is just subtracted, this should make the scrollbar disappear. Not a great solution, better would be to find to origin of the miscalculation. For the rest it’s really the same script.
December 4, 2014 at 3:44 pm #189962ParticipantThats the problem this is where it lead me to as the source problem but i cant find it anywhere else would u mind if i send u an email with all the template files that i have right now and the plugin that is used on home.
December 4, 2014 at 4:55 pm #189965ParticipantTo be honest, I’m not too familiar with WordPress so trying to debug will be a bit like walking through a maze of scripts and stylesheets.
One more thing I can think of though is that some element gets hidden after the script is triggered. Might be worth giving this a try as well :jQuery(window).on(‘load’, function() {
var w_height = jQuery(window).height();
var b_height = jQuery(document).height();
var content = jQuery(‘#ttr_content_and_sidebar_container’);
if (b_height < w_height) {
differ = (w_height – b_height);
content_height = content.height() + differ;
content.css(‘height’, content_height);
}
});I’ve changed the ‘$’ I was using back to ‘jQuery’ as you can see, it must be plugged into some older or alternative version where my regular coding doesn’t work.
I’ll try to analyse a bit more with Firebug…
And it’s 42 pixels too many by the way (not 41).December 4, 2014 at 5:57 pm #189968ParticipantSorry for the elaborate posts, next time I’ll test first and then update. Looked easy enough beforehand.
Ran this is firebug and it seems to do the job :jQuery(document).ready(function() { var w_height = jQuery(window).height(); var b_height = jQuery(document.body).height(); var differ = w_height-b_height; var c_height = jQuery('#ttr_content_and_sidebar_container').height(); if (b_height < w_height) { jQuery('#ttr_content_and_sidebar_container').css('height', c_height+differ); } });If it’s still not correct, then something is definitely being hidden in between document ready and window onload.
December 4, 2014 at 7:08 pm #189970ParticipantSo I’m not going loco after all…
Wrecking my brain over the original code that was posted.
And figured out that in this part :differ = (window_height – body_height);… the minus isn’t really a minus – it’s a dash. x-p
December 5, 2014 at 11:13 am #190020ParticipantThis is the code u gave me last time. Go on my set persistes.nl
jQuery(document).ready(function(){ var window_height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0); var body_height = jQuery(document.body).height(); var content = jQuery("#ttr_content_and_sidebar_container"); if(body_height < window_height){ differ = (window_height - body_height); content_height = content.height() + differ; jQuery("#ttr_content_and_sidebar_container").css("min-height", content_height+"px"); } }); </script>December 5, 2014 at 11:17 am #190021ParticipantI have done exactly as u said but there is stil a scroll bar and minimum height went down but just by a smitch it is now 473px i want to to be much smaller 100 px and yeah thank u very much my friend
December 5, 2014 at 12:58 pm #190032ParticipantIt’s kinda blowing my mind that the extra pixels are still in place. But I’ve come to the conclusion that the original function (and the derivatives to it that I posted) is working like it should (provided there are no wrong characters anywhere like before) – it must be firing at the wrong moment. The extra pixels are added after the function has finished. Before I said some element must be hidden but that would have the reverse effect of course – making the page a bit too short.
Trouble is, I’m not completely sure what jQuery functions I can use with this particular plugin. If I had the site live in front of me (which is a bit different from analysing through Firebug) I would try to change the timing of the function with this :
jQuery(window).on('load', function(){ var window_height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0); var body_height = jQuery(document.body).height(); var content = jQuery("#ttr_content_and_sidebar_container"); if(body_height < window_height){ differ = (window_height - body_height); content_height = content.height() + differ; content.css("height", content_height+"px"); } });It then runs after the page is fully loaded instead of the first possibly instance. This only works with a jQuery version of 1.7 and later though but it looks like they’ve kept it up to date (1.11).
With the huge amount of scripts on the page, of which many are minified, figuring out which one might be interfering with the process sounds like a mission impossible. It does seem to be consistent at those 42 pixels though, so if anything this could still be a fix :
jQuery(document).ready(function(){ var window_height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0); var body_height = jQuery(document.body).height(); var content = jQuery("#ttr_content_and_sidebar_container"); if(body_height < window_height){ differ = (window_height - body_height); content_height = content.height() + differ - 42; content.css("height", content_height+"px"); } });Functions above are the same as the one originally used, just couldn’t resist optimising the last line somewhat…
Oh yeah, I’m dutch as well by the way. :-)
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.