I am using a grouped-buttons-widget and a listview-widget. My code is
<div data-role="controlgroup" data-type="horizontal" class="ui-corner-all ui-controlgroup ui-controlgroup-horizontal">
<div class="ui-controlgroup-controls" align="center">
<!-- ........ -->
</div>
</div>
<ul data-role="listview" id="mylist">
<li data-role="list-divider" role="heading" data-theme="b">
Sheet: Untitled1
</li>
<!-- ........ -->
<li id="mylistSummary" data-role="list-divider" role="heading" data-theme="b">
Total:
</li>
</ul>
The problem is now the widgets appear just next to each other without any spacing in between.
What should I do to ensure desired space between these (and perhaps other) widgets?
I think you may try to add a simple <br> to separate the 2 components:
<div data-role="controlgroup" data-type="horizontal" class="ui-corner-all ui-controlgroup ui-controlgroup-horizontal">
<div class="ui-controlgroup-controls" align="center">
<!-- ........ -->
</div>
</div>
<br>
<ul data-role="listview" id="mylist">
<li data-role="list-divider" role="heading" data-theme="b">
Sheet: Untitled1
</li>
<!-- ........ -->
<li id="mylistSummary" data-role="list-divider" role="heading" data-theme="b">
Total:
</li>
</ul>
Or you may try to play with margin-bottom, for example, try the following:
<div style="margin-bottom: 5px;" data-role="controlgroup" data-type="horizontal" class="ui-corner-all ui-controlgroup ui-controlgroup-horizontal">
<div class="ui-controlgroup-controls" align="center">
<!-- ........ -->
</div>
</div>
<ul data-role="listview" id="mylist">
<li data-role="list-divider" role="heading" data-theme="b">
Sheet: Untitled1
</li>
<!-- ........ -->
<li id="mylistSummary" data-role="list-divider" role="heading" data-theme="b">
Total:
</li>
</ul>
Hope this helps.
Let me know if these solutions work for you.
Related
I have attempted to take bits and pieces from other sources but I am unable to get the desired effect. I have multiple tabs which are currently pre-loaded, the content they are loading to be specific is a number of RSS feeds, as I have added more tabs the page has gradually taken longer to load, naturally.. I am at the point where I need to load the tabs content on click/trigger. What would be the best way to achieve this?
HTML
<div class="header">
<h4 class="title">Header</h4>
<p class="category">Some tagline here</p>
</div>
<div class="content content-full-width">
<ul role="tablist" class="nav nav-tabs">
<li role="presentation" class="active">
USA
</li>
<li class="">
UK
</li>
<li class="">
AU
</li>
<li class="">
CA
</li>
<li class="">
NZ
</li>
</ul>
<div class="tab-content">
</br>
<div id="us" class="tab-pane active">
- Content Here -
</div>
<div id="uk" class="tab-pane">
- Content Here -
</div>
<div id="au" class="tab-pane">
- Content Here -
</div>
<div id="ca" class="tab-pane">
- Content Here -
</div>
<div id="nz" class="tab-pane">
- Content Here -
</div>
</div>
</div>
JSFiddle
https://jsfiddle.net/qvussf6t/1/
Thanks.
I'm building a campaign site for my school. I am implementing a sidebar that changes colour on different sections of the website when its in viewport. I'm unable to make the scrollspy work.
This is what I have: https://codepen.io/aahlfeeyann/pen/oeBGdq
<body data-spy="scroll" data-target="#sidebar">
<div class="wrapper">
<nav id="sidebar">
<ul class="sidebar visible">
<li id="step1" class="active">
<a href="#hero">
<span>Home</span>
</a>
</li>
<li id="step2">
<a href="#about">
<span>About this Campaign</span>
</a>
</li>
<li id="step3">
<a href="#mvps">
<span>Our Participants</span>
</a>
</li>
<li id="step4">
<a href="#appreciation">
<span>How to fight Procrastination</span>
</a>
</li>
<li id="step5">
<a href="#details">
<span>Event Details</span>
</a>
</li>
<li id="step6">
<a href="#team">
<span>Our Team!</span>
</a>
</li>
</ul>
</nav>
<div class="bg-wrapper">
<div class="section" id="hero">
</div>
<div class="section" id="about">
<h1>About the Campaign</h1>
</div>
<div class="section" id="mvps">
<h1>Our Participants</h1>
</div>
<div class="section" id="appreciation">
<h1>Appreciation...?</h1>
</div>
<div class="section" id="details">
<h1>Event Information</h1>
</div>
<div class="section" id="team">
<h1>About the Team</h1>
</div>
</div>
</div>
</body>
Add nav class to ul element.
As per Bootstrap Docs
Scrollspy currently requires the use of a Bootstrap nav component for
proper highlighting of active links.
HTML
<ul class="sidebar visible nav">
.....
...
..
.
</ul>
Scrollspy Docs Reference
Hope This Helps..
I want to swipe through these pages as so, but when it happens I want the header panel and the footer to remain stationary. I only want the page content to move when the pages are swiped or changed.
JSFiddle: https://jsfiddle.net/nj3prx5h/
HTML :
<div data-role="header" data-position="fixed">
<h1 style="text-align:left; margin-left:40px;">Rates</h1>
Bars
</div><!-- /header -->
<div data-role="content">
<h4 align="center">2015 Rates</h4>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<nav data-role="navbar">
<ul>
<li>Rates</li>
<li>Stay & Play</li>
<li>Specials</li>
</ul>
</nav>
</div><!-- /footer -->
<div data-role="panel" id="bars3" data-theme="a">
<!-- panel content goes here -->
<ul data-role="listview" class="ui-listview-outer">
<li>Home</li>
<li>Book Tee Times</li>
<li data-role="collapsible" data-iconpos="right" data-shadow="false" data-corners="false">
<h2>Rates</h2>
<ul data-role="listview" data-shadow="false" data-inset="true" data-corners="false">
<li>2015 Rates</li>
<li>Stay & Play</li>
<li>Specials</li>
</ul>
</li>
<li>Scorecard</li>
<li>Contact Us</li>
</ul>
</div><!-- /panel -->
</div><!-- end of Rates page -->
<!-- ~~~~~ Stay and Play ~~~~~ -->
<div data-role="page" id="StayandPlay">
<div data-role="header" data-position="fixed">
<h1 style="text-align:left; margin-left:40px;">Rates</h1>
Bars
</div><!-- /header -->
<div data-role="content">
<h4 align="center">Stay & Play</h4>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<nav data-role="navbar">
<ul>
<li><a href="#Rates" >Rates</a></li>
<li>Stay & Play</li>
<li><a href="#MemberSpecials" >Specials</a></li>
</ul>
</nav>
</div><!-- /footer -->
<div data-role="panel" id="bars4" data-theme="a">
<!-- panel content goes here -->
<ul data-role="listview" class="ui-listview-outer">
<li>Home</li>
<li>Book Tee Times</li>
<li data-role="collapsible" data-iconpos="right" data-shadow="false" data-corners="false">
<h2>Rates</h2>
<ul data-role="listview" data-shadow="false" data-inset="true" data-corners="false">
<li>2015 Rates</li>
<li>Stay & Play</li>
<li>Specials</li>
</ul>
</li>
<li>Scorecard</li>
<li>Contact Us</li>
</ul>
</div><!-- /panel -->
</div><!-- end of Stay and Play page -->
<!-- ~~~~~ SPECIALS ~~~~~ -->
<div data-role="page" id="MemberSpecials">
<div data-role="header" data-position="fixed">
<h1 style="text-align:left; margin-left:40px;">Rates</h1>
Bars
</div><!-- /header -->
<div data-role="content">
<h4 align="center">2015 New Member Specials</h4>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<nav data-role="navbar">
<ul>
<li>Rates</li>
<li>Stay & Play</li>
<li>Specials</li>
</ul>
</nav>
</div><!-- /footer -->
<div data-role="panel" id="bars5" data-theme="a">
<!-- panel content goes here -->
<ul data-role="listview" class="ui-listview-outer">
<li>Home</li>
<li>Book Tee Times</li>
<li data-role="collapsible" data-iconpos="right" data-shadow="false" data-corners="false">
<h2>Rates</h2>
<ul data-role="listview" data-shadow="false" data-inset="true" data-corners="false">
<li>2015 Rates</li>
<li>Stay and Play</li>
<li>Specials</li>
</ul>
</li>
<li>Scorecard</li>
<li>Contact Us</li>
</ul>
</div><!-- /panel -->
</div><!-- end of Specials page -->
JS :
jQuery(document).ready(function() {
$(document).on('swipeleft', swipeLeft);
$(document).on('swiperight', swipeRight);
function swipeLeft(event) {
if ($.mobile.pageContainer.pagecontainer('getActivePage').attr('id') === "Rates") {
$.mobile.changePage("#StayandPlay", {
transition: "slide"
});
} else if ($.mobile.pageContainer.pagecontainer('getActivePage').attr('id') === "StayandPlay") {
$.mobile.changePage("#MemberSpecials", {
transition: "slide"
});
}
}
function swipeRight(event) {
if ($.mobile.pageContainer.pagecontainer('getActivePage').attr('id') === "MemberSpecials") {
$.mobile.changePage("#StayandPlay", {
transition: "slide",
reverse: true
});
} else if ($.mobile.pageContainer.pagecontainer('getActivePage').attr('id') === "StayandPlay") {
$.mobile.changePage("#Rates", {
transition: "slide",
reverse: true
});
}
}
});
How can I do this? I am more worried about the footer as that looks much worse, but if I could get help with both footer and header panel that would be great!
I am using jQuery but its not working in my webpage.
jquery-1.10.2.min.js is used for TAB and jquery.lightbox-0.5.js" is used for Photo gallery with jquery.js scripting file.
Now though it shows the tab buttons and the thumbnails of the gallery, when I click on the tabs the tab doesn't work and photo gallery doesn't work too.
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.opacityrollover.js" type="text/javascript"></script>
<!--[if lt IE 7]>
<div style=' clear: both; text-align:center; position: relative;'>
<img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" alt="" />
</div>
<![endif]-->
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen">
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<!-- / fim dos arquivos utilizados pelo jQuery lightBox plugin -->
<!-- Ativando o jQuery lightBox plugin -->
<script type="text/javascript">
$(function() {
$('#photog a').lightBox();
});
</script>
<style type="text/css">
/* jQuery lightBox plugin - Gallery style */
</head>
<body id="page1">
<!--==============================header=================================-->
<header>
<div class="row-2">
<div class="main">
<div class="container_12">
<div class="grid_9">
<div id="logom">
<img src="images/logo-iie.png" width="43" height="54" alt="IIE LOGO" />
</div>
<h1>
<a class="logo" href="index.html">Indian Institute of Entrepreneurship</a>
<span>Clusters in North East Region</span>
</h1>
An Organisation of the Ministry Of Micro, Small and Medium Enterprises(MSME),<br>
Govt.of India
An ISO 9001:2008 Certified Organisation
</div>
<div id="logor"><img src="images/logo-rrc.png" width="51" height="54" alt="IIE LOGO" /></div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="row-1">
<div class="main">
<div class="container_12">
<div class="grid_12">
<!-- Main navigation -->
<nav class="main-navigation clearfix span12" role="navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>RRC Team</li>
<li>
Clusters
<ul class="sub-menu">
<li>Assam
<ul class="sub-menu">
<li>Sipajhar Handloom Cluster</li>
<li>Dhamdhama Handloom Cluster</li>
<li>Pyranga Eri Cluster</li>
<li>Rontholi Jewellery Cluster</li>
<li>Bogulamari Jute Cluster</li>
<li>Asharikandi Terracotta Cluster</li>
<li>Japi Cluster</li>
<li>Incense Sticks cluster</li>
</ul>
</li>
<li>Manipur
<ul class="sub-menu">
<li>Kouna Grass Cluster</li>
<li>Imphal Handloom Cluster</li>
<li>Greater Imphal Jewellery Cluster</li>
</ul>
</li>
<li>Mizoram
<ul class="sub-menu">
<li>Baktwang Wood Carpentry Cluster</li>
<li>Bairabi Bamboo cluster</li>
</ul>
</li>
<li>Sikkim
<ul class="sub-menu">
<li>Okhrey Carpet Making Cluster</li>
</ul>
</li>
<li>Tripura
<ul class="sub-menu">
<li>Hapania Jute Cluster</li>
</ul>
</li>
<li>Meghalaya
<ul class="sub-menu">
<li>Strawberry Cluster, Ri-Bhoi</li>
<li>Umden Eri Cluster</li>
<li>Cashew Nut Cluster, Selsela</li>
</ul>
</li>
<li>Arunachal Pradesh
<ul class="sub-menu">
<li>Tawang Carpet Making Cluster</li>
<li>Dirang Food Processing Cluster</li>
</ul>
</li>
</ul>
</li>
<li class="current">Photo Gallery</li>
<li>Contact</li>
</ul>
</nav> <!-- #main-navigation -->
</div>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</header>
<!-- content -->
<section id="content">
<div class="bg-top">
<div class="bg-top-2">
<div class="bg">
<div class="bg-top-shadow">
<div class="main">
<div class="gallery p3">
<div class="wrapper indent-bot">
<span class="title img-indent3">Gallery</span>
<div class="cleaner_h10"> </div>
<!--------------------------------------->
<div id="w" class="clearfix">
<ul id="sidemenu">
<li>
<i class="icon-info-sign icon-large"></i><strong>Assam</strong>
</li>
<li>
<i class="icon-lightbulb icon-large"></i><strong>Manipur</strong>
</li>
<li>
<i class="icon-envelope icon-large"></i><strong>Mizoram</strong>
</li>
<li>
<i class="icon-envelope icon-large"></i><strong>Sikkim</strong>
</li>
<li>
<i class="icon-envelope icon-large"></i><strong>Tripura</strong>
</li>
<li>
<i class="icon-envelope icon-large"></i><strong>Meghalaya</strong>
</li>
<li>
<i class="icon-envelope icon-large"></i><strong>Arunachal</strong>
</li>
</ul>
<div id="contab">
<div id="assam-content" class="contabblock">
<h1>Assam</h1>
</div><!-- #end -->
<div id="manipur-content" class="contabblock hidden">
<h1>Manipur</h1>
</div><!-- #end -->
<div id="mizoram-content" class="contabblock hidden">
<h1>Mizoram</h1>
</div><!-- #end -->
<div id="sikkim-content" class="contabblock hidden">
<h1>Sikkim</h1>
</div><!-- #end -->
<div id="tripura-content" class="contabblock hidden">
<h1>Tripura</h1>
</div><!-- #end -->
<div id="meghalaya-content" class="contabblock hidden">
<h1>MIzoram</h1>
</div><!-- #end -->
<div id="arunachal-content" class="contabblock hidden">
<h1>Arunachal Pradesh</h1>
</div><!-- #end -->
</div><!-- #end #content -->
</div><!-- #end #w -->
<!--------------------------------------->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--==============================footer=================================-->
<footer>
<div class="main">
<div class="container_12">
<div class="wrapper2">
<div class="grid_4">
<div>© 2014 All right reserved</div>
<!-- {%FOOTER_LINK} -->
</div>
<div class="grid_4">
<div>Powered by: Third Eye</div>
</div>
<div class="grid_4">
<ul class="list-services">
<li></li>
<li><a class="item-2" href="#"></a></li>
</ul>
</div>
</div>
</div>
</div>
</footer>
<script type="text/javascript">
$(function(){
$('#sidemenu a').on('click', function(e){
e.preventDefault();
if($(this).hasClass('open')) {
// do nothing because the link is already open
} else {
var oldcontent = $('#sidemenu a.open').attr('href');
var newcontent = $(this).attr('href');
$(oldcontent).fadeOut('fast', function(){
$(newcontent).fadeIn().removeClass('hidden');
$(oldcontent).addClass('hidden');
});
$('#sidemenu a').removeClass('open');
$(this).addClass('open');
}
});
});
</script>
</body>
</html>
I don't really know what your script does but just by reading it I see this problem:
var oldcontent = $('#sidemenu a.open').attr('href');
var newcontent = $(this).attr('href');
So oldcontent and newcontent are a bunch of strings containing links (URLs) like "http://....." etc.
Then you're trying to make those "strings" fade:
$(oldcontent).fadeOut('fast', function(){
$(newcontent).fadeIn().removeClass('hidden');
$(oldcontent).addClass('hidden');
});
I think something is missing in between...
i have one page which have some div with different id for move between div , i move to one of div by panel but when i return to main page list of item(panel) does not work. this is Part of the code.... What should I do
<div data-role="page" id="main" data-theme="a">
<div data-role="panel" data-position-fixed="true" data-display="overlay" id="listpanel">
<ul data-role="listview" style="float:right">
<li>
item1
</li>
<li>
item2
</li>
</ul>
</div>
<div data-role="header">
<h1>mainheader</h1>
</div>
<div data-role="page" id="page1" data-theme="a">
<div data-role="panel" data-position-fixed="true" data-display="overlay" id="listpanel">
<ul data-role="listview" style="float:right">
<li>
item1
</li>
<li>
item2
</li>
</ul>
</div>
<div data-role="header">
<h1>item1</h1>
</div>
<div data-role="navbar">
<ul class="ui-btn ui-corner-all">
<li>list</li>
<li>mainpage</li>
</ul>
</div>
<div data-role="content">Content</div>
</div>
<div data-role="page" id="page2" data-theme="a">
<div data-role="panel" data-position-fixed="true" data-display="overlay" id="listpanel">
<ul data-role="listview" style="float:right">
<li>
item1
</li>
<li>
item2
</li>
</ul>
</div>
<div data-role="header">
<h1>item2</h1>
</div>
<div data-role="navbar">
<ul class="ui-btn ui-corner-all">
<li>list</li>
<li>mainpage</li>
</ul>
</div>
<div data-role="content">Content</div>
</div>