JavaScript - Need Expert Help For My Jquery...

Hi, i would like to explain my situation, basically, i am trying to create a slider with thumbnails. The slider is complete, works very well. The only problem is that the captions are just not appearing properly.

I had a situation where the captions did work but they had to be coming in from the slideOut functions but what i want is for it to be displayed when the person hovers over the image.

This is what it looks like at the moment...


This is when the caption is coming from the top.

i would like to implement
Code:

http://web.enavu.com/demos/caption/

or this
Code:

http://www.sohtanaka.com/web-design/examples/image-hover/

Doesnt matter which one

into my slider when an image is hovered over (not the thumbnail) the actual image, then the caption covers the whole image displaying whatever text...

Coding:
(HTML)
Code:

                    <div class="main_view">
                        <div class="window">    
                            <div class="image_reel">
                    			<a href="#">
                                    <img style="height:534px;" src="http://i55.tinypic.com/.png" alt="" />
                                </a>
                                <a href="<?php echo get_permalink(253); ?>">
                                    <img src="http://i51.tinypic.com/.jpg" alt="" />
                                </a>
                                <a href="<?php echo get_permalink(256); ?>">
                                    <img src="http://i52.tinypic.com/.png" alt="" />
                                </a>
                                <a href="<?php echo get_permalink(258); ?>">
                                    <img src="http://i53.tinypic.com/.png" alt="" />
                                </a>
                                <a href="<?php echo get_permalink(271); ?>">
                                    <img src="http://i53.tinypic.com/.png" alt="" />
                                </a>
                            </div>
		<div class="descriptions">
			<!--welcome page-->
				<div class="desc">
					<strong style="font-size:30px;">Welcome to City Water</strong>
						<div class="clear"></div><br/>
                            <div id="sliderdescription">WHATEVER WHATEVER</div>

				</div>
                
			<!--Services page-->
			<div class="desc">
			<?php $post_id = 253; $queried_post = get_post($post_id); ?>
       <strong style="font-size:30px;"><?php echo $queried_post->post_title; ?></strong>
                        <div class="clear"></div><br/>
                            <div id="sliderdescription"><?php echo $queried_post->post_content; ?></div>
                </div>
                    <div class="desc">
                                        <!--Products page-->
<?php $post_id = 256; $queried_post = get_post($post_id); ?>
<strong style="font-size:30px;"><?php echo $queried_post->post_title; ?></strong><div class="clear"></div>
<br/><div id="sliderdescription"><?php echo $queried_post->post_content; ?></div>


                    </div>
                    <div class="desc">
                                                 <!--Information page-->
<?php $post_id = 258; $queried_post = get_post($post_id); ?>
<strong style="font-size:30px;"><?php echo $queried_post->post_title; ?></strong><div class="clear"></div>
<br/><div id="sliderdescription"><?php echo $queried_post->post_content; ?></div>


                    </div>
                    <div class="desc">
                                                 <!--Accounts page-->
<?php $post_id = 271; $queried_post = get_post($post_id); ?>
<strong style="font-size:30px;"><?php echo $queried_post->post_title; ?></strong><div class="clear"></div>
<br/><div id="sliderdescription"><?php echo $queried_post->post_content; ?></div>
                    </div>
                </div>
            </div>
            
<div id="hrline"></div>

 <div class="paging">
         <ul class="thumb">
<li><a href="#" rel="1"><img src="http://i55.tinypic.com/.png" class="thumbnails"/></a></li>
<li><a href="#" rel="2"><img src="http://i56.tinypic.com/.jpg" class="thumbnails"/></a></li>
<li><a href="#" rel="3"><img src="http://i51.tinypic.com/.png" class="thumbnails"/></a></li>
<li><a href="#" rel="4"><img src="http://i52.tinypic.com/.png" class="thumbnails"/></a></li>
<li><a href="#" rel="5"><img src="http://i52.tinypic.com/.png" class="thumbnails"/></a></li>
        </ul>
    </div>
 </div>

CSS
Code:

 /*--Main Container--*/
 .main_view {
  float : left;
  height :488px;
  margin-bottom :1px;
  margin-top :-40px;
  position :relative;
}

 /*--Window/Masking Styles--*/
 .window img{
  height :492px;
  width : 974px;
}

 .window {
  /*--Hides anything outside of the set width/height--*/
  border :3px solid #D7D7D5;
  color : #B4B4B4;
  font-size : 12px;
  font-weight : bold;
  height :488px;
  overflow : hidden;
  position : relative;
  width : 974px;
}

 .image_reel {
  left : 0;
  position : absolute;
  top : 0;
}

 .image_reel img {
  float : left;
}

 .image_reel ul li {
  display : inline;
}

  #image_reel .caption {
  background-color :#000;
  bottom :0;
  color :#ffffff;
  height :100px;
  position :absolute;
  width :100%;
  z-index :600;
}

    #image_reel .caption .content {
}

    #image_reel .caption .content h3 {
  color :#1DCCEF;
  margin :0;
  padding :0;
}

 /*--Paging Styles--*/
 .paging {
  /*--Assures the paging stays on the top layer--*/
  /*--Hidden by default, will be later shown with jQuery--*/
  bottom : -25px;
  display : none;
  line-height : 40px;
  position : absolute;
  right : -70px;
  text-align : center;
  z-index : 100;
}



.desc {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 101;
	margin-top:275px;
    color: white;
    font-size: 2em;
    padding: 7px;

}

JAVASCRIPT
Code:

$(document).ready(function() {

    //Set Default State of each portfolio piece
    $(".paging").show();
    $(".paging a:first").addClass("active");
        
    //Get size of images, how many there are, then determin the size of the image reel.
    var imageWidth = $(".window").width();
    var imageSum = $(".image_reel img").size();
    var imageReelWidth = imageWidth * imageSum;
    
    //Adjust the image reel to its new size
    $(".image_reel").css({'width' : imageReelWidth});
    
    //Paging + Slider Function
    rotate = function(){    
        var triggerID = $active.attr("rel") - 1; //Get number of times to slide
        var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

        hideComment();
        
        $(".paging a").removeClass('active'); //Remove all active class
        $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
        
        //Slider Animation
        $(".image_reel").animate({
            left: -image_reelPosition
        }, 500 );
       
        showComment();
    };
    
    //Rotation + Timing Event
    rotateSwitch = function(){        
        play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
            $active = $('.paging a.active').next();
            if ( $active.length === 0) { //If paging reaches the end...
                $active = $('.paging a:first'); //go back to first
            }
            rotate(); //Trigger the paging and slider function
        }, 7000); //Timer speed in milliseconds (3 seconds)
    };
    
    rotateSwitch(); //Run function on launch
    
    //On Hover
    $(".image_reel a").hover(function() {
        clearInterval(play); //Stop the rotation
        play = null;
    }, function() {
        rotateSwitch(); //Resume rotation
    });    
    
    showComment = function(){
        // slide toggle effect set to slow you can set it to fast too.
        $(".desc").eq( $('.paging a.active').attr("rel") - 1 ).show(700);
        return true;
    };
    
    showComment(); // Show Comment initially
    
     hideComment = function(){
        $(".desc").stop(true,true).slideUp(500).hide();
     };
    
    //hide comment if you click on it
    $(".desc").click(function(){
        hideComment();
    });
    
    //On Click
    $(".paging a").click(function() {    
        $active = $(this); //Activate the clicked paging
        //Reset Timer
        clearInterval(play); //Stop the rotation
        rotate(); //Trigger rotation immediately
        rotateSwitch(); // Resume rotation
        return false; //Prevent browser jump to link anchor
    });    
    
});

So, i have this code which retrieves php files for me using jquery and id love to get it working with Jquery history plugin. I tried modifying the code i got from the ajax demo to work for me, but i just couldnt do it as i do not know any javascript really.. ( actually what i tried was simply to change "#ajax-links a" to "#menu li a" and .html to .php ..but nothing.. :rolleyes:


Id be very gratefull if someone would help me out with this one.

All related code can be found bellow (the ones that should be needed anyways):

This is the code that retrieves php files inside "#content" when item from "#menu li a" with the specified id is clicked
Code:

$(document).ready(function(){
	//References
	var change = $("#menu li a");
	var loading = $("#loading");
	var content = $("#content");
	
	//Manage click events
	change.click(function(){
		//show the loading bar
		showLoading();
		//load selected section
		if(this.id == "home")
		{
			change.load(this.className='current-page');
			content.slideUp();
			content.load("pages/index.php", hideLoading);
			content.slideDown();
		}
		else if(this.id == "secondpage")
		{
			change.load(this.className='current-page');
			content.slideUp();
			content.load("pages/secondpage.php", hideLoading);
			content.slideDown();
		}
		else
		{
			//hide loading bar if there is no selected section
			hideLoading();
		}
	});

	//show loading bar
	function showLoading(){
		loading
			.css({visibility:"visible"})
			.css({opacity:"1"})
			.css({display:"block"})
		;
	}

	//hide loading bar
	function hideLoading(){
		loading.fadeTo(1000, 0);
	};
});

Heres the structure of the menu/content
Code:

<ul id="menu">
<li><a id="home" class="normal" href="#Home"></a></li>
<li><a id="secondpage" class="normal"  href="#Secondpage"></a></li>		
</ul>

<div id="content">
<ul id="sec-menu">
<li><a id="link1" class="normal" href="#">Link1</a></li>
<li><a id="link2" class="normal"  href="#">Link2</a></li>		
</ul>
</div>

Heres the code that jquery history plugin uses in demo for ajax
Code:

jQuery(document).ready(function($) {
        function load(num) {
            $('#content').load(num +".html");
        }

        $.history.init(function(url) {
                load(url == "" ? "1" : url);
            });

        $('#ajax-links a').live('click', function(e) {
                var url = $(this).attr('href');
                url = url.replace(/^.*#/, '');
                $.history.load(url);
                return false;
            });
    });

hi, i have a jquery problem...

this script is not working with jquery-1.4.2.min, but it works with jquery-1.2.6.min.js, can anyone help me???the script is the above:
(it is not working the tab actions, the slideout works...)
http://www.benjaminsterling.com/wp-c...es/sidetab.htm

the javascript code is the above:
PHP Code:
var jqsideTabs;
var tabs, h = 50, r = 0,ra = 0;
$(document)
.ready(function(){
    jqsideTabs = $('#sideTabs').addClass('closed');
    
    tabs = jqsideTabs
    .find('.tab h3')
    .clone()
    .appendTo(jqsideTabs)
    .each(function(i){
        var that = $(this), cls = '',ow,newThis, newEl;
        
        if( i == 0 ) cls = ' active';
        newEl = $('<a href="#" class="tabLinks'+cls+'">' + that.text() + '</a>');
        that.replaceWith(newEl);
        
        ow = newEl.outerWidth();
        
        if( i == 0 ) ra = ow;
        else r = ow;
        
        h = newEl.css({'top':h , 'right': -ow }).height() + h;
        
        newThis = newEl.get(0);
        newThis.jq = newEl;
        newThis.i = i;
        
        newEl.click(function(){
            var el = this.jq;
            
            if( jqsideTabs.hasClass( 'closed' ) ){
                jqsideTabs.removeClass('closed');
            }
            else if( !jqsideTabs.hasClass( 'closed' ) && el.hasClass('active') ){
                jqsideTabs.addClass('closed');
            }
            
            el
            .siblings()
                .removeClass('active')
                .css({'right': -r })
            .end()
            .addClass('active')
            .css({'right': -ra });
            
            tabs.eq( this.i ).show().siblings('.tab').hide();
            
            return false;
        });
    })
    .end()
    .parent()
        .eq(0)
        .addClass('active')
    .end()
        .filter(':not(:eq(0))')
        .hide()
    .end();
    
    jqsideTabs.bind("mouseleave",function(){
        jqsideTabs
        .animate({left:-310}, 'fast', function(){
            jqsideTabs.addClass('closed').removeAttr('style');
        });
    });
}); 


and the html file is:
[HTML]
<div id="sideTabs">

<div class="tab">
<h3>Tab 1</h3>
<div class="gut">
<p>Some text</p>
</div>
</div>
<div class="tab">
<h3>Tab 2</h3>

<div class="gut">
<ul>
<li>link</li>
</ul>
</div>
</div>
<div class="tab">
<h3>Tab 3</h3>

<div class="gut">
<ul>
<li>link</li>
</ul>
</div>
</div>
</div>
[/HTML]
the problem is that the tab button works, but the content doesnt change...in all of tabs showing the same text(showing all tbas content)....

can anyone help...please.....

i keep getting the error

GET http://code.jquery.com/jquery.min.map net::ERR_TOO_MANY_REDIRECTS
& Failed to load resource: net::ERR_TOO_MANY_REDIRECTS

when i load my page...and the havascript doesn't work properly on ym page...how do i resolve this.

thanx in advance

var s="attr"
var i=$(s)
// jQuery(elem).attr(attr,eval("elm"+attr));
jQuery(elem).$(s)(attr,eval("elm"+attr));//i tried this.

how to assign a variable name in the above code(in place of s) so that i need to add an attribute to the element "elem".

Ok, I would post my entire data here but then yall would be reading insane amounts of script. I've got a div content jquery slider on my site I am making and it works beautifully in all browsers(took me a while). Then, I decided why not have it where when people click on a "read more" link that it pops up a box, instead of directing to the new page, and displays the contents of a div. It would not work at all. My question is there a possible way to do this?

i want get value form path :
ex..
xxx.com/index.php?cat

" cat " read cookie with jquery

who?

Hi Guys,

Please check this link out. I'm curious if you can attain the same functionality with jquery. Which include the hover over effects and sliding. If this can be done can you point me in the right direction to find some documentation to start learning. Thanks.

http://www.gensler.com/#projects

All,
I have the following jQuery code:
Code:

$("#other").click(function(){
    		var checked = $(this).is(':checked');
    		if(checked){
       			$('textarea#other_text').removeAttr("disabled");
    		}else {
        		$('textarea#other_text').attr("disabled", "disabled");
    		}
    	});

This works fine. However, what I'm allowing the users to do is edit this field. So I have the following PHP code:
PHP Code:
<input type="checkbox" name="other" value="x" id="other" <?php if($resultsetedits['other']=="x"){ echo "checked"; } ?>>&nbsp;Other:<br>If you choose other, please explain what other options you'd like us to do to your photo:<textarea name="other_text" rows="3" cols="119" id="other_text" disabled><?php if($resultsetedits['instructions']!=""){ echo $resultsetedits['instructions']; } ?></textarea>

Since the checkbox is checked with the PHP code the click function to jQuery never gets invoked and my textarea remains disabled. Is there anyway to basically invoke the jQuery code with my PHP script? Thanks in advance.

I'm not sure if this is something jquery can do or what but here's what I want to do but I have this following code and when it shows either Public or Archived for the Event Status I want it to be a link so that if I click on Public then it turn it into Archived because it'll change its status_id in the DB from 4 to 5.

PHP Code:
case 1:
            echo $e;
            ?>
            <h1 class=backstage>Archiving Management</h1><br />
            <h2 class=backstage>Weekly Events</h2><br />
                
                <?php
                $query = "SELECT ecb.bookingdate, els.name, ele.statusname, ecb.label FROM `efed_content_booking` AS ecb LEFT JOIN `efed_list_shownames` AS els  ON ( ecb.event_id = els.id ) LEFT JOIN `efed_list_eventstatus`  AS ele ON ( ecb.status_id = ele.id ) WHERE els.type = 'singular' OR els.type = 'recurring'"; 
                
                $result = mysql_query ( $query ); 
                $rows = mysql_num_rows($result);
                if ($rows > 0)  {
                print'<table width="100%" class="table1">
                    <tr class="rowheading">
                        <td>Event</td>
                        <td align="center">Booking Date</td>
                        <td align="center">Event Status</td>
                    </tr>';
                $i = 0;
                while ( $row = mysql_fetch_array($result, MYSQL_ASSOC) ) {
                    $sClass = 'row2';
                    if ($i++ % 2) $sClass = 'row1';
                    printf ( "<tr class=\"%s\">", $sClass );
                    printf ( "<td valign=\"top\">%s%s</td>", $row['name'],$row['label'] );  
                    printf ( "<td valign=\"top\" align=\"center\">%s</td>", convertdate($row['bookingdate'] ));
                    printf ( "<td valign=\"top\" align=\"center\">%s</td>", $row['statusname'] );
                    echo '</tr>';
                 }
                echo '</table><br>';
            } else {
                echo '<span>There are no weekly events to archive.</span><br /><br />';
            }
            ?>
                <h2 class=backstage>Pay-Per-View Events</h2><br />
                
                <?php
                $query = "SELECT ecb.bookingdate, els.name, ele.statusname, ecb.label FROM `efed_content_booking` AS ecb LEFT JOIN `efed_list_shownames` AS els  ON ( ecb.event_id = els.id ) LEFT JOIN `efed_list_eventstatus`  AS ele ON ( ecb.status_id = ele.id ) WHERE els.type = 'ppv'"; 
                
                $result = mysql_query ( $query ); 
                $rows = mysql_num_rows($result);
                if ($rows > 0)  {
                print'<table width="100%" class="table1">
                    <tr class="rowheading">
                        <td>Event</td>
                        <td align="center">Booking Date</td>
                        <td align="center">Event Status</td>
                    </tr>';
                $i = 0;
                while ( $row = mysql_fetch_array($result, MYSQL_ASSOC) ) {
                    $sClass = 'row2';
                    if ($i++ % 2) $sClass = 'row1';
                    printf ( "<tr class=\"%s\">", $sClass );
                    printf ( "<td valign=\"top\">%s%s</td>", $row['name'],$row['label'] );
                    printf ( "<td valign=\"top\" align=\"center\">%s</td>", convertdate($row['bookingdate']) );
                    printf ( "<td valign=\"top\" align=\"center\">%s</td>", $row['statusname'] );
                    echo '</tr>';
                 }
                echo '</table><br>';
            } else {
                echo '<span>There are no ppv events to archive.</span><br /><br />';
            }
            returnmain();
            footercode();
        break;

i am a newbie to jquery and need help.

i want to alert anything when i click at any button that have the class .resetBtn using jquery.
I know doing it with javascript is much easier but i learning jquery so trying to create function by myself.

my code currently does not work when i click on my button.


Code:

$(".resetBtn").click(function() {
	alert ("asd");
});

I'm not sure if I'm in the right place or not, but I am in desparate need of some help. I have this code:

Code:

<script type="text/javascript">


$(document).ready(function(){
	$('#add').click(function() {
	alert('test');
	});
	$("form#exercise").submit(function() {
	// we want to store the values from the form input box, then send via ajax below
	var activity     = $('#activity').attr('value');
		$.ajax({
			type: "POST",
			url: "newActiveProc.php",
			data: "activity="+ activity +"&func=search",
			success: function(activity){
				$("span#results").html(activity);

			}
		});
	return false;
	});

});
</script>

As you can see by the highlighted portion, the user is alerted once they make a selection. It should go something like this:

[Add to table] Football
[Add to table] Basketball
[Add to table] Baseball

Once they click the 'add to table' button, their selection should be added to a table that is at the bottom of the page. So far, all I've been able to do is generate an alert box, but I know thats not right. Any information anyone has would be helpful. Thanks in advance.

Hi,

I have this js script which is working on mouse click, what is my requirment is that it do the same function wiht on mouse over:

click: function(e) {
var el = this;
el.blur();
// if the image was not preloaded yet then wait
if (el.zoomimageCfg.loading === true) {
return false;
}
//zoom it in if not zoomed already
if (el.zoomimageCfg.zoomed == false) {
EYE.zoomimage.zoomIn(el);
//else zoom it out
} else {
EYE.zoomimage.zoomOut(el, false);
}
return false;
},

Thank you

Best Regards,
mnightwalker