Wondering if someone can lend me a hand here:
<div class="caption red_box noshadow lfl stl" importance="high"
data-x="0"
data-y="225"
data-easing="easeOutExpo" data-start="2200" data-speed="400" data-eosing="easeInSine">
CHECK COVERAGE
</div>
This button when clicked/tapped on mobile doesn't work, you can test the live button by visiting this site: http://tech5.co.za/ and checking the sliders, none of the button work when viewing on mobile but are fine when using laptop/PC
I've tried setting priorities and setting "ontap" instead of onclick.
Any ideas from anyone? Highly appreciated
Related
When I test this page: https://affordablehousepaintingrenosparks.com/get-an-estimate/ on a mobile device (iPad Portrait or lower) my contact form does not allow me to enter any data into the final section (Tell us a little about your project...). I have checked the CSS to see if anything is overlapping and have looked at the code but can't find anything wrong with it.
Here is a screencast of the problem: https://www.loom.com/share/cacb1b51d7674d95ab08246ec1a81760
I would like to be able to enter text into this field. Any help would be appreciated.
Add a clear: both to the last <p class="col-md-12"> which wraps the submit button. Then it works! :)
<div class="MsgBody" style="width: 90%;align-self: center;margin: 3vh 0;flex-direction: column;display: flex;">
<div class="MsgRight" style="flex-direction: row;width: 50%;align-self: flex-end;justify-content: flex-end;display: flex;">
<div class="MsgSendContent" style="background-color: #9eea6a;border-radius: 5px;padding: 10px;word-break: break-word;flex-shrink: 0;display: flex;">
555 </div>
<div class="RightTriangle" style="margin-top: 8px;width: 0;height: 0;border-style: solid;border-width: 7.5px 0 7.5px 10px;border-color: transparent transparent transparent #9eea6a;flex-shrink: 0;margin-right: 8px;display: flex"></div>
<div class="HeadImg RightHeadImg" style="background-image: url(/img/testhead.jpg);height: 40px;width: 40px;border-radius: 5px;background-position: center;background-size: cover;background-repeat: no-repeat;flex-shrink: 0;display: flex;"></div>
</div>
</div>
In PC end, it runs well:
In the Chrome Toggle device toolbar, I tried all the device and all of them works well also.
Well, when I run the page in iPhone 6s with Chrome of IOS 13.1.2, it turns out to be this:
As you see, the message dialog does not render correctly and the input box in the bottom miss yet.
Then I tried the safari and the problem still here. What's more, I tried an android device which is android 9, the input box does not miss any more but the message dialog still does not render correctly.
The problem only occurs in the mobile device but not in the Chrome Toggle device toolbar. I can hardly know how to debug and solve it.
I should not only post a URL here but I don't know where is the problem.
Would you please help me to solve this and tell me why it doesn't render identical even I use Chrome in PC and Mobile.
Thank you.
This is happening because your page is not responsive
Integrate bootstrap ,so you don't have to write CSS files manually and use pre build classes with bootstrap grid to make responsive pages
There are several tutorials available for bootstrap I prefer you to go through them
My personal favourite is:
https://www.w3schools.com/bootstrap/default.asp
I've looked everywhere and can't seem to find the code. Hopefully one of you can help!
I have a YouTube-subscribe button on my site and it's has a trouble. In microsoft edge, IE and all browsers it looks like the first link below but only in Chrome I see button correctly. (the second link below)
Here's a code of my button:
<script src="https://apis.google.com/js/platform.js"></script>
<div class="g-ytsubscribe" data-channel="NAME" data-channelid="ID" data-layout="full" data-count="default"></div>
http://i.imgur.com/7OfkESu.png
http://i.imgur.com/fR1UWkN.png
p.s sorry for my bad english.
I've looked all over the place for an fix for this but I can't seem to find it!
I've made my own old browser alert using Twitter Bootstrap's alert class with a black overlay on the content under the alert, it looks great, but I want a hyperlink in the alert that takes the user off to http://browsehappy.com/ where they can then update their browser. But the hyperlink doesn't do anything in IE - it works in everything else (even IE7!) but in IE8 it just shows up blue and isn't clickable.
I've made a JSFiddle with conditional comments in it so you can see what I'm doing:
http://jsfiddle.net/X3tKs/2/
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div id="black" style="width:100%;height:100%;background-color:black;opacity:0.8;filter:alpha(opacity=80);position:absolute;top:52px;z-index:3000;"></div>
<div class="alert alert-danger">
Yikes! You're using an old browser! This page might not work the way it should. Time to update!
</div>
Any help will be MUCH appreciated!
UPDATE:
Turns out it was just my fault for using an online browser simulator! Thank you #joshhunt for your comment regarding this - I sent the link to my friend who has a windows computer and they confirmed it was working, it was actually Browserstack that wasn't working right. I tried taking everything out - bootstrap styling, black div (thanks #OJay) and it still didn't work, so I figured it couldn't have been my code. Time to invest in an old Windows laptop for testing! :)
HTML
<div class="alert alert-danger">
Yikes! You're using an old browser! This page might not work the way it should. Time to update!
</div>
jQuery
$("#update_link").click(function(){
var url = "http://browsehappy.com";
window.open(url, '_blank');
});
CSS
#update_link{
cursor:pointer;
}
If you have ever used a new release of either Chrome or Safari, you know that when you add a new tab, the default screen is a grid like setup with your most favorite links sitting there waiting to be clicked on. What makes it even nicer is the graphical interface, with actual pictures of the websites they are representing.
I am looking to do something similar, how is it done? Are they simply iframes? iframes set with css? If anyone has any knowledge about the actual implementation of this seemingly simple festure, please share!! Thanks
They're just cached thumbnail images, that the browser made last time it visited the page. They're not real browser pages you can interact with.
To do it from another web page, you'd have to have your server fetch the page, render it and thumbnail the image. Or use a third-party service that does it for you. Either way, you're not going to get the exact same image a user would see, as they may have auth or settings your server is not privy to.
In Chrome, I can choose View Source (Ctrl+U) or use the Web Inspector (Shift+Ctrl+I) to view the 'New Tab' page. Those thumbnails are indeed screenshots of browser windows (and dynamically added to the DOM using JavaScript, so you won't find them when viewing the source of the page), as the source of such a thumbnail looks like (copied from Web Inspector):
<a class="thumbnail-container" tabindex="1" id="t1" style="left: 235px; top: 0px; " href="http://www.ns.nl/">
<div class="edit-mode-border">
<div class="edit-bar">
<div class="pin" title="Keep on this page"></div>
<div class="spacer"></div>
<div class="remove" title="Don't show on this page"></div>
</div>
<span class="thumbnail-wrapper" style="background-image: url(chrome://thumb/http://www.ns.nl/); ">
<span class="thumbnail"></span>
</span>
</div>
<div class="title">
<div style="background-image: url(chrome://favicon/http://www.ns.nl/); " dir="ltr" title="Dienstverlening voor iedereen die met de trein reist. › NS voor reizigers › NS reizigers">Dienstverlening voor iedereen die met de trein reist. › NS voor reizigers › NS reizigers</div>
</div>
</a>
I guess Safari does more or less the same, but I can't check this at the moment.
As far as I can see in Chrome, it's not done with iframes. It seems as though Chrome uses screenshots from an earlier visit. At least I haven't experienced that the background changed after I saw it the first time. So my guess is that the initial page in chrome is "custom" as in not Html.
As for Safari I really have no clue.