How can I have 2 Google Translate widgets on my website? - javascript

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.

Related

Eliminate duplicate header tags <h1> on a web page for desktop and mobile

I have a web page and that page can be viewed both on mobile and desktop. However i have two different css classes like below:
<div class=phone-visible>
<h1> .....</h1>
</div>
and
<div class=phone-hidden>
<h1> .....</h1>
</div>
so basically when i open the page on mobile see some content/styles which i write specifically for mobile.
But for SEO purpose, when the page loads i dont want to see the duplicate header tags when i open on a specific device, like i dont want to see the mobile tag when i open my page on desktop.( basically in view source i dont want this to be displayed) I tried doing in CSS( referring to solution in other posts) but that didnt resolve my issue as those still show up on source.
Any particular approach?
You only need one instance of the H1 tag.
<div class="myclass">
<h1> .....</h1>
</div>
Then use your responsive CSS to style according to the viewport size. That's what responsive is all about! All you would need is to edit the smaller view port size.
So, improving on Yubraj's answer, leave your largest screen size CSS in the main section of your CSS and then add your mobile css here:
#media (min-width:750px) {
.myclass h1 {
font-size: 18px;
font-color: #000000;
}
}
Use CSS Media queries to control the UI in different Screen size
below example might help you.
#media (min-width:750px) {
.bigScreen {
display:block !important;
}
}
//tabs and bigger screen
#media (max-width: 600px) {
.smallScreen {
display:block !important;
}
.bigScreen {
display:none !important;
}
}

Force a java script to fit within an element

I'm not a programmer, but I need to find out if there's a way to force a java script to fit completely within an element in my page, without showing a horizontal scroll bar. Sorry if I use the wrong terminology.
Below is a given code that I get from a third party, which I place on my page, to get a display gallery of items. The problem is that it too wide.
Is there a code I can add, to force the script to completely fit inside the screen (600px wide), so the horizontal scroll bar disappears automatically?
Below is the script:
'<noscript>
<p>powered by example.com</p>
</noscript>
<script id="scriptId_718x940_60872" type="text/javascript" src="//example.com/?scriptId=60872&bid=1301660001&format=718x940&bannerType=3">
</script>
I should add that this is a specific html element within my page, and that I'm trying to apply this code only to this element, not to the whole page or the whole site.
Thank you so much for your help!
600 what? I'm going to assume pixels. Add this to your CSS:
body {
max-width: 600px !important;
}
Added !important in edit
Add this to your html. It isn't very pretty but it should narrow the iframe that is displaying the coupons.
<style type="text/css">
div#ci_gallery {
width: 600px;
overflow: scroll;
}
</style>

How to Change div Position in responsive

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/

jquery .hide() function - Hide mobile, Display Desktop

I'll try my best to set up my scenario so that you can understand my question.
My site is currently taking advantage of css media queries to span between screen resolutions. I have a main drilldown menu that can not be hidden on page load, otherwise the menu will not correctly calculate it's height, and will not display properly.
As a way to still be able to hide this menu when needed, I have found a workaround that hides the menu, yet still allows the menu to correctly calculate it's height on page load.
$(document).ready(function () {
$(".hide-menu").hide();
var $drillDown = $("#drilldown");
});
This is great for pages that do not require the main menu to be displayed initially on both mobile and desktop resolutions. However, for my product pages this solution will not work. I need the menu to hide on load for mobile resolutions, but also display on load for desktop resolutions. Can anyone think of a solution that will work? I'm stumped. Here is the HTML:
<div class="drill-down-wrapper hide-menu hide-on-load hide-pd-page">
<div id="drilldown-breadcrumbs" class="breadcrumbs skin-colorful"></div>
<div id="drilldown" class="skin-colorful">
<!-- #Include virtual="Menu.txt" -->
</div>
</div>
Use media queries to hide and show the menus based on screen resolutions.
Rather than jQuery, try using CSS to show/hide elements. You can use the display rule to do so. Just as an example:
.hide-menu-on-load {
display: none;
}
#media screen and (max-width: 680px) {
.hide-menu-on-load {
display: block;
}
}
Note: display: none removed the element from the flow of the page. visibility: hidden keeps the element's flow on the page, yet simply removes it from view

Facebook Like button causing horizontal scrolling on mobile device

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;}

Categories

Resources