I have web app for making music from javascript. But I have problem with display: none of my .musicBox class.
Here are the index.html code with all important styles & scripts.
My index.html file on CodePen
#media screen and (max-width: 520px) {
.rotateDevice {
display: block;
}
.toneBox {
display: none;
}
}
When I resize the window to under 520px width it will 'display: none' my color Boxes. But why it didn't?
There is something missing above this media query.
Remove the .a above it.
try
.toneBox {
visibility: hidden;
}
Try out this may be it would help you:
Visibility: none;
Related
I have a fiddle which is working perfectly fine in desktop view. On desktop view, it is working in a way that on click of any product item (as shown in the screenshot below), the description box gets displayed at the bottom.
In mobile view I am seeing all the description boxes gets displayed at the bottom without being clicked at the top.
The snippets of CSS codes which I have used for the mobile view:
#media only screen and (max-width: 767px)
{
.product-all-contents
{
overflow-x: auto;
}
.product-contents .product{
min-width: 50.795%;
margin: 0 2%;
padding-top: 3.91%;
padding-left: 3.91%; padding-right: 3.91%;
}
}
Problem Statement:
At the moment. I am seeing all the the boxes getting display at the bottom even it is not clicked.
I have feeling that I am using display: inline-block !important which is overriding display:none from the html
#media only screen and (max-width: 767px)
{
div.goal-setting, div.customization-tools, div.custom-invoicing, div.lead-tracking, div.email-marketing, div.royalty-calculator, div.brand-control,
div.franchisehubtv, div.cloudbasedtextipad, div.business-analytics,div.tech-support, div.employee-management, div.order-management, div.white-label {
display: inline-block !important;
}
}
I am wondering what changes I should make in the CSS codes so that I can apply display: inline-block !important only to one product item instead of all items.
Just add this jquery for all the sections
$(window).resize(function(){
if ($(window).width() <= 767) {
$("#franchisehub").click(function(){
$(".franchisehubtv").css('display', 'inline-block');
});
//add this condition for all sections
}
});
And remove this css :
#media only screen and (max-width: 767px)
{
.goal-setting, .customization-tools, .custom-invoicing, .lead-tracking, .email-marketing, .royalty-calculator, .brand-control,
.franchisehubtv, .cloudbasedtextipad, .business-analytics, .tech-support, .employee-management, .order-management, .white-label {
display: inline-block !important;
}
}
You are setting all the boxes in the bottom to display:none except for the one thats active in your click handler. In that case you don't need the below css at all. I tried your fiddle and removed this css style and it works as you need in screen widths less than 767px as well
#media only screen and (max-width: 767px)
{
div.goal-setting, div.customization-tools, div.custom-invoicing, div.lead-tracking, div.email-marketing, div.royalty-calculator, div.brand-control,
div.franchisehubtv, div.cloudbasedtextipad, div.business-analytics,div.tech-support, div.employee-management, div.order-management, div.white-label {
display: inline-block !important;
}
}
When you use !important in your css (external or internal) it overrides the inline style. So though you are setting it to display:none inline using jQuery , the internal style with !important overrides the inline style.
You can add a class like 'active-category' to the div thats selected instead of setting the display:inline-block and a class 'default-category' to all the default ones instead of setting display:none every time. And then target the active-category class in your css and set the style
eg.
#media only screen and (max-width: 767px) {
div.active-category {
display: inline-block;
}
div.default-category {
display: none;
}
}
Just add jquery as below:
$("#franchisehub").click(function(){
$(".franchisehubtv").css('display', 'inline-block');
});
//add for all items
Try if it works.
Hope this is what you want.
GOAL: Eliminate redundancy in the initial DOM by implementing reusable JS (or ASP ?).
In this example I want to write some JS to 'bump' the contents of div # id loc-A to the div # id loc-B, without having to have the exact same code written in two places on the page.
I'm just not sure where to start...?
I have been able to accomplish this with CSS quite easily, but with redundant code. The more a div element contains, the longer the load.
Here is my codepen example:
See the Pen redundant_panda by rorschaff (#rorschaff) on CodePen.
<html>
<head>
<style>
#media screen and (min-width: 861px) {
div[id^="loc"] img {
width: 100%;
}
#loc-A {
display: initial;
}
#loc-B {
display: none;
}
}
#media screen and (max-width: 860px) {
div[id^="loc"] img {
width: 50%;
}
#loc-A {
display: none;
}
#loc-B {
position: relative;
top: 250px;
display: initial;
}
}
</style>
</head>
<body>
<div id="loc-A">
<img src="http://bit.ly/1TAzmvg"/>
</div>
<!----- Down the page somewhere ----->
<div id="loc-B">
<img src="http://bit.ly/1TAzmvg" />
</div>
</body>
</html>
I feel like there's something missing in this, but here's how I would address the code provided.
#media screen and (min-width: 861px) {
div[id^="loc"] img {
width: 100%;
}
}
#media screen and (max-width: 860px) {
div[id^="loc"] img {
width: 50%;
}
#loc-A {
position: relative;
top: 250px;
}
}
#loca-A {
display: initial;
}
And just get rid of the other div.
You could also address this via a responsive framework (bootstrap, foundation) or really, a number of different ways. I think the better approach would be to think about what problem you are solving and how you are solving it. If you find yourself using the same code repeatedly, then maybe your how needs to be revisited.
I have this code:
<h1 id="logo">
<a class="brand" href="/cgi-bin/koha/opac-main.pl">
CSU Library
</a>
</h1>
When my browser width is 701px and above, I don't want this to be seen (edit clarification: the element should be deleted from my html code); otherwise, the tag can be seen normally when my browser width is below 701px.
Is there any way I can do that? I don't know where to go from this code.
#media only screen and (min-width: 701px){
....??
}
This can be easily achieved in CSS if this is a responsive website you are building.
#media (min-width: 700px) {
#logo {
display: none;
}
}
For Modern browsers and IE9 and above you can use media queries like
#logo {
display: none;
}
#media (max-width: 701px) {
#logo {
display: block;
}
}
Try this as css
#logo { display : none; }
#media only screen and (min-width: 701px){
#logo { display : block; }
}
One method is to use media queries and another way is with jquery as :
$(document).ready(function(){
if($(window).width() > 701)
{
$("#logo").hide()
}
else
{
$("#logo").show()
}
});
OR
$( window ).resize(function() {
if($(window).width() > 701)
$("#logo").hide()
else
$("#logo").show()
});
According to the asker's comment... "but it leaves a blank space, and that's not what I want. I wanted it to be totally deleted from my html."
Yes, it is possible, but you'll need to use javascript. It is very simple with jQuery:
$("#logo").remove();
The basic question:
Is there a way to add an hyperlink to a text inside a table to users (below 768px, iPad, iPhone)?
Like:
<td>Lorem Ipsum</td>
But then, below 768px I want to add this:
<td>""Lorem Ipsum""</td>
Is that possible?
A simple way would be:
<td><span class="visible-pc">Lorem Ipsum</span>
<span class="visible-sm">""Lorem Ipsum""</span>
</td>
Where .visible-pc is display:none if the resolution is < 768px, and same with .visible-sm but if > 768px:
.visible-pc { display: block; }
.visible-sm { display: none; }
#media screen and (max-width: 768px) {
.visible-pc { display: none; }
.visible-sm { display: block; }
}
Another way would be to add the link in Javascript if you detect a clientWidth < 768px, but this is a bit more complicated (you have to play with the DOM, beh.)
If I understand what you are asking correctly, you want a link to only show up for users of tablets? There are many ways you could go about this. You could use javascript to determine the screen resolution or you could use CSS media queries.
I would recommend looking at responsive layout frameworks. Twitter's "Bootstrap" is an example of one, but there are many more to choose from! Bootstrap has CSS classes to only show content on tablets.
Is this what you are looking for?
<td><span class="d-text">Lorem Ipsum</span></td>
<td><span class="t-text">""Lorem Ipsum""</span></td>
css
.d-text {
display: block;
}
.t-text {
display: none;
}
#media only screen and (max-width: 768px), only screen and (max-device-width: 768px) {
.t-text {
display: block;
}
.d-text {
display: none;
}
}
I'm using Choosen and Twitter Bootstrap in my project. What I want to get is, to get choosen's dropdown over collapsible divs but it goes under other content. Here is jsfiddle
http://jsfiddle.net/tt13/CFbpt/5/
What am I missing? how to fix this problem?
This should take care of everything:
.collapse.in { overflow: visible; }
.chzn-drop { display: none; }
.chzn-container-active .chzn-drop { display: block; }
http://jsfiddle.net/Wexcode/7HLyZ/3/