how to read hidden div using jquery?

Question

$('.slider').each(function(){
if($('li:last',this).width()+$('li:last',this).offset().left-$('li:first',this).offset().left < $('div',this).width()){
//doing something

}
});

I have multiple slides and only one is visible. here I'm trying to do some thing after reading each slides. Issue is that I'm not able to read slides if its hidden. is there any way I can read hidden div using jquery.

Answer 1

JQuery can read hidden elements as it will be hidden from the user but exist in the HTML, but if you means that you set it as visible=false from the server side that means that i will not render in the HTML and JQuery will not be able to find it for sure.

Answer 2

I take it you are trying to read dimensional properties of a hidden div and its child objects?

Since the div is hidden, dimensional properties make little sense. Try unhiding the div, and adding to its css: position: absolute; left: -5000px; before checking its dimensions and those of its children. Then revert it back to hidden and to the position and left settings it had before.

Answer 3

Assuming you aren't loading a new page, or removing the nodes each time you change slides, the div should be available to you in the DOM. If you know the id of the div you can get it using:

 var divContents = $('#slide2').html()

or the like. Keep in mind that this will give you the innerHTML, not text (unless there's only text in the innerHTML).

Answer 4

If Gus is right you need to:

• Determine if the element is hidden
• If the element is hidden set visiblity to hidden and display to block (or inline-block)
• Read dimension values
• Set style back to original

Something like:

$('.slider').each(function(){
  var lastLi = $('li:last',this);
  var firstLi = $('li:first',this);
  var divJQObject = $('div', this);
  var originalStyle = {
    'display': divJQObject.css('display'),
    'visibility': divJQObject.css('visibility')
  };
  if(!divJQObject.is(":visible")) {
    var hiddenButReadableStyle = {
      'visiblity': 'hidden',
      'display': 'block'
    }
    divJQObject.css(hiddenButReadableStyle);      
  }
  if(lastLi.width()+$lastLi.offset().left-firstLi.offset().left < divJQObject.width()){
  // Do Something
  }
  divJQObject.css(originalStyle);
});