Go to google, and without typing anything in, hover your mouse over the "I'm Feeling Lucky" button. See what it does?
I can't think how to do that...on:hover....but the actual content and animation itself, how?
It's not the button that's animating.
They have a hidden div, positioned over the button. It's absolutely positioned.
It contains a lot of spans with all the messages.
On hover, they use a function to move that div around, and make it visible.
It looks like the contents of the button are moving, but they aren't really.
<button></button>
<div style="display: none; font-family: Arial,sans-serif; overflow: hidden; text-align: center; z-index: 50; height: 27px; position: absolute; left: 667px; margin: 0px; top: 45px; width: 114px;>
<div style="left: 0px; position: absolute; right: 0px; white-space: nowrap; top: -29px;">
<!-- spans go here -->
</div>
</div>
See the value, -29px? That's all that's changing.
Add a class, ie: focus, for the borders and bold face and the toggle it with jQuery:
$('#button').hover( function () {
$(this).addClass('focus');
}, function () {
$(this).removeClass('focus');
} );
The actual rules you can see Google is using with Chrome are:
.gbqfba-hvr:focus,.gbqfbb-hvr:focus{
-webkit-box-shadow:inset 0 0 0 1px #fff,0 1px 1px rgba(0,0,0,.1);
-moz-box-shadow:inset 0 0 0 1px #fff,0 1px 1px rgba(0,0,0,.1);
box-shadow:inset 0 0 0 1px #fff,0 1px 1px rgba(0,0,0,.1)
}
.gbqfb-hvr,.gbqfba-hvr,.gbqfbb-hvr{
-webkit-box-shadow:0 1px 1px rgba(0,0,0,.1);
-moz-box-shadow:0 1px 1px rgba(0,0,0,.1);
box-shadow:0 1px 1px rgba(0,0,0,.1)
}
Related
Trying to customize tooltips I created. I would like the tooltip to appear right below the hover text, to be responsive and most importantly to make the text multiline. By this I mean when I want my tooltip to instead of spreading horizontally to spread vertically.
So adjusting the width of the text, the longer the text the longer the vertical size of the container as opposed to the text flowing horizontally.
This is what I have tried thus far:
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
color: black;
}
.tooltip:hover {
text-decoration: none;
}
[data-title]::after {
content: attr(data-title);
background: rgba(0, 0, 0, 0.2);
color: #111;
-website-transform: translateY(50%) translateX(-55%);
transform: translateY(50%) translateX(-55%);
word-wrap: break-word;
height: 350px;
position: absolute;
padding: 1px 5px 2px 5px;
bottom: -2.6em;
left: 0%;
white-space: nowrap;
box-shadow: 1px 1px 3px #222222;
opacity: 20;
border: 1px solid #111111;
z-index: 99999;
visibility: hidden;
}
<p>Words words <a class="tooltip" data-title="Title text.">link text</a> words.
More words <a class="tooltip" data-title="More link text.">more link text</a>.</p>
You can try this-
[data-title]:after {
content: attr(data-title);
background: rgba(0,0,0,.9);
color: #fff;
word-wrap: break-word;
height: auto;
width: 100px;
position: absolute;
padding: 1px 5px 2px 5px;
top: 18px;
left: 0;
word-break: break-all;
box-shadow: 1px 1px 3px #222222;
opacity: 20;
border: 1px solid #111111;
z-index: 99999;
visibility: hidden;
}
.tooltip {
color: blue;
position: relative;
cursor: pointer;
}
[data-title]:hover::after{
visibility: visible;
}
We would start off by collecting our data. The collection method will vary depending on what sources we are using. After this process we would then proceed to <a class="tooltip" data-title="The train_test_split function in sklearn splits the dataset into training and test data randomly. You can manually set the test_size option to define the proportion of the dataset to be included in both the test and training splits, by default this value is 0.25 meaning the training set will contain 75% of the data while the test set contains 25% of the data.">split the data</a> into two sets; training and test data. We use the training data to train our model and the test data to <a class="tooltip" data-title="We split the data into training and test data because we want our model to generalize to data it has not been exposed to">test its performance</a>.
Note: For the better performance you have to use javascript for tooltip placement, Auto placement adjustment etc.
so what I'm trying to accomplish is to have a large image, in this case a map, inside a smaller div with scroll bars that let you look at the rest of the map. I'm using class="img-responsive" at the moment but it makes the image the same size as the div which i do not want since when the user is looking for a road if the map is too small they wont be able to see it. I also tried to set a max-height for the div but the image is overflowing onto the background. Please help.
.ibox-content {
background-color: #ffffff;
color: inherit;
padding: 15px 20px 20px 20px;
border-color: #e7eaec;
border-image: none;
border-style: solid solid none;
border-width: 1px 0px;
max-height: 350px;
}
<div class="ibox-content" id="ibox-1">
<div class="active content" id="elementMap">
<img class="img-responsive" src="//lorempixel.com/600/600">
</div>
</div>
Remove img-responsive, because it gives the style max-width: 100% to the element, meaning the image can never be wider than its parent.
Add overflow: auto; to the container:
.ibox-content {
background-color: #ffffff;
color: inherit;
padding: 15px 20px 20px 20px;
border-color: #e7eaec;
border-image: none;
border-style: solid solid none;
border-width: 1px 0px;
max-height:350px;
overflow: auto;
}
Div with overflow: scroll or overflow: auto will solve your problem.
I am modifying bootstrap based HTML editor. I have done image uploading part.In image uploading, I am creating an image inside a div.
<div style="border: 1px solid;padding: 10px; width: 300px;resize: both;overflow: auto;">
<img src="uploads/images/dark_knight.jpg">
</div>
I want image to be resizeable hence,
element.style {
border: 1px solid;
padding: 10px;
width: 300px;
resize: both;
overflow: auto;
}
But the issue is when I am hitting a down key cursor is going inside a div containing an image (instead of below a div).
so what changes should I do in order to bring cursor below a div on pressing key down?
Demo: http://jsfiddle.net/u37cxxbh/2/
Make div contenteditable="false" and add textarea element next to image. As in example above.
Simply adding
contenteditable="false"
to the div containing the image seems to solve the problem.
#editor {
overflow: scroll;
max-height: 250px;
height: 250px;
background-color: white;
border-collapse: separate;
border: 1px solid rgb(204, 204, 204);
padding: 4px;
box-sizing: content-box;
-webkit-box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
overflow: scroll;
outline: none;
}
div {
display: block;
}
<div id="editor" contenteditable="true">First line
<div>
//after clicking down arrow key cursor going inside an image div
<div style="border: 1px solid;padding: 10px; width: 300px;resize: both;overflow: auto;" contenteditable="false">
<img src="abcd.jpg">
</div>
</div>
<div>
<br>
</div>
<div>Last line</div>
</div>
I posted this again, but I guess I wasn't clear enough on my problem.
I have a 'hidden' fixed element that I want to open from the side when clicking on it.
Style:
<style>
#fixed {
position: fixed;
width: 200px;
top: 120px;
left: -200px;
height: 200px;
z-index: 5;
}
.leftc {
left: 0 !important;
}
</style>
Html:
<div id="fixed">
<div id="fixedbtn"><a href=#>btn</a></div>
</div>
Jquery:
<script>
$("#fixedbtn a").click(function(e) {
$('#fixed').toggleClass('leftc');
})
</script>
So, my problem is that when I click on the button the body scrolls back to the top! I have no idea why this is happening. I have tried using this code:
var windowPos = $(window).scrollTop();
$('body, html').animate({scrollTop: windowPos}, "fast");
...but I can see the scrollbar move at the top and back to the correct position. I tried removing the 'fast', but no luck.
Help! I would really like someone to also EXPLAIN why this is happening; I have tried everything!
The reason it's scrolling the body back to the top is because of your href tag,
btn
"#" is an anchor. Example: If i set my a tag's href to "#myDiv", it'll scroll to the div with the id "myDiv". Since you only put a "#", it'll just scroll to the top.
edit
If you really want your a tag to go nowhere, you can try this
btn
Is this what you are looking to achieve?
Here is a JSFiddle example for you to look at: CLICK HERE
HTML:
<div class="fixed"></div>
Button
CSS:
.fixed {
position: fixed;
width: 0px;
top: 120px;
left: -10px;
height: 200px;
z-index: 1;
border: 5px solid #ccc;
background-image: url("http://www.cinemablend.com/images/news_img/7768/_7768.jpg");
background-position: center;
background-size: cover;
}
.fixedbutton {
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
background-color:#ededed;
text-indent:0;
border:1px solid #dcdcdc;
display:inline-block;
color:#777777;
font-family:"Courier",sans-serif;
font-size:15px;
font-weight:bold;
font-style:normal;
height:50px;
line-height:50px;
width:100px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #ffffff;
}
.fixedbutton:hover {
background-color:#dfdfdf;
}
.fixedbutton:active {
position:relative;
top:1px;
}
jQuery:
$('.fixedbutton').toggle(function() {
$('.fixed').stop().animate({
width: "200px",
}, function() {
$('.fixed').stop().animate({
width: "-10px",
}, 1000);
});
I adjusted the functionality that you had from a click to toggle event. Hope this is what you are looking for.
I'm trying to create a stop/start button for an ibooks read-aloud fixed layout book, and I want to prevent the page from turning at the location of this button. The HTML element is as follows.
<p ibooks:readaloud="startstop" id="rass" ontouchstart="prevent(event)">SS</p>
The javascript is as follows.
function prevent(event){
event.preventDefault();
}
So ibooks:readaloud attribute makes the read aloud start and stop when the p tag is touched, however, preventing default behavior of on touch also prevents the behavior of the ibooks:read aloud attribute.
Is there a way for me to manually start and stop the read aloud, or to prevent only the page turn?
Add this code to your HTML file:
<p ibooks:readaloud="startstop" id="rass">✵</p>
And put this into your CSS file:
html p#raplay {
top: 955px;
left: 700px;
color: green;
padding: 0px 6px 0 10px;
background: white;
border: 2px solid black;
border-radius: 15px;
}
html p#rastop {
top: 955px;
left: 700px;
padding: 0px 6px 0 10px;
color: red;
display: none;
background: white;
border: 2px solid black;
border-radius: 15px;
}
html p#rass {
top: 955px;
left: 700px;
padding: 2px 6px 4px 8px;
color: green;
background: white;
line-height: 40px;
border: 2px solid black;
border-radius: 15px;
}
html.-ibooks-media-overlay-enabled p#raplay {
display: none;
}
html.-ibooks-media-overlay-enabled p#rastop {
display: block;
}
if that p tag click, the read aloud will stop. that is the default of the read aloud. you dont need to use javascript.