I have some transitions on my web site, and everything is fine on desktop view. But when I try to see my website on cellphone the transitions are really slow, and take a lot of time to load the content.How can I hide (or something like that) the javascript links that calls the transitions?, or maybe hide the classes which calls the javascripts...the classes are like:
-top, -opacity
etc...this classes belong to this plugin
http://www.cwdesigns.de/jquery-scrollflow-plugin.html
please help me!!, cheers.
Use Media Query
Write those classes with transitions in a media query interval for a range of large screens,
#media screen and (min-width: 768px) {
.top {
}
.opacity {
}
}
Related
I have a react sidebar with pure css for expand/collapse animations that I really like. Except for that by default, every time I open my page / jsfiddle in this case, the sidebar will always be closed by default.
https://jsfiddle.net/martinradio/x1dz80a6/2/
I've collected all the #media queries in my css file, and have changed it so when the window is big, the sidebar turns yellow. if the window becomes small, the sidebar gets colored red.
My sidebar expand/collapse logic is pure css, I want my sidebar to collapse if the window is too small (sidebar color = red), can I add a .sidebar value to collapse the sidebar?
/* ----------------------
#media queries
---------------------- */
/* if screen is big: show sidebar */
#media (min-width: 30em) {
.sidebar {
background:yellow;
color:yellow;
}
}
/* if screen is too small: hide sidebar */
#media (max-width: 31em) {
.sidebar {
background:red;
color:red;
}
/* add something here to toggle sidebar as higgen */
}
is there a way, that by adding css, I can have my sidebar start expanded if the user is viewing the page on say a desktop monitor dimensions? But keep the sidebar hidden for smaller browser windows such as mobile
You want the :checked value of your input to determine the current expanded state of you sidebar.
At the same time, you want the size of the viewport to determine the same state.
This means you have to find a way to allow the size of the viewport to set the :checked value of the checkbox.
The bad news is you can't change or set the value of a checkbox using CSS alone.
The good news is it can be done using JavaScript. And you can link it to a media query.
Here's how to do it in React:
// define media query:
const mediaQuery = window.matchMedia("(min-width: 42rem)");
// track query state (if it applies or not)
const [query, setQuery] = React.useState(mediaQuery);
// keep query state updated (+ cleanup)
React.useEffect(() => {
mediaQuery.addListener(setQuery);
return () => mediaQuery.removeListener(setQuery);
}, [mediaQuery]);
// track sidebar expanded state
const [expanded, setExpanded] = React.useState(query.matches);
// update checkbox value when the query state changes
React.useEffect(() => {
setExpanded(query.matches);
}, [query]);
// everything else stays the same
// (except binding the expanded state to the checkbox)
See it working: https://jsfiddle.net/websiter/td9rgcpq/
You can use CSS Media Queries to determine what action to do based on the screen size. Here, you would want to change the behavior of the sidebar based on the screen size.
#media (max-width: 600px) {
*This is for phones, for example (you might need to find more accurate pixel counts)*
}
#media (min-width: 601px) {
*This is for laptops, for example (you might need to find more accurate pixel counts)*
}
When I worked on my answer, I realized that the requirements were not clear to me.
What do you want to have on a big screen? I can think of two different options.
The sidebar is not shown when you open the page. Instead, it appears with animation when you press the toggle button.
The sidebar is visible when you open the page and disappears when you press a toggle button. Should it appear with animation on page load?
And in both cases, you do not want the sidebar on the small screen.
I still do not understand the following requirement.
I can have my sidebar start expanded if the user is viewing the page on say a desktop monitor dimensions?
When a user opens the page on the big screen, what should it look like? What is the initial state of the sidebar on the big screen? Do you want the sidebar to open with animation on page load?
Anyway, please find my suggestion below.
Main idea
The sidebar becomes visible when they check the #sidebar-checkbox checkbox. I suggest limiting this behaviour to only large enough screens. In other words, we bind the checkbox state with the sidebar visibility only for big screens.
On small screens sidebar is always hidden because we place the rules under the media query for the big screens.
1. Initially hidden but appears when toggled
The code speaks for itself.
#media (min-width: 30em) {
#sidebar-checkbox:checked + .sidebar {
z-index: 10;
visibility: visible;
}
#sidebar-checkbox:checked ~ .sidebar, #sidebar-checkbox:checked ~ .wrap, #sidebar-checkbox:checked ~ .sidebar-toggle {
-webkit-transform: translateX(0rem);
-ms-transform: translateX(0rem);
transform: translateX(0rem);
}
#sidebar-checkbox:checked ~ .wrap {
-webkit-transform: translateX(14rem);
-ms-transform: translateX(14rem);
transform: translateX(14rem);
}
}
I think we also should show the label for the checkbox only on big screens. But I do not want to mess with your styles too much and try to make the minimal working change.
2. Initially shown on the big screen
We must replace the :checked selector with the :not(:checked) selector. In this case, the sidebar is visible by default on the big screen.
We can also show animation for the sidebar sliding from left to right on the page load. You might find some explanation in the answer to the question 'css3 transition animation on load?'.
Please check the updated JSFiddle with the suggestions for the second case.
Please let me know if I have got your requirements right.
How to display specific elements on a page at a specific screen resolution. A kind of mobile version for the site, something like media queries, only which will display a certain block of js (react) / html (jsx) code at a certain resolution
You can take a look at the answer on this similar question
If you're using JSX the usage should be wrapped into {} for example:
render() {
return (
// ...
// In my knowledge JS event listeners are more taxing on the performance
{
if($(window).width() >= 1024){
return <div className="bigger-than-1024"> RENDERED CONDITIONALLY </div>
}
}
);
}
The better way to do this might be to still render it and then use CSS classes and media queries to not display it:
#media only screen and (min-width: 1023px) {
.bigger-than-1024 {
display: none;
}
}
I have a web page and that page can be viewed both on mobile and desktop. However i have two different css classes like below:
<div class=phone-visible>
<h1> .....</h1>
</div>
and
<div class=phone-hidden>
<h1> .....</h1>
</div>
so basically when i open the page on mobile see some content/styles which i write specifically for mobile.
But for SEO purpose, when the page loads i dont want to see the duplicate header tags when i open on a specific device, like i dont want to see the mobile tag when i open my page on desktop.( basically in view source i dont want this to be displayed) I tried doing in CSS( referring to solution in other posts) but that didnt resolve my issue as those still show up on source.
Any particular approach?
You only need one instance of the H1 tag.
<div class="myclass">
<h1> .....</h1>
</div>
Then use your responsive CSS to style according to the viewport size. That's what responsive is all about! All you would need is to edit the smaller view port size.
So, improving on Yubraj's answer, leave your largest screen size CSS in the main section of your CSS and then add your mobile css here:
#media (min-width:750px) {
.myclass h1 {
font-size: 18px;
font-color: #000000;
}
}
Use CSS Media queries to control the UI in different Screen size
below example might help you.
#media (min-width:750px) {
.bigScreen {
display:block !important;
}
}
//tabs and bigger screen
#media (max-width: 600px) {
.smallScreen {
display:block !important;
}
.bigScreen {
display:none !important;
}
}
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.
I'll try my best to set up my scenario so that you can understand my question.
My site is currently taking advantage of css media queries to span between screen resolutions. I have a main drilldown menu that can not be hidden on page load, otherwise the menu will not correctly calculate it's height, and will not display properly.
As a way to still be able to hide this menu when needed, I have found a workaround that hides the menu, yet still allows the menu to correctly calculate it's height on page load.
$(document).ready(function () {
$(".hide-menu").hide();
var $drillDown = $("#drilldown");
});
This is great for pages that do not require the main menu to be displayed initially on both mobile and desktop resolutions. However, for my product pages this solution will not work. I need the menu to hide on load for mobile resolutions, but also display on load for desktop resolutions. Can anyone think of a solution that will work? I'm stumped. Here is the HTML:
<div class="drill-down-wrapper hide-menu hide-on-load hide-pd-page">
<div id="drilldown-breadcrumbs" class="breadcrumbs skin-colorful"></div>
<div id="drilldown" class="skin-colorful">
<!-- #Include virtual="Menu.txt" -->
</div>
</div>
Use media queries to hide and show the menus based on screen resolutions.
Rather than jQuery, try using CSS to show/hide elements. You can use the display rule to do so. Just as an example:
.hide-menu-on-load {
display: none;
}
#media screen and (max-width: 680px) {
.hide-menu-on-load {
display: block;
}
}
Note: display: none removed the element from the flow of the page. visibility: hidden keeps the element's flow on the page, yet simply removes it from view