www.webdeveloper.com
Results 1 to 5 of 5

Thread: Assigning a class to element when slide active

  1. #1
    Join Date
    Mar 2009
    Posts
    15

    Assigning a class to element when slide active

    Hello! I am stuck...I'm fairly new to javascript and have been searching for examples of this & the results I come across either don't have examples up anymore (domain is for sale, page doesn't exist) or I just can't get my head around the examples so far - I have a slide show that rotates automatically when the page is loaded and it can also be navigated by clicking on images. I'm trying to add a class to the image tags, depending on which slide is currently being shown.

    For example, the html code for the images looks something like this:
    HTML Code:
    <img src="images/clear-small.png"  alt="1" id="slideOne" onclick="DisplaySlides(0)"/>
    
    <img src="images/clear-small.png"  alt="2" id="slideTwo" onclick="DisplaySlides(1)"/>
    
    <img src="images/clear-small.png"  alt="3" id="slideThree" onclick="DisplaySlides(2)"/>
    
    <img src="images/clear-small.png"  alt="4" id="slideFour" onclick="DisplaySlides(3)"/>
    The javascript I have so far, looks like this:
    Code:
    window.onload = InitTimeInterval;
    
    var num=0;
    var thisPic=0;
    var slide_num=0;
    var imgArray= new Array(4);
    
    // format: src, text, headline, 1st link, 2nd link, 3rd link
    imgArray = [  
     ['images/slideImg0.jpg', 
     'Description or other text that would give visitors information about this feature &amp; make them want to click for more. Or any other text that you might want to put here. It is up to you.',
     'Easter in KC',
     'Link 1A',
     'Link 1B',
     'Link 1C',
     'Link 1D'],
     ['images/slideImg1.jpg', 
     'Description B or other text that would give visitors information about this feature &amp; make them want to click for more. Or any other text that you might want to put here. It is up to you.',
     'Dancing',
     'Link 2A',
     'Link 2B',
     'Link 2C',
     'Link 2D'],
     ['images/slideImg2.jpg', 
     'Description C or other text that would give visitors information about this feature &amp; make them want to click for more. Or any other text that you might want to put here. It is up to you.',
     'Decorated Eggs',
     'Link 3A',
     'Link 3B',
     'Link 3C',
     'Link 3D'],
     ['images/slideImg3.jpg', 
     'Description D or other text that would give visitors information about this feature &amp; make them want to click for more. Or any other text that you might want to put here. It is up to you.',
     'Chick',
     'Link 4A',
     'Link 4B',
     'Link 4C',
     'Link 4D']
    ];
    
    function LimitNumber(value) {
      if (value < 0) { value = imgArray.length - 1; }
      var value = value % imgArray.length;
      return value; 
    }
    
    
    function slide(slide_num,Mypic,Mylbl,imgTitle,imgLinkA,imgLinkB,imgLinkC,imgLinkD) {
      document.getElementById("Mypic").src=imgArray[slide_num][0];
      document.getElementById("Mylbl").innerHTML=imgArray[slide_num][1];
      document.getElementById("imgTitle").innerHTML=imgArray[slide_num][2];
      document.getElementById("imgLinkA").innerHTML=imgArray[slide_num][3];
      document.getElementById("imgLinkB").innerHTML=imgArray[slide_num][4];
      document.getElementById("imgLinkC").innerHTML=imgArray[slide_num][5];
      document.getElementById("imgLinkD").innerHTML=imgArray[slide_num][6];
    }
    
    var timedNum = 0;
    
    function TimedImage() {
      timedNum++;
      timedNum = LimitNumber(timedNum);
    slide(timedNum,'Mypic','Mylbl','imgTitle','imgLinkA','imgLinkB','imgLinkC','imgLinkD');
    }
    
    var timedFunc = '';
    function InitTimeInterval() {
      timedFunc = setInterval("TimedImage()",6000);
      document.getElementById("prevLink").onclick = processPrevious;
      document.getElementById("nextLink").onclick = processNext;
     }
     
     var sNo = 0;
    
    function DisplaySlides(SNo) {
      clearInterval(timedFunc);
      slide(SNo,'Mypic','Mylbl','imgTitle','imgLinkA','imgLinkB','imgLinkC','imgLinkD');
    }
    
    
    
    var currImg=0;
    
    
    function processPrevious() {
    	newSlide(-1);
    }
    
    function processNext() {
    	newSlide(1);
    	}
    
    function newSlide(direction) {
    	var imgCt = imgArray.length;
    	currImg = currImg + direction;
    	if (currImg < 0) {
    		currImg = imgCt-1;
    	}
    	if (currImg == imgCt) {
    		currImg = 0;
    	}
    	
    	slide(currImg,'Mypic','Mylbl','imgTitle','imgLinkA','imgLinkB','imgLinkC','imgLinkD');
    	clearInterval(timedFunc);
    }

    The name of the class that I'm trying to add from my stylesheet is "slide-active". Can somebody please help me? Thanks!!

  2. #2
    Join Date
    Mar 2009
    Posts
    485
    If all you want is to set the CSS class of an element---

    var x=document.getElementById("element_id");
    var z=document.createAttribute("class"); //literally--class--not the name of the class
    z.value="Whatever_the_class_name_is";
    x.setAttributeNode(z);

  3. #3
    Join Date
    Mar 2009
    Posts
    15
    I'm pretty new to javascript, so I'm not sure if the code you gave me is what I'm looking for. I don't see how to use that code to add the class attribute if a certain slide is being viewed. I've tried some different if statements, but can't seem to figure it out - unless I'm using the wrong variables. Maybe if I show you what I'm working on, that would help explain what I'm trying to do. I have the slideshow up at http://www.bellafaithdesign.com/newkcparent/. The first slide says "Easter in KC" and there are four dots between the arrows. Right now if you hover over the dots, they change to orange (with css). However, I am trying to add a class (with js) so that the dot is orange while displaying the corresponding slide. Does that make more sense?

  4. #4
    Join Date
    Mar 2009
    Posts
    485
    This is not wonderful, but you can fit it in---I assume you have two classes of image in your CSS--I
    shall call them bg(for background) and dis(for display). Here is a function that takes as parameters
    (1)the id of the image that is being retired and (2) the id of the new image that is to be displayed

    function changeClass(oldImage_id,newImage_id){
    var old1=document.getElementById(oldImage_id);
    var new1=document.getElementById(newImage_id);
    var x=document.createAttribute("class");
    x.value="bg"; //change bg to the CSS "class" that the images that are not currently displayed have
    old1.setAttributeNode(x);
    var z=document.createAttribute("class");
    z.value="dis"; //change dis to the class that the iamge that is supposed to be displayed is
    new1.setAttributeNode(z);
    }
    Last edited by Tcobb; 04-02-2009 at 06:14 PM. Reason: lack of clarity

  5. #5
    Join Date
    Mar 2009
    Posts
    15
    Thank you so much! Something you said finally clicked! I was using id instead of class to define the original style, therefore it would always trump the class. I changed the CSS definition to a class and then some of your code you listed mixed with some I already had typed up & voila! My dots that correspond with the current slide are now orange! (http://www.bellafaithdesign.com/newkcparent/) Thank you thank you thank you! I'm so excited to be over that hill...

    It seems I still have one kink to figure out before this slideshow is finalized. If I click on one of the individual dots (pagination-style), then click the previous/next button, it doesn't always go to the immediate previous/next slide. Any ideas?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles