We help IT Professionals succeed at work.

function changeStyle script

322 Views
Last Modified: 2010-04-16
Built a slider with tabs at the top for the controls having issues contolling the tabs, Would like the tabs to display the correct one when the viewer goes off the page and then back.

ie: You tab to pamper click to view hotel and then click back and the tab has either moved or the div as moved back to the being tab.

This is the script:

<script type="text/javascript">
function changeStyle(obj) {
//alert(obj);
if(obj.length>0)
{
  var links = document.getElementsByTagName("div")
  for(i=0;i<links.length;i++) {
    if (links[i].className=='controls')
        {links[i].id=(obj);}
  }
  document.getElementById("styleSelected").value = obj;
  //alert(document.getElementById("styleSelected").value);
 }
 
} //end func
</script>

<input type="hidden" id="styleSelected" value=""></input>


My controls:

<div class="controls" id="gourmet">
            <ul id="nav">
            <li id="t-gourmet"><a href="#section1" onclick="changeStyle('gourmet');" id="gourmet-link">gourmet delight</a></li>
            <li id="t-pamper"><a href="#section2" onclick="changeStyle('pamper');" id="pamper-link">pamper yourself</a></li>                  
            <li id="t-modern"><a href="#section3" onclick="changeStyle('modern');" id="modern-link">modern chic</a></li>
            <li id="t-grand"><a href="#section4" onclick="changeStyle('grand');" id="grand-link">grand opulence</a></li>
            <li class="end" id="t-special"><a href="#section5" onclick="changeStyle('special');" id="special-link">special offers</a></li>
            </ul>      
            <div class="scroller">
              <div class="content">

The page in question:http://www.hotelconnect.co.uk/hubs/luxury/luxury-home.asp

Any help would be great :)
Comment
Watch Question

Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
<script type="text/javascript" src="cookie.js"></script>

<script type="text/javascript">

function initPage() {
  var active = getCookie('active');
  if (active) changeStyle(obj);
}

function changeStyle(obj) {
//alert(obj);
if(obj.length>0)
{
  var links = document.getElementsByTagName("div")
  for(i=0;i<links.length;i++) {
    if (links[i].className=='controls')
        {links[i].id=(obj);}
  }
  document.getElementById("styleSelected").value = obj;
  //alert(document.getElementById("styleSelected").value);
 }
 setCookie("active",obj,expiryDate);
 return false
} //end func
</script>
</head>
<body onLoad="initPage()">


where cookie.js is

// cookie.js file
var cookieToday = new Date();
var expiryDate = new Date(cookieToday.getTime() + (365 * 86400000)); // a year

/* Cookie functions originally by Bill Dortsch */

function setCookie (name,value,expires,path,theDomain,secure) {
   value = escape(value);
   var theCookie = name + "=" + value +
   ((expires)    ? "; expires=" + expires.toGMTString() : "") +
   ((path)       ? "; path="    + path   : "") +
   ((theDomain)  ? "; domain="  + theDomain : "") +
   ((secure)     ? "; secure"            : "");
   document.cookie = theCookie;
}

function getCookie(Name) {
   var search = Name + "="
   if (document.cookie.length > 0) { // if there are any cookies
      var offset = document.cookie.indexOf(search)
      if (offset != -1) { // if cookie exists
         offset += search.length
         // set index of beginning of value
         var end = document.cookie.indexOf(";", offset)
         // set index of end of cookie value
         if (end == -1) end = document.cookie.length
         return unescape(document.cookie.substring(offset, end))
      }
   }
}
function delCookie(name,path,domain) {
   if (getCookie(name)) document.cookie = name + "=" +
      ((path)   ? ";path="   + path   : "") +
      ((domain) ? ";domain=" + domain : "") +
      ";expires=Thu, 01-Jan-70 00:00:01 GMT";
}

Author

Commented:
Works fine in Firefox does nothing in Internet Explorer except return to the first div gourmet.  

http://tempdirect.dev.sarah/hubs/luxury/luxury-home.asp

Author

Commented:
Any help, please??
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
   Unable to determine IP address from host name for tempdirect.dev.sarah

The dnsserver returned:

    Name Error: The domain name does not exist.

it is not a valid url

Author

Commented:
function setCookie (name,value,expires,path,theDomain,secure) {
   value = escape(value);
   var theCookie = name + "=" + value +
   ((expires)    ? "; expires=" + expires.toGMTString() : "") +
   ((path)       ? "; path="    + path   : "") +
   ((theDomain)  ? "; domain="  + theDomain : "") +
   ((secure)     ? "; secure"            : "");
   document.cookie = theCookie;
}

I am I to fill in the domain name section??

url: http://www.hotelconnect.co.uk/hubs/luxury/luxury-home1.asp

I get errors in Firefox.
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
No.

ctrl-shift-j
tells you
Error: document.getElementById("styleSelected") has no properties
Source File: http://www.hotelconnect.co.uk/hubs/luxury/luxury-home1.asp
Line: 79

so you removed the hidden field. If you do that you need to remove the code that accesses it too.

You need to delete the line
 document.getElementById("styleSelected").value = obj;

Author

Commented:
I removed this from the script:  document.getElementById("styleSelected").value = obj;
Not sure where the hidden field is?

http://www.hotelconnect.co.uk/hubs/luxury/luxury-home1.asp
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
It was there before, you removed the field, now the code and now it works in FF at least

Author

Commented:
I agree it does work in FF, but I need to work in IE as well.
This solutions sames to throw up more errors and my tabs don't same to work?
Maybe someone else can give me some insight?

Many thanks mplungjan
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
Mayby I can too

We were missing a }

function changeStyle(obj) {
  //alert(obj);
  if(obj.length>0) {
    var links = document.getElementsByTagName("div")
    for(i=0;i<links.length;i++) {
      if (links[i].className=='controls') {
        links[i].id=(obj);
      }
    }
 }
 setCookie("active",obj,expiryDate);
 return false
} //end func

Author

Commented:
obj is not defined
[Break on this error] if (active) changeStyle(obj);

Its coming up with this error again, also the tabs are not sticking.
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
Oops - now it should work:

function initPage() {
  var active = getCookie('active');
  if (active) changeStyle(active);
}

Author

Commented:
Well its an improvement!!

When u go to the page the tab no longer see gourmet as the first tab any more (ie its not on hoover) It chooses different tabs instead so the instruction to load and show gourmet highlighter doesn't work any more. If this was fixed then FF would be prefect!

IE shows not tab at all when you go off the page and return which maybe fixed with the above is fixed.
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
Wow.
I was not aware this would be this hard.

Here is a rewritten set of functions - tested in IE6 and FF


<script type="text/javascript">
HTMLElement.prototype.click = function() {
var evt = this.ownerDocument.createEvent('MouseEvents');
evt.initMouseEvent('click', true, true, this.ownerDocument.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
this.dispatchEvent(evt);
}

function initPage() {
  var active = getCookie('active');
  if (active) {
    document.getElementById(active+'-link').click();
  }
}

function changeStyle(obj) {
  //alert(obj);
  if(obj.length>0) {
    var links = document.getElementsByTagName("div")
    for(i=0;i<links.length;i++) {
      if (links[i].className=='controls') {
        links[i].id=(obj);
      }
    }
 }
 setCookie("active",obj,expiryDate);
 return false
} //end func
</script>

Author

Commented:
Your not going to like this!

But works fabulous in FF!

But... IE 6 & 7 its still showing problems. The staying on the right div is working hurray! Just that the button is disappearing. IE 6 is showing a lot of errors like Null and HTMLElement.prototype problems.

Nearly there :)
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
To stop the error try this

if (window.HTMLElement) {
  HTMLElement.prototype.click = function() {
  var evt = this.ownerDocument.createEvent('MouseEvents');
  evt.initMouseEvent('click', true, true, this.ownerDocument.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
  this.dispatchEvent(evt);
  }
}
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
Here is a sort of a hack
1. I do not know the slider code well enough to figure out why the event listener does not trigger in IE to handle the click
2. I do not have time to figure out how to get the css background from your stylesheet so if you change the purple and the white, you will have to change it in the script too
I think this will work for you in IE and FF

<script type="text/javascript">

var normalClick = true;
if (window.HTMLElement) {
  HTMLElement.prototype.click = function() {
  var evt = this.ownerDocument.createEvent('MouseEvents');
  evt.initMouseEvent('click', true, true, this.ownerDocument.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
  this.dispatchEvent(evt);
  }
  normalClick = false;
}
var savedTab = "";
function initPage() {
  var active = getCookie('active');
  if (active) {
    document.getElementById(active+'-link').click();
  }
  if (normalClick) {
    document.getElementById('t-'+active).style.backgroundColor= '#AA87B5'
    savedTab = active;
  }
}

function changeStyle(obj) {
  //alert(obj);
  if(obj.length>0) {
    var links = document.getElementsByTagName("div")
    for(i=0;i<links.length;i++) {
      if (links[i].className=='controls') {
        links[i].id=(obj);
      }
    }
    if (savedTab && savedTab != obj) {
      document.getElementById('t-'+savedTab).style.backgroundColor= 'white'
    }  
 }
 setCookie("active",obj,expiryDate);
 return false
} //end func
</script>

Author

Commented:
FF is gone a bit funny too so this doesn't fix it. Sorry :(
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
Special offers is now purple on a reload. I could fix that

My FF works perfectly

Author

Commented:
:0) Wow I'm very impressed sames to work fine in FF and IE 7 haven't tested it in 6. How do u fix the special offers tab? My last question!
IT Expert
CERTIFIED EXPERT
Top Expert 2009
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
PS: Have a look in my profile.

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.