Make div disappear when reducing window width? - javascript

How do you make a div disappear when reducing window width, leaving it's complete space available to other elements? I do not mean hiding piece by piece on overflow, but the whole element.
I came across this brilliant feature on the following URL:
http://flexslider.woothemes.com
Is javascript required or can it be done with CSS? I noticed the page is pretty much HTML5.

You can do this with just CSS:
#media all and (max-width: 480px) {
.mydiv { display: none; }
}

Related

Moving a br element

hey i want to know is how do you move a br element in a paragraph when it is on a different screen size. I know that sounds like a confusing/tricky question but let me explain:
This br element in the p tag right here. Say where the br element is now it is diplaying that when this site is view on a desktop. But i want to the view the break line (the br element) placed right before the word "break" when i view it on an smaller device such as a tablet or a phone or something.
<p>I am a <br/> Paragraph with a break line in it.</p>
Is it possible? If it is, is there a way to do it with javascript or css without actually changing the html code it self?
You can do it this way.
<p>I am a <br class="sm-hide lg-show"/> Paragraph with a <br class="sm-show lg-hide"/>break line in it.</p>
.sm-hide {
display: none;
}
.sm-show {
display: block;
}
#media screen and (min-width: 961px) {
.lg-hide {
display: none;
}
.lg-show {
display: block;
}
}
<br/> tag is forcing HTML to have a line break, regardless of you browser or device. Here <br/> is not the proper way. If you really want, say, have a line break at different places according to your device (screen size), you could use CSS #media rules, such as
#media screen and (max-width: 480px) { /* your css code */ }
So that the above css rule only applies to screen whose width is smaller than 480px.
On the other hand, there are some very popular library/framework for you to design web both for desktop and/or mobile, such as Bootstrap.

remove third-level navigation wordpress

We're using a theme that has responsive navigation... but it's pretty bad on the third-level. I'd like to remove that level completely on devices less that 768px wide.
Does anyone have an idea of how to do this? All of the navigation elements seem to be converting to <option>... is there a way to tell it to only do this to top- and second-level navigation?
http://www.torontofamilytherapist.com/
Thank ya!
#media screen and (max-width: 767px) {
.sub-menu .sub-menu {
display: none
}
}
Should do it. You could also add that selector and declaration to a similar media query if you have one already.

Issue with div display, css #media vs javascript

For my first responsive design I use css #media with display: none; or display:table-cell to show or hide sidebars. This works fine, I need the display:table-cell for a three divs layout.
CSS example:
#div_right { display: table-cell; }
#media screen and (max-width: 700px) { #div_right {display: none; } }
JS is standard ToogleDisplay function (with e.style.display = "table-cell"; in place of e.style.display = "block"; )
On small windows/screen the sidebars are hidden, but a new div with 2 options to display these 2 same navigation sidebars appears: clicking on a link with embedded javascript, allows to toogle display of a sidebar div. It also works fine.
The problem comes when I show then hide the sidebars by clicking on the JS links (on small windows), and then resize the window to a larger width: the sidebars are not displayed this time!
Is there a #media condition to specify "on larger width than xxx" do force display:table-cell; ?
I don't want to use jQuery, and a solution with CSS would be nice.
Just use min-width instead of max-width:
#div_right { display: table-cell; }
#media screen and (min-width: xxx) { #div_right {display: none; } }
Very simple, tells the browser that these rules are to be used if the browser is larger then xxx.
If you want to know everything about #media queries, check out the Mozilla Docs On It.
Could be very helpful to you.
To see it in action, see this JSFiddle
[EDIT]
As noted in the other answer, if you are using jquery, it will override the #media rule.
The correct way to do this, not using !important is to use jquery:
In your js:
$(".menu").show().css("display","block");
This JS shows it as display:block;
Are you using jquery to $.('el').css("display","none") or .hide() the elements? If so jquery will add the style as an inline-style - hence overwriting your media query.
You can try to add !important to your CSS code (the media query) and it might work.
See: http://www.iandevlin.com/blog/2013/05/css/using-important-in-your-media-queries
Also please note the follow rule of thumb:
CSS style is applied in the following hierachy/priority:
!important is always highest priority
The closer styles to your elements will override styles defined before:
inline styles are higher priority
CSS styles are lowest priority
Please check: developer.tizen.org/dev-guide/2.2.1/org.tizen.web.appprogramming/html/guide/w3c_guide/dom_guide/html_priorities_css.htm
Also you might want to use not only min-width, but rather a range like:
#media screen (min-width: xxx) and (max-width: yyy){ }
Check out some standard templates from: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Section overlays on another

Dear Stackoverflow community,
I'm very desperated about following setup:
- I have a Website with a Jquery onepagescroll design.
- If the width of the browsers window is below a certain point (769px) the onepagescroll disapears
- Instead a Gumby based design gets activated
But when happening so
... the third of the three sections overlays over the second one a
... after the first section is a gap
I researchead about four hours on this problem and couldn't solve it.
I hope you can help me.
Yours Sinceryl,
yooui
Code:
index.html (http://pastebin.com/6fMtkBbm)
jquery.onepage-scroll.js (http://pastebin.com/FnQWWe7J)
To fix the spacing and overlap, take a look at your CSS. The three "section" elements each have a height of 100%, you'll have to change that in your responsive styles.
So try adding something like this:
#media only screen and (max-width: 768px) {
.onepage-wrapper .section {
height: auto;
}
}

JQuery Mobile: modifying <a> button data-inline="true" using CSS #media query

I'd like for my buttons to only be inline in certain browser widths.
Can this be done with CSS?
Failing that, can this be done with Javascript (fire a function when screen layout changes)?
Yes. You can use CSS resposive design techniques with attribute selectors to affect these elements.
#media only screen and (min-width : 320px) {
a[data-inline=true] {
display:inline;
}
}
Simply using display: inline-block actually works for me right now.

Categories

Resources