Caitlin-havener Posted January 21, 2012 Share Posted January 21, 2012 I don't know if someone could figure this out... it should be pretty simple. My buttons are supposed to be grouped horizontally at the following link but aren't for some reason: http://sulley.dm.ucf...1/project1.html What Im trying to do: http://jquerymobile....ns-grouped.html (bottom of page) Code of buttons to group together horizontally: <div data-role="controlgroup" data-type="horizontal"> <a href="#frame1" data-icon="arrow-l" data-role="button">Back</a> <a href="#frame3" data-icon="arrow-r" data-iconpos="right" data-role="button">Next</a> </div> Whole thing: <!DOCTYPE html><html><head><title>Garfield</title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /><link rel="stylesheet" href="mystyle.css" /><script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script><script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script></head><body><!-- Start of first frame --><div data-role="page" data-theme="b" id="frame1"><div data-role="content" class="page_content"> <div data-role="header" data-theme="b" class="header"> <h1>Garfield</h1> </div><!-- /header --> <img src="img/frame1_img.jpg" alt="frame1_img" <div data-role="controlgroup" data-type="horizontal"> <a href="#frame2" data-icon="arrow-r" data-iconpos="right" data-role="button">Next</a> </div></div><!-- /content --></div><!-- /page --> <!-- Start of second frame --><div data-role="page" data-theme="b" id="frame2"><div data-role="content" class="page_content"> <div data-role="header" data-theme="b" class="header"> <h1>Garfield</h1> </div><!-- /header --> <img src="img/frame2_img.jpg" alt="frame2_img" <div data-role="controlgroup" data-type="horizontal"> <a href="#frame1" data-icon="arrow-l" data-role="button">Back</a> <a href="#frame3" data-icon="arrow-r" data-iconpos="right" data-role="button">Next</a> </div></div><!-- /content --></div><!-- /page --> <!-- Start of third frame --><div data-role="page" data-theme="b" id="frame3"><div data-role="content" class="page_content"> <div data-role="header" data-theme="b" class="header"> <h1>Garfield</h1> </div><!-- /header --> <img src="img/frame3_img.jpg" alt="frame3_img" <div data-role="controlgroup" data-type="horizontal"> <a href="#frame2" data-icon="arrow-l" data-role="button">Back</a> <a href="#frame4" data-icon="arrow-r" data-iconpos="right" data-role="button">Next</a> </div></div><!-- /content --></div><!-- /page --><!-- Start of fourth frame --><div data-role="page" data-theme="b" id="frame4"><div data-role="content" class="page_content"> <div data-role="header" data-theme="b" class="header"> <h1>Garfield</h1> </div><!-- /header --> <img src="img/frame4_img.jpg" alt="frame4_img" <div data-role="controlgroup" data-type="horizontal"> <a href="#frame3" data-icon="arrow-l" data-role="button">Back</a> <a href="#frame5" data-icon="arrow-r" data-iconpos="right" data-role="button">Next</a> </div></div><!-- /content --></div><!-- /page --><!-- Start of five frame --><div data-role="page" data-theme="b" id="frame5"><div data-role="content" class="page_content"> <div data-role="header" data-theme="b" class="header"> <h1>Garfield</h1> </div><!-- /header --> <img src="img/frame5_img.jpg" alt="frame5_img" <div data-role="controlgroup" data-type="horizontal"> <a href="#frame4" data-icon="arrow-l" data-role="button">Back</a> <a href="#frame6" data-icon="arrow-r" data-iconpos="right" data-role="button">Next</a> </div></div><!-- /content --></div><!-- /page --><!-- Start of six frame --><div data-role="page" data-theme="b" id="frame6"><div data-role="content" class="page_content"> <div data-role="header" data-theme="b" class="header"> <h1>Garfield</h1> </div><!-- /header --> <img src="img/frame6_img.jpg" alt="frame6_img" <div data-role="controlgroup" data-type="horizontal"> <a href="#frame5" data-icon="arrow-l" data-role="button">Back</a> </div></div><!-- /content --></div><!-- /page --> </body></html> Link to comment Share on other sites More sharing options...
Ingolme Posted January 21, 2012 Share Posted January 21, 2012 Your problem is unclosed image tags: <img src="img/frame3_img.jpg" alt="frame3_img"> Link to comment Share on other sites More sharing options...
amitamberker Posted January 21, 2012 Share Posted January 21, 2012 Hello Caitlin, So, did you made this: <img src="img/frame1_img.jpg" alt="frame1_img"<img src="img/frame2_img.jpg" alt="frame2_img"<img src="img/frame3_img.jpg" alt="frame3_img"<img src="img/frame4_img.jpg" alt="frame4_img"<img src="img/frame5_img.jpg" alt="frame5_img"<img src="img/frame6_img.jpg" alt="frame6_img"as this? <img src="img/frame1_img.jpg" alt="frame1_img"><img src="img/frame2_img.jpg" alt="frame2_img"><img src="img/frame3_img.jpg" alt="frame3_img"><img src="img/frame4_img.jpg" alt="frame4_img"><img src="img/frame5_img.jpg" alt="frame5_img"><img src="img/frame6_img.jpg" alt="frame6_img"> Link to comment Share on other sites More sharing options...
Caitlin-havener Posted January 21, 2012 Author Share Posted January 21, 2012 Wow Im slow sometimes. Thanks guys! Link to comment Share on other sites More sharing options...
amitamberker Posted January 23, 2012 Share Posted January 23, 2012 Wow Im slow sometimes. Thanks guys! Hi Caitlin,You are welcome. No worries if you are slow sometimes. But please NEVER... NEVER... NEVER... stop. Link to comment Share on other sites More sharing options...
Caitlin-havener Posted January 24, 2012 Author Share Posted January 24, 2012 LOL for sure! This is what I've got now http://sulley.dm.ucf.edu/~ca081919/DIG4104c/project1/project1.html I want to make a menu underneath it to display different comics you can go to. I want to make it scrollable with your finger... BUT also seperate from the currently shown comic (so you can scroll the menu but not the current comic or vice versa). Anywhere i can find this reference? Thanks Link to comment Share on other sites More sharing options...
Caitlin-havener Posted January 26, 2012 Author Share Posted January 26, 2012 Anyone? Link to comment Share on other sites More sharing options...
thescientist Posted January 26, 2012 Share Posted January 26, 2012 you could do something like I did here, which just by coincidence happens to work on my iphone and supports internal scrolling with my finger. (it's my first site from a few years ago, so be gentle)http://www.seasonsnh.../amenities.html All it really is a horizontal list inside a fixed width <div> who's overflow is set to scroll (I think). The real CSS from cssplay was getting the thumbnails to change the bigger picture, but you don't really need that. I would suggest this as it is just basic HTML/CSS and doesn't require any scripts/plugins/etc. Or, I found these couple of links, depending on what road you feel like going down. http://cubiq.org/iscroll-4http://stackoverflow...scrolling-lists Link to comment Share on other sites More sharing options...
Caitlin-havener Posted January 29, 2012 Author Share Posted January 29, 2012 ehh it has to be in jquery mobile meh! i mean i can add the scrolling list to each page frame of the 'comic' but that would just be repetitive i think. Link to comment Share on other sites More sharing options...
Caitlin-havener Posted January 29, 2012 Author Share Posted January 29, 2012 Hmm actually the professors example seems to just be javascript of swiping at least <script type="text/javascript"> $('div.ui-page').live("swipeleft", function(){ var nextpage = $(this).next('div[data-role="page"]'); // swipe using id of next page if exists if (nextpage.length > 0) { $.mobile.changePage(nextpage, 'slide'); } }); $('div.ui-page').live("swiperight", function(){ var prevpage = $(this).prev('div[data-role="page"]'); // swipe using id of next page if exists if (prevpage.length > 0) { $.mobile.changePage(prevpage, 'slide', true); } });</script> Let me get in the groove of this and ill get back to ya ;-) Link to comment Share on other sites More sharing options...
Caitlin-havener Posted January 29, 2012 Author Share Posted January 29, 2012 Wow my brain is seriously down today. Used the iScroll4... can't get the menu to scroll horizontal (see the kitten placeholders: http://sulley.dm.ucf.edu/~ca081919/DIG4104c/project1/project1.html)Please help????? And after putting iscroll in, you can no longer swipe to go to the next page... which was going to ###### anyways because I was going to have to put the scrollable menu on all of the pages. Code <!DOCTYPE html><html><head><title>Garfield</title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /><link rel="stylesheet" href="mystyle.css" /><script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script><script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script><!--Scroll capability in menu--><script type="application/javascript" src="iscroll.js"></script> <script type="text/javascript"> var myScroll; function loaded() { myScroll = new iScroll('wrapper', { hScroll: true }); }document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);/* * * * * * * *** Use this for high compatibility (iDevice + Android)**/document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);/** * * * * * * *//* * * * * * * *** Use this for iDevice only**///document.addEventListener('DOMContentLoaded', loaded, false);/** * * * * * * *//* * * * * * * *** Use this if nothing else works**///window.addEventListener('load', setTimeout(function () { loaded(); }, 200), false);/** * * * * * * */ </script> <!-- SCROLL THE COMIC FRAMES--><script type="text/javascript"> $('div.ui-page').live("swipeleft", function(){ var nextpage = $(this).next('div[data-role="page"]'); // swipe using id of next page if exists if (nextpage.length > 0) { $.mobile.changePage(nextpage, 'slide'); } }); $('div.ui-page').live("swiperight", function(){ var prevpage = $(this).prev('div[data-role="page"]'); // swipe using id of next page if exists if (prevpage.length > 0) { $.mobile.changePage(prevpage, {transition:"slide", reverse:true}); } }); function viewOthers(){ var viewOtherCartoons = $(this).next('li'); if (nextpage.length > 0) { $.mobile.changePage(viewOtherCartoons, 'slide'); } </script></head><body><!-- Start of first frame --><div data-role="page" data-theme="b" id="frame1"><div data-role="content" class="page_content"> <div data-role="header" data-theme="b" class="header"> <h1>Garfield</h1> </div><!-- /header --> <img src="img/frame1_img.jpg" alt="frame1_img"> <div data-role="controlgroup" data-type="horizontal" class="controlgroup"> <a href="#frame2" data-icon="arrow-r" data-iconpos="right" data-role="button">Next</a> <p>Or swipe left and right</p> </div> <div id="wrapper"> <div id="scroller"> <ul> <li><img src="http://placekitten.com/100/100" /></li> <li><img src="http://placekitten.com/100/100" /></li> <li><img src="http://placekitten.com/100/100" /></li> <li><img src="http://placekitten.com/100/100" /></li> <li><img src="http://placekitten.com/100/100" /></li> <li><img src="http://placekitten.com/100/100" /></li> <li><img src="http://placekitten.com/100/100" /></li> <li><img src="http://placekitten.com/100/100" /></li> </ul> </div> </div></div><!-- /content --></div><!-- /page --><!-- Start of second frame --><div data-role="page" data-theme="b" id="frame2"><div data-role="content" class="page_content"> <div data-role="header" data-theme="b" class="header"> <h1>Garfield</h1> </div><!-- /header --> <img src="img/frame2_img.jpg" alt="frame2_img"> <div data-role="controlgroup" data-type="horizontal" class="controlgroup"> <a href="#frame1" data-icon="arrow-l" data-role="button">Back</a> <a href="#frame3" data-icon="arrow-r" data-iconpos="right" data-role="button">Next</a> <p>Or swipe left and right</p> </div></div><!-- /content --></div><!-- /page --><!-- Start of third frame --><div data-role="page" data-theme="b" id="frame3"><div data-role="content" class="page_content"> <div data-role="header" data-theme="b" class="header"> <h1>Garfield</h1> </div><!-- /header --> <img src="img/frame3_img.jpg" alt="frame3_img"> <div data-role="controlgroup" data-type="horizontal" class="controlgroup"> <a href="#frame2" data-icon="arrow-l" data-role="button">Back</a> <a href="#frame4" data-icon="arrow-r" data-iconpos="right" data-role="button">Next</a> <p>Or swipe left and right</p> </div></div><!-- /content --></div><!-- /page --><!-- Start of fourth frame --><div data-role="page" data-theme="b" id="frame4"><div data-role="content" class="page_content"> <div data-role="header" data-theme="b" class="header"> <h1>Garfield</h1> </div><!-- /header --> <img src="img/frame4_img.jpg" alt="frame4_img"> <div data-role="controlgroup" data-type="horizontal" class="controlgroup"> <a href="#frame3" data-icon="arrow-l" data-role="button">Back</a> <a href="#frame5" data-icon="arrow-r" data-iconpos="right" data-role="button">Next</a> <p>Or swipe left and right</p> </div></div><!-- /content --></div><!-- /page --><!-- Start of five frame --><div data-role="page" data-theme="b" id="frame5"><div data-role="content" class="page_content"> <div data-role="header" data-theme="b" class="header"> <h1>Garfield</h1> </div><!-- /header --> <img src="img/frame5_img.jpg" alt="frame5_img"> <div data-role="controlgroup" data-type="horizontal" class="controlgroup"> <a href="#frame4" data-icon="arrow-l" data-role="button">Back</a> <a href="#frame6" data-icon="arrow-r" data-iconpos="right" data-role="button">Next</a> <p>Or swipe left and right</p> </div></div><!-- /content --></div><!-- /page --><!-- Start of six frame --><div data-role="page" data-theme="b" id="frame6"><div data-role="content" class="page_content"> <div data-role="header" data-theme="b" class="header"> <h1>Garfield</h1> </div><!-- /header --> <img src="img/frame6_img.jpg" alt="frame6_img"> <div data-role="controlgroup" data-type="horizontal" class="controlgroup"> <a href="#frame5" data-icon="arrow-l" data-role="button">Back</a> <p>Or swipe left and right</p> </div></div><!-- /content --></div><!-- /page --></body></html> CSS if its relevant: .header{ max-width:400px;}div a{ max-width:400px;}img{ width:100%; max-width:400px;}.page_content{ margin-left:auto; margin-right:auto;}.controlgroup a{ width:50%; max-width:200px; font-size:100%;}.controlgroup{ white-space:nowrap; } ul li{ padding:10px; display:inline;}#wrapper{ margin:-10px; width:100%; max-width:400px; height:140px; overflow:auto; white-space:nowrap;}ul li img{ width:100px; height:100px; } Link to comment Share on other sites More sharing options...
dsonesuk Posted January 29, 2012 Share Posted January 29, 2012 I'm using Opera mobile emulator and added the jquery code you provided to your original html garfield page, and it works fine! Link to comment Share on other sites More sharing options...
dsonesuk Posted January 29, 2012 Share Posted January 29, 2012 Are you allowed to use jquery .animate() to cause a scroll effect for images? also positioning position: relative; position: absolute, as you would use these to produce a scroll effect normally. Link to comment Share on other sites More sharing options...
thescientist Posted January 30, 2012 Share Posted January 30, 2012 Looking in the console, I see there is a Javascript error on line 77. Looks like you are missing a closing }. I can't do anything with the pictures on my iPhone possibly due that error not allowing the page to render all the way. Link to comment Share on other sites More sharing options...
Caitlin-havener Posted January 30, 2012 Author Share Posted January 30, 2012 Would have been a good idea to look at the error console huh haha Link to comment Share on other sites More sharing options...
Caitlin-havener Posted January 30, 2012 Author Share Posted January 30, 2012 Kay, I fixed what you said, and now the swipe works simutaneously with the scrolling menu. My brain is working a little better this morning, and I suddenly see how to fix the not scrolling horizontal part... I just adjusted the width of the #scroller container. But now... lol... I need to turn swipe off for the scrollable menu so that it just scrolls the menu and doesn't change to the next page... and any suggestions for repeating the menu accross all pages without a copy/paste (I tried a document.write function but wasn't working for me). Tard much? I know. Dsonesuk... Your suggestion is awesome but I'm scared to delve into another method because this is due by the end of today!! <3 Link to comment Share on other sites More sharing options...
thescientist Posted January 30, 2012 Share Posted January 30, 2012 hmm, it stinks I can't see the kittens on my iPhone so I can't quite test the horizontal scrolling. Can't quite test it the same way on the web... Link to comment Share on other sites More sharing options...
thescientist Posted January 30, 2012 Share Posted January 30, 2012 Maybe something you could do it determine the focus so that when the swipe event gets executed, if the user was touching the bottom area with the kittens, the swipe animation wouldn't happen. So basically, if there's a way to get the current focus, or current element focused on when the users finger touches the screen, you can check if it's the kittens or not, and if it is, keep the swipe from happening. Link to comment Share on other sites More sharing options...
thescientist Posted January 30, 2012 Share Posted January 30, 2012 I'll include pieces from our external conversation. Instead of focus checking, look into preventing the iScroll events from bubbling up perhaps. http://www.quirksmod...ents_order.htmlhttps://developer.mozilla.org/en/DOM/element.addEventListener see if setting useCaptcher to true, makes a difference document.addEventListener('touchmove', function (e) { e.preventDefault(); }, true); Link to comment Share on other sites More sharing options...
thescientist Posted January 30, 2012 Share Posted January 30, 2012 maybe something like var scroller = document.getElementById('scroller');scroller.addEventListener('touchmove', function (e) { e.preventDefault(); }, true); Link to comment Share on other sites More sharing options...
Caitlin-havener Posted January 30, 2012 Author Share Posted January 30, 2012 Is that to replace anything? I just put it in there and it disabled the scroll. Or is it supposed to replace var myScroller? Link to comment Share on other sites More sharing options...
Caitlin-havener Posted January 30, 2012 Author Share Posted January 30, 2012 ah im replacing document.addEventListener('touchmove', function (e) { e.preventDefault(); }, true); ? Link to comment Share on other sites More sharing options...
Caitlin-havener Posted January 30, 2012 Author Share Posted January 30, 2012 It disables the scroll capability regardless Link to comment Share on other sites More sharing options...
Caitlin-havener Posted January 30, 2012 Author Share Posted January 30, 2012 http://sulley.dm.ucf.edu/~ca081919/DIG4104c/project1/project1.html Main file<!DOCTYPE html><html><head><title>Garfield</title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /><link rel="stylesheet" href="mystyle.css" /><link rel="stylesheet" href="themes/comic.min.css" /><script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script><script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script><!--Scroll capability in menu--><script type="application/javascript" src="iscroll.js"></script> <script type="text/javascript">var myScroll; function loaded() { myScroll = new iScroll('wrapper', { hScroll: true }); }document.addEventListener('touchmove', function (e) { e.preventDefault(); }, true);/* * * * * * * *** Use this for high compatibility (iDevice + Android)**/document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, true);/** * * * * * * *//* * * * * * * *** Use this for iDevice only**///document.addEventListener('DOMContentLoaded', loaded, true);/** * * * * * * *//* * * * * * * *** Use this if nothing else works**///window.addEventListener('load', setTimeout(function () { loaded(); }, 200), true);/** * * * * * * */ </script> <!-- SCROLL THE COMIC FRAMES--><script type="text/javascript"> $('div.ui-page').live("swipeleft", function(){ var nextpage = $(this).next('div[data-role="page"]'); // swipe using id of next page if exists if (nextpage.length > 0) { $.mobile.changePage(nextpage, 'slide'); } }); $('div.ui-page').live("swiperight", function(){ var prevpage = $(this).prev('div[data-role="page"]'); // swipe using id of next page if exists if (prevpage.length > 0) { $.mobile.changePage(prevpage, {transition:"slide", reverse:true}); } }); </script></head><body><!-- Start of first frame --><div data-role="page" data-theme="b" id="frame1"><div data-role="content" class="page_content"> <div data-role="header" data-theme="b" class="header"> <h1>Garfield</h1> </div><!-- /header --> <img src="img/frame1_img.jpg" alt="frame1_img"> <div data-role="controlgroup" data-type="horizontal" class="controlgroup"> <a href="#frame2" data-icon="arrow-r" data-iconpos="right" data-role="button">Next</a> <p>Or swipe left and right</p> </div> <div id="wrapper"> <div id="scroller"> <ul> <li><a href="project1.html"><img src="img/frame1_img.jpg" alt="garfield"/></a></li> <li><a href="A1.html"><img src="img/A1.gif" alt="garfield" /></a></li> <li><a href="B1.html"><img src="img/B1.gif" alt="garfield" /></a></li> <li><a href="C1.html"><img src="img/C1.gif" alt="garfield" /></a></li> <li><a href="D1.html"><img src="img/D1.gif" alt="garfield" /></a></li> <li><a href="E1.html"><img src="img/E1.gif" alt="garfield" /></a></li> <li><a href="F1.html"><img src="img/F1.gif" alt="garfield" /></a></li> <li><a href="G1.html"><img src="img/G1.gif" alt="garfield" /></a></li> </ul> </div> </div></div><!-- /content --></div><!-- /page --><!-- Start of second frame --><div data-role="page" data-theme="b" id="frame2"><div data-role="content" class="page_content"> <div data-role="header" data-theme="b" class="header"> <h1>Garfield</h1> </div><!-- /header --> <img src="img/frame2_img.jpg" alt="frame2_img"> <div data-role="controlgroup" data-type="horizontal" class="controlgroup"> <a href="#frame1" data-icon="arrow-l" data-role="button">Back</a> <a href="#frame3" data-icon="arrow-r" data-iconpos="right" data-role="button">Next</a> <p>Or swipe left and right</p> </div></div><!-- /content --></div><!-- /page --><!-- Start of third frame --><div data-role="page" data-theme="b" id="frame3"><div data-role="content" class="page_content"> <div data-role="header" data-theme="b" class="header"> <h1>Garfield</h1> </div><!-- /header --> <img src="img/frame3_img.jpg" alt="frame3_img"> <div data-role="controlgroup" data-type="horizontal" class="controlgroup"> <a href="#frame2" data-icon="arrow-l" data-role="button">Back</a> <a href="#frame4" data-icon="arrow-r" data-iconpos="right" data-role="button">Next</a> <p>Or swipe left and right</p> </div></div><!-- /content --></div><!-- /page --><!-- Start of fourth frame --><div data-role="page" data-theme="b" id="frame4"><div data-role="content" class="page_content"> <div data-role="header" data-theme="b" class="header"> <h1>Garfield</h1> </div><!-- /header --> <img src="img/frame4_img.jpg" alt="frame4_img"> <div data-role="controlgroup" data-type="horizontal" class="controlgroup"> <a href="#frame3" data-icon="arrow-l" data-role="button">Back</a> <a href="#frame5" data-icon="arrow-r" data-iconpos="right" data-role="button">Next</a> <p>Or swipe left and right</p> </div></div><!-- /content --></div><!-- /page --><!-- Start of five frame --><div data-role="page" data-theme="b" id="frame5"><div data-role="content" class="page_content"> <div data-role="header" data-theme="b" class="header"> <h1>Garfield</h1> </div><!-- /header --> <img src="img/frame5_img.jpg" alt="frame5_img"> <div data-role="controlgroup" data-type="horizontal" class="controlgroup"> <a href="#frame4" data-icon="arrow-l" data-role="button">Back</a> <a href="#frame6" data-icon="arrow-r" data-iconpos="right" data-role="button">Next</a> <p>Or swipe left and right</p> </div></div><!-- /content --></div><!-- /page --><!-- Start of six frame --><div data-role="page" data-theme="b" id="frame6"><div data-role="content" class="page_content"> <div data-role="header" data-theme="b" class="header"> <h1>Garfield</h1> </div><!-- /header --> <img src="img/frame6_img.jpg" alt="frame6_img"> <div data-role="controlgroup" data-type="horizontal" class="controlgroup"> <a href="#frame5" data-icon="arrow-l" data-role="button">Back</a> <p>Or swipe left and right</p> </div></div><!-- /content --></div><!-- /page --></body></html> mystyle.css .header{ max-width:400px;}div a{ max-width:400px;}img{ width:100%; max-width:400px;}.page_content{ margin-left:auto; margin-right:auto;}.controlgroup a{ width:50%; max-width:200px; font-size:100%;}.controlgroup{ white-space:nowrap; } ul li{ padding:10px; display:inline;}#wrapper{ margin:-10px; width:100%; max-width:400px; height:140px; overflow:auto; white-space:nowrap;}ul li img{ width:100px; height:100px; } #scroller{ width:1000px;} Link to comment Share on other sites More sharing options...
thescientist Posted January 30, 2012 Share Posted January 30, 2012 so as I suspected, the fact that your scroller is in the "scope" of your slider, is causing the problem. When I moved the scroller outside of the sliding page content, i was able to get it to work. so i guess the issue comes down with how to make the two play nicely. maybe there's something in the slider documentation about how to allow it to work with inner content that also relies on the same events. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.