Is there a way how can I display top banner (marked red) always visible and never display bottom translate option?
Or opposite way. Show only bottom options with possibility to reset language choice.
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement(
{
pageLanguage: 'en',
includedLanguages: 'ar',
layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL
}, 'google_translate_element');
}
</script>
Thank you.
Related
When using Vue2Leaflet and the "l-map" component, is there a way to move the zoom-in/zoom-out buttons to another place than upper-left corner?
https://vue-leaflet.github.io/Vue2Leaflet/#/components/l-map/?id=props
https://i.stack.imgur.com/ITRFr.png
You need disable the default zoom controls first. Then add LControlZoom component with your preferred position. like-
<l-control-zoom position="bottomleft"></l-control-zoom>
HTML:
<template>
<l-map style="height: 350px" :zoom="zoom" :center="center" :options="{zoomControl: false}">
<l-tile-layer :url="url"></l-tile-layer>
<l-control-zoom position="bottomleft"></l-control-zoom>
</l-map>
in javaScript
<script>
import {LMap, LTileLayer, LControlZoom} from 'vue2-leaflet';
export default {
components: {
LMap,
LTileLayer,
LControlZoom
},
data () {
return {
url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
zoom: 8,
center: [47.313220, -1.319482],
};
}
}
</script>
Hope this helps. Read here vue2-leaflet documentation : https://vue2-leaflet.netlify.com/components/LControlZoom.html
I am trying to include a caption on the actual webpage under the image while using the magnificence popup gallery. Using a div and class caption or carousel-caption, I am unable to do so without the images in the gallery stacking vertically one by one. How can I do this?
<a href="img/base/ggg.PNG" title="HELLO" class="chicken">
<img src="img/base/pop.PNG" alt="remember your alt tag" />
</a>
$(document).ready(function() {
$('.chicken').magnificPopup({
type: 'image',
gallery:{enabled:true}
// other options here
// end each line (except the last) with a comma
});
});
js fiddle: https://jsfiddle.net/sb4btox7/
Since I don't yet have enough reputation points to comment, I'm commenting here, in addition to providing a solution.
Comment: JSFiddle isn't working with your http:// images because JSFiddle is trying to serve them from https://
Solution:
You are halfway there. There are 2 parts to making the captions work.
You correctly have put the link in the anchor tag and not the
image tag
You must specify your title source in your
initialization script like this.
$(document).ready(function() {
$('.chicken').magnificPopup({
type: 'image',
gallery:{enabled:true},
type: 'image',
image: {
titleSrc: 'title'
// this tells the script which attribute has your caption
}
});
});
The script then automatically writes your caption to its div labeled class="mfp-title"
BONUS Solution: I needed my lightbox image to open in a new window for users on their phones to zoom in, so I added this after the first titleSrc declaration:
titleSrc: 'title',
titleSrc: function(item) {
return '' + item.el.attr('title') + '';
}
This information is in the documentation: http://dimsemenov.com/plugins/magnific-popup/documentation.html in the "Image Type" section
I tried to use the selected answer, but even using the documentation, the examples wouldn't work for me. What I ended up using was:
$('.elements').magnificPopup({
type: 'image',
gallery: {
enabled: true
},
image: {
titleSrc: function(item) {
return item.el.find('img').attr('title');
}
}
});
This probably has something to do with the version I was using, but it wasn't clear what version the documentation was for. Hopefully this is useful to someone.
I have a problem with a wordpress plugin that uses Google Translate to translate pages. It appears a h1 tag with the text "Original text" and I don't know how can I remove it.
I would like to remove the h1 tag, so I am not interested in CSS changes.
Thanks in advance to everyone.
Puts this javascript code in the footer.php, that remove the text in h1 "Original text"
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({ pageLanguage: 'en', includedLanguages: 'es' }, 'google_translate_element');
var removePopup = document.getElementById('goog-gt-tt');
removePopup.parentNode.removeChild(removePopup);
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
Check this PLNKR , i have implemented typeahead control,
By default in type ahead control they are not setting any max-height or height to list, but as per requirement i have to fix height of list to 110px. So, when we have longer list at a time only 4 data will be shown and rest can be seen by scrolling down.
Scrolling is working while user click on scroll up/down arrows, but it's not working with keyboard up/down keys.
The problem is explained in steps:-
Type something i.e "a" to get data in typeahead (list will be populated)
Press down-arrow key (focus will be on list item)
Press down-arrow key 4-5 time to go further down (When we traverse
down to list, scroll is not getting moved.)
It always show top 4 items in list. Ideal behavior is it should shift.
User is able to scroll by clicking on scroll manually but with arrow key it's not scrolling.
HTML
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class='container-fluid' ng-controller="TypeaheadCtrl">
<h4>Static arrays</h4>
<pre>Model: {{selected | json}}</pre>
<input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control">
</div>
</body>
</html>
CSS
.dropdown-menu{
height:110px;
overflow:auto;
}
javascript datalist
$scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];
Here is the working plunker
In this I have override ui-bootstrap typeahead as suggested in the answer.
Following are the changes I need to make it work:
Added following line in typeaheadMatch directive (line - 335 of ui.bootstrap.typeahead.js file in the plunker)
element[0].focus();
Added shouldFocus directive (line - 314 -350)
.directive('shouldFocus', function(){
return {
restrict: 'A',
link: function(scope,element,attrs){
scope.$watch(attrs.shouldFocus,function(newVal,oldVal){
element[0].scrollIntoView(false);
});
}
};
})
and finally added directive in li (line - 372)
should-focus=\"isActive($index)\"
#user1690588 answer works great. Only problem is that when the last item in the list is active and you press the down key. the scrollToView tothe first item does not work. I added a check to ensure newVal is true which seems to fix this.
if (newVal) {
element[0].scrollIntoView(false);
}
http://plnkr.co/edit/05yoHSlhvX740tgiRRXm
I used another approach to solve this problem, as none of the solutions here satisfying. Mainly:
reaching the last item and pressing the DOWN key should bring the first item into view
hovering items with the cursor should not make the Typeahead popup scroll
using mouse scroll wheel should not trigger weird behaviors on the Typeahead popup
fix should avoid modifying AngularUI Bootstrap sources
Extending AngularUI Bootstrap directives and listening to only specific key events seems to provide a cleaner workaround as you can see here:
http://plnkr.co/edit/QuZw7j?p=preview
angular.module('ui.bootstrap.demo')
.directive('typeahead', function () {
return {
restrict: 'A',
priority: 1000, // Let's ensure AngularUI Typeahead directive gets initialized first!
link: function (scope, element, attrs) {
// Bind keyboard events: arrows up(38) / down(40)
element.bind('keydown', function (evt) {
if (evt.which === 38 || evt.which === 40) {
// Broadcast a possible change of the currently active option:
// (Note that we could pass the activeIdx value as event data but AngularUI Typeahead directive
// has its own local scope which makes it hard to retrieve, see:
// https://github.com/angular-ui/bootstrap/blob/7b7039b4d94074987fa405ee1174cfe7f561320e/src/typeahead/typeahead.js#L104)
scope.$broadcast('TypeaheadActiveChanged');
}
});
}
};
}).directive('typeaheadPopup', function () {
return {
restrict: 'EA',
link: function (scope, element, attrs) {
var unregisterFn = scope.$on('TypeaheadActiveChanged', function (event, data) {
if(scope.activeIdx !== -1) {
// Retrieve active Typeahead option:
var option = element.find('#' + attrs.id + '-option-' + scope.activeIdx);
if(option.length) {
// Make sure option is visible:
option[0].scrollIntoView(false);
}
}
});
// Ensure listener is unregistered when $destroy event is fired:
scope.$on('$destroy', unregisterFn);
}
};
});
Tested with AngularJS 1.4.5 & AngularUI Bootstrap 0.13.4, but this should work with other recent versions.
[Note that I had to manually include jQuery, as the one preloaded by Plunker (jQuery v1.8.3) will fail retrieving the current active option.]
The accepted solution will fail if the main window is already scrolling. #user1690588 was on the right track.
Edit the ui-bootstrap-tpls-0.13.3.js and drop this in around line 5205 above .filter('typeaheadHighlight') at least until the AngularUI team decides to fix this. As well as applying the other change to the template that the accepted solution references.
.directive('shouldFocus', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
scope.$watch(attrs.shouldFocus, function (newVal, oldVal) {
if (newVal && element.prop("class").indexOf("active")) {
var par = element.parent("ul");
var scrollingTo = element.offset().top - par.offset().top + par.scrollTop();
// uncomment below section if you want the selected content to be
// viewed at half the box height
// scrollingTo = scrollingTo - (par.height() / 2);
par.scrollTop(scrollingTo);
}
});
}
}
})
Also if you want to get rid of the mouse artifact where it starts scrolling up until it hits the first entry or down till hits the last entry then remove from the template the ng-mouseenter attribute.
I've tried everything I can think of to get the tooltip by the hovered-over event. But for whatever reason it just appears every time in the top left corner of my browser window.
Here is my javascript:
$(document).ready(function(){
var tooltip = $('<div/>').qtip({
id:'myCalendar',
prerender:true,
content:{
text:' ',
title:{
button:true,
},
},
position:{
my:'center left',
at:'center right',
target:'mouse',
viewport:$('#myCalendar'),
adjust:{
mouse:false,
scroll:false,
},
},
show:false,
hide:false,
style:'qtip-light',}).qtip('api');
$('#myCalendar').fullCalendar({
editable:true,
eventMouseout:function(e,j,v){
tooltip.hide();
},
eventMouseover:function(e,j,v){
var event = '<h3>'+e.title+'</h3>';
tooltip.set({'content.text':event,}).reposition(e).show(e);
},
events:[{title:'All Day Event',start:new Date(y,m,1)}],
header:{left:'prev,next today',center:'title',right:'month,agendaWeek,agendaDay'},
});
});
I'm using all of the same javascript and css linked from this example on jsfiddle:
http://jsfiddle.net/craga89/N78hs/
Can someone spot where I'm going wrong?
I couldn't ever get the code above to work, so I decided to go a different route and use the render event instead. Now it works exactly as I wanted by putting the qtip in the middle of the right side of each fullcalendar event on mouse over.
$(document).ready(function(){
$('#myCalendar').fullCalendar({
editable:true,
eventRender:function(event,element,view){
element.qtip({
content:{
text:'<h3>'+event.title+'</h3>',
},
position:{
my:'center left',
at:'center right'
},
show:'mouseover',
});
},
events:[{title:'All Day Event',start:new Date(y,m,1)}],
header:{left:'prev,next today',center:'title',right:'month,agendaWeek,agendaDay'},
});
});
I still don't know why using this code works as expected. Note: I didn't change any of the stylesheets or javascript included with either fullcalendar or qtip, just something about how the code above was implemented improperly.