How to make callout window appear when mouse hovers over this shape? - javascript

I have this jsfiddle.
http://jsfiddle.net/helpme128/3kwwo53t/2/
<div ng-app="test" ng-controller="testCtrl">
<div id="container">
<div class="shape" ng-draggable='dragOptions'></div>
</div>
</div>
I would like to make a callout window appear with the text "Callout" when the mouse pointer touches the white square. When the mouse leaves the white square, the callout window disappears. How can this be done? Are there angularjs modules suitable for this task?

check out the fiddle I made, CSS only:
http://jsfiddle.net/3kwwo53t/16/
.shape::after{
display:none;
height: 50px;
width: 50px;
background-color:blue;
content:'Callout';
position:relative;
left:20px;
}
.shape:hover::after{
display:block;
}
EDIT:
Angular way: http://jsfiddle.net/3kwwo53t/18/
you can change text using the dragOptions

Related

Filter apply on element only if object is on the specific DIV, but not being inside of DIV

I have script which detects two h4 elements and by position absolute it puts lines on them.
how lines look like
if you scroll they start to fill with orange color. But since they are put as position absolute on entire body, the problem is when those elements are going into an DIV with background-color:orange because the lines that are filling are also orange and I would like to make them blue, by adding something like filter: Invert
problem with orange line on orange background
So here is a question, if it's possible to make the line blue only if the lines are placed on that DIV with BG orange?
Maybe somehow it's possible to do it with JS viewport?
I will not add codes here of what I done because it's too long and too complicated.
But here is a short code of what I mean to help visualize the problem:
<div style="height:400px; width:100%;">
</div>
<div style="height:400px; width:100%; background-color:orange;">
</div>
<div style="height:500px; width:100px; position: absolute; top:100px; left:50%; background-color:orange; border:solid grey 1px;">
</div>
So the smaller orange div have border grey to help you see the whole orange div which is placed partialy on other div with background orange. So I want to achieve that the part of smaller orange block become different color for example blue if it's visible on that bigger orange div.
And ofcourse I cannot just put the smaller div inside of big one, because everything is placed with scripts that are complicated so I do not want to rewrite whole code. But if ofcourse if what I want to achieve is not possible then I will need to change whole block to different color and that's it.
SOLUTION!
Ahhh managed to do it with the trick of adding another DIV that detect position top of orange DIV and height of it, and places transaprent div on it with backdrop-filter.
orange line changes to blue when entering orange div
The code without complicated JS that check top position of element.
<div style="position:relative;">
<div style="height:400px; width:100%;">
</div>
<div class="backdrop-reverse" style="height:400px; width:100%; background-color:orange;">
</div>
<div style="height:500px; width:100px; position: absolute; top:100px; left:50%; background-color:orange; border:solid grey 1px;">
</div>
<!-- additional invisible block that changes color of everything on orange div -->
<div style="backdrop-filter: hue-rotate(200deg); width:100%; height:400px; position: absolute; left:0; top:400px; content: ''; z-index:100; pointer-events: none;"></div>
<style>
.backdrop-reverse{
overflow: hidden;
filter: hue-rotate(160deg); /*Just a bit if luck with hue rotation, it creates very similar orange color, but it's not the same, might be problem with different hue rotations*/
</style>
</div>

Creating a parallax-like effect using an image that isn't the background

I'm trying to create a scrolling effect that preferably doesn't use javascript (CSS only) but I understand if it's not possible, just exploring options.
My page looks like this:
When scrolling down I want the background image to have a parallax-like effect, staying static while the body's background and frame move around it.
Here's a sample of code to work with:
http://jsfiddle.net/J8fFa/7/
HTML
<body>
<div class="border-bg">
<div class="image-bg"></div>
</div>
<div class="border-bg">
<div class="spacer">
</div>
</div>
</body>
CSS
body{
background-color:#aaa;
}
.border-bg{
width:80%;
margin:30px auto;
background-color:#fff;
padding:40px;
}
.image-bg{
background:url('http://i.imgur.com/7cM1oL6.jpg');
height:400px;
background-size:cover;
}
.spacer{
height:900px;
}
I can see how this would work if the image was the background for the body, but as this is sitting on top of the body is there any way I can manipulate it to have a similar visual effect?
change your .image-bg class to:
.image-bg{
background:url('http://i.imgur.com/7cM1oL6.jpg') fixed;
height:400px;
background-size:cover;
}
this will prevent the image from scrolling
updated fiddle: http://jsfiddle.net/J8fFa/9/

Can't align vertically a .swf file to the middle

I inserted a .swf file to my page inside a div, and I tried to make it vertically aligned to the middle of this div, but it didn't work, only horizontally but that's not what I want.
I tried to place this file in another div inside the main div and change the alignment of this div as well.
Any suggestions?
Here is a good way I use to center elements horizontally and vertically:
<div style="position:fixed; top:0; left:0; width:100%; height:100%;">
<div style="height:100%; display:table; margin:0 auto;">
<div style="vertical-align:middle; display:table-cell;">
<div><p>This is a fully-centered div!</p></div>
</div>
</div>
</div>
Hmm... its kinda hard to answer without a code snippet.
Here is an article for creating wrappers around Flash content: http://livedocs.adobe.com/flex/3/html/help.html?content=wrapper_13.html
Scroll down to the table, where they start talking about "align" or just do a page search for the word "align" to see what they have to say.
Here is also a quick idea, I have noooo idea whether or not it works, just food for thought:
div.SWFContainer object, div.SWFContainer embed {
display: inline-block;
margin: auto 0px auto 0px;
width: auto;
vertical-align: middle;
}

Center Content horizontally and vertically with scrollbars?

I have a div with width: 400px and height: 300px
Inside the div I will insert some Text which should be aligned horizontaly and verticaly.
if the text inside the div is bigger than the div, it should show the scrollbars. Here is a picture which shows what i mean:
The following works in webkit & geko & IE8 upwards. Try some of these techniques for vertical centering if you need legacy IE compatibility: http://blog.themeforest.net/tutorials/vertical-centering-with-css/ OR Vertically and Horizontally Center Image inside a Div, if you don't know Image's Size?
<div style="height:300px; overflow-y:auto; border:solid 1px #CCC; width:400px;">
<div style="display:table-cell; vertical-align:middle; height:300px; text-align:center; width:400px;">
test
</div>
</div>
you might want to use on div as a container and then put your text in another div
you might also want to check out jscrollpane
div.container {
overflow: auto;
text-align: center;
}
<div class="container">
<p align="center">
<h2>Heading 1</h1>
<h2>Heading 2</h2>
</p>
</div>
Also try to set a fixed height for your container so you can get the scroll bars
div.container {
max-height: 200px
}
The post by cronoklee works good too u might want to combine the two methods to get exactly what you want

Increase size of image of click

Its pretty simple to see what I mean if you look at the image, which I also need to shrink back if you click it again, it needs to be animated as well:
The image link http://www.keironlowecreative.x10hosting.com/Help.png
jquery
$(document).ready(function(){
$("#what > img").click(function () {
$("img").toggle("slow");
});
});
html
<div id="what">
<img src="small_img" />
<img src="big_img" style="display: none" />
</div>
toggle
You could use one of the horizontal accordion plugins for this.
Excuse the inline styles... Pixels aren't exact. Use the same image twice, one div on top of the other:
<div id="wrapper" style="position:relative; height:20px;">
<div id="top" style="background:url(...) top left no-repeat; position:absolute; height: 20px; width:18px; top:0; left:0; z-index:2;"></div>
<div id="under" style="background:url(...) top right no-repeat; position:absolute; height:20px; width:20px; top:0; left:2px; z-index:1;"></div>
</div>
So the top div is showing the plus and the left corner. The bottom div is showing the right corner - over two pixels so it's not showing under the corners of the top element. If the image is opaque, this doesn't matter...
Animate the width of the under div to get the effect. No fading, only one image. Should be small and quick to animate.

Categories