Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 17
  1. #1
    Junior Member
    Join Date
    Jun 2012
    Posts
    15
    Member #
    31989
    I have a portfolio website at: www.idfromdc.com The issue is that I want it all to show up larger, theres a lot of white space to the right. I'm not sure how I work increase the overall size of the site without messing up everything. Could someone please give me some insight/help?

    I'm not sure what files are needed to be looked at such as the style.css, baseline.css, or if its the javascript. Let me know where to start and I can provide any resources needed. (the styles.css was too long to post here, I can send it separately)

    I appreciate and thank anyone that can help me.

  2.  

  3. #2
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    Increase the size of the site in relation to what ?

    Do you mean "fill the screen?" , the term I've been hearing is called "responsive" design that sizes itself to different screen sizes.... Same thing shows on big wide monitors that shows on mobile devices.

    Problem is, no one is actually accomplishing that 100% because most mobile devices don't support all the browsers capabilities.

    Not sure what you're asking for, but there's an issue in the fact that the page opens fine on an iPhone, but any resizing and your images get repositioned ( incorrectly ), and downsized like my screen is a big wide screen monitor.... Totally breaks the design on resize.

  4. #3
    Junior Member
    Join Date
    Jun 2012
    Posts
    15
    Member #
    31989
    Yes I would like the site to fill the screen. Like once a project is selected it fills the screen, but then in 2 seconds it resizes and theres is a large white space to the right. I have taken a screen shot of it:


    Can anyone give me insight on how to make the site stay full screen.

    Thank you again for taking the time and for the needed help!

  5. #4
    Junior Member
    Join Date
    Jun 2012
    Posts
    15
    Member #
    31989
    Quote Originally Posted by Webzarus, post: 242662
    Increase the size of the site in relation to what ?

    Do you mean "fill the screen?" , the term I've been hearing is called "responsive" design that sizes itself to different screen sizes.... Same thing shows on big wide monitors that shows on mobile devices.

    Problem is, no one is actually accomplishing that 100% because most mobile devices don't support all the browsers capabilities.

    Not sure what you're asking for, but there's an issue in the fact that the page opens fine on an iPhone, but any resizing and your images get repositioned ( incorrectly ), and downsized like my screen is a big wide screen monitor.... Totally breaks the design on resize.
    Yes see my comment below, thanks for responding!

  6. #5
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    Sounds like something in JavaScript is cashing that. Since CSS by itself is a display only level of scripting, JavaScript on the client is probably causing the resize ( after the page completely loads ).

    Easy to check, disable JavaScript in your browser, if the page doesn't resize, that's the cause.

    If that's the case, use basic troubleshooting to determine which script or portion of script is causing it.

  7. #6
    Junior Member
    Join Date
    Jun 2012
    Posts
    15
    Member #
    31989
    Quote Originally Posted by Webzarus, post: 242684
    Sounds like something in JavaScript is cashing that. Since CSS by itself is a display only level of scripting, JavaScript on the client is probably causing the resize ( after the page completely loads ).

    Easy to check, disable JavaScript in your browser, if the page doesn't resize, that's the cause.

    If that's the case, use basic troubleshooting to determine which script or portion of script is causing it.
    Awesome great, so yes I disabled the JavaScript and it looks like that is what is causing. Thanks for the insight! Really helpful so far. Now how would I go about troubleshooting the JS files to determine which script or portion is causing it. I'm not familiar with JS and its more complex to read then simple html:/

    Thanks again for the help so far!

  8. #7
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    probably this one:

    <script type="text/javascript" src="resize.js"></script>

    its in the <head> section of every page.

  9. #8
    Junior Member
    Join Date
    Jun 2012
    Posts
    15
    Member #
    31989
    Quote Originally Posted by Webzarus, post: 242707
    probably this one:

    <script type="text/javascript" src="resize.js"></script>

    its in the <head> section of every page.
    Awesome, here is the script, what should I be looking for?
    Code:
    // JavaScript Document
    
    var ratio = 1;
    var objs = [];
    var id_index = 0;
    
    var ScalableObject = new Class({
        initialize: function(id, obj, compatible) {
            if(typeof(compatible) != 'Array')
                this.compatible = new Array('height', 'width', 'top', 'left', 'font-size',
                    'margin-top', 'margin-bottom', 'margin-left', 'margin-right', 'padding-top','padding-left', 'padding-bottom',
                    'padding-right', 'line-height', 'bottom', 'right');
            else
                this.compatible = compatible;
            this.obj = obj;
            $(obj).store('scaleID', id);
            this.styleList = [];
            this.id = id;
            for(var i=0; i<this.compatible.length; i++) {
                if($(obj).getStyle(this.compatible[i]).indexOf('px') == -1) {
                    this.compatible.splice(i, 1);
                    i--;
                } else
                    this.styleList.push($(obj).getStyle(this.compatible[i]).split('px')[0]);
            }
        }
    });
    ScalableObject.implement({
        scale: function(r) {
            for(var i=0; i<this.compatible.length; i++)
                if($(this.obj).getStyle(this.compatible[i]).indexOf('%') == -1)
                    $(this.obj).setStyle(this.compatible[i], this.styleList[i] * r +'px');
        },
        update: function(property) {
            for(var i=0; i<this.compatible.length; i++)
                if(this.compatible[i] == property) {
                    this.styleList[i] = $(this.obj).getStyle(property).split('px')[0];
                    return;
                }
            this.compatible.push(property);
            this.styleList.push($(this.obj).getStyle(property).split('px')[0]);
        },
        updateValue: function(property, value) {
            for(var i=0; i<this.compatible.length; i++)
                if(this.compatible[i] == property) {
                    this.styleList[i] = value;
                    return;
                }
            this.compatible.push(property);
            this.styleList.push(value);
        },
        deleteCompatible: function(property) {
            for(var i=0; i<this.compatible.length; i++)
                if(this.compatible[i] == property) {
                    this.compatible.splice(i, 1);
                    this.styleList.splice(i, 1);
                    return;
                }
        }
    });
    
    var isMacSafari = (navigator.vendor && navigator.vendor.indexOf('Apple') != -1 && navigator.platform && navigator.platform.indexOf('Mac') != -1);
    
    window.addEvent(((isMacSafari) ? 'load' : 'domready'), function() {
        init_resize();
        resize();
        window.addEvent('resize', function() {
            resize();
        });
    });
    
    function scaleObject(obj, r) {
        for(var i=0; i<objs.length; i++)
            if(obj.nodeName != '#text' && (obj.nodeName != 'OBJECT' || !navigator.appName || navigator.appName != "Microsoft Internet Explorer") && obj.nodeName != 'param' && $(obj).retrieve('scaleID', -1) == objs[i].id) {
                objs[i].scale(r);
                break;
            }
    }
    
    function updateObject(obj, property) {
        for(var i=0; i<objs.length; i++)
            if(obj.nodeName != '#text' && obj.nodeName != 'param' && $(obj).retrieve('scaleID', -1) == objs[i].id) {
                objs[i].update(property);
                break;
            }
    
    }
    function updateObjectValue(obj, property, value) {
        for(var i=0; i<objs.length; i++)
            if(obj.nodeName != '#text' && obj.nodeName != 'param' && $(obj).retrieve('scaleID', -1) == objs[i].id) {
                objs[i].updateValue(property, value);
                break;
            }
    }
    function addObject(obj) {
        switch(obj.nodeName) {
            case '#text':
            case 'param':
            case 'br':
            case 'BR':
            case 'i':
            case 'I':
                return;
                break;
            case 'img':
                objs.push(new ScalableObject(id_index++, obj, new Array(
                    'height',
                    'width',
                    'top',
                    'left'
                )));
                objs[objs.length - 1].scale(ratio);
                break;
            default:
                if(obj.nodeName == 'OBJECT' && navigator.appName && navigator.appName == "Microsoft Internet Explorer")
                    return;
                objs.push(new ScalableObject(id_index++, obj, 0));
                objs[objs.length - 1].scale(ratio);
                break;
        }
        for(var i=0; i<obj.childNodes.length; i++)
            addObject(obj.childNodes[i]);
    }
    function deleteCompatible(obj, property) {
        for(var i=0; i<objs.length; i++)
            if(obj.nodeName != '#text' && obj.nodeName != 'param' && $(obj).retrieve('scaleID', -1) == objs[i].id) {
                objs[i].deleteCompatible(property);
                break;
            }
    }
    function deleteObject(obj) {
        if(obj.nodeName == 'OBJECT' && navigator.appName && navigator.appName == "Microsoft Internet Explorer") return;
        if(obj != null && obj.nodeName != '#text' && obj.nodeName != 'param') {
            for(var i=0; i<objs.length; i++)
                if($(obj).retrieve('scaleID', -1) == objs[i].id) {
                    objs.splice(i, 1);
                    break;
                }
            for(var i=0; i<obj.childNodes.length; i++)
                deleteObject(obj.childNodes[i]);
        }
    }
    function init_resize() {
        var divs = $$('div');
        var images = $$('img');
        var text = $$('a', 'h1', 'h2', 'h3', 'h4', 'p', 'input', 'textarea', 'iframe');
        for(var i=0; i<divs.length; i++)
            objs.push(new ScalableObject(id_index++, divs[i],0));
        for(var i=0; i<images.length; i++)
            objs.push(new ScalableObject(id_index++, images[i], new Array(
                'height',
                'width',
                'margin-bottom',
                'margin-right'
            )));
        for(var i=0; i<text.length; i++)
            objs.push(new ScalableObject(id_index++, text[i],0));
        if($('intro')) {
            $('intro').setStyle('width', window.getSize().x);
            $('intro').setStyle('height', window.getSize().y);
        }
    }
    function resize() {
        ratio = Math.min(window.getSize().y / 935, window.getSize().x / 1000);
        ratio = (ratio > 1) ? 1 : (ratio < .34) ? .34 : ratio;
        for(var i=0; i<objs.length; i++)
            objs[i].scale(ratio);
        if($('intro')) {
            $('intro').setStyle('width', window.getSize().x);
            $('intro').setStyle('height', window.getSize().y);
            $('intro_progress_bar').setStyle('height', 1);
        }
    /*    if($$('div.static')[0])
            $('sidewrapper').setStyle('height', ($$('div.static')[0].getSize().y + 87 * ratio > window.getSize().y) ? $$('div.static')[0].getSize().y + 87 * ratio : window.getSize().y);*/
    }

  10. #9
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    I looked at it earlier... That is the purpose of the script ... But it's an old script that doesn't take into account modern or mobile browsers.

    Just dump the whole script...

    Remove the above mentioned pointer... Reload the pages and the resize effect should be gone... If not, clear your browser cache... And it should resolve it.

  11. #10
    Junior Member
    Join Date
    Jun 2012
    Posts
    15
    Member #
    31989
    Quote Originally Posted by Webzarus, post: 242713
    I looked at it earlier... That is the purpose of the script ... But it's an old script that doesn't take into account modern or mobile browsers.

    Just dump the whole script...

    Remove the above mentioned pointer... Reload the pages and the resize effect should be gone... If not, clear your browser cache... And it should resolve it.
    I tired just deleting out the file from my FTP. Once I did so, I looked at the site, and sizing was full, but it interfered with the other scripting function and wouldn't display the pages or do the proper functions.

    Is there a way to keep that file and only delete a portion of it that controls the resizing issue, but keep the rest intact so that it does not mess with the functionality of the site? If so, what portion of the script could you recommend to delete out and see if that will work?

    Thank you again hugely for your help! If there is any design work in the future that you would need to be done, whether it be a logo, graphic, or even product development I would be happy to assist you.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:24 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com