|
JavaScript - Javascript Element Path Question
Fairly new the javascript, as in only been tinkering around for about a day. So forgive me if this is a simple question.
At the moment I have the following function for handling events such as onclick, mouseover, mouseout. Code: function switcher(action, img){
switch(action){
case "hover":
//mouse is on image
document.imgSeat.src = "images/hover.gif";
break;
case "click":
//mouse has clicked image
document.imgSeat.src = "images/click.gif";
break;
default:
//mouse elsewhere
document.imgSeat.src = "images/defaulter.gif";
break;
}
}
And the html the function refers to Code: <body> <div id="imagesholder"> <a href="#nerf"><img border="0" id="seat0" src="images/available.gif"></a> </div> </body> What im trying to do change my function so that instead of it being hard coded for the id "imgSeat" i can use the id passed through the parameter "img" instead. However I seem to be banging my head against the wall. I've tried using the following Code: document.getElementById(img).src = "images/available.gif"; //no error, just does nothing //where img is "0" instead of "seat0" document.seat[img].src = "images/available.gif"; //error: document.seat is undefined Would be extremely greatful if someone should push me in the right direction or show me what im doing wrong. Similar TutorialsHi all, I have been searching for a long time to obtain the UNC path of a file using the FileUpload control using javascript.. Is there any way to obtain it. Can anyone please guide me to the answer. Thank you, Aswin I'm working on a site built through Squarespace, and I've run into some limitations. They've told me it's possible to build a Javascript to pull specific images from one page's journal entries and place them (with links to the entry) on other pages. Can somebody send me in the right direction on how I would do this? Basically I want to find a most recent posting tagged with a specific category, find the file file path of it's related image, and make that appear on the page that my javascript is on. is there some way to searching through multiple path or recursively searching through a path (folders and subfolders) using the code below which seems to search only one node in the tree? Many Thanks. there are basically subfolders in \documents and then subfolders therein. i would like to search it therein for all kinds of files/filenames based on "search criteria". one more thing - is it ok/advisable to use active x objects considering most modern browsers have it disabled or give warnings? Code: <script>
var Fo =new ActiveXObject("Scripting.FileSystemObject");
var StrOut = new String();
var FileName = new String();
var Extention = new String();
function FindFile(FOo)
{
var FSo = new Enumerator(FOo.Files);
for(i=0;!FSo.atEnd();FSo.moveNext())
{
if(FileName == "*" || FSo.item().name.slice(0,FSo.item().name.lastIndexOf(".")).toLowerCase().indexOf(FileName)>-1)
if(Extention == "*" || FSo.item().name.slice(FSo.item().name.lastIndexOf(".")+1).toLowerCase().indexOf(Extention)>-1){
StrOut += "<tr "+ ((i%2)? "":"bgcolor=#C4E3F2") +"><td width=50%><font class=find>" + FSo.item().name + "</font></td><td width=25%><font class=find>" + FSo.item().type + "</font></td><td width=50%><font class=find>"+ String(FSo.item().size/(1024*1024)).slice(0,3) +" MB</font></td></tr>";
i++
}
}
}
function Search()
{
FileName = (search.value.lastIndexOf(".")>-1)? search.value.slice(0,search.value.lastIndexOf(".")):(search.value.length>0)? search.value.toLowerCase():"*"; //Get Searched File Name
Extention = (search.value.lastIndexOf(".")>-1)? search.value.slice(search.value.lastIndexOf(".")+1).toLowerCase():"*"; // Get Searched File Extention Name
if(path.value.length>0 && Fo.FolderExists(path.value)){
StrOut = "<table border=0 width=100% cellspacing=0>"
FindFile(Fo.GetFolder(path.value));
outPut.innerHTML = StrOut+"</table>";
}
else alert("Insert Correct Path Address");
}
</script>
Code: <BODY topmargin="0" leftmargin="0">
<table border=0 width=100% cellspacing="0" style="border-collapse: collapse" cellpadding="2"><tr>
<td dir="ltr" bgcolor="#FFD9D9"><b><font face="Verdana" size="2">Filename :
</font></b> </td>
<td dir="ltr" bgcolor="#C4E3F2">
<input size=50 type=text id=search name=search class="Find"></td>
</tr><tr>
<td dir="ltr" bgcolor="#C4E3F2">
<p dir="ltr"></td>
<td bgcolor="#FFD9D9"><input size=50 type=hidden value="\Documents" id=path name=path class="Find" >
<input type=button value="Search" onClick=Search() class="Find"></td>
</tr><tr>
<td colspan=2 align=left bgcolor="#FFFFFF"><font face=Verdana size=2><b>Search Result</b></font><hr></td>
</tr><tr>
<td colspan=2 bgcolor="#FFFFFF"><div id=outPut></div></td>
</tr></table>
</BODY>
</HTML>
I am using a jQuery slider for a website but the W3C comes up with invalid because: document type does not allow element "div" here .before('<div id="buttons">') Code: <script type="text/javascript">
$(document).ready(function() {
$('#slider')
.before('<div id="buttons"></div>')
.cycle({
fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
pager: '#buttons'
});
});
</script>
Any help with this would be appreciated thanks. HI I want to write a search for my site .I make a new panel in the left of my menue and it has a text input and an image which when that user click on it javascript opens a new window which is a php page.The part I don't know how to do is when the user click on the image it should get the content of the text input and pass it to the url.For the hyperlink of the image I use "<a href="javascriptpen_window('includes/func/search.php?id=" But I don't know what should I write after that to get the content of the text input and put it in the next of the id. How can I do so? Thanks I am trying to make images change as the user selects the option from the dropdown menu , I have called alert("test1"); alert("test2"); to check if the functions are being called but only the first one happens, can you please tell me what's wrong with the script. Here is the script:
Code: var oImageChooser;
addEvent( window, "load", initialize)
function initialize()
{
alert("test1");
var oImageChooser = document.getElementById("imageChooser");
addEvent(oImageChooser, "change", loadCached);
}
var imageLibrary = new Array();
imageLibrary["image1"] = new Image(120,90);
imageLibrary["image1"].src = "images/desk1.gif";
imageLibrary["image2"] = new Image(120,90);
imageLibrary["image2"].src = "images/desk2.gif";
imageLibrary["image3"] = new Image(120,90);
imageLibrary["image3"].src = "images/desk3.gif";
imageLibrary["image4"] = new Image(120,90);
imageLibrary["image4"].src = "images/desk4.gif";
function loadCached()
{
alert("test2");
var imgChoice = oImageChooser.options[oImageChooser.selectedIndex].value;
document.getElementById("thumbnail").src = imageLibrary[imgChoice].src;
}
here is the html Code: <html> <head><title>Image dropdown</title> <script type = "text/javascript" src = "experimento5.js"> </script> </head> <body onload = "initialize()"> <h1> Choose any image</h1> <img id = "thumbnail" src = "images/desk1.gif" > <form> <select id = "imageChooser"> <option value = "image1"> Bands</option> <option value = "image2"> Clips</option> <option value = "image3"> Lamp</option> <option value = "image4"> Erasers</option> </select> </form> </body> </html> Its about this: http://www.wduffy.co.uk/blog/keep-el...omment-page-1/ Everywhere is used for a whole div on some side and when its on the top of the page. But what if its in the middle..? Look here - http://phpbb.bg/viewtopic.php?f=14&p=1013#p1013 Scroll down and then up.Anyway to fix this? I am very new to javascript(and these forums) and I am teaching my self to use the canvas element. I am trying to draw an image to the canvas but nothing is appearing. And I am getting no error in the chrome console. Can anyone see why? Code:
function RPGanimation(options)
{
this.initcanvas(options);
this.initbackground(options);
};
RPGanimation.prototype = {
initbackground: function(options){
this.background = new Image();
this.background.src = options.backsource;
this.background.onload = this.drawbackground();
},
initcanvas:function(options){
this.canvas = document.getElementById(options.canvasid);
this.context = this.canvas.getContext('2d');
this.dimensions = {width:this.canvas.width,height:this.canvas.height};
},
drawbackground:function(){
//document.write('<IMG SRC="Chrysanthemum.jpg">');
this.context.drawImage(this.background,0,0,this.dimensions.width,this.dimensions.height);
}
};
I create the object in a webpage with the canvas element created just before that script tag... i want to add a tooltip----click to copy to the Copy To Clipboard... box like this site(http://www.retailmenot.com). the yellow part with a Scissor. but when i used jquery to add it. it doesn't work. why? i test it on this site: Quote: http://bowser.effectgames.com/~jhuck...rd/test10.html Code: $(document).ready(function(){
$("#d_clip_container").hover(
function () {
$(this).append($('<span class="tip">click to copy</span>'));
},
function () {
$(this).find("span:last").remove();
});
})
i have added the jquery library. The reason of the tooltip can't work maybe the copied text is wrapped by the flash, but this site (retailmenot.com) can do. i don't know why? how to do it? thank you. I started using the Google News Web Element on my website. The website for Google News Web Element is: http://www.google.com/webelements/#!/news I want the links to open in a new window, which cannot be done with the iframe version. Their website only allows me to generate an iframe. I was told that this can be done by using the javascript version, but I have not been able to figure it out. This is their link to the documentation: http://code.google.com/apis/newssearch/newsshow/ I know very little about javascript, and have been trying to get it to work but have been unsuccessful. I want to use the Medium Rectangle size and I want the only topic to be "Swainsboro". The only modification that I want to make is for the links to open in a new window. If anyone can help me do this, it would be appreciated. This is the iframe data that was generated by the wizard: Code: <iframe frameborder=0 marginwidth=0 marginheight=0 border=0 style="border:0;margin:0;width:300px;height:250px;" src="http://www.google.com/uds/modules/elements/newsshow/iframe.html?rsz=large&format=300x250&ned=us&hl=en&q=Swainsboro&element=true" scrolling="no" allowtransparency="true"></iframe> I am new to javascript and would like to search for the element with id but the element id are changing if i use different navigation in that web page example: C21_W68_V69_notes_struct.text changes to C24_W78_V79_notes_struct.text or any other name next time hence i would like to search that element using a pattern like notes_struct.text as there exist only one element ending with this pattern. I am using old version IE and would like to use javascript only. Kindly help. Hello. I have a table with td elements containing numbers in one row and td elements containing textareas in the second row like this: http://motionsroom.com/example.html I want to find an easy way for the user to click, draw a rectangle around or whatever around any several numbers so that they they would be put in a single td element instead of two or three (so we would have: "49 and 12" as the new value) and then the textareas below would also merge. Ideally, I would like to have a rectangle like in RTS games but then I would settle on whatever is easy. Is there any way I could do that? Thanks! Hi people, I'm a novice in javascript and have no clue how to get get the following logic through in a form. Any help will be greatly appreciated. I have searched the forums and looked at a few similar script but can't make out head and tail of it Sorry if this is a oft repeated question. Here is the form I need, the post method is email : Name (txtfield) DOB (Date) Address (txtarea) Programme (Select list) : Options : Programme1, Programme2, Programme3 Date (Select list) : options : 10/10/2009 to 12/09/2009 15/10/2009 to 16/10/2009 Venue : Mainland Harvey Waterloo Time : 9am - 12 noon 1 pm - 3 pm 3 pm - 5 pm Here is the Logic : Date : Conditions If Programme1 is selected then date options 10/10/2009 to 12/09/2009 and 15/10/2009 to 16/10/2009 should both be selectable. If Programme2 is selected then date options 10/10/2009 to 12/09/2009 and 15/10/2009 to 16/10/2009 should both be selectable. If Programme3 is selected then date option 15/10/2009 to 16/10/2009 should auto selected and greyed out so that user don't have to select this. Venue : Conditions If Programme = Programme1 then all the venues should be selectable. If Programme = Programme2 and date = 10/10/2009 to 12/09/2009 then all the venues should be selectable. If Programme = Programme2 and date = 15/10/2009 to 16/10/2009 then only venues Harvey and Waterloo should be selectable. If Programme = Programme3 and date = 15/10/2009 to 16/10/2009 then only venue Waterloo should be selectable.... in fact venue Waterloo should be auto selected and greyed out so that user cannot change it. Time :Conditions : Always should be default selection and greyed out If Programme = Programme1 and venue is any one of Mainland, Harvey, Waterloo then the time should default to 9 am - 12 noon. If Programme = Programme2, Date = 10/10/2009 to 12/09/2009 and venue is any one of three then, the time should default to 1 pm - 3 pm. If Programme = Programme2, Date = 15/10/2009 to 16/10/2009 and venue is one of Harvey or Waterloo then the time should default to 1 pm - 3 pm If Programme = Programme3, Date = 15/10/2009 to 16/10/2009 and venue = Waterloo then the default time should be 3 pm to 5 pm Sorry for the long post and so many conditions. I'm trying to get a hang of how to go about doing this. This looks a pretty complicated logic but if you can point me in the right direction I'm sure I will get my head around this. Thanks for having a look and thanks in advance for any help. Cheers Hi all, I am looking for a script that I can only describe. Often, in facebook, when a new window opens there is only the first few lines of text visible followed by a few dots with an invitation to "read more". Once clicked the additional text expands and becomes visible. I don't even know what this behavior is called so it's hard to get started. Any help or pointers in the right direction will be much appreciated. Anita. Cape Town. Im creating a portfolio site for myself that my have gotten a little too ambitious but I'd still like to make this work. My main site loads a video demo reel using the new <video> tag and to make it look cooler has an "ambilight" television effect around it. For usability and for users that find it annoying or distracting I want a toggle to turn the effect off. I have my checkbox created as well as all the effects working for it. Here is a piece of the main code as well as a link to the ambilight.js file Code: <label name="ambilightToggle">
<input type="checkbox" name="toggle"/>
<div class="toggle-switch">
<div class="handle"></div>
<div class="track">
<span>OFF</span><span>ON</span>
</div>
</div>
</label>
</div>
</div>
<div id="main" class="clearfix">
<div id="video-edge">
<img id="ribbon" width="112" height="112" alt="Demo Reel Ribbon" src="img/ribbon-demoreel.png">
<div id="video-wrap" class="video-js-box moo-css">
<video id="example" class="video-js" width="720" height="405" controls preload poster="posters/poster_demoreel2010.png">
<source src="video/demoreel2010.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="video/demereel2010.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="video/demoreel2010.ogv" type='video/ogg; codecs="theora, vorbis"' />
</video>
</div>
</div>
<script type="text/javascript">
ambiLight.create(document.getElementById('example'))
</script>
Portfolio Page http://www.eschulist.com/test/js/ambilight.js I was able to make the ambilight effect go away using this, but it only works for a second as the video continues to play and the new lights are redrawn. Code: <script type="text/javascript">
$(document).ready(function(){
$(this).click(function(){
$('canvas.ambilight-left, canvas.ambilight-right').addClass('goAway');
});
});
</script>
Any other ideas on what to do? If the click function works I should be able to have it check the checkboxes state and have it persist. Maybe? never mind
|
|||||||