javascript drop-down menu: how to link to different sites? - javascript

I'm a college student trying to create a drop-down menu for my professor. Since I don't have any programming background, I found a program called "SoThink DHTML" that generated a code for me, but there are some errors within that I don't know how to fix.
The menu, overall, should have tabs to "Home," "Research" (3 subtabs: "Research Projects," "Systems and Approaches," and "Images and Movies"), "Publications, "Lab Members," "Links," and "Contact Us." The automatically generated code, however, doesn't provide links to some of these titles, and I was wondering how can I insert the links manually?
How can I insert the paths so that they do not refer to specific files, but are more flexible when I move the folder containing the website?
I hope that this makes some sense..
Thank you so much for your help in advance!!
stm_bm(["menu1c53",960,"","blank.gif",0,"","",1,0,250,0,1000,1,0,0,"","100%",0,0,1,2,"default","hand","",1,25],this);
stm_bp("p0",[0,4,0,0,0,0,0,15,100,"",-2,"",-2,50,0,0,"#999999","transparent","line1.gif",3,0,0,"#000000"]);
stm_ai("p0i0",[0,"Home","","",-1,-1,0,"","_self","","","","",0,0,0,"","",0,0,0,1,1,"#E6EFF9",1,"#E6EFF9",1,"","line2.gif",1,3,0,0,"#E6EFF9","#000000","#426b10","#426b10","bold 9pt Verdana","bold 9pt Verdana",0,0,"","line2.gif","","line2.gif",2,2,42],100,0);
stm_aix("p0i1","p0i0",[0,"Research","","",-1,-1,0,"","_self","","","","",0,0,0,"arrow1.gif","arrow2.gif",15,9],100,0);
stm_bp("p1",[1,4,0,-3,6,0,5,0,100,"progid:DXImageTransform.Microsoft.RandomDissolve(,enabled=0,Duration=0.30)",12,"",-2,80,0,0,"#999999","#beeb94","",3,0,0,"#CCCCCC","",-1,-1,0,"transparent","",3,"",-1,-1,0,"transparent","",3,"line3.gif",-1,-1,0,"transparent","line3.gif",3,"",-1,-1,0,"transparent","",3,"","","","",1,1,1,1,1,1,1,1]);
stm_ai("p1i0",[0,"Research Projects","","",-1,-1,0,"./Research_Projects.html","_self","","","","",5,1,0,"","",0,0,0,0,1,"#E6EFF9",1,"#edf9e1",0,"","",3,3,0,0,"#E6EFF9","#000000","#426b10","#426b10","7pt Verdana","7pt Verdana",0,0,"","","","",0,0,0],0,20);
stm_aix("p1i1","p1i0",[0,"Systems and Approaches","","",-1,-1,0,"./Systems_and_Approaches.html"],0,20);
stm_aix("p1i2","p1i0",[0,"Images and Movies","","",-1,-1,0,"./Images_and_Movies.html"],0,20);
stm_mc("p1",[7,"#1E1E1E",1,2,"",3]);
stm_ep();
stm_aix("p0i2","p0i0",[0,"Publications","","",-1,-1,0,"#"],100,0);
stm_aix("p0i3","p0i2",[0,"Lab Members"],100,0);
stm_aix("p0i4","p0i2",[0,"Links"],100,0);
stm_aix("p0i5","p0i2",[0,"Contact Us"],100,0);
stm_ep();
stm_em();

It looks like you are using relative urls, which find a file based on the current location. Therefore they mean different things when the file containing the urls is in different places.
../../public/img/logo.gif
absolute urls start from the root of the website, which means you can move the file containing them anywhere and it will still refer to the same location.
http://www.somedomain.com/en/public/img/logo.gif
more on the difference (warning, get technical).

Related

What type of code is this? how/can I get javascript to recognize it?

I'm new to html and javascript, learning on the go to help update a website for the company i work for. The company does it through a browser program/interface called NETKIT / Adobe Business Catalyst. You can create pages for new projects which are called webapps and you can classify them to different groups for sorting, e.g. Water projects, Civil projects. Once you create a database of webapps, you can insert this line of code in html which will produce a thumbnail list of projects for which you've filtered for:
{module_webapps id="3388" resultsPerPage="20" filter="all" rowCount="3" template="/Templates/projectspage.tpl"}
So this code will show all projects in the database in rows of 3's, 20 results per page etc. It works fine when I insert it by itself in html, but I want to use it in javascript, however when i do it doesn't recognize the code and it doesn't show on the page.
For example:
html:
<div id="demo">
</div>
Script:
document.getElementById("demo").innerHTML = '{module_webapps id="3388" resultsPerPage="20" filter="all" rowCount="3" template="/Templates/projectspage.tpl"}'
I've tried with and without ' but nothing shows up within the div. If i replace the module_webapps code with simple text like = 'demo' then text shows up.
Does anyone know if its possible to include this code in a script? Or even better is it possible to create a html select/option with javascript that can change an internal piece of the code, e.g change filter="all" to filter="waterprojects"
Thanks for the help

How to use a random HTML file in JavaScript?

I'm having problems trying to figure this out, specifically because I'm really new to javascript. So, I have this place in my page where I want to have a random html file that I will make in html and I will like to link to it. I want it to be randomized every time the page refreshes, because I will do lots of these html files.
So, is this possible? I've searched for answers but all of the randomized html questions I've found are about the whole page. I just want a little part of the page to be randomized, similar to the random image I have in the same webpage.
The page I'm using for testing is this one: http://vannapruebas.jcink.net/ , I would like to use the toggle that says "búsquedas" for this. So, any help? thanks and exuse my poor english!
All you have to do is make a list of all your html, then you pick one randomly with -> Getting a random value from a JavaScript array.
I used jQuery just for easier demo
var listOfHTML = ["sample/your.html","sample/another.html"];
$('#magic').on('click',function(e){
var randomHTML = listOfHTML[Math.floor(Math.random()*listOfHTML.length)];
$.get(randomHTML,function(response){
$('#yourDiv').html(response);
//do your animation when completed
});
});
<div id="yourDiv"></div> <button id="magic">búsquedas</button>

Parsing varied URLs and adding .active class to #navigation

I need a jQuery (or JavaScript) that will parse a page’s current URL and apply a css class (.active) to the site’s navigation (#nav tabs), in order to highlight the current active section of the site. The site produces a variety of URLs, many of which will result in the same #nav link being made active.
Example URL 1: mycompany.com/Page.asp?name=foo
There are about a dozen “named” .asp pages that fall under 3 nav tabs (name=foo, name=boo, name=poo, name=woo, name=zoo, where foo and woo are active under #nav1, boo and poo are active under #nav2, zoo is active under #nav3, etc…)
Example URL 2: mycompany.com/fooapage.aspx?vwc=2345678…
There are several server-generated URLs that all start with the same filename “fooapage.asp, foobpage.asp, foocpage.asp, foodpage.asp,” where all the “foo…” pages will activate the same #nav tab.
Example URL 3: mycompany.com/bar.asp
There are also several pages that are unique .asp filenames (“a.asp, b.asp, c.asp, d.asp…”) which will need to point to different #nav tabs.
So what I need is a script that will parse out my url and add the .active class to the correct #nav tab as needed. Sadly, I’m a javascript noob, and am not sure how to best do this.
if name=foo then #nav1.active
if name=poo then #nav2.active
if name=woo then #nav3.active
if name=zoo then #nav1.active
et cetera…
if filename(starts with)foo then #nav4.active
if filename==a.asp then #nav5.active
if filename==b.asp then #nav5.active
if filename==c.asp then #nav6.active
if filename==x.asp then #nav6.active
if filename==y.asp then #nav7.active
if filename==z.asp then #nav7.active
et cetera…
I’ve been looking at scripts & functions that parse out URLs, and if/then statements, but i’m not sure quite how to put them all together in the correct way. Any advice, insight, or assistance would be very much appreciated. Thank you all in advance for any time or consideration you give this problem.

javascript or jquery method of getting the source of an image if.. matching a certain pattern

I have a very old site with lots of files, for years it was put together and orgainized by year and in a particular fashion. Well I am upgrading the site. But in one section an "Articles" section I have close to 1,000 files, that I don't want to go through and manually edit one or two images per.
So I am hoping i can figure out a way to match the source tag where when the source is ../imgs/ I can find the actual file name being used and just change the source. My problem is finding the source attribute matching it to the dired and then getting the image name off the end of it. when the full path could be like
../imgs/i2012/image-file.png, ../imgs/i2011/image-file.png, ../imgs/i2010/image-file.png, ../imgs/i20xx/image-file.png "image-file.png" just being an arbitrary example
Its hard to visualize a image tag, so I am adding one here for reference..
<img src="../imgs/i2012/example-image.png" alt="example-image" vspace="5" hspace="5" align="left" />
And to try and re-elaborate, not all images on the site stopped working, and all else, but the ones that have use an image source attribute similar to the above, but the i20xx and file name are different. So. I am trying to figure out how to take that image src tag. Find if it has ../imgs/ in it, and and if it does, I'd like to grab the "example-image.png" from it, so I can apply a new URL overall to the src attribute in the end using JS, which changing it isn't my problem, matching it so I can then get the file, and change the url appending that file to the url is my problem
You can use the attribute starts with selector to match any images with a source starting with
../imgs/, and then iterate over those images, getting the filename into an array:
var images = [];
$('img[src^="../imgs/"]').each(function(i, el) {
images.push( $(el).attr('src').split('/').pop() );
});

Stop the cutting off of index.html

I'm not sure if this question has been asked elsewhere but I can't find anything on it, so here goes..
I am currently hosting a website with which I use a small, simple Javascript function to add effects to certain list items on my navigation bar depending on whether the function is able to find certain matches to text in the address. Here is the function:
function NavBar(){
var address = (location.href);
if(address.search("index")!==(-1)){
document.getElementById('Nav-Home').firstChild.setAttribute('style', 'color: #cecece');
}
if(address.search("work")!==(-1)){
document.getElementById('Nav-Work').firstChild.setAttribute('style', 'background-color: #E5E5E5;');
}
if(address.search("library")!==(-1)){
document.getElementById('Nav-Tutorial').firstChild.setAttribute('style', 'background-color: #E5E5E5;');
}
if(address.search("contact")!==(-1)){
document.getElementById('Nav-Contact').firstChild.setAttribute('style', 'background-color: #E5E5E5;');
}
if(address.search("about")!==(-1)){
document.getElementById('Nav-About').firstChild.setAttribute('style', 'background-color: #E5E5E5;');
}}
Consequently, my pages are stored in the website directory under each folder name (Work, Tutorial, Contact and About). However, whether I store the index.html file in a separate folder or whatever I can't seem to find away to get the word "index" to appear in the site address (I'm aiming for something like http://site.com/index.html).
Does anyone have any way I can add the index.html to the default home page rather than having it cut off, or perhaps change my function?
Thanks very much

Categories