This is my page :
<body>
<div role="main">
<div data-role="panel" id="userMenu" data-position="left" data-display="push" data-theme="g">
<ul data-role="listview" data-theme="g">
<li id="menuTxt" data-role="list-divider">Menu</li>
<li><a data-ajax="false" href="/Home">Accueil</a></li>
<li><a data-ajax="false" href="/CheckFridge">Mes ingrédients</a></li>
<li><a data-ajax="false" href="/AddRecipe">Ajouter une recette</a></li>
<li><a data-ajax="false" href="#">Déconnexion</a></li>
<li><a data-ajax="false" href="/MyRecipes">Mes recettes</a></li>
<li><a data-ajax="false" data-href="https://developers.facebook.com/docs/plugins/">Partager</a></li>
</ul>
</div>
<div data-role="header">
<a id="menuBtn" href="#userMenu"></a>
<img id="icook_logo" src="~/Content/images/icook_logo.jpg" />
</div>
<div data-role="ui-content">
<a data-role="button" href="#Url.Action("Index", "CheckFridge")" data-theme="c" data-ajax="false" id="checkFridgeBtn">Check mon frigo</a>
<a data-role="button" data-theme="c" id="classicSearch">Recherche classique</a>
</div>
</div>
</body>
The problem when I click on the button sitting on the top-left of the page, the rest of the page doesn't move to the right in spite of that the attribute "data-position" is equals to "left"
Can you help me ?
Thank you
Related
I have been trying to create a responsive Navbar that works on both mobile and pc. but it does not seems to work.
<nav class="uk-container uk-navbar">
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li class="uk-active">
UIKit<strong>Nav</strong>
</li
</ul>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav uk-visible#s">
<li><a class="uk-text-large" #">about</a></li>
<li><a class="uk-text-large" href="#">blog</a></li>
</ul>
<a href="#" class="uk-navbar-toggle uk-hidden#s" uk-navbar-
toggle-icon uk-toggle="target: #sidenav">MENU</a>
</div>
</nav>
<div id="sidenav" uk-offcanvas="overlay: true; mode: push; flip: true"
class="uk-offcanvas">
<div class="uk-offcanvas-bar">
<ul class="uk-nav">
<li><a class="uk-text-large" #">about</a></li>
<li><a class="uk-text-large" href="#">blog</a></li>
</ul>
</div>
</div>
the menu icon does not seems to open mobile nav
Maybe it's just invalid HTML markup? In my example code snippet it works just fine
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.6/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.6/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.6/js/uikit-icons.min.js"></script>
<nav class="uk-container uk-navbar">
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li class="uk-active">
UIKit<strong>Nav</strong>
</li>
</ul>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav uk-visible#s">
<li><a class="uk-text-large" href="#">about</a></li>
<li><a class="uk-text-large" href="#">blog</a></li>
</ul>
MENU
</div>
</nav>
<div id="sidenav" uk-offcanvas="overlay: true; mode: push; flip: true" class="uk-offcanvas">
<div class="uk-offcanvas-bar">
<ul class="uk-nav">
<li><a class="uk-text-large" href="#">about</a></li>
<li><a class="uk-text-large" href="#">blog</a></li>
</ul>
</div>
</div>
I'm trying to organize the way Sonata Admin shows sonata_type_collection.
It looks like this now:
In the source html code I see that all of that is meant to be tabs
<div class="sonata-ba-tabs">
<div>
<div class="nav-tabs-custom">
<ul class="nav nav-tabs">
<li class="active">
<a href="#s5860de8a43681_1_1" data-toggle="tab">
<i class="icon-exclamation-sign has-errors hide"></i> -
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="s5860de8a43681_1_1">
<fieldset>
<!--some field here-->
</fieldset>
</div>
</div>
</div>
</div>
<div>
<div class="nav-tabs-custom">
<ul class="nav nav-tabs">
<li class="active">
<a href="#s5860de8a43681_2_1" data-toggle="tab">
<i class="icon-exclamation-sign has-errors hide"></i> -
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="s5860de8a43681_2_1">
<fieldset>
<!--some field here-->
</fieldset>
</div>
</div>
</div>
</div>
</div>
(I omitted some code to make it shorter)
We can definitely see that it is meant to be some kind of jquery tabs, but I can't really find any information how to make that work like a tabs. Is there anyway to configure the form to implement that?
Here is the code:
<ul id="gn-menu" class="gn-menu-main">
<li class="gn-trigger">
<a class="gn-icon gn-icon-menu">
<div class="hamburger hamburger--arrow">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
</a>
<nav class="gn-menu-wrapper gn-open-part">
<div class="gn-scroller">
<ul class="gn-menu">
<li><a class="gn-icon" id="calendar" href="http://remindbuddy.com/main.php">Calendar</a>
</li>
<li>
<a class="gn-icon self" href="http://remindbuddy.com/self.php">Add For Self</a>
</li>
<li><a class="gn-icon events" href="http://remindbuddy.com/events.php">Events</a></li>
<li><a class="gn-icon view" href="http://remindbuddy.com/contacts.php">View Contacts</a></li>
<li>
<a class="gn-icon add" id="toggle">Add Contact</a>
<ul id="panel" style="display:none">
<li><a href="http://remindbuddy.com/professional.php" <?php if($_SESSION['pro']==0){echo 'style="pointer-events: none;"';}?>>Professional</a></li>
<li>Personal</li>
</ul>
</li>
<li><a class="gn-icon profile" href="http://remindbuddy.com/profile.php">Profile</a></li>
</ul>
</div><!-- /gn-scroller -->
</nav>
</li>
<li class="pageTitle">Profile</li>
</ul>
<span class="left" id="calendarTool">Calendar</span>
What I want is that, for hover on li#calendar to change css property of span#calendarTool.
I have tried:
#calendar:hover #calendarTool,
#calendar:hover + #calendarTool,
#calendar:hover ~ #calendarTool
But nothing seems to work.How to get this done in the given scenario.
Thanxx in advance!!
#calendar is not a sibling nor a parent of #calendarTool so you will not be able to leverage css to handle this. This will require JS/Jquery or a restructure of html so that #calendarTool is a sibling to or nested under #calendar
Quick Jquery example: JS Fiddle
$('#calendar').on('mouseover', function() {
$('#calendarTool').css('background', 'blue');
});
$('#calendar').on('mouseout', function() {
$('#calendarTool').css('background', 'transparent');
});
I have some icons that have a rollover.
http://devjohnson.com/faq
If you go to the top right and roll over the FB or the TW icons, you will see the rollover shows up like 10 pixels and the rest is behind the grey layer. I cant figure out how to get it to come to the front. I have tried z-index on many different layers and none of them are revealing the full rollover.
Any help would be great.
Thanks!
Caroline
I inspected the code in chrome and it looks like there are no sub-menus for the last three icons. the code as you have it is as follows (copied from chrome inspector view source:
<!--<div class="soc_med ten columns omega">-->
<div class="soc_med">
<div style="float:right; height:100px; margin-top:12px; vertical-
align:top; overflow:hidden;">
<div id='wrap'>
<div id="clickable_div_fb"><a
href="https://www.facebook.com/TheOriginalDoc" target="_blank"><img
src="/skin/frontend/dJTheme/default/images/facebook_icon.png" id="fb" /></a>
<div id="nav_menu_fb">
<ul>
<li><a
href="https://www.facebook.com/TheOriginalDoc"
target="_blank">DocJohnson</a></li>
<li><a
href="https://www.facebook.com/askthedocshow" target="_blank">Ask The
Doc</a></li>
</ul>
</div>
</div>
<div id="clickable_div_tw" class="tw"><a
href="https://twitter.com/theoriginaldoc" target="_blank"><img
src="/skin/frontend/dJTheme/default/images/twitter_icon.png"
id="socialImage" /></a>
<div id="nav_menu_tw">
<ul>
<li><a href="https://twitter.com/theoriginaldoc"
target="_blank">DocJohnson</a></li>
<li><a href="https://twitter.com/askthedocshow"
target="_blank">Ask The Doc</a></li>
</ul>
</div>
</div>
<div id="clickable_div_ig" class="ig"><a
href="http://instagram.com/docjohnsonusa" target="_blank"><img
src="/skin/frontend/dJTheme/default/images/instagram_icon.png" /></a>
</div>
<div id="clickable_div_tu" class="tu"><a
href="http://docjohnsonusa.tumblr.com/" target="_blank"><img
src="/skin/frontend/dJTheme/default/images/tumblr_icon.png" id="socialImage"
/></a>
</div>
<div id="clickable_div_yt" class="yt"><a
href="https://www.youtube.com/user/DOCJOHNSON1976" target="_blank"><img
src="/skin/frontend/dJTheme/default/images/youtube_icon.png" /></a>
</div>
</div>
</div>
in the code within the "clickable_div" for the FB and TW icons, there is another div called "nav_menu" which contains the links to the ask doc and Doc Johnson pages. The instagram, tumbler and YouTube "clickable_div" tags do not contain this div.
I suggest trying the following for this section in your code:
-->
<div class="soc_med">
<div style="float:right; height:100px; margin-top:12px; vertical-
align:top; overflow:hidden;">
<div id='wrap'>
<div id="clickable_div_fb"><a
href="https://www.facebook.com/TheOriginalDoc" target="_blank"><img
src="/skin/frontend/dJTheme/default/images/facebook_icon.png" id="fb" /></a>
<div id="nav_menu_fb">
<ul>
<li><a
href="https://www.facebook.com/TheOriginalDoc"
target="_blank">DocJohnson</a></li>
<li><a
href="https://www.facebook.com/askthedocshow" target="_blank">Ask The
Doc</a></li>
</ul>
</div>
</div>
<div id="clickable_div_tw" class="tw"><a
href="https://twitter.com/theoriginaldoc" target="_blank"><img
src="/skin/frontend/dJTheme/default/images/twitter_icon.png"
id="socialImage" /></a>
<div id="nav_menu_tw">
<ul>
<li><a href="https://twitter.com/theoriginaldoc"
target="_blank">DocJohnson</a></li>
<li><a href="https://twitter.com/askthedocshow"
target="_blank">Ask The Doc</a></li>
</ul>
</div>
</div>
<div id="clickable_div_ig" class="ig"><a
href="http://instagram.com/docjohnsonusa" target="_blank"><img
src="/skin/frontend/dJTheme/default/images/instagram_icon.png" /></a>
<div id="nav_menu_ig">
<ul>
<li><a
href="https://www.instagram.com/TheOriginalDoc"
target="_blank">DocJohnson</a></li>
<li><a
href="https://www.instagram.com/askthedocshow" target="_blank">Ask The
Doc</a></li>
</ul>
</div>
</div>
<div id="clickable_div_tu" class="tu"><a
href="http://docjohnsonusa.tumblr.com/" target="_blank"><img
src="/skin/frontend/dJTheme/default/images/tumblr_icon.png" id="socialImage"
/></a>
<div id="nav_menu_tu">
<ul>
<li><a
href="https://www.tumbler.com/TheOriginalDoc"
target="_blank">DocJohnson</a></li>
<li><a
href="https://www.tumbler.com/askthedocshow" target="_blank">Ask The
Doc</a></li>
</ul>
</div>
</div>
<div id="clickable_div_yt" class="yt"><a
href="https://www.youtube.com/user/DOCJOHNSON1976" target="_blank"><img
src="/skin/frontend/dJTheme/default/images/youtube_icon.png" /></a>
<div id="nav_menu_yt">
<ul>
<li><a
href="https://www.youtube.com/TheOriginalDoc"
target="_blank">DocJohnson</a></li>
<li><a
href="https://www.youtube.com/askthedocshow" target="_blank">Ask The
Doc</a></li>
</ul>
</div>
</div>
</div>
</div>
To build nav tabs via Bootstrap, it's simple, I just add code:
<ul class="nav nav-tabs">
<li class="active">
Home
</li>
<li>Tab1</li>
<li>Tab2</li>
</ul>
http://jsfiddle.net/M4YZ6/
but it's only top part of the tabs, who knows how to build bottom part using bootstrap like on picture below:
Thanks a lot!
try this
http://jsfiddle.net/M4YZ6/5/
HTML
<div class="tabbable">
<ul class="nav nav-tabs" id="myTab">
<li class="active">
<a data-original-title="" rel="tooltip" href="#tab1" data-toggle="tab">Home</a>
</li>
<li><a data-original-title="" rel="tooltip" href="#tab2" data-toggle="tab">Profile</a></li>
<li><a data-original-title="" rel="tooltip" href="#tab3" data-toggle="tab">Message</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="tab1">
Home
</div>
<div class="tab-pane" id="tab2">
Profile
</div>
<div class="tab-pane" id="tab3">
Message
</div>
</div>
</div>
I believe Tabbable nav is what you are looking for,
<div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
</div>
Markup taken from the nav component documentation
===Edit===
Js fiddle