|
JavaScript - Extracting Links With Class
Hiya!
Trying to figure out how to use javascript to extract all links on a page that have a certain class: e.g. - extract only links with a class of 'tools', ignore all other links: Code: <a href="http://www.google.com" class="tools">Search</a> <a href="http://www.tripod.com" class="grapes">Searched</a> <a href="http://www.dogpile.com">Searches</a> Any help would be appreciated, I'm guessing I probably have to use something like getelementbyclass("tools")? Similar TutorialsEDIT: Great...I already screwed up the title. It's not a div class but anchor class :s I've got previous programming experience but unfortunately none with javascript. I was hoping to get Fancybox working on my website. It actually is already but there's a small problem with dynamic varibles I haven't been able to resolve. I've described the problem in the comment line in the code section. Must be a really simple solution, after all I'm a complete js noob. Note that I've simplified the code by removing parts unnecessary in understanding what I'm after. Code: <html>
<head>
<script type="text/javascript">
$(document).ready(function() {
var title1 = "This is title no 1",
title2 = "This is title no 2",
title3 = "This is title no 3";
$("a#example_video").click(function() {
$.fancybox({
'title' : 'title' + this.className.replace("video", "")
// "title" should equal to "title1", "title2" or "title3" depending on which link a user has clicked. How to accomplish this?
</script>
</head>
<body>
<a class="video1" id="example_video" href= .....>Video1</a>
<a class="video2" id="example_video" href= .....>Video2</a>
<a class="video3" id="example_video" href= .....>Video3</a>
</body>
</html>
Also the only reason for using classnames on anchors is to be able to distinguish between different video clips. Is there a better method I should use? 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? Hello, I am new with Javascript and running into this problem that I don't understand. I define a base class that only contains an array "elements", and a derived class that contains nothing more (for simplicity): Code: function baseClass() {
this.elements = new Array;
}
function derivedClass() {
}
derivedClass.prototype = new baseClass;
Then I create two instances of the derived class, and add two elements in each: Code: a = new derivedClass();
a.elements.push("A");
a.elements.push("B");
b = new derivedClass();
b.elements.push("C");
b.elements.push("D");
When I examine the contents of these arrays, I see that both a.elements and b.elements contain {"A","B","C","D"} ! I.e. as if the two arrays are in fact the same array! But these are two separate instances of the class, I expect two separate arrays. Note that if instead I use the base class: Code: a = new baseClass();
a.elements.push("A");
a.elements.push("B");
b = new baseClass();
b.elements.push("C");
b.elements.push("D");
then I get a.elements = {"A","B"} and b.elements = {"C","D"}, as I would expect. Could someone explain to me the problem with using the derived class? Thank you, Stephanos Hi, I have a bit of a problem and as my javascript is a rather poor I'm struggling to come up with a solution. Basically I need to split the variable "#country" into two parts and call the second half as the "this" value for '#int-dc'. Using '+' as the start point end ending at the end of the string. For instance 'this' returns 12+44 I want to split it to "12" and "+44" the latter (+44) replacing 'this' in the code below. Code: $(function() {
$("#country").change(function() {
$("#int-dc").val
($(this).val());
});
});
Thanks in advance. I need to extract a particular part of a string: Code: var str=(document.images('flag').src);
<img id="flag" src="../../../../img/ip/041-080/049p.png">
I only want the "041-080/049" part. It needs to be read from the right, not the left because the preceding left part will vary in length. How do I approach this? Hi, I'm pretty new to Javascript, by about two weeks, I'm looking for help with a problem I have with the following.... <td title='text1;text2;text3'>text4</td></tr> I'm trying to display text1-3 in a table cell on a rotation, I have this to count through the cells to get to the relevent one... [CODE] function rotateCell() { var delayed = document.getElementsByTagName('td'); //.title.split(';'); for (var i=24;i<24;i++) [CODE] This should allow me to identify the location/cell 24 but can some one tell me how I then extract the tittle data and have them alternate within the cell? I'm not allowed to edit the HTML. Very gratefull for any help PeteW would it be better to place the javascript into a .js file or just place the js code somewhere else in the html? How should it look? Code: <div style="width: 225px; height: 155px; float: left; height: 16px; background-color: #000000; color: #FFFFFF; margin-left: 0px; margin-bottom: 0px; font-size: small; padding-left: 0px;">
<img alt="" src="images/news.png" height="16" width="222" /><div style="width: 225px; height: 155px; float: left;"><script type="text/javascript">// <![CDATA[if(document.layers){document.write('<ilayer id="ns4div" width="'+swidth+'" height="'+sheight+'" bgcolor='+sbcolor+'><div id="ns4div1" width="'+swidth+'" height="'+sheight+'" onmouseover="sspeed=0;" onmouseout="sspeed=rspeed"></div></ilayer>')}
if(document.getElementById||document.all){document.write('<div style="position:relative;overflow:hidden;width:'+swidth+'px;height:'+sheight+'px;clip:rect(0 '+swidth+'px '+sheight+'px 0);background-color:'+sbcolor+';" onmouseover="sspeed=0" onmouseout="sspeed=rspeed"><div id="iens6div" style="position:relative;width:'+swidth+'px;"></div></div>');} // ]]></script>
</div></div>
Hi there... I have a question for the following code (a callback func for ajax) Code: function callBackFunctionForAddAdmin(data)
{
alert(data);
}
If we get the following alert message Quote: <result><error>the given userid is already admin.please enter another one.. </error></result> How do i extract the data inside the "error" tag?? (first checking if it exists and then if so extracting it) I'm trying to get some average rgb values from an image in one canvas object and apply them via fillstyle to a rectangle in another canvas object. I have a dropdown that loads an image onChange()="ChangeBaseWood()" into a canvas object. The second canvas object is to be filled with an average color based on the content of the first canvas onClick="GetBaseColor()". For simplicity I've replaced the for loop with just the values of pixel 0,0. Where I think I am assigning the rgb values, the error console keeps reporting that var sample is undefined at the line "var redpart = sample[0]. Code: function ChangeBaseWood(){
var dropdown = document.getElementById('woodvalue');
var woodcanvas = document.getElementById('basewood');
var woodctx = woodcanvas.getContext('2d');
var woodimage = new Image();
woodimage.onload = function(){
woodctx.drawImage(woodimage, 0, 0,256,256);
};
woodimage.src = dropdown.value;
};
function GetBaseColor(){
var woodcanvas = document.getElementById('basewood');
var woodctx = woodcanvas.getContext('2d');
var sample = woodctx.data
var redpart = sample[0];
var grnpart = sample[1];
var blupart = sample[2];
var staincanvas = document.getElementById('stainbase');
var stainctx = staincanvas.getContext('2d');
stainctx.fillStyle = 'rgb('+redpart+','+grnpart+','+blupart+')';
stainctx.fillRect(0,0,256,256);
};
I've tried various things to assign the redpart,grnpart and blupart but I'm missing something basic. Many Thanks Hi there, I am trying to extract all of the values from the 5th column (Assignee) in this HTML table http://bugzilla.maptools.org/buglist...icksearch=test and don't know how to proceed. Is there a clever way of getting the entire col class: <col class="bz_op_sys_column"> before putting into an array. thanks, kev From this string: "(EVAL)(H:somestring)Other Text here" I need to extract (H:somestring) and somestring into variables where somestring will could be and set of characters. Below is not working. Code: <script type="text/javascript"> var x = "(EVAL)(H:pines)Some other Text here"; alert(x.match(/H\:(.*?)/g)); </script> Thanks for any help or information. I have the following string "d3-23-76-546" I'm looking for a regular expression that will match everything in this string before 546 so that I can replace it with an empty string and just be left with 546. The string could be of any length and contain any number of hyphens. Hello all, this is my first posting and I am happy to have found this forum :-) I have the following question: Is it possible to extract information which is located in a predefined area on the screen from a java platform? For example, there is java based platform which I can see on my screen. This platform contains numbers/letters. The location of these numbers/letters does not change, i.e. the script would not need to be adjusted if the field, which contains the info, would move. Lets assume the screen would look like that: 1234 I 12.20 Love I 1.30 Lake I 32.00 The info between the fields would be clearly separated. Now I would like to extract the infos from all the fields and paste the info for example in EXCEL so that I can see "Valerie12345" in .xls field A1 / 12.20 in A2 / Love in B1 etc... Does anybody of you know if that is possible to extract? Thank you very much in advance, Valerie Hello, I'm working on a project that involves extracting values from a series of select boxes and then working out the result. The select boxes contain the following: Code: <select name="select_Col1_Row1"> <option value="blue">Blue</option> <option value="green">Green</option> <option value="red>Red</option> </select> <select name="select_Col1_Row2"> <option value="blue" selected="selected">Blue</option> <option value="green">Green</option> <option value="red>Red</option> </select> <input type="text" name="RedSum"> <input type="text" name="BlueSum"> <input type="text" name="GreenSum"> </select> As you can see by my code, I'm early days at this and guessing the steps on the way. I tried using getElementsByTagName on the select and then on the option but had no luck with that. The code below does a wonderful job of returning blue for both select statements... Code: <script type="text/javascript">
function getElements()
{
var table = document.getElementById("x");
var x = table.getElementsByTagName("option");
for (var i = 0; i < x.length; i++) {
var status = x[i].getAttribute("selected");
alert(status);
if (status == "selected") {
var statushcap = x[i].getAttribute("id");
var statusvalue =x[i].getAttribute("value");
if (statusvalue == "blue") {
alert(statusvalue);
}
}
}
alert(x.length);
}
</script>
If someone could suggest some way to map the select tag and then extract its option value to being the user selected value, I'd most appreciate it. I can probably do the rest of it. Can you extract additional information from the id of the option that is selected as I'd like to sum additional information from the user's choice. Best, John Hi all, On my site each page is composed by header, contents and bottom. Each part, located respectively at header.php, content1.php, content2.php, ... and bottom.php, is included in page.php. I have a menu, that is the same for all pages, on header.php: Code: <ul class="site-nav"> <li><a href="home.php" class="" name="Home"></a></li> <li><a href="page2.php" class="" name="OK"></a></li> </ul> I'd like to set a class in order to have its corresponding menu with this class="act" for each content.php. I tried this but it doens't work: I add this in content1.php Code: <!-- act for site-nav -->
<script language="javascript" type="text/javascript">function changeClass() {
document.getElementByName("Home").setAttribute("class", act);
}
</script>
and this in top.php Code: <ul class="site-nav"> <li><a href="home.php" class="changeClass()" name="Home"></a></li> <li><a href="page2.php" class="changeClass()" name="OK"></a></li> </ul> Please help me, I don't understand anything of javascript . I'm a amateur and I've just coded this little script. What it does is quite simple, once you click on the 'theBox' div, it switches from one class to another. I can't help having the feeling that this could have been coded in a lot more simple way than the way I've coded. So I thought that maybe you guys could help me out. (Oh, and by the way, the script works fine in FireFox and IE). Code: <script>
function setDivClassName(string){
document.getElementById("divClassName").innerHTML = string;
}
function theBoxOnClick(){
var classes = new Array();
classes[0] = 'zero';
classes[1] = 'one';
classes[2] = 'two';
var currentClassName = document.getElementById('theBox').className;
var currentClassIndex;
var nowGoTo;
for(var i = 0;i <= classes.length-1;i++){
//alert(classes[i]);
if(classes[i] == currentClassName){
currentClassIndex = i;
nowGoTo = currentClassIndex + 1;
}
}
if(classes[nowGoTo] == undefined){
nowGoTo = 0;
}
document.getElementById('theBox').className = classes[nowGoTo];
setDivClassName(classes[nowGoTo]);
}
</script>
<style>
.zero{width:100;height:100;background-color:black;color:white;padding:10;border-style:solid;border-color:red;border-width:2}
.one{width:100;height:100;background-color:yellow;color:red;padding:10;border-style:solid;border-color:red;border-width:2}
.two{width:100;height:100;background-color:red;color:yellow;padding:10;border-style:solid;border-color:red;border-width:2}
</style>
<body onLoad="setDivClassName('zero')">
<div id="theBox" class="zero" onClick="theBoxOnClick()">
This DIV's Class is <div id="divClassName"></div>
</div>
Hi, I need to change my class, but this isn't doing it for me and I don't see why. No error messages, but nothing happens. Code: .myClass {
background-color: yellow;
}
document.getElementById("myId").setAttribute("class","myClass");
Thank You in Advance for Your Help, Lou Alright I have never really created a class before and I have to for a project. This is what I have so far and I will try to explain the requirements I am looking for thoroughly and what problems I am having. Code:
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<script language="javascript" type="text/javascript">
function clock () { //Object Constructor
this.setT = function() { //Method Set Time
//Properties
this.currentTime = new Date ( );
this.currentHours = this.currentTime.getHours ( );
this.currentMinutes = this.currentTime.getMinutes ( );
this.currentSeconds = this.currentTime.getSeconds ( );
}
clock.prototype.displayTime = function () {
clock.setT
}
}
</script>
<body>
<form name="form1">
<p>
<input type="text" rows=7 cols=60 name="currentTime">
<br>
<input type="button" value="Set Time" onClick="clock.displayTime();">
<br>
<input type="button" value="Display Time" onClick="currentTime.value= completeTime;">
<br>
<input type="reset" value="Reset">
</p>
</form>
</body>
</html>
The clock class contains: Three Properties: Hours Minutes, Seconds Two Methods setTime (which uses date class to get current time) Must be defined in the constructor displayTime (returns a string displaying current time) Must be defined as a prototype property of constructor The below is a very rough outline, and probably not correct. I've been reading up on objects for the last few hours and can't be very sure of anything yet. Code: function clock() {
this.currentTime = new Date ( );
var currentHours = currentTime.getHours ( );
var currentMinutes = currentTime.getMinutes ( );
var currentSeconds = currentTime.getSeconds ( );
this.setTime = function() {
}
}
clock.prototype.displayTime = function ( ) {
}
I guess my biggest problem now is the outline. Any help would be great hopefully once i get what goes where i can actually start writing the code. I already have the full code to write a basic clock just like this but it doesn't use classes or any of this. Hello everybody. For the moment im locking for a JavaScript-document. That will be working like this... When we are push on a link, for example to username. So will it coming up a box "<div class="profile_class"></div> From to beeing visibility: hidden; display: none; To be visibility: visibile; display: block; .profile_class { float: left; width: 300px; height: 250px; margin-top: 2px; margin-left: 2px; position: absolute; visibility: hidden; display: block; background-color: #151515; } .profile_class_inactive { visibility: visible; display: none; } When we are push on the mouse outsite the "profile_class" will it beeing closing/invisbile. But when we have it active something like "profile_class" so will it show uz... <ul> <li>Send a message</li> <li>Add contact</li> <li>Block the contact</li> </ul> And on the right site, will it beeing showing uz a little avatar. Can you please help me with this one? So, I have this javascript that works just fine... But... PHP Code: <script language="javascript"> function addBtn() { element = document.createElement("input"); element.setAttribute("type", 'button'); element.setAttribute("value", 'Track'); element.setAttribute("name", 'element'); element.onclick = function() { alert("Tracking"); }; var btn = document.getElementById("gs-track-btn"); btn.appendChild(element); } </script> <div id="gs-track-btn"></div> How would I target that div if the " gs-track-btn " id was a class? |
|||||||