My Question is How would I change the text of a HTML <p> tag when I am on a mobile device like android or iphone?
Here is my current code p tag:
<p>You are on a desktop good</p>
This is the <p> tag I want to appear on Desktop, Tablet and Laptop.
How can I make it so that it says the following on mobile device like android or iphone in Straight Up Javascript no bootstrap just JavaScript?
<p>Please Use a Desktop to view</p>
Please Help
Thank You For All answers
gives a id or specific class to your <p> tag and include the JS after the dom loaded
<p id="changeMe">Services</p>
<script>
if (navigator.userAgent.match(/Mobile/)) {
document.getElementById('changeMe').innerHTML = 'Services Are everywhere';
}
</script>
Or use css Media Queries to show and hide Paragraphs
<p class="desktop"> Services</p>
<p class="mobile"> Services Are everywhere </p>
CSS:
p.mobile { display: none }
#media (max-width: 640px) {
p.mobile { display: block }
p.desktop { display: none }
}
You can use CSS media queries, and use elements to show or hide the element based on the screen width.
For example:
p.mobile {
display: none;
}
p.desktop {
display: auto;
}
#media screen and (max-width: 480px) {
p.mobile {
display: auto;
}
p.desktop {
display: none;
}
}
Using a desktop and mobile class on everything that should be on desktop or mobile (exclusive) is important, so that this style will work on all of those elements that you want to change.
Related
I'm currently on a MacBook with the display dimensions of 15.4-inch (2880 x 1800) here is a screenshot of how each section of my website looks for my homepage.
#app (section1)
#section2 (section2)
#section3 (section3)
----------
ISSUE ONE
How can I fix my h3 text to ensure it's responsive on a mobile device and it fits to be seen on a mobile device. Here is a screenshot below of how it looks as you can see it doesn't adjust and fit on the screen correctly. If you look at the JSFIDDLE link to my site at the bottom of the post you can see I have used <div class="col-lg-12"> to ensure it's responsive therefore, no idea why it's going this on mobile devices.
<h1 class="maintxt bounceInUp animated">Hi, welcome to my portfolio</h1>
<h2 class="maintxt bounceInUp animated">My name is Liam Docherty</h2>
<h3 class="cd-headline bounceInUp animated loading-bar">
<span>I'm a</span>
<span class="cd-words-wrapper">
<b class="is-visible">Front-End Web Developer</b>
<b>Graphic Designer</b>
</span>
</h3>
Here is a screenshot of a mobile device view of my website showing the issue.
JSFIDDLE
white-space: nowrap will prevent the text from wrapping on small screens. Remove that from .cd-words-wrapper b:
.cd-words-wrapper b {
display: inline-block;
position: absolute;
width: 100%;
text-align: center;
left: 0;
top: 0;
}
https://jsfiddle.net/wdafatrx/8/
You could also use vw and vmin units to keep them inside the screen.
.cd-words-wrapper b has white-space:nowrap set - this will cause all text inside it to stay on one line. Removing that is the fix to your responsiveness issue.
Use a media call in your css;
#media screen(max-width: 480px) {
<!--your div class name--> h3 : <!--new font size--> }
Is it possible to change a href sms to a href mailto if the device does not support sms i.e. the page is not being viewed on a phone (iPhone, Android, etc)?
I've managed to make a "Shout" button that uses sms to send the url of the page, but I'd like it to change to mailto when not being viewed on a phone i.e when the page is being viewed on a tablet, laptop, etc.
This is the code I've cobbled together:
<section id="shout">
<button class="button shout">Shout</button>
</section>
I'm using external CSS files to style the page and button. It seems to work on all the phones I've tried it on, so that's cool. I've looked into using #media but that doesn't seem to be the right way, and I've tried other methods without success. I've given it a pretty good go, but my skills aren't great, so any help would be appreciated.
Thanks :)
You would create both links and only show one based on a CSS #media query.
/* Default Style (mobile first!) */
.phone { display:inline; }
.desktop { display:none; }
/* Desktops */
#media screen and (min-width:1024px) {
.phone { display:none; }
.desktop { display:inline; }
}
<section id="shout">
<button class="button shout phone">
Shout from Phone
</button>
<button class="button shout desktop">
Shout from Desktop
</button>
</section>
I have a partial view (handlebars html template) that has a piece for html for desktop and one piece of mobile. I just hide it accordingly using different css classes.
<div class='hideOnMobile showOnDesktop'>
<a name='manuals' href='#'>Manuals</a>
<!-- Extra html for Desktop presentations -->
</div>
<div class='hideOnDesktop showOnMobile'>
<a name='manuals' href='#'>Manuals</a>
<!-- Extra html for Mobile presentations -->
</div>
The important pieces of my css is basically hiding and showing the elements using media queries:
#media only screen and (min-width: 420px) {
.showOnMobile { display: block; }
.hideOnMobile { display: none; }
}
#media only screen and (min-width: 1050px) {
.showOnDesktop { display: block; }
.hideOnDesktop { display: none; }
}
CSS is attached for reference. The css is actually working as expected. The problem is the following:
When the browser receives the url for that specific page http://example.org/page.html#manuals, I would like the document to navigate directly to the first visible <a> element. No matter what, I cannot make the deep link to work with the first visible element. I've read that there is some kind of limitations, but I wanted to know if there is a work around, or if the only option that I have is to emulate the deep link using javascript (that I'm trying to avoid). Thanks a lot
Maybe the markup can be altered?
<a name='manuals' id="manuals" href='#manuals'>Manuals</a>
<div class='hideOnMobile showOnDesktop'>
<!-- Extra html for Desktop presentations -->
</div>
<div class='hideOnDesktop showOnMobile'>
<!-- Extra html for Mobile presentations -->
</div>
This way, the target of the hash (#manuals) is always visible regardless of the environment. This also makes it a bit more maintainable since you have less duplication.
I have content in an iframe on my website that doesn't look good on small screens*. It overlaps the edge of the page. I don't want users to use the iframe content, and I want it to be changed to an image based error message (see below). I know about media queries, and I think they might have something to do with the solution. Maybe display: none? Or maybe JavaScript/jQuery show/hide functions? Here is my code so far...
<iframe id="content" width="485" height="402" frameborder="0" src="http://www.google.com/" allowtransparency="true"></iframe>
I would like the error message to be...
<img id="error" src="error.png" width="100%" alt="Error text goes here" title="Error Message">
<p>This content is not available on small screens like yours. Change to a bigger screen to see the content.</p>
By the way, I know that iframes are depreciated in HTML5, but they are the only way to display the content I need on my website.
*I define a 'small screen' as a browser size less than 725px in width.
Using media Queries:
.hide-small {
display: block
}
.show-small {
display: none
}
#media screen and (max-width: 725px) {
.hide-small {
display: none!important;
}
.show-small {
display: block!important
}
}
Using jquery
in html body
$(window).ready(function(){
if ($( window ).width() > 750) {
$('.hide-small').show();
$('.show-small').hide();
} else{
$('.hide-small').hide();
$('.show-small').show();
}
and the html:
<div class="hide-small"><iframe></div>
<div class="show-small">Text for small screen</div>
Personally media query looks better to me, but question has Javascript and jquery tags and its possible to do it with javascript.
EDIT: adjusted width restriction
Add this into header: <meta name="viewport" content="width=device-width">
Then this is the code:
#moblie {display: none;}
#media screen and (max-width : 725px ){
#moblie {display: inline-block;}
#iframe {display: none;}
}
<div id="iframe">
<iframe width="485" height="402" frameborder="0" src="http://www.google.com/" allowtransparency="true"></iframe>
</div>
<div id="moblie">
<p>This content is not available on small screens like yours. Change to a bigger screen to see the content.</p>
</div>
I would like to use two types of sliders.
First one : a simple gallery slider when viewing a page on a mobile device.
And a second one : a more complex slider when viewing the page on a computer.
What's the best way of doing this ?
You can use Media Query for this, Create 2 sliders differently
<div id="ComplexSlider" style="display: none;">
// All your code
</div>
<div id="Mobilelider" style="display: none;">
// All your code
</div>
#media (max-width: 320px){
#ComplexSlider{
display: none;
}
#MobileSlider{
display: block;
}
}
#media (min-width: 321px){
#ComplexSlider{
display: block;
}
#MobileSlider{
display: none;
}
}
Look at the doc : http://getbootstrap.com/css/#responsive-utilities-classes
You just have to specify which device you want to make visible or not in the class attribute.
.hidden-xs won't print on extra small device
.hidden-sm won't print on small device
.hidden-md won't print on medium device
.hidden-lg won't print on large device
<div id="ComplexSlider" class="hidden-xs ">
...
</div>
<div id="Mobilelider" class="hidden-sm hidden-md hidden-lg">
...
</div>