Solved

java jquery

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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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.

Question has a verified solution.

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

Suggested Solutions

Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
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…
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.

740 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