I am using bootstrap tooltip to display a tooltip with an image in it. I am so far this much successful
How ever my requirement looks like this
I need to move the arrow upward so it matches the design, Is there a way we can customize the position of the arrow ?
The below function works on mouseoverevent
function showToolTip(elem) {
var ttContent = '<img class=\'ttImage\' src=\'http:\/\/getbootstrap.com\/apple-touch-icon.png\' \/>';
$(elem).addClass("filter-text-highlight");
if (!$(elem).parent('a.ttTooltip').length) {
$(elem).wrap('<a data-toggle=\"tooltip\" class=\"ttTooltip\" style=\"text-decoration:none\" title=\"' + ttContent + ' \">');
$('a[data-toggle="tooltip"]').tooltip({
animated: 'fade',
placement: 'right',
html: true,
});
$(elem).tooltip().mouseover();
}
}
You can create your own tooltip that gives you more freedom. and it's pretty easy.
here is sample snippet. you just have to change opacity on hover a div.
.parent{
position:relative;
display:inline;
}
.tooltip{
opacity:0;
position:absolute;
right:-180px;
top:0;
background-color:#cccccc;
height:40px;
width:150px;
text-align:center;
padding-top:5px;
}
.tooltip::before{
content:"";
width: 0;
height: 0;
border-style: solid;
position:absolute;
left:-20px;
border-width: 10px 20px 10px 0;
border-color: transparent #cccccc transparent transparent;
}
.hover:hover + .tooltip{
opacity:1;
}
<div class="parent">
<button class="hover">Hover Me</button>
<div class="tooltip">hello World</div>
</div>
Related
Firstly, What I'm trying to accomplish is when you hover over a thumbnail on the lower left, the other thumbnails will become black. However, what I have now seems wierd as the other images flashes back too quick and has no transition.
Secondly, when you transition between thumbnails, I would like when you hover over a "blackened" image, the image will return with a transition, just like what I have at the bottom of my fiddle example.
I'm sorry for the slight confusion since it's two things combined, but I hope I explained it right.
$('.thumb-box').click(function() {
var theSRC = $(this).find('img').attr('src');
$(this).parents('.image-wrapper').find('.main-image').attr('src', theSRC).fadeIn();
});
//Resize image
$('.thumb-box').hover(function(){
$(this).siblings().find('.child-img').addClass('add-active');
}, function(){
$(this).siblings().find('.child-img').removeClass('add-active');
});
$('.main-image').each(function() {
if ($(this).height() > 550) {
$(this).addClass('higher-than-max');
} else if ($(this).height() <= 550) {
$(this).addClass('not-higher-than-max');
}
});
.parent{
border:1px solid purple;
height:100%;
width:80%;
float:Right;
}
.child{
border:1px solid red;
height:100%;
background:gray;
text-align:center;
}
.child-img{
display:inline-block;
max-width:100%;
margin:0 auto;
}
.image-wrapper{
width:100%;
background:orange;
}
.thumbnails img{
width:auto;
height:100%;
width:100%;
}
.thumbnails{
width:100px;
height:100px;
}
.thumb-box{
height:40%;
width:40%;
display:inline-block;
background:black;
}
.higher-than-max{
max-height:500px;
width:auto;
}
.not-higher-than-max{
max-height:100%;
width:auto;
}
.add-active{
transition:2s;
display:none;
}
.boxes{
height:100px;
width:100px;
background:black;
transition:.5s;
}
.boxes:hover{
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="child">
<div class="image-wrapper">
<img src="http://vignette2.wikia.nocookie.net/pokemon/images/b/b1/025Pikachu_XY_anime_3.png/revision/latest?cb=20140902050035" alt="374x333" class="main-image">
<div class="thumbnails">
<div class="thumb-box">
<img src="http://vignette2.wikia.nocookie.net/pokemon/images/b/b1/025Pikachu_XY_anime_3.png/revision/latest?cb=20140902050035" alt="374x333" class="child-img">
</div>
<div class="thumb-box">
<img src="https://i.kinja-img.com/gawker-media/image/upload/unnbgkdbmsszmazgxkmr.jpg" alt="800x450" class="child-img">
</div>
<div class="thumb-box">
<img src="http://vignette3.wikia.nocookie.net/scratchpad/images/0/02/Pikachu.gif/revision/latest?cb=20150217015901" alt="" class="child-img">
</div>
<div class="thumb-box">
<img src="http://cdn.bulbagarden.net/upload/thumb/0/0d/025Pikachu.png/250px-025Pikachu.png" alt="" class="child-img">
</div>
</div>
</div>
</div>
<div class="accomplish">
Image Hover Transition:
<div class="boxes"></div>
</div>
</div>
Personally, I would do this with pure CSS using pseudo elements to create the black overlays.
.thumb-box {
height: 100px;
position: relative;
width: 100px;
// Black overlay
&:after {
background-color: #000;
content: '';
height: 100%;
left: 0;
opacity: 0;// hide overlay to start
position: absolute;
top: 0;
transition: all 250ms ease-in-out;
width: 100%;
}
}
// Show all black overlays on hover
.thumbs {
&:hover {
.thumb-box:after {
opacity: 1;
}
}
}
// Hide black overlay on individual hovered item
.thumb-box {
&:hover {
&:after {
opacity: 0 !important;
}
}
}
Demo: http://jsbin.com/lanuni/edit?html,css,output
Note: I had to add an additional wrapper around each image since you can’t create pseudo elements on <img> tags (see CSS :after not adding content to certain elements).
I think the issue is your are trying to transition between display: inline-block and display: none
You can't transition display. See this question: Transitions on the display: property
First: it flashes b/c the gap between your thumbnail will force your mouse to hover out, thus create the flickering effect.
to solve this you can use setTimeOut() to delay between hovers.
Second: transition between display:block to display:none don't work well, use opacity instead, and put a black background between your thumbnail
I have two buttons, Edit_1 and Edit_2. By clicking on each one of them, an "expansion" div should appear right below the button which has been clicked.
In the function that I have written, if the display property of the "expansion" div is 'block' under edit_1 and one clicks edit_2, the widow will be displaced under edit_2. But if I click on edit_1 itself, the 'expansion' window will not disappear.
I could easily solve the problem by adding another "expansion" window, but as the 'edit' tags will increase, I need to move this 'one' expansion window among them correctly. I would be grateful if you kindly help me with this;
HTML:
<div id="container">
<div id="section_1"></div>
<div id="section_2"></div>
<button id="edit_1" onClick="edit(1);"></button>
<button id="edit_2" onClick="edit(2);"></button>
<div id="expansion"></div>
</div>
CSS:
*{
margin:0px;
padding:0px;}
body {
width:100%;
background-color:#F4F4F2;
margin-top:15px;
font-family:verdana;}
#container{
width:820px;
height:400px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
border: dashed 2px blue;
position:relative;
z-index:1;}
#section_1{
width:800px;
height:198px;
border-top: solid 2px #D24726;
background-color:#ffcccc;
top:0px;
position: absolute;
z-index:2;}
#section_2{
width:800px;
height:198px;
border-top: solid 2px #14826D;
background-color:#C1FBDE;
top:200px;
position: absolute;
z-index:2;}
#edit_1{
width:50px;
height:15px;
position:absolute;
margin-left:740px;
margin-top:15px;
border:none;
cursor:pointer;
z-index:4;
background:url(../images/edit.fw.png) no-repeat;}
#edit_2{
width:50px;
height:15px;
position:absolute;
margin-left:740px;
margin-top:215px;
border:none;
cursor:pointer;
z-index:4;
background:url(../images/edit.fw.png) no-repeat;}
#expansion{
width:200px;
height:120px;
background-color:#FFFFFF;
position:absolute;
z-index:3;
margin-left:600px;
top:0px;
padding-top: 40px;
padding-left:10px;
padding-right:10px;
border-top:solid 2px #D24726;
display:none;}
javascript:
function edit(clicked_edit){
var click=document.getElementById('expansion').style.display;
if (click=='block'){ /* in any case, if the display property is block, it turns it to none*/
document.getElementById('expansion').style.display='none';
}
var tp=document.getElementById('section_'+clicked_edit).offsetTop;
document.getElementById('expansion').style.top=tp+'px';
document.getElementById('expansion').style.display='block';
}
JSFiddle
JQuery Approach
you may find great use looking at this JSFiddle that uses a nice toggle effect.
the JQuery is:
jQuery(document).ready(function(){
jQuery('#hideshow').live('click', function(event) {
jQuery('#content').toggle('show');
});
});
I'm pretty sure you could make use of this in your project :)
Javascript Approach
Have a look at this one - it's not using JQuery and should be suitable for you :)
It was found here:
Another Approach
this demo is also another way of showing/hiding the div on press., so there's pleanty of options to choose from! :)
<script>
function showhide()
{
var div = document.getElementById("newpost");
if (div.style.display !== "none") {
div.style.display = "none";
}
else {
div.style.display = "block";
}
}
</script>
I want to know how to turn my two arrow buttons into scrolling buttons so you can scroll through the div container. IF you look at the demo below you will notice a window appears when you press the black square. One the window opens there are to black rectangle which indicate my scrolling buttons the the gray squares are the contents. I would like to remove the scroll bar but still have scrolling function which I can control with the two black rectangle buttons i made. I would also like the bottom black rectangle to be where the horizontal scroll bar is normally at and I would not like that button to fall into the scroll because that would void the whole purpose.
I would also like top button to disappear when the container is all the way at the top and the bottom button to disappear when the container is all the way at the bottom.
There is a website that I got this idea from so you can go look at it to see what I am talking about. It will be listed below! If you click the little map button on the left another window will open up with circle icons! You may have to shrink your browser for the scroll feature to appear but you will notice a button at the bottom which scrolls down and once you go all the way down it disappear and once you scroll down the up button appears to scroll up then goes away when you get to the top again.
Here is the example website! http://intothearctic.gp/en/
Here is some code!
HTML
<div id="sidemenu">
<div id="regionsContainer">
<div id="regionsUnitedStates" class="not-open regionsButton">
<div id="regionsUnitedStatesTooltip"></div>
</div>
</div>
<div id="regionsUnitedStatesChooseState" class="regionsContent">
<div id="chooseStateUnitedStatesColumnOne">
<div id="chooseStateUnitedStatesScrollUp"></div>
<div id="chooseStateAlabama1" class="not-open regionsButton"></div>
<div id="chooseStateAlabama2" class="not-open regionsButton"></div>
<div id="chooseStateAlabama3" class="not-open regionsButton"></div>
<div id="chooseStateAlabama4" class="not-open regionsButton"></div>
<div id="chooseStateAlabama5" class="not-open regionsButton"></div>
<div id="chooseStateAlabama6" class="not-open regionsButton"></div>
<div id="chooseStateAlabama7" class="not-open regionsButton"></div>
<div id="chooseStateUnitedStatesScrollDown"></div>
</div>
</div>
</div>
CSS
#sidemenu {
width: 60px;
height:100%;
min-width: 60px;
max-width: 60px;
background-color: #383D3F;
position: absolute;
left: -60px;
transition: left ease-in-out 0.5s;
top: 0;
}
#sidemenu.show {
left: 0;
}
#regionsContainer {
width: 60px;
height: 100%;
min-width: 60px;
max-width: 60px;
background-color: #383D3F;
position: absolute;
top:25%;
}
#regionsUnitedStates {
width: 60px;
height: 60px;
background-color:#111111;
}
#regionsUnitedStatesTooltip {
opacity:0;
background-color:#000;
height:60px;
width:180px;
left:100px;
position:absolute;
transition:all ease-in-out 0.25s;
top:0;
visibility:hidden;
}
#regionsUnitedStates.not-open:hover #regionsUnitedStatesTooltip{
left: 60px;
opacity:1;
visibility:visible;
}
#regionsUnitedStates:hover {
background-position:bottom;
}
#regionsUnitedStatesChooseState{
position:absolute;
transition:all ease-in-out 0.25s;
left: -150px;
width: 150px;
height: 100%;
background: #505759;
top:0;
z-index:-1;
overflow:auto;
}
#regionsUnitedStatesChooseState.show {
left: 60px;
z-index:-1;
}
#chooseStateUnitedStatesScrollUp {
width:150px;
height:40px;
background-color:#111111;
top:0%;
}
#chooseStateUnitedStatesScrollUp:hover {
background-position:bottom;
cursor:pointer;
}
#chooseStateUnitedStatesScrollDown {
width:150px;
height:40px;
background-color:#111111;
bottom:100%;
}
#chooseStateUnitedStatesScrollDown:hover {
background-position:bottom;
cursor:pointer;
}
#chooseStateUnitedStatesColumnOne {
width:100px;
height:100%;
float:left;
top:0%;
}
#chooseStateAlabama1 {
width: 100px;
height:100px;
background-color:#888888;
margin-left:25px;
margin-top:10px;
}
#chooseStateAlabama2 {
width: 100px;
height:100px;
background-color:#888888;
margin-left:25px;
margin-top:10px;
}
#chooseStateAlabama3 {
width: 100px;
height:100px;
background-color:#888888;
margin-left:25px;
margin-top:10px;
}
#chooseStateAlabama4 {
width: 100px;
height:100px;
background-color:#888888;
margin-left:25px;
margin-top:10px;
}
#chooseStateAlabama5 {
width: 100px;
height:100px;
background-color:#888888;
margin-left:25px;
margin-top:10px;
}
#chooseStateAlabama6 {
width: 100px;
height:100px;
background-color:#888888;
margin-left:25px;
margin-top:10px;
margin-bottom:10px;
}
JAVASCRIPT
$(function(slideSidemenu) {
setTimeout(function() { $("#sidemenu").addClass("show") }, 500);
});
var $regionsContent = $('.regionsContent'),
$regionsButton = $('.regionsButton').click(function(){
var $button = $(this).removeClass('not-open');
var buttonIndex = $regionsButton.index($button);
$regionsContent.removeClass('show');
setTimeout(function() {
$regionsContent.eq(buttonIndex).addClass('show');
}, 150);
$regionsButton.not($button).addClass('not-open');
});
$('#chooseStateAlabama').click(function() {
$(this).parents('.regionsContent').removeClass('show');
setTimeout(function() {
$("#regionsUnitedStatesAlabamaChooseCity").addClass('show');
}, 300);
});
$('#chooseStateAlaska').click(function() {
$(this).parents('.regionsContent').removeClass('show');
setTimeout(function() {
$("#regionsUnitedStatesAlaskaChooseCity").addClass('show');
}, 300);
});
DEMO
JSFIDDLE
This doesn't make the scrollbars disappear, nor does it hide buttons other than the example button scrolling out of view when moving down to paragraph four (so this isn't everything you need), but for a basic "click a div to scroll with jQuery" example, using code from this answer:
window.onload = init;
function init() {
$("#myButton").click(function() {
$('html, body').animate({
scrollTop: $("#foo4").offset().top
}, 2000);
});
}
Working example.
I have a bunch of divs in sort of a grid pattern, and when a tile div is clicked on, i want it to expand out to the right to show a previously hidden div. however, during the animation, the surrounding tile divs are put out of position for a moment before going back to their correct position after the animation completes. I would like it to just smoothly slide out to the right. click on the top left tile to see most closely what I mean.
Here's the JS code, but I assume there has to be some CSS tweak. see the fiddle for CSS.
$('.tile').on('click', function(){
$(this).find('.sparkline').show();
$(this).animate({
width : '326px'
},
600,
function(){
});
});
JSFiddle
All the Less:
.tiles{
.tile{
display:inline-block;
width:auto;
height:72px;
margin:8px;
background-color:#F1F1F1;
border:1px solid gray;
border-radius:5px;
cursor:pointer;
.origMetrics{
width:154px;
display:inline-block;
}
.sparkline{
display:inline-block;
width:154px;
height:53px;
float:right;
}
.seperator {
margin: 0 15px 5px 15px;
border-color:black;
}
.metrictitle{
display:block;
margin-left:auto;
margin-right:auto;
text-align:center;
}
.metricvalue {
display:inline-block;
text-align:left;
width:auto;
margin-left:10px;
font-size:25px;
}
.metrictrend {
float:right;
margin-right:10px;
margin-top:5px;
}
.positive{
color:green;
img{
position:relative;
bottom:15px;
left:15px;
}
}
.negative{
color:red;
img{
display:none;
}
}
.even{
img{
display:none;
}
}
}
}
Try placing the showing of the sparkline div inside of the .animate() complete callback function.
The sparkline container was being shown and taking up space in the DOM prior to the animation being completed. This led to the appearance of a jump in the animation.
For an even cleaner look, you can use .fadeIn() instead of .show() on the sparkline container.
$('.tile').on('click', function () {
$(this).animate({
width: '326px'
}, 600, function () {
$(this).find('.sparkline').fadeIn();
});
});
In addition, in IE and Firefox it appears that the display: inline-block style on the tiles was interfering with the overflow: hidden that gets applied as part of the animation. When you utilize inline-block, I would highly suggest also setting the vertical-align property accordingly. In your case, I believe vertical-align: top would be the best setting for the tiles.
.tile{
display:inline-block;
vertical-align: top;
width:auto;
height:72px;
margin:8px;
background-color:#F1F1F1;
border:1px solid gray;
border-radius:5px;
cursor:pointer;
}
jsfiddle
I'm wondering how to enable the clicking on a :before pseudo-element (the orange part of the div on the JSfiddle I link to below). I've read that since pseudo-elements aren't in the DOM you would need a hack for this. Unfortunately, I can't find an existing Stackoverflow Q&A that actually shows working code.
Link: http://jsfiddle.net/Vv6Eb/4/
HTML:
<div></div>
CSS:
div { position:relative; background-color:#333;
padding:20px; margin:20px; float:left;
}
div:before { content:""; display:block;
padding:5px; background-color:#f60; border:2px solid white;
position: absolute; top:-2px; right:-2px; border-bottom-left-radius: 10px;
}
If you know where the circle "should" be, you can use trigonometry to see if the click is within the circle: http://jsfiddle.net/Vv6Eb/19/
$("div").click(function(e){
var $me = $(this),
width = $me.outerWidth(),
height = $me.outerHeight(),
top = $me.position().top,
left = $me.position().left;
var len = Math.sqrt(Math.pow(width - e.offsetX, 2) + Math.pow(e.offsetY, 2));
if (len < 10)
alert('ding');
});
A workaround for this would be to dynamically append a <span> to the item and assigning a click method to it. Like this fiddle.
var item = $('<span />');
item.click(function() { alert('click'); });
$('div').append(item);
CSS
div { position:relative; background-color:#333;
padding:20px; margin:20px; float:left;
}
div span { content:""; display:block;
padding:5px; background-color:#f60; border:2px solid white;
position: absolute; top:-2px; right:-2px; border-bottom-left-radius: 10px;
}
I know you are trying to use :before, but for this situation, can't you just create a new div with a class to use as a hook and append it to the original div?
Something like this might work:
var newDiv = $("<div class='orangeCircle'>");
$(".parentDivToOrangeCircle").append(newDiv);
And the CSS:
.parentDivToOrangeCircle { position:relative; background-color:#333;
padding:20px; margin:20px; float:left;
}
.orangeCircle {
padding:5px; background-color:#f60; border:2px solid white;
position: absolute; top:-2px; right:-2px; border-bottom-left-radius: 10px;
}
Do simply like using jquery
$(document).on("click", "span", function(e){
if (e.offsetX > $(this)[0].offsetWidth) {
alert('clicked on after');
}
else
{
alert('clicked on main span');
}
})
div { margin: 20px; }
span:after { content: 'AFTER'; position: absolute; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><span>ELEMENT</span></div>
My purpose was solved by another workaround which is just adding a child DIV. Wrapping up all child elements inside the parent into this new child DIV:
My working sample as same as the problem statement: See Fiddle
HTML:
<div class="parentDiv">
:before
<div class="childDiv">
<!-- child elements -->
</div>
</div>
**Note: Ignore the :before in the HTML, just showing to understand.
CSS:
div.parentDiv{position:relative; background-color:#333; padding:0; margin:20px; float:left; }
div.parentDiv:before { content:""; display:block; padding:5px; background-color:#f60; border:2px solid white; position: absolute; top:-2px; right:-2px; border-bottom-left-radius: 10px; cursor:pointer}
div.childDiv{padding:20px; margin:0}
jQuery:
jQuery(document).ready(function($){
$('div.parentDiv').click(function(e){
if( $(e.target).closest('.childDiv').length==0 ){
//so clicked on psudo :before element!
//do your work here ;)
alert('Psudo :before element is clicked!');
}
});
});