I currently have a div appearing on hover, but it just pops up rather than sliding in:
#home-heroImage{
padding: 0px;
margin: 0px auto;
width:980px;
height: 525px;
position: relative;
z-index: 1;
background-color: #fcba2e;
}
#home-hero-pop{
background-color: #ffffff;
opacity:0.8;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
font: 16px Helvetica,Arial,sans-serif;
font-weight: bold;
color: #6d6e70;
text-align: left;
padding: 10px;
position: absolute;
right: 0px;
top: 0px;
height: 505px;
width: 460px;
z-index: 2;
}
Fiddle.
After looking through the posts on SO, I found this example, which would work if I could get it to slide in from the right instead of the bottom. I don't know much about JavaScript or jQuery so the modifications I've tried to make to this code are not producing the desired effect:
$(document).ready(function(){
$('.up-down').mouseover(function(){
$('.default').stop().animate({
height: 0
}, 200);
}).mouseout(function(){
$('.default').stop().animate({
height: 200
}, 200)
})
});
Fiddle.
I've tried reading several JavaScript articles online but they're over my head right now.
Based on the example you give, here's it sliding in from the right.. is this what you are after? http://jsfiddle.net/jPneT/208/
EDIT 2017
Too much jQuery
You're right, here's a CSS alternative
.left-right {
overflow:hidden;
height:200px;
width:200px;
position:relative;
background-color:#333;
}
.slider {
width:200px;
height:200px;
position:absolute;
top:0;
right:-200px;
background-color:#000;
color:#fff;
transition:0.4s ease;
}
.left-right:hover .slider {
right:0;
}
<div class="left-right">
<div class="slider">Welcome !</div>
</div>
My answer uses no JavaScript. CSS can handle this automatically for you.
Here's a link to a fork of your code as a working example:
http://jsfiddle.net/g105b/Adk8r/11/
There is only a little change from your example. Rather than hiding the element and showing it with display property, the element is placed off-screen using right: -480px (where 480 is the cumulative width), and moving it to right: 0 when the mouse hovers.
Using CSS transitions provides the animation, and support is very good now: http://www.caniuse.com/#search=transition
This technique allows all browsers back to IE6 view and use your website, but users with older browsers will not have an enhanced experience. Unless you require the animation - as in, it is a feature for it to animate - I would suggest using CSS transitions to futureproof your website and use web standards.
Users of deprecated browsers deserve a deprecated experience.
Fiddle: http://jsfiddle.net/BramVanroy/Adk8r/10/
As said: please learn to write logical and correct HTML. Your markup is invalid and unlogical. You should perfect your HTML and CSS and then study JavaScript and jQuery rather than trying to get a hang of everything at once. This code is a pain to the eye.
Here's what's wrong:
Try to avoid large chunks of inline style and JavaScript.
You use a span where one would use a heading-tag (<h1>Welcome</h1>) and style it via CSS.
You use line breaks <br /> where one would use paragraphs:
<p>This div appears on hover but I would like to slide in from the right instead of just appearing.</p>
There's no structure in your code. This is not necessary to create a working website, but it's good practice to give child elements an indent of two or four spaces. This way, it's very clear for yourself which element is which child or parent. The same is true for your CSS rules: it's better to put your selector first and then the rules (indented) like so:
h1 {
font-weight: bold;
font-size: 160%;
}
You have a closing </a> tag but there's no opening <a>.
There is a very simple way to do it using css3.
instead of going through the hassle of javascript
try something like in the CSS:
div.move {
height: 200px;
width: 200px;
background:#0000FF;
color:#FFFFFF;
padding:10px;
}
/*on mouse hover*/
div.move:hover {
/*General*/
transform:translate(200px,100px);
/*Firefox*/
-moz-transform:translate(200px,200px);
/*Microsoft Internet Explorer*/
-ms-transform:translate(200px,100px);
/*Chrome, Safari*/
-webkit-transform:translate(200px,100px);
/*Opera*/
-o-transform:translate(200px,100px);
}
in the HTML:
<div class="move">Anything is here moves!</div>
Also the translate works on an x/y axis.
This is very simple. All you need is HTML, CSS and jQuery.
Make a solid div.
Make the parent div to hide overflow (overflow:hidden) in CSS.
Assign a margin-left of 100% (or some length) that the required div hides away because of margin.
Do a jquery animate() function to bring down margin-left to 0 or 0%.
You can also set the speed of animation by giving time in ms (milliseconds) or some expression like slow or fast
Related
[this is another question related to something i posted earlier]
I have a p tag inside an anchor, there many be a variable number of instances of this during the loop. My goal is to on hover make the p tag expand and show more information. I have this so far in terms of mouseover.
$('.boxOPToneplustwo').mouseover(function (e) {
console.log("in");
$('p', this).addClass('popupHighlight')
});
I need to edit this code to allow the p tag to increase its height in relation to the amount of text in the element. if it needs three lines it will expand that amount and vice versa.
.popupHighlight {
height: 3.6em !important;
}
As you can see it is hard coded at this point to a certain height, is there a away to get around this issue?
you can do this by setting some values in css
.popupHighlight {
min-height:100px;
overflow:hidden;
}
it will expand according to the size of the content
Hey this thing is very easy to do.
Here is a fiddle
http://jsfiddle.net/robbiebardijn/vAyn9/
.boxOPToneplustwo{
background-color: red;
height: 1em;
line-height: 1em;
position: relative;
overflow: hidden;
transition: height 1s ease
}
.boxOPToneplustwo.popupHighlight{
height: 3em;
}
I'm developing a chrome extension, without going too much into it I need to inject some code into webpages and put an overlay over the full page. Thus far I have nearly achieved this butI just cannot seem to get the overlay over certain parts of some websites. These include videos from youtube, the searchbar on top of google search results, random parts of kongregate (the stars and monthly comp info).
Below is the css I'm currently using to achieve this, I have played around and looked for solutions at various places but no solutions seems to work.
.cssX9482Overlay
{
position: fixed;
width: 100%;
Height: 100%;
vertical-align: middle;
background: #000000;
opacity: 0.97;
filter: alpha(opacity=97);
text-align: center;
top: 0;
left: 0;
}
The strange css name is just so it doesn't clash with pages formatting. As you probably guessed this is being used to format a div
Remember this is a Chrome extension, therefore HTML5 and CSS3 solutions are valid.
<style type="text/css">
iframe, div {
position:absolute;
top:20px;
left:20px;
width:200px;
height:25px
}
iframe { z-index:1 }
div {
z-index:2;
background:#000;
border:solid 1px red;
color:#fff;
}
</style>
<applet code="myApp.class" width="700" height="700"></applet>
<iframe></iframe>
<div>EXAMPLE TEXT</div>
TAKEN FROM: http://www.bluestudios.co.uk/blog/?p=6
Also you had height capitalized
You might need a z-index in there; on a Google search results page for me, adding a z-index: 999; covers everything except the top navigation (Web, Images, Videos). This is because Google's CSS looks like:
#gbz, #gbg {
...
z-index: 1000;
}
Elements with a larger z-index are placed on top of others. Even while using this property, I've had problems in the placing content on top of Adobe Flash elements and Java applets.
I have a layer that is presented by a logic var.
that layer is just a hidden div - how do I make it so the layer is the only element that can be interacted with on the page when it is visible?
thanks!
Update:
used a full size div in the background with a transparent gif - works in firefox, but not IE - thoughts?
#overlay {
background-image: url('../images/transparent.gif');
width:100%;
height:100%;
z-index:8999;
display:none;
margin-top: 0;
margin-left:0;
position:fixed;
}
The basic approach is to put a semi-transparent element over your whole page, but under your modal window that contains your focus element. JQuery doesn't have this built in, so you can either create your own using that approach or use a JQuery plugin.
UPDATE:
Here's a fiddle based on the comment discussion. I've tested this and it works in IE8, Firefox 3.5.15, and Chrome 12.0.742.112.
HTML:
<div class="overlay"></div>
<div>test</div>
<input/>
<div class="modalWindow ">
foo:
<input/>
</div>
CSS:
.overlay {
opacity:.1;
filter:alpha(opacity=10);
background-color: black;
width:100%;
height:100%;
z-index:8999;
margin-top: 0;
margin-left:0;
position:fixed;
}
.modalWindow {
z-index:9000;
position: fixed;
background-color: white;
top: 20px;
left: 20px;
width: 200px;
height: 100px;
}
It sounds like you are creating a modal dialog. You can use jQueryUI to handle this:
http://jqueryui.com/demos/dialog/#modal-confirmation
Sounds like you're looking for a modal
You can use a jQuery UI Modal
BlockUI jQuery plugin is an alternative to using jQuery UI modals. This is a neat demo that shows how you can disable a specific background element in a slightly different fashion: http://jquery.malsup.com/block/#element
To answer your question update:
You could make your gif transparent with CSS2.1 and CSS3 because there are problems with transparent gifs/pngs in some browsers:
#overlay {
background-image: url('../images/transparent.gif');
width:100%;
height:100%;
z-index:8999;
display:none;
margin-top: 0;
margin-left:0;
position:fixed;
/* for IE, the filter only works reliably on positioned elements */
filter: alpha(opacity=40); -moz-opacity: 40%; opacity: 0.4;
}
wondered if any one knew of a way of creating a floating menu bar that sticks to a point on a page until the browser window gets far enough down the page and unsticks it and then the menu bar begins to scroll along with it. The effect I want is the exact same as this http://www.jtricks.com/javascript/navigation/floating.html javascript menu. However, I really want to do this with CSS. I am aware I can make the div Absolutely positioned and it will move down the page, I tried making one DIV relative positioned (parent div) and then another div inside this which was absolute positioned, but I could not get this to work. Does any one know how to make this work with CSS or does it need to be JS?
Thanks in advance.
Jon.
I believe using javascript is the only solution to get the effect you described. Here's a quick demo of a banner that starts in a absolute position and goes to fixed when the user scrolls.
<div style="height:1000px;width:500px;">
<div id="floatbar" style="background:gray;
width:200px;
height:40px;
position:absolute;
left:0;top:200px;">
</div>
</div>
$(window).scroll(function(){
if ($(window).scrollTop() >= 200)
{
$("#floatbar").css({position:'fixed',left:'0',top:'0'});
}
else
{
$("#floatbar").css({position:'absolute',left:'0',top:'200px'});
}
});
well if you do NOT need the animation, than just use
position: fixed;
in the css.
if you want it animated you need to use javascript.
for example in jquery:
$(window).scroll(function(){
$('#menu').css({
right: 0,
top: 0
})
})
Well you can't do it with absolute positioned div inside of a relative. Fixed position is basically an absolute positioned div, positioned relatively to the window. I'd say you definately need javascript here.
This should be rather easy with a fixed sidebar, and a floating content section. Try something like this...
#container {
width: 960px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
#sidenav {
width: 300px;
position: fixed; /*--Fix the sidenav to stay in one spot--*/
float: left; /*--Keeps sidenav into place when Fixed positioning fails--*/
}
#content {
float: right; /*--Keeps content to the right side--*/
width: 620px;
padding: 0 20px 20px;
}
This is old post but CSS has changed a lot since then, we can do a floating menu with plain CSS. See sample code below. Credit to https://www.quackit.com/css/codes/css_floating_menu.cfm
main {
margin-bottom: 200%;
}
.floating-menu {
font-family: sans-serif;
background: yellowgreen;
padding: 5px;;
width: 130px;
z-index: 100;
position: fixed;
right: 0px;/* You can change float left/right */
}
.floating-menu a,
.floating-menu h3 {
font-size: 0.9em;
display: block;
margin: 0 0.5em;
color: white;
}
<!DOCTYPE html>
<title>Example</title>
<main>
<p>Scroll down and watch the menu remain fixed in the same position, as though it was floating.</p>
<nav class="floating-menu">
<h3>Floating Menu</h3>
CSS
HTML
Database
</nav>
</main>
I believe it needs to be JS. I can imagine it can be rather simple with jQuery and I really cannot think of any way to achieve this only with CSS. I'll try to think about it, but I doubt I'll find a solution.
look this:
When the pointer is on the image I want a small dark rect at the bottom of this image with some text. How can I do this? Maybe with jquery?
Thanks guys.
You can achieve this many ways. Depending on the structure of your page, you could accomplish this with a couple of CSS classes.
HTML:
<div class="image_hover"><span>Text</span></div>
CSS:
.image_hover { background-image: url("path/to/image"); height: 95px; width: 270px; }
.image_hover span { display: none; }
.image_hover:hover span { display: block; position: relative; top: 80px; width: 270px; text-align: center; background-color: white; border: 1px solid black; height: 15px; line-height: 15px; }
You would need to make some updates based on your particular situation. Here is a working example on jsbin. This solution hides the text by default, and when the user hovers over the div, the :hover class will cause the text to be displayed.
You could also use jQuery to either add or show the div onmouseover.
Yeah, you can easily use jquery to achieve that.
If you want to learn the whole process and do it yourself, take a look at this - Sliding Boxes and Captions with jQuery
Or take a look at a few plugins for achieving the same effect - 10 Stylish jQuery caption plugins