JavaScript - Help With Jquery Fadein Please!

Greetings everyone; Jesse here. Long time reader, first time poster.

I have a personal website, currently in development, located at: http://www.jesselang.ca

If you click the right-facing arrows along the right side you'll open a side-bar column, clicking a left-facing arrow will then close the side-bar.

This functionality is "OK" at best.

What I would like to see is clicking the right-facing arrow causes the current sidebar to fade-in, and simultaneously have the arrow flip to a left-facing icon; the idea being to add a toggle function to the arrows.

The code I'm using at the moment is shown below, this string works for me because it only allows 1 sidebar container to be displayed at a time... which is ideal.
Code:

<script type="text/javascript">
	lastone='empty'; 
	function showIt(lyr) 
	{if (lastone!='empty') lastone.style.display='none'; 
	lastone=document.getElementById(lyr); 
	lastone.style.display='block';}
</script>

The respective html looks something like this:
Code:

<a onclick="javascript:showIt('interestcontainer')" class="arrow"><span>show interests sidebar</span></a>

The coresponding html for the container to display looks like this. This code also shows the "hide container" button:
Code:

<div id="interestcontainer" style='display:none;'>
        <h4>interests<a onclick="interestcontainer.style.display='none';" class="back"><span>back</span></a></h4>

And the CSS looks like this:
Code:

a.arrow{
	display:block;
	float:right;
	background:url(../images/ico-arrow.gif) top no-repeat;
	text-decoration:none;
	overflow:hidden;
	width:13px; 
	height:11px;
	margin-left:3px;}

------------------

Would it be asking to much to have someone help me achieve the following functionality?
-load page with all side containers hidden
-display only 1 side container at a time
-fadein and fadeout effects
-same button displays and hides
-button swaps images for displat/hide commands

Again, my code can be seen at:
http://www.jesselang.ca
http://jesselang.ca/files/style.css


I'd very much appreciate the help.

Thank you in advance.
*j

Hi guys,

Im trying to get the hover to fade in the 'hover.png' image and to fade out when leaving the 'hovering' item.

The code I am using is the following

Code:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'></script>
<script type="text/javascript">

function mainmenu(){
	$("#neon li.root").hover(function(){
			$(this).fadeOut('500');
			},function(){	
		$(this).fadeIn('500');
			});	
	}

$(document).ready(function () {		
mainmenu();		
});
</script>

<style type="text/css">


 /* remove the margin and bullets, set the padding and margin for this demo only*/
.neon {margin:50px auto 200px auto; padding:25px 0 100px 15px; list-style:none; background:#000; width:720px;}

 /* display the list items inline with a right margin to space the buttons. Use this to pre-load the hover image */
.neon li {display:inline; float:left; background:url(hover.png);}

/* style the links and place the background image to start from left edge */
.neon li a {display:block; height:32px; float:left; background:url(menu.png); text-decoration:none; font-size:10px; font-family:arial, sans-serif; letter-spacing:1px; line-height:36px;}

/* style the b element to posiition it to the right by 20 pixels and even out the text with 20 pixel right padding */
.neon li a b {margin:0 0 0 40px; display:inline; float:left; height:32px; background:url(menu.png) right top; padding:0 40px 0 0; color:#fff;}

/* style the link hover and the link hover b to replace the background image - border:0 needed for IE6 to work */
.neon li a:hover, .neon li a:hover b {border:0; background-image:url(hover.png); cursor:pointer; color:#000;}

.neon li a.current, .neon li a.current b, .neon li a.current:hover , .neon li a.current:hover b {background-image:url(hover.png); color:#000; cursor:default;}

</style>

  <ul id="neon" class="neon">
    <li class="root"><a href="#nogo"><b>MENU ITEM1</b></a></li>
    <li class="root"><a href="#nogo"><b>MENU ITEM2</b></a></li>
    <li class="root"><a href="#nogo"><b>MENU ITEM3</b></a></li>
    <li class="root"><a href="#nogo" class="current"><b>MENU ITEM4</b></a></li>
    <li class="root"><a href="#nogo"><b>MENU ITEM5</b></a></li>
  </ul>

Any help would be appreciated!

Thanks!

Hi,

I am looking for a script which could do picture animation like in this page

But there is other problem: When you put your mouse on them, they appear colored. I need that this appearing action would take 5 seconds.

5 sek. to become colored, 5 sek. to become grey when you put away your mouse.

If you need more info, ask.. Thanks a lot.

I am using fadein and out of jquery, but size of jquery file is high for me. so i should replace it

do anyone know, how can i write fadein and fadeout functions? is anyone know its source code?

Best Morteza

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?

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 All,

i have an autosuggest feature on my site where the user searches for a product and as they type it lists matching products from my database.

here is the javascript/jquery code
Code:

$(document).ready(function(){$(document).click(function(){$("#ajax_response").fadeOut('slow');});$("#keyword").focus();var offset=$("#keyword").offset();var width=$("#keyword").width()-2;$("#ajax_response").css("left",offset.left);$("#ajax_response").css("width",width);$("#keyword").keyup(function(event){var keyword=$("#keyword").val();;if(keyword.length)
{if(event.keyCode!=40&&event.keyCode!=38&&event.keyCode!=13)
{$("#loading").css("visibility","visible");$.ajax({type:"POST",url:"/ajax_server.php",data:"data="+keyword,success:function(msg){if(msg!=0)
$("#ajax_response").fadeIn("slow").html(msg);else
{$("#ajax_response").fadeIn("slow");$("#ajax_response").html('<div style="text-align:left;">No Matches Found</div>');}
$("#loading").css("visibility","hidden");}});}
else
{switch(event.keyCode)
{case 40:{found=0;$("li").each(function(){if($(this).attr("class")=="selected")
found=1;});if(found==1)
{var sel=$("li[class='selected']");sel.next().addClass("selected");sel.removeClass("selected");}
else
$("li:first").addClass("selected");}
break;case 38:{found=0;$("li").each(function(){if($(this).attr("class")=="selected")
found=1;});if(found==1)
{var sel=$("li[class='selected']");sel.prev().addClass("selected");sel.removeClass("selected");}
else
$("li:last").addClass("selected");}
break;case 13:$("#ajax_response").fadeOut("slow");$("#keyword").val($("li[class='selected'] a").text());searchValue=document.getElementById('keyword').value; searchValue = searchValue.replace( /\([^\)]*\)/g, "" );searchValue = searchValue.replace(/^\s*|\s*$/g,'');searchValue=searchValue.replace(/(\s-)/gi,"");searchValue=searchValue.replace(/\s/gi, "_");searchValue=searchValue.replace(/[:',]/gi,"");window.location="/CDs/"+searchValue.toLowerCase();break;}}}
else
$("#ajax_response").fadeOut("slow");});$("#ajax_response").mouseover(function(){$(this).find("li a:first-child").mouseover(function(){$(this).addClass("selected");});$(this).find("li a:first-child").mouseout(function(){$(this).removeClass("selected");});$(this).find("li a:first-child").click(function(){$("#keyword").val($(this).text());$("#ajax_response").fadeOut("slow");});});});

this runs this php script to get the product names
PHP Code:
<?php
session_start();

    include("config.php");
    $keyword = $_POST['data'];
    $keyword = preg_replace("/s*\(.*\)/i", "", $keyword);
    $keyword = ucwords($keyword);

    $sql = "select DISTINCT prodName,prodShortName,prodCategory from ".$db_table." where (".$db_column." like '".$keyword."%' AND prodCategory = '".$_SESSION['subpage']."') limit 0,10";
    $result = mysql_query($sql) or die(mysql_error());
    
    if(mysql_num_rows($result))
    {
        echo '<ul class="list">';
        while($row = mysql_fetch_array($result))
        {
            $category = strtolower($row['prodCategory']);
            $str = ucwords($row['prodName']);
            $start = strpos($str,$keyword); 
            $end   = similar_text($str,$keyword); 
            $last = substr($str,$end,strlen($str));
            $first = substr($str,$start,$end);
            $link = "/".$category."/".$row['prodShortName'];
            
            $final = '<span class="bold">'.$first.'</span>'.$last;
        
            echo '<li><a href="'.$link.'">'.$final.'</a></li>';
        }
        echo "</ul>";
    }
    else {
        echo "0";
        }
?>

which works fine, what i am trying to acheive is to pull out the category of the products in the list and use it in the script.

so where it says this
Code:

window.location="/CDs/"+searchValue.toLowerCase();break;

i want the value of the php value $category to be. but i have no idea how to do this or if it is even possible? any help is appreciated

many thanks
Luke

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");
});

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.