|
JavaScript - How To Get To Know Which Anchor Link Being Clicked Using Javascript?
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? Similar Tutorials/** The <a> is a list of menu items that when clicked.... a specific gallery-slider-images should been shown in relation to the galleryId....<div class"gallery" is hidden in CSS> I'd like to use jQuery to complete this task if at all possible, I know it's prob SIMPLE to U GURU's but being new i can't seem to .show() the selected 'gallery' w/o showing them all........... BEST REGARDS _ STH <div id="gallery-menu"> <?php foreach ($galleries as $gallery) : ?> <a onclick="showGallery(<?= $gallery['gallery']['id'] ?>); return false;"><?= $gallery['gallery']['name'] ?> <?php endforeach ?> </div> <?php foreach ($galleries as $gallery): ?> <div id="<?= $gallery['gallery']['id'] ?>" class="gallery"> <div class="slider" style="width; 100%; height: 100%;"> <ul> <?php foreach ($gallery['images'] as $image): ?> <li class="galleries-container"> <img src="<?= UCMVC_APP_BASE_URL ?>/gallery/retrieve-image/<?= $image['id'] ?>" alt="<?= $image['name'] ?>" title="<?= $image['name'] ?>" /> </li> <?php endforeach; ?> </ul> </div> </div> <?php endforeach; ?> // javascript // function showGallery(galleryId) { ????!?!?!?!?! } 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 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! 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 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 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 );
}
}
Hey all, Hoping someone could help me out with some javascript coding as I am a complete novice to this! I am currently building a website using 1 static page and all the content will be pulled in through different iframes by clicking on a navigation on the page. I found a very handy piece of javascript coding that lets me remove a class from one link and move it to the link that was clicked on (the code will be below). The issue I am facing with this is that if I have Home set to class="On" to begin with and then click on Location, the background image will be added to the Location section but won't get removed from Home until it is physically clicked on. Can anyone help me out with how I can get this to work correctly? javascript: Code: <script language="JavaScript" type="text/javascript">
var Lst;
function CngClass(obj){
if (typeof(obj)=='string') obj=document.getElementById(obj);
if (Lst) Lst.className='';
obj.className='On';
Lst=obj;
}
</script>
HTML: Code: <div id="navWrapper">
<div id="globalNav">
<ul>
<li onclick="CngClass(this);" class="On"><a href="iframes/home.html" target="content_iframe">Home</a></li>
<li onclick="CngClass(this);" class=""><a href="iframes/location.html" target="content_iframe">Location</a></li>
<li onclick="CngClass(this);" class=""><a href="iframes/speakers.html" target="content_iframe">Speakers</a></li>
<li onclick="CngClass(this);" class=""><a href="iframes/agenda.html" target="content_iframe">Agenda</a></li>
<li onclick="CngClass(this);" class=""><a href="iframes/useful_material.html" target="content_iframe">Useful Material</a></li>
<li onclick="CngClass(this);" class=""><a href="iframes/event_presentations.html" target="content_iframe">Event Presentations</a></li>
<li onclick="CngClass(this);" class=""><a href="iframes/gallery.html" target="content_iframe">Gallery</a></li>
</ul>
</div>
<div id="localNav"></div>
</div>
Hi guys, I've been breaking my brains for few hours, I already searched online and I found nothing so far. What I wanna do.... I have 5 different images linked to 5 different websites. Once the image is clicked, the first link will be displayed in an iframe, and the image will change to the second one. Once we click on the second image, the second link will be displayed using the same iframe, and so on. The code changes the images,but I dunno how to deal with the link to the websites. This is the code: Code: <html>
<head>
<title>Testing...</title>
</head>
<script type="text/javascript">
imgs=Array("1.png","2.png","3.png","4.png","5.png");
links=Array("www.vbct.ca","www.cnn.com","www.castanet.net","www.yahoo.com","www.cubaweb.cu");
var x=0;
function change() {
document.getElementById("changes").src=imgs[++x];
if (x==4) {
x=-1;
}
}
if (!imgs[x+1]) {
x=-1;
}
</script>
<body>
<div>
<iframe src="http://www.vbct.ca" style="border: 0; position:relative; top:0; left:0; right:0; bottom:0; width:100%; height:400px;" name="page" width="100%"></iframe>
</div>
<br /><br />
<div>
<a href="#" target="page"><img src="1.png" id="changes" alt="alttext" onmousedown="change()" style="cursor: pointer;" /></a>
</div>
</body>
</html>
And this is the link to the test page: http://www.virtualbc.ca/sites/test/ Consider the following piece of code: PHP Code: <form method='post' name='myform'> <input type='submit' name='sub' value='submit 1' /> <input type='submit' name='sub' value='submit 2' /> <a href='javascript:document.myform.submit();'>submit 3</a> </form> <?php echo "You clicked ".$_POST["sub"]; ?> So if you click "submit 1", the output will be You clicked submit 1. And if you click "submit 2", the output will be You clicked submit 2. That's obvious. But ... what do I need to do to pass the key/value pair "sub" = "submit 3" to the server via POST when I click on the hyperlink showing "submit 3" - so that the output is You clicked submit 3 (i.e. so that $_POST contains "submit 3" referenced to index "sub"). I've tried <a href='javascript: a = {"x" : 1}; document.myform.submit(a);'>submit 3</a>, but that doesn't cause a to be passed via POST. I am really new to coding and am trying to include a flowchart that I have created on my site. There is a series of 5 questions with 2 possible answers for each question. Can anyone help me with some coding that would let me show only the first question and based on how they answer that, the flow chart would open up to the second question and once they answer the second question, it opens up to the third question and so on?
Hi, I have a series of images, anchored linked together to simulate a tour. I decided it would be better if rather than clicking it was like a smooth simulation so i added onmousever to the anchor links. this was a smooth transistion but entirely too fast. is there a way with javascript, to slow down the onmouseover events? i have the images on the same page, just shoved down the page by using pagebreak html, so that they load when the page loads and therefore don't slow down the effect. (they are large images). i can't use the script that smoothly scrolls between anchor links, because it scrolls down the page to the next image, which ruins the effect. the images are increasingly larger pictures of the same thing, so the effect is somewhat like moving thru 3d space. i need the onmouseover to FIRE but move slower than normal onmouseover before firing again. repeat. here's an example http://www.thelivingmoon.com/undomie...rmouse.html#22 i mean the entire sequence is done before the person even realizes what just happened Im using an anchor tag with a class specified. When i click the anchor tag which i have displayed using C# it opens as a popup with background disabled. But when i clikc the anchor tag which i displayed using javascript it redirects to the url mentioned and does not open as a popup. C# Code ----------------- Code:
builder.Append("<a href='EditLevelValues.aspx?levelId=" + levelId + "&levelValueId=" + levelValueId + "&levelName=" + levelName + "&levelValueName=" + levelValueName + "&levelValueDescription="+levelValueDescription+"&placeValuesBeforeTB_=savedValues&TB_iframe=true&height=300&width=500&modal=true&' class='thickbox obox'>");
trLevels.InnerHtml = builder.ToString();
JAVASCRIPT CODE ------------------------- Code: strLevelValues += "<a href='EditLevelValues.aspx?levelValueName=" + lvlValueName + "&levelId="+lvlId+"&levelValueId=" + lvlValueId + "&levelValueDescription="+lvlValueDescription+"&levelName=Projects&placeValuesBeforeTB_=savedValues&TB_iframe=true&height=300&width=500&modal=true&' class='thickbox obox'>"; trProjLevel[0].innerHTML = strLevelValues; Hello all! I'm having a bit of an issue here with my lastest project. What I'm trying to do is have a menu that a user would click one of two links which would change the targeted iFrame, then repeat for two more options, and again for two more. It is essentially a filtering system for videos (the best way for you to see what I mean is to check out http://grph.cmwdesign.ca). My actual issue here is the changing of the iframe href, and on top of that, I seem to not to be able to properly get my functions to run all the time. Here is my Javascript: Code:
var categoryLink=new Array();
var counter;
var link = "";
categoryLink[0] = "";
categoryLink[1] = "";
categoryLink[2] = "";
counter = "0";
$(document).ready(function() {
$(".atonal").live('click', function() { {
alert("sometext");
if (categoryLink[0]=="") {
categoryLink[0] = "atonal";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
else {
categoryLink[0] = "";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
}
});
});
$(document).ready(function() {
$(".tonal").live('click', function() {
alert("sometext");
if (categoryLink[0]=="") {
categoryLink[0] = "tonal";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
else {
categoryLink[0] = "";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
}
});
});
$(document).ready(function() {
$(".being").live('click', function() {
alert("sometext");
categoryLink[1] = "being"; $("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
if (categoryLink[1]=="") {
categoryLink[1] = "being";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
else {
categoryLink[1] = "";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
}
});
});
$(document).ready(function() {
$(".doing").live('click', function() {
alert("sometext");
if (categoryLink[1]=="") {
categoryLink[1] = "doing";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
else {
categoryLink[1] = "";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
}
});
});
$(document).ready(function() {
$(".abstract").live('click', function() {
alert("sometext");
if (categoryLink[2]=="") {
categoryLink[2] = "abstract";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
else {
categoryLink[2] = "";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
}
});
});
$(document).ready(function() {
$(".documentary").live('click', function() {
alert("sometext");
if (categoryLink[2]=="") {
categoryLink[2] = "documentary";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
else {
categoryLink[2] = "";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
}
});
});
and the HTML in question: Code: <table> <tr> <td height="35" width="210" valign="top">choose your sound</td> <td width="165" valign="top"><a href="#" id="atonal">atonal sounds</a></td> <td width="165" valign="top"><a href="#" id="tonal">tonal sounds</a></td> </tr> <tr> <td height="35" width="210" valign="top">choose your text</td> <td width="165" valign="top"><a href="#" id="being">being words</a></td> <td width="165" valign="top"><a href="#" id="doing">doing words</td> </tr> <tr> <td height="35" width="210" valign="top">choose your image</td> <td width="165" valign="top"><a href="#" id="abstract">abstract images</a></td> <td width="165" valign="top"><a href="#" id="documentary">documentary images</a></td> </tr> </table> I'm no Javascript wiz, so I'm sure I'm probably not going about this entirely the correct way. Any suggestions would be great! Hi guys, Having a little bit of trouble with a site I'm currently working on... I'm using some AJAX for the instant g-mail/facebook style navigation, you know the kind, with no refreshes, etc. Problem is, to allow for back/forward and bookmarks, I currently use a URL that looks like: http://www.mySiteOfFun.com/index.html#page=news.html; This is fine, not a problem... The issue comes into play when I want to open up the news.html page, from my home.html page, and have it open to news item #6 (for example). I can't add a #, because one is already being used to reference the anchor for the content div. Has anyone run into a similar problem before? If so, how did you resolve it? Can some jQuery be used to find the location of the news item div in question, on load, and scroll to it like that? Just not sure how to progress really, and any help would be greatly appreciated! <script language="JavaScript"> function changeColor(cell_id){var state1="#dde6ed"; var state2="#ffc20e"; var cellid = new Array ("id1", "id2", "id3", "id4", "id5", "id6"); for(var i = 0; i < cellid.length; i++){var nav = document.getElementById(cellid[i]); if(cellid == nav.id){nav.style.backgroundColor=state2;} else {nav.style.backgroundColor=state1;}}} </script> Can anyone tell me what is wrong with this script. I put an onClick= changeColor(this);" in my <td> tag to call the script but still not working. Hello , here is my code(which is not working on my problem) i want to remove anchor tag(href="a") will u please help.... Code: <html>
<head><title>Welcome to DevForum</title></head>
<script language="javascript" type="text/javascript">
function Remove()
{
var anchor = document.getElementsByTagName("a");
var i;
for(i=0;i<anchor.length;i++)
{
var anc=anchor.item(i);
var href=anc.attributes.getNamedItem("href");
if (href.value == "a")
{
anchor.item(i).attributes.getNamedItem("href").value = "";
}
}
}
</script>
<body onload="Remove()">
<h1>Welcome</h1>
<a href="b">b</a>
<a href="a">a</a>
</body>
</html>
Thanks in Advance.... Does anyone know how to make URL links that use Javascript still work when users have Javascript disabled on their browser? The only reason I'm using JS on a URL is because my link opens a PDF file, and I'm forcing it not to cache so users have the latest version. I tried the <script><noscript> tags, but I'm not sure if I'm using it correctly, as my URL completely disappears. Below is my HTML/Javascript code: <p class="download"> <script type="text/javascript">document.write("<span style=\"text-decoration: underline;\"><a href=\"javascript:void(0);\" onclick=\"window.open( 'http://www.webchild.com.au/mediakit/Direct_Media_Kit_Web.pdf?nocache='+ Math.floor( Math.random()*11 ) );\" >The Child Magazines Media Kit</a></span> (PDF 1 MB) ");</script> <noscript><span style="text-decoration: underline;"><a href="http://www.webchild.com.au/mediakit/Direct_Media_Kit_Web.pdf" >The Child Magazines Media Kit</a></span> (PDF 1 MB)</noscript> </p> Thanks for any help, Michael I've just started to learn Javascript at college, and I made a little code that traps people in a dialogue box loop. var escape = 0 for(escape === 0; escape <= 1 confirm("Going somewhere?") I want to know if there is a site, or a possibility I can start this code, simple by sending friends a URL they can click on. For completely innocent purposes, of course. Thanks! Sup gents. Im trying to wrap some html code inside javascript. Problem is i want the picture here to link me to another page, im inserting the link command inside the picture tag put still the link isnt happening. Ive written in a wrong way? Code: document.writeln('<div id="Apartments"><table width="512" height="723" bgcolor="#666633">\n\n <tr>\n <th width="269" height="246" scope="col"><table width="243" height="208" border="1">\n <tr>\n <th height="23" colspan="2" scope="col">Apartment Fola<\/th>\n <\/tr>\n <tr>\n\n <td height="23" colspan="2"><img src="Images\/tn_G1-pokoj.jpg" alt="Fola" width="235" height="139" <a href="apartmentfola.html">/a> <\/>
Hi, is it possible to make a external javascript link by giving all the external links a class name then use getelementbytagname in the js file with a function to alert the hes leaving the website and let him choose if he wants to stay or leave. well thats what im trying to do but i dont know how to write the function for it maybe i could get a suggestion or a link to agood tutorial. / thanks lisa |
|||||||