I recently started using the Jquery Mobile Flat UI Theme and I'm really impressed. However, I would like to enhance it by adding a separator between each listview.
Here is my current listview:
Can someone please advise me on which code I need to add in my .css file for this modification?
To achieve a separated list style in css, follow these steps.
View the demonstration here
Apply the following css:
ul li.ui-li {
border-top:1px solid #ccc !important;
}
ul li.ui-li-divider{
border-top:none !important;
}
To quickly solve this issue, simply insert the li tag before any traditional listview elements in your code:
<li data-role="list-divider">Place text here</li>
An alternative method is to let the system handle it by adding the attribute data-autodividers="true" to your listview's main ul tag.
<ul data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">
<li><a href="index.html">Adam Kinkaid</a></li>
<li><a href="index.html">Alex Wickerham</a></li>
<li><a href="index.html">Avery Johnson</a></li>
<li><a href="index.html">Bob Cabot</a></li>
<li><a href="index.html">Caleb Booth</a></li>
<li><a href="index.html">Christopher Adams</a></li>
<li><a href="index.html">Culver James</a></li>
</ul>
See a live demonstration: http://jsfiddle.net/Gajotres/JHDsq/
$(document).on('pagecreate', '#index', function(){
$( "#mylistview li" ).each(function() {
$(this).before('<li data-role="list-divider"></li>');
});
});
This approach will add dividers above existing li elements. Also note the use of data-divider-theme="a", which creates black dividers.
<ul data-role="listview">
<li>Toyota</li>
<li>Honda</li>
<li>Nissan</li>
</ul>
Need help with a component that features a hover animation displaying 4 rotating images: animation: changeImg-1 2.5s linear infinite; @keyframes changeImg-1 { 0%, 100% { background-image: url('images/wel1.png'); } 25% { background-image: ur ...
Having some issues with retrieving data from an API using jQuery that returns the message in an XML format. It's confusing me because when I use CURL to run it, it says the application is JSON, but developer tools show it as XML. Check out this API l ...
Trying to figure out how to remove inline styles added by jQuery on hover from the current menu item in the navigation. I want the current menu item to remain visible even after hover, but jQuery is setting it to display:none. I attempted to add "display: ...
As a newcomer to Angular, I am curious to know if it's possible to achieve the following scenario and also where I can find documentation to help me get started. The scenario: In my MEAN app, there is currently a 'loading...' popup controll ...
I am facing an issue with my ajax contact form. The beforeSend function is supposed to validate the inputs and pass the parameters to a PHP file for sending emails. However, I always receive false instead of true even when the inputs are valid. I suspect ...
Currently, I have a large number of li elements that I am iterating through and grouping in sets of 5. However, I need to assign a unique class to every third group in order to achieve the following structure: <ul class="class1"> ...
Can a div's height and width both be reduced at the same time while scrolling down a page? Let's say that as the user scrolls, the size of the div changes from 400px by 400px to 200px by 200px, all while remaining centered on the page. I've ...
Is there a way to make SVG lines appear on top of CSS-styled elements in my HTML file? I have a white background SVG created with JavaScript using d3, and I am adding CSS-styled rectangles on top of it. However, I also want SVG lines (created with JavaScri ...
I have incorporated a Google chart within a mat-grid-tile. In this setup, one column displays a value of 50, while the other showcases a value of 30. These particular values are sourced from myService and are accurate. Although when I hover over the bars i ...
I created a unique Angular theme called 'my-theme.scss' and added it to the angular.json file. While it works with most Angular Elements, I am facing issues getting it to apply to certain HTML Elements inside Angular Components. For example: < ...
I'm currently working on a template that includes 3 questions and answers that I want to hide initially, and have them revealed only when the user interacts by toggling, hovering, or clicking. I have successfully hidden the answers, but I am struggli ...
Struggling to adjust the height of one div to match another using the following code: var aboutheight=document.getElementById('about').offsetHeight; document.getElementById('sampledogs').setAttribute("style","height:aboutheight"); Des ...
Is it true that a parent element must have a fixed height to use percentage-based height? For example, 500px. I'm designing a grid with divs arranged hierarchically. The parent has a fixed height of 500px, and the children have percentage heights, ea ...
I have these 2 elements in my webpage: //1st object <span class="ui-slider-handle" tabindex="0" style="left: 15.3153%;"></span> //2nd object <div id="waveform"> <wave style="display: block; position: relative; user-select: none; he ...
After reviewing the specifications on http://api.jquery.com/jQuery.ajax/, I discovered that scripts are automatically evaluated for each response depending on the dataType. Is there a way to prevent jQuery from evaluating the script portions of the respo ...
Suppose I have the following PHP code: $logger = $_SESSION['logger']; $postquery = $con->query("SELECT * FROM posts ORDER BY id DESC LIMIT 5"); while($row = $postquery->fetch_object()){ $posts[] = $row; } And then, this section of ...
I spent time formatting a div tag for my main content and then placed that div inside another wrapper div. However, when I tried to add my logo to the site, everything shifted. It appeared as though the div containing the logo had pushed the wrapper down. ...
I have set up a bootstrap modal containing a form. Upon submitting the form, the form content is hidden and a bootstrap alert message is displayed. However, upon clicking the bootstrap popup, the same alert message is shown in the popup instead of displayi ...
I have been utilizing the Google Place API in my code, which has been working flawlessly. However, I encountered an issue when refreshing the page after a period of time, where Firebug displayed the error message: google.maps.event is undefined. Upon furt ...
Greetings! I have a website created using css, html, and php. Take a moment to review this code: <?php session_start(); include_once "mysql_connect.php"; $log = null; if(isset($_SESSION["ID"])){ $log = $_SESSION["ID"]; }e ...