JavaScript - Jquery Toggle Question

Hi there!

Okay, here is my scenario:

I have a link and a div on a webpage. With the link I want to toggle the content (HTML) of the div. On toggle, I want to load the content from a PHP-file and I want it to load on the toggle, not when the webpage originally loaded (to reduce loading time on the webpage itself).

The file that is loaded on toggle doesn't have to be PHP, but it would help a lot.

Does anybody know of a example of this or something similar to it? I have been looking for some time now, without any luck unfortunately.

Highly appreciate any help/answers/feedback!

Hello, posted this on dynamicdrive.com with no response, so I am trying this forum.

I have been assigned to build a content locator.
We cannot use a database and all content needs to load from same page.

Based on my boss' design and client needs, this is what I came up with:
http://contentx.com/content_locator/

I am using a Dynamic Drive script to power the dropdown and content underneath the drop down,
http://contentx.com/content_locator/js/dd_cx_script.js

and using a JQuery script to change the content in the window to the right.
http://contentx.com/content_locator/...s_cx_script.js

My questions a
1) Is there a better method to do this? (stupid question I know... of course there is!!) I would like it to be as simple as possible, no animation needed.
Just need to have content from the DIV on the right side load content in the Main body div on the left (the box)

2)Is it possible to change the content on the right side when you select an option from the drop down? (say I select <option>Free Campaigns</option> I want the content to change on the right to match one of the free campagins)

3)Finally, my margins in IE 7 are all over the map, looks great in all other browsers, but in IE my TABS (colored green and blue) are about 10pixels up to high, and my belowcontent div on the left has a top margin of 12px below the dropdown...

Thanks for any help,
zack

Ok super new to Jquery here. I finally got talked into trying it.

Ok so... I have

Code:

function windowOpen() {

	windowSize()
	document.getElementById("action1").innerHTML = '';
	action1.style.filter = "alpha(opacity=" + (0*100) + ")";
	action1.style.opacity = 0;
	
	var si = setInterval(function() {

	io+=0.05;
	
	action1.style.filter = "alpha(opacity=" + (io*100) + ")";
	action1.style.opacity = io;
		
	}, 100);
	
	io = 0;
	
	if(io==1) {
	
		window.clearInterval(si);
	
	}
	
	clearMenu();

}

I would love to know how to replace that with the fadein() function.

I'm looking for something like this

Code:

function windowOpen() {

	windowSize()
	document.getElementById("action1").innerHTML = '';

        //THE FADE IN GOES HERE but how?
	
	clearMenu();

}

ok last question. Do I need to hide my elements somehow differently in CSS before I can use this?

update:

ok so far trying this and its not working

Code:

function windowOpen() {

	windowSize()
	document.getElementById("action1").innerHTML = '';
	
	action1.fadeIn('slow');
	
	clearMenu();

}

finally made it work with

Code:

function windowOpen() {

	windowSize()
	action1.innerHTML = '';
	action1.style.display = "none";
	
	$("#action1").fadeIn(1300);
	
	clearMenu();

}

I have a form validation with an AJAX username check and it works perfectly on FF, but doesn't work in IE 9. I am a complete newb when it comes to Jquery and Javascript, so any help/suggestions would be greatly appreciated.

Jquery:

Code:

	       $('#username').bind('blur',function() {	 
               
                var formData = $('#register').serialize();              
                $.post('username.php',formData,processData).error('ouch');
                function processData(data) {                     
                    
                    console.log(data);
                    
                    if (data=='pass') {
                        
                        if (! $('#fail').length) {
                        
                            $('#usernameavail').prepend('<p id=\"fail\">Username Is Available!</p>');
                            
                        } else {
                            
                            $('#usernameavail').html('<p id=\"fail\">Username Is Available!</p>');
                            
                        }
                        
                    } else {
                        
                        if (! $('#fail').length) {
                            
                            $('#usernameavail').prepend('<p id=\"fail\"><img src=\"http://images/error.png\"> Username Not Available</p>');
                            
                        } else {
                            
                            $('#usernameavail').html('<p id=\"fail\"><img src=\"http:///images/error.png\"> Username Not Available</p>');
                            
                        }
                    }
                } // end processData
                
            }); // end submit

Here is the username field I am validating against the database for a duplicate
username:

Code:

<input name='username' type='text' id='username' class='required' maxlength='20'>

Thanks in advance.

Not entirely lost in the dark with jquery here, ive done quite a bit with it. I was just wondering if anyone might have ideas to solve this particular problem i am having.

The code pretty much looks like this...

Code:

$('#created').hover(
function(){ 
	if(y == false)
	{
		$(this).css({'border' : '1px groove #dfdfdf'});
		$('div#csite').show('slide',{ direction: "down" },500);
		$('div#sa').hide('slide',{ direction: "up" },500);
	};
},
function()
{
	$(this).css({'border-style' : 'none'});
	$('div#csite').hide('slide',{ direction: "up" },500);
	$('div#sa').show('slide',{ direction: "down" },500);
});

//home hover
$('#home').hover(
function(){ 
	if(y == false)
	{
		$(this).css({'border' : '1px groove #dfdfdf'});
		$('div#psite').show('slide',{ direction: "down" },500);
		$('div#sa').hide('slide',{ direction: "up" },500);
	};
},
function()
{
	$(this).css({'border-style' : 'none'});
	$('div#psite').hide('slide',{ direction: "up" },500);
	$('div#sa').show('slide',{ direction: "down" },500);
});

The div sa is always present (its a sponsor logo)

when hovering over a #created link or #parent site link, a div csite or psite comes up, (image representing parent site, image representing creator site)

making them work is no problem however i was wondering if anyone had any ideas as how to change this so that when you are quickly moving from the created link to the parentsite the .hide and .show animation for #sa does not overlap, or does not fire
otherwise they get in the way of each other...

any help would be appreciated thanks in advance!

Hi, as the title states, I'm trying to learn some basic javascript, more particularly, jQuery.

I HATE having to "allow" active content to run on my IE browser. Is there a way to allow active content permanantly? Instead of having to click allow each time I refresh or reload my test pages?

Also, IE keeps freezing or crashing when I run pages with scripts on them. Is this just my browser? or something to do with the active content permissions?

Trying to google my questions, but no luck yet.

OK, new to the boards.

I prefer jQuery over flash and not sure how to tackle this, so please advise as best you can.

Trying to create a site that allows for images to go full browser and then have the ability to have the other images slide in based on a click.

I also want to float a menu that will allow it to pull in other media (video, that would slide in the same way).

The best example I can share is this: http://j.mp/5U79i1

What he is using is flash based (slideshowpro director and slideshow pro for flash).

Not interested in flash for this personal project.

Any advice would be hugely appreciated.

thanks in advance.

What would be the best way to get data for a mobile site. I've tried using Jquery $.ajax to bring in the data from a php file.

It seems to work however it takes some time to load without a way to really give a progress meter. I was wondering what the fastest way to do this would be. For instance it loads and loads then after a long while the alert(); pops up and the data loads into the page.

Ultimately i was thinking i could use the ajax request to read in the data from the mysql database server, then transfer it to localstorage, im using HTML5 primarily for the development also just for reference.

Somewhat new to mobile development i was just wondering if anyone had a starting point for me to look at and go from there.

Code:

$(document).ready(function($){
	var dataret = 0;
	
		$.ajax({
		  type: 'POST',
		  url: 'mobile.php',
		  beforeSend: function(){
		  	$('#status').show();
		  },
		  success: function(data){
		  //initialize localstorage here
		  	alert('success');
		  	
// if it takes as long as it does, a few minutes, at least show a loading bar...
		  	$('#progress').progressbar({
		  		
		  	});
		  
		  },
		  dataType: 'json'
		});
	
	});

Thanks in advance!

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

I'm not sure if this is a JS or CSS problem, but I figure I would start here.

What is wrong with the "onload" function that makes it so that I can not initialize the class name?

I get no errors and the toggleClass(IDS) function appears to work fine with similar logic tests.

What I expect to happen is that the <blockquote id=...> class names be initialized to hide
if and only if JS is available for the toggleClass function to work.

Here is what I am doing...
Code:

<!DOC HTML>
<html>
<head>
<title> Toggle Class </title>
<script type="text/javascript">
//<![CDATA[
function toggleClass(IDS) {
  var sel = document.getElementById(IDS);  //  alert(IDS+' : '+sel.className);
  if (sel.className != 'hide') { sel.className = 'hide'; }
                          else { sel.className = 'show'; }
}
window.onload = function() {
  var sel = document.getElementsByTagName('*');
  for (var i=0; i<sel[i].length; ++i) {
    if (sel[i].className == 'show') { sel[i].className = 'hide'; alert(sel[i].id); }
  }
}
//]]>
</script>
<style type="text/css">
 .show { display: block; }
 .hide { display: none; }
 li { list-style-type: none; }
 #Schedule { margin:0px; padding:5px; }
 #Projects { margin:0px; padding:5px; }
</style>

</head>
<body>
<a href="#" onclick="toggleClass('Schedule');return false"> Schedule </a>
<blockquote id="Schedule" class='show'>
 <li>Monday:</li>
 <li>Tuesday:</li>
 <li>Wednesday:</li>
 <li>Thursday:</li>
 <li>Friday:</li>
</blockquote>
<br>
<a href="#" onclick="toggleClass('Projects');return false"> Projects </a>
<blockquote id="Projects" class='show'>
 <li>Current</li>
 <li>Past</li>
 <li>Future</li>
 <li>On-going</li>
</blockquote>

</body>
</html>

Hello. Can anyone please tell me what information in the second java script code needs to be changed to make a toggle expand in place. The toggles currently expand properly, but the second toggle, as well as the others, jump back up to the first toggle when expanded.


The first toggle:

<script type="text/javascript">// <![CDATA[
function toggleView(layer_on, layer_off) { document.getElementById(layer_on).style.display = 'block'; document.getElementById(layer_off).style.display = 'none'; return; }
// ]]></script>



The second toggle:

<script type="text/javascript">// <![CDATA[
function toggleView(layer_on, layer_off) { document.getElementById(layer_on).style.display = 'block'; document.getElementById(layer_off).style.display = 'none'; return; }
// ]]></script>

Here is the referenced page:

http://sprintexperts.info/phones/#

Thanks in advance!

I had some help last week with a brands a to z list which shows a div containing list of brands starting with the relevant letter onclick.

It works pretty well with one flaw. The brand links within the div seem to activate the toggle function. My wish is that the layer is shown when a letter is clicked but then hides on div onMouseOut so that a different letter can be selected.

Here is by code;

Javascript;
Code:

function toggle_visibility(o,id) {
 var obj = document.getElementById(id);
 obj.style.display=(obj.style.display == 'block')?'none':'block';
 if (obj.style.display!='none') {
 obj.style.left=zxcPos(o)[0]+20+'px';
 obj.style.top=zxcPos(o)[1]+20+'px';}
}

function zxcPos(obj){
 var rtn=[0,0];
 while(obj){
  rtn[0]+=obj.offsetLeft;
  rtn[1]+=obj.offsetTop;
  obj=obj.offsetParent;
 }
 return rtn;
}

Here is a sample of my a to z table;
Code:

<table width="100%" border="0" cellspacing="2" cellpadding="2">
<tr>
<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename20');">U</a></td>

<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename21');">V</a></td>

<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename22');">W</a></td>

<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename23');">X</a></td>
</tr>
<tr>
<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename24');">Y</a></td>

<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename25');">Z</a></td>
        
</tr></table>

And here is an example of the Brand name div ;
Code:

<div id="uniquename21" onMouseOut="toggle_visibility('null','uniquename21');" style="display:none; position:absolute; border-style: solid;  background-color: white;  padding: 5px;">
<a href="Manufacturer-view.asp?ManID=43">VPX</a><br>
<a href="Manufacturer-view.asp?ManID=44">Vyomax</a>
</div>

You can view the site on my test page;
http://www.dp-development.co.uk/ProteinStop/site/

(Brand menu on the left nav)

Thank you for any help you can give