I'm trying to make a simple Chrome Extension that allows you to loop a section of a YouTube video. I'm able to put the button, I have all the logic behind it finished, styling etc except one thing. The buttons on the YouTube videos control panel, "Play" button, etc, are aligned in the middle of the control panels horizontal axis. However, my button sits at the bottom of it.
And the only way I'm able to make it have the same alignment as the other buttons is to set it's bottom to 13px. Of course this is a static value and won't work on different screen resolutions and when the video goes fullscreen.
I just want to know a way to make it centered along the horizontal axis like the other buttons. Any help would be much appreciated. Thanks.
You can use percentages like bottom:5% instead of bottom:13px to position the bottom relatively to its parent container. The button will change it's distance from the bottom with resolution change but will keep the same ratio of 5% relative to it's container height the whole time.
Related
My Problem:
My web page screen resolution is wider that the mobile screen resolution. I am trying it locally from assets to be shown on WebView.
The sections are arranged horizontally in a grid display.
Then when I see the same page on phone, the middle sections are
collapsed (not shown).
There horizontal and vertical scroll views is not visible, when it should.
and like it should be: the horizontally arranged sections should
arrange vertically to be able to show each section.
I tried to put the HorizontalScrollView and VerticalScrollView and the WebView inside.
I have fixed the resolution for the WebView as 1000dp * 600dp (layout_width and layout_height respectively in my layout xml).
Now I can scroll to all parts of the screen, but the clicks and drag drops are not working on the page (drag drop is managed from the JavaScript inside).
I tried using onInterceptTouchEvent to intercept some events, but I will say it is not recommended to use.
I want to manage the scrolls and clicks entirely from the Web Page rather than using Horizontal Scroll View and Scroll View and setting the heights and widths on the WebView.
Trying to take help from:
How to make a page responsive
How can I arrange horizontally ...
The link below solves my problem a bit. I can control when I want the above scroll bars to scroll when I need (or by adding a padding dimension inside this scroll-view parent to offer scroll area).
Prevent scroll of parent scroll view when drag event is happening in its child view, or in some other case where you do not want your scroll view parent to scroll.
There is another short way:
scrollView.requestDisallowInterceptTouchEvent(true);
But it offers less control. if you add a padding dimension inside this scroll-view parent to offer scroll area, it serves what I need.
I am trying to figure out how to create a simple mobile first layout with two sliding panels. Basically, if the width of the viewing area is less than 700px I would like the layout to look like this:
This will mostly be for mobile screens and allow the user to click the hamburger menu in the top left to have the left menu slide in to the left, or click the ellipsis in the top right to have the right menu slide in from the left. Seems simple but I want both menus to be fixed so when the main content is scrolled through the menus don't get put up at the top.
Also, when the viewing area is over 700px I want the two menus to show automatically like this:
I was wondering if someone could help me with this real quick. I can't seem to nail it down. I appreciate it.
To achieve the responsive requirement, you could use media queries to set specific CSS styles to the screen size you want.
To achieve the fix top menu bar, you could refer to position:fixed
I have content in a horizontal div that exceeds the page area so that to see all of it you have to scroll horizontally. Fine with a trackpad but for those who don't have one I want to make this obvious with the use of either scrollbars or mouseover text/image.
After hours of experiments I finally found this code - scrolling a div of images horizontally with controls - which is perfect(just changed it to mouseover).
The only problem is I want to do it smoothly and without having to repeat the mouseover or clicking.
Also I want to avoid Jquery and all that sliders stuff. I'm a very new to JS and want to keep things simple. Also I wasn't able to force a scrollbar with any CSS solutions.
Thank you
Basically, I have a web page which is a div inside a div. Let's say that div 1 (the container) is 500px high. Div 2 is 100px high inside of that container. What I want to do is detect the user touching div 2 on the screen (this is a web page on a mobile phone) and as they drag up/down, the div moves with them. I've done some research and have seen this being done using matrix3d and transform y in CSS 3 (but I can't find a good explanation for someone with little experience with this sort of thing such as myself). I want it so that, let's say, the user drags the second div to the bottom and some of the content goes outside of the container div. I don't want it to scroll down, I do want it to disappear... BUT I want it to kind of 'bounce' back into view. So here's the breakdown.
user presses the screen
user drags div 2 which is inside of div 1. As they drag the div, it moves in the direction of their drag.
the user can drag the div right to the top/bottom. If they drag it outside of the container div, that's fine. The container div should not resize or become scrollable and part of div 2 should disappear from view.
when the user releases the drag, the div should bounce back into position. Let's say, if it is dragged too high up, it bounces back to position 100, 100. If it's dragged too far down then it bounces back to 100, 500 (I figure the bounce can be controlled by a CSS transition).
So, does anyone have an example that I can look at to see this in action or a tutorial that will help me understand how I can achieve this? I apologise for not providing any code as a basis to start from, but in truth, I don't really know where to start myself.
Any help is greatly appreciated.
The safari dev docs are your friend:
http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html
Checkout the the touch move section for moving a div, for your case you want to set conditionals for if the user goes outside the bounds of your outer div, and disable scrolling using overflow hidden.
I my working on the site that will have image gallery. Designer idea was to make buttons that switch photos be above the photos a bit.
Like this
Example http://img57.imageshack.us/img57/1253/showq.png
Currently I've made a javascript solution to this - it gets position of photo and applies absolute positioning to the button divs. There are some drawbacks - it works unstable in Opera and IE. Also I had to make some dirty haxx to make it stay in position after zooming. I wonder if there is a better way to do this, preferably without javascript.
you mean like here ? (dutch website, see photo browser in the center column at the top)
browser zooming works fine in browsers like firefox and safari because they zoom all the content and recorrect pixel-values. To make zooming work in ie(6) you'd need to style all in em's. But browser zooming is crappy for pixel data anyways…
Absolute positioning of the buttons (left 0 and right 0) is not a problem as long as the container element is positioned relative.
If I understand you correctly, you're trying to center those arrow buttons vertically in relation to the image. This is pretty easily accomplished with just CSS (no javascript required). Here's an example.
The basic idea is that you're using a couple of divs plus some absolute/relative positioning. There's an outer div that drops the top of the whole thing to the center of the parent element and then an inner div that pulls up your content so that the content is centered and not the top of the element.
A popular technique is to split the whole image into two huge (mostly transparent) links. The left half of the photo would take you to the previous image, the right to the next.
Of course you position you images of buttons appropriately and they would move around but I assume the problem you're finding is you have to keep moving your mouse to go through lots of images as the buttons move.... Well with this idea, you only need keep your mouse near the middle, and it should remain over the photo (and therefore a direction).
Example: http://gizmodo.com/photogallery/dreamhomespshop/1008251500
Mouse-over the image and you'll see it's active the complete way across. Not quite the same as your implementation, I'm sure, but the concept applies.