Solved

java jquery

Posted on 2013-02-03
5
202 Views
Last Modified: 2013-02-06
---------------------------------------
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="jquery-1.9.0.js"></script>

<script type="text/javascript">
$(document).ready(function() {
$('a#tog').toggle(function() {
    $('#result2').fadeIn('slow');
    return false;
  },
function() {
    $('#result2').fadeOut('slow');
    return false;
  });
});
</script>


<script type="text/javascript">
$(function() {
  $('a.link').click(function(e) {
    e.preventDefault();
    $.get($(this).attr('href'),{},function(data) {
       $('#result').html(data);
    }); // <= missing in original script
  });
})</script>

</head>
<body>
<div><a class="link" href="test.txt">Click</a></div><br />
<div align="right" style="width:200px; background:#00cc33;">dfdfd</div><br />
<div id="result" style="width:400px; position:absolute;left:250px; top:100px; background:#00CC33;"></div>

&nbsp;<div align="right" style="width:100px; background:#00CC33; id="result2; position:relative;left:100px; top:15px;">ggggg</div>
</body>
</html>
-------------------------------------------
I am trying to get this element in the above page to fade in / out with the jquery function:

<script type="text/javascript">
$(function() {
  $('a.link').click(function(e) {
    e.preventDefault();
    $.get($(this).attr('href'),{},function(data) {
       $('#result').html(data);
    }); // <= missing in original script
  });
})</script>
0
Comment
Question by:doctorbill
  • 3
  • 2
5 Comments
 
LVL 109

Expert Comment

by:Ray Paseur
ID: 38848652
Have a look at this page.  
http://www.landonbaseball.com/

It creates a fade-in / face-out effect, presenting a caption over the banner image when you mouse-over the image.  You can use view source to see the jquery statements near line 45, showing in the snippet below.

<!-- FADING CAPTIONS ADDED 2012-03-17 -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
  $("#banner_image").ready(function () {
  $("#banner_image").fadeTo(3000, 0.001, "swing");
  $("#banner_image").hover(
        function() {
            $("#banner_image").stop(true).fadeTo(250, 1.0, "swing");
        },
        function() {
            $("#banner_image").fadeTo(2000, 0.001, "swing");
        }
     );
  });
</script>

Open in new window

In my experiments with fadeTo(), I found that a value of 0.001 was sufficient to become invisible and a value of 0 created some quirkiness when I wanted the page element to fade back into view.

HTH, ~Ray
0
 

Author Comment

by:doctorbill
ID: 38848885
So how  do I make my element in the page above fade in and out - what code changes are necessariy?
0
 
LVL 109

Assisted Solution

by:Ray Paseur
Ray Paseur earned 500 total points
ID: 38848947
Well for starters you might want to fix the place where there is an id attribute inside the style attribute.  You can usually catch these things is you use the W3C Validator.

I'll see if I can come up with a better example for you.
0
 
LVL 109

Accepted Solution

by:
Ray Paseur earned 500 total points
ID: 38849077
This worked for me.
http://www.laprbass.com/RAY_temp_doctorbill.php

<!doctype html>
<html>
<head>
<title>RAY_temp_doctorbill</title>

<!--
MAN PAGE REFERENCES:
http://api.jquery.com/ready/
http://api.jquery.com/fadeIn/
http://api.jquery.com/fadeOut/
-->

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<script>
$(document).ready(function () {
  $('#hideThing').click(function() {
    $('#thing').fadeOut(1000, function() {
      alert('Hide Done');
    });
  });

  $('#showThing').click(function() {
    $('#thing').fadeIn(1000, function() {
      alert('Show Done');
    });
  });
});
</script>

</head>
<body>
<a id="hideThing">Click Me (Hide)</a>
<a id="showThing">Click Me (Show)</a>
<br/>

<div id="thing">ggggg</div>
</body>
</html>

Open in new window

Starting with that platform you can add in the additional styling incrementally, testing along the way.  At some point you will be able to take out the alert() calls.  They are just there to provide confirmation that the actions were executed.  

Best regards, ~Ray
0
 

Author Closing Comment

by:doctorbill
ID: 38859411
thanks - excellent as usual
0

Featured Post

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

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

Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
3 proven steps to speed up Magento powered sites. The article focus is on optimizing time to first byte (TTFB), full page caching and configuring server for optimal performance.
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

776 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