2.0 and I would like to see only one slide which is the class: "owl-item active center"
Could you help me?
thank you and have a good day
jQuery script :
var owl = $('.owl-carousel');
$(".owl-carousel").each(function(index, el) {
var containerHeight = $(el).height();
$(el).find("img").each(function (index, img) {
var w = $(img).prop('naturalWidth');
var h = $(img).prop('naturalHeight');
$(img).css({
'width': Math.round(containerHeight * w / h) + 'px',
'height': containerHeight + 'px'
});
})
});
// Carousel initialization
owl.owlCarousel({
center: true,
loop:false,
margin:0,
singleItem:true,
autoWidth: true,
navSpeed:500,
nav:true,
autoplay: false,
rewind: true,
items:1
});**strong text**
enter image description here
Related
There is a feature in Rappid (the paid version of JointJS) which allows you to drag a button from the toolbox of an element and connect that element to another element where you release your mouse button.
I want to implement this feature with JointJS core library. I've managed to create a tool box with elementTools and added two buttons, one for removing the element and one for this drag and connect feature.
The Picture of element with element toolbox
The problem is the button for drag fires only when I click on the button. It doesn't allow me to drag and have x, y coordinates of the mouse.
There is a similar question which was left unanswered in stackoverflow:
Creating a ToolElement for every object JointJS
Here is my snippet for the button:
const InfoButton = joint.elementTools.Button.extend({
name: 'info-button',
options: {
focusOpacity: 0.5,
distance: 60,
action: function (evt: JQueryEventObject, elementView, buttonView) {
// alert('View id: ' + this.id + '\n' + 'Model id: ' + this.model.id);
const link = new Models.SequenceFlow();
link.set('source', { id: elementView.model.get('id') });
link.set('target', new joint.g.Point(evt.pageX, evt.pageY));
// const alev = jQuery.Event()
// evt.preventDefault();
// paper.trigger('AliEvt', evt);
link.addTo(model);
// link.se(this.model);
// link.target(new joint.g.Point(0, 0));
},
markup: [
{
tagName: 'circle',
selector: 'button',
attributes: {
r: 7,
fill: '#001DFF',
cursor: 'pointer',
},
},
{
tagName: 'path',
selector: 'icon',
attributes: {
d: 'M -2 4 2 4 M 0 3 0 0 M -2 -1 1 -1 M -1 -4 1 -4',
fill: 'none',
stroke: '#FFFFFF',
'stroke-width': 2,
'pointer-events': 'none',
},
},
],
},
});
const infoButton = new InfoButton();
const toolsView = new joint.dia.ToolsView({
name: 'basic-tools',
tools: [removeButton, boundaryTool, infoButton],
});
Any help would be appreciated.
How to keep all the qtips inside a container (I have already tried position.container, position.viewport and position.adjust.method) without any luck, my best guess is that I am not using them correctly.
Update:1 I have created a sample app with more details on below url
http://secure.chiwater.com/CodeSample/Home/Qtip
Update:2 I have created jsfiddle link too. http://jsfiddle.net/Lde45mmv/2/
Please refer below screen shot for layout details.
I am calling the area shown between two lines as $container in my js code.
So far I have tried tweaking viewport, adjust method but nothing helped. I am hoping this is possible and I would greatly appreciate any help.
Below is my javascript code which creates qtip2.
//Now create tooltip for each of this Comment number
$('#cn_' + num).qtip({
id: contentElementID,
content: {
text: .....
var $control = $('<div class="qtip-parent">' +
' <div class="qtip-comment-contents">......</div>' +
' <div class="clearfix"></div>' +
' <div class="qtip-footer"><span class="qtip-commenter">...</span><span class="pull-right">...</span></div>' +
'</div>'
);
return $control;
},
button: false
},
show: 'click',
hide: {
fixed: true,
event: 'unfocus'
},
position: {
my: 'top right',
at: 'bottom right',
target: $('#cn_' + num),
container: $container,
//viewport: true,
adjust: { method: 'shift none' }
},
style: {
tip: {
corner: true,
mimic: 'center',
width: 12,
height: 12,
border: true, // Detect border from tooltip style
//offset: 25
},
classes: 'qtip-comment'
},
events: {
show: function (event, api) {
...
},
hide: function (event, api) {
...
}
}
});
Example of jalopnik page which shows what I am looking for (FWIW jalopnik example doesn't use qtip2).
I don't think qtip API supports this functionality. I ended up re-positioning the tooltip on visible event.
I have updated the demo page and jsfiddle link below is code for doing this.
events: {
visible: function (event, api) {
var $qtipControl = $(event.target);
$qtipControl.css({ 'left': contentPosition.left + "px" });
var $qtipTipControl = $qtipControl.find(".qtip-tip");
var $target = api.get("position.target");
$qtipTipControl.css({ "right": 'auto' });
//I am using jquery.ui position
$qtipTipControl.position({
my: "center top",
at: "center bottom",
of: $target
});
}
}
Problem with this approach is that there is noticeable jump when I re-position the qTip. But in lack of any other option for time being I will settle with this.
The ideal approach would be to allow callback method thru position.adjust currently it only supports static values for x and y, if a method was allowed here it would make things much smoother.
i wish to scale a text layer by button click.
var messageLayer = new Kinetic.Layer();
function writeMessage(message, xx, yy) {
var context = messageLayer.getContext();
context.font = '12pt Calibri';
context.fillStyle = 'white';
wrapText(context, message, xx, yy, seat_size, seat_size);
}
stage.add(messageLayer);
writeMessage(text, xx, yy);
document.getElementById('zoomInBtn').onclick = function zoomInStage(){
stage.setScale(2);
stage.draw();
}
I'm not sure why but this seems not working..
Thanks for helping.
Hi thanks for pointing out my mistake.
but after i add the y value and this is still not working ....
below are my code:
enter <!DOCTYPE HTML>
<html>
<body>
<div id="container"></div>
<button id="scaleme" style="margin-left:10px;">Scale</button>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.0-beta2.js"></script>
<script>
function writeMessage(messageLayer, message) {
var context = messageLayer.getContext();
messageLayer.clear();
context.font = '18pt Calibri';
context.fillStyle = 'black';
context.fillText(message, 10, 25);
}
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var messageLayer = new Kinetic.Layer();
stage.add(messageLayer);
writeMessage(messageLayer, 'text text text');
document.getElementById('scaleme').onclick = function scale(){
messageLayer.setScale(2,2);
}
</script>
</body>
</html>
please helppp....thanks!
From the API docs:
this is the format:
setScale(x, y)
So you are missing the y parameter it seems.
If you do
stage.setScale(2,2);
then the whole stage will be scaled, but if you want just the text layer to be scaled:
messageLayer.setScale(2,2);
lastly, if you want to be fancy, you can do a transition to zoom to the text:
messageLayer.on('click', function(){
messageLayer.transitionTo({
scale: {
x: 2,
y: 2
},
duration: 1,
easing: 'elastic-ease-out' // this one is not really necessary, just for show
});
});
EDIT:
Since you are using canvas primitives, do this: http://jsfiddle.net/mmqXK/
var context = messageLayer.getContext();
context.scale(1, 0.5);
messageLayer.draw();
writeMessage(messageLayer, 'text text text');
i make a map with this code
var map;
var myOptions = {
center: new google.maps.LatLng(-31.403759,-64.174232),
zoom: 12,
panControl: true,
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
overviewMapControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
function iniciar() {
map = new google.maps.Map(document.getElementById("map"),myOptions);
}
function marcar(lat, lng) {
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
'<div id="bodyContent">'+
'<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
'sandstone rock formation in the southern part of the '+
'Northern Territory, central Australia. It lies 335 km (208 mi) '+
'south west of the nearest large town, Alice Springs; 450 km '+
'(280 mi) by road. Kata Tjuta and Uluru are the two major '+
'features of the Uluru - Kata Tjuta National Park. Uluru is '+
'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
'Aboriginal people of the area. It has many springs, waterholes, '+
'rock caves and ancient paintings. Uluru is listed as a World '+
'Heritage Site.</p>'+
'<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
'http://en.wikipedia.org/w/index.php?title=Uluru</a> (last visited June 22, 2009).</p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var location=new google.maps.LatLng(lat,lng);
var marker = new google.maps.Marker({
position: location,
map: maps
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
When I try to click on markers, they are decalibrated so that when I click on the center of a marker nothing happens. But a few centimeters down, a cursor appears like the marker is at that point.
So the map is not centered and the marker appears at the real coordinates, but I have to click 2 cm down away from the marker for the click on the marker...
Why is that?? Has anybody else had this happen??
the problem was the body... in my css i put
body{
zoom:0.9;
margin:0;
padding:0;
width:100%;
}
the zoom affects the google maps remove the zoom calibrate the marker.... thank you all!! i hope this problem solve any other similar problems
and sry for my bad english! ejejej
I'm using the following code to open a pop-up window in a Google Chrome extension, my one question is, how do I get the pop-up window to open in the centre of the users screen?
<script>
chrome.browserAction.onClicked.addListener(function() {
var left = (screen.width/2)-(w/2);
var top = (screen.height/2)-(h/2);
chrome.windows.create({'url': 'redirect.html', 'type': 'popup', 'width': 440, 'height': 220, 'left': '+left+', 'top': '+top+', } , function(window) {
});
});
</script>
I've also tried this, which resulted in no such luck.
<script>
chrome.browserAction.onClicked.addListener(function() {
chrome.windows.create({'url': 'redirect.html', 'type': 'popup', 'width': 440, 'height': 220, 'left': (screen.width/2)-(w/2), 'top': (screen.height/2)-(h/2), } , function(window) {
});
});
</script>
When you see var obj = {property: value} structure in JS it is an object creation. In your code you are trying to pass an object containing window properties to chrome.windows.create() function.
Correct code should be:
chrome.browserAction.onClicked.addListener(function() {
var w = 440;
var h = 220;
var left = (screen.width/2)-(w/2);
var top = (screen.height/2)-(h/2);
chrome.windows.create({'url': 'redirect.html', 'type': 'popup', 'width': w, 'height': h, 'left': left, 'top': top} , function(window) {
});
});
If you want the centering to also work with a dual monitor, you'll need to get the current window object from the extension and center your popup relative to that. Like so:
chrome.browserAction.onClicked.addListener(function() {
chrome.windows.getCurrent(function(win) {
var width = 440;
var height = 220;
var left = ((screen.width / 2) - (width / 2)) + win.left;
var top = ((screen.height / 2) - (height / 2)) + win.top;
chrome.windows.create({
url: 'redirect.html',
width: width,
height: height,
top: Math.round(top),
left: Math.round(left),
type: 'popup'
});
});
});
chrome.windows.create expects an integer for top and left, so it is recommended to wrap those values in Math.round.
If you want the screen to appear in the middle of the browser (not the center of the screen), and dynamic window size, you can do this.
chrome.windows.getCurrent((tabWindow) => {
const width = Math.round(tabWindow.width * 0.5) // dynamic width
const height = Math.round(tabWindow.height * 0.75) // dynamic height
const left = Math.round((tabWindow.width - width) * 0.5 + tabWindow.left)
const top = Math.round((tabWindow.height - height) * 0.5 + tabWindow.top)
chrome.windows.create( // https://developer.chrome.com/docs/extensions/reference/windows/#method-create
{
focused: true,
url: targetURL,
type: 'popup', // https://developer.chrome.com/docs/extensions/reference/windows/#type-WindowType
width, height,
left, top
},
(subWindow) => {}
)
})
Desc
Image
Show you what is the tabWindow.top and left
And you can use some filters to check whether the window has been created or not, to determine to create a new one, or show the window that you made.
chrome.windows.getAll({populate : true, windowTypes:['popup']}, (windowArray)=>{})
example code
chrome.windows.getCurrent((tabWindow) => { // https://developer.chrome.com/docs/extensions/reference/windows/#type-Window
const targetURL = 'yourTemplates/yourFile.html'
chrome.windows.getAll({populate : true, windowTypes:['popup']}, (windowArray)=>{
const queryURL = `chrome-extension://${chrome.runtime.id}/${targetURL}`
const target = windowArray.find(item=>item.tabs[0].url === queryURL) // ❗ make sure manifest.json => permissions including "tabs"
if (windowArray.length > 0 && target !== undefined) {
// Show the window that you made before.
chrome.windows.update(target.id, {focused: true}) // https://developer.chrome.com/docs/extensions/reference/windows/#method-update
return
}
// Otherwise, Create
const width = Math.round(tabWindow.width * 0.5)
const height = Math.round(tabWindow.height * 0.75)
const left = Math.round((tabWindow.width - width) * 0.5 + tabWindow.left)
const top = Math.round((tabWindow.height - height) * 0.5 + tabWindow.top)
chrome.windows.create( // https://developer.chrome.com/docs/extensions/reference/windows/#method-create
{
focused: true,
url: targetURL,
type: 'popup', // https://developer.chrome.com/docs/extensions/reference/windows/#type-WindowType
width, height,
left, top
},
(subWindow) => {
}
)
})
})
As an addendum to this answer, if you want to retrieve popup dimensions from localstorage--which are saved as strings--this will convert the variables to the necessary integers for the pop-up to work.
var w = parseInt(localStorage.getItem('key'));
var h = parseInt(localStorage.getItem('key'));