I'm making a one page web site with horizontal scrolling and undefined width, and I'd like to know how to keep my logo and navigation centered in all time at the top.
You can try, margin-left:auto; margin-right:auto
Related
I trying to create a view which have a scroll view. If I Touch to bottom or if I drag my finger to bottom ,then the Scrollview should scroll automatically in fixed speed. consider the below Image
I am using PanResponder class in react native to achieve this functionalities.
for scrolling I am using scrollTo() . But I am failed do this. I like to share my code but it was too bulky and not understandable.
So my question is Is anyone have any code to achieve this. or Is there any libraries available?
Please help me
Use scrollToEnd({animated: true}) to go the bottom of scrollView in react-native.
From doc.s of facebook https://facebook.github.io/react-native/docs/scrollview#scrolltoend
scrollToEnd()
If this is a vertical ScrollView scrolls to the bottom. If this is a horizontal ScrollView scrolls to the right.
Use scrollToEnd({animated: true}) for smooth animated scrolling, scrollToEnd({animated: false}) for immediate scrolling. If no options are passed, animated defaults to true.
Is there any way to make a widget's config and move buttons be placed at the top of the widget itself.
As it is one has to hover over a widget in order to see which one of the items in the widget zone it belongs to. This is impossible though when the content of the widget is not in the same screen space (I had to zoom out in the browser in order to get the below screenshot) unless you zoom out and then zoom back in.
In this image, there are 3 seperate widgets (red, white and green respectively) in a single widget zone.
Also, when the mouse leaves the widget the widget config/move buttons are no longer visible.
One solution is to right-click on the widget and then scroll up to the config wheel but this is not something I want to tell my editors they have to do.
Has anyone else come across this problem and if so, how did they solve it?
This can happen when you have CSS conflicts. You can use Chrome Inspector, Firebug, or IE developer tool to investigate and see if anthing is 'overlapping' those buttons (often a floating div is overlapping the buttons and intercepting the 'click')
Then once you figure out a css class to make it work, just add it to your style sheet with ".EditMode " before it, this is a special class that is on the body when in page editor.
Example:
.EditMode .MyFloatingDivThatsCoveringTheWidgets {
z-index: 0;
}
I have a 940px wide layout that I turn into a responsive layout once it gets below 940px.
The content I have doesn't respond well. It seems that if there is enough text in some of my divs, the divs span the width of my layout. If there's only a little bit of text, the div will go to the left of the page as per this example:
http://www.coflash.com/stuff/cssproblem.jpg
My question is... without giving divs an actual width, how can I assure thet they'll span the width of the browser no matter how much content they have? As soon as I set an actual width, I get scrollbars on my responsive site and it breaks everything :(
What exactly is the text doing that all of a sudden makes it fill the layout area?
Thank you for any help, and sorry I cannot provide a real world example, surely this is a common issue though.
For that first make
html, body{padding:0; margin:0}
then you can specify
div{left:0; width:100%}
try this, it think this will help :) and reply if not done
I have a view withing a panel with this styleCLass applied.
.scrollPanel { width:100%; height: 375px; overflow: auto;}
That panel is nested with an extension pages Application control.
I want both the height and the width of the panel set so the scroll bars of the panel appear and the browsers scroll bars are NOT activated.
This CSS works perfectly for width. I can resize my browser window and the width of the panel adjusts as needed and the browser horizontal scroll bars never come on.
But if I try 100% for height, it does not work the same. If I resize for height then the vertical scroll bars for the browser appear.
Also it would be nice to have the height of the panel always equal to the height of the available screen. With 100%, the height is very small if the view is collapsed. The height expands when the view expands. I would like for it always to be the same size percentage wise to the available height of the browser.
P.S. The set size I have of 375 works perfectly with the exception it does not resize with the browser.
Is there any way to do this?
You would need to register a window.onresize event that fetches the actual size of the window and modifies the panel accordingly, e.g. by setting its height with a style.
So the best way would be to create a method that modifies the size of your panel according to the windows size, respecting a minimum and a maximum value. Once that function is finished, you would just need to register it to the onresize event that gets fired when anything has changed the viewports display dimensions (read, a real resize or something that has enabled the windows scrollbars).
In the perfect world you would debounce/throttle the execution of this method to maybe at most every 100ms to avoid excessive CPU load during a window resize with the mouse and a window border, because depending on the browser, that event gets fired on every single pixel the mouse has moved during such a resize - which is fairly often and may lead to a slower UI response.
I'm having no end of fun (sic) with jQuery.tabs. The widget is quite crafty in that it turns basic HTML like so
<div>
<ul>
<li>Tab #1</li>
...
</ul>
<div for panel #1>
</div>
<div for panel #2>
</div>
...
</div>
into a cute tabbed dialogue. (It does so by restyling the UL and then toggling the "display" attribute for the panel DIVs to show/not show whatever panel is selected.)
Now I found that I can spare myself a lot of trouble in my JS project if I insert a scrollable IFRAME into each panel.
One usability problem I'm trying to ameliorate is that when the tabbed panel becomes larger than the browser's window, then the user ends up with too many scrollbars. I am trying to avoid this situation by linking the size of the tabbed panel to that of $(window). That is, I trap and process the resize event on $(window).
To make my life bearable, all components are relatively sized. This is also true, in particular, of the IFRAMEs (100% width, 100% height). The only exception are the panel DIVs, which are of fixed height (in px). And this is the only dimension css attribute that I manipulate during my resize action.
All of this works a treat in FF and Chrome, but IE6 is doing something rather cute: So long as I do not affect the width of the browser window (but only change its height), only the panel DIV changes in height; the IFRAME contained will not change. As a result of this behaviour, it is not possible to shorten the tabbed panel below the height of the IFRAME. I can lengthen the DIV, yes. But the IFRAME will not fill the panel in that case.
All becomes good the moment I make the slightest change to the width of the browser window. In that moment, the IFRAME expands to catch up with the extended DIV or DIV and IFRAME contract in tandem.
Bizarre. I inserted useless CSS instructions like "position: relative" and "zoom: 1". Also nudged the display with "display: block". No joy so far.
Any ideas?
Thanks.
Never mind. Just had an inspiration: jQuery.tabs doesn't mind if I make the panels outright IFRAMEs. That is, I can do away with the wrapping DIV and thus need not rely on IE6 to honour the automatic relative dimensioning (height=100%, width=100%) of the wrapped IFRAME. The IFRAME is now fixed px in height and is directly resized by my resizeHandler. Life is now good across 4 browsers. Yipee!