Solved

java jquery

Posted on 2013-02-03
5
200 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 108

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 108

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 108

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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Suggested Solutions

Consider the following scenario: You are working on a website and make something great - something that lets the server work with information submitted by your users. This could be anything, from a simple guestbook to a e-Money solution. But what…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

746 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now