jQuery Help - Appear underneath rather than on top - javascript

I have the following jQuery which I need adapting:
$(document).ready(function(){
$(".rss-popup a").hover(function() {
$(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow");
}, function() {
$(this).next("em").animate({opacity: "hide", top: "-70"}, "fast");
});
});
CSS:
.rss-popup {
margin: 100px auto;
padding: 0;
width: 100px;
position: relative;
}
div.rss-popup em {
background: url(../images/rssbuttonbubble.png) no-repeat;
width: 100px;
height: 49px;
position: absolute;
top: -70px;
left: -0px;
text-align: center;
text-indent: -9999px;
z-index: 2;
display: none;
}
#rss-icon {
width: 42px;
height: 42px;
background: url(../images/rssbutton.png) no-repeat 0 0;
text-indent: -9999px;
margin: 0 auto;
display: block;
}
The HTML:
<div class="rss-popup">
RSS Feed
<em>Subscribe to our RSS Feed</em>
</div>
I want to make the rssbuttonbubble.png appear underneath rather then from above, can any make any suggestions as to how I can achieve this?

Just adjust your top values in the animation and css to be the distance you want:
$(".rss-popup a").hover(function() {
$(this).next("em").stop(true, true).animate({opacity: "show", top: "60"}, "slow");
}, function() {
$(this).next("em").animate({opacity: "hide", top: "70"}, "fast");
});
And in CSS change top: -70px; to:
top: 70px;
This will make it appear below, then just decrease those values if you want it higher, increase if you want it lower.

Nick's answer is correct. You will want to attempt to do this via CSS but just in case you can't you could also achieve something similiar via Jquery. There is an offset() function that returns the onscreen position of a matched element. Once you have that you can then set the position of another element to this position and add the source elements height to the Y coordinate.
See the jQuery documentation here.

Related

How do I move an element diagonally and after another animation in jQuery?

I have an HTML/CSS element:
<div id="box">
<p> BOX </p>
</div>
#box {
width: 100px;
height: 200px;
background-color: skyblue;
position: absolute;
left: 0px;
top: 200px;
text-align: center;
font-family: Times New Roman;
}
I need it to move from its position in the middle of the page diagonally down and to the left (to the left corner). I've tried this:
$(function() {
$("button").click(function() {
$("#box").animate({
left: $(window).width() - 200
bottom: $(window).width() - 200
}
});
});
How do I do this with jQuery and have it done after it's been on the page a few seconds (for a different animation to occur first)?
Consider the following.
$(function() {
$("button").click(function() {
$("#box").animate({
left: $(window).width() - 100,
top: $(window).height() - 200
});
});
});
#box {
width: 100px;
height: 200px;
background-color: skyblue;
position: absolute;
left: 0px;
top: 40px;
text-align: center;
font-family: Times New Roman;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="box">
<p>BOX</p>
</div>
<button>Go</button>
You were using width property for both. You must use width and height. Also it's better to use top versus bottom in this case. You can use bottom, yet I would suggest something like:
bottom: $("#box").height()
In this way, the property of the top will be N Pixels from the "Bottom".
See More: https://www.w3schools.com/cssref/pr_pos_bottom.asp

Need to get an a sliding div to stay in the same place on page (JSFiddle included)

I know this is a solved problem, but I'm having difficulty getting this to work so I need some help.
I have the following setup: http://jsfiddle.net/yHPTv/3656/
The issue is, users will scroll past that slider. I need the slider to stay in the same place on the page.
I've tried using the classes approach (have a class called sticky with position: fixed;) but it didn't work for me unfortunately.
Any help would be appreciated.
JS from JSFiddle:
$(function () {
$("#slideout").click(function () {
if($(this).hasClass("popped")){
$(this).animate({left:'-280px'}, {queue: false, duration: 200}).removeClass("popped");
} else {
$(this).animate({left: "20px" }, {queue: false, duration: 200}).addClass("popped")
}
});
$("#slideout").delay(500).animate({left: "20px" }, {queue: true, duration: 200}).addClass("popped");
});
CSS from JSFiddle:
body {
overflow-x: hidden;
}
#slideout {
background: #666;
position: absolute;
width: 280px;
height: 80px;
top: 45%;
left: -280px;
padding-right: 20px
}
#clickme {
position: absolute;
top: 0;
right: 0;
height: 20px;
width: 20px;
background: #ff0000;
}
#slidecontent {
float: right;
}
.stick {
position: fixed;
top: 0px;
}
Your current position is set to absolute when it should be fixed.
You tried this?
#slideout {position:fixed;}
and it works fine for me here: JS FIDDLE

jQuery/CSS animate div width from left to right

I'm trying to use jQuery to animate a div with a background picture decreasing in width from left to right whilst being absolutely positioned.
I need to make this compatible with IE8 hence using jQuery.
Here is a basic JSFiddle demo link with what I have so far, but it animates from right to left:
JSFiddle link
jQuery(document).ready(function($){
$(document).on('click', '.splat', function(e){
$(this).animate({width:"0px"},800);
});
});
.splat {
width: 400px;
height: 400px;
background: blue;
position: absolute;
top: 100px;
left: 100px;
}
<div class="splat"><!-- --></div>
I need it going in a different direction, like the following image:
Hoping someone could point me in the right direction (no pun intended!). Thanks in advance.
You may use a wrapper and position the child div with right:0.
See this demo
If i can understand your question, solution is replace left with right :)
http://jsfiddle.net/V4XCb/6/
.splat {
width: 400px;
height: 400px;
background: blue;
position: absolute;
top: 100px;
right: 100px;
}
You can like this:
<div class="box">
<div class="splat"></div>
</div>
.box{
width:200px;
height: 200px;
}
.splat {
height: 200px;
width: 100%;
background: blue;
float: right;
}
If you could wrap your elem with a wrapper which is relative positioned element and do the following:
.splatWrapper {
width: 400px;
height: 400px;
background: green;
position: relative; //<-----needed
top: 100px; //<------------needed
left: 100px; //<------------needed
}
.splat{
width: 400px;
height: 400px;
background: blue;
position: absolute;
top: 0; //<----------needed
right: 0; //<----------needed
}
Try this fiddle
You can use Scale Effect in Jquery :
jQuery(document).ready(function($){
$(document).on('click', '.splat1', function(e){
$(this).hide("scale");
});
});
Fiddle : http://jsfiddle.net/V4XCb/14/

Scroll to top script - div won't hide when on top

I'm working on this website called http://martindue.dk/mmd3x9x/ and I have this scroll to top script that just won't coorporate. I've used the script on many other sites, and it works fine, but on this particular website the div#to-top keeps on re-appearing, even though I'm at the very top of the website, why won't it fade out correctly when at the top?
My code looks like this (the #to-top is insertted after the body-tag in my html):
Javascript
jQuery(document).ready(function() {
$toTop = jQuery("#to-top");
$toTop.hide();
jQuery(window).scroll(function() {
if(jQuery(this).scrollTop() != 0) {
$toTop.fadeIn();
} else {
$toTop.fadeOut();
}
});
$toTop.click(function() {
jQuery("body, html").animate({ scrollTop : 0 }, 500);
return false;
});
});
CSS
#to-top {
background: url("img/to-top.png") center top no-repeat;
background-size: 100%;
width: 50px;
height: 50px;
position: fixed;
bottom: 60px;
right: 60px;
cursor: pointer;
/*display:none;*/
/*opacity: 0.0;*/
}
I created this fiddle, and here it works fine: http://jsfiddle.net/2Rubp/
I know it is not js but in this case you are only using fading so css can do the trick:
#to-top {
background: url("img/to-top.png") center top no-repeat;
background-size: 100%;
width: 50px;
height: 50px;
position: fixed;
bottom: 60px;
right: 60px;
cursor: pointer;
**-webkit-transition: all 0.5s linear;**
display: none;
opacity: 0.0;
}
NB: this is for chrome see this for cross browser compatibility
http://www.w3schools.com/css/css3_transitions.asp

JavaScript: setting direction of css change on mouseover?

In the following code, (see example fiddle), if you mouseover the green, the height of the two red boxes will change, but the height expands down. Is there a way to make the height expand upwards?
css:
.one{
position: absolute;
left: 110px;
top: 0px;
background: green;
}
.two {
position: absolute;
left: 70px;
top: 40px;
background: red;
height: 25px;
font-size: 25px;
}
.three {
position: absolute;
left: 200px;
top: 40px;
background: red;
height: 25px;
font-size: 25px;
}
html:
<div class="one">15,000,000</div>
<div class="two">700</div>
<div class="three">800</div>
javascript:
$('.one').mouseover(function(){
$('.two, .three').css('height','50px');
}).mouseout(function(){
$('.two, .three').css('height', '25px');
});
Just alter the top of the boxes as well:
$('.one').mouseover(function(){
$('.two, .three').css({ height : '50px', top: '15px'});
}).mouseout(function(){
$('.two, .three').css({ height : '25px', top: '40px'});
});
http://jsfiddle.net/wyxJ7/12/
Try this,
http://jsfiddle.net/Gbwjj/
Its more of a CSS issue than a JavaScript one
You can use change the 'top' css attribute at the same time so that the user perceives it as the height expanding upwards. Here's an example using animate().
$('.one').mouseover(function(){
$('.two, .three').animate({
height:"50px",
top:"-=25"
});
}).mouseout(function(){
$('.two, .three').animate({
height:"25px",
top:"+=25"
});
});

Categories