WordPress.org

Ready to get started?Download WordPress

Forums

[jQuery] Dynamic height for DIV (19 posts)

  1. agahmemnon
    Member
    Posted 1 year ago #

    Hello, i want to do div height same like height of browser like here: http://www.shegy.nazwa.pl/themeforest/exit/normal/

    I found that code:

    $(document).ready(function() {
    $(function() {
      if($(document).height() <= $(window).height()) {
        $('#header').css({ 'height': ($(window).height()) });
        $(window).resize(function(){
          $('#header').css({ 'height': ($(window).height()) });
        });
      }
    });
    });

    but it;s not working /; What is wrong?

  2. Andrew Nevins
    Volunteer Moderator
    Posted 1 year ago #

    You ought to be using some-sort of developer tool to debug JavaScript, like the one built-in to Google Chrome. Then look at the 'console' and check whether any errors are being thrown.

    You need to use jQuery no-conflict wrappers too.

  3. agahmemnon
    Member
    Posted 1 year ago #

    I've changed code to get no errors

    jQuery(function($) {
      if($(document).height() <= $(window).height()) {
        $('#header').css({ 'height': ($(window).height()) });
        $(window).resize(function(){
          $('#header').css({ 'height': ($(window).height()) });
        });
      }
    });

    but its still not working, any ideas?

  4. Andrew Nevins
    Volunteer Moderator
    Posted 1 year ago #

    Can you provide a working example of the issue (link to a webpage)?

  5. agahmemnon
    Member
    Posted 1 year ago #

    http://550d.webnice.pl/ I've changed a bit classes

  6. Andrew Nevins
    Volunteer Moderator
    Posted 1 year ago #

    I can't find your jQuery (from this thread) on that webpage. Is it declared in particular .js file?

  7. agahmemnon
    Member
    Posted 1 year ago #

    yes, script.js

  8. Andrew Nevins
    Volunteer Moderator
    Posted 1 year ago #

    Sorry, I don't think that jQuery is in that file http://550d.webnice.pl/wp-content/themes/simplecorp/library/js/scripts.js

    Edit: Nevermind - I was looking at the wrong file ;(

  9. Andrew Nevins
    Volunteer Moderator
    Posted 1 year ago #

    Do you need to wrap your jQuery in a ready function?
    E.g;

    jQuery(document).ready(function($) {
    
      if($(document).height() <= $(window).height()) {
        $('#header').css({ 'height': ($(window).height()) });
        $(window).resize(function(){
          $('#header').css({ 'height': ($(window).height()) });
        });
      }
    
    });
  10. agahmemnon
    Member
    Posted 1 year ago #

    it doenst help

    $(window).height() is working but .css doesnt

  11. Andrew Nevins
    Volunteer Moderator
    Posted 1 year ago #

    I ran these two functions in my browser's console and it returned this;

    jQuery(document).height()
    1816 //returned value
    
     jQuery(window).height()
    340 //returned value

    So the Document height isn't less than or equal to the Window height.
    Is this the same for you? If so, this is why your code appears not to be working.

  12. agahmemnon
    Member
    Posted 1 year ago #

    Ok i removed that code, I am noob at js

    jQuery(function($) {
        $(window).resize(function(){
          $('body').css({ 'background-size': 100% ($(window).height())  });
        });
    
      $('.intro-page h2').text($(window).height() + 'px') ;
    
    });

    what is wrong now?

  13. Andrew Nevins
    Volunteer Moderator
    Posted 1 year ago #

    This line

    $('body').css({ 'background-size': 100% ($(window).height())

    Appears to be writing an invalid style;

    background-size: 100% 340
  14. agahmemnon
    Member
    Posted 1 year ago #

    I got:
    background-size: 100px auto;
    how to do it well?

  15. Andrew Nevins
    Volunteer Moderator
    Posted 1 year ago #

    Actually, I had that too.

    Umm, what do you want to happen? What style are you trying to get when the browser resizes?

  16. agahmemnon
    Member
    Posted 1 year ago #

    i want to get background to cover visible area in browse like here http://www.shegy.nazwa.pl/themeforest/exit/normal/
    so i need to get background-cover: 100% jQuery(window).height();

  17. Andrew Nevins
    Volunteer Moderator
    Posted 1 year ago #

    It looks like that site is using CSS Media Queries for the resizing browser styles http://www.shegy.nazwa.pl/themeforest/exit/normal/css/bootstrap-responsive.css

  18. agahmemnon
    Member
    Posted 1 year ago #

    no, he used js/custom.js, look at that

  19. agahmemnon
    Member
    Posted 1 year ago #

    ok i change html a bit

    html:

    <body <?php body_class(); ?>>
    
    <div class="tlo"></div>
    		<div id="page">

    css:

    .tlo {background:url("../images/buble.jpg") no-repeat #FAFAFA;
    width:100%;
    position:absolute;
    top: 0;
    left:0;}

    jquery:

    jQuery(function($) {
        $('.tlo').css({ 'height':  $(window).height() + 'px' });
    
    });

    and now is working

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags