[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Jquery load file and test for hidden content - callback not helpiing

Posted on 2013-05-28
4
Medium Priority
?
381 Views
Last Modified: 2013-06-03
I have been trying to load an external file into a div - no problem
 $(".mydiv").load("href");      

have been testing to see if some content is hidden - no problem
function isHidden(){
      
    var $s = $('.scrollable');
    $s.wrapInner('<div />'); // wrap inner contents
    var hidden = $s.height() < $s.children('div').height();
   $s.children('div').replaceWith( $s.children('div').html() ); //unwrap
    return hidden;
}

have been trying to do it in same function so it will all happen in order with one onclick

No matter how I try it even callback it seems to have to finish the entire function before the file appears in the div so, obviously, the hidden content detection fails every time.

Is this possible to do. I want to load the file into a div and, if content exceeds div - indicate there is more available at the bottom of the div - scrollbars are fine on the browsers but iphone and ipad scroll fine bit i am trying to indicate there is "more'. I thought I could load the div then test the content for hidden true/false and if true then unhide the notice element at the bottom of the content div.

Any help appreciated
0
Comment
Question by:drdocb
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
4 Comments
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39203108
Can you please post a link to your page
0
 

Author Comment

by:drdocb
ID: 39203194
Here is a sample page I was using for simplicity sake.

www.clientforms.net/test_hidden.html

one link fills the div (and should callback the isHidden function via the fill(isHidden) on click

the other just calls the isHidden function

www.clientforms.net/test_hidden.html

I have tried multiple combinations without success

Here is the code also

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

<script src="jquery-1.10.0.min.js">
</script>


<style>
 .scrollable{
      height: 150px;
      width: 75%;
      border: 1px solid #ccc;
      color: #03F;
      overflow: scroll;
      position: relative;
      margin-right: auto;
      margin-left: auto;
      text-align: center;
      }
</style>
<script language="javascript">



function fill(callback)
{
  $(".scrollable").load("flowers.htm");      
  callback();
 
}

function isHidden(){
      
    var $s = $('.scrollable');
   
    $s.wrapInner('<div />'); // wrap inner contents
    var hidden = $s.height() < $s.children('div').height();
     
    $s.children('div').replaceWith( $s.children('div').html() ); //unwrap
      return hidden;
}
</script>

</head>

<body>


<div class="scrollable" style="overflow:hidden;">
    test testtest testtest testtest<br />
    testtest testtest testtest testtest<br />
    testtest testtest testtest testtest<br />
      testtest testtest testtest testtest<br />
        testtest testtest testtest testtest<br />
    testtest test TOST
</div>
<p>&nbsp;</p>
<p><a href="#" onClick="fill(isHidden)">Fill Div</a></p>
<p>&nbsp;</p>
<p><a href="#" onClick="alert(isHidden())">check if your text is hidden</a></p>
<p>&nbsp;</p>
</body>
</html>
0
 

Accepted Solution

by:
drdocb earned 0 total points
ID: 39205778
Figured it out myself needed to open the callback function and include the callback code within it. Here is a portion of the modified call from a test page
function flow()
      {      
   $(document).ready(function() {
             $('#scrollable').load('result.html','data',function(event){
                  
    var $s = $('.scrollable');
   
    $s.wrapInner('<div />'); // wrap inner contents
    var hidden = $s.height() < $s.children('div').height();
          $s.children('div').replaceWith( $s.children('div').html() );
                  if (hidden)
                    document.getElementById("notice").style.display='block';      
                    return true;
                                       });
      });
   
 
      }

So I will close this question...
0
 

Author Closing Comment

by:drdocb
ID: 39215649
Because I figured it out and it might help others as this is a hard concept to graso (or at least was for me and I have been programming for a LONG time)
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to implement server side field validation and display customized error messages to the client.
CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

649 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question