www.webdeveloper.com
Results 1 to 3 of 3

Thread: JS Help for function

Hybrid View

  1. #1
    Join Date
    May 2009
    Posts
    5

    JS Help for function

    Maybe someone can help me!? I am not very experienced in javascript.
    The problem: I have two images which I us for different switching displays, the small one is s_filename.jpg and the large one is x_s_filename.jpg

    The script below is grabbing the filename prefix, but only the first letter, how can I manage it to get the first 3 or 2 letters like x_s

    function sizeName(imgsize){
    var size_name

    switch (imgsize)
    {
    case 1 :
    size_name = 'x_s';
    break;
    default : // 0
    size_name = 's';
    }
    return size_name;
    }
    I appreciate any help.
    Last edited by omar1000; 05-03-2009 at 08:43 AM.

  2. #2
    Join Date
    Aug 2007
    Posts
    3,767
    No, what that code does very inefficiently, is return "s" if you call it as sizeName(1), and "x_s" if you call it as sizeName(1). So you showed us the wrong part of the code.

    And from a programming point of view, that's a terrible naming system. It would be much easier if the small one was called s_filename.jpg and the large one was called x_filename.jpg. Or even better, if you had two separate folders, large/filename.jpg, and small/filename.jpg.

  3. #3
    Join Date
    May 2009
    Posts
    5
    Ok, so maybe the whole code is more helpful

    PHP Code:
    // Define Global Vars
    var detailSlider
    var pageScroll
    var sessionCookie
    var prefetch = [];
    var 
    size Cookie.read("size");
    var 
    imageName '';
    var 
    imageSizes  = [];
    var 
    resizeTimer '';
    var 
    next =  '';
    var 
    prev ''
    var about false;

    // Verify that the size cookie is valid:
    if(size == null || size.toInt() < 0){
        var 
    size 'auto';
    }else{
        var 
    size size.toInt();
    }


    // Take the current browser size, and determine the correct 
    // image size to load. (Or load the size specified in the cookie)
    function chooseSize () {
        
        
    // If a size has already been set via a cookie,
        // load that size instead:
        
    if(size != 'auto'){
            return 
    size;
        }
        
        var 
    windowSize window.getSize();
        
    // x = width y = height
        // x px (padding)
        
    if(windowSize.1230 || windowSize.850){
            return 
    0// 0 = small
        
    }else if(windowSize.>= 1230 && windowSize.>= 900){
            return 
    1// 1 = X-Large
        
    }
    }

    // Convert the size number into the actual title
    function sizeName(imgsize){
        var 
    size_name
        
        
    switch (imgsize
        { 
           case 

              
    size_name 'x_s';
              break; 
           default : 
    // 0
              
    size_name 's'
        }
        return 
    size_name;
    }

    /*
        FUNCTION: loadImage( animate [bool,optional], manual [int,optional] )

        This function loads the appropiate image size depanding on the user's browser window.
        It can also load a specefied size if the variable "manual" is set.
        Animation is enabled by default, but can be turned off by setting animate to false.
    */
    function loadImage(animatemanual){
        
        
    // Only load the small image by default on iPods:
        
    if(Browser.Platform.ipod == true && manual === false){
            return 
    false;
        }
        
        if(
    manual !== false){
            var 
    detectSize manual.toInt();
            
    size detectSize;
            
    Cookie.write('size'size);
        }else if(
    size != 'auto'){
            var 
    detectSize size;
        }else{
            var 
    detectSize chooseSize();
            
    Cookie.write('auto_size'detectSize);
        }
        
        
        if(
    imageSizes[detectSize] == '0x0'){

            while(
    detectSize !== && imageSizes[detectSize] == '0x0'){
                
    detectSize detectSize-1;
            }
            
        }
        
        var 
    imgSize imageSizes[detectSize].split('x');
        var 
    name sizeName(detectSize);
        
        
    // currentSize = $('wrapper').getStyle('width').toInt();
        
    imgSize[0] = imgSize[0].toInt();
        
    imgSize[1] = imgSize[1].toInt();
        
        var 
    ratio imgSize[0]/imgSize[1];
        
        if(
    imgSize[0] < 800){
            var 
    pagewidth 800;
        }else{
            var 
    pagewidth imgSize[0];
        }
        
        if(
    imgSize[0] == || imgSize[1] == 0){
            return 
    false;
        }
        
        
        $$(
    '#size a').each(function(item){
            if(
    detectSize == item.rel){
                
    item.addClass('active');
            }else{
                
    item.removeClass('active');    
            }
        });
        
        if($(
    'photo').getStyle('width').toInt() == (imgSize[0] )){
            
    // No Change
            
    return false;
        }else if(
    animate == false){
            
    // Without Animation:
            
    $('wrapper').setStyle('width',(pagewidth ));
        }else{
            
    // With Wnimation:
            
    $('wrapper').tween('width', (pagewidth ));
        }
        
        var 
    img = $('image');
        
        if(
    animate == false){
            
    // Without Animation:
            
    img.setProperty('width',imgSize[0]);
            
    img.setProperty('height',imgSize[1]);
            
            if(
    ratio <= 1){
                $(
    'photo').setStyle('width',(imgSize[0]));
                $(
    'photo').setStyle('height',(imgSize[1]));
            }
            
        }else{
            
    // With Animation:
            
    img.morph({widthimgSize[0], heightimgSize[1]});
            
            if(
    ratio <= 1){
                $(
    'photo').morph({width: (imgSize[0]+26), height: (imgSize[1])});
            }
        }
        
        
        
    img.setProperty('src','images/'+name.substr(0,1) + imageName.substr(1,120));
        
        if(
    ratio 1){
            var 
    orientation 'horizontal';
        }else if(
    ratio 1){
            var 
    orientation 'vertical';
        }else{
            var 
    orientation 'square';
        }
        
        if(!
    about){
            $(
    'wrapper').setProperty('class',name+' '+orientation);
        }else{
            $(
    'wrapper').setProperty('class',name+' '+orientation+' about');
        }
        

        
        
    // If the user is using IE6:
        
    if(Browser.Engine.trident4 != null){
            
    // Manually specify the overlay height:
            
    $('navigation').setStyle('height',imgSize[1]);
        }
        
        
        
    // Image size has change, return true:
        
    return true;
    }


    window.addEvent('domready', function() {
        
        
    about    =    $('wrapper').hasClass('about');
        
    if(!
    about){
        
    next = $('next');
        
    prev = $('prev');

        
        
    // While the page loads, might as well display the next/prev nav links...
        // if(next){next.addClass('visible');}
        // if(prev){prev.addClass('visible');}
        
        // Load the correct sized image, without animation:
        
    loadImage(false,false);

        
    // Define FX:
        
    var detailSlider = new Fx.Slide('details', {
            
    link'ignore',
            
    duration800,
            
    fps30,
            
    wheelStopsfalse,
            
    transitionFx.Transitions.Expo.easeInOut
        
    });

        var 
    pageScroll = new Fx.Scroll(window, {
            
    link'ignore',
            
    duration800,
            
    fps30,
            
    wheelStopsfalse,
            
    transitionFx.Transitions.Expo.easeInOut
        
    });

        
    // Read Sesson Cookie
        
    var sessionCookie Cookie.read("detailView");

        
    // If the previous page had hidden details, 
        // hide the details for this page as well.
        
    if(sessionCookie != 'show'){
            
    // Hide Slider:
            
    detailSlider.hide();
        }else{
            
    // If the user is using IE6:
            
    if(Browser.Engine.trident4 != null){
                $(
    'details').parentNode.setStyle('height',$('details').getSize().y+50);
            }
        }


        
        
    // end if !about

        // Make the image size links clickable:
        
    $$('#size a').each(function(link){
            
    link.addEvent('click', function(){
                
    loadImage(true,link.rel);
                return 
    false;
            });
        });


    });


    window.addEvent('resize',function(){
        
        
    // Wait 600ms before resizing the photo...
        
    resizeTimer $clear(resizeTimer);
        
    resizeTimer = (function(){ loadImage(true,false); }).delay(200);

    }); 
    the script is working propper, but unfortunately my upload is creating the file s_filename.jpg and x_s_filename.jpg

    If I rename the file x_s manually to x_filename it is working, but this can't be a solution

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