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>
Related
I'm quite lost here so any help appreciated!
I'm looking for when a button (3 buttons in total) is clicked that it affects multiple elements: 1. it highlights 3 boxes. 2. It shows an area of text.
I have learned multiple id's dont work, think CSS could work with jquery (not overly familiar with jquery.
// Code for the 3 buttons: //
<div class="row">
<div class="col-sm-2 col-xs-4 col-sm-offset-3 center">
<p><?php the_field('button_1'); ?></p>
</div>
<div class="col-sm-2 col-xs-4 center">
<p><?php the_field('button_2'); ?></p>
</div>
<div class="col-sm-2 col-xs-4 center">
<p><?php the_field('button_3'); ?></p>
</div>
</div>
// Code for box areas (on click some will highlight): //
<div class="panel-heading">
<h2><?php the_field('decision_moments_section_title'); ?></h2>
<ul class="nav nav-tabs-v2">
<li class="active col-sm-1-8 col-xs-3 find-mnt">
<a id="snav-content1" data-toggle="tab" class="mnt-hover">
<img class="moment-logo" src="/wp-content/uploads/2018/01/Find.png" alt="Find">
<h4>Find</h4>
</a>
</li>
<li class="col-sm-1-8 col-xs-3 join-mnt">
<a id="snav-content2" data-toggle="tab" class="mnt-hover">
<img class="moment-logo" src="/wp-content/uploads/2018/01/Join.png" alt="Join">
<h4>Join</h4>
</a>
</li>
<li class="col-sm-1-8 col-xs-3 consume-mnt">
<a id="snav-content3" data-toggle="tab" class="mnt-hover">
<img class="moment-logo" src="/wp-content/uploads/2018/01/Consume.png" alt="Consume">
<h4>Consume</h4>
</a>
</li>
<li class="col-sm-1-8 col-xs-3 upgrade-mnt">
<a id="snav-content4" data-toggle="tab" class="mnt-hover">
<img class="moment-logo" src="/wp-content/uploads/2018/01/Upgrade.png" alt="Upgrade">
<h4>Upgrade</h4>
</a>
</li>
<li class="col-sm-1-8 col-xs-3 downgrade-mnt" class="mnt-hover">
<a id="snav-content5 snav-content3" data-toggle="tab">
<img class="moment-logo" src="/wp-content/uploads/2018/01/Downgrade.png" alt="Downgrade">
<h4>Downgrade</h4>
</a>
</li>
<li class="col-sm-1-8 col-xs-3 bill-mnt">
<a id="snav-content6" data-toggle="tab" class="mnt-hover">
<img class="moment-logo" src="/wp-content/uploads/2018/01/Bill.png" alt="Bill">
<h4>Bill</h4>
</a>
</li>
<li class="col-sm-1-8 col-xs-3 leave-mnt">
<a id="snav-content7" data-toggle="tab" class="mnt-hover">
<img class="moment-logo" src="/wp-content/uploads/2018/01/Leave.png" alt="Winback">
<h4>Leave</h4>
</a>
</li>
<li class="col-sm-1-8 col-xs-3 winback-mnt">
<a id="snav-content8" data-toggle="tab" class="mnt-hover">
<img class="moment-logo" src="/wp-content/uploads/2018/01/Winback.png" alt="Winback">
<h4>Winback</h4>
</a>
</li>
</ul>
</div>
// Code for text area that will show on click: //
<div class="tab-content">
<div class="tab-pane fade in active" id="snav-content10">
<div class="row">
<div class="col-sm-12">
<?php the_field('section_1'); ?>
</div>
</div>
</div>
<div class="tab-pane fade" id="snav-content11">
<div class="row">
<div class="col-sm-12">
<?php the_field('section_2'); ?>
</div>
</div>
</div>
<div class="tab-pane fade" id="snav-content12">
<div class="row">
<div class="col-sm-12">
<?php the_field('section_3'); ?>
</div>
</div>
</div>
</div>
this code is taken from elsewhere on the site where the boxes were the areas that were clicked and only affected the text area.
sfsaf
sdf
the css with jquery approach would work fine. if you want to select multiple elements you can use a class selector. here is an example clicking the button highlights three boxes and hides / show a text area.
here is the fiddle
https://jsfiddle.net/2e73h9jp/
// find elements
var banner = $(".banner-message")
var button = $("button")
// handle click and add class
button.on("click", function(){
banner.toggleClass("alt")
$('textarea').toggleClass("hide");
})
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
Why the img-responsive combined to pull-right does not scale properly on mobile devices?
I have the following code:
<div class="row">
<div class="container">
<div class="pull-right">
<a class="fancybox thumbnail" rel="features" href="test_image_small.jpg">
<img class="img-responsive" src="test-image.jpg"})">
</a>
</div>
<h2>Key Features</h2>
<br />
<ul>
<li>Feature A</li>
<li>Feature B</li>
<li>Feature C</li>
<li>Feature D</li>
</ul>
</div>
</div>
I've already checked this question but it doesn't help in my case.
Here is the live sample: http://www.bootply.com/zbY6BrDbWI
Thanks.
Not sure I can directly help, I've always hated using the pull-left/right classes for this very reason. I tend to just stick with using Bootstraps Grid System and ordering the elements properly. For example;
<div class="container">
<div class="row">
<div class="col-sm-4">
<h2>Key Features</h2>
<br>
<ul>
<li>Feature A</li>
<li>Feature A</li>
<li>Feature A</li>
<li>Feature A</li>
</ul>
</div>
<div class="col-sm-8">
<a class="fancybox thumbnail" rel="features" href="http://placehold.it/800x600.jpg">
<img class="img-responsive" src="http://placehold.it/800x600.jpg">
</a>
</div>
</div>
</div><!-- /.container -->
(Note I've removed the nav HTML and cleaned up the code a bit)
If you absolutely needed them in the order you specified (in order to force the image to be the at the top on mobile for example) you could always apply the pull-right to the grid, like this
<div class="container">
<div class="row">
<div class="col-sm-8 col-xs-12 pull-right">
<a class="fancybox thumbnail" rel="features" href="http://placehold.it/800x600.jpg">
<img class="img-responsive" src="http://placehold.it/800x600.jpg">
</a>
</div>
<div class="col-sm-4">
<h2>Key Features</h2>
<br>
<ul>
<li>Feature A</li>
<li>Feature A</li>
<li>Feature A</li>
<li>Feature A</li>
</ul>
</div>
</div>
</div><!-- /.container -->
Notice on this one how I also applied the col-xs-12 class. This forces it into knowing it's width and fitting the image into the parent container.
DEMO JSFiddle 1
DEMO JSFiddle 2
Hope this helps.
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
I am using twitter bootstrap and the 'media-grid' feature to display some thumnabils of images. Here is what it looks like right now: http://jsfiddle.net/vXMMA/
What I would like to do is add a caption to these thumbnails.. can someone offer some idea on what changes to CSS I would need to make to enable this.
The latest bootstrap comes with a .caption class that you can add to your thumbnail grid, you can place it above or below your media grid quite easily and it works like so:
<ul class="thumbnails">
<li class="span2">
<div class="caption">
<h5>Caption above</h5>
</div>
<a class="thumbnail" href="#">
<img alt="" src="http://placehold.it/160x120">
</a>
</li>
<li class="span2">
<a class="thumbnail" href="#">
<img alt="" src="http://placehold.it/160x120">
</a>
<div class="caption">
<h5>Caption below</h5>
</div>
</li>
<li class="span2">
<a class="thumbnail" href="#">
<img alt="" src="http://placehold.it/160x120">
</a>
<div class="caption">
<h5>Caption below</h5>
</div>
</li>
<li class="span2">
<div class="caption">
<h5>Caption above</h5>
</div>
<a class="thumbnail" href="#">
<img alt="" src="http://placehold.it/160x120">
</a>
</li>
</ul>
<hr>
<ul class="thumbnails">
<li class="span4">
<div class="caption">
<h5>Caption above</h5>
</div>
<a class="thumbnail" href="#">
<img alt="" src="http://placehold.it/160x120">
</a>
</li>
<li class="span4">
<a class="thumbnail" href="#">
<img alt="" src="http://placehold.it/160x120">
</a>
<div class="caption">
<h5>Caption below</h5>
</div>
</li>
</ul>
You can center the caption inside the image container by just modifying the .caption class and adding the text-align: center property, like so:
.caption {
text-align:center;
}
Demo: http://jsfiddle.net/2BBnR/
Note Noticed this post is old, so the other method posted is irrelevant with the latest bootstrap, the .media-grid class is no longer used.
HTML
<li>
<a href="#">
<legend >Caption</legend>
<img class="thumbnail" src="http://placehold.it/140x90" alt="">
</a>
</li>
CSS
legend { margin:3px; text-align:center;width:100%}
Working DEMO
Just use the <legend> tag before or after each image, and add the text-align:center style to the image grid.
See this demo, it works great.