Selecting elements of individual pages of an app - javascript

I'm trying to remove two elements from the page of my web app (or the one I'm developing anyone). This is for responsiveness reasons, the elements look great on mobile devices but not very good on desktops. So, I'd like to target the pages by url, then get the elements and hide them.
I'm using node.js but I'm a bit of a noob. Is this something I could achieve with React or Vue or something like that. I tried with jQuery but with no success.
This is the html:
<body>
<div>
<section id="dot1">
<h6>Text Here</h6>
</section>
<section id="dot2">
<h6>Text Here</h6>
</section>
<section id="studiesWp"><img src="/images/ms.png">
<h1>Text Here</h1>
<p>Text Here</p><a href="url/">Text Here</p>
</section>
</div>
</body>
So, I want to hide the two elements: #dot1 & #dot2. The rest of it can stay.
Here's a little jQuery function I tried:
$(window).load(function() {
// Check media queries
if($(window).width() >= 769) {
// Get pathname of page
var page = window.location.pathname;
// If pathname matches any of these
if(page = 'profilePage','projectsPage','contact'){
// Remove two elements
$('#dot1').css('display','none');
$('#dot2').css('display','none');
}
else{
$('#dot1').css('display','block');
$('#dot2').css('display','block');
}
}
});

This is best to do with CSS3, which has media queries to apply styling only if the viewport it's being seen has certain properties.
Desktop-only css
So, if we want to create an element that's only visible on phones, and our css was desktop only, we'd probably create something like this:
/* This example will not work correctly, look below for the full code! */
.phone-only {
display: none;
}
Media Query
To make that style only apply to larger screens, we'll use a #media query. We need to apply styles to only smartphones, or devices with a screen width of less then 769px. In CSS, we write that as min-width: 769px, and then wrap it with a media query like this: #media (min-width: 769px).
When we wrap the style we made earlier inside of our #media query, we get a css rule that hides an element on phones.
#media (min-width: 769px) {
.phone-only {
display: none;
}
}
and use class="phone-only".

Related

change a button call load options in html

I have a nav bar that I want to call either one of 2 options when clicked according to screen size.
I have tried various options including media queries and javascript but I think my construction of the queries is letting me down.
I need to do this:
if screen size <960 then
<li>Page</li>
else
<li>Page</li>
end```
is there a way to do this?
thank you
As the other commenter said, you can use media queries for this. One very easy to understand solution would look like this:
Solution A: Media Queries
<html>
<style>
/* We are disabling linkA from being displayed and allowing linkB to be displayed normally */
#linkA {
display: none;
}
#linkB {
display: inherit;
}
/* if screen width <= 960px, we will display linkA and hide linkB */
#media screen and (max-width: 960px) {
#linkA {
display: inherit;
}
#linkB {
display: none;
}
}
</style>
<body>
<ul>
<!-- Notice the ID tags -->
<li id="linkA">Page</li>
<li id="linkB">Page</li>
</ul>
</body>
</html>
The media query redefines CSS attributes if the query matches. In your case if the screen width is less or equal 960px.
Solution B: Javascript
Another solution for your problem would be to call a javascript function when the link is clicked like this:
<span onclick="buildLink()">Page</span>
Note: I did replace a with span since if there is no href there is no reason to use a
In the javascript you could dynamically change num_months by dividing the width with by the amount of pixels you need to display a month:
function buildLink() {
const link = "page/index.php?lang=en&id_item=2&num_months=";
// casting to integer is very important, since we get decimal values otherwise
const num_months = parseInt(window.innerWidth / 480)
// window.location.href basically sets the address bar of the browser
window.location.href = link + num_months
}
I hope I have given you a clear answer on your question and some room to think about other possible solutions.
Also: You seem to be new to web development so welcome onboard and enjoy the bumpy ride :)

Check width of viewport on side load, then add class to body if less than X

I'm currently building a portfolio site and i want the sidebar to be hidden by default on mobile devices since its quite big atm, you can check it out here: www.dosh.dk/rofl/
The sidebar will hide if body has the class "sidebar-inactive" and therefore i want to do a single check on the viewport when the site is loaded and then add the class if below X
Im using coffeescript and ive made the following code but it doesnt seem to work, any ideas?
$ ->
$(".inner_content").hide()
$("#myskills").show()
$("#site").addClass 'loaded'
if $(window).width < 600
$("body").addClass 'sidebar-inactive'
How about a non-JavaScript solution using CSS media queries?
#media (max-width: 599px) {
.sidebar {
display: none;
}
}
This will hide elements with the sidebar class when the screen is less than 600px wide and will update as the browser is resized.
More: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Is there a proper way to make responsive text?

I've oftentimes had designers give me responsive designs where the wording of an element changes based on the size of the screen.
Desktop: Read more
Mobile: Read
Desktop: Download PDF
Mobile: Export
Desktop: Click here
Mobile: Tap here
What is the correct way to have different text in mobile and desktop versions of a website?
You could use media queries, pseudo classes and some ingenuity for this:
a[data-mobiletext] {
background-color: #FC0;
}
#media screen and (max-width: 700px) {
a[data-mobiletext] {
background-color: #CF0;
}
a[data-mobiletext] span {
display: none;
}
a[data-mobiletext]:after {
content: attr(data-mobiletext);
}
}
<span>Read more</span>
<span>Download PDF</span>
<span>Click here</span>
Click "Full Page" to view Desktop version.
There are a couple of approaches I've used where clients have made similar requests (and not been talked out of it*):
1) Use Javascript to change the text based on screen width / device detection methods;
2) Set the default text as your preferred choice, and wrap it in a span or similar, use the text that you think is best on all devices (best for SEO / content / screen readers depending on priority) then use pseudo selectors e.g. :before with the content: '' property to set alternative text based on media queries. Hiding the default span/element as appropriate.
(*) I would say consider your content and see if you can find a universal label for these items is probably better practice though.

Bootstrap - Dynamic height sizing on buttons and text fields, for each environment

I'm using Bootstrap 3 to create some HTML responsive forms, and there's one thing I'm trying to do, about layout.
I want to change dynamically the height of buttons and text fields by following these rules:
On desktop devices, use small buttons / text fields
On mobile devices, use large buttons / text fields
I know that I can do it by using these button and text field classes. But, I want to use these classes only if user is accessing the page from a mobile device, not always.
I know, too, that you can show/hide HTML elements by using these classes from Bootstrap Responsive Utilities, but I need to give an id to all buttons / text fields, so I don't know if I can duplicate these elements and wrap each of then inside a div that will be shown on a specific environment, since two elements with the same id is wrong by HTML specifications.
I tried an approach based on that solution, and I simply add/remove these classes based on each state/environment. It's working, but is there an easier approach to this?
To change specific element style by screen size you can use media queries. for example:
<button class="btn dynamic-button">
css:
#media (max-width: #screen-xs-max) {
.dynamic-button {
height: 20px;
}
}
#media (min-width: #screen-sm-min) and (max-width: #screen-sm-max) {
.dynamic-button {
height: 40px;
}
}

"Show full site" button to bypass css media queries

I'm using css media queries on my website to switch to a more vertical layout on smaller devices. This works quite well, but I'd like to add a button on the site with something like "Show desktop version". I want to make this button (or link, whatever) force or alter the media query evaluations so they evaluate as if the screen width was bigger than it is (e.g. 1200px instead of 320px). Is this possible?
My css looks like this:
#logo {
/* Mobile style */
[...]
#media (min-width: #screen-sm) {
/* Desktop style */
[...]
}
}
#footer {
/* Mobile style */
[...]
#media (min-width: #screen-sm) {
/* Desktop style */
[...]
}
}
/* And so on... i.e. multiple piecewise styles, following the same pattern used in Bootstrap's css */
I found this interesting approach which uses a css class on the body instead of media queries to switch between layouts. However, it completely does away with the actual media queries and uses javascript instead.
"Full web" mobile browsers and screen-size media queries based
edit
Refined the css example. The first 2 answers are very helpful, but I'd rather not have to completely modify the css organization to separate at the root desktop and mobile versions. One more interesting technique:
LESS: Can you group a CSS selector with a media query?
edit 2
An interesting approach is to modify the css media queries via javascript. It scares me a bit though because browser support might be unreliable for an such an obscure technique:
http://jonhiggins.co.uk/words/max-device-width/
There is a bit of redundancy with this method, but a selector has higher specificity its properties have precedence even if a media query matches. For example:
.container, .full-site.container {
/* full site styles */
}
#media (max-width: 395px) {
.container {
/* mobile styles */
}
}
When full site is clicked, add the .full-site class and the full site styles will apply even on devices with a 395 pixel width.
http://jsfiddle.net/7ZW9y/
Two possible implementations comes to mind: 1) segregate your media queries into a separate stylesheet, 2) prepend a specific class to all the selectors inside a media query.
Option 1: Separate stylesheets
Put all of the media queries you are seeking to remove (using the "Show desktop version" button) into a separate stylesheet (e.g., "mobile.css"):
<link rel="stylesheet" type="text/css" href="normal.css" />
<link rel="stylesheet" id="mobileStyle" type="text/css" href="mobile.css" />
You can then remove this element using jQuery (e.g., $('#mobileStyle').remove()). Removing the element referencing the stylesheet will remove all the styles defined in the stylesheet.
Option 2: Prepend a CSS class
Keep everything in a single stylesheet but prepend all media-queried selectors with a single class. For example, you could add a .mobile-ready class to the <body> and then:
#media (min-width: ... AND max-width: ...) {
.mobile-ready header{
}
.mobile-ready footer{
}
.mobile-ready ...{
}
}
With your "Show desktop version" button, remove the .mobile-ready class from your <body>, which will remove all the styles encompassed by the class. Writing CSS in this manner is easy with LESS or Sass.
Try this ... simple, but reasonable solution for sites that are heavily coded.
$('meta[name="viewport"]').prop('content', 'width=870');
Set the width to what you need. I used this in an instance where an existing site is in place and I need to allow mobile to display as normal page, but normal page is centered with content having a width of 865. This minimizes the impact of a full page on a mobile device.

Categories