JavaScript - Onclick Change Class, Remove When Next Link Clicked

Hi,

I currently have a script that dynamically adds a css class called "on" to a menu item once it is selected, turning that link red to show that it's active.

Here is the web page:

www.talmagecooley.com/films.html

As you can see, if you click on "Dimmer" or "Pol Pot's Birthday", or one of the three Patriotville scene links (1, 2, or 3), those links stay red.

But what I need to happen is that when the user hovers over OR clicks on "1", "2", or "3", the word "Patriotville" also turns red along with those links.

Here is the current code:

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
var Lst;

function CngClass(obj){
if (Lst) Lst.className='';
obj.className='on';
Lst=obj;
}

/*]]>*/
</script>



<li class="rss-popup" id="patriotville"><a id="three" href="#" onclick="" class="feed-link" style="color:#fff;">PATRIOTVILLE</a></li>

<div id="clips">
<li class="rss-popup"><a id="four" href="#" onclick="changeIt('film3_1');CngClass(this);">1</a></li>
<li class="rss-popup"><a id="five" href="#" onclick="changeIt('film3_2');CngClass(this);">2</a>|</li>
<li class="rss-popup"><a id="six" href="#" onclick="changeIt('film3_3');CngClass(this);">3</a></li>
</div>

**********

Any help would be greatly appreciated! Thanks!!

Hi guys. I have a lot of information on my site that is in multiple categories. I have a list of categories, each with its own checkbox. By default, all the information is displayed (therefore all the checkbox's are checked by default).

When someone unchecks the box I want to hide the divs with that class, and when someone rechecks the box, they should reappear. Here is my code so far. It is hiding the div's fine, but they are not reappearing when user tics the checkbox again.

Code:

<script type="text/javascript">
function toggledisplay(category){
	if(document.getElementById(category).checked){
		$("."+category).removeClass(category+"-hidden").addClass(category);	
	}
	else{
		$("."+category).addClass(category+"-hidden").removeClass(category);		
	}
}
</script>

<input type="checkbox" checked="checked" name="fitness" id="fitness" onclick="toggledisplay('fitness')" />

I'm currently working on a project and I am doing a bunch of image switching.

I'm having a problem with the following...

I have seven medium image objects and one small one. One is at the top and the other 7 are below. When one of the 7 is clicked, it then becomes the one up top and the one up top then takes the place of the image clicked. This needs to be able to happen no matter which of the seven i click.

Also when you click one of the seven it runs a script to change 9 other images in the center of the page. this isnt too important because i have it working already.

What i have is, each of the seven images run their function that changes the 9 center images and then it runs another function.

What i need is for that function to determine which company for example(shaws, lowes, target) the top image belongs to and replace the image that was clicked with the top one. But i also need to replace the NAME="" and ONCLICK="function()" with the proper ones for the original company up top.

Please if you can understand what im trying to do let me know, if you need further clarification i can do so. i can draw a picture of what im trying to do or the layout if needed but i cant necessarily show anyone the project due to a non-disclosure.

I have three divs, Step 1, Step 2, Step 3.
I'm trying to get it so when a person clicks the Facebook Like, the style changes to none and Step 2 is revealed and when the Facebook Share is clicked, the Step 3 is revealed. But when I like the first thing, it doesn't change to Step 2.

Any thoughts?


Code:

       <div id="Step1"><table border="0" width="630" height="174" background="images/step1-2.jpg"><tr><td valign="top" align="left" style="padding-left: 215px; padding-top: 80px"><br />
       <iframe src="http://www.facebook.com/plugins/like.php?href=LINKHERE&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=35" scrolling="no" action="like" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowTransparency="true"></iframe>
       <br />
       
       </tr></td></table></div><div id="Step2" ><table border="0" style="display: none" width="630" height="174" background="images/step2-2.jpg"><tr><td valign="top" align="left" style="padding-left: 210px; padding-top: 82px"><br />
           <a name="fb_share" type="button" share_url="LINKHERE"></a>
        <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"
        type="text/javascript">
        </script>
        <br />
        
        </tr></td></table></div><div id="Step3" style="display: none"><table border="0" width="630" height="174" background="images/step3-2.jpg"><tr><td valign="top" align="left" style="padding-left: 210px; padding-top: 72px"><br />
        <center><a href="LINKHERE">Download Here</a>
        </center></tr></td></table></div><br />
       
<script type="text/javascript">
window.fbAsyncInit = function() {
   FB.init({appId: 'ID HERE', status: true, cookie: true, xfbml: true});
   FB.Event.subscribe('edge.create', function() {
      document.getElementById('Step1').style.display = 'none';
      document.getElementById('Step2').style.display = 'block';
      document.getElementById('Step3').style.display = 'none';
setTimeout('document.getElementById(\'Step1\').style.display = \'none\';document.getElementById(\'Step2\').style.display = \'none\';document.getElementById(\'Step3\').style.display = \'block\';', 7000);
   });
};

(function() {
   var e = document.createElement("script");
   e.type = 'text/javascript';
   e.src = document.location.protocol + "//connect.facebook.net/en_US/all.js"; 
   e.async = true;
   document.getElementById("fb-root").appendChild(e); 
}());
      
      </script>

Hi everyone! I need a little help with something. I have a page with several links that when clicked open a modal window. The same window for each link, with a form. However inside the form I need to print the id of the link that was clicked. Like so:

<a href="#" id="1">Link 1</a>
<a href="#" id="2">Link 2</a>
<a href="#" id="3">Link 3</a>

<form>
....somehow print/echo the id of the link...
</form>

Is this possible? Does anyone know how to do that? I'd appreciate any help!

Sorry I am new to JavaScript.

Says that a.html has two same anchor links (<a href="b.html">b</a>). The anchor links are uneditable but we could add JavaScript to the a.html.

Except for dynamic adding onclick event, any other ways could get to know which anchor link being clicked?

I have no clue if this is in the correct forum but.... is there a way to determine whether a user clicked on a link vs typed in the url to get to a page? I'm trying to stop users from messing with GET forms (and i have to use them, POST wouldn't make sense in this case).

Thanks

Hello

I need to not publicly display phone number inside my website page (I use Joomla CMS). In fact the main goal is of course to be able to show the number but not to be crawled by search engine..

So in practice instead to see this:

Phone: 013456789

I would like to see this:

Phone: Click here for see the number

By clicking on that link the number must be displayed...

My website for display the phone field use this php code:

Code:

<?php echo $CustomFields->field('my_phone',$listing); ?>

I asked in some forum and some people tell me is possible to customize this php code with javascript for let me hide/show the field value but I don't have a single idea how to do this because I'm not a programmer...

I take a look in all javascript libraries but I don't find any javacript ready for use for let me implement it inside the php code...

Anybody have a suggestion please ?

many thank

I have a WebHelp framework created by chmProcessor whereby index.htm calls frameset.html that references a left frame "treeFrame" and right frame "frameCont". The treeFrame has javascript to change the icons from selected to not selected and high light the selected topic.

I have a need to have links in the right frame. And when I click on the link in the right frame, I want the right frame to display the topic but I also want the treeFrame navigation to open the navigation to the newly selected topic.

How would I go about implementing this? In the tree.html, the tree navigation gets created with this code:

Code:

contentTree.create( document.getElementById( "contentsTree" ) , window.parent.document.getElementById( "frameCont" ) , window.parent.parent.location.href );

Here is the tree.js
Code:

/************************************
(C) Toni Bennasar 2007
http://chmprocessor.sf.net
Under GPL license.

Functions to create a content tree for many web pages.

*************************************/

var contentTree = new Object();

contentTree.pageloaded = function() {

    // Get the title of the loaded page:
    
    pageRelativeUrl = getPageTitle( contentTree.frame.contentWindow.document.location.href )
    
    // Search the link to this page
    node = contentTree.seachLinkByHref( pageRelativeUrl );
    if( node == "" ) {
        // Try to search by the page title, without internal reference:
        idx = pageRelativeUrl.indexOf( "#" )
        if( idx >= 0 )
            pageRelativeUrl = pageRelativeUrl.substring( 0 , idx );
        
        node = contentTree.seachLinkByFileTitle( pageRelativeUrl );
    }
    
    if( node != "" ) {
        // If its found, select it over the tree:
        contentTree.selectLink( node , true , false );
    }
}

// Initializes the tree.
// tree : UL element that contains the tree
// frame: The frame that will contain the topic pages.
// url: Input URL of the page.
contentTree.create = function( tree , contentFrame , url ) {

	// Store ref to tree elements:
	contentTree.frame = contentFrame;
	contentTree.tree = tree;
	contentTree.selectedLink = "";

	// Change the links to open his ref into the iframe
	contentTree.links = tree.getElementsByTagName("a");

	// Create click events for the links:
	for (var i=0; i<contentTree.links.length; i++) {
		contentTree.links[i].onclick = function(e){
			contentTree.frame.src = this.href;
			contentTree.selectLink( this , false , true );
			//e.stopPropagation();
			stopEvent(e);
			return false;
		}
	}

	// Prepare all the submenus
	var submenus = tree.getElementsByTagName("ul");
	
	for( var i=0; i< submenus.length; i++ ) {
		var sb = submenus[i];
		sb.parentNode.className="submenu";
		sb.setAttribute("status", "closed");

		// click open the submenu:
		
		sb.parentNode.onclick = function(e) {
			var ulChild=this.getElementsByTagName("ul")[0];
			if( ulChild.getAttribute("status") == "closed" ) {
				contentTree.openUlElement( ulChild );
			}
			else if( ulChild.getAttribute("status") == "open" ) {
				ulChild.style.display="none";
				ulChild.setAttribute("status", "closed");
				
				this.style.backgroundImage="url(1g.gif)";
			}
			//e.stopPropagation();
			stopEvent(e);
		}
		// To avoid events when the submenu items are pressed.
		sb.onclick=function(e){
			//e.stopPropagation();
			stopEvent(e);
		}
	}

	// Load the default page, or the selected topic page:
	
	var topic = getURLParam( url , "topic");
	
	var topicLink = "";
	if( topic != "" )
		topicLink = contentTree.seachLinkByTitle( topic );
	if( topicLink != "" )
		contentTree.selectLink( topicLink , true , true );
	else if( contentTree.links.length > 0 )
		contentTree.selectLink( contentTree.links[0] , true , true );

    // When an internal link is clicked follow the selection at the tree:
    contentFrame.onload_1 = function(){ contentTree.pageloaded(); }
    
}

contentTree.openUlElement = function( ulElement ) {
	if( ulElement.getAttribute("status") == "closed" ) {
		ulElement.style.display="block";
		ulElement.setAttribute("status", "open");
		ulElement.parentNode.style.backgroundImage="url(2g.gif)";
	}
}

contentTree.selectUrl = function( url ) {
    var lnk = contentTree.seachLinkByHref( url );
    if( lnk == "" )
        // URL not found
        contentTree.frame.src = url
    else
        contentTree.selectLink( lnk , true , true );
}

contentTree.selectLink = function( lnkObject , expandTree , loadContentFrame ) {

	if( contentTree.selectedLink != "" )
		contentTree.selectedLink.style.backgroundColor = contentTree.notSelectedBg ;
	else
		contentTree.notSelectedBg = lnkObject.style.backgroundColor;
		
	if( loadContentFrame )
	    contentTree.frame.src = lnkObject.href;
	
	contentTree.selectedLink = lnkObject;
	lnkObject.style.backgroundColor = "#33CC66" ;

	if( expandTree ) {
		var ulElement = lnkObject.parentNode.parentNode;
		while( ulElement != contentTree.tree ) {
			contentTree.openUlElement( ulElement );
			ulElement = ulElement.parentNode.parentNode;
		}
	}
}

// Search a link into the tree by his text:
contentTree.seachLinkByTitle = function( strTitle ) {
    var strTitleLower = strTitle.toLowerCase()
	for (var i=0; i<contentTree.links.length; i++) {
	
	    // Get the text of the link, without return carriages
	    var linkText = contentTree.links[i].innerHTML.toLowerCase();
	    linkText = linkText.replace(/\n/," ");
	    linkText = linkText.replace(/\r/,"");
	    
		if( linkText == strTitleLower )
			return contentTree.links[i];
	}
	return "";
}

// Search a link into the tree by his href:
contentTree.seachLinkByHref = function( strHref ) {
	for (var i=0; i<contentTree.links.length; i++) {
	    //var aux = unescape( contentTree.links[i].href );
	    var aux = contentTree.links[i].href;
        if( aux == strHref || endsWith( aux , "/" + strHref ) )
			return contentTree.links[i];
    }
	return "";
}

contentTree.seachLinkByFileTitle = function( strFile ) {
	for (var i=0; i<contentTree.links.length; i++) {
	
	    //var aux = getPageTitle( unescape( contentTree.links[i].href ) );
	    var aux = getPageTitle( contentTree.links[i].href );
	    
        if( aux == strFile )
			return contentTree.links[i];
        else {
            idx = aux.indexOf( "#" )
            if( idx >= 0 ) {
                aux = aux.substring( 0 ,  idx );
                if( aux == strFile )
			        return contentTree.links[i];
			}
        }
    }
	return "";
}


// Search links that contains
contentTree.searchByContent = function( strSearch , idList , idTopicsList ) {

    var list = document.getElementById( idList );
	list.options.length=0;
	if( strSearch == "" )
		return;
	var topicsList = document.getElementById( idTopicsList );
    //var strLower = strSearch.toLowerCase();
    var strLower = normalizeString( strSearch );
    for (var i=0; i<topicsList.options.length; i++) {
		if( normalizeString( topicsList.options[i].text ).indexOf( strLower ) >= 0 ) {
			var opt = new Option( topicsList.options[i].text );
			opt.value = topicsList.options[i].value ;
			list.options[ list.options.length ] = opt;
		}
	}
	list.ondblclick = function(e) {
		if( list.selectedIndex >= 0 )
			contentTree.selectUrl( list.options[ list.selectedIndex ].value );
	}
}

Hi, I have no experience with javascript. For several hours I have been trying to figure out how to use it but I cannot. I want to change the layout of a page to something that would be much more readable.

Recently the website Cramster has moved to Chegg and I don't like the layout. Everytime I load a problem I have to make the two changes in this screenshot:



I expand the answer box then delete the footer because it overlaps in front of the answer box. Here is a screenshot of the before and after of what it does:



How do I create a script to automate this every time I go to this site? I'm at a loss and tried all kinds of codes that are supposed to remove elements, but none have done anything.

I know I don't have any code to show here, but I don't know what is supposed to work.

Please help, thank you!

Hi all, I have a couple of functions, an add error function, if some validation is not met I add a message to a array holding error messages and mark the field red, I have no problem with that piece of code...

Code:

function addError(errorArray, formObj, message) {
	errorArray[errorArray.length] = message;
	if (formObj.options != undefined) {
		formObj.parentNode.className = "error-field";
	} else {
		formObj.className = "error-field";
	}
}

However I have an issue with the 2nd function, it takes in 2 variables, an id for a div which is displaying the error messages, and the form object, the issue I have is removing the error class. for some reason obj.className = '' fails to remove the class, getting the same object using getElementById() (name and id are the same) however if I construct the removing piece of js code as a String and execute it using eval it works...

Code:

function clearErrors(errorDivId, vForm) {
	var errorDiv = document.getElementById(errorDivId);
	errorDiv.innerHTML = "";
	errorDiv.style.display = "none";
	
	// remove red boxes
	for (i=0; i<vForm.elements.length; i++) {
		var obj = vForm.elements[i];
		if (obj.type != "button" && obj.type != "hidden") {
			if (obj.options != undefined) {
				if (obj.parentNode.className == "error-field") {
					obj.parentNode.className = "";
				}
			} else {
				if (obj.className == "error-field") {
					alert(obj.name);
					obj.className == "";
					alert(obj.className);
					obj = document.getElementById(obj.name);
					alert(obj);
					obj.className == "";
					alert(obj.className);
					var jsExecuteCommand = "vForm." + obj.name + ".className = '';";
					alert(jsExecuteCommand);
					eval(jsExecuteCommand);
					alert(obj.className);
				}
			}
		}
	}
}

I am so baffled? I have no idea why it won't work can anybody please explain what is happening please? Although I have a work around, I have been banging my head to get to this workaround and I just don't understand why the obj.className = ''; doesn't work.

Thanks,
Dale

No Jquery plz

As you can see that I want to remove this advertisement area (denoted by 1) via some java code. Now one can observe that this advert is hosted in the 'main-content' id & wrapped in 'inner' class. One cannot remove/hide id but CAN remove/hide the class which also will remove/hide the advert area placed within this class.

Title basically says it. I need to get the object that was just clicked, to insert into a JavaScript function. I've tried "function('this')" and similar things, but it doesn't work. I'm sure this is REALLY easy to do, but I don't know it and I have no idea what to search for.

Thanks

Okay. So here's what I'm trying to do. I have my landing page to my site and near the bottom I have 4 little 48x48 class divs (for social network link images if you were wondering ). Each Class div has a background style all to it's own. (so in this case 4 different divs with 4 different class names) .

What I want to do with the javascript is to have a function(s) that when called on (depending on which div.class was/is clicked on) will open up a lightbox/new page containing the new page (pertaining to the appropriate social network, depending on which class has been clicked on).

I don't want to put an <a></a> tag around the div.classes themselves seperately because the landing page itself has 8 different styles, plus the div.classes I would have to hunt down within the site itself. haha

Basically in short I want the classes to have seperate links that when clicked upon it calls the function, opens the lightbox (or opens the new tab/page) and loads the appropriate page.

Think yall can help me out here?

The very basic onclick code I threw together:
Code:

function descw()
{
	document.getElementById("desc").style.display="block";

}

function descc()

{
	document.getElementById("desc").style.display="none";
}

The div that needs a description...
Code:

<div class="select"><img src="image.jpg" onclick="descw()"></div>

..and the actual description div.
Code:

<div id="desc">
<img  src="close.jpg" onclick="descc">
<p>Description</p>
</div>

This works, but I have a whole class of divs named select that need their own individual description divs. Id method is okay for one div apparently, but if I click on others it loads the first description div. What do I use instead? I tried getElementsByName and Atrribute and got an error.