I have a Facebook Like button implementation which is rendering fine in all browsers desktop and mobile. But the issues lies on low-res devices with resolution of 240x320. the Like button is causing the device to zoom into the page thus rendering horizontal scrolling.
The buttons is rendering fine on devices with width >= 320px like the iPhone etc., but older android devices with width less than that are facing issues.
The way I see it. The page loads fine, then makes a server call to Facebook and then returns with some parameter that breaks it all up. It is generating an <iframe>. I am trying to put width and overflow CSS parameters but none seem to work. I am initializing the Like button like this:
<div id="fb-root">
<!--Facebook begins-->
<div class="fb-like" data-href="<%=RedirectURL%>" data-send="false" data-layout="button_count" width="80" data-show-faces="false"></div>
<!-- ends -->
</div>
<script>
window.fbAsyncInit = function () {
FB.init({ appId: '328982000461228', status: true, cookie: true,
xfbml: true
});
FB.Event.subscribe('edge.create', function (response) {
ntptEventTag('ev=Social&Action=Method Shared');
});
};
</script>
<script type="text/javascript">
Put your like button into a div and apply the overflow hidden style on that div.
UDATE: Try also to set overflow hidden on the html and body tag (makes a big difference on fb page tabs).
A code snippet you also might find useful is this:
<meta name="viewport" content="width=320,user-scalable=false" />
<style type="text/css">
body {
-webkit-touch-callout: none;
-webkit-user-select: none;
-webkit-user-modify: none;
-webkit-highlight: none;
-webkit-user-select: none;
}
</style>
None of the above solutions helped. Finally got the answer. Although it is not the best solution, but it gets the job done.
I applied this to the parent container of the fb like button:
.socialIcons { display: inline-block; width: 200%; /* for low res androids */ overflow: hidden; margin: 5px 0 5px 10px; }
Facebook Like Button automatically generates an iframe on your page. Try set the width if the iframe with css or dynamically with javascript. The iframe has class="fb_ltr".
Detect a low resolution device, and use other like button layout which suits it better.
That one is :
data-layout="box_count" ,
it would take slightly more vertical space though, which is fine.
button_count
box_count
Did u check other regular sites on the same low-res browser? check twitter.com, if the scrollbar still appears its a problem in the browser (i ran into something like that), the definition of the browser full screen is always larger than the available width, i eventually had to define a "div" within the body with a specific width (320px) and dump the content inside of it, in addition to making the body overflow: hidden
On the outer container do this:
.fb-like-wrapper {
width:300px!important;
overflow-x:hidden!important;
margin: 5px 0 5px 10px;
display:block!important;
}
This was the easiest thing for me, works on iOS Safari if you use both:
html, body {overflow-x: hidden;}
Related
I am currently working on a WordPress website, where I would like to have two Google Translate widgets on the website. The scenarios, I wish to create, are as follows:
Desktop/Laptop/Tablet:
I would like the Google Translate Widget to appear in the very top bar.
Mobile Devices:
I would like the Google Translate Widget to be hidden from the Top Bar and displayed in the Footer.
What I have done to date ...
In the header.php, I have entered the following code, where appropriate:
<div id="google_translate">
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL, autoDisplay: false, gaTrack: true, gaId: 'UA-xxxxxxxx-x'}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</div>
CSS:
#media screen and (max-width: 991px) {
#google_translate {
visibility: hidden;
clear: both;
float: left;
margin: 10px auto 5px 20px;
width: 28%;
display: none;
}
}
The above PHP/CSS etc, successfully adds the Google Translate Widget to the Top Bar for large screens, while hiding the Widget on mobile devices.
Where the Problem occurs ...
I then paste the same Google Translate Widget code, into the footer.php file. Before I am able to work on the CSS, the Google Translate Widget does not appear within the Footer but right next to the Google Translate Widget in the header's top bar.
How can this be and how can I resolve this issue, so that I am able to work on the CSS as to hide the Widget on larger screens?
Here is a javascript solution you could try plugging into your page. You would need sort out ids for your header and footer but I think this could get you started.
<script type="text/javascript">
function placeTranslateWidget() {
var w = window.innerWidth;
// if the screen is small move the html element to the footer.
if(w < 991){ // 991 would be the width of the mobile break point.
document.getElementById('google_translate').appendChild( document. getElementById('footer') )
}else{
document.getElementById('google_translate').appendChild( document. getElementById('header') )
}
}
// run this function after page loads;
placeTranslateWidget();
// runs the function any time the body is resized.
document.getElementsByTagName("BODY")[0].onresize = function() {placeTranslateWidget()};
</script>
The problem is that your Google widget contains IDs in its markup, and IDs must be unique throughout the page. Duplicating the widget would also duplicate the ID. And failing to have unique IDs will cause JavaScript selectors to only work with the first ID.
As such, considering you simply want to move your widget on a mobile view, the best way to solve this would be with media queries. You'd need to share your whole markup for an absolute solution, but the general premise would be to simply move the widget to the bottom of the screen at a certain breakpoint, with something like:
#media screen and (max-width: 786px) {
.widget {
position: absolute;
bottom: 0;
}
}
<div class="widget">Widget</div>
<div class="container">
<p>Content</p>
</div>
By default, the widget would be above the content, but for mobile devices it will appear at the bottom of the page.
This is my website which I am working on.
As you can see there is a sidebar in desktop mode. But when you see it in mobile mode the sidebar goes down under the content which is showing on the left side.
Now what I want in mobile view is to make sidebar appear on top, and after that the content should appear. I've tried lots of things like position:absolute; and margin but it's not working for me.
Please suggest what would be the correct way to do this task.
jsFiddle of my code
This works for me
<script type="text/javascript">
var windowWidth = $(window).width();
//window.alert(windowWidth);
if(windowWidth<=767){
$('.wf-span-4').insertBefore('.wf-span-8');
}
</script>
You should probably provide a simplified version of your code, however, here's what I've got.
You have one of two options:
change the structure of the site so that the order is reversed in
the first place.
Use jquery to move the content below a certain
width ex: $('#sidebar').insertBefore('#content')
The correct way imo would be to put your markup in the right order to begin with. Markup is structure and should be independent of styling (as much as possible).
Then your code would look something like this
<section class="main">
<div class="sidebar">Bye</div>
<main class='content'>Hi</main>
</section>
And all you would have to do is remove the floats on mobile, so the content goes back into the default flow. Something like this:
.content {
width:75%;
float:left;
}
.sidebar {
width:25%;
float:right
}
#media screen and (max-width:767px) {
.content, .sidebar {
float: none;
}
}
(note that I updated your class names and markup, just so the code would be a bit better readable)
And here is your updated demo: http://jsfiddle.net/ehozb5v9/2/
I need help writing a conditional with javascript for 2 videos. I have searched around but I guess I am confused about how to set my variables. I have 1 video (flash iframe) that I'd like to show on a desktop browser's site but I would like a different video (non-flash) to show when viewing the site on a mobile device.
These are the two videos:
<html>
<div id="desktop_video">
<iframe src="url-here" height="650" width="600" frameborder="no" scrolling="no" marginwidth="0px" marginheight="0px"></iframe>
</div>
<div id="mobile_video">
<script type="text/javascript" src="http://url-here"></script>
</div>
</html>
Say, you're trying to show the desktop at a minimum browser width of 480px, this would be your CSS:
#mobile_video {
display: none;
}
#desktop_video {
display: block;
}
#media only screen and (max-width: 480px) {
#desktop_video { display: none; }
#mobile_video { display: block; }
}
Though the desktop should already be block, I added to code to be clear it's necessary. This is just a simple way to do this.
You could use the Navigator.useragent to detect client's browser. (There are a lot of resources out there if you search for it.)
I took the following line from javascriptkit which will check if the user is using a mobile device...
//returns true if user is using one of the following mobile browsers
var ismobile=navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i)
You can display the mobile video (non-flash) if ismobile returns true. Or else you can just display the iframe video.
Hope this helps you to get a start. As I mentioned, there are lots of resources out there to help you with this solution, even on SO...
How to detect a mobile device with javascript
I want to hide any scrollbars from my div elements and my whole body, but still let the user scroll with the mouse wheel or arrow keys. How can this be achieved with raw JavaScript or jQuery? Any ideas?
Like the previous answers, you would use overflow:hidden to disable the scrollbars on the body/div.
Then you'd bind the mousewheel event to a function that would change the scrollTop of the div to emulate scrolling.
For arrow keys, you would bind the keydown event to recognize an arrow key, and then change scrollTop and scrollLeft of the div as appropriate to emulate scrolling.
(Note: you use keydown instead of keypress since IE doesn't recognize keypress for arrow keys.)
Edit: I couldn't get FF/Chrome to recognize keydown on a div, but it works in IE8. Depending on what you needed this for, you can set a keydown listener on the document to scroll the div. (Check out the keyCode reference as an example.)
For example, scrolling with the mouse wheel (using jQuery and a mousewheel plugin):
<div id="example" style="width:300px;height:200px;overflow:hidden">
insert enough text to overflow div here
</div>
<script>
$("#example").bind("mousewheel",function(ev, delta) {
var scrollTop = $(this).scrollTop();
$(this).scrollTop(scrollTop-Math.round(delta));
});
</script>
(This is a quick mockup, you'd have to adjust the numbers since for me, this scrolls a bit slowly.)
keyCode reference
mousewheel plugin
keydown, keypress # quirksmode
Update 12/19/2012:
The updated location of the mousewheel plugin is at: https://github.com/brandonaaron/jquery-mousewheel
What about a purely CSS solution?
Solution 1 (cross browser but more hacky)
#div {
position: fixed;
right: -20px;
left: 20px;
background-color: black;
color: white;
height: 5em;
overflow-y: scroll;
overflow-x: hidden;
}
<html>
<body>
<div id="div">
Scrolling div with hidden scrollbars!<br/>
On overflow, this div will scroll with the mousewheel but scrollbars won't be visible.<br/>
Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>
</div>
</body>
</html>
Solution 2 (uses experimental features, may not support some browsers)
Just add the nobars class to any element you want to hide the scrollbars on.
.nobars {
/* Firefox: https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width */
scrollbar-width: none;
/* IE: https://msdn.microsoft.com/en-us/library/hh771902(v=vs.85).aspx */
-ms-overflow-style: none;
}
.nobars::-webkit-scrollbar {
/* Chrome/Edge/Opera/Safari: https://css-tricks.com/custom-scrollbars-in-webkit/ */
display: none;
}
Solution 3 (cross browser javascript)
Perfect Scrollbar doesn't require jQuery (although it can utilise jQuery if installed) and has a demo available here. The components can be styled with css such as in the following example:
.ps__rail-y {
display: none !important;
}
Here is a complete example including the implementation of Perfect Scrollbar:
<link rel="stylesheet" href="css/perfect-scrollbar.css">
<style>
#container {
position: relative; /* can be absolute or fixed if required */
height: 200px; /* any value will do */
overflow: auto;
}
.ps__rail-y {
display: none !important;
}
</style>
<script src='dist/perfect-scrollbar.min.js'></script>
<div id="container">
Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>
</div>
<script>
// on dom ready...
var container = document.getElementById("container");
var ps = new PerfectScrollbar(container);
//ps.update(container);
//ps.destroy(container);
</script>
You dont have to use jquery or js to make this. Its more performant with simple webkit.
Just add the code below to your css file.
::-webkit-scrollbar {
display: none;
}
Caution !
This will disable all the scrollbar so be sure to put it in a specific class or id if you just want one to be hidden.
I much prefer SamGoody's answer provided to a duplicate of this question. It leaves native scrolling effects intact, instead of trying to manually re-implement for a few particular input devices:
A better solution is to set the target div to overflow:scroll, and wrap it inside a second element that is 8px narrower, who's overflow:hidden.
See the original comment for a fleshed-out example. You may want to use JavaScript to determine the actual size of scrollbars rather than assuming they are always 8px wide as his example does.
To get this working for me, I used this CSS:
html { overflow-y: hidden; }
But I had problems using $(this).scrollTop(), so I bound to my #id, but adjusted the scrollTop of window. Also, my smooth scrolling mouse would fire lots of 1 or -1 deltas, so I multiplied that by 20.
$("#example").bind("mousewheel", function (ev, delta) {
var scrollTop = $(window).scrollTop();
$(window).scrollTop(scrollTop - Math.round(delta * 20));
});
As Baldráni said above
::-webkit-scrollbar { display: none; }
Or you can do
::-webkit-scrollbar{ width: 0px; }
(posted for other people that stumble on this from google search!)
Well, perhaps not the most intuitive in my opinion, but I can imagine you being able to make it a decent experience, give this a try.
overflow:hidden;
make sure the parent object has a height and width, and displays as block
How can I create a DIV block that always stays at the bottom of my page? When scrolling more content should show up right above the block. The only solution i can think of is to use 2 iframes but I prefer using CSS.
Update: The solution needs to work on iOS
Here's some CSS:
.bottomFixed {
position:fixed;
bottom: 0;
/* technically not necessary, but helps to see */
background-color: yellow;
padding: 10px;
}
Here's some HTML:
<div class="bottomFixed">Hello, world!</div>
This div would be placed at the bottom of the screen and stay there. Note: this won't work on iOS because of the way it does scrolling.
div.bottom {
position:fixed;
}
Then just move it where you want. Unfortunately, browser support is limited. IE6 for example doesn't support this option for position. Also note that this removes the div from the flow, so you'll have to make sure there's enough space for the viewer to see stuff at the bottom of the page with the div on top.