|
JavaScript - Variable Previous Next Controls Using Javascript?
Hello all,
I am currently working on a site for a friend and have reached a navigational problem I cannot figure out how to achieve... He has a list of products that link to relevant individual pages which also have next and previous buttons to browse all the product pages on the site (only 10 so no big deal). However, he wants to add additional lists that recommend products by category preference? So for example; 4 products may appeal to a particular category, but when you click the link to view one of the products shown the next and previous buttons scroll through the entire products pages! and not only the ones recommended?? IS it possible using Javascript to define which pages are linked to as next previous without having to create lots more html copies of content pages? I have a basic knowledge of Javascript but cannot find a workable answer or example using google. Any help would be much appreciated. Thanks in advance... Similar TutorialsI tried to use the script to return the user to the previous page by clicking the link, and it did work, however, it would return me to the previous website I visited and not just the previous page within my site. Is there a way to override it by changing the code or is the code definitive? This was the code I had tried to use: Code: <a href="javascript:history.go(-1)">Back</a> I have a menu that lists all the categories and sub categories, when someone clicks a main category it opens up the sub cats for it. if someone clicks one of the sub cats the page open up to show all items in that category. But what I would like to find out is how do I get the menu to open up as it was so it shows the category and sub category open? Code: <!-- start show cat list -->
<br><div style="font-weight: bold; font-size: 0.825em; padding: 0em 0em 0.3125em;">Select items by category</div>
<ul class="catMenuItem">
<li><a style="background-image: url("images/triangle_down.gif");" href="#" class="titleTriangle"><span>cat1</span></a></li>
<li style="display: block;" class="catSubMenu">
<a href="?cat=2">sub 1-2</a> (0)<br>
<a href="?cat=7">sub 1-3</a> (2)<br>
<a href="?cat=8">sub 1-4</a> (0)<br>
<a href="?cat=9">sub 1-5</a> (0)<br>
<br>
</li>
</ul>
<ul class="catMenuItem">
<li><a href="#" class="titleTriangle"><span>cat2</span></a></li>
<li style="display: none;" class="catSubMenu">
<a href="?cat=3">sub 2-1</a> (0)<br>
<a href="?cat=4">sub 2-2</a> (0)<br>
<a href="?cat=5">sub 2-3</a> (0)<br>
<a href="?cat=6">sub 2-4</a> (1)<br>
<br>
</li>
</ul>
<ul class="catMenuItem">
<li><a href="#" class="titleTriangle"><span>cat3</span></a></li>
<li style="display: none;" class="catSubMenu">
<br>
</li>
</ul>
<ul class="catMenuItem">
<li><a href="#" class="titleTriangle"><span>cat4</span></a></li>
<li style="display: none;" class="catSubMenu">
<br>
</li>
</ul>
<ul class="catMenuItem">
<li><a href="#" class="titleTriangle"><span>cat5</span></a></li>
<li style="display: none;" class="catSubMenu">
<br>
</li>
</ul>
<script type="text/javascript"><!--
/* Categories Menu START */
var prevCat;
function menu(newCat) {
var mens;
var anchors;
if (prevCat) {
mens = prevCat.parentNode.getElementsByTagName('li')[0];
anchors = mens.getElementsByTagName('a')[0].style.backgroundImage='url(images/triangle_right.gif)';
prevCat.style.display = 'none';
}
if (newCat != prevCat) {
mens = newCat.parentNode.getElementsByTagName('li')[0];
anchors = mens.getElementsByTagName('a')[0].style.backgroundImage='url(images/triangle_down.gif)';
newCat.style.display = 'block';
prevCat = newCat;
} else {
prevCat = null;
}
}
onload = function() {
var menus = document.getElementsByTagName('ul');
for (var a=0,x=menus.length; a<x; a++) {
if (menus[a].className === 'catMenuItem') {
menus[a].getElementsByTagName('li')[0].getElementsByTagName('a')[0].onclick = function() {
menu(this.parentNode.parentNode.getElementsByTagName('li')[1]);
}
menus[a].getElementsByTagName('li')[1].style.display = 'none';
}
}
}
/* Categories Menu END */
--></script>
<!-- end show cat list -->
Hi everyone. New to javascript here.... I have a problem here. I know how to store a cookie and check a cookie... but i don't know how to calculate the time between current visit and previous visit... Example. I logged in @ 1pm and logged in again @ 3pm... It should a msg like "your last visit was 2 hours ago" Can any one enlighten me ? Thank you! Hi! I have a javascript in the head of the document which has a variable named "ref2" ... ref2 is already working as I can see its value working in another function. I need to send this variable as the value of a hidden field in the form which is in the body of the document. This is my JavaScript Code: Code: function WriteContactFormStatement1 () {
var ContactFormValue = ref2;
document.write('<input type="hidden" name="UReferrersName" value="' + ContactFormValue + '" />');
}
var WriteContactFormStatement = WriteContactFormStatement1 ();
And at the end of my form, before the submit button, I have the following code: Code: <!-- START -- Javascript to print the statement for UReferrersName --> <script language="JavaScript" type="text/JavaScript"> //WriteContactFormStatement(); document.write (WriteContactFormStatement); </script> <!-- End -- Javascript to print the statement for UReferrersName --> When I execute the form, it doesn't work the way it should, plus, gives me a word "undefined" next to the "Submit" button ..... Please help !... - Xeirus. Hello I have a piece of javascrip that refreshes the page: ---------- Code: <script type="text/javascript">
<!-- Begin
function reFresh() {
location.reload(true)
}
/* Set the number below to the amount of delay, in milliseconds,
you want between page reloads: 1 minute = 60000 milliseconds.
2 minutes = 120000 milliseconds 5 minutes = 300000 milliseconds*/
window.setInterval("reFresh()",20000);
// End -->
</script>
-------- I am new to javascript and wanted to use an html options menu in order to be able to choose the refresh interval: Code: <SELECT NAME="refreshtime"> <OPTION VALUE="60000">1 min</option> <OPTION VALUE="120000">2 min</option> <OPTION VALUE="180000">3 min</option> <OPTION VALUE="240000">4 min</option> </SELECT> I know that I have to pass a variable to the function. I have tried several variations but none have worked. I have mostly received a "done with errors" warning. Any help would be appreciated. Thanks Zam Heya peeps So I'm in the process of building a website where audio can be purchased and downloaded. I want each file to allow a preview, but would rather the preview occur on the same page, rather than load up a blank page with a quicktime plugin splodged in the middle. Is there a way of doing it? All I want is a basic play/pause/stop button. To control a piece of sound. Thanks Hi, excuse I'm not a js coder..I need to control the end of a gallery made with mootools and noobslide (http://www.efectorelativo.net/laboratory/noobSlide/). I need the autoplay gallery to end in another way: Solution 1(difficult): After the last image, the gallery starts again from the first image without that "backward" effect. I'd like the first image to be placed after the last one, so the gallery loops without let the user know that it is starting again Solution 2 (easy, I suppose) : gallery stops at the last image Please HELP ME!! TY Hi guys, I am able to create some of the dynamic controls but having trouble to order them in one column.. i have this view : field1 field2 field3 what i want is : field1 field2 field3 below is my code : function AddLevel2() { //var mainContainer2 = document.getElementById('mainContainer2'); var newDiv = document.createElement('div') newDiv.style.width = "560px"; newDiv.style.backgroundColor= projbgGr; newDiv.style.position = "relative"; newDiv.style.left = "245px"; var BUDDL = document.createElement('select'); // size lenght of the DDL for both IE or Firefox BUDDL.setAttribute("style","width:100px"); //firefox BUDDL.setAttribute("width","100px"); BUDDL.style.width = "100px"; BUDDL.id = 'BU' + b ; BUDDL.setAttribute('name','BU' + b); BUDDL.style.position = "relative"; BUDDL.style.left = "5px"; BUDDL.onchange=show; // filling the DDL by ITEM array Elements var i=0; for (i=0;i<=4;i++) { objOption = document.createElement('option') objOption.text = "BU" + i; //objOption.value=ITEM1[i]; BUDDL.options.add(objOption); } var j =1; var bgc = "##C8BBD0" //mauve light ; //"##D4F1B9" green light; //"##b2d47e"; //add Description Unit Description = document.createElement( 'INPUT' ); Description.id = 'D' + b ; Description.setAttribute('name','D' + b); Description.size=2; // size lenght of the Comment for both IE or Firefox Description.setAttribute("style","width:300px"); //firefox Description.setAttribute("width","300px"); Description.style.width = "300px"; Description.onblur = show; //Description.style.backgroundColor= bgc; //end Description //number of testers NumberTesters = document.createElement( 'INPUT' ); NumberTesters.id = 'T' + b; NumberTesters.setAttribute('name','T' + b ); NumberTesters.size=2; // size lenght of the Comment for both IE or Firefox NumberTesters.setAttribute("style","width:40px"); //firefox NumberTesters.setAttribute("width","40px"); NumberTesters.style.width = "40px"; NumberTesters.onblur=show; //NumberTesters.style.backgroundColor= bgc; //number of testers // Create buttons for creating and removing inputs var newAddButton = document.createElement('input'); newAddButton.type = "button"; newAddButton.value = " + "; var newDelButton = document.createElement('input'); newDelButton.type = "button"; newDelButton.value = " - "; newDelButton.style.position = "relative"; newDelButton.style.left = "7px"; // Append new text input to the newDiv newDiv.appendChild(BUDDL); newDiv.appendChild(Description); newDiv.appendChild(NumberTesters); newDiv.appendChild(newDelButton); //newDiv.appendChild(newAddButton2); //Append newDiv input to the mainContainer div mainContainer.appendChild(newDiv); //Add a handler to button for deleting the newDiv from the mainContainer newAddButton.onclick = AddLevel22; //newAddButton.onclick = AddNewRecord; //newAddButton2.onclick = AddLevel3; newDelButton.onclick = function() { var answer = confirm ("You have to delete all UATs under this BU first\n \tIs this done ?\t") if (answer) {alert ("Now you can delete it"); mainContainer.removeChild(newDiv);} else alert ("Then please check all UATs under this BU first and delete them"); } b++; document.form1.NumberOfBU.value = parseInt(b-1); //alert(document.form1.NumberOfBU.value); //AddLevel3; for (UATCounter = 1 ; UATCounter<=limit; UATCounter++) { //var newDiv = document.createElement('div') // // newDiv.style.width = "250px"; // newDiv.style.backgroundColor= projbgVi; // newDiv.style.position = "relative"; // newDiv.style.left = "350px"; var bgc = "##C8BBD0" //mauve light ; //"##D4F1B9" green light; //"##b2d47e"; newMDate = document.createElement( 'INPUT' ); newMDate.id = 'M'+ (b-1) + '_' + UATCounter ; newMDate.setAttribute('name','M'+ (b-1) + '_' + UATCounter); newMDate.setAttribute('type', 'Date'); newMDate.size=7; newMDate.style.backgroundColor= bgc; //newMDate.onfocus=Calend; // function Calend () // { // fnInitCalendar(this, this.getAttribute('id'), 'style=calendar.css,close=true'); // } newMDate.onblur = show; //Frontline Hours FLHours = document.createElement( 'INPUT' ); FLHours.id = 'FL'+ (b-1) + '_' + UATCounter ; FLHours.setAttribute('name', 'FL'+ (b-1) + '_' + UATCounter); FLHours.size=2; // size lenght of the Comment for both IE or Firefox FLHours.setAttribute("style","width:40px"); //firefox FLHours.setAttribute("width","40px"); FLHours.style.width = "40px"; //NumberTesters.style.backgroundColor= bgc; //Frontline Hours MGRHours = document.createElement( 'INPUT' ); MGRHours.id = 'MG'+ (b-1) + '_' + UATCounter ; MGRHours.setAttribute('name', 'MG'+ (b-1) + '_' + UATCounter); MGRHours.size=2; // size lenght of the Comment for both IE or Firefox MGRHours.setAttribute("style","width:40px"); //firefox MGRHours.setAttribute("width","40px"); MGRHours.style.width = "40px"; //NumberTesters.style.backgroundColor= bgc; //Frontlne Hours //Create buttons for creating and removing inputs var newAddButton = document.createElement('input'); newAddButton.type = "button"; newAddButton.value = " + "; var newDelButton = document.createElement('input'); newDelButton.type = "button"; newDelButton.value = " - "; newDelButton.style.position = "relative"; newDelButton.style.left = "7px"; //newDiv.appendChild(ProjDDL3); newDiv.appendChild(newMDate); newDiv.appendChild(FLHours); newDiv.appendChild(MGRHours); mainContainer.appendChild(newDiv); } } Hello, I have a slide some on my page which contains some images. It scrolls through images fine but i would like to add some control buttons such as pause/play and scroll back Can anyone tell me how i could do this? i have inc my code cheers Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
var image1=new Image()
image1.src="image1.jpg"
var image2=new Image()
image2.src="toy2.jpg"
var image3=new Image()
image3.src="toy3.jpg"
var image4=new Image()
image4.src="toy4.jpg"
var image5=new Image()
image5.src="toy5.jpg"
</script>
</head>
<style>
body {
background-image:url('logo2008.jpg');
}
.boxed {
position:absolute;
left:25%;
border: 2px black;
border-style: plain;
width: 700px;
height: 800px;
}
.boxed1 {
position:absolute;
left:25%;
border: 1px blue;
border-style: dotted;
width: 700px;
height: 350px;
text-align:center;
float: left;
padding:2px;
background-color: white;
}
.image {
border: 1px blue solid;
width: 200px;
height:100px;
}
.image1 {
border: 1px blue solid;
width: 200px;
height:100px;
float:left;
}
.image2 {
border: 1px blue solid;
width: 200px;
height:100px;
float:right;
}
.image3 {
border: 1px blue solid;
width: 200px;
height:100px;
}
.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}
.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}
.thumbnail:hover{
background-color: transparent;
}
.thumbnail:hover img{
border: 1px solid blue;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: white;
padding: 3px;
left: -1000px;
border: 0px;
visibility: hidden;
color: blue;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 1px;
}
.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 400px;
left: 500px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
</style>
<body>
<a href="javascript:slidelink()">
<div class="boxed1">
<img src="image1.jpg" name="slide" border="0"width="35%" height="100%" />
</div>
</a>
<div class="image">
<a class="thumbnail" href="#thumb"><img src="360s.jpg" width="198px" height="98px" border="0" /><span><img src="360s.jpg" /><br />Xbox 360 Slim</span></a>
</div>
<div class="image">
<a class="thumbnail" href="#thumb"><img src="ps3.jpg" width="198px" height="98px" border="0" /><span><img src="ps3.jpg" /><br />Play station 3.</span></a>
</div>
<div class="image">
<a class="thumbnail" href="#thumb"><img src="wii.jpg" width="198px" height="98px" border="0" /><span><img src="wii.jpg" /><br />Nintendo Wii</span></a>
</div>
<br>
<br>
</br>
<div class="image">
<a class="thumbnail" href="#thumb"><img src="tv1.jpg" width="198px" height="98px" border="0" /><span><img src="tv1.jpg" /><br />Sony Bravia KDL-40W2000</span></a>
</div>
<div class="image">
<a class="thumbnail" href="#thumb"><img src="tv2.jpg" width="198px" height="98px" border="0" /><span><img src="tv2.jpg" /><br />Toshiba Regza AV61 (32AV615DB)</span></a>
</div>
<div class="image">
<a class="thumbnail" href="#thumb"><img src="tv3.jpg" width="198px" height="98px" border="0" /><span><img src="tv3.jpg" /><br />Samsung B550 (LE40B550)</span></a>
</div>
<br>
<br>
</br>
<div class="image1">
<a class="thumbnail" href="#thumb"><img src="ttg.jpg" width="198px" height="98px" border="0" /><span><img src="ttg.jpg" /><br />Tom Tom GO</span></a>
</div>
<div class="image1">
<a class="thumbnail" href="#thumb"><img src="sat2.jpg" width="198px" height="98px" border="0" /><span><img src="sat2.jpg" /><br />Garmin nuvi 3790T</span></a>
</div>
<div class="image1">
<a class="thumbnail" href="#thumb"><img src="sat3.jpg" width="198px" height="98px" border="0" /><span><img src="sat3.jpg" /><br />Navigon 8450 Live</span></a>
</div>
<br>
<br>
</br>
<div class="image2">
<a class="thumbnail" href="#thumb"><img src="iphone.jpg" width="198px" height="98px" border="0" /><span><img src="iphone.jpg" /><br />iPhone 4</span></a>
</div>
<div class="image2">
<a class="thumbnail" href="#thumb"><img src="bbt.jpg" width="198px" height="98px" border="0" /><span><img src="bbt.jpg" /><br />Blackberry torch</span></a>
</div>
<div class="image2">
<a class="thumbnail" href="#thumb"><img src="gphone.jpg" width="198px" height="98px" border="0" /><span><img src="gphone.jpg" /><br />google HTC phone</span></a>
</div>
<br>
<br>
</br>
<div class="image3">
<a class="thumbnail" href="#thumb"><img src="cod.jpg" width="198px" height="98px" border="0" /><span><img src="cod.jpg" /><br />Call of duty: Black ops</span></a>
</div>
<div class="image3">
<a class="thumbnail" href="#thumb"><img src="fifa.jpg" width="198px" height="98px" border="0" /><span><img src="fifa.jpg" /><br />Fifa 2011</span></a>
</div>
<div class="image3">
<a class="thumbnail" href="#thumb"><img src="f1.jpg" width="198px" height="98px" border="0" /><span><img src="f1.jpg" /><br />Formula 1 2010</span></a>
</div>
<br>
<br>
</br>
<script type="text/javascript">
<!--
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<5)
step++
else
step=1
setTimeout("slideit()",4000)
}
slideit()
function slidelink(){
if (whichimage==1)
window.location="image1.jpg"
else if (whichimage==2)
window.location="toy2.jpg"
else if (whichimage==3)
window.location="toy3.jpg"
else if (whichimage==4)
window.location="toy4.jpg"
else if (whichimage==5)
window.location="toy5.jpg"
}
//-->
</script>
</body>
</html>
Hey everyone, I've looked around quite a bit and can't seem to find anything but I was wondering if there is some open source software offering a text editor/input field similar to the one used on this forum when submitting a comment or thread? Where you can click a bold button or Italic button or URL button to structure it? Thanks Josh Hello, Is there any way I can prevent IE from displaying the "active X controls and script prevention message" when I load my web page into the browser. Firefox, Safari and Chrome, allow my scripts to run without displaying the message when the page is loaded into the respective browsers. Any tips would be really useful. Many thanks Nonye I have just about every thing all set up on my blog now just the way I like it but a few bits of code are not working exactly like I'd want them to. I have a blog: http://thezombiesurvivalist.tumblr.com/ which is using this js: http://static.tumblr.com/ur6r7hb/FoY...ider-jquery.js to allow the mousewheel to scroll the screen right and left rather than up and down. I think the mouse wheel code would all just be in this part: Code: (function($) {
var types = ['DOMMouseScroll', 'mousewheel'];
$.event.special.mousewheel = {
setup: function() {
if (this.addEventListener){for(var i=types.length;i;){this.addEventListener(types[--i], handler, false );}}
else {this.onmousewheel = handler;}
},
teardown: function() {
if (this.removeEventListener )
for ( var i=types.length; i; ){{this.removeEventListener(types[--i],handler,false);}}
else{this.onmousewheel = null;}
}
};
$.fn.extend({
mousewheel: function(fn) {return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");},
unmousewheel: function(fn) {return this.unbind("mousewheel", fn);}
});
function handler(event) {
var args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true;
event = $.event.fix(event || window.event);
event.type = "mousewheel";
if ( event.wheelDelta ) delta = event.wheelDelta/120;
if ( event.detail ) delta = -event.detail/3;
// Add events and delta to the front of the arguments
args.unshift(event, delta);
return $.event.handle.apply(this, args);
}
})(jQuery);
I would like the js to force vertical scrolling to be default first, then if then is no vertical scrolling or if it runs out then the horizontal scrolling takes over. Currently it seems to occur in reverse order. For example if you go to one of the posts individual pages that are long: http://thezombiesurvivalist.tumblr.c...esh-in-n-y-l-a then it will scroll left and right before scrolling up and down. I'd rather it be the other way around. Is this code able to be changed to accommodate my desires? Hi, Im having a weird issue... I am using position absolute to stick a table header to the top of a div. In the screenshot, under the menu is a div, the buttons and drop downs are at the "top" and grid starts from half way down, now when user scrolls till header is out of view i show the header at the "top" with position absolute. then when user scrolls back down and onto original position the buttons and drop downs are now again at the top exactly at the position where the header was shown, once the header has been shown all the buttons and the drop down are no longer clickable, i.e. there is no reaction, no dropdown shown and no click... whats happening is that IE is thinking that that area at the top where the header was is now invalid, or still occupied by the header or something like that? Its like the buttons and drop downs are kind of "behind" the area where the header was therefore nothing is clickable... And proof of this is that i gave some <BR> spacing to the buttons and drop downs so that they are not at the up most, but halfway down... and things work fine... whats IE up to? or is there some coding i need to do... below is the code for the header to float [it may be coz when the header is not to be shown i set the position to ' ', but i have tried with relative, fixed and static as well to no avail...] Code: <script language="javascript" type="text/javascript">
var floating_header = function() {
this.header = document.getElementsByTagName('THEAD')[0].getElementsByTagName('TR')[0];
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() {
if (window.header == undefined) {
floating_header();
}
var screenpos = this.scrollTop;
var theady_max = window.getXY(window.table_obj.getElementsByTagName('THEAD')[0]).y + window.table_obj.offsetHeight;
if (screenpos > window.theady - 100 && screenpos < theady_max) {
window.header.style.position = 'absolute';
window.header.style.top = this.offsetTop;
window.header.style.display = 'block';
window.headerOffsetTop = this.offsetTop;
}
else {
if (screenpos != undefined && window.header != undefined) {
window.header.style.position = '';
window.header.style.top = '';
window.headerOffsetTop = undefined;
window.header = undefined;
}
else {
if (window.headerOffsetTop) {
window.header.style.position = 'absolute';
window.header.style.top = window.headerOffsetTop;
window.header.style.display = 'block';
}
}
}
}
document.getElementById("divcn").onscroll = this.setheader;
this.table_obj = document.getElementsByTagName('THEAD')[0].parentNode;
this.theady = this.getXY(this.table_obj.getElementsByTagName('THEAD')[0]).y;
};
floating_header();
</script>
Hello, I'm trying to make a slide show for a website that has simple controls on it. I've attached this example so you can see what i mean.... http://www.bigw.com.au/bigw/home.jsp As you can see they use 3 images, and they have controls to go between images easily. Can someone please help me with this code urgently?? Thanks, S. I am brand new to Javascript, have been studying on Lynda.com for almost a week trying to get the hang. I found a cool scrolling effect with controls here at the very bottom of the page, and have built a page just trying to duplicate the html and js below. Unfortunately, it doesn't work. The CSS seems to be there, however no scrolling, any help would be greatly appreciated. PHP Code: <title>Untitled Document</title> <style type="text/css"> #footersponsors ul { list-style-type:none; } #footersponsors { float:left; padding-top:5px; position:relative; width:980px; } #footersponsors #buttons { border:1px solid #777777; margin-bottom:5px; width:955px; } #footersponsors #buttons a { color:#6699CC; margin:10px; } #footersponsors .prev { float:left; } #footersponsors .next { float:right; } #footersponsors .prev img { border:0 none; padding-top:30px; text-decoration:none; } #footersponsors .next img { border:0 none; padding-top:30px; text-decoration:none; } #footersponsorsitems { float:left; margin-left:9px; overflow:hidden; width:895px; } #footersponsorsitems ul { padding-left:2px; width:3900px; } #footersponsorsitems li { float:left; height:90px; line-height:90px; margin:0 2px; width:179px; } </style> </head> <script type="text/javascript" language="javascript"> <!-- jQuery.easing.easeOutQuart = function (x, t, b, c, d) { return -c * ((t=t/d-1)*t*t*t - 1) + b; }; jQuery().ready(function() { var intval = 2600;//how often to autoscroll (in milliseconds) - This is set with a var to enable trigger functions below jQuery('#footersponsorsitems').serialScroll( { items:'li', prev:'#footersponsors a.prev', next:'#footersponsors a.next', start:0, duration:700, force:true, stop:true, lock:false, interval:intval, //autoscroll set here cycle:true, //pull back once you reach the end easing:'easeOutQuart', //use this easing equation for a funny effect jump: false, //click on the images to scroll to them exclude: 4 //stop scrolling when there are 4 items left as not to pull the others off the screen }); $('#footersponsorsitems').hover(function(){ $(this).trigger('stop'); },function(){ $(this).trigger('start'); }); $('#footersponsorsitems li').hover( function(){ $(this) .stop() .fadeTo(250, 1.0) .siblings() .stop() .fadeTo(500, 0.15); }, function(){ $('#footersponsorsitems li') .stop() .fadeTo(500, 1.0); }); }); // --> </script> <div id="footersponsors"> <input type="hidden" name="ctl26$hfCurrentPage" id="ctl26_hfCurrentPage" value="0" /> <a class="prev" href="#"><img src="/images/buttons/sponsor_select_left_off.gif" alt="<"></a> <div id="footersponsorsitems"> <ul id="ctl26_ulFooterSponsors" style="width:13725px;"> <li><a href="http://www.nhra.com/points/kn-horsepower.aspx" title="" target="_blank"><img src="/assets/footersponsor/KN-HorsePowerChallenge_4c1.gif" alt="" /></a></li> <li><a href="http://www.nhra.com/streetlegal/default.aspx" title="Street Legal Drags" target="_blank"><img src="/assets/footersponsor/NHRA_StreetLegal.gif" alt="Street Legal Drags" /></a></li> <li><a href="http://www.promodchallenge.com/" title="" target="_blank"><img src="/assets/footersponsor/promod.gif" alt="" /></a></li> <li><a href="http://www.nhra.net/yes/" title="Youth and Education Services" target="_blank"><img src="/assets/footersponsor/YESarmy_20th.gif" alt="Youth and Education Services" /></a></li> <li><a href="http://www.coca-cola.com/" title="Coke" target="_blank"><img src="/assets/footersponsor/Coke-official1.gif" alt="Coke" /></a></li> <li><a href="http://www.dasani.com/" title="Dasani" target="_blank"><img src="/assets/footersponsor/Dasani-official.gif" alt="Dasani" /></a></li> <li><a href="http://www.fullthrottleenergy.com/" title="Full Throttle" target="_blank"><img src="/assets/footersponsor/Full-Throttle-Official.gif" alt="Full Throttle" /></a></li> <li><a href="http://www.powerade.com/" title="POWERade" target="_blank"><img src="/assets/footersponsor/Powerade-official.gif" alt="POWERade" /></a></li> <li><a href="http://www.budweiser.com/" title="Budweiser" target="_blank"><img src="/assets/footersponsor/Bud-official.gif" alt="Budweiser" /></a></li> <li><a href="http://www.cat.com/" title="" target="_blank"><img src="/assets/footersponsor/Cat_official.gif" alt="" /></a></li> <li><a href="http://www.fordracing.com/" title="" target="_blank"><img src="/assets/footersponsor/ford1.gif" alt="" /></a></li> <li><a href="http://www.fram.com/" title="Fram" target="_blank"><img src="/assets/footersponsor/FRAM--Official.gif" alt="Fram" /></a></li> <li><a href="http://www.goodyeartires.com/" title="Goodyear" target="_blank"><img src="/assets/footersponsor/Goodyear_Official_4c.gif" alt="Goodyear" /></a></li> <li><a href="http://www.harley-davidson.com/" title="Harley-Davidson" target="_blank"><img src="/assets/footersponsor/HarleyOfficial-4c.gif" alt="Harley-Davidson" /></a></li> <li><a href="http://www.hurstjaws.com/" title="Hurst" target="_blank"><img src="/assets/footersponsor/HURST-tool-official.gif" alt="Hurst" /></a></li> <li><a href="http://www.lucasoil.com/" title="Lucas Oil" target="_blank"><img src="/assets/footersponsor/Lucas-official.gif" alt="Lucas Oil" /></a></li> <li><a href="http://www.maingateinc.com/" title="Main Gate" target="_blank"><img src="/assets/footersponsor/Main-Gate-Logo-NHRA.gif" alt="Main Gate" /></a></li> <li><a href="http://www.motel6.com" title="" target="_blank"><img src="/assets/footersponsor/Motel-6logo-Official1.gif" alt="" /></a></li> <li><a href="http://www.okuma.com/" title="Okuma" target="_blank"><img src="/assets/footersponsor/OKUMA_rev.gif" alt="Okuma" /></a></li> <li><a href="http://www.prestone.com/" title="Prestone" target="_blank"><img src="/assets/footersponsor/Prestone-official.gif" alt="Prestone" /></a></li> <li><a href="http://www.racingelectronics.com/" title="Racing Electronics" target="_blank"><img src="/assets/footersponsor/RE-official.gif" alt="Racing Electronics" /></a></li> <li><a href="http://www.siouxcitykenworth.com/" title="Sioux City Truck and Trailer" target="_blank"><img src="/assets/footersponsor/Sioux-City-TT.gif" alt="Sioux City Truck and Trailer" /></a></li> <li><a href="http://www.summitracing.com/" title="Summit" target="_blank"><img src="/assets/footersponsor/Summit_Official_4C.gif" alt="Summit" /></a></li> <li><a href="http://www.vpracingfuels.com/" title="VP Racing Fuels" target="_blank"><img src="/assets/footersponsor/VPofficial.gif" alt="VP Racing Fuels" /></a></li> <li><a href="http://www.wyotech.edu/" title="WyoTech" target="_blank"><img src="/assets/footersponsor/WyoTechOfficial_large_4C.gif" alt="WyoTech" /></a></li> <li><a href="http://www.nhra.com/points/kn-horsepower.aspx" title="" target="_blank"><img src="/assets/footersponsor/KN-HorsePowerChallenge_4c1.gif" alt="" /></a></li> <li><a href="http://www.nhra.com/streetlegal/default.aspx" title="Street Legal Drags" target="_blank"><img src="/assets/footersponsor/NHRA_StreetLegal.gif" alt="Street Legal Drags" /></a></li> <li><a href="http://www.promodchallenge.com/" title="" target="_blank"><img src="/assets/footersponsor/promod.gif" alt="" /></a></li> <li><a href="http://www.nhra.net/yes/" title="Youth and Education Services" target="_blank"><img src="/assets/footersponsor/YESarmy_20th.gif" alt="Youth and Education Services" /></a></li> <li><a href="http://www.coca-cola.com/" title="Coke" target="_blank"><img src="/assets/footersponsor/Coke-official1.gif" alt="Coke" /></a></li> <li><a href="http://www.dasani.com/" title="Dasani" target="_blank"><img src="/assets/footersponsor/Dasani-official.gif" alt="Dasani" /></a></li> <li><a href="http://www.fullthrottleenergy.com/" title="Full Throttle" target="_blank"><img src="/assets/footersponsor/Full-Throttle-Official.gif" alt="Full Throttle" /></a></li> <li><a href="http://www.powerade.com/" title="POWERade" target="_blank"><img src="/assets/footersponsor/Powerade-official.gif" alt="POWERade" /></a></li> <li><a href="http://www.budweiser.com/" title="Budweiser" target="_blank"><img src="/assets/footersponsor/Bud-official.gif" alt="Budweiser" /></a></li> <li><a href="http://www.cat.com/" title="" target="_blank"><img src="/assets/footersponsor/Cat_official.gif" alt="" /></a></li> <li><a href="http://www.fordracing.com/" title="" target="_blank"><img src="/assets/footersponsor/ford1.gif" alt="" /></a></li> <li><a href="http://www.fram.com/" title="Fram" target="_blank"><img src="/assets/footersponsor/FRAM--Official.gif" alt="Fram" /></a></li> <li><a href="http://www.goodyeartires.com/" title="Goodyear" target="_blank"><img src="/assets/footersponsor/Goodyear_Official_4c.gif" alt="Goodyear" /></a></li> <li><a href="http://www.harley-davidson.com/" title="Harley-Davidson" target="_blank"><img src="/assets/footersponsor/HarleyOfficial-4c.gif" alt="Harley-Davidson" /></a></li> <li><a href="http://www.hurstjaws.com/" title="Hurst" target="_blank"><img src="/assets/footersponsor/HURST-tool-official.gif" alt="Hurst" /></a></li> <li><a href="http://www.lucasoil.com/" title="Lucas Oil" target="_blank"><img src="/assets/footersponsor/Lucas-official.gif" alt="Lucas Oil" /></a></li> <li><a href="http://www.maingateinc.com/" title="Main Gate" target="_blank"><img src="/assets/footersponsor/Main-Gate-Logo-NHRA.gif" alt="Main Gate" /></a></li> <li><a href="http://www.motel6.com" title="" target="_blank"><img src="/assets/footersponsor/Motel-6logo-Official1.gif" alt="" /></a></li> <li><a href="http://www.okuma.com/" title="Okuma" target="_blank"><img src="/assets/footersponsor/OKUMA_rev.gif" alt="Okuma" /></a></li> <li><a href="http://www.prestone.com/" title="Prestone" target="_blank"><img src="/assets/footersponsor/Prestone-official.gif" alt="Prestone" /></a></li> <li><a href="http://www.racingelectronics.com/" title="Racing Electronics" target="_blank"><img src="/assets/footersponsor/RE-official.gif" alt="Racing Electronics" /></a></li> <li><a href="http://www.siouxcitykenworth.com/" title="Sioux City Truck and Trailer" target="_blank"><img src="/assets/footersponsor/Sioux-City-TT.gif" alt="Sioux City Truck and Trailer" /></a></li> <li><a href="http://www.summitracing.com/" title="Summit" target="_blank"><img src="/assets/footersponsor/Summit_Official_4C.gif" alt="Summit" /></a></li> <li><a href="http://www.vpracingfuels.com/" title="VP Racing Fuels" target="_blank"><img src="/assets/footersponsor/VPofficial.gif" alt="VP Racing Fuels" /></a></li> <li><a href="http://www.wyotech.edu/" title="WyoTech" target="_blank"><img src="/assets/footersponsor/WyoTechOfficial_large_4C.gif" alt="WyoTech" /></a></li> <li><a href="http://www.nhra.com/points/kn-horsepower.aspx" title="" target="_blank"><img src="/assets/footersponsor/KN-HorsePowerChallenge_4c1.gif" alt="" /></a></li> <li><a href="http://www.nhra.com/streetlegal/default.aspx" title="Street Legal Drags" target="_blank"><img src="/assets/footersponsor/NHRA_StreetLegal.gif" alt="Street Legal Drags" /></a></li> <li><a href="http://www.promodchallenge.com/" title="" target="_blank"><img src="/assets/footersponsor/promod.gif" alt="" /></a></li> <li><a href="http://www.nhra.net/yes/" title="Youth and Education Services" target="_blank"><img src="/assets/footersponsor/YESarmy_20th.gif" alt="Youth and Education Services" /></a></li> <li><a href="http://www.coca-cola.com/" title="Coke" target="_blank"><img src="/assets/footersponsor/Coke-official1.gif" alt="Coke" /></a></li> <li><a href="http://www.dasani.com/" title="Dasani" target="_blank"><img src="/assets/footersponsor/Dasani-official.gif" alt="Dasani" /></a></li> <li><a href="http://www.fullthrottleenergy.com/" title="Full Throttle" target="_blank"><img src="/assets/footersponsor/Full-Throttle-Official.gif" alt="Full Throttle" /></a></li> <li><a href="http://www.powerade.com/" title="POWERade" target="_blank"><img src="/assets/footersponsor/Powerade-official.gif" alt="POWERade" /></a></li> <li><a href="http://www.budweiser.com/" title="Budweiser" target="_blank"><img src="/assets/footersponsor/Bud-official.gif" alt="Budweiser" /></a></li> <li><a href="http://www.cat.com/" title="" target="_blank"><img src="/assets/footersponsor/Cat_official.gif" alt="" /></a></li> <li><a href="http://www.fordracing.com/" title="" target="_blank"><img src="/assets/footersponsor/ford1.gif" alt="" /></a></li> <li><a href="http://www.fram.com/" title="Fram" target="_blank"><img src="/assets/footersponsor/FRAM--Official.gif" alt="Fram" /></a></li> <li><a href="http://www.goodyeartires.com/" title="Goodyear" target="_blank"><img src="/assets/footersponsor/Goodyear_Official_4c.gif" alt="Goodyear" /></a></li> <li><a href="http://www.harley-davidson.com/" title="Harley-Davidson" target="_blank"><img src="/assets/footersponsor/HarleyOfficial-4c.gif" alt="Harley-Davidson" /></a></li> <li><a href="http://www.hurstjaws.com/" title="Hurst" target="_blank"><img src="/assets/footersponsor/HURST-tool-official.gif" alt="Hurst" /></a></li> <li><a href="http://www.lucasoil.com/" title="Lucas Oil" target="_blank"><img src="/assets/footersponsor/Lucas-official.gif" alt="Lucas Oil" /></a></li> <li><a href="http://www.maingateinc.com/" title="Main Gate" target="_blank"><img src="/assets/footersponsor/Main-Gate-Logo-NHRA.gif" alt="Main Gate" /></a></li> <li><a href="http://www.motel6.com" title="" target="_blank"><img src="/assets/footersponsor/Motel-6logo-Official1.gif" alt="" /></a></li> <li><a href="http://www.okuma.com/" title="Okuma" target="_blank"><img src="/assets/footersponsor/OKUMA_rev.gif" alt="Okuma" /></a></li> <li><a href="http://www.prestone.com/" title="Prestone" target="_blank"><img src="/assets/footersponsor/Prestone-official.gif" alt="Prestone" /></a></li> <li><a href="http://www.racingelectronics.com/" title="Racing Electronics" target="_blank"><img src="/assets/footersponsor/RE-official.gif" alt="Racing Electronics" /></a></li> <li><a href="http://www.siouxcitykenworth.com/" title="Sioux City Truck and Trailer" target="_blank"><img src="/assets/footersponsor/Sioux-City-TT.gif" alt="Sioux City Truck and Trailer" /></a></li> <li><a href="http://www.summitracing.com/" title="Summit" target="_blank"><img src="/assets/footersponsor/Summit_Official_4C.gif" alt="Summit" /></a></li> <li><a href="http://www.vpracingfuels.com/" title="VP Racing Fuels" target="_blank"><img src="/assets/footersponsor/VPofficial.gif" alt="VP Racing Fuels" /></a></li> <li><a href="http://www.wyotech.edu/" title="WyoTech" target="_blank"><img src="/assets/footersponsor/WyoTechOfficial_large_4C.gif" alt="WyoTech" /></a></li> </ul> </div> <a class="next" href="#"><img src="/images/buttons/sponsor_select_right_off.gif" alt=" />"></a> </div> </div> </body> </html> Can anyone tell me of how to take or assign a javascript variable into php.
I get the screen resolution with this script: <SCRIPT language="JavaScript"> <!-- height = screen.height; width = screen.width; document.write(width + "x" + height); var x = ( width + "x" + height); //--> </SCRIPT> Now I have some links below and I want to use bold if the link has the same screen resolution: <a href="page1">800x600</a> <a href="page2">1024x768</a> <a href="page3">1680x1050</a> <a href="page4">1920x1200</a> Supposing my screen resolution is 1920x1200, the result should be: 800x600 1024x768 1680x1050 1920x1200 How do I do that? Thx!! SOLVED I am trying to use a php variable in javascript. At the moment I am using a fixed variable PHP Code: $articleID = 5; Then outputting it to the page to declare a javascript variable Code: var articleid = "<?php echo $articleID; ?>"; Then trying to us it within a string "FlashVars", "fileURL=../uploadedfiles/+ articleid + .gpx&key=ABQIAAAAOQBC......... Can anyone tell me what I am doing wrong? I am not very used to Javascript and perhaps I am going about it totally the wrong way. Help! Gordon Is it possible to pass the value of a javascript variable through src? For example, instead of... <script type="text/javascript" src="/myfolder/myjsfile.js"></script> ...could I have something like... <script type="text/javascript" src=JS VARIABLE VALUE></script> What would be the syntax for this? Is it even possible? Thank you! |
|||||||