Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript New to JavaScript.

  • This topic is empty.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #188345
    lkeeney
    Participant

    Why doesn’t this work?

    <script type="text/javascript">
        var wWidth = window.availWidth;
        if (parseInt(wWidth) > 800) document.write ("x");
    </script>
    #188347
    shaneisme
    Participant

    You want to make it screen.availWidth.

    You can also use window.innerWidth.

    The other thing you can do is document.documentElement.clientWidth which takes into account the rendering space excluding things like the scroll bar.

    All sorts of examples: http://ryanve.com/lab/dimensions/

    #188354
    lkeeney
    Participant

    Thanks shaneisme,

    I should have explained my problem better.

    What I am trying to figure out is low to load one of two different files into the body of my website based on the screen width.

    This code works when I just place text in the code instead of trying to load it from a file. However, the code below is not loading the file.

    I had been playing around and I did get it to load the content of the file once, but then I changed the code and can not get back to where it loads the text from the smallnav.html file. I guess it is obvious I don’t know much about javascript.

    I have a very unusual website design which requires a different navigation bar depending on the screen size.

    The other thing I am not sure of is if I did get the different code to load, will it run and place the correct navigation bar there or will I have to refresh the page because the javascript has to load the file after the page loads. Maybe I am doing this and it isn’t even going to work the way I want.

    <script type="text/javascript">
       if(screen.width<1030)
            {
                script src="smallnav.html";
            }
    </script>
    #188355
    shaneisme
    Participant

    Ah OK, well that’s a horse of a different color.

    The way you’re going about it is all wrong, but we’ll get back to that in a minute.

    What, precisely, is different on the navigation bar between the large and the small? Is it something like a responsive navbar where the content hides and turns into a dropdown menu?

    Example: http://getbootstrap.com/examples/navbar/

    Or are we talking about completely different content?

    If we’re talking something similar to the Bootstrap example, well you’re in luck because you don’t need Javascript at all for that. If you’re talking about completely different content, we’ll have to talk more about that.

    #188356
    lkeeney
    Participant

    This is an unusual problems.

    My client insisted on me designing a web page that includes 10 webpages stacked vertically. Each of these pages had to be 710 pixels high. not a pixel more or a pixel less.

    They wanted a navigation bar at the top of the page that had a drop-down menu with 10 buttons on the dropdown which when clicked would position the tall page so the correct one of the 10 would be positioned at the top of the page. Then at the bottom of each of there 10 pages is a link that takes you back to the top of the page where you see the navigation bar again. Their whole object in doing this is they don’t want the viewer to have to scroll to get to any of the 10 pages on this one page.

    My client wants each of these 10 pages to fit perfectly on her computer screen which is apparently 710 pixels high x 1280 pixels wide.

    Against my better judgement, I designed the website as she wanted. Everything worked fine. After I got this working, she also wanted it to work on a 1024 pixel wide monitors.

    To do this, I duplicated the content on the page and wrote code to hide the code for the narrow page when the page was displayed on a wide monitor, and hide the code for the wide monitor when the page was displayed on a narrow monitor.

    This caused problems because I now have duplicated divs which isn’t allowed. I then changed the names in the narrow pages to be different from the ones in the wide pages.

    This all worked fine except now my navigation code for all of the pages on the website no longer work because I changed the div id’s for the narrow code.

    I am now at the point were I have a need to load different navigation files into the body of the webpages depending on the size monitor it is being viewed on.

    I realize this is a convoluted design, but it done because my client wants to go live within a week (before the holidays).

    Edit: It has taken me months to design this single page because my client wants everything placed on the page at the pixel level. My client has made hundred of changes to get it to look exactly as she wants. She even constantly changed the wording of the text to take up more or less space. She had me constantly changing the font size to get things to fit where she wanted it. I must have spent days just changing the sizes of all the images so everything would fit and not extend beyond 710 pixels. in height.

    I am so frustrated with this that I am going to give up website design once I finish this website.

    #188357
    __
    Participant

    I am so frustrated with this that I am going to give up website design once I finish this website.

    No — give up this type of client. It’s completely absurd.

    I am now at the point were I have a need to load different navigation files into the body of the webpages depending on the size monitor it is being viewed on.

    What @shaneisme is trying to figure out is whether the menus are actually different, or if they could be the same menu with different styling.

    I don’t mean to be a downer, but with such unreasonable demands, this doesn’t exactly sound like a problem that is fixable. No matter what, this sort of design philosophy will not end well. Even if you solve this problem, what happens when your client realizes that some monitors are 1440px wide? What if they discover smartphones?

    At some point, you, as the web guy, need to be able to give your expert knowledge and explain what is practical and what is not. I know that this is probably not practical for your current project/client, but it is definitely something to keep in mind for future jobs.

    Best of luck.

    #188358
    lkeeney
    Participant

    The menus have to point to different URLs. As an example, one of the buttons for the original 1260 wide menu points to ……./index.shtml#p2 and the one for 1024 has to point to ……./index.shtml#p2-2.

    If this was just any client I would complain. However, this client is a relative of a friend of mine which makes it very difficult. I have to say this client is constantly giving me compliments because she said she has never seen another website that looks as nice as this one. Compliments do nothing for me, except make it more difficult for me to complain.

    I am a 78 years old photographer, and website design is just something I have done for fun. However with the website design changing so fast these days, I just don’t want to take the time to learn responsive design, etc.

    As it is, I have a photo shoot of 30 individual ballet students in the morning at a ballet studio I have been working with. This website design is no longer fun for me.

    #188359
    shaneisme
    Participant

    This website design is no longer fun for me.

    No, what you’re describing isn’t fun at all… That’s the kind that I simply don’t take, but I understand it being a relative that makes things difficult.

    What you’re describing is one of those things that people that don’t understand websites want – like @__ said, it’s something we need to teach people that don’t know any better.

    I get your predicament, not having fun with building a site makes learning new things hard… but I do commend you, I wish my grand parents tackled a website, that would be awesome! You’re certainly someone to look up to :)

    Unfortunately, to solve this, it’ll get pretty complicated… or you can just go the iframe route. It’s not pretty, but it might just solve all your problems. Have you looked into that? Otherwise you’re looking at breaking into the AJAX world, or something similar.

    #188361
    lkeeney
    Participant

    I tried for a couple of hours trying to get an iframe to work to load a particular html file based on monitor width, but just could not get it to work.

    I did searched on “iframe” and did a lot of reading, but nothing worked for me. I have tried so many things today, I can’t remember the details of what I tried that didn’t work.

    I am an Electronic Engineering Manager by trade. I started designing websites when the Internet was a “new” thing. Website design was always something just to keep me busy. I guess it is my engineering background that keeps me investigating things. However it is hard when it stops being fun.

    If you are interested this is my personal website:
    My website

    #188363
    shaneisme
    Participant

    Nice website :)

    As for iframes loading based on viewport width, that’s not gonna happen. This is where you’ll have to start breaking into media query design.

    You can keep it really simple though and only have one breakpoint. You can hide / show stuff dynamically and let the browser handle it for ya.

    http://codepen.io/drainpip/pen/YPzLPO

    This is a simplistic example, but maybe you can pick it apart.

    #188381
    lkeeney
    Participant

    Thank you again.

    I like this idea. I am off to a big photoshoot at a ballet studio, and then I will have hundreds of images to process and put up on the web for the parents to see.

    This will probably take me 3-4 days to finish, but after that I will try and make your suggestion work for me.

Viewing 11 posts - 1 through 11 (of 11 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.