I want to load some content from a DIV tag as pop up text when i hover over an image. When i mouse leave from that image pop should disappear and when i again mouse over image content should show as pop up text. I am using HTML, Jquery, JS for this. It will be very useful if i get a solution using jquery load() method. Let me know ur response.
Or, without javascript:
<div class="tooltip-wrap">
<img src="/some/image/file.jpg" alt="Some Image" />
<div class="tooltip-content">
Here is some content for the tooltip
</div>
</div>
And this CSS:
.tooltip-wrap {
position: relative;
}
.tooltip-wrap .tooltip-content {
display: none;
position: absolute;
bottom: 5%;
left: 5%;
right: 5%;
background-color: #fff;
padding: .5em;
min-width: 10rem;
}
.tooltip-wrap:hover .tooltip-content {
display: block;
}
You could also try something very simple like:
<acronym title="pop-up text"><img src=...></acronym>
You can use Twitter Bootstrap with the tooltip plugin.
If you want just the plugin, you can build your own Bootstrap with the plugin only.
Finally if you want to stylize your tooltip, use CSStooltip.com.
Example :
span.tooltip:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-color: transparent #FFFFFF transparent transparent;
top: 11px;
left: -24px;
}
You can add the title attribute to the image. You don't need any extra tags or styling, just an attribute.
<p id="icon">Text to hover over</p>
<p id="info" style="display: none">Text to popup</p>
Then, finish it with javascript.
<script>
var e = document.getElementById('icon');
e.onmouseover = function() {
document.getElementById('info').style.display = 'block';
}
e.onmouseout = function() {
document.getElementById('info').style.display = 'none';
}
</script>
If you hover over the text, another will popup.
Related
I am working on a mobile first UI of an Angular project, where the div which is position: sticky needs to change its style, so how can I apply styling to the div only after it is stuck, without using jQuery, etc.
I've tried using https://developers.google.com/web/updates/2016/04/intersectionobserver
but I am not able to mock that functionality
.title {
font-size: 16px;
color: black;
}
/*On being stuck*/
.title
/*::stuck*/
{
font-size: 18px;
background: grey;
}
<div style="height: 700px;">
<div class="title" style="position: sticky; position: -webkit-sticky; top: 20px;">
This div is to be styled on being 'stuck'
</div>
</div>
<script>
position = document.getElementsByClassName("title")[0].style.position;
result = position === 'sticky';
console.log(result);
</script>
I looking for some ideas for solve my problem.
I use TINYMCE for add text on my page. I would like that after adding a picture to the text, in my form appeared options tag with text, that will be appear on the top of photo.
Have you any ideas how to do it?
What I would suggest you to do is to utilize existing image_caption option from it's image plugin.
https://www.tinymce.com/docs/plugins/image/
Which will wrap the embeded image with the follow:
<figure class="image">
<img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" alt="" />
<figcaption>Caption</figcaption>
</figure>
Use css style set your caption on top of the image
figure.image {
position: relative;
padding: 0;
margin: 0;
}
figure.image > figcaption {
position: absolute;
bottom: 10px;
left: 10px;
z-index: 3;
padding: 5px;
background-color: rgba(255,255,255,0.6);
}
jsfiddle: https://jsfiddle.net/v90vqt48/4/
I've created a custom modal popup box. To show or hide the modal box, I've used JQuery code. Below is my CSS style code and JQuery code
CSS
.overlay {
position: fixed;
background: #000;
opacity: .8;
height: 100%;
width: 100%;
display:none;
z-index: 999
}
.modal {
position: absolute;
margin: 30px auto;
background: #fff;
display:none;
height: 200px;
width:600px;
top: 60px;
}
JQuery Code:
function showModal(){
$('.overlay').show();
$('.modal').fadeIn(100);
}
HTML Code:
<div class="overlay"></div>
<div class="modal">
<div class="modal_title">My Title</div>
<div class="modal_inner">
My Modal Content
</div>
</div>
Now, it's showing below output.
I want to remove this disturbance from UI. But need to know why it's appearing?
Is my code wrong? or Is there any other possibilities of this issue? How can I solve it?
This is definitely not something caused by your code, but by the browser. Confirm by trying to use other browsers too.
There unfortunately isn't much you can do. You can wait for them to fix it, or you can try a different approach which happens to not screw up with the rendering, but those are the only options as I see it.
I suppose that you want to achieve something like this:
$('.overlay').show(400, function() {
$(this).append($('.modal'));
$('.modal').fadeIn(1000)
});
.overlay {
position: fixed;
background: #000;
opacity: .8;
height: 100%;
width: 100%;
display: none;
z-index: 999;
}
.modal {
position: absolute;
margin: 30px auto;
background: #fff;
display: none;
height: 200px;
width:600px;
top: 60px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overlay"></div>
<div class="modal">
<div class="modal_title">My Title</div>
<div class="modal_inner">
My Modal Content
</div>
</div>
You should use callbaks in order to make it work consecutively like overlay -> modal. That disturbance is related to fading in your modal - it is hapenning at the same time as the overlay appeares. They overlap and get animated so we see some weird visual effect related to page rendering while animating.
I'm wanting to create a div panel with a link which when clicked slides a panel in from the right, I have this working fine but I want to have the clickable link pushed out with the div panel and it's this I cannot figure out although i'm guessing it's really simple.
The html I have is:
<div class="quick-contact">
<div class="slide-toggle">Slide Toggle</div>
<div class="box">
<div class="box-inner">
content goes here
</div>
</div>
</div>
the css is this:
quick-contact {
background: #ccc;
float:right;
}
.box{
float:right;
overflow: hidden;
background: #f0e68c;
display: none;
}
.slide-toggle {
float: right;
position: relative;
right: 0;
}
/* Add padding and border to inner content for better animation effect */
.box-inner{
width: 400px;
padding: 10px;
border: 1px solid #a29415;
}
and the jquery is:
// use this docu ready //
jQuery(function($) {
$(".slide-toggle").click(function(){
$(".box").animate({
width: "toggle"
});
});
}); // end
I can get the panel to slide when I click the link but the clickable link just sits above the panel when it slides in, I need it to slide out with the panel, I need it to work like this http://www.sanwebe.com/assets/floating-contact-form/ The reason i'm not using that example is because I need to slidein panel to slide in the header div and not the body div like this example does.
Just place your <div class="slide-toggle">...</div> after <div class="box">...</div> (because you are using float: "right";). Make it look like this:
<div class="quick-contact">
<div class="box">
<div class="box-inner">
content goes here
</div>
</div>
<div class="slide-toggle">
Slide Toggle
</div>
</div>
Working example: http://codepen.io/anon/pen/GoPPPE
Here's a working example: https://jsfiddle.net/ruo8r7o8/2/
Essentially, what you want to do is:
Lose the float .. it complicates calculations
Animate the whole box, not just one part
Javascript action:
$(function(){
$('.slide-toggle').click(function(){
$('.quick-contact').animate({
right: $('.quick-contact').css('right') == '0px' ? "100px": "0px"
})
});
});
CSS action:
.quick-contact {
position: absolute;
right: 0;
}
.slide-toggle {
position: relative;
background-color: red;
}
.box {
position: absolute;
right: -100px;
width: 100px;
background-color: green;
}
How can I make this <div> hide itself when a click occurs outside of it? I would like to be able to hide it and then show the rest of the content of the page that is behind it.
<html>
<style>
.overlay
{
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #fff;
opacity: 0.5;
filter: alpha(opacity=50);
z-index: 80;
}
.popupContent
{
background: #fff;
padding: 5px;
border: 1px solid black;
position: fixed;
top: 100px;
left: 400px;
bottom: 365px;
right: 300px;
z-index: 81;
}
</style>
<div id="initialPopup">
<div class="overlay"></div>
<div class="popupContent" onclick="hideInitialPopup()">
Good Morning, Please Upload Your File Today!
</div>
</div>
<script>
function hideInitialPopup() {
document.getElementById("initialPopup").style.display = "block";
$("popupContent").mouseup(function(){
if(! mouse_is_inside) $
}
</script>
</html>
Use jQuery's event.target to determine if you've clicked within the box or not:
$(document).on('click',function(e) {
if (!$(e.target).closest('#my_div_id').length) {
$('#my_div_id').hide();
}
});
http://jsfiddle.net/mblase75/PNYTX/
Usually when you use a mask with something like a popup/dialog, it's easiest just to attach a click handler to the mask itself that hides the popup/dialog when clicked.
Here is a jfiddle: http://jsfiddle.net/peterdev001/SDNUj/