[jQuery] Dynamic height for DIV

  • agahmemnon

    (@agahmemnon)


    11 years, 3 months 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?

Viewing 15 replies - 1 through 15 (of 18 total)
1 2
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 3 months 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.

    Thread Starter agahmemnon

    (@agahmemnon)

    11 years, 3 months 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?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 3 months ago

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

    Thread Starter agahmemnon

    (@agahmemnon)

    11 years, 3 months ago

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

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 3 months ago

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

    Thread Starter agahmemnon

    (@agahmemnon)

    11 years, 3 months ago

    yes, script.js

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 3 months 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 ;(

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 3 months 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()) });
    });
  }

});

    Thread Starter agahmemnon

    (@agahmemnon)

    11 years, 3 months ago

    it doenst help

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

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 3 months 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.

    Thread Starter agahmemnon

    (@agahmemnon)

    11 years, 3 months 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?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 3 months ago

    This line

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

    Appears to be writing an invalid style;

    background-size: 100% 340

    Thread Starter agahmemnon

    (@agahmemnon)

    11 years, 3 months ago

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

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 3 months ago

    Actually, I had that too.

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

    Thread Starter agahmemnon

    (@agahmemnon)

    11 years, 3 months 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();

Viewing 15 replies - 1 through 15 (of 18 total)
1 2
  • The topic ‘[jQuery] Dynamic height for DIV’ is closed to new replies.

Tags