Task: I wanted to create a simple share button which extends to a share section (F,T,G,P) when clicked.
I failed to let the section slide out of the share button - what I really, really wanted - but managed to let a separate ul element slide out on the right side.
The animation worked… until I set the ul to hide initially via $('.networks').hide();
The sections is intended to only show up after a click, but now after the first click it just "pops open" ignoring the configured slide-out. Sliding only works in both directions (open and close) after clicking on it at least once .
I've uploaded an Example here at Codepen.io and as a jsFiddle.
Side note: the demos are behaving a little bit strange since they appear to only show a slide-in fx. The slide-out fx, with which we start, always looks like it pops open - that's not the case, it works after the second click, so you got to focus your eyes to see it (on a normal browser it visibly works better).
PS: Bonus points if you help me make this slide out of the "share" button. Be aware that I only have rudimentary knowledge of Javascript ( * duck and run * ).
Take a look at this fiddle link.
I changed the display property of the buttons to be inline-block instead of inline.
Elements with display inline can not have a width and i think it was the reason why jQuery was not able to animates the Elements width. I also animated the wrap around the ul instead of the ul.
EDIT: made a fast mockup of the thing sliding out of the button. Changed some css to be on the list elements itself instead of on the a elements, just work through the css and I think it will look ok.
edit forgot the link: link
Related
I have a problem. If I click on one button then it shows a little window where I need to click on another button. But it is hidden because that window is too small and needs to move with scrollbar. How should I click or move with that scrollbar and then click on the button?
If I try playground on that it takes full window.
Thank you for your answers.
Is that modal related to the width of the screen? If it is you can solve it by adding a new configuration for the viewport to cypress.json:
{
"viewportWidth": 1920,
"viewportHeight": 1280
}
And then of course to a width that is enough to solve your problem.
If that doesn't work, I believe this page can help you: https://docs.cypress.io/api/commands/scrollto.html#Scopes . The result will be something like this:
cy.get('modal_name')
.scrollTo('right')
Besides that I expected a cy.get() to still get the button you were looking for.
This is a very natural way of thinking whilst getting your element. However, imagine you are manually testing the screen above, you will have scroll in order to see and take action to the hidden element. Why should cypress be different?
It is important to transcript to your test, exactly the same actions you would do if manually executing the test. As a result, you should have a scrollIntoView action.
I have included the colorbox css and js and it works when I click any image. However, I don't see any button/control on the overlay. It is only the image with dark overlay behind it. What could be going wrong here?
I am doing this in k15t Scroll Viewport for Confluence.
I tried changing the default script values but even that didn't help. Am I supposed to add the controls manually? I don't think so.
I would like to see the default close button along with slideshow effect, etc. that colorbox offers.
I figured it out. Though dumb but still. The default colorbox images (button icons) folder was residing at a location different from where colorbox expected it. So now, I can see the close button at least.
What still remains is - though I have set the colorbox properties right, I still don't see the previous and next buttons on a page with multiple images. What am I missing? It should have shown up by default...
Thank you.
I took the polymer demo messages example, put it into a jsbin and then edited it to pull out the list and fab into a separate polymer element. In other words pretending that we wanted to make the inbox editor a reusable component.
This more closely resembles my application, as I have broken it into many such components to make it more modular (one of the great benefits of web components IMO).
As the fab is part of this new element then leaving it position absolute puts it at the very bottom off the list rather than always bottom right of the window.
To fix that I simply changed it to position fixed. See this jsbin
It loads fine but when you start scrolling (in latest chrome) the fab scrolls with the list content, instead of remaining fixed at the bottom right.
Interestingly if you click the mouse on the bottom right of the window (where the fab should have been) the fab jumps down to the right place. Now when you scroll it remains in the correct position.
Very strange. Any ideas of the cause and whether I am doing something wrong or it is a polymer bug?
After a quick googling around I found that adding -webkit-transform: translateZ(0); to paper-fab element fixes it to the viewport.
Working jsbin
Related question: position:fixed not working in Google Chrome
I have no idea why this happens, the only vaguely relevant bug that I found is https://code.google.com/p/chromium/issues/detail?id=420534 but it's the other way round: it's about transform: translateZ(0); on parent element that makes its children scrolling and not fixed.
I want to make a dynamic animated slider with symbols that contain clickable actions vs a slider image only approach. I would like to use a "next" button and a "back" button that will scroll multiple background images that contain clickable links. I can produce a basic image slider with the back and next buttons, but this approach is limited. Any help on how I can do this in Edge Animate CC will be very appreciated.
I was looking for a very simple slideshow a while ago. Came up with this here:
http://jquery.malsup.com/cycle/
If you want your Slides to contain any clickable items you will be able to simply add them to the sides div. Just set the picture as a background image in CSS and you are free to develop any clickable items infront.
Here is another tutorial that worked fine for me: http://line25.com/tutorials/build-a-simple-image-slideshow-with-jquery-cycle
To me this is easy to understand and if you are used to jQuery at least a little bit this here will work out fine for you.
I'd like to know how I can make a side panel which when collapsed only shows a button that upon click will be pushed out by an expanded area which contains a control of choice. Clicking the button again will collapse the expanded area and the only thing you'll see is the button at the edge of the screen again.
I don't have any good examples of something similar so I hope you understand what I mean.
in toolbox there is a control called Expander, which is exactly for that purpose