Solved

java jquery

Posted on 2013-02-03
5
206 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
[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
  • 2
5 Comments
 
LVL 110

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 110

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 110

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

Industry Leaders: 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

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
This article discusses how to create an extensible mechanism for linked drop downs.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

739 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