I have a coverflow in my program that select an image on click, but I need to have functionality that when you click on the chosen image a second time, it links you to a route.
Like with itunes, you can scrowl side by side the coverflow to chose the correct album and click again to access it's page.
The coverflow has the attribute handleSelect. I want the first click to select the image and make it bigger and in the center of the coverflow, and for the second click to follow the route.
Is it doable?
I use this coverflow: https://github.com/leon-good-life/coverflow-react
Thanks.
For the first click figure out to enlarge image ,You have to do a complete change in you css .It is easier to add the enlargement when hovered, because that makes more sense ,Anyway add counts to the onClick function you are using and then do the complete routing in that function when the clickcCount exedes you limit..
Related
I am displaying pages of a PDF using react-pdf in my application. I have a button called 'add marking', which when clicked, should give the ability to add a mark (small circle component) on the PDF page at the location where I click.
I'm confused with how I should be approaching the problem. I am particularly stuck with what is the best way to get the x and y coordiantes of the click on the pdf. I want the mark to be the same wrt the pdf at all times.
On a given form, we replace one component with another.
The original component is a series of TextFields, and the new form is some informational text and a button. We hide the first one, and show the second one (the UI designer has both Containers within the form).
I tried using scrollRectToVisible with various values but it didn't seem to make any difference with the scrolling.
continueButtonContainer.setHidden(false);
f.forceRevalidate();
Button continueButton =
(Button)StateMachine.GetInstance().findByName("ButtonContinue", f);
f.scrollComponentToVisible(continueButtonContainer);
f.scrollComponentToVisible(continueButton);
I'm expecting the continue button to be near the top of the screen.
If the screen was scrolled before displaying the continue button, the button ends up right at the bottom of the screen (it was below the bottom of the screen before I put in the scrollComponentToVisible line(s).
After the user scrolls the screen, the button goes up to where it needs to be, and stays there.
If the screen is not scrolled, the button appears where it should be.
I know I can probably add some invisible containers underneath the button and force them onto the screen, but I would rather have a slightly more robust solution.
There are a few issues with this. First you are using forceRevalidate which should be used in very rare cases.
Second it seems that you are invoking this on a Form, this is a bit misleading. While it seems that:
f.add(myCmp);
Adds a component to the form it is really a synonym to:
f.getContentPane().add(myCmp);
That's important because you need to invoke the scrollComponentToVisible on the scrollable container which will actually do the work and ideally be the direct parent of said component. I'm assuming it's the content pane in your case but it depends on layout etc.
The last part is letting the layout do its job. If you are invoking this before the form is showing this might not work. Notice that doing it after a call to show is meaningless as the form might take time with transitions. You can use a show listener or override the laidOut callback method to perform things like this.
I am working on Protractor tests. Recently my web page changed where the terms and conditions are inside a textbox. Button Submit works only when the user scrolls through the textbox and clicks on Agree button. I tried the following option to scroll down but it is not scrolling down. Any help is greatly appreciated.
var scrollbar = element(by.id('terms-conditions'));
var checkbox = element(by.id('checkbox'));
scrollbar.click()
browser.executeScript('arguments[0].scrollIntoView()', scrollbar.getWebElement());
browser.executeScript('window.scrollTo(0,670);')
checkbox.click();
I followed the below link too but no luck.
Protractor: Scroll down
The second js execute statement you are using contains Window.scrollTo which references an open window in a browser. and using it only scrolls the complete window but not the pop-ups that appear inside a browser window
Refer here for documentation on Window.scrollTo
Normally terms and conditions shows up in a pop-up or may be a div and hence Window.scrollTo doesn't work
there are two ways you can do it
SOLUTION 1: use Jquery scrollTop() to scroll inside a specific webElement
Step 1: Identify the exact div that holds your terms of Service scroll bar
Step 2: Refine your js statement by trying directly in Chrome console
$('.modal-body').scrollTop() -> This returns the current position of scroll
$('.modal-body').scrollTop(10000) -> This sets the value of top position
Step 3: Incorporate this in your protractor script
browser.executeScript('$('.modal-body').scrollTop(10000)');
You can professionalize this by passing the element & scroll amount as arguments. Refer here
SOLUTION 2; The best way I see to submit a pop-up is not to deal with interface but to deal with the 'form' element behind it. Similar to how we deal with file uploads.No fuss & effective
May be try something like this, by making button visible first and then submit form
browser.executeScript is an asynchronous call, so you will need to put it into the controlFlow so that it will complete before clicking the checkbox:
scrollbar.click();
browser.controlFlow().execute(function() {
browser.executeScript('arguments[0].scrollIntoView()', scrollbar.getWebElement());
browser.executeScript('window.scrollTo(0,670);');
});
checkbox.click();
I am working on a website using Joomla, how can I change Module position in the picture below
click to see photo
thanks
Since most menus do not allow a search bar to show without it being a drop down item or part of a mega menu, your best bet would be to remove the float:right line of code so it just starts from that left side.
http://www.myethiopia.org/QuickLinks/accordion.html
Please check this link in IE. I did not have time to figure out why it is not working in Firefox. I am trying to click on a link on the left column and have the page open in the center.
If you click on Weather Station and Oromiya Station, the title opens up fine but the link does not even open. Line No.325 under var menu1, look at the first item for the code. What am I doing wrong?
Second question. I want a round bulltein or outline type of thing (not sure what to call it) to the left of the Oromiya station. HOw can I do that?
Checkbox is not what I am looking for.
If you want to update the centerpanel html you can use the update() function.
In this small example I've added an 'id' to the center panel and then in the handler function for the menu item used this code to show an update.
var centerRegion = Ext.getCmp('centerpanel');
centerRegion.update('<iframe src="http://www.myethiopia.org/QuickLinks/Weather/EthiopiaWeatherStations/Amharastations.html" style="width:100%;height:100%"></iframe>');
I'm not exactly sure what you are trying to do but it looks like you want to load the grid into the centerpanel, you can do that directly without having to load in a separate html page.