I have a page where it will query the list of all users, and displays it in a design based on Cards component. In case screen size is small, I want to list users with all attributes using a different design. I can have two <div>s; one for large screens and other for small screen and hide <div> using media query (CSS). The question is, will there be any performance disadvantage for this case? I mean, will server side codes inside the div for large screen gets executed when screen is small, even though it is not displayed?
For example, you are browsing this page in large screen.
<div class ="show-for-small-only">
//some for loop in php and other code (A)
</div>
<div class ="show-for-small-only">
//some for loop and other php code (B)
</div>
Will code section (A) be executed but not displayed? or it will never hit that section? Note that css class "show-for-small/large-only is a media css query to display:none based on screen size.
Use CSS media queries, it's way faster that JQuery.
#media screen and (min-width: 480px) {
.show-for-small-only {
display: none;
}
}
but you should adapt the design of your card depending on viewport size and/or screen orientation instead of loading it twice with 2 different styles like :
.title-section {
position:absolute;
top:2%;
left:0%;
}
#media screen and (min-width: 480px) {
.title-section {
left: auto;
right: 0%;
}
}
The answers that you have been given are both good, yet i'll recommend you to take a look at bootstrap (http://getbootstrap.com/), with it you can do what you want just by adding a css classes to your divs.
You can try using this http://mobiledetect.net/
<?php
// Include and instantiate the class.
require_once 'Mobile_Detect.php';
$detect = new Mobile_Detect; ?>
// Execute only if the device is mobile
<?php if ( $detect->isMobile() ) { ?>
<div class ="show-for-small-only">
//some for loop in php and other code (A)
</div>
<?php } ?>
<div class ="show-for-small-only">
//some for loop and other php code (B)
</div>
Or maybe append stuff from the larger display div to the smaller display div if the screen size is small using jquery and style accordingly.
Html
<div class ="show-for-small-only" id="mobile">
// append here if mobile
</div>
<div class ="show-for-small-only">
<div id="wrapper">
//some for loop and other php code (B)
</div>
</div>
Jquery
if($(document).width() <= 450){
$("#wrapper").appendTo("#mobile");
}
Related
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 want to remove a div element on mobile devices only (based on window size).
The element is an advertisement and by using CSS (display:none) is still registered on mobile devices even though the ad does not show (is just hidden), and this is making a fake impression.
My ads are inserted trough Wordpress theme options (where the ad code itself is added). And from the function I get the code in the page.
<div class="topad">
<div class="adh" id="adbox"><?php echo get_option('amn_topad'); ?></div>
</div>
I probably have the right code for this but it may be placed in the wrong place.
I have used in the header.php (where the div is located):
if ($(window).width() < 700) {
$('.topad').remove();
}
and
$(document).ready(function () {
if ($(window).width() < 700) {
$('.topad').remove();
}
});
I have also tried to make a custom.js with the same codes as before and add to functions.php
function my_scripts_method() {
wp_register_script('custom_script',
get_template_directory_uri() . '/js/custom.js',
array('jquery'),
'1.0' );
wp_enqueue_script('custom_script');
}
add_action('wp_enqueue_scripts', 'my_scripts_method');
I don't know if it's possible but a simpler and efficient way would be to prevent the div to appear by inserting an "if" directly in element
<div class="adh" id="adbox"><?php if() {echo get_option('amn_topad');} ?></div>
Removing the element completely is not the way that the industry is going - you might want to do that still, but please consider the counter-arguments:
The element won't be showing back if the screen gets resized up over the threshold
To remove the element after the user resizes down under the threshold, you must detect this behavior with JS, which complexifies the code
The element might be useful to other parts of your code
The way that is widely adopted in the industry to change display based on size width is to use media queries. Here's a quick demo to show/hide elements based on the screen size (over or under 700px) - resize your window to make it work!
#media (max-width: 700px) {
/* mobile CSS: hide .desktop div */
.desktop {
display: none
}
}
#media (min-width: 700px) {
/* desktop CSS: hide .mobile div */
.mobile {
display: none
}
}
<div class="mobile">
I appear only on mobile devices! (screen width less than 700)
</div>
<div class="desktop">
I appear only on desktop devices! (screen width over 700)
</div>
Objective: Change the properties of CSS Stylesheet instead of HTML CSS using Javascript.
Current Issue: using document.getElementById("foo").style.display = "none" causes changes in HTML document that removes Media Query functionality
My website has a button that changes the display of a sidenav bar on smaller screens. This button is not available on screen sizes greater than 768px. The website is dynamic, so the button shows up when the screen is small enough. When the button is clicked, the sidenav (initially set to display:none), is set to display:block, which can then be closed again.
Once the sidenav is closed in a screensize < 768px, and the screen is increased to a size > 768px, the media query no longer changes the display to block because the Javascript changes the HTML, which overwrites the CSS media query.
Below is the code and changes the Javascript does to the HTML.
HTML Before:
<div id="sidenav">foo</div>
<!-- button to change sidenav -->
<div id="menu-button" onclick="openCloseNav(this)"></div>
Javascript
function openCloseNav(x){
if(x.classList != "change"){
document.getElementById("sidenav").style.display = "none";
}
else{
document.getElementById("sidenav").style.display = "block";
}
}
CSS
#sidenav{
display:none;
}
#media only screen and (min-width: 768px){
#sidenav{
display:block
}
}
HTML After div id="menu-button" is clicked twice
<div id="sidenav" style="display:none">foo</div>
<!-- button to change sidenav -->
<div id="menu-button" onclick="openCloseNav(this)"></div>
I have tried a few different things such as attempting to detect screenwidth in Javascript like this:
var currentWidth = window.screen.availWidth;
function showSideNav(){
if (currentWidth >= "768"){
document.getElementById("sidenav").style.display = "block";
}
}
to no avail. If the snippet above does work, I don't know where to place it in my HTML.
Question:
What can I do to make it so that the sidenav will show even after the menu-button div is clicked on screen sizes > 768px?
Whenever possible, change styling via the addition/removal of CSS classes, rather than affecting the element.style object. This not only makes the code cleaner and reduces code duplication, but it eliminates the issue you are having with the CSS being added directly to the HTML element as an inline style, which is the most specific way to add CSS and difficult to override.
You can easily add/remove/toggle and more with CSS classes with the element.classList API.
Here's a simplified example:
document.querySelector("button").addEventListener("click", function(){
document.getElementById("element1").classList.add("hidden");
document.getElementById("element2").classList.remove("special");
// Just to show that classList modifications don't alter the inline HTML style
console.log(document.getElementById("element1"), document.getElementById("element2"));
});
.hidden { display:none; }
.special { background-color:#ff0; color:#800080; }
<div id="element1">Now you see me...</div>
<div id="element2" class="special">Something else</div>
<button>Click to change styles</button>
You could use an extra attribute that controls your navbar, so you can use you JavaScript independent of you CSS. I am not sure that the css I put here is correct but I think you get the idea.
EDIT I just noticed thanks to #Doug that you can just use a class instead.
function openCloseNav(x) {
if (x.classList != "change") {
document.getElementById("sidenav").setAttribute("hideme", true);
} else {
document.getElementById("sidenav").setAttribute("hideme", false);
}
}
#sidenav[hideme=true] {
display: none;
}
#media only screen and (min-width: 768px) {
#sidenav {
display: block
}
}
<div id="sidenav">foo</div>
<!-- button to change sidenav -->
<div id="menu-button" onclick="openCloseNav(this)"></div>
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;
}
}
I have a maddeningly simple task (and be patient with me, I'm new to all this): I have a div with a table inside, and the table contains one row and two cells, side-by-side. One cell contains header text, the next cell contains a paragraph of body text. It looks great on large screens, bad on small ones. So when the viewport width goes below 890px, I want to pile the two on top of each other by breaking the cells into two different rows.
First, just let me say that, yes, I have to use the table. I know using tables for layout is clunky, but it's necessary for vertically centering everything inside the div.
So my solution to this problem was to write some JQuery that would take the current contents of the table, fetched using the html() method, compare them to the "initial state" contents of the table (at larger viewport widths), and then replace the contents with a "final state" string that just has </tr><tr> inserted after the first cell's </td> tag.
The variable containing the initial state table contents is exactly the same as the table contents returned by the html() method but with \n\ at the end of each line except the last (the extra backslash to tell JS that it's a multiline string). I ran a strcmp on the strings in MATLAB to ensure I didn't make any stupid mistakes, came back true. And when I ask JS to print both strings to the console, they look identical. But when I ask JS if they're ==, I get a false.
So I made a second variable for the initial state with \r\n\ instead of \n\ because I read that some browsers do newlines differently. Checked if the current table contents were equal to either of them. Nope.
What's going on here?
Tables should not be used for page layout. There are tons of css tricks to align a div and the contents inside. and for the responsive design you can use bootstrap. See bootstrap or you can use media query to write your own responsive design. bootstrap code should look like this
<div class="row">
<div class="col-lg-6 col-sm-12">
//some code for part1
</div>
<div class="col-lg-6 col-sm-12">
//some code for part1
</div>
</div>
or write your own responsive CSS using media query..
HTML code is :
<div> <!-- header wrapper -->
<div class="menu1 col-1">
//some code
</div>
<div class="menu2 col-2">
//some code
</div>
</div>
CSS file will be:
.menu1,menu2 {
display: inline-block;
width: auto;
}
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
/* For desktop: */
#media only screen and (min-width: 768px) {
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
}
hope this will help you in design..