Making an element scroll independently of the page

I would like to make a lightbox slideshow with 100+ photos. For aesthetics purposes, I want the thumbnail container to display 9 at a time, and the user to be able to scroll down within the container so all are able to be viewed. Is the possible

Hi
I believe , you want users to click on thumbnail which should open lightbox with 9 images in it and where users can scroll inside the container to view those 9 images.
You can use any composition , the triggers can be used as thumbnails and in Target container insert slideshow where there should be 9 slides with 9 images. So this would be similar effect, where user clicks on thumbnail and container opens with slides of 9 images, user can navigate using navigation buttons. Achieving a lightbox effect would somehow is not possible without using custom script.
Thanks,
Sanjit

Similar Messages

How to create a button which scrolls down with the page automatically?

Hello,
I wanted to create a button which takes u back to the top of the page when pressed on, but I was wondering how to make it scroll down with the page on the right side automatically when some1 scrolls down the page.
An example I saw was on tumblr.com
P.S I'm a newbie, so please explain it clearly ;d.
Thanks.

Create a button, position it as fixed at the top right say,
a button{
 position:fixed;
 top:50px;
 right:50px;
<a href="#home"><button> Button</button></a>
The <a> is the link to take you to the top of the page
Just be sure to set the id home on an element at the top of the page

Why are my images scrolling from outside the Page width?

Why are my images scrolling from outside the Page width? I am positive i has all the settings correct, to have an image parallax scroll from the edge of the page into the page and out again. But the images are flying in from the browser width - not the page width. This is not the effect I am after.
Any suggestions on how to fix this? Given the key position is only linked to the height, I can't for the life of me work out how to ensure the images start moving from a certain position onthe left and right of the page.
Thanks

I think the effect you are seeing is a result of how the lineHeight is set up. By default, the lineHeight will be calculated as 120% of the size of the largest thing on the line -- in your case, this is the inline graphic. This is designed to leave space between the line before and the line with the graphic. So it is taking the height of the graphic, multiplying by 120%, and making this the distance between the previous line and the line with the graphic. So the bigger the graphic, the bigger the space above the graphic. Normally this works well with text, but in this case you may want to get closer to "set solid". You can do this by setting the lineHeight to 100%. Or you may wish to leave a couple of percent for the descenders of the previous line. Or, another alternative that may work well for you if you really know exactly where you want the line set, you could measure the graphic, add on the number of extra pixels to leave for the descenders, and make the lineHeight a constant. So you could do something like this:
<img lineHeight="104%" height="411"/>
or this:
<img lineHeight="423" height="411"/>
Obviously you would still need to specify the source and any other parameters you want on the image.
Note that if you are trying to fit a 200 pixel high graphic into a 200 pixel high container, you will hit the same problem -- in order to fit the graphic, the container will have to be slightly bigger than the graphic in order to fit the descenders on the last line. This is true even if the last line contains only the graphic, and no descenders (or text) at all.
Hope this helps,
- robin

How to create a text area for a blog that scrolls independent of the webpage.

I want to create a boxed area (Middle 2/3 of page) with text in muse that scrolls up and down independently of the webpage itself. I am trying to create a blog posting on the page and the reader can scroll down on the text but the page (background image) stays static. See Shades link for example. This is a retail store using the same function for posting product.

i'm trying to do the same thing, but with a section of images that scrolls independently of the rest of the page. i haven't found any way to achieve this yet, but i will keep looking and update you if i find anything. good luck!

After applying full scroll bar to the page including header and footer, Text editor ribbon actions cause page to automatically scroll down (while applying formatting)

After applying full scroll bar to the page including header and footer, I have provided content to
the page more than 100 lines and try to format the text from ribbon actions(format text area). On mouse over of font or fore color, the control jumps to the highlighted content area and not able to select the color. The page scrolls down and not able to click
on any action.
Consider this scenario also.
A content editor web part is added toward the bottom of the page.
Text is added to this (direct in the web part, not via a 'content link')
You highlight some text and go to the Markup Style dropdown...
Everything is fine until you hover over the "Paragraph" markup style, and suddenly the page scrolls to the web part you are editing, and you didn't have a chance
to click and apply the "Paragraph" formatting
I have tried testing this with text typed directly into the Content Editor, text pasted in from somewhere else, and text pasted in from somewhere else using "Paste as
Plaintext" option in the ribbon. In each scenario, I get the same results.
Furthermore, I have also tested this in both IE8 and IE9 and get the same results.
I can get it to occur most regularly with trying to apply the Paragraph "Markup Style" but
I've also seen this happen with Font Size (any font size). It's very frustrating since you aren't able to actually apply the formatting you need because the page jumps before you can click. Has anyone experienced this before. Any feedback would
help.

Hi,
According to your post, my understanding is that after applying full scroll bar to the page including header and footer, Text editor ribbon actions cause page to automatically scroll down (while applying formatting).
I try to apply full scroll bar to the page including header and footer, the ribbon is missing after I scroll down to the web part. And I cannot apply the "Paragraph" markup style to the content.
I recommend to use the SharePoint core styles to preserve the native functionality and GUI.
By design in SharePoint, the ribbon is always at the top. When you select the content, you can apply the "Paragraph" markup style in the ribbon.
Thanks,
Linda Li
Forum Support
Please remember to mark the replies as answers if they help and unmark them if they provide no help. If you have feedback for TechNet Subscriber Support, contact
[email protected]
Linda Li
TechNet Community Support

I can no longer scroll anywhere on the page by clicking on the red mouse pointer and the middle mouse tab on the laptop

Prior to upgrading to version 4 of Firefox, I was able to scroll anywhere on a page by holding the red mouse button and the middle mouse tab on my laptop. Now, in order to scroll on a page, I need to click on the sliding bar at the right of the page whereas, I was able to do both before the upgrade.

Since today the scrolling started to work for me. Was there a fix auto installed? I havent updated anything that I know about.
I might have uninstall an old Java JRE, don't remember when I did it, could that have done it?

Where is the Scroll bar of the page?

Hello,
When I start doing my website on Flex 4 using flash builder eclipse plugin, and when I test my pages how they looks I can't see the scroll bar to to see the buttom of the page!! well I thought can be a bug or something but until now I still unable to see the buttom of the pages !
I read this http://stackoverflow.com/questions/4627659/flex-4-scroller-skin, but I didn't understand what should I do exactely !
should I create my scroll bar manually to be able to make a scroll ?
Please I need a solution
Anyone !

see an example in action:
http://trumpboston.com/helpothers/example03521/scroll.html
it came from this example source code:
http://blog.flexexamples.com/2010/11/03/adding-scroll-bars-to-an-spark-application-contain er-in-flex-4/
the first module make it be your application mxml
the second one, under your src directory, create a "skins" folder and save in there the file:
skins/CustomScrollingApplicationSkin.mxml
notice the slider on the top that will increase the height of your content to show the scrollbar jumping around in its height.

Safari self scrolling back up the page

When browsing through newspapers and scrolling down several lines, the screen will go up to the beginning of the page constantly. How can I avoid it?

Do they still occur if you restart the system?
Is there a particular event that triggers them to occur (eg wake from sleep, specific applications, etc.)?
Did you make any changes or install any updates that coincided with the onset of the gray lines?

Why is the preview taking elements away and stretching the page?

I am running Mac Mountain Lion with Muse. I have a footer bar with an image in the middle. It shows up fine with my other pages but on the newest pages I make, it disappears and stretches the page out beyond my minimum page size.This only happens when I Preview it through Muse or a various browser. In the design portion of Muse, it looks fine. I have reset my page properties, created a fresh page, and changed the master that is applied to it, but it always does the same thing.
This is the design view, where the footer is displaying the correct image:
This is the Preview, where the footer is gone:
And browser view, footer also wrong:

Hey Owlpaca, did you forget to pin it as a footer item? Yes, yes I did. Yup, forgot to pin it as a footer, that seems to fix my issue. Surprised it didn't give me issues on my early pages though.

Scroll scren at the top of page

Hi all,
I have a screen.in that scrren i having some mandatory fields.when we go down and wan tot go next screen and mandatory fields are initial.then it shows eror messages.
Now my query is that i want if any error message comes out then screen will automatically scrolled top of the page.
Suggess how is it posible.
Points will be sured max.
Thanks
Sanket sethi

Hi Sanketh,
Here you need to do two things.
1.Create a MessageArea UI element in the place where you want the error message to be displayed. MessageArea automatically displays the message caused by IWDMessageManager. If you want to focus on the error message.
2.Just below MessageArea create a LinkToAction UI element then create an action Focus (No code is needed in this). Then whenever you populate error message add this line of code.
wdThis.wdGetAPI().requestFocus(wdThis.wdGetFocusAction());
Feel free to get back if there is any issue.If you have resolved please mention solution also before closing this.
regards,
Siva

How to reset the data scroller to fist page, on load of the page.

Hello,
My requirements is to reset the datascroller to first in popup.
In popup page contains datatable and Save and Cancel button. Data SCroller functionality is implemeted for data table. Setting data scroller to first page is done for both Save and Cancel functionalities. And its working fine.
I'm facing problem when user navigates to next ot last option (i e other than first), and closes the popup using window close, and again try to open the popup, datascroller retains previous value.
So i wanna to set data scroller onload of the page , how to get the dataScroller compaonent in constructor with out Action Event. or any other alternative exists to reset datascroller to first.
Need help

Hey, I got a doubt that who will call the print method in the same program and what about the g.drawString() it is showing any output effect. Finally how the variable n will get initializing to 0 and 1 for two times respectively. Can u please elaborate on this...

Safari lion has small window that scrolls up from the bottom of the web page

Since up grading to Safari Lion (6.0.2) I get this window creeping up from the bottom of the web page.
That little window asks "searching for ....what ever I've typed in my google search engine...." and slowely scrolls up from the bottom of the web page. If I click just right on it it goes away to reappear on the next web page. If I click anywhere on it though it redirects to a rxlist page or some health page etc. Not related to my search at all.
Also, since upgrading the following have been recurring and prominate pain in the necks
1) I can't scroll down on the page using my mouse. Only with the up and down arrows
2) Sometimes when I type a querrie into my search engine line at the top of the brower, it auto redirects to some radom website. Again usually rxlist or vibes caster shop.com etc etc. It does not happen 100% of the time but 80%
3) When I am typing in my search querries, I can't backspace to delete. I have to highlight and retype the entire search.
4) i know I'm going to sound crazy but if I search in google for "safari ... problems" etc. all problems go away and I can surf to my heart's content. It's like as soon as I start complaining it knows and auto corrects!!
FYI I always delete all history, and cache using the "reset safari, and the develop tab and then empty caches.
Do I have a virus of some kind? What do I need to do? Anyone have similiar problems?
Thanks a million in advance for any of your help.
Kevin

Check out TonyE's answer found here: 
https://support.mozilla.com/en-US/questions/804377#answer-158895
He pretty much says you should install the Status-4-Evar addon: 
https://addons.mozilla.org/firefox/addon/status-4-evar
Once you install it, check its options and there should be a setting to turn off that small popup box. And I don't think you have to do the about:config part, that setting affects other popups that you probably want.

I just upgraded to 9.0.1 and when I use my touch pad to scroll down or up a page the page jumps to another tab. How do I remove 9.0.1?

I am using a MacBookPro, OS X 10.7.2. I am unable to use the touch pad to scroll without having the page jump to another tab. This is annoying and the only way I can navigate any more is to use the scroll bar on the right side of the page. I would like to remove the most recent upgrade, any ideas on how I can do that?

When you upgraded, itunes should have put a copy of the itunes library database in a folder named *Previous iTunes Libraries* . If you upgraded itunes today it will show as
iTunes Library 2010-02-28.itl
Use these directions to get it back
http://support.apple.com/kb/TS1967
Since I am not sure of your setup, look for the "Previous" folder on both your C: and F: drives.

Removing scroll bar from product pages

I need to remove the scroll bar that appears on the product pages. It doesn't matter if I have only one product or 100 on the page with the small images, I still get a scroll bar on the right side. I've tried adding and removing margins and padding, set the container height to auto, and removed the previous and next buttons from the shop templates, all to no avail. It appears to be caused by the table that holds the products, but no change to the code fixes it.
I have included a screen print of the top of the page showing the scroll bar. There are only 3 images on this page and plenty of room below them. Overflow has been set to auto (and/or visible) on the container, the table, and the page.
So, can anyone tell me how to shut off that scroll bar? I can't find that code that includes it so I can't see what's going on.
Thank you for you help.
Sincerely,
Ahurani

Liam,
Thank you for answering.
I didn't want to turn the scroll bar on the page off, but the scroll bar that appears in a div container. I finally solved the problem by turning overflow: auto to overflow: hidden. And smacked myself in the forehead and said, "Duh. I knew that." Too tired and too close to the problem I guess.
The only other thing I can't seem to find is the large space that appears above a product table. I've tried everything from margins to padding and beyond.
Sorry about not including the url. I have used the forum so rarely that I didn't think of that. It is www.whimsicalley02.businesscatalyst.com, just in cases you want to look at the big space on Harry Potter > Accessories and on the large product page. I'd love to tuck the product closer to the breadcrumb, but if that is not possible, then c'est la vie.
Thank you.

When snapping a rectangle to the top of the page left space between rectangle disappears in the preview (not in the design mode)

I think the image looks more descriptive than my words actually.. When I move the first rectangle to the top of the page the gradient background disappear in the preview (on the right side of the screen), even though I still can see that in my Design Mode (left handside). Everytime the top rectangle snaps to the top of the page the second rectangle snaps to the first one in the preview (both muse preview and browser preview)...Any help?

Seems you have applied scroll on second rectangle with key position setup on top of the page edge as a result when page edge is reached the second rectangle scrolls up on the page.
If this is not the case then please provide more details.
Thanks,
Sanjit

Making an element scroll independently of the page

Similar Messages

Maybe you are looking for