How can I correct issues with responsive site when redirecting the browser window in DESKTOP?

Question

How can I correct issues with responsive site when redirecting the browser window in DESKTOP?

Navigation

#1 by (0 votes)

-1

I'm creating a responsive site, by redirecting the size of the window in DESKTOP some adjustments are being made and by RETURNING to normal size (maximize) the settings return. So far so good.

The problem is in the MENU and part of the site but I will show a simpler and easier to understand example below that error occurs in the site ok.

I have the following:

TITLE
CALL Content

In this case the title is in h1 the call in h2 and the content in h3 (this in case it is inside one that I will explain why soon).

When viewing in DESKTOP everything is required directly because we have room for it, but when it is displayed on a smaller screen (smartphone or tablet) the idea would be to 'hide' the div that is with h3 and only display if the user requests . So we then put a button to execute this.

TITLE
CALL
button to display content
Content

The PROBLEM is as follows:

If the size of the window decreases, the CONTENTS will disappear and as the content increases again, the CONTENT will appear. All correct though, if I decrease the size of the window, can I click the button to display the content reminds? This happens with a jQuery effect to give a SLIDE.

When you click the button the CONTENT appears and when you click the button again the CONTENT 'disappears' again with the perfect slide effect. now if I maximize the window the CONTENT simply does not appear ... it remains hidden (because it disappeared due to the SLIDE of jquery and not due to the display: none of the CSS so even though the CSS says it now has the display: block again it does not appear ...)

But I've seen many sites with this type of effect, for example in the MENU, I have a MENU at the top of the inline site but when redirecting it changes (to list and stays fixed to the right side). >

So far ok ... but in this process I apply the display: none too and it only appears if you click the 'menu button' as any site does.

If I click the MENU appears with slide and can be closed which will also be done by SLIDE from jquery but now if you increase the window where the inline MENU from the top? Even if it returns the display: block due to the specified CSS width as the MENU disappears with the SLIDE effect it does not appear anymore (only if I decrease the window, open the MENU and then maximize the window again now it returns to normal but this is I do not know.)

Any ideas how to make this personal?

I think the ideal would be NOT to use the SLIDE of jquery to make appear and disappear, but then how to do that?

Thank you very much.

HTML

<h1>Lorem Ipsum</h1>

<h2>O que é Lorem Ipsum?</h2>

<input class="btn" type="button" value="Mostrar/Esconder" onclick="conteudo();">

<div id="conteudo" class="conteudo">
<h3>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.</h3>
</div>

CSS to hide the CONTENT when resizing the window

.btn {display: none}
.conteudo {display: block}

@media screen and (max-width:640px){
.conteudo {display: none;}
.btn {display: block}
}

JS used to 'link' JQUERY and use the effect in question.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><linkrel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script><scriptsrc="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

JS used to show / hide the CONTENT when displaying 'mobile'.

<script>    
var slide = 'slide';
var optionsSlideUp = { direction: "up" };
function conteudo(){$('#conteudo').toggle(slide, optionsSlideUp, 500);}
</script>

If the SLIDE effect is not used everything works fine, the CONTENT is with display: none with a small window and returns to display: block when maximizing ... however if you use the SLIDE effect this occurs, even if it does not maximize it back.

javascript layout-responsivo

asked by anonymous 19.01.2017 / 18:17

1 answer

Arithmetic overflow error converting expression to data type int in count JAX-RS Rename the Set

score 0 · Answer 1

This happens because the $.toggle function applies an animation and at the end of this animation adds display: none; to style of the element it animated.

So what's happening is that after hiding content your div looks like this: <div id="conteudo" style="display: none;"> .

So it's not showing anymore. You can sort this in two different ways, by CSS or JS.

CSS (Advisable)

@media screen and (min-width:640px){
    .conteudo {
        display: block; !important
    }
}

This way when your div is in "big screen" will always be with display: block .

JS (Nope):

var $document = $(document),
    $conteudo = $("#conteudo");

$(window).on('resize', function(){
  if ($document.width() > 640) {
    $conteudo.show()
  }
});

OBS : I'm leaving this example only if the CSS solution does not solve your problem. But I'm warning you that this code is not optimized and if you use it, first look for throttle and debounce javascript events .