6 Replies - 1283 Views - Last Post: 01 July 2015 - 07:52 PM

#1 Spork Schivago   User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 21
  • Joined: 27-January 15

Help keeping a few words hidden on resize in html / css

Posted 29 June 2015 - 05:24 PM

Hi. I'm new to web design. I hope this doesn't come off sounding too stupid. I'm in the process of writing a website. I know a little bit of PHP (mainly because I know some C). I kind of like having my website backwards compatible with older browsers. If what I want to do can't be done while preserving the older browsers backward compatibility, I guess I can deal with that.

I'm working on a navigation bar. When the screen is larger (840px or greater), it appears one way. When it's smaller (less than 840px) it appears a different way. When it's on a smaller screen (I'll refer to this mode as the small nav bar from now on), I have a mini menu that hangs off the screen. When the user clicks the small nav bar, the mini menu pops out. It appears to move the whole web page over. I like this affect I believe but I'm having trouble with it.

I start the mini menu links below where the main small nav bar would be. Where the main nav bar would be is where I want the words "Menu Links". Everything works fine when I try it except for one problem. When the screen is small and the small nav bar is showing, if I click it to bring out the mini menu, while the mini-menu is open, if I resize the screen to show the main nav bar again, the words "Menu Links" stay visible until I hit F5 to refresh the page. Can anyone tell me what I'm doing wrong and how to fix it?

You can view the page and the source at http://JetBBS.com/test2.html the css is http://JetBBS.com/css/style.css and the little bit of jQuery is at http://JetBBS.com/js/click.js

If you want me to post the code here, I can but it's pretty long. Any help is greatly appreciated. I just want it so when the screen is small, when the mini menu is open (click on the nav bar to open it), when the window is resized to show the bigger screened nav bar, the words "Menu Links" aren't visible. Thanks!

Is This A Good Question/Topic? 0
  • +

Replies To: Help keeping a few words hidden on resize in html / css

#2 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 15800
  • View blog
  • Posts: 63,301
  • Joined: 12-June 08

Re: Help keeping a few words hidden on resize in html / css

Posted 30 June 2015 - 07:11 AM

Quote

if I resize the screen to show the main nav bar again, the words "Menu Links" stay visible until I hit F5 to refresh the page.

Let's be honest - how often is that going to be a problem? Think about it this way - if someone is viewing your site in a mobile browser of a small size they won't be resizing anything to see the larger site.. and in the larger site (say on a desktop/laptop) are folks really going to be viewing the site on small and then big?

As it is - where ever you are keeping the responsive tick that moves the menu from large to small (or nice versa) you can have it call what ever you do to hide that link button to.. just to be sure.
Was This Post Helpful? 0
  • +
  • -

#3 andrewsw   User is offline

  • palpable absurdity
  • member icon

Reputation: 6905
  • View blog
  • Posts: 28,565
  • Joined: 12-December 12

Re: Help keeping a few words hidden on resize in html / css

Posted 30 June 2015 - 07:21 AM

As modi says, this shouldn't be a concern. However, I had a similar issue that a nav element wouldn't display as block on resizing, from small to large. I fixed it using !important:
@media screen and (min-width: 800px) {
    #menu {
        display: none;
    }
    nav {
        display: block !important;
    }

I avoid using !important but this is a hack that worked for me.
Was This Post Helpful? 0
  • +
  • -

#4 Spork Schivago   User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 21
  • Joined: 27-January 15

Re: Help keeping a few words hidden on resize in html / css

Posted 30 June 2015 - 01:21 PM

Thanks for the replies. Yeah, I agree it's probably not going to happen very often. I'm trying to learn this web design stuff though and to me, because the Menu Link reappears when I resize, I'm missing something, I don't fully understand how it works yet. It's more of a why does this happen and how can I fix it / What am I doing wrong type of question.

I just draw the button off screen. Everything's CSS until they click the main nav bar when it's in the smaller window mode. Then there's a little jQuery that changes the CSS's left property from the smaller menu to -180px or to 0px, depending on if it's been called before or not.

I've tried putting code in my HTML to have it hide the menu link button on resize but I couldn't get anything to work. I couldn't figure out what I was doing wrong. I tried in jQuery but I was thinking the problem wasn't so much jQuery as it was my not-so-complete understanding of CSS. I was thinking it might of had something to do with my "Menu Link" having a position of absolute instead of relative.

I'll try the not important stuff and see what happens. Thanks.
Was This Post Helpful? 0
  • +
  • -

#5 Spork Schivago   User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 21
  • Joined: 27-January 15

Re: Help keeping a few words hidden on resize in html / css

Posted 30 June 2015 - 03:45 PM

View Postandrewsw, on 30 June 2015 - 07:21 AM, said:

As modi says, this shouldn't be a concern. However, I had a similar issue that a nav element wouldn't display as block on resizing, from small to large. I fixed it using !important:
@media screen and (min-width: 800px) {
    #menu {
        display: none;
    }
    nav {
        display: block !important;
    }

I avoid using !important but this is a hack that worked for me.

Just wanted to update you, I tried your suggestion, modifying it to fit my code, it didn't seem to work. I've gotten further. I've gotten it where the words "Menu Links" stay over where they belong, but the main nav bar is pushed to the right. Even when I have stuff like left: 0; and position: absolute; set in the CSS file for the navigation bar. It just seems to ignore them on resize.
Was This Post Helpful? 0
  • +
  • -

#6 Spork Schivago   User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 21
  • Joined: 27-January 15

Re: Help keeping a few words hidden on resize in html / css

Posted 30 June 2015 - 08:39 PM

View Postmodi123_1, on 30 June 2015 - 07:11 AM, said:

Quote

if I resize the screen to show the main nav bar again, the words "Menu Links" stay visible until I hit F5 to refresh the page.

Let's be honest - how often is that going to be a problem? Think about it this way - if someone is viewing your site in a mobile browser of a small size they won't be resizing anything to see the larger site.. and in the larger site (say on a desktop/laptop) are folks really going to be viewing the site on small and then big?

As it is - where ever you are keeping the responsive tick that moves the menu from large to small (or nice versa) you can have it call what ever you do to hide that link button to.. just to be sure.

I appreciate the response. I don't really follow the solution you're giving me here. Could you possibly explain it a little different? The way I have it change the navigation bar from the normal one to the small one is just in CSS. I have a line like this in my css/style.css file:
@media screen and (max-width: 840px) {


And I override CSS styles that are set when the screen size is bigger than 840px in that area there. To display the vertical navigation bar (the mini-menu that pops up when the screen size is 840px or smaller and you click the horizontal navigation bar), I have some jQuery that changes the CSS's "section" class's left: property.

If I understand what you're saying, and I believe I do, you're saying the problem is caused by that "section" class's left property not being returned to it's "closed" value when the window is resized. I just don't understand how I can have the CSS stuff call the jQuery stuff. The jQuery code is located at http://www.JetBBS.com/js/click.js

I have tried various ways to detect window resize events using jQuery and at the end of the resize (not at the beginning or during (if it loops), change the "section" class's left: property but so far, none of the jQuery examples I found on how to capture the end of the window resize works. I suspect my jQuery might be installed incorrectly or something because only a very little of the code examples I find on the net seem to work.

Thank you for taking the time out of your schedule to answer my question and to help me. I really appreciate it. You're good people here over at dream.in.code. Thanks.
Was This Post Helpful? 0
  • +
  • -

#7 Spork Schivago   User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 21
  • Joined: 27-January 15

Re: Help keeping a few words hidden on resize in html / css

Posted 01 July 2015 - 07:52 PM

Just wanted to say I finally figured out how to fix it. Thanks for the help.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1