I use Masonry and infinitescroll and it works great together. I have tried to add curvycorners.js and make it load every time infinitescroll loads a new page, but to be honest, I have no idea what I'm doing.
Does anyone know how I can add the code below, so that it loads everytime infinitescroll loads a new page.
curvyCorners.addEvent(window, 'load', initCorners);function initCorners() {
var settings = {
tl: { radius: 5 },
tr: { radius: 5 },
bl: { radius: 5 },
br: { radius: 5 },
antiAlias: true
}
curvyCorners(settings, ".post");
}
Related
i need your help please.
I would like to be able to click on a point added on an ArcGis map so that when I click on it I am redirected to another web page
I have been following the tutorials:
https://developers.arcgis.com/javascript/latest/display-a-map/
Display a map
Add a point
add a feature layer
Display a popup
This is the code so far:
require([
"esri/config",
"esri/Map",
"esri/views/MapView",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"esri/layers/FeatureLayer"
], function(esriConfig,Map, MapView, Graphic, GraphicsLayer, FeatureLayer) {
esriConfig.apiKey = "YOUR_KEY";
const map = new Map({
basemap: "arcgis-topographic"
});
const view = new MapView({
container: "DivCarte",
map: map,
center: [-83.54500,19.02700],
zoom: 6
});
const graphicsLayer = new GraphicsLayer();
map.add(graphicsLayer);
const point = { //Create a point
type: "point",
longitude: -86.900000,
latitude: 21.201278
};
const simpleMarkerSymbol = {
type: "simple-marker",
color: [226, 119, 40], // Orange
outline: {
color: [255, 255, 255], // White
width: 1
}
};
const popupTemplate = {
title: "Cancun",
content: "<a href=http://travelwithnico.com>Site</a>"
}
const attributes = {
Name: "AttGraphic",
Description: "Ilalala"
}
const pointGraphic = new Graphic({
geometry: point,
symbol: simpleMarkerSymbol,
attributes: attributes,
popupTemplate: popupTemplate
});
graphicsLayer.add(pointGraphic);
I managed to open a popup showing the link but it opens on a new tab.
How can I force it to move to the link in the same window?
Thank you for your help.
Nico
Have you tried inlining a JavaScript inside an onclick event? Something like this:
...
content: 'Site'
...
I'm not sure if this will work, but it worths trying.
I can t change the position of tooltip in highcharts:
tooltip: {
positioner: function() {
return {
x: 20,
y: 20
};
}},
http://jsfiddle.net/e07s2oq6/
Doc:
https://api.highcharts.com/highstock/tooltip.positioner
I want to change the tooltip like this:
Here is an ugly solution that solves your problem.
I set the tool-tip positioner to the following:
tooltip: {
split: false,
positioner: function() {
return {
x: this.now.anchorX - this.label.width/2,
y: 20
};
}
},
Now it shows a tool-tip centered above the point that is being hovered.
Working example: http://jsfiddle.net/ewolden/e07s2oq6/3/
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'm working with this scroller
http://coolcarousels.frebsite.nl/c/2/
I have this setup below.
My issue is I have it set to visible: 4 and I have 4 images, so it doesn't scroll. If I set it to visible: 3 then it works as expected. But I want to show all 4 images in one screen when you open the browser full width on a 1920px wide resolution. So the issue seems to be. If I set visible to the amount of images I have then it stops working.
Is there a way to have all 4 images on screen at one time then still scroll through them?
$(function() {
$('#carousel').carouFredSel({
width: '100%',
align: 'left',
items: {
visible: 4,
start: 0,
},
scroll: {
items: 1,
queue : true,
fx: "scroll",
easing: "swing",
duration: 1000,
timeoutDuration: 3000
},
prev: '.prev',
next: '.next',
auto: {
easing: "quadratic",
button: '.play',
pauseOnEvent: 'resume',
pauseOnHover: true
}
}).find(".slide .plusNav").hover(
function() { $(this).find("div").slideDown(); },
function() { $(this).find("div").slideUp(); }
);
});
try this
items: {
minimum: 0,
},
I have resolved this issue by setting minimum to 0.
items: {
minimum: 0,
Actually, setting the minimum attribute to zero forces the scroll bar to be displayed always irrespective of number of items currently displayed.
This was required for me because, automatic enabling of scroll bars was not working on certain screen resolutions- I had to add 2 more items to make the scroll bar visible which was not the expected behavior.
As a work around, I set minimum: 0 - it resolved the issue.
I was able to do this by editing the source :/
If you comment out this lines 554 & 556 in jquery.carouFredSel-6.2.0.js like this...
// not enough items
var minimum = (is_number(opts.items.minimum)) ? opts.items.minimum : opts.items.visible + 1;
if (minimum > itms.total)
{
// e.stopImmediatePropagation();
// return debug(conf, 'Not enough items ('+itms.total+' total, '+minimum+' needed): Not scrolling.');
}
...it worked for me.
Access the wrapper and set its height (assuming all children have the same height):
var carousel = [your_carousel],
carousel_wrapper = carousel.parent();
carousel_wrapper.height(function(){
return (carousel.children('[child_selector]').length) * [child_height];
});
The thing here is, there will be a weird behavior when the carousel animates. This is because the maximum height was done ((n-1) * child_height) intentionally as a mask, along with an overflow: hidden.
Another option would be to duplicate one of the children, but that isn't semantic.
I have a grid with data, contained in a panel which also hold a title and a smaller summary grid.
the panel has layout fit and therefore the title and first grid, which is the summary grid, are displayed just fine. But the grid in question has more records than can be shown on the screen and its component height is not adjusted to the size of the panel which always fits with the height of the browser window.
What I would like to have is that the grid component's height, like the panel, is adjusted to its parent so that the scrollbar inside the grid body will show up.
My code is similar to this (initComponent is of an extension to Ext.panel.Panel):
(header in this code means the summary grid)
initComponent: function (config) {
var config = {
border: false,
hidden: false,
hideMode: "display",
padding: '5',
layout: "fit"
}
Ext.apply(this, Ext.apply(this.initialConfig, config));
this.callParent(arguments);
title = Ext.create("Ext.panel.Panel", {
html: '<h2>title</h2>',
padding: '5',
border: false
});
// the stores for the grids are created here
var storeHdr = DataStoreFactory.CreateStore("GetHeaderP", DataStoreFactory.fieldsCollection.Default);
var storeBdy = DataStoreFactory.CreateStore("GetBodyP", DataStoreFactory.fieldsCollection.Default);
var grdHeader = Ext.create("Ext.grid.Panel", {
store: storeHdr,
columns: getHeaderColumns(),
columnLines: true,
autoHeight: false,
autoWidth: false,
enableHdMenu: false,
enableColumnMove: false,
enableColumnResize: false,
disableSelection: true,
trackMouseOver: false,
sortable: false
});
var grdBody = Ext.create("Ext.grid.Panel", {
id: id,
store: storeBdy,
columns: getBodyColumns(),
columnLines: true,
autoHeight: false,
autoWidth: false,
autoScroll: true,
scroll: "vertical",
enableColumnMove: false,
enableColumnResize: false,
enableHdMenu: false,
trackMouseOver: false,
disableSelection: true
});
},
var headerGridContainer = Ext.create("Ext.panel.Panel", {
layout: "fit",
border: false,
items: [grdHeader]
});
var bodyGridContainer = Ext.create("Ext.panel.Panel", {
layout: "fit",
border: false,
items: [grdBody]
});
this.add(title);
this.add(headerGridContainer);
this.add(bodyGridContainer);
storeHdr.load();
storeBdy.load();
this.doLayout();
}
I hope someone can help me with this. Thanks in advance
edit - screenshots how it is and how it should be. Realtime Data is removed or blotted out, since it is private and doesn't matter for the problem.
this is how it is
this is how it should be
You're using layouts in a wrong way. First, your main container has layout 'fit' which supposed to be used when you have single item inside - http://docs.sencha.com/ext-js/4-0/#!/api/Ext.layout.container.Fit - and you have few items.
Second, try to avoid over-nesting. You're wrapping your grids into panels and then put these panels inside container. Is there a reason for that?
Please post a screenshot of what you have and what you want to have and we will help you figure out layouts that you need to use for this.
Update:
Try to use layout: 'hbox' in your main container. And specify flex: 1 for the main (bottom) grid if you want it to fill the rest of the screen. Son basically you would have something simliar to this (in you main container):
{
layout: 'hbox',
..
items: [{
xtype: 'panel', // header
height: 100,
},
{
xtype: 'grid', // first grid
height: 200
},
{
xtype: 'grid', // second grid
flex: 1
}]
}