I am trying to get an image on the right hand side but it always appear as an arrow.
<ul data-role="listview" data-theme="g">
<li>
<a href="#">
<img src="../Images/play_button.gif" width="16" height="16" class="ui-li-icon" />
<span>Item 1</span>
<span class="ui-li-count">12</span>
</a>
<a href="#">
// I want an image to appear here
</a>
</li>
<li>
<img src="../Images/play_button.gif" width="16" height="16" class="ui-li-icon" />
<span>Item 2</span>
<span class="ui-li-count">9</span>
</li>
</ul>
I'm not sure exactly what is wrong with the layout you're using for the list view,
I would study the documentation and compare it to your code
http://jquerymobile.com/demos/1.0a1/#docs/lists/index.html
If you wanna replace those jqm icons with your icons, read this:
http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/buttons/buttons-icons.html
See if the "custom icons" section would help you.
I found this as an overview of the list: http://www.youtube.com/watch?v=YaZhS_8vaYo It shows the arrows because the entire contents is wrapped in an <a>, I think if you put the link inside an H3, it will become more contained and not show the error. The only thing I haven't figured out is a custom icon; you may be able to just float it.
I viewed the page source and found it very helpful...
lists-split.html
looks like this.
<ul data-role="listview" data-split-icon="gear" data-split-theme="d">
<li><a href="index.html">
<img src="images/album-bb.jpg" />
<h3>Broken Bells</h3>
<p>Broken Bells</p>
</a>Purchase album
</li>
<li><a href="index.html">
<img src="images/album-hc.jpg" />
<h3>Warning</h3>
<p>Hot Chip</p>
</a>Purchase album
</li>
</ul>
Related
I am trying to get my logo and hamburger menu for smaller screens to display side-by-side. On my desktop, when I make my window smaller, the hamburger menu is still to the right of the logo:
But from my phone, it appears like this:
I would like to make the logo about 10% smaller (or more) and have the hamburger menu appear on the right of it from my phone. I don't know what I'm missing here. Here's some of my code:
<nav
class="navbar navbar-expand-lg navbar-dark bg-dark justify-content-between"
>
<a href="/" class="navbar-brand text-light"
><img
src="/static/hopps-hunter_logo.png"
alt="Hopps Hunter"
class="img-responsive"
/></a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarToggler"
aria-controls="navbarToggler"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggler">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
{% if not g.user %}
<li class="nav-item">
<a
class="nav-link pr-3 text-light"
href="/user/login"
>Login</a
>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="/user/signup"
>Sign Up</a
>
</li>
I have tried various things with the bootstrap classes and styles, but can't get it to display properly on my phone.
Just add width="30" or whatever and height="auto" inside the img tag like this:
<a href="/" class="navbar-brand text-light">
<img src="/static/hopps-hunter_logo.png" alt="Hopps Hunter" class="img-responsive" width="30" height="auto" />
</a>
Automatically the hamburger menu will be on the right side responsively.
I want to show a view with 2 listview like this:
But when I implement by Kendo UI Mobile with:
<div id="cptTab" data-role="view" data-title="Billing" data-layout="billing-layout">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title">CPT</span>
<a data-align="left" data-role="button" href="#censusmainTab">Census</a>
<a data-align="right" data-role="button" data-click="onNavigateToAddCpt">+</a>
</div>
</header>
<div>
Patient:
<label>
<input readonly="true" class="PatientNameLabel" />
</label>
</div>
<div>NEW CPT's</div>
<ul data-role="listview" id="cptsListView" data-click="onCPTItemClicked" />
<div>PREVIOUS CPT's</div>
<ul data-role="listview" id="cptsPreviousListView" data-click="onPreviousCPTItemClicked" />
</div>
But it display like this, it's missing 2nd listview (Previous listview):
Please let me know if I did something wrong or it's a bug of Kendo UI Mobile.
Thanks
You could use
<ul data-role="listview" data-type="group" id="ListView" data-click="onItemClicked"/>
to create two group, the first for new CPT's and the second for previous CPT's.
The function onItemClicked should change its behaviour according to which group is clicked.
see the documentation for better details
Try this code
<ul data-role="listview" data-style="inset" data-type="group">
<li>NEW CPT's
<ul>
<li>
<a> 1 st item in 1st list view </a>
</li>
</ul>
</li>
<li>PREVIOUS CPT's
<ul>
<li>
<a >1 st item in 2nd list view </a>
</li>
<li>
<a >2nd item in 2nd list view </a>
</li>
</ul>
</li>
</ul>
For live demo click Here
I am having a bit of a problem with my site, i am trying to add a simple link to an external site, but i can't get the link to open without right clicking and selecting open link.
This is the piece of code
<div class="brick1 odd">
<a href="https://www.google.co.uk/" class="nav-item"</a>
<div class="nav-hover"></div>
<i class="li_shop"></i>
<span>Shop now</span>
</a>
</div>
I know it's most likely something simple but i can't seem to pin it down
Thanks
Aha! The problem is because you are trying to link from an http to an https!
Your anchor tag needs to override the click handler:
<a href="https://www.google.co.uk/" class="nav-item" onclick="return !window.open(this.href,'WINDOW_NAME');" >
Should fix it!
But I would still fix the nesting.
try properly nesting everything, like so:
<div class="brick1 odd">
<a href="https://www.google.co.uk/" class="nav-item" onclick="return !window.open(this.href,'WINDOW_NAME');">
<div class="nav-hover">
<i class="li_shop">
<span>Shop now</span>
</i>
</div>
</a>
</div>
Syntax error
<a href="https://www.google.co.uk/" class="nav-item">
<div class="nav-hover"></div>
<i class="li_shop"></i>
<span>Shop now</span>
</a>
I use a lot of anchor links in my webpage because its only one page that scrolls down by clicking the menu.
Also I made al my pages in sections.
Now I'm busy with making my sitemap.xml for google but i'm not sure if i need to put in all the sections/anchor-links.
my menu is like:
<nav id="nav" role="navigation">
<ul class="clearfix">
<li>
<a class="selected firstnav" href="#home" tabindex="-1">
Home
</a>
</li>
<li>
<a href="#watdoenwij" tabindex="-1">
Wat doen wij
</a>
</li>
<li>
<a href="#portfolio" tabindex="-1">
Portfolio
</a>
</li>
<li>
<a href="#werkwijze" tabindex="-1">
Werkwijze
</a>
</li>
<li>
<a href="#uwwebsite" tabindex="-1">
De Website
</a>
</li>
<li>
<a class="lastnav" href="#contact" tabindex="-1">
Offerte & Contact
</a>
</li>
</ul>
</nav>
as you can see I only use links to #contact/#portfolio etc etc.
Do i have to put all the links in my sitemap?
http://www.domain.com/index.php#contact
http://www.domain.com/index.php#uwwebsite
http://www.domain.com/index.php#portfolio
Doesn't seem right to me?
Maybe google is seeing it as double content...
And if I have to add it to my sitemap what link do i have to use?
http://www.domain.com/index.php#contact
http://www.domain.com/#contact
No, you shouldn't include anchor links. They refer to the same page and the sitemap specifies how often that content changes, but it's all one page.
I want to show a footer that contains a list with links, but when i add the links, the "li" becomes a button. How can i fix it?
Some code:
<div data-role="footer">
<ul data-role="listview">
<li>
<span>Google</span>
</li>
</ul>
</div>
Thanks!
Change your ul to data-role="none" , like this:
<div data-role="footer">
<ul data-role="none">
<li>
<span>Google</span>
</li>
</ul>
</div>
UPDATE:
You could try the following to get your desired style for the li while making it work like a link:
<ul data-role="listview">
<li style="cursor:pointer" onclick="window.location.href='http://www.google.com/'">Google</li>
</ul>