I want to create links to pages in my website when a user clicks on a slideshow picture generated with bxSlider (which is excellent in every other way)
Can this be done? How? Thanks
I use something like this:
<li>
<div class="item-img2">
<a style="background-image: url('picture.jpg');" href="http://www.google.com"></a>
</div>
</li>
And in CSS
.item-img2 {
width:980px;
height:500px;
}
.item-img2 a {
display:block;
overflow:hidden;
width:980px;
height:500px;
background-position:center center;
background-repeat:no-repeat;
}
Just add an a href... for exemple:
<ul class="bxslider">
<li><img src="images/slide001.jpg"/></li>
<li><img src="images/slide002.jpg"/></li>
</ul>
Related
I am using Materializecss for my website and I'd like to display tooltips on the smaller action buttons whenever the user presses the big action button. Materializecss shows tooltips only on hover by default.
Is there a way to change this?
Thank you
<li> <!-- Small button -->
<a class="btn-floating green tooltipped" data-position="left" data-delay="50" data-tooltip="Add friends">
<i class="material-icons">add</i>
</a>
</li>
Check out this github issue
Github user philipraets created a nice codepen to demonstrate his soluton.
Edit (For the Lazy):
philipraets created a simple css style:
.mobile-fab-tip {
position: fixed;
right: 85px;
padding:0px 0.5rem;
text-align: right;
background-color: #323232;
border-radius: 2px;
color: #FFF;
width:auto;
}
then wrapped the tooltip within another link element using that style:
<div class="fixed-action-btn click-to-toggle" style="bottom:24px; right:24px;">
<a class="btn-floating btn-large red"><i class="large material-icons">settings</i></a>
<ul>
<li>
<i class="material-icons">create</i>
Edit <!--tooltip-->
</li>
<li>
<i class="material-icons">event</i>
Save to calendar <!--tooltip-->
</li>
<li>
<i class="material-icons">supervisor_account</i>
Switch responsible <!--tooltip-->
</li>
</ul>
</div>
So, I'm adding a popup menu off the header and it works... works quite well actually except for one small thing. For the life of me I can't get it to display the icons the way I want them!
In the first <li> I brute force the data-icon into the <li> and it shows but its not positioned to the left. In the others, I left the data-icon where I'm accustomed to leaving them (where they work correctly everywhere else) and they don't display at all.
Any suggestions?
<div id="header" data-role="header" data-theme="b">
<h1>MyApp</h1>
Menu
<div data-role="popup" id="popupMenu" data-theme="b">
<ul data-role="listview" data-inset="true">
<li data-icon="gear" data-iconpos="left">Settings</li>
<li>GPS</li>
<li>About</li>
</ul>
</div>
</div>
<!-- /header -->
JSFiddle
The data-iconpos attribute not defined for regular list items, works only when the < li> item is inside a navbar widget: http://www.w3schools.com/jquerymobile/jquerymobile_ref_data.asp
Please, take a look to the fiddle I made: https://jsfiddle.net/xbo8npng/1/
I have placed the icons to the left using css:
<div id="header" data-role="header" data-theme="b">
<h1>MyApp</h1>
Menu
<div data-role="popup" id="popupMenu" data-theme="b">
<ul data-role="listview" data-inset="true">
<li class="left" data-icon="gear">Settings</li>
<li class="left">GPS</li>
<li class="left">About</li>
</ul>
</div>
</div>
and the styles:
.left a{
padding-left: 2.5em !important;
padding-right: 1em !important;
}
.left a:after{
left: 2px;
right: auto;
}
I hope this helps you!
Seems I can't put the icon correctly, can someone help me out?
JQuery Mobile version: 1.4.2
<div data-role="page" id="pageone">
<div data-role="main" class="ui-content">
<h2>List With Thumbnails and Text</h2>
<ul data-role="listview" data-inset="true">
<li>
<a href="#">
<img src="chrome.png">
<h2>Google Chrome</h2>
<p><img class='ui-icon-home ui-btn-icon-notext ui-btn-icon-left'/> Google Chrome is a free, open-source web browser. Released in 2008.</p>
</a>
</li>
<li>
<a href="#">
<img src="firefox.png">
<h2>Mozilla Firefox</h2>
<p>Firefox is a web browser from Mozilla. Released in 2004.</p>
</a>
</li>
</ul>
</div>
</div>
Result:
I try to use this but doesn't work.
<span><i class='ui-icon-home ui-btn-icon-notext ui-btn-icon-left'>Text</i></span>
If you want the icon inline with the text and not a button, you can accomplish it like this.
First add a span for the icon with class="ui-icon-home ui-btn-icon-notext inlineIcon":
<p>
<span class="ui-icon-home ui-btn-icon-notext inlineIcon"></span>
Google Chrome is a free, open-source web browser. Released in 2008.
</p>
Then we add the folowing CSS:
li p {
line-height: 24px;
}
.inlineIcon {
display: inline-block;
position: relative;
vertical-align: middle;
margin-right: 6px;
}
The P line-height makes room vertically for the icon, while the inlineIcon class places the icon correctly.
If you do not want the gray disk and would prefer a plain black version of the icon, you would add the ui-alt-icon class to the span to make it black, and the CSS would be:
.inlineIconNoDisk {
display: inline-block;
position: relative;
vertical-align: middle;
margin-right: 6px;
}
.inlineIconNoDisk:after {
background-color: transparent;
}
Here is a DEMO
And a screenshot:
Try this code it will work
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<div data-role="page" id="pageone">
<div data-role="main" class="ui-content">
<h2>List With Thumbnails and Text</h2>
<ul data-role="listview" data-inset="true">
<li>
<a href="#">
<img src="chrome.png"/>
<h2>Google Chrome</h2>
<div class="ui-grid-a">
<div class="ui-block-a" style="width:30%;"><button data-icon='home' data-iconpos="notext"></button></div>
<div class="ui-block-b" style="width:70%;"> <p>Google Chrome is a free, open-source web browser. Released in 2008.</p></div></div>
</a>
</li>
<li>
<a href="#">
<img src="firefox.png"/>
<h2>Mozilla Firefox</h2>
<div class="ui-grid-a">
<div class="ui-block-a" style="width:30%"><button data-icon='home' data-iconpos="notext"></button></div>
<div class="ui-block-b" style="width:70%;padding-bottom:5%;"> <p>Firefox is a web browser from Mozilla. Released in 2004.</p></div>
</div>
</a>
</li>
</ul>
</div>
</div>
Refer this Fiddle Demo
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>
I'm using Zurb Foundation 3 via the zurb-foundation gem on a rails project. Everything is going well until I've tried to add a navigation bar:
<body>
<div id="container" class="twelve columns">
<div class="fixed contain-to-grid">
<nav class="top-bar">
<ul>
<li class="name"><h1><%= link_to "Home", root_path %></h1></li>
</ul>
<section>
<ul class="left">
<li>Left</li>
</ul>
<ul class="right">
<li>Right</li>
</ul>
</section>
</nav>
</div>
Which looks like:
I have not override any of the zurb styling except for the colors, my assumption is that it would appear pretty similar to the first example in the documentation http://foundation.zurb.com/docs/navigation.php but that does not seem to be the case. The documentation also mentions the javascript dependancies, but those are being included.
Anyone have any ideas on how to start get this to start looking pretty?
EDIT:
Adding the line to the first list like so:
<ul>
<li class="name"><h1><%= link_to "Home", root_path %></h1></li>
<li class="toggle-topbar"></li>
</ul>
Renders this:
Inspecting the element to see if things are display, the navigation JS is there:
(function ($){
$.fn.foundationNavigation = function (options) {
var lockNavBar = false;
// Windows Phone, sadly, does not register touch events :(
if (Modernizr.touch || navigator.userAgent.match(/Windows Phone/i)) {
$(document).on('click.fndtn touchstart.fndtn', '.nav-bar a.flyout-toggle', function (e) {
e.preventDefault();
var flyout = $(this).siblings('.flyout').first();
if (lockNavBar === false) {
$('.nav-bar .flyout').not(flyout).slideUp(500);
flyout.slideToggle(500, function () {
lockNavBar = false;
});
}
lockNavBar = true;
});
$('.nav-bar>li.has-flyout', this).addClass('is-touch');
} else {
$('.nav-bar>li.has-flyout', this).hover(function () {
$(this).children('.flyout').show();
}, function () {
$(this).children('.flyout').hide();
});
}
};
})( jQuery );
Looking for the css from foundation, it is working for buttons and everything, and the nav bar styles seem to be there as well, for example:
.nav-bar {
height: 40px;
background: #4d4d4d;
margin-top: 20px;
padding: 0;
}
I had exactly the same problem as you with zurb-foundation 3.0.9. Try upgrade to 3.1.1
In your Gemfile, use:
gem 'zurb-foundation', '~> 3.1.1'
And in application.scss:
#import 'foundation';
Make sure you have this in document ready
$(document).foundationTopBar();
Update Gems
bundle update
Make sure cache is removed:
bundle exec rake tmp:cache:clear
Cheers!
You are missing this line after the first list item
<li class="toggle-topbar"></li>
That's probably what's going on, but not 100% positive.
You should place something like this example below, above all of your <div> tags and below the <body> tag. It exists outside of the grid system so it should be above everything. Notice there are no <div> tags.
<nav class="top-bar">
<ul>
<li class="name"><h1>James Stone</h1></li>
<li class="toggle-topbar"></li>
</ul>
<section>
<ul class="right">
<li class="has-dropdown">I
<ul class="dropdown">
<li>Bio</li>
<li>Resume</li>
</ul>
</li>
</section>
</nav>