Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 210
  • Last Modified:

java jquery

---------------------------------------
<!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
doctorbill
Asked:
doctorbill
  • 3
  • 2
2 Solutions
 
Ray PaseurCommented:
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
 
doctorbillAuthor Commented:
So how  do I make my element in the page above fade in and out - what code changes are necessariy?
0
 
Ray PaseurCommented:
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
 
Ray PaseurCommented:
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
 
doctorbillAuthor Commented:
thanks - excellent as usual
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now