Please take a look at my jsFiddle here
I am using jQuery Isotope plugin and I am having troubles using their itemPositionDataEnabled to be able to scroll from my clicked item to the top of whats currently visible in the browsers window.
With itemPositionDataEnabled I should be able to extract the x and y position of what ever item I'm requesting. However mine does nothing at all....
var $this = $(this),
scrollTop = $(window).scrollTop(),
itemPosition = $this.data('isotope-item-position'),
itemPositionY = $this.itemPosition.y,
distance = (itemPositionY - scrollTop);
$('html, body').stop().animate({
scrollTop: distance
}, 1000);
You have a plain and simple error in these two lines:
itemPosition = $this.data('isotope-item-position'),
itemPositionY = $this.itemPosition.y;
The second line should be:
itemPositionY = itemPosition.y;
Not sure if you're all the way there since it only seems to work on the way you want on the first click.
http://jsfiddle.net/EA8tM/90/
Related
I have three columns, two with divs and the central one with an svg. I made a method that calculate the top() of each paragraph inside the divs to get the position and then draw an arrow in the svg. The problem is that when I use that method the first time I open my component, I get all zeroes, probably because the paragraph aren't really drawn (they have no coordinates) yet. I tried in mounted(), which should be the right place to do that. I use it also in updated() in case I reload my json with new data.
Am I missing something trivial?
The code I use to get the coordinates is like this:
drawLine(index1, index2) {
//var plist1 = this.$refs['p_list1'];
//var plist2 = this.$refs['p_list2'];
var plist1 = document.getElementsByClassName('p_list1');
var plist2 = document.getElementsByClassName('p_list2');
if (plist1.length == 0 && plist2.length == 0) return;
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'line');
//...
//const start = this.$refs['startpos'].getBoundingClientRect().top;
const start = document.getElementById('startpos').getBoundingClientRect().top;
const r1 = plist1[index1].getBoundingClientRect();
const r2 = plist2[index2].getBoundingClientRect();
index1 and index2 comes from a loop where I get which paragraph I have to connect with an arrow (also where the nextThick is)
Here is a simple example of the issue:
https://codesandbox.io/s/bootstrap-vue-test-bcozc
Note: it's badly shown, but if you press "DO" and then switch tab, you'll see that the arrow aren't correct. If you switch tab and then press DO, it will work.
Put your calculation methods in a $nextTick function to allow parents and children to fully render.
If that does not work, as a debug step, try using a setTimeout method to delay the calculation.
After understanding that the problem was linked to how tabs are built, I tried making that specific tab lazy and it worked.
<b-tab lazy ...
I don't know how tabs are normally built, but I suppose the dom is put together without having a real coordinate system and when it's made visible, I don't have any event to read to update the svg.
I'm using canvas (phaser.io game framework) to make games and would like to do selenium tests. Sadly I can't replay recorded actions on a canvas.
For example I can't replay the click on the button here https://phaser.io/examples/v2/input/button-open-popup
I get this in the log:
1.Trying to execute open on /examples/v2/input/button-open-popup... Success
2.Trying to execute selectFrame on index=0... Success
3.Trying to execute clickAt on css=canvas with value 422,502... Success
But nothing happens on the screen and the popup is not poping up.
Is there a problem with clicking on canvas through Selenium IDE or maybe I'm doing something wrong?
I did some automated tests for Phaser games.
Let's take an example, I have to click on a menu button.
The way I managed to click on the button precisely every time is that I created a html page, with the same width and height as my canvas ( first, I decided the size of the chrome window, for me I used 800x900, and then get the canvas size), and in my html page I only put javascript to output me the positions where I click.
So basically I created a html, with the same dimension as my canvas, and clicked on it at the approximate position of my canvas button.
Here is the code I've used for my tests:
var mainState ={
preload: function(){
},
create: function(){
game.stage.backgroundColor = '#71c5cf';
game.scale.pageAlignHorizontally = true;
game.scale.pageAlignVertically = true;
},
update: function(){
getcoordinates();
}
};
function getcoordinates(){
if (game.input.mousePointer.isDown){
var x = game.input.activePointer.position.x;
var y = game.input.activePointer.position.y;
console.log("x" + x, "y" + y);
var worldx = game.world.centerX;
var worldy = game.world.centerY;
console.log("world x" + worldx, "world y"+ worldy);
}
};
var game = new Phaser.Game(384,683, Phaser.CANVAS);
game.state.add('mainState', mainState);
game.state.start('mainState');
As for checking if my action was succesfull, I used JavascriptExecutor. And in Selenium I've created some functions that do just that, navigate to coordinates and execute click.
Is there any way to not show this slider(as in screenshot below) on click of few polygons but to show on click of few other polygons?
To simplify what I mean to say, suppose This slider should be shown on click of blue polygon but should not be shown when red polygon is clicked, but I want to keep the ids for both polygons.
There's an undocumented property [_enableInfoOrSelection][1] (note - this is a private property and is unsafe for production - use with care).
The code is:
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
var shouldShow = true;
handler.setInputAction(function(click) {
viewer._enableInfoOrSelection = shouldShow;
shouldShow = !shouldShow;
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
Note the line that controls weather to show or not to show the info box:
viewer._enableInfoOrSelection = shouldShow;
You'd might want to do something smarter (like to remove the info box in case a new entity was clicked etc., but it's up to you :)).
Here's a working code:
http://plnkr.co/edit/Zb6fwNExkceAPpRyXnEw?p=preview
I have a responsive layout and I am using sticky.js for my header. This seems to be working minus a few glitches that I can live with. But my anchors are always off (I am using smooth scrolling). I am not sure how to compensate for the sticky header when scrolling to an anchor when the responsive layout is constantly changing the width and height?
Unfortunately there is not a whole lot you can do with straight-CSS which won't distort your design. To tackle this issue in previous projects, I have used jQuery to handle these types of scrolling/anchor issues.
What You Have Now: <a> tags that look for id's on the page. The problem is this: when the site goes responsive, those anchor tags don't line up so nicely with your DOM layout.
My Solution: To give you the high level concept - I used jQuery to modify the ID positions on the fly. Say you click on a link when the site is full-size, and everything is fine. jQuery is not needed here. Now say that when you click that same link when the site was scaled to about the 768px-width range (iPad portrait): then my anchors might look as if they were about 100px off (for example). I wrote a bit of jQuery to handle this: "If the width is __, then offset the anchor ID's by ___px."
I would recommend using JS to account for the difference at time-of-scroll, rather than trying to artificially alter the height property of your anchor tags. Here's a function that might work for you, using pure JS:
adjustScroll = function () {
// Sticky nav selector (you'll have to provide your own selector)
const nav = document.querySelector('header>nav');
if (location.href.indexOf("#") >= 0) {
// Find the name of the anchor
let n = location.href.substr(location.href.indexOf("#")+1);
// Find the anchor by name, if it exists
let a = document.querySelector('a[name="'+n+'"]');
if (!a) {
return;
}
// Set y value as y-value of the anchor, offset by the header height
let y = a.offsetTop;
y -= nav.height + 10;
// Scroll to the y position
window.scrollTo(0, y);
}
}
// Call it wherever you need to call it
adjustScroll();
Examples of where to call it might be on a DOMContentLoaded event, or on an onclick event for anchor tags.
I've set up a flexslider as a product carousel for a fluid width site. The product items disappear sometimes when the browser window is opened up to a certain width. Details below:
Dev Site / Demo
This is regarding the center box called "Popular Products." Here's how to replicate the issue I am experiencing, in all browsers that I have tested (FF, IE, Chrome, Safari)
Close your browser window down until only 4 or 5 items show
Click the right arrow until the last product is showing (currently it's the pro-mate black sleeves)
Now, resize your browser window wider, and the products disappear at a certain point. Go smaller again and they reappear.
Notes that may help:
If you are NOT at the last item in the carousel and resize, it works fine and things stretch as needed
If the browser is wide and the max 6 products are showing and you go to the last item in the carousel, then resize small and big again, it works fine as well (so it only breaks when you go to last item when carousel is small in width, then goes big)
For the slider config, I have set a minItems of 4 and maxItems of 6.
All of the demos for flexslider are images only...I haven't seen anyone using it to display html inside each item like I have, nor do I know if it was even designed to allow this. Hopefully if other people are also doing html/multi-items insde flexslider, this will be something they've seen, or this could help them if we solve it.
Thanks for any assistance
Lauren's fix is detailed and complete, (aside from the deprecated $.broswer) but I've found that simply resetting the the carousel to slide 0 on resize is simple and elegant for responsive designs. It's easy to focus on resize events when building the site because testing, but in the real world people aren't constantly resizing their browsers while looking at a page, and those that are are a very small edge case. So this is my solution:
$(window).bind("resize", function(){
$('#flexslider').flexslider(0);
});
This seems to work in the latest Chrome, Safari, Firefox, and IE, but it's messy (mostly because I got it working in Chrome, Safari, and Firefox, and then realized IE9 was still making elements disappear) :
/*
* Flexslider BUG FIX:
* Summary: on window resize, ensure team scrollbar members are all visible
* Dependency: Flexslider v2.1 and its dependencies
*/
$(window).bind("resize", function(){
//doesnt work well in IEs, so detect these browsers
//var isIE9 = ($.browser.version == "9.0") && ($.browser.msie == true);
var isIE = $.browser.msie == true;
var tmpCurrentItem = $('#team').flexslider().data().flexslider.currentItem;
// if current item isnt the 1st one, then resizing may mean that images will disappear
if (tmpCurrentItem != 0) {
// sometimes passing a number into flexslider doesn't work and returns nothing
// in these instances, move to 0
//if NOT IE
if (isIE != true) {
var tmpFlexValue = $('#team').flexslider(tmpCurrentItem);
if (tmpFlexValue == undefined) {
$('#team').flexslider(0);
}
}
var tmpCurrentSlide = $('#team').flexslider().data().flexslider.currentSlide;
var tmpPages = $('#team').flexslider().data().flexslider.pagingCount;
//if IE
//slide number (not item number) should ALWAYS be less than paging Count
//otherwise, it needs to be reset to 0
if (isIE == true){
if (tmpCurrentSlide >= tmpPages) {
$('#team').flexslider(0); //this triggers another resize event
}
}
}
});
/* end flexslider bug fix
*/