Creating a horizontal scroll for mobile

I'm trying to create a horizontal scroll through a list of icons for a mobile webpage. Not sure if this is possible, but would love to know if it is!

Can you add some example as what exactly you are trying to achieve ?
Thanks,
Sanjit

Similar Messages

Horizontal Scroll for Apex 4

I need horizontal scroll for a page in Apex 4. I saw an old thread about horizontal scroll using Apex 3.2. Below is the link for that thread where vee gave some plugin code to achieve this scrolling:
horizontal bar Scroolling.
I saved the code in the thread as js file and tried to import it as a plugin but the import was unsuccessful saying that was not a plugin file.
Has anybody done it in Apex 4? I will be grateful for guidance to achieve this.
Thanks

Hi,
For horizontal scroll copy your theme 15 standard report theme to new name.
Change template Before Rows to
<table summary="" cellspacing="0" id="report_#REGION_STATIC_ID#">
<tr>
<td>
<table class="t15standard" summary="" cellspacing="0" #REPORT_ATTRIBUTES#>And template After Rows to
</td></tr></table>
<tr>
    <td colspan="99" class="t15afterrows">
        <span class="left">#EXTERNAL_LINK##CSV_LINK#</span>
        <table style="float:right;text-align:right;" summary="pagination">#PAGINATION#
</table>
    </td>
</tr></table>Horizontal/Vertical scroll, you need create same kind custom template I have in sample application for page 1 report
Regards,
Jari
Edited by: jarola on Apr 20, 2011 5:56 PM

Creating a Horizontally Scrolling Gallery in Muse

I need to create a horizontally scrolling gallery, something that shows four images at a time, and automatically scrolls through said images, a total of about twenty images.
The end result my client wants is for the gallery to show four images, highlight each one at time, and then scroll in the next four, but I don't even see a way to just create a simple scrolling gallery in muse.
Is there any way to do this? Any suggestions for something I can drop into muse to make this happen? I have seen several people ask this question, but it never seems to get any answers, and google has been less than enlightening on this.
Thanks.

Hi Julia,
I understand that I can tooltip over them, but what I'm looking for is something that will allow me to do something like this example on the main page for Lionsgate.com. The functionality I want is to be able to present the player with a menu of thumbnail buttons which will change a main display, very much like what you illustrated above. What is different, however, is that I want the user to be able to SCROLL a list of thumbnails which are contained within a menu window. In this way, if I wanted to have links to twenty or fifty or a hundred buttons/thumbnails, I can present the player with only a few at a time without completely cluttering the interface. They can use arrow keys to scroll up or down through the available thumbnails. It's a very common interface, and Apple uses the ribbon idea as part of their main interface.
Long story short, is it possible to replicate this with existing Muse widgets, or does someone know of a not-too crazy way to do this?
Thanks,
Neal

How to create a PDF Book for mobile devise

Hi looking at creating a PDF book for mobile device, the book will be a reflection of some of the content of our website http://www.khaolakexplorer.com/ , is there a way to create it automatically??

You can create a PDF from some or all of a web site in Acrobat.

How to create a flash button, for mobile phones?

i want to know the way how i can create a flash button for mobile in flash CS4.

Create a button of type "button",set the destination url property to the place u have kept the file.But ur file should be anywhere in Common_top.If this file is stored as blob u can use messagedownload bean.
--Mukul

CFLAYOUT (tab) - Horizontal Scrolling For Large Number of Tabs?

Greetings,
I have a cflayout inside of a cfwindow. It is a tab layout.
The number of tabs depends upon database content, so the potential
number of tabs could be unlimited -- although there usually won't
be a huge number of tabs. The problem is that when enough tabs are
created dynamically, the tabs on the far right are not
visible/accessible.
I was wondering if it is possible to trigger horizontal
scrolling (such as overflow in CSS) to allow the tabs to be
accessible. I would like to avoid using pagination or elaborate
math to fix a div. Seems like there should be a simpler solution.
Thanks in advance for any help.

I've had no problem restoring 20-40 tabs on a window and a few on another window.
Would suggest however that you set '''browser.sessionstore.max_concurrent_tabs''' to 0 in about:config
* reference: https://philikon.wordpress.com/2010/11/10/firefox-4-0b7-updates/
'''More information on configuration variables''' available in
[http://kb.mozillazine.org/About:config_entries about:config (entries)] and for users not familiar with the process there is [http://kb.mozillazine.org/About:config about:config (How to change)] -- Specialized list of only [http://dmcritchie.mvps.org/firefox/tabs_config.htm Tabs configuration] variables.
You can make Firefox 4.0.1 look like Firefox 3.6.17, see numbered items 1-10 in the following topic [http://dmcritchie.mvps.org/firefox/firefox-problems.htm#fx4interface Fix Firefox 4.0 toolbar user interface, problems (Make Firefox 4.0 look like 3.6)]

Horizontal scroll for Tree component scrolls too far right

I've enabled the horizontal scroll bar for the Tree component.
But the scroll bar allows the user to scroll very far to the right into blank space.
The maximum width of my components measures 124px, as calculated by measureWidthOfItems(0,0), and I've verified this by measuring pixels of a screen shot.
I have tried adding an event to set the Tree.maxHorizontalScrollPosition, and I traced the value that I'm setting it to, and I also traced the value that it actually assumed after I set it. Both are 124px.
So I can't understand the behavior. I can scroll something more like ~400px to the right with lots of blank space.
Any ideas why?
Thanks,
David

Hmm, I'm not sure why this works, but it works, so for completeness here's what I did (in case anyone else runs across this same thread):
var measWidth:Number = myTree.measureWidthOfItems(0,0);
filesTree.maxHorizontalScrollPosition = measWidth - myTree.width;
I call the above code whenever the window is resized (in my app there are 2 places that can cause a resize of the window, I manually added calls to a function with the above code). There is also an example out there that resizes any time the window is resized, but if you do this then you really can't have liveDragging=true in a DividedBox (which I have) because the cost of resizing is very high and overtaxes the cpu when called many times consecutively. I just call it when the dragging is finished (that way I have live dragging enabled, but it only updates the scroll bars when the user stops dragging, which is visually acceptable).

Creating a div just for mobile/tablet displays

I have a video set to autoplay on a site....it is an advertising video with no sound, so it's not intrusive. I added controls for mobile and tablet users, however I am finding that it is not ideal. So instead I would like to create a div that only mobile/tablet users see which contain all the same info in a small jpg instead. I thought that by simply creating a div called "fluid col3mobile" and then changing my css so that mobile and tablets only had that div defined it would ignore the div called "fluid col3" and point to the graphic instead of the video. However, I am finding that that is not working the way I imagined. What is a better way to accomplish my goal?

do you know if there is a way to make the account private on youtube?
You can't have it both ways. Either you post to YouTube and share your content with the world or you don't. If you want exclusive control over your videos, you need to find better web hosting. There's no excuse for tolerating sub-standard hosting with so many companies to choose from.
Lunarpages is based here in Southern California. Their basic plan gives you everything you'll need plus unlimited bandwidth at a very affordable price. Check it out.
Compare Web Hosting Services and Plans - Compare Web Hosting Companies | Lunarpages Web Hosting
Nancy O.

How do I turn off horizontal scrolling for Magic Mouse?

I tried a few of adjustments under preferences but nothing seems to work.

I have tried this three times... copying and pasting into Terminal, hitting "Return" and then restarting.. with no luck?
Horizontal scrolling is horrible while using In Design.
I have a new Retia iMac... could this be why Terminal isn't defeating the horizontal scrolling?
I'm ready (very ready) to go back to my Microsoft Mouse with much less touchy horizontal scrolling.
Thanks!

Create version of iweb for mobile phone

Just wondering if I should do anything different, to create a version for use on mobile devices, such as phones.
As it is now, my site works (except for the one piece of flash), but it isn't a "true" mobile version. Is there anything I should or can do?
thanks

mac2112 wrote:
i'm still not sure what google sites are exactly.
Like Weebly, Google Sites is a free web-based website builder accessible from any internet connected computer.
mac2112 wrote:
If i've done my site in iweb, how would I implement this feature?
You would have to switch from iWeb to Google Sites, i.e. rebuild your website in Google Sites. A non web-based app that's "mobile friendly" is Freeway:
http://www.softpress.com/tour/ipad-and-iphone-support

How can I create a vertical scroll for text in a 'div' in CSS Dreamweaver?

Hi there,
I need to flow a lot of text into a CSS div. However, I don't want a big long page as it will look ugly and be inconsistent with the other pages in the site.
I need to be able to put in a vertical scroll directly in the div containing the text (not on the whole page) so the user can scroll the text down without moving down the whole page.
Is there a way for me to do this?
I'm a beginner to CSS so a step by step for dummies approach would be most helpful.
Thanks in advance for any help!

use the overflow:scroll property:
http://www.w3schools.com/Css/pr_pos_overflow.asp

How to Create a Horizontally Scrolling Portfolio

There are a couple of great portfolio sites in the Adobe Site of the Day with a series of images that move to the left as the user scrolls down. The one I like best is not a one page website. It has a navigation menu that stays pinned to the top and each page in the site stands on its own as in any other website. This is it: http://www.erickusters.nl/
I admit I'm a little crazy to be wanting to tackle something like this when I've never used parallax scrolling at all but, like this designer, I have worked in a wide variety of media and have a lot of work I want to present.
I have watched every tutorial I can find and played with the program a fair amount but I haven't been able to figure out how to achieve this. Somebody on one website suggested making the website extremely wide but I tried looking at this site's source code and it doesn't look like that's what he did. . . although the code was almost impossible for me to make heads or tails out of so I may have missed something. (I know html and basic css but this is beyond me.)
Any guidance on this?
Thanks!

Hello Bernd, thank you very much for response.Actually, What do u mean a package may be it can be helpful for me.....can ı manage my contracts with Package?

How to create an online fillable form for mobile devices, tablets and smartphones.

How can I create "online fillable forms" for Mobile devices, tablets and smarphones?
I already created an "online fillable form" with Adobe Acrobat XI Pro for PCs and MACs but this form can not be filled using mobile devices, it can only be downloaded.
Thanks.

Hi George,
I gather from your reply that I won't be able to create "online fillable forms" for Mobile devices with Adobe Acrobat XI Pro. Correct?
If Adobe does not have another software similar to Adobe Acrobat XI Pro, would you please suggest me any other means of creating "online fillable forms" for Mobile devices?
Would you think that an HTML developed form would be a fair substitute for the PDF fillable forms that I use for PCs and MACs?
Thanks,
Alvaro

Horizontal Scrolling

Hey guys, I'm trying to make a section of my web page scroll horizontally. I have found several working examples of this but they all make the entire <body> tag scrollable. I want just the blue outlined section in the following image to scroll and for everything else, including the background, to stay fixed to the page.
You can visit the live site at http://www.kylelord.com. I will also include the code to the body section here to make it easier but you can view the source on the live site if you'd rather.
<body>
<div id="container">
          <div id="header"></div>
    <div id="content">
                    <div id="about">
                              <div id="aboutHead"></div>
                              <div id="aboutBody">
                      <p>Graphic designer in the Philadelphia and New York area.</p>
                      <p>Driven and hard-working person with an excellent sense of design.</p>
                      <p>Specialties include publication, advertising, and web.</p>
            </div>
                              <div id="contact">
            <p><a href="mailto:[email protected]"><img src="images/mail-02.png" /> [email protected]</a></p>
            <p>   <img src="images/phone-02.png" />     <span class="mobile"><a href="tel:18459268873">845.926.8873</a></span></p></div>
                    </div>
                    <div id="featured">
                        <div id="featuredHead"></div>
                          <div id="row1">
                      
                            <span class="imagePlaceholder"><a href="images/portfolio/fullsize/ps3_1.png" rel="lightbox[ps3]" title="Playstation 3 Ad Campaign"><img src="images/portfolio/thumbs/ps3_thumb.png" class="imageCenter" /></a>
                          <a href="images/portfolio/fullsize/ps3_2.png" rel="lightbox[ps3]" title="Playstation 3 Ad Campaign"></a>
                    <a href="images/portfolio/fullsize/ps3_3.png" rel="lightbox[ps3]" title="Playstation 3 Ad Campaign"></a>
                </span>
                
                <span class="imagePlaceholder"><a href="images/portfolio/fullsize/mod1.png" rel="lightbox[modern]" title="The Modern Restaurant Identity and Menu | Dinner Menu"><img src="images/portfolio/thumbs/modern_thumb-02.png" class="imageCenter" /></a>
                          <a href="images/portfolio/fullsize/mod2.png" rel="lightbox[modern]" title="The Modern Restaurant Identity and Menu | Dinner Menu"></a>
                    <a href="images/portfolio/fullsize/mod3.png" rel="lightbox[modern]" title="The Modern Restaurant Identity and Menu | Dinner Menu"></a>
                    <a href="images/portfolio/fullsize/mod4.png" rel="lightbox[modern]" title="The Modern Restaurant Identity and Menu | Drink Menu"></a>
                    <a href="images/portfolio/fullsize/mod5.png" rel="lightbox[modern]" title="The Modern Restaurant Identity and Menu | Drink Menu"></a>
                    <a href="images/portfolio/fullsize/mod6.png" rel="lightbox[modern]" title="The Modern Restaurant Identity and Menu | Dessert Menu"></a>
                    <a href="images/portfolio/fullsize/mod7.png" rel="lightbox[modern]" title="The Modern Restaurant Identity and Menu | Identity"></a>
                </span>
        </div>
                  <div id="row2">
                      
                            <span class="imagePlaceholder"><a href="images/portfolio/fullsize/lud1.png" rel="lightbox[lud]" title="Ludwig & Son's Corporate Identity"><img src="images/portfolio/thumbs/lud_thumb-02.png" class="imageCenter" /></a>
                          <a href="images/portfolio/fullsize/lud2.png" rel="lightbox[lud]" title="Ludwig & Son's Corporate Identity"></a>
                </span>
                
                <span class="imagePlaceholder"><a href="images/portfolio/fullsize/ed1.png" rel="lightbox[ed]" title="Alternative Press Editorial"><img src="images/portfolio/thumbs/ap_thumb-02.png" class="imageCenter" /></a>
                          <a href="images/portfolio/fullsize/ed2.png" rel="lightbox[ed]" title="Alternative Press Editorial"></a>
                          <a href="images/portfolio/fullsize/ed3.png" rel="lightbox[ed]" title="Alternative Press Editorial"></a>
                          <a href="images/portfolio/fullsize/ed4.png" rel="lightbox[ed]" title="Alternative Press Editorial"></a>
                </span>
                  </div>
                  <div id="row3">
                      
                            <span class="imagePlaceholder"><a href="images/portfolio/fullsize/ad1.png" rel="lightbox[kindle]" title="Kindle Advertising Campaign"><img src="images/portfolio/thumbs/ad_thumb-02.png" class="imageCenter" /></a>
                          <a href="images/portfolio/fullsize/ad2.png" rel="lightbox[kindle]" title="Kindle Advertising Campaign"></a>
                    <a href="images/portfolio/fullsize/ad3.png" rel="lightbox[kindle]" title="Kindle Advertising Campaign"></a>
                    <a href="images/portfolio/fullsize/ad4.png" rel="lightbox[kindle]" title="Kindle Advertising Campaign"></a>
                </span>
                
                <span class="imagePlaceholder"><a href="images/portfolio/fullsize/cal1.png" rel="lightbox[calendar]" title="Circular Typographic Calendar"><img src="images/portfolio/thumbs/cal_thumb-02.png" class="imageCenter" /></a>
                          <a href="images/portfolio/fullsize/cal2.png" rel="lightbox[calendar]" title="Circular Typographic Calendar"></a>
                    <a href="images/portfolio/fullsize/cal3.png" rel="lightbox[calendar]" title="Circular Typographic Calendar"></a>
                    <a href="images/portfolio/fullsize/cal4.png" rel="lightbox[calendar]" title="Circular Typographic Calendar"></a>
                    <a href="images/portfolio/fullsize/cal5.png" rel="lightbox[calendar]" title="Circular Typographic Calendar"></a>
                    <a href="images/portfolio/fullsize/cal6.png" rel="lightbox[calendar]" title="Circular Typographic Calendar"></a>
                    <a href="images/portfolio/fullsize/cal7.png" rel="lightbox[calendar]" title="Circular Typographic Calendar"></a>
                    <a href="images/portfolio/fullsize/cal8.png" rel="lightbox[calendar]" title="Circular Typographic Calendar"></a>
                    <a href="images/portfolio/fullsize/cal9.png" rel="lightbox[calendar]" title="Circular Typographic Calendar"></a>
                    <a href="images/portfolio/fullsize/cal10.png" rel="lightbox[calendar]" title="Circular Typographic Calendar"></a>
                    <a href="images/portfolio/fullsize/cal11.png" rel="lightbox[calendar]" title="Circular Typographic Calendar"></a>
                    <a href="images/portfolio/fullsize/cal12.png" rel="lightbox[calendar]" title="Circular Typographic Calendar"></a>
               </span>
        </div>
              </div>
        <div id="caseStudy">
                  <div id="type">
            <h1><a href="marfan.html" title="National Marfan Foundation">Click</a></h1>
            <h2>this guy to hear his story</h2>
            </div>
            <div id="stick">
            <a href="marfan.html" title="National Marfan Foundation"><img src="images/stick.png" onmouseover="this.src='images/stick-over.png'" onmouseout="this.src='images/stick.png'" /></a>
            </div>
        </div>
    </div>
    <div id="footer">
              <div id="downloads">
        <h1>Downloads</h1>
        <p><a href="downloads/KyleLord_portfolio.pdf">Portfolio</a></p>
        <p><a href="downloads/KyleLord_resume.pdf">Resume</a></p>
        </div>
        <div id="contactlinks">
        <h1>Contact</h1>
        <p><a href="mailto:[email protected]">[email protected]</a></p>
        <p><span class="mobile"><a href="tel:18459268873">845.926.8873</a></span></p>
        </div>
        <div id="copyright">
        <a href="http://www.facebook.com/eyeamthekiller0" target="_blank"><img src="images/facebook.png"/></a>
        <a href="https://twitter.com/#!/Kyle_Design" target="_blank"><img src="images/twitter.png" /></a>
        <a href="http://www.linkedin.com/pub/kyle-lord/32/a94/125" target="_blank"><img src="images/linkedin.png" /></a>
        <p>© 2012 Kyle Lord.</p>
        </div>
    </div>
    <div id="underFooter"></div>
</div>
</body>
After researching horizontal scrolling on some sites it seems that I will have to use JQuery to add a "smooth scrolling" effect the page. I also plan to add a link that will lead to an anchor that will exist outside of the visible area (to the right), that is when I plan for the scrolling effect to take place. I want it to animate by scrolling from right to left all the way to the anchor that is linked to. Here are some links to sites I have read up about it on. They also demonstrate the type of effect that I want.
http://www.sitepoint.com/side-scrolling-site-layout-with-css-and-jquery/
http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-j query/
http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/
It may be an easy fix but I don't have much experience with JavaScript or JQuery. Any help or ideas would be appreciated. I would not object to alternate ideas.
-Kyle
Graphic Designer
[email protected]

Place all you want to scroll inside of a movieclip, and give it a instace of dragMe, then paste this code into your timeline
var ease:int = 6;
var targY:int = dragMe.x;
var drag:Boolean = false;
var ptY:Number = 0;
dragMe.addEventListener(Event.ENTER_FRAME, dragHandler, false, 0, true);
dragMe.addEventListener(MouseEvent.MOUSE_DOWN, downHandler, false, 0, true);
stage.addEventListener(MouseEvent.MOUSE_UP, upHandler, false, 0, true);
function dragHandler(e:Event):void
          if (drag)
                    targY = mouseX + ptY;
          e.target.x += (targY - e.currentTarget.x) / ease;
function upHandler(event:MouseEvent):void
          drag = false;
function downHandler(e:MouseEvent):void
          ptY = e.currentTarget.x - mouseX;
          drag = true;

Left Aligning an Anchor object in a horizontal scroll

I'm sure the answer to this is going to be so simple I'll be forced to learn how to kick myself.
I have a website that contains a static header section and a table row that contains a number of pictures in a horizontal scroll. The rest of the page does not scroll, just this one table row.
I want to be able to designate some of the pictures as the starting point for a new section.   So I created an reference link at the top of the page,
<a href="#portraits">PORTRAITS</a>
and then designated one of the pictures to be the target
Start of table row
<table><tr>
<td>...........pictures
<td><a name="portraits">
<img src="gallery/5a.gif" alt="" class="transparent5" /></a>
<p class="notes">PORTRAITS</p>
<p class="title">→ </p></td>
<td>
........continues on,
So the question is, once a user clicks the reference how can I ensure the target aligns on the left side of the page?    currently what is happening is it is just being brought into view on the right hand side.     This isn't the estetic the site owner wants.
Thanks for looking.

Hi Nancy, (or anyone else with input )
I can't seem to invoke the horizontal scroll for the site. It may be because I have the scrolling in a single table within the body and the script seems to be calling out the full <body> tag for the target.
my feeble attempt is here - http://www.lightmonkey.ca/indexjs.html
The button list looks like this,
<ul id="nav" class="scroll" >
    <a href="#portraits">PORTRAITS </a>
    <a href="#performance">PERFORMANCE    </a>
    <a href="#editorial">LIFESTYLE + EDITORIAL    </a>
    <a href="#industrial">INDUSTRIAL </a>
    <span class="style6"><a href="http://lightmonkeyphotography.wordpress.com/" target="_blank">BLOG  </a></span>
    <a href="#contact">CONTACT </a></ul></td>
So I think the JS function will call 'ul.scroll' according to the syntax from the tutorial site, (bold in snippet at bottom)
The start of the scrolling table looks like this,
<div id="main"><div id="gallery">
<table><tr>
<td><a name="portraits">
<img src="gallery/5.gif" alt="" class="transparent5" /></a>
<p class="notes">PORTRAITS</p>
<p class="title">→ </p></td>
<td>
etc
so what would be the function target? (target, my term, also in bold in the snippet below)

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript" src="reffile/easing.js"></script>
        <script type="text/javascript">
            $(function() {
                $('ul.scroll a').bind('click',function(event){
                    var $anchor = $(this);
                    if you want to use one of the easing effects:
                    $('html, body').stop().animate({
                        scrollLeft: $($anchor.attr('href')).offset().left
                    }, 1500,'easeInOutExpo');
                    $('html, main').stop().animate({
                        scrollLeft: $($anchor.attr('href')).offset().left
                    }, 1000);
                    event.preventDefault();
        </script>
Any suggestions on this?
Thanks again! tried to just figure it out but 3 dozen combinations have not worked out....

Creating a horizontal scroll for mobile

Similar Messages

Maybe you are looking for