I'm using VS2010,C# to develop an ASP.NET web app, my page contains a wide image, so that users will usually see a horizontal scrollbar, but I want this scroll bar to be automatically placed centered horizontally so that my user always views the image and the whole screen in center by default, is there any way to do so?
thanks
Try This
var img = document.getElementById('imageid'); //or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;
// Jquery
$("div.demo").scrollLeft(width/2);
Check this... you would need to create custom script for your scroll bar
Custom Scroll Bar
Related
I'm designing a chat window and I'm using overflow:auto in CSS.
I want it continue with end of line, but scroll does not moving, and it's always move to top of the chat window.
Is there a way to do it automatically?
using javascript it will be possible see the following
document.getElementById("id of your div").scrollTop = document.getElementById("id of your div").scrollHeight;
I'm using Fancybox for Wordpress to display a form.
Within the fancybox is a div with id "popup1", which contains the form.
When the user submits the form, #popup1 disappears, and #popup2 appears. div#popup2 just has a little "Thank you" message that is very short.
The height of the fancybox window automatically resizes to fit the height of the content when I switch from popup1 to popup2, but I want the WIDTH of fancybox window to shrink also. How can I do that?
Thanks in advance!
You have several handlers to flip from one pop-up to another like
$("#popup4-BA").slideDown("slow");
Try adding the fancybox (v1.3.4) method $.fancybox.resize() after completing the animation like
$("#popup4-BA").slideDown("slow", function(){
$.fancybox.resize();
});
... you may need to do this in every handler.
Some Notes:
you first pop-up has a fixed width so you may need to try removing it and set the css width property to auto.
since you are using fancybox v1.3.4 with inline content, you need to be aware of this BUG and workaround.
I an mobile application, I want to open a popup, and I want to resize it dynamically.
I am using a SkinnablePopupContainer and I open it with popup.open(view, true);
If I try to reduce the size with popup.width = ... the content of the popup overflows. If there a way to redraw the content of the container so it fits well ?
Thks
you can try to use .validateNow() to redraw the content.
I have a notification bar that is 'hiding' behind my header by default:
It is only shown after an AJAX request (via jQuery animate()) to tell the user if it was successful:
But when the user scrolled down the page and does not see the header, the way I build it at the moment, it just hangs in the air:
So there are 2 cases:
if the user sees the header, it should be right beneath it
if the user does NOT see the header, it should be attached to the top of the page
And of course when the user scrolls it should move smoothly between the states.
How would I do this? CSS only / with JS?
Position the info bar using position:relative in your CSS. Get everying working in this normal state.
Then use the scroll event on the window in Javascript to find if the user has scrolled more than the height of the header. If this is the case, add a class to the info bar that sets it's position using position:fixed; top:0;.
Remove the class when the scrollTop height is less than the height of the header
I have an application control bar at the bottom of my Flex application (with attributes width="100%", dock="false", left="0", bottom="0", height="50"). It contains a lot of elements (like buttons and labels). The width of the SWF is the width of the browser.
When the user makes the width of the browser window smaller, after a certain point, the components on the application control bar gets "squished": they are forced on top of each other. And so, it becomes confusing and ugly. To ensure that that doesn't happen, I've set the minWidth attribute to a value so that it'll always display the components without them overlapping each other.
But then, a horizontal scrollbar appears and hides the bottom half of the application control bar.
I've googled and I found this article: flex verticalscrollpolicy bug (referenced by this SO question: Flex: Prevent scrollbar from covering content when automatically displayed).
But that seems to apply only to a fixed size component. My component's width is a percentage. Any ideas on how to have the horizontal scrollbar appear and have it not cover up the application control bar?
Thanks!
See if adding the following code to the overriden validateSize method (as in the scrollpolicy bug page you linked to) solves the problem.
if (width < measuredWidth)
{
height = normal-height + height-of-the-horizontal-scrollbar;
}
else
height = normal-height;
(Find the normal height of the application control bar and the scroll bar (trace them out) and use those values).
So this happens when the ApplicationControlBar is fixed at the bottom: bottom=0 and left=0. The easiest solution is to make the bar a lot taller (that'll push the content way higher than the scrollbar height). But that makes it kinda ugly.
So another solution: in the MXML file, I capture the Resize event. And in that function, I do this:
if (width < bar.minWidth) // width is the width of the SWF
{
bar.height = ORIGINAL_SIZE + 10;
hbox.setStyle("verticalAlign", "top");
hbox.setStyle("verticalCenter", -10);
} else {
// normal case
box.height = ORIGINAL_SIZE;
hbox.setStyle("verticalAlign", "middle");
hbox.setStyle("verticalCenter", 0);
}
And the horizontal scrollbar doesn't hide the content anymore! Also, the Resize event doesn't get triggered when the bar has a minWidth & the width of the stage is less than that.
I had this come up today and I slightly tweaked sri's if statement like this:
if (buttonContainer.horizontalScrollbar)
{
// Change height & style properties
}
else
{
// Return to original properties.
}