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>
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--> }
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.
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.
I have 2 divs side by side inside a main div. Lets say- left_div & right_div. When browser is in full screen mode- than left_div is 60% and right_div is 40% in width(as, main_div is 100% width).
Now if i restore the browser window and reduce its width- than the divs get underneath each other but still remains the same percentage as 60% & 40% of the screen.
What i want is that if the browser width gets underneath a certain amount than the divs will get underneath each other and also fillup the whole screen width-ie become full browser width.
How can i do it? Do i need to do it with JavaScript or jQuery?
HTML:
<div class="mainDiv">
<div class="left">
test
</div>
<div class="right">
test2
</div>
</div>
CSS:
div.main
{
width:100%;
}
div.left
{
width:60%;
background-color:red;
float:left;
height:100px;
}
div.right
{
width:40%;
background-color:blue;
float:left;
height:100px;
}
#media (max-width: 350px) {
div.left, div.right
{
float:none;
width:100%;
}
}
check this once may be help you here is demo
HTML
<div class="left-div">Left</div>
<div class="right-div">Right</div>
CSS
.left-div{width:60%;height:100px;float:left;background-color:#000;color:#fff}
.right-div{width:40%;height:100px;float:right;background-color:#333;color:#fff}
#media (max-width: 479px) {
.left-div, .right-div{float:none;width:100%;}
}
Your problem has been many people's problem. While you can write your own CSS, but you should consider screens with different DPIs and different devices and different browsers. But Bootstrap allows you to easily manage these situations.
http://getbootstrap.com/
once you include bootstrap in your page, you can have two DIVs like this
http://jsfiddle.net/Gt25L/119/
<div class="col-md-4"></div>
<div class="col-md-8"></div>
Also look at the tutorials, and they guide you through how to make responsive websites using bootstrap. you will not need any JavaScript. Bootstrap is based on CSS only.
This way you have less CSS to maintain and less chance of wrong behaviour in different browsers & devices over time.
So I have this problem only when I see the page on mobile devices! I tried to find the spam links through the computer but I can't find them anywhere. I think it's in the K2 Plugins but I don't know on which one. I'll paste some of the code here I've found with the spam links:
<!-- Plugins: AfterDisplayTitle -->
<!-- K2 Plugins: K2AfterDisplayTitle -->
<div class="itemBody">
<!-- Plugins: BeforeDisplayContent -->
<div id="js-pc">
русский бизнес за границей<br>
записки туриста
</div>
<!-- K2 Plugins: K2BeforeDisplayContent -->
<!-- Plugins: AfterDisplayContent -->
<div id="js-pc">
обзоры музыкальных групп<br>
спортивный туризм
</div>
<!-- K2 Plugins: K2AfterDisplayContent -->
<div class="clr"></div>
<!--End Item Rating -->
</div>
So these are the Russian spam links I can't delete.
A solution is:
1. Start search in all files of your website by the next keyoword: base64_decode
2. You must find something like the next:
<?php $mgp='PGRpdiBpZD0iaXQtc24iPjxhIGhyZWY9Imh0dHA6Ly9qb29tbGEtbWFzdGVyLm9yZy8iIHRhcmdldD0iX2JsYW5rIiB0aXRsZT0i0LrQsNC6INGB0L7Qt9C00LDRgtGMINGB0LDQudGCINC90LAgSm9vbWxhIDMiPtC60LDQuiDRgdC+0LfQtNCw0YLRjCDRgdCw0LnRgiDQvdCwIEpvb21sYSAzPC9hPjwvZGl2Pg=='; echo base64_decode($mgp);?>
The next symptom is: this string stand right from the base code
Delete this string carefully and enjoy :)
Hope this information will help you.
Probably these links are being generated through a jquery/js code and by media queries as well, this is why the reason they only appear on mobile devices. Perhaps if you dig on these plugin's code you'd find where this is being generated assuming it's on these plugins. Somewhere on your plugin's CSS code, must be something like this example:
#js-pc {
display:none;
}
#media (max-width: 600px){
#js-pc {
display:block;
}
}
the code above make the links only visible on screens smaller than 600px width,
but you can overwrite this action through your main CSS file as well, forcing this links to not be displayed with display:none !important;. It will be something like this:
#media (max-width: 600px){
#js-pc {
display:none !important;
}
}
The media query above depends on which size they are appearing but if it's only on mobile devices I think this will fix the problem.
Here's an example of what your website is showing right now, and this is your fix