locked
Javascript in CEWP breaks Global Nav and Changes a View in another web part RRS feed

  • Question

  • Note: I'm not a developer.  [SharePoint 2007] So, I added javascript code via source editor in a CEWP to add a rotating Image to my site.  The rotating image works perfectly with the code below but then I noticed 2 things:

    1. When the CEWP with my javascript is on the page, the Global Navigation Flyout menus do not work and the only tab that I can click on is the "Home" tab, all others do not allow me to click (I have a hyperlink on the Tab Heading).  Global Navigation is setup as Headings through modify navigation.

    2. The announcement web part that I have on the page in summary view changes by no longer displaying the body content summary.  The remaining elements of the view stay the same.

    Here is the code that I used for the rotating image, any ideas what I would need to change to stop this CEWP from interfering with the rest of my page:

    <script language="JavaScript1.2">

    var howOften = 3; //number often in seconds to rotate

    var current = 0; //start the counter at 0

    var ns6 = document.getElementById&&!document.all; //detect netscape 6

    // place your images, text, etc in the array elements here

    var items = new Array();

        items[0]="<img alt='image0 (9K)' src='http://site/001.jpg' height='240' width='320' border='0' /><p><FONT color=#000000  size=2>This is the first of many images to appear on this dialogue box in a rotating manner.  Thanks for watching.</font></p>"; //a linked image

        items[1]="<img alt='image1 (9K)' src='http://site/002.jpg' height='240' width='320' border='0' /><p><FONT color=#000000 size=2>Is this some kind of elaborate Ruse?</font></p>"; //a linked image

        items[2]="<img alt='image2 (9K)' src='http://site/003.jpg' height='240' width='320' border='0' /><p><FONT color=#000000 size=2>Carrie is going to learn javascript so she can continue to update all of these rotating images.</font></p>"; //a linked image

       items[3]="<img alt='image3 (9K)' src='http://site/004.jpg' height='240' width='320' border='0' /><p><FONT color=#000000 size=2>She might not want to though, so we can also show Russ how to do it if he wants to use the code instead.</font></p>"; //a linked image

        items[4]="<img alt='image4 (9K)' src='http://site/005.jpg' height='240' width='320' border='0' /><p><FONT color=#000000 size=2>Well that's a fancy picture.  Who is in it, I don't know, I didn't look before I started typing.</font></p>"; //a linked image

        items[5]="<img alt='image5 (18K)' src='http://site/006.jpg' height='240' width='320' border='0' /><p><FONT color=#000000 size=2>But can I change the font? </font></p>"; //a linked image

    function rotater() {

        document.getElementById("placeholder").innerHTML = items[current];

        current = (current==items.length-1) ? 0 : current + 1;

        setTimeout("rotater()",howOften*1000);

    }

    function rotater() {

        if(document.layers) {

            document.placeholderlayer.document.write(items[current]);

            document.placeholderlayer.document.close();

        }

        if(ns6)document.getElementById("placeholderdiv").innerHTML=items[current]

            if(document.all)

                placeholderdiv.innerHTML=items[current];

        current = (current==items.length-1) ? 0 : current + 1; //increment or reset

        setTimeout("rotater()",howOften*1000);

    }

    window.onload=rotater;

    //-->

    </script>

    <layer id="placeholderlayer"></layer><div id="placeholderdiv"></div>

    Wednesday, July 18, 2012 7:31 PM

Answers

  • Hi,

    Please try this:
    <script language="JavaScript1.2">
    
    var howOften = 3; //number often in seconds to rotate
    
    var current = 0; //start the counter at 0
    
    var ns6 = document.getElementById&&!document.all; //detect netscape 6
    
    // place your images, text, etc in the array elements here
    
    var items = new Array();
    
        items[0]="<img alt='image0 (9K)' src='http://site/001.jpg' height='240' width='320' border='0' /><p><FONT color=#000000  size=2>This is the first of many images to appear on this dialogue box in a rotating manner.  Thanks for watching.</font></p>"; //a linked image
    
        items[1]="<img alt='image1 (9K)' src='http://site/002.jpg' height='240' width='320' border='0' /><p><FONT color=#000000 size=2>Is this some kind of elaborate Ruse?</font></p>"; //a linked image
    
        items[2]="<img alt='image2 (9K)' src='http://site/003.jpg' height='240' width='320' border='0' /><p><FONT color=#000000 size=2>Carrie is going to learn javascript so she can continue to update all of these rotating images.</font></p>"; //a linked image
    
       items[3]="<img alt='image3 (9K)' src='http://site/004.jpg' height='240' width='320' border='0' /><p><FONT color=#000000 size=2>She might not want to though, so we can also show Russ how to do it if he wants to use the code instead.</font></p>"; //a linked image
    
        items[4]="<img alt='image4 (9K)' src='http://site/005.jpg' height='240' width='320' border='0' /><p><FONT color=#000000 size=2>Well that's a fancy picture.  Who is in it, I don't know, I didn't look before I started typing.</font></p>"; //a linked image
    
        items[5]="<img alt='image5 (18K)' src='http://site/006.jpg' height='240' width='320' border='0' /><p><FONT color=#000000 size=2>But can I change the font? </font></p>"; //a linked image
    
    
    
    function CustomRotater() {
    
        if(document.layers) {
    
            document.placeholderlayer.document.write(items[current]);
    
            document.placeholderlayer.document.close();
    
        }
    
        if(ns6)document.getElementById("placeholderdiv").innerHTML=items[current]
    
            if(document.all)
    
                 placeholderdiv.innerHTML=items[current];
    
        current = (current==items.length-1) ? 0 : current + 1; //increment or reset
    
        setTimeout("CustomRotater()",howOften*1000);
    
    }
    
    document.onreadystatechange = stateChange;
    
    function stateChange() {
    if(document.readyState == 'complete') {
     setTimeout("CustomRotater()",howOften*500);
    }
    }
    
    //-->
    
    </script>
    
    <layer id="placeholderlayer"></layer><div id="placeholderdiv"></div>
    
    //

    Thanks,
    Lhan Han
    Thursday, July 19, 2012 3:17 AM
    Moderator

All replies

  • Hi,

    Please try this:
    <script language="JavaScript1.2">
    
    var howOften = 3; //number often in seconds to rotate
    
    var current = 0; //start the counter at 0
    
    var ns6 = document.getElementById&&!document.all; //detect netscape 6
    
    // place your images, text, etc in the array elements here
    
    var items = new Array();
    
        items[0]="<img alt='image0 (9K)' src='http://site/001.jpg' height='240' width='320' border='0' /><p><FONT color=#000000  size=2>This is the first of many images to appear on this dialogue box in a rotating manner.  Thanks for watching.</font></p>"; //a linked image
    
        items[1]="<img alt='image1 (9K)' src='http://site/002.jpg' height='240' width='320' border='0' /><p><FONT color=#000000 size=2>Is this some kind of elaborate Ruse?</font></p>"; //a linked image
    
        items[2]="<img alt='image2 (9K)' src='http://site/003.jpg' height='240' width='320' border='0' /><p><FONT color=#000000 size=2>Carrie is going to learn javascript so she can continue to update all of these rotating images.</font></p>"; //a linked image
    
       items[3]="<img alt='image3 (9K)' src='http://site/004.jpg' height='240' width='320' border='0' /><p><FONT color=#000000 size=2>She might not want to though, so we can also show Russ how to do it if he wants to use the code instead.</font></p>"; //a linked image
    
        items[4]="<img alt='image4 (9K)' src='http://site/005.jpg' height='240' width='320' border='0' /><p><FONT color=#000000 size=2>Well that's a fancy picture.  Who is in it, I don't know, I didn't look before I started typing.</font></p>"; //a linked image
    
        items[5]="<img alt='image5 (18K)' src='http://site/006.jpg' height='240' width='320' border='0' /><p><FONT color=#000000 size=2>But can I change the font? </font></p>"; //a linked image
    
    
    
    function CustomRotater() {
    
        if(document.layers) {
    
            document.placeholderlayer.document.write(items[current]);
    
            document.placeholderlayer.document.close();
    
        }
    
        if(ns6)document.getElementById("placeholderdiv").innerHTML=items[current]
    
            if(document.all)
    
                 placeholderdiv.innerHTML=items[current];
    
        current = (current==items.length-1) ? 0 : current + 1; //increment or reset
    
        setTimeout("CustomRotater()",howOften*1000);
    
    }
    
    document.onreadystatechange = stateChange;
    
    function stateChange() {
    if(document.readyState == 'complete') {
     setTimeout("CustomRotater()",howOften*500);
    }
    }
    
    //-->
    
    </script>
    
    <layer id="placeholderlayer"></layer><div id="placeholderdiv"></div>
    
    //

    Thanks,
    Lhan Han
    Thursday, July 19, 2012 3:17 AM
    Moderator
  • Thanks!
    Thursday, July 19, 2012 4:52 PM