Jump to content

JQuery mobile horizontal buttons?


Caitlin-havener
 Share

Recommended Posts

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>

  • Like 1
Link to comment
Share on other sites

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">
Edited by creative1977
Link to comment
Share on other sites

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

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

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

Edited by thescientist
Link to comment
Share on other sites

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

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

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

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

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

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

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);

Edited by thescientist
Link to comment
Share on other sites

maybe something like

 var scroller = document.getElementById('scroller');scroller.addEventListener('touchmove', function (e) { e.preventDefault(); }, true);

Link to comment
Share on other sites

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

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...