I tried to position the dialogue box at the bottom right corner of the page, but I was unsuccessful.
What am I doing wrong?
<script>
$(function() {
$("#dialog").dialog();
{
position: fixed;
right: 0;
bottom: 0;
}
});
</script>
Check out my codepen. You can add a position (see the docs) to a dialog. This is the full jQuery code:
$(function() {
$( "#dialog" ).dialog({
position: {
my: "left top",
at: "right bottom"
}
});
});
You can use jQuery.css() to apply the CSS rules.
$(function() {
// $('#dialog').dialog();
$("#dialog").css({
'position': 'fixed',
'bottom': 0,
'right': 0
});
});
div {
width: 100px;
height: 100px;
background: url('//placehold.it/100x100');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dialog"></div>
But there shouldn't be any reason to use jQuery to do this, as it is completely possible with CSS alone.
div {
width: 100px;
height: 100px;
background: url('//placehold.it/100x100');
position: fixed;
bottom: 0;
right: 0;
}
<div id="dialog"></div>
Related
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
I have been having a problem centering a fixed div in IE and Chrome when using the JQuery draggable function with a 'containment'. It seems whenever I try to drag the element, it snaps to the left of the containing element until I let go of it and then start dragging again.
Here's an example:
CodePen
http://codepen.io/anon/pen/NqZjbX
HTML
<div class="draggable">
</div>
.CSS
.draggable {
background: salmon;
width: 50px;
height: 50px;
margin: 0 auto;
position: fixed;
left: 0;
right: 0;
cursor: move;
}
body {
height: 500px;
}
JS:
$(function() {
$(".draggable").draggable({
containment: 'body'
});
});
Thanks for your help!
The implementation of .draggable() is not intended to be used with two properties of the same axis(left and right in your case). You have to use some other technique to center the element.
Please see example below:
$(function() {
$(".draggable").draggable({
containment: 'body'
});
});
.draggable {
background: salmon;
width: 50px;
height: 50px;
position: fixed;
cursor: move;
/* Initial position */
top: 0;
left: 50%;
margin-left: -25px;
}
body {
height: 1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<div class="draggable">
</div>
I'm always having trouble with the combination of CSS and JQuery. Can someone tell me what i'm doing wrong here? I just want to move my div. Thanks all for the solutions, I'd like to know a little further. How can i move it more than once in different directions?
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
jQuery(document).ready(function () {
jQuery("#hello").mouseenter(function () {
jQuery("#hello").animate({ left: '150px' }, slow);
});
});
</script>
<div id="hello">
Hello World!
</div>
<style>
#hello{
color: gray;
background-color: gold;
width: 125px;
height: 125px;
position: fixed;
left: 350px;
top: 350px;
border-width: 2px;
border-color: lavender;
text-align: center;
}
</style>
Your div needs a position set when using left, right, top or bottom css propertiy, so there will be no change even though your code seems correct.
Try to set a position to your div, for example relative.
<style>
#hello{
color: gray;
background-color: gold;
width: 125px;
height: 125px;
position: fixed;
left: 350px;
top: 350px;
border-width: 2px;
border-color: lavender;
text-align: center;
position: relative;
}
</style>
<script>
jQuery(document).ready(function () {
jQuery("#hello").mouseenter(function () {
jQuery("#hello").animate({ left: '150px' }, 'slow');
});
});
</script>
If You are using slow/fast option You need to put 'slow' into brackets
jQuery("#hello").animate({ left: '150px' }, 'slow');
You can set animation time with milliseconds without brackets.
The duration parameter of your animate() is undefined (Uncaught ReferenceError: slow is not defined).
It should be either "slow"
jQuery("#hello").animate({ left: '150px' }, "slow");
or
var slow = 200;
jQuery("#hello").animate({ left: '150px' }, slow);
Fiddle (with error)
Fiddle (Updated)
I would recommend the CSS way :hover if its just about mouseover event. If there is more functionality to add, this is better.
I want to design a webpage like this...can anyone help me..how to do this
demo is here http://www.valentinagallo.us/site/#/home
any help would be appreciated
I created basic script special for you. Please see my idea for the solution.
First you must create DIV with fixed position and set the z-index to hide real content. Now, you can create DIV with two slide sections: left and right to animate and put contents dynamically.
See the demo: http://jsfiddle.net/luckyjquery/q2hLfo2q/
NOTE: This is basic code to show you my idea. I can develop it for you.
The HTML:
<button>Change slide</button>
<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>
The CSS:
.content {
position: relative;
height: 350px;
width: 90%;
overflow: hidden;
}
.content > div {
position: absolute;
height: 100%;
width: 50%;
top: 0px;
}
.content .left{
left: 0px;
background-color: #d93434;
}
.content .right{
right: 0px;
background-color: #b3d934;
}
The jQuery:
;(function ($) {
//Functions
var fns = {
/*Select basic elemments */
button: $('button'),
leftBox: $('.left'),
rightBox: $('.right'),
/* Initialize */
init: function(){
//Click the button
fns.button.on('click', function(e){
e.preventDefault();
//Change slide
fns.changeSlide();
});
},
/*Animate the DIVs*/
changeSlide: function(){
//Animate the left div
fns.leftBox.animate({
top: '-='+fns.leftBox.height(),
opacity: 0.0
}, 255, function(){
/* You can change content in this place*/
}).animate({
top: 0,
opacity: 1.0
}, 255);
//Animate the right div
fns.rightBox.animate({
top: '+='+fns.leftBox.height(),
opacity: 0.0
}, 255, function(){
/* You can change content in this place*/
}).animate({
top: 0,
opacity: 1.0
}, 255);
}
};
//Start
fns.init();
})(jQuery); //The end
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.