|
JavaScript - Js And Placing A Header Below
Hello all ~ It's been a long time since I've been on here, but I am trying to insert a header into my pages at http://www.dreamsonthefly.com the header being "Guided Fly Fishing on the Owyhee & Grande Ronde Rivers". I am not finding any .css on the page so I am hoping I can place in where it sits now but using the JS below and getting more space so the drop down menus don't interfere with the h1. I use Homestead and found when I was working with the JS Homestead put's their own code in as needed for their site. I am not well versed in all of this but I do understand what I need just not certain how to do it.
I sure hope this all makes sense and appreciate the help. Code:
<div align="center">
<img src="headerforflybooklarger.jpg" alt="Fly fishing for Steelhead, Brown Trout & Smallmouth Bass" width="1020" height="126" hspace="0"/>
</div>
<div align="center">
<script type="text/javascript" language="JavaScript1.2">
<!--
stm_bm(["menu3374",430,"","blank.gif",0,"","",1,2,2,2,1000,1,1,1,"","100%",83886335],this);
stm_bp("p0",[0,4,0,0,15,3,0,7,100,"progid:DXImageTransform.Microsoft.Fade(overlap=.5,enabled=0,Duration=0.10)",-2,"progid:DXImageTransform.Microsoft.Fade(overlap=.5,enabled=0,Duration=0.10)",-2,100,0,0,"#000000","transparent","",0,0,0,"#000000"]);
stm_ai("p0i0",[0,"Home","","",-1,-1,0,"http://www.dreamsonthefly.com/index.html","_self","","","","",0,0,0,"","",0,0,0,1,1,"#A87F09",1,"#A87F09",1,"","",0,0,0,0,"#A87F09","#000000","#000000","#000000"," bold 12pt Garamond"," bold 12pt Garamond",0,0],10,0);
stm_aix("p0i1","p0i0",[0,"The Fish","","",-1,-1,0,"http://www.dreamsonthefly.com/thefish.html"],10,0);
stm_aix("p0i2","p0i0",[0,"Destinations","","",-1,-1,0,"http://www.dreamsonthefly.com/destinations.html","_self","","","","",0,0,0,"arrow_r.gif","arrow_r.gif",7,7],10,0);
stm_bp("p1",[1,4,0,-1,4,3,0,0,100,"progid:DXImageTransform.Microsoft.Fade(overlap=.5,enabled=0,Duration=0.41)",-2,"progid:DXImageTransform.Microsoft.Fade(overlap=.5,enabled=0,Duration=0.41)",-2,69,2,8,"#A87F09","",0,1,1,"#000000"]);
stm_aix("p1i0","p0i0",[0,"Owyhee Trout","","",-1,-1,0,"http://www.dreamsonthefly.com/owyhee.html","_self","","","","",0,0,0,"","",0,0,0,1,1,"#A87F09",1,"#A87F09",1,"","",0,0,1,1],10,0);
stm_aix("p1i0","p0i0",[0,"Grande Ronde","","",-1,-1,0,"http://www.dreamsonthefly.com/granderonde.html","_self","","","","",0,0,0,"","",0,0,0,1,1,"#A87F09",1,"#A87F09",1,"","",0,0,1,1],10,0);
stm_aix("p1i1","p1i0",[0,"Owyhee Bass","","",-1,-1,0,"http://www.dreamsonthefly.com/ofloat.html"],10,0);
stm_ep();
stm_aix("p0i3","p0i2",[0,"Guides","","",-1,-1,0,"http://www.dreamsonthefly.com/Newguides.html"],10,0);
stm_bpx("p2","p1",[]);
stm_aix("p2i0","p1i0",[0,"Dave Tucker","","",-1,-1,0,"http://www.dreamsonthefly.com/dtguide.html"],10,0);
stm_aix("p2i1","p1i0",[0,"Rhonda Price","","",-1,-1,0,"http://www.dreamsonthefly.com/rkpguide.html"],10,0);
stm_aix("p2i2","p1i0",[0,"Our Guides","","",-1,-1,0,"http://www.dreamsonthefly.com/guidesbios.html"],10,0);
stm_ep();
stm_aix("p0i4","p0i0",[0,"Rates","","",-1,-1,0,"http://www.dreamsonthefly.com/newlodging.html","_self","","","","",0,0,0,"","",0,0,0,1,1,"#A87F09",1,"#A87F09",1,"","",0,0,0,0,"#A87F09","#000000","#000000","#000000","bold 12pt Garamond","bold 12pt Garamond",0,0],10,0);
stm_aix("p0i5","p0i2",[0,"Flies","","",-1,-1,0,"http://www.dreamsonthefly.com/allflyinfo.html"],10,0);
stm_bpx("p3","p1",[]);
stm_aix("p3i0","p1i0",[0,"Steelhead Flies","","",-1,-1,0,"http://www.dreamsonthefly.com/steelheadflies.html"],10,0);
stm_aix("p3i1","p1i0",[0,"Trout Flies","","",-1,-1,0,"http://www.dreamsonthefly.com/troutflies.html"],10,0);
stm_aix("p3i2","p1i0",[0,"Atlantic Salmon Flies","","",-1,-1,0,"http://www.dreamsonthefly.com/atlanticsalmonflies.html"],10,0);
stm_ep();
stm_aix("p0i6","p0i4",[0,"Photos","","",-1,-1,0,"http://www.dreamsonthefly.com/photogallery.html"],10,0);
stm_aix("p0i7","p0i2",[0,"Contact Us","","",-1,-1,0,"http://www.dreamsonthefly.com/Contact.html"],10,0);
stm_bpx("p4","p1",[]);
stm_aix("p4i0","p1i0",[0,"Airline Reservations","","",-1,-1,0,"http://www.travelstoremaker.com/cgit/porch?agentid=dreamsonthefly"],10,0);
stm_ep();
stm_aix("p0i8","p0i2",[0,"Links","","",-1,-1,0,"http://www.dreamsonthefly.com/links.html"],10,0);
stm_bpx("p5","p1",[]);
stm_aix("p5i0","p1i0",[0,"Education","","",-1,-1,0,"http://www.dreamsonthefly.com/education.html"],10,0);
stm_aix("p5i1","p1i0",[0,"Resources","","",-1,-1,0,"http://www.dreamsonthefly.com/resources.html"],10,0);
stm_ep();
stm_aix("p0i9","p0i0",[0,"Blog","","",-1,-1,0,"http://www.dreamsonthefly.com/blog.html","_self","","","","",0,0,0,"","",0,0,0,1,1,"#A87F09",1,"#A87F09",1,"","",0,0,0,0,"#A87F09","#000000","#000000","#000000","bold 12pt Garamond","bold 12pt Garamond",0,0],10,0);
stm_ep();
stm_aix("p0i9","p0i0",[0,"Book Trip ","","",-1,-1,0,"http://www.theflybook.com/Default.aspx?shop=108e506d-f6f6-4356-8e19-1e682ece3bf1","_self","","","","",0,0,0,"","",0,0,0,1,1,"#A87F09",1,"#A87F09",1,"","",0,0,0,0,"#A87F09","#000000","#000000","#000000","bold 12pt Garamond","bold 12pt Garamond",0,0],10,0);
;
;
stm_ep();
stm_ep();
stm_em();
//-->
</script>
</div>
Similar TutorialsHello, I have following javascript that loads a streetmap: Code: <script type="text/javascript"> geoportaal_type = "gemeente"; geoportaal_id = "blankenberge"; geoportaal_startupmodule = "stratenatlas"; geoportaal_bgcolor = "FFFFFF"; </script> <script type="text/javascript" src="http://www.geoportaal.be/syndication/toonportaal.js"></script> What I want to do is pretty simple: create a little searchbox on my homepage where people can enter their streetname and housenumber and the map loads. To do this i use following code related to a script: Code: <script type="text/javascript"> geoportaal_niscode = "vilvoorde"; geoportaal_startupmodule = "stratenatlas"; geoportaal_bgcolor = "FFFFFF"; geoportaal_request_name = "toonadres"; geoportaal_request_parameters = "straat=Kerkstraat&huisnr=1"; </script> <script src="http://www.geoportaal.be/syndication/toonportaal.js"></script> Basically the same as mentioned earlier, though some other tags must be used. How do I create the fields (values) to enter the text and the OK-button to confirm the search? When users press the OK-button the script must load. When loading, following values are important: geoportaal_request_parameters = "straat=Kerkstraat&huisnr=1where straat=VALUE1&huisnr=VALUE2 So: VALUE1=streetname VALUE2=housnumber All I need is the script to take the values entered by the users and to paste these values on the right place (code above). How do i do this, do i need an onclick-handler for this? This is html-code for the searchbox but no actions are defined yet: Code: <div id=locationsearch>
<table id="form">
<tr><td>Straatnaam:</td><td><form id="form1" name="form1" method="post" action="">
<label>
<input type="text" name="straat" id="VALUE1" />
</label>
</form></td></tr>
<tr><td>Huisnummer:</td>
<td><form id="form2" name="form2" method="post" action="">
<label>
<input type="text" name="huisnr" id="VALUE2" />
</label>
</form></td></tr>
<tr><td> </td><td><form id="form3" name="form3" method="post" action="">
<label>
<input type="submit" name="toonadres" id="toonadres" value="Lokaliseer" />
</label>
</form></td></tr>
</table>
</div>
Please advise from A to Z. I'm a novice. Thank you in advance, William. I have the 10000th word and I want to put the this symbols [ and this ] the beginning and end of words .. so my question is .. how do I put the symbol is simultaneously the 10000th word that is .. there is not any program that can do such ... please help .. example : [can] [you] [me] [and] [ask] [google] [yahoo] [and over 10000 ++ more] In javascript normally when you call .focus() on a textbox id, it places the cursor inside the textbox. Trying the same on ipad does not place the cursor in the text field and the keypad does not pop up. How to place cursor and bring up the keypad on ipad using javascript? Any help is appreciated I have placed the <script></script> in the <head></head> tags and the page will not work. But placing the <script> below the element that the JS works with allows the page to work but thought the correct method to use was place all JS functions inside the <head> tags? here is a link to the folder I am testing this out on. http://www.realistichostings.com/test_booking/ I have named the two files accordingly, test_booking_page-script is in head tags.php test_booking_page-script is outside head tags.php can anyone tell me why the code works outside the head tag but not when i is inside the head tag ? I HAVE CHANGED THE LOCATION
Hi, I wonder if anyone can help me. I have a header I use on my site which has a Javascript code for rotating banner ads. I'd like to try to track the clickthroughs on these ads and have been looking at the methods of doing this in google analytics, but they all seem to be for single links, such as the method he http://support.google.com/googleanal...n&answer=55527 which then don't work with the links as they are in the banner. I was wondering if anyone knew how I would be able to integrate the analytics code in that link into the banner I have, or of another method I can use to track clicks on the ads. Thanks! This is the banner I'm using: Code: <script type="text/javascript">function initArray() {
this.length = initArray.arguments.length;
for (var i = 0; i < this.length; i++) {
this[i] = initArray.arguments[i];
}
}
link = new initArray(
"http://www.jojingles.com",
"http://www.goals-solutions.com/",
"http://www.barleylands.co.uk/",
"http://www.blukangaroo.co.uk/onlineshop",
"http://www.explorelearning.co.uk/vebo",
"http://www.explorelearning.co.uk/vebo",
"http://www.allmumkind.com/",
"http://quintessencemassage.weebly.com",
"http://www.dw-beauty.co.uk",
"http://www.theclothestree.co.uk"
);
image = new initArray(
"http://www.essexmums.org/images/jojingleslong.gif",
"http://www.essexmums.org/images/goalssolutionbanner.jpg",
"http://www.essexmums.org/images/barleylandsbanner.jpg",
"http://www.essexmums.org/images/blukangaroo.jpg",
"http://www.essexmums.org/images/explorelakeside.jpg",
"http://www.essexmums.org/images/explorelakeside.jpg",
"http://www.essexmums.org/images/allmumkind3.jpg",
"http://www.essexmums.org/images/quintessence.jpg",
"http://www.essexmums.org/images/dwbannerad.jpg",
"http://www.essexmums.org/images/clothestree.jpg"
);
text = new initArray(
"Jo Jingles",
"Goals Solution",
"Barleylands",
"Blu Kangaroo",
"Explore Lakeside",
"Explore Lakeside",
"Allmumkind",
"Quintessence",
"DK Beauty",
"The Clothes Tree"
);
function getrandom(){
var core2 = Math.floor(Math.random()*10); // amount of items in array
displaybanner(core2)
displaybanner(core2)
}
function displaybanner(theNum2){
var ranlink2 = link[theNum2];
var ranimage2 = image[theNum2];
var rantext2 = text[theNum2];
document.getElementById('theImg2').alt=rantext2;
document.getElementById('theImg2').src=ranimage2;
document.getElementById('theLink2').href=ranlink2;
}
</script><a href="#" target="_blank"
id="theLink2"><img src="" alt=""
id="theImg2" border="0"></a>
<script type="text/javascript">
getrandom();
setInterval("getrandom()", 22000);
</script>
Hi all! I am trying to implement the "Freeze pane" feature in javascript as it is in excel. I am almost there but am not able to get one last thing. The row header freezing is achieved first column freezing is also achieved. However, the top left column cell (which is supposed to stay frozed during both horizontal and vertical scroll) is not frozen. Prompt help is highly appreciated! Please find the html file and the js file being used. Thanks a bunch! Ree A full description of the problem, all the code and the test is also posted on: http://happinesshabitS.com/testroto4.htm I am trying to install a rotating banner on http://HappinessHabit.com How do I position the banner so it is NOT at the upper left hand corner of the page? I have tried wrapping it in <div> tags but that hasn't worked. I can get it rotating fine on the test page, but cannot place the rotating banner where I need it - see: http://happinesshabitS.com The code I placed on the test page is: Code: <script type="text/javascript" src="jshdrotate-1.js" ></script> </head> and Code: </head> <body onLoad="preloadImgs();randomImages();"> <img src="rotoimage1/ri-image-01.jpg" name="rotator" width="800" height="135" border="0" id="rotator"></a> Can I place this right above the </body> tag? The code I placed in a separate (jshdrotate-1.js) file is on http://happinesshabits.com/javahelp.pdf and below: Code:
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
// Comma separated list of images to rotate
var imgs = new Array('rotoimage1/ri-image-01.jpg','rotoimage1/ri-image-02.jpg','rotoimage1/ri-image-03.jpg','rotoimage1/ri-image-04.jpg','rotoimage1/ri-image-05.jpg', 'rotoimage1/ri-image-06.jpg', 'rotoimage1/ri-image-07.jpg', 'rotoimage1/ri-image-08.jpg','rotoimage1/ri-image-09.jpg', 'rotoimage1/ri-image-10.jpg','rotoimage1/ri-image-11.jpg', 'rotoimage1/ri-image-12.jpg');
// delay in milliseconds between image swaps 1000 = 1 second
var delay = 6000;
var counter = 0;
function preloadImgs(){
for(var i=0;i<imgs.length;i++){
MM_preloadImages(imgs[i]);
}
}
function randomImages(){
if(counter == (imgs.length)){
counter = 0;
}
MM_swapImage('rotator', '', imgs[counter++]);
setTimeout('randomImages()', delay);
}
Many thanks for your help ! I am really in the dark about this. I'd asked this question before but didn't get any replies. Did I post and describe what I am trying to do and the problem correctly? Many thanks! Hey all, I have the old Yahoo! chess engine and Im making a webpage with a chessboard. Currently everything involved with this chessboard is wrapped up inside the code and dynamically creates everything it needs to operate. I have made a few customizations on several elements such as the PHP dropdown box that it dynamically creates as a quickjump to games. But i am wondering if someone wouldn't mind helping me in finding a way to write an amendment that reads 3 parts of the pgn file (Black)(Result)(White) (which it already does read them but just shows the info in the dropdown box) and display them as a header to the board. Everything in this script as far as variables go, are numbers... which makes it difficult at best which makes visual mapping harder. So I thought I would ask a professional what I should be looking for in the script so that I can go ahead and modify it and reuse some functionality to display a game header from javascript. The pgn viewer will read either string format directly input into the setup configuration in the html page, or it will read from a file. It them parses the elements based on the pgn tags. PHP Code: var tag=this.parseTag("FEN",pgn,i); if(tag&&tag!="?"){ this.board.startFen=tag; }else{ tag=this.parseTag("White",pgn,i); if(tag&&tag!="?"){ _68=tag; }else{ tag=this.parseTag("Black",pgn,i); if(tag&&tag!="?"){ _63=tag; }else{ tag=this.parseTag("Result",pgn,i); if(tag&&tag!="?"){ _62=tag; }else{ tag=this.parseTag("Event",pgn,i); if(tag&&tag!="?"){ _64=tag; }else{ tag=this.parseTag("Site",pgn,i); if(tag&&tag!="?"){ _65=tag; }else{ tag=this.parseTag("Date",pgn,i); if(tag&&tag!="?"){ _66=tag; So the variables I want to use are _68, _63, & _62 and display them as a header to the board. Any help is appreciated. I would like to somehow get both of these identical slideshow scripts working at the same time. Any help would be much appreciated! Code: <!-- dress -->
<div class= dress>
<div style="position:absolute; background-color:transparent; border-color: #000000; border:0px solid ; top: 443px; left: 346px; width:397px; height:255px;">
<script language="JavaScript1.2">
var variableslide=new Array()
//variableslide[x]=["", "", ""]
variableslide[0]=['dress/1.png', '', '']
variableslide[1]=['dress/2.png', '', '']
variableslide[2]=['dress/3.png', '', '']
//configure the below 3 variables to set the dimension/background color of the slideshow
var slidewidth='395px' //set to width of LARGEST image in your slideshow
var slideheight='255px' //set to height of LARGEST iamge in your slideshow, plus any text description
var slidebgcolor='transparent'
//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=200
////Do not edit pass this line////////////////
var ie=document.all
var dom=document.getElementById
for (i=0;i<variableslide.length;i++){
var cacheimage=new Image()
cacheimage.src=variableslide[i][0]
}
var currentslide=0
function rotateimages(){
contentcontainer='<center>'
if (variableslide[currentslide][1]!="")
contentcontainer+='<a href="'+variableslide[currentslide][1]+'">'
contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="3">'
if (variableslide[currentslide][1]!="")
contentcontainer+='</a>'
contentcontainer+='</center>'
if (variableslide[currentslide][2]!="")
contentcontainer+=variableslide[currentslide][2]
if (document.layers){
crossrotateobj.document.write(contentcontainer)
crossrotateobj.document.close()
}
else if (ie||dom)
crossrotateobj.innerHTML=contentcontainer
if (currentslide==variableslide.length-1) currentslide=0
else currentslide++
setTimeout("rotateimages()",slidedelay)
}
if (ie||dom)
document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')
function start_slider(){
crossrotateobj=dom? document.getElementById("slidedom") : ie? document.all.slidedom : document.slidensmain.document.slidenssub
if (document.layers)
document.slidensmain.visibility="show"
rotateimages()
}
if (ie||dom)
start_slider()
else if (document.layers)
window.onload=start_slider
</script>
</div>
<!-- end dress -->
<!-- hair -->
<div class="hair">
<div style="position:absolute; background-color:transparent; border: 0px solid; border-color: #000000; left:436px; top:105px; width:227px; height:227px;">
<script language="JavaScript1.2">
var variableslide=new Array()
//variableslide[x]=["", "", ""]
variableslide[0]=['hair/1.png', '', '']
variableslide[1]=['hair/2.png', '', '']
variableslide[2]=['hair/3.png', '', '']
//configure the below 3 variables to set the dimension/background color of the slideshow
var slidewidth='227px' //set to width of LARGEST image in your slideshow
var slideheight='227px' //set to height of LARGEST iamge in your slideshow, plus any text description
var slidebgcolor='transparent'
//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=100
////Do not edit pass this line////////////////
var ie=document.all
var dom=document.getElementById
for (i=0;i<variableslide.length;i++){
var cacheimage=new Image()
cacheimage.src=variableslide[i][0]
}
var currentslide=0
function rotateimages(){
contentcontainer='<center>'
if (variableslide[currentslide][1]!="")
contentcontainer+='<a href="'+variableslide[currentslide][1]+'">'
contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="3">'
if (variableslide[currentslide][1]!="")
contentcontainer+='</a>'
contentcontainer+='</center>'
if (variableslide[currentslide][2]!="")
contentcontainer+=variableslide[currentslide][2]
if (document.layers){
crossrotateobj.document.write(contentcontainer)
crossrotateobj.document.close()
}
else if (ie||dom)
crossrotateobj.innerHTML=contentcontainer
if (currentslide==variableslide.length-1) currentslide=0
else currentslide++
setTimeout("rotateimages()",slidedelay)
}
if (ie||dom)
document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')
function start_slider(){
crossrotateobj=dom? document.getElementById("slidedom") : ie? document.all.slidedom : document.slidensmain.document.slidenssub
if (document.layers)
document.slidensmain.visibility="show"
rotateimages()
}
if (ie||dom)
start_slider()
else if (document.layers)
window.onload=start_slider
</script>
</div>
<!-- end hair -->
Hi, I need to change the background and the header of a website on which i display ads (by an adserver) It works with this code : <script type="text/javascript"> parent.document.getElementsByTagName("body")[0].style.backgroundImage="url(http://example.jpg)"; parent.document.getElementsByTagName("body")[0].style.backgroundPosition="center 0"; parent.document.getElementsByTagName("body")[0].style.backgroundRepeat="no-repeat"; parent.document.getElementsByTagName("body")[0].style.backgroundColor = "#85bc21"; parent.document.getElementById("header").style.backgroundImage="url(http://example.jpg)"; </script> But i need those elements become clickable. Have you any solutions ? Thanks a lot. Sorry for my %"*!?& english Benoo have a div & a grid i want the div to be displayed on the column header click & be positioned with the specific column suppose 3rd grid header column is clicked the div shld be positioned near 3 column Hi guys, I am building my second site, this time with wordpress, for a friend's restaurant. I want to use a javascript rotating banner and so I found this nice little bit of code that does the job: http://budstechshed.com/dynamic-head...rdpress-theme/ Main code Code: <?php wp_enqueue_script('jquery'); ?>
<script type="text/javascript">
counter = 1;
num_images = 5; // Enter the number of images to rotate
dir = "<?php bloginfo('template_url'); ?>/images/headers"; // This is where your images are stored
function rotateHeader() {
var header_img = 'url(' + dir + '/header_' + counter + '.jpg)'; // jpg, png, or gif
jQuery('.art-Header-jpeg').css('background-image', header_img); // .art-Header-jpeg is the div you want to replace
counter++; if (counter > num_images) counter = 1;
}
</script>
I have it working fine, but the code does not fade the images, which is what I require. So, is there anyway I can change this code in order to make the images fade in/out between transition? Many thanks in advance, anyone who can help and lives in Kent or London, UK can get a free curry as a thank you First I would like to thank you for taking the time out to help me out with my problem, I really appreciate it. I am trying to make my fixed div scroll on the top right of the page at all times BUT it needs to stay below the menu/header. Here is what I have so far ( no javascript ) http://www.dead-game.com/pom/test.html I want it to function exactly like http://www.dead-game.com/pom/index.html Any help would be GREATLY appreciated Thank you very much! Hello everyone! I got this: <center><script type="text/javascript"> var imgs1 = new Array("http://img687.imageshack.us/img687/4438/kamslide3.jpg","http://img143.imageshack.us/img143/5968/kamslide2.jpg","http://img696.imageshack.us/img696/7066/kamslide1.jpg"); var alt1 = new Array(); var currentAd1 = 0; var imgCt1 = 3; function cycle1() { if (currentAd1 == imgCt1) { currentAd1 = 0; } var banner1 = document.getElementById('adBanner1'); var link1 = document.getElementById('adLink1'); banner1.src=imgs1[currentAd1] banner1.alt=alt1[currentAd1] currentAd1++; } window.setInterval("cycle1()",7000); </script> <img src="http://img687.imageshack.us/img687/4438/kamslide3.jpg" id="adBanner1" border="0" width="861" height="267" /></center> It looks like this: http://dolollies.blogspot.com How can I make the image fade?? Can't seem to figure out how to add the borders to the floating table head? The javascript file I'm using table_floating_header.js, got it from site http://code.google.com/p/js-floating...ers/wiki/Usage [code] var floating_header = function() { this.header = document.createElement('table'); this.header_height = 0; this.getkeys = function(obj) { var keys = new Array(); for ( var key in obj ) { keys.push(key); } return keys; }; this.getXY = function( o ) { var y = 0; var x = 0; while( o != null ) { y += o.offsetTop; x += o.offsetLeft; o = o.offsetParent; } return { "x": x, "y": y }; } this.setheader = function() { var win = window.pageYOffset ? window.pageYOffset : 0; var cel = document.documentElement ? document.documentElement.scrollTop : 0; var body = document.body ? document.body.scrollTop : 0; var result = win ? win : 0; if ( cel && ( ! result || ( result > cel ))) result = cel; var screenpos = body && ( ! result || ( result > body ) ) ? body : result; var theady_max = this.getXY(this.table_obj.getElementsByTagName('THEAD')[0]).y + this.table_obj.offsetHeight - this.header_height; if ( screenpos > this.theady && screenpos < theady_max ) { this.header.style.borderCollapse= 'collapse'; this.header.style.top=Math.round(screenpos) + 'px'; this.header.style.left=this.getXY(this.table_obj.getElementsByTagName('THEAD')[0]).x + 'px'; this.header.style.display = 'block'; this.header_height = header.offsetHeight; } else { this.header.style.display = 'none'; } } this.addclass = function(obj, newclass) { if ( obj.classes == null ) { obj.classes = new Array(); } obj.classes[newclass] = 1; obj.className = this.getkeys(obj.classes).join(' '); return true; }; this.theady = 0; this.build_header = function() { this.table_obj = document.getElementsByTagName('THEAD'); if ( ! this.table_obj ) { alert("you MUST have <thead> and </thead> tags wrapping the part of the table you want to keep on the screen"); return; } this.table_obj = this.table_obj[0]; while ( this.table_obj.tagName != 'TABLE' ) { if ( this.table_obj.tagName == 'BODY' ) { alert('The THEAD section MUST be inside a table - how did you do that???'); return; } this.table_obj = this.table_obj.parentNode; } thead = this.table_obj.getElementsByTagName('THEAD')[0].cloneNode(1); thead.id = 'copyrow'; this.header.style.position='absolute'; this.header.style.display='none'; this.header.appendChild(thead); this.header.style.width = this.table_obj.offsetWidth; var srcths = this.table_obj.getElementsByTagName('THEAD')[0].getElementsByTagName('*'); var copyths = thead.getElementsByTagName('*'); for ( var x = 0; x < copyths.length; x++ ) { copyths[x].className = srcths[x].className; copyths[x].align = srcths[x].align; copyths[x].background = srcths[x].background; copyths[x].bgColor = srcths[x].bgColor; copyths[x].colSpan = srcths[x].colSpan; copyths[x].height = srcths[x].height; copyths[x].rowSpan = srcths[x].rowSpan; pr = Math.round(srcths[x].style.paddingRight.split('px')[0]); pl = Math.round(srcths[x].style.paddingLeft.split('px')[0]); bl = ( Math.round(srcths[x].style.borderLeftWidth.split('px')[0]) ) ? Math.round(srcths[x].style.borderLeftWidth.split('px')[0]) : 0; br = ( Math.round(srcths[x].style.borderRightWidth.split('px')[0]) ) ? Math.round(srcths[x].style.borderRightWidth.split('px')[0]) : 0; pt = Math.round(srcths[x].style.paddingTop.split('px')[0]); pb = Math.round(srcths[x].style.paddingBottom.split('px')[0]); bt = Math.round(srcths[x].style.borderTopWidth.split('px')[0]); bb = Math.round(srcths[x].style.borderBottomWidth.split('px')[0]); if ( srcths[x].currentStyle ) { for ( var y in srcths[x].currentStyle ) { if ( y == 'font' || y == 'top' ) continue; copyths[x].style[y] = srcths[x].currentStyle[y]; } pr = Math.round(srcths[x].currentStyle.paddingRight.split('px')[0]); pl = Math.round(srcths[x].currentStyle.paddingLeft.split('px')[0]); bl = ( Math.round(srcths[x].currentStyle.borderLeftWidth.split('px')[0]) ) ? Math.round(srcths[x].currentStyle.borderLeftWidth.split('px')[0]) : 0; pt = Math.round(srcths[x].currentStyle.paddingTop.split('px')[0]); pb = Math.round(srcths[x].currentStyle.paddingBottom.split('px')[0]); bt = Math.round(srcths[x].currentStyle.borderTopWidth.split('px')[0]); } if ( srcths[x].onclick ) copyths[x].onclick = srcths[x].onclick; var width = ( srcths[x].offsetWidth - pr - pl > 0 ) ? srcths[x].offsetWidth - pr - pl : 0; copyths[x].style.position = srcths[x].style.position; copyths[x].style.top = ( srcths[x].offsetTop - pt - pb > 0 ) ? srcths[x].offsetTop - pt - pb : srcths[x].offsetTop; copyths[x].style.top = srcths[x].style.top; copyths[x].style.height = srcths[x].offsetHeight; copyths[x].style.left = srcths[x].offsetLeft; if ( ! copyths[x].currentStyle ) { //copyths[x].style.width = Math.floor(document.defaultView.getComputedStyle(srcths[x],"").getPropertyValue("width").split('px')[0]); copyths[x].style.width = document.defaultView.getComputedStyle(srcths[x],"").getPropertyValue("width"); } else { copyths[x].style.width = srcths[x].offsetWidth - pr - pl; // - bl; copyths[x].width = srcths[x].width; } if ( x == copyths.length - 1 ) { this.header.style.paddingBottom = pb; this.header.style.borderBottom = bb; } } this.addclass(this.header, 'main'); document.body.appendChild(this.header); theady = this.getXY(this.table_obj.getElementsByTagName('THEAD')[0]).y; } var origonload = window.onload; window.onload = function() { if (origonload) { origonload(); } this.build_header(); }; window.onscroll=this.setheader; }; floating_header(); [code] HTML example page code [code] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Title</title> <!-- <meta HTTP-EQUIV='REFRESH' CONTENT='60'> --> <script src="table_floating_header.js"></script> </head> <body> <table border=2 cellspacing=0 cellpadding=0 width=990 align=center> <thead> <tr> <td colspan=13 bgcolor='palevioletred'>Title of Page - 12APR12--09:01</th> <td colspan=3 bgcolor='palevioletred'>More Text</th> </tr> <tr> <th colspan=13 bgcolor='wheat'>More Text</th> <th colspan=3 bgcolor='wheat'><font size=1.0>Date </th> </tr> <tr> <td colspan=13 bgcolor='wheat'align=center><a href='l'> Link</td> <th colspan=3 bgcolor='wheat'><font size=1.0>End 13APR12  </th> </tr> <tr> <th colspan=3 bgcolor='peachpuff'>Text</th> <th colspan=3 bgcolor='peachpuff'>Text</th> <th colspan=1 bgcolor='wheat'></th> <th colspan=6 bgcolor='peachpuff'>Text</th> <th colspan=3 bgcolor='wheat'><font size=1.0>Curr 12APR12 </th> </tr> <tr bgcolor=peachpuff> <th colspan=3></th> <th colspan=3></th> <th colspan=1 bgcolor='wheat'></th> <td></td> <td></td> <td></td> <td align=center><b>Text</td> <td></td> <td></td> <td colspan=3 bgcolor='wheat'></td> </tr> <tr bgcolor='peachpuff'> <td><b>Text</td> <td ><b>Text</td> <td><b>Text</td> <td align=center><b> Text </td> <td align=right><a href=''> Link Text </td> <td align=right><b> Text </td> <th colspan=1 bgcolor='wheat'></th> <td align=center><b> Text </td> <td align=right><a href=''> Link Text </td> <td align=right><b> Text </td> <td align=center><b> Text </td> <td align=center><b> Text</td> <td align=right><a href=''> Link Text </td> <td align=center><b>Text </td> <td align=center> <a href=''> Link Text </td> <td align=center><b>Text</td> </tr> <tr> </thead> <tbody> <td>1</td> <td> </td> <td> </td> <td align=right> 0</td> <td align=right> 0</td> <td align=right> 4</td> <th colspan=1 bgcolor='wheat'></th> <td align=right> 0</td> <td align=right> 0</td> <td align=right> 0</td> <td align=right> 0</TD> <td align=right> 0</td> <td align=right> 0</td> <td align=right> 0</td> <td align=center> - </td> <td align=center> - </td> </tr> <tr> <td>2</td> <td>Text </td> <td>Text </td> <td align=right> 21</td> <td align=right> 0</td> <td align=right> 6</td> <th colspan=1 bgcolor='wheat'></th> <td align=right> 0</td> <td align=right> 0</td> <td align=right> 0</td> <td align=right> 0</TD> <td align=right> 24</td> <td align=right> 0</td> <td align=right bgcolor=RED> 21</td> <td align=right bgcolor=RED> 0% </td> <td align=right> 0</td> </tr> <tr> <td>3</td> <td>text </td> <td>text </td> <td align=right> 44</td> <td bgcolor=green align=right> 204</td> <td align=right> 4</td> <th colspan=1 bgcolor='wheat'></th> <td align=right> 0</td> <td align=right> 0</td> <td align=right> 0</td> <td align=right> 0</TD> <td align=right> 0</td> <td align=right> 0</td> <td align=right> 248</td> <td align=center> - </td> <td align=center> - </td> </tr> <tr> <td>4</td> <td>text </td> <td>text </td> <td align=right> 0</td> <td align=right> 0</td> <td align=right> 4</td> <th colspan=1 bgcolor='wheat'></th> <td align=right> 0</td> <td align=right> 0</td> <td align=right> 0</td> <td align=right> 0</TD> <td align=right> 0</td> <td align=right> 0</td> <td align=right> 0</td> <td align=center> - </td> <td align=center> - </td> </tr> <tr> <td>5</td> <td>text </td> <td>text </td> <td align=right> 0</td> <td align=right> 0</td> <td align=right> 6</td> <th colspan=1 bgcolor='wheat'></th> <td align=right> 0</td> <td align=right> 0</td> <td align=right> 0</td> <td align=right> 0</TD> <td align=right> 0</td> <td align=right> 0</td> <td align=right> 0</td> <td align=center> - </td> <td align=center> - </td> </tr> <tr> <td>6</td> <td>text </td> <td>text </td> <td align=right> 0</td> <td align=right> 0</td> <td align=right> 4</td> <th colspan=1 bgcolor='wheat'></th> <td align=right> 4</td> <td align=right> 0</td> <td align=right> 0</td> <td align=right> 4</TD> <td align=right> 0</td> <td align=right> 0</td> <td align=right> 0</td> <td align=center> - </td> <td align=center> - </td> </tr> <tr> <td>7</td> <td>text </td> <td>text </td> <td align=right> 0</td> <td align=right> 47</td> <td align=right> 4</td> <th colspan=1 bgcolor='wheat'></th> <td bgcolor=yellow align=right> 7</td> <td align=right> 0</td> <td align=right> 8</td> <td bgcolor=GREEN align=right> -1</TD> <td align=right> 20</td> <td align=right> 17</td> <td align=right> 47</td> <td align=right bgcolor=BLUE> 85% </td> <td align=right> 3</td> </tr> <tr> <tr> <td>7</td> <td>text </td> <td>text </td> <td align=right> 0</td> <td align=right> 47</td> <td align=right> 4</td> <th colspan=1 bgcolor='wheat'></th> <td bgcolor=yellow align=right> 7</td> <td align=right> 0</td> <td align=right> 8</td> <td bgcolor=GREEN align=right> -1</TD> <td align=right> 20</td> <td align=right> 17</td> <td align=right> 47</td> <td align=right bgcolor=BLUE> 85% </td> <td align=right> 3</td> </tr> <tr> <tr> <td>7</td> <td>text </td> <td>text </td> <td align=right> 0</td> <td align=right> 47</td> <td align=right> 4</td> <th colspan=1 bgcolor='wheat'></th> <td bgcolor=yellow align=right> 7</td> <td align=right> 0</td> <td align=right> 8</td> <td bgcolor=GREEN align=right> -1</TD> <td align=right> 20</td> <td align=right> 17</td> <td align=right> 47</td> <td align=right bgcolor=BLUE> 85% </td> <td align=right> 3</td> </tr> <tr> <tr> <td>7</td> <td>text </td> <td>text </td> <td align=right> 0</td> <td align=right> 47</td> <td align=right> 4</td> <th colspan=1 bgcolor='wheat'></th> <td bgcolor=yellow align=right> 7</td> <td align=right> 0</td> <td align=right> 8</td> <td bgcolor=GREEN align=right> -1</TD> <td align=right> 20</td> <td align=right> 17</td> <td align=right> 47</td> <td align=right bgcolor=BLUE> 85% </td> <td align=right> 3</td> </tr> <tr> <tr> <td>7</td> <td>text </td> <td>text </td> <td align=right> 0</td> <td align=right> 47</td> <td align=right> 4</td> <th colspan=1 bgcolor='wheat'></th> <td bgcolor=yellow align=right> 7</td> <td align=right> 0</td> <td align=right> 8</td> <td bgcolor=GREEN align=right> -1</TD> <td align=right> 20</td> <td align=right> 17</td> <td align=right> 47</td> <td align=right bgcolor=BLUE> 85% </td> <td align=right> 3</td> </tr> <tr> <tr> <td>7</td> <td>text </td> <td>text </td> <td align=right> 0</td> <td align=right> 47</td> <td align=right> 4</td> <th colspan=1 bgcolor='wheat'></th> <td bgcolor=yellow align=right> 7</td> <td align=right> 0</td> <td align=right> 8</td> <td bgcolor=GREEN align=right> -1</TD> <td align=right> 20</td> <td align=right> 17</td> <td align=right> 47</td> <td align=right bgcolor=BLUE> 85% </td> <td align=right> 3</td> </tr> <tr> <tr> <td>7</td> <td>text </td> <td>text </td> <td align=right> 0</td> <td align=right> 47</td> <td align=right> 4</td> <th colspan=1 bgcolor='wheat'></th> <td bgcolor=yellow align=right> 7</td> <td align=right> 0</td> <td align=right> 8</td> <td bgcolor=GREEN align=right> -1</TD> <td align=right> 20</td> <td align=right> 17</td> <td align=right> 47</td> <td align=right bgcolor=BLUE> 85% </td> <td align=right> 3</td> </tr> <tr> <tr> <td>7</td> <td>text </td> <td>text </td> <td align=right> 0</td> <td align=right> 47</td> <td align=right> 4</td> <th colspan=1 bgcolor='wheat'></th> <td bgcolor=yellow align=right> 7</td> <td align=right> 0</td> <td align=right> 8</td> <td bgcolor=GREEN align=right> -1</TD> <td align=right> 20</td> <td align=right> 17</td> <td align=right> 47</td> <td align=right bgcolor=BLUE> 85% </td> <td align=right> 3</td> </tr> <tr> <tr> <td>7</td> <td>text </td> <td>text </td> <td align=right> 0</td> <td align=right> 47</td> <td align=right> 4</td> <th colspan=1 bgcolor='wheat'></th> <td bgcolor=yellow align=right> 7</td> <td align=right> 0</td> <td align=right> 8</td> <td bgcolor=GREEN align=right> -1</TD> <td align=right> 20</td> <td align=right> 17</td> <td align=right> 47</td> <td align=right bgcolor=BLUE> 85% </td> <td align=right> 3</td> </tr> <tr> <tr> <td>7</td> <td>text </td> <td>text </td> <td align=right> 0</td> <td align=right> 47</td> <td align=right> 4</td> <th colspan=1 bgcolor='wheat'></th> <td bgcolor=yellow align=right> 7</td> <td align=right> 0</td> <td align=right> 8</td> <td bgcolor=GREEN align=right> -1</TD> <td align=right> 20</td> <td align=right> 17</td> <td align=right> 47</td> <td align=right bgcolor=BLUE> 85% </td> <td align=right> 3</td> </tr> <tr> <tr> <td>7</td> <td>text </td> <td>text </td> <td align=right> 0</td> <td align=right> 47</td> <td align=right> 4</td> <th colspan=1 bgcolor='wheat'></th> <td bgcolor=yellow align=right> 7</td> <td align=right> 0</td> <td align=right> 8</td> <td bgcolor=GREEN align=right> -1</TD> <td align=right> 20</td> <td align=right> 17</td> <td align=right> 47</td> <td align=right bgcolor=BLUE> 85% </td> <td align=right> 3</td> </tr> <tr> <tr> <td>7</td> <td>text </td> <td>text </td> <td align=right> 0</td> <td align=right> 47</td> <td align=right> 4</td> <th colspan=1 bgcolor='wheat'></th> <td bgcolor=yellow align=right> 7</td> <td align=right> 0</td> <td align=right> 8</td> <td bgcolor=GREEN align=right> -1</TD> <td align=right> 20</td> <td align=right> 17</td> <td align=right> 47</td> <td align=right bgcolor=BLUE> 85% </td> <td align=right> 3</td> </tr> <tr> <tr> <td>7</td> <td>text </td> <td>text </td> <td align=right> 0</td> <td align=right> 47</td> <td align=right> 4</td> <th colspan=1 bgcolor='wheat'></th> <td bgcolor=yellow align=right> 7</td> <td align=right> 0</td> <td align=right> 8</td> <td bgcolor=GREEN align=right> -1</TD> <td align=right> 20</td> <td align=right> 17</td> <td align=right> 47</td> <td align=right bgcolor=BLUE> 85% </td> <td align=right> 3</td> </tr> <tr> <tr> <td>7</td> <td>text </td> <td>text </td> <td align=right> 0</td> <td align=right> 47</td> <td align=right> 4</td> <th colspan=1 bgcolor='wheat'></th> <td bgcolor=yellow align=right> 7</td> <td align=right> 0</td> <td align=right> 8</td> <td bgcolor=GREEN align=right> -1</TD> <td align=right> 20</td> <td align=right> 17</td> <td align=right> 47</td> <td align=right bgcolor=BLUE> 85% </td> <td align=right> 3</td> </tr> <tr> <tr> <td>7</td> <td>text </td> <td>text </td> <td align=right> 0</td> <td align=right> 47</td> <td align=right> 4</td> <th colspan=1 bgcolor='wheat'></th> <td bgcolor=yellow align=right> 7</td> <td align=right> 0</td> <td align=right> 8</td> <td bgcolor=GREEN align=right> -1</TD> <td align=right> 20</td> <td align=right> 17</td> <td align=right> 47</td> <td align=right bgcolor=BLUE> 85% </td> <td align=right> 3</td> </tr> <tr> <tr> <td>7</td> <td>text </td> <td>text </td> <td align=right> 0</td> <td align=right> 47</td> <td align=right> 4</td> <th colspan=1 bgcolor='wheat'></th> <td bgcolor=yellow align=right> 7</td> <td align=right> 0</td> <td align=right> 8</td> <td bgcolor=GREEN align=right> -1</TD> <td align=right> 20</td> <td align=right> 17</td> <td align=right> 47</td> <td align=right bgcolor=BLUE> 85% </td> <td align=right> 3</td> </tr> <tr> <td>7</td> <td>text </td> <td>text </td> <td align=right> 0</td> <td align=right> 47</td> <td align=right> 4</td> <th colspan=1 bgcolor='wheat'></th> <td bgcolor=yellow align=right> 7</td> <td align=right> 0</td> <td align=right> 8</td> <td bgcolor=GREEN align=right> -1</TD> <td align=right> 20</td> <td align=right> 17</td> <td align=right> 47</td> <td align=right bgcolor=RED> 85% </td> <td align=right> 3</td> </tr> </tbody> </table> </body> </html> [code] I'm using both Firefox and IE Thanks! I can get the lightbox to work perfectly fine, and I love how seamlessly it works, I however am running some more java script on my page and am running into some problems. When I apply the lightbox it takes away the functionality of my other script, and I am not sure why this is so. I am using 2.04 version of lightbox: http://www.huddletogether.com/projects/lightbox2/ Here is the other script that is getting either turned off or overridden, I'm not quiet sure. <script type="text/javascript"> $(document).ready(function() { //Set Default State of each portfolio piece $(".paging").show(); $(".paging a:first").addClass("active"); //Get size of images, how many there are, then determin the size of the image reel. var imageWidth = $(".window").width(); var imageSum = $(".image_reel img").size(); var imageReelWidth = imageWidth * imageSum; //Adjust the image reel to its new size $(".image_reel").css({'width' : imageReelWidth}); //Paging + Slider Function rotate = function(){ var triggerID = $active.attr("rel") - 1; //Get number of times to slide var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide $(".paging a").removeClass('active'); //Remove all active class $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function) //Slider Animation $(".image_reel").animate({ left: -image_reelPosition }, 500 ); }; //Rotation + Timing Event rotateSwitch = function(){ play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds $active = $('.paging a.active').next(); if ( $active.length === 0) { //If paging reaches the end... $active = $('.paging a:first'); //go back to first } rotate(); //Trigger the paging and slider function }, 3750); //Timer speed in milliseconds (3 seconds) }; rotateSwitch(); //Run function on launch //On Hover $(".image_reel a").hover(function() { clearInterval(play); //Stop the rotation }, function() { rotateSwitch(); //Resume rotation }); //On Click $(".paging a").click(function() { $active = $(this); //Activate the clicked paging //Reset Timer clearInterval(play); //Stop the rotation rotate(); //Trigger rotation immediately rotateSwitch(); // Resume rotation return false; //Prevent browser jump to link anchor }); }); </script> I am assuming there is some conflict with either an onload..or something I'm really not sure I would greatly appreciate your help. Hi Guys, I have a new problem My site is run on wordpress, but I'd like to customise the menu so that if the user is logged in the menu displays "Logged In" and if they are not it displays "Log In". Normally I would just use an if statement in PHP to output the required html, but as I can't use PHP code in the menu item I need to use Javascript. So, the way I figured this would work is: 1) PHP code in the header checks to see whether the user is logged in 2) This code then outputs JS to define a variable (varCheckLogin) 3) JS within the menu checks varCheckLogin and outputs the html i want This sounds good hopefully. Unfortunately this isn't working at the moment. The code I have is: HEADER: (I know this works as the variable is being output correctly in the source code) Code: <?php if (is_user_logged_in()) {
echo '<script type="text/javascript"> varLoginCheck = "Yes"; </script>';
} else {
echo '<script type="text/javascript"> varLoginCheck = "No"; </script>';
}
?>
MENU ITEM: Code: <script>
if (varLoginCheck = "No")
{
document.write('<span class="mmLogin">Log In</span>');
}
else
{
document.write('<span class="mmLogin">Logged In</span>');
}
</script>
I put an alert in the menu item and it always sees varLoginCheck as "Yes". Any ideas why this could be? All help is much appreciated. Thanks Sam |
|||||||