I have 3 divs. When I click one of them, the div will disappear and a greeting div will appear. Got this all working, please see my fiddle:
http://jsfiddle.net/mauricederegt/pknpb/1/
At the moment this greetings div appears at a fixed position. How to make it so that it will appear above the div that was just clicked?
Is this even possible at all?
Hope someone can help me out
Thank you for your time
(ps also why are the divs forced down when clicked?)
The 3 divs drop down because .greetings has relative positioning. If you make it absolute and get the offset of the clicked element, you can position it exactly above that element and without it changing the layout of the other divs:
var offset = $(this).hide(500).offset();
var score = 'Hello';
$('.greet').text(score);
$('.greet')
.show()
.css({
top: offset.top - $('.greet').height(),
left: offset.length,
opacity: 1,
})
.stop()
.delay(200)
.animate({top: 20, opacity: 0},1000);
See fiddle
I would recommend putting each 'Hint' in a container with it's message:
<div class="hint-container">
<div class="hint"> HINT! </div>
<div class="greet"> Greetings </div>
</div>
the give the container a fixed size and relative position:
.hint-container {
position: relative;
width: 100px;
height: 20px;
}
The you can give an absolute position to the containers, make them occupy all the container and hide one of them:
.hint-container > div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.hint-container .greet {
display: none;
}
From here you can go on as you where doing ^.^
I hope it's clear.
Sorry, I am not versed enough to give the code in jquery for this. But, I believe you would have to send in the click event to the method handling the div with class greet. And then with position absolute set the left and top of the class greet div to the top and left stored in the event.
You can get the element's position relative to it's container using the .position(), or it's offset relative to the document using .offset().
in this case, it might look something like this:
$('.ht').click(function hint() {
var x = $(this).offset().left;//get offset relative to document
$(this).hide(500);
score = 'Hello';
$('.greet').text(score);
$('.greet')
.hide()
.css({
bottom: 20,
left: x, //add x variable here
opacity: 1,
})
.show()
.stop()
.delay(200)
.animate({'bottom':75, opacity: 0},1000);
});
however you'd probably want to make the .greet class position:absolute, and you might have to do something with the height.
Related
In the following example there are two draggable divs in a container div. When the second draggable div is removed (by clicking on the button) the first div moves up and the container is resized (see jsfiddle). The first div should not move when the second div is removed, as its position is absolute. What's wrong with this code?
The HTML:
<div id="container" style="background-color:blue;width:100%;height:100%"></div>
<button onclick="removeDiv()">Remove</div>
and the javascript:
$(document).ready(function(){
var $div0 = $('<div id="div0" />').appendTo('#container');
$div0.draggable();
$div0.offset({ top: 200, left: 350});
$div0.css('background-color','white');
$div0.css('width','150px');
$div0.css('height','200px');
$div0.text(0);
var $div1 = $('<div id="div1" />').appendTo('#container');
$div1.draggable();
$div1.offset({ top: 200, left: 50});
$div1.css('background-color','white');
$div1.css('width','150px');
$div1.css('height','200px');
$div1.text(1);
});
function removeDiv () {
$('#div0').remove();
}
Both draggable divs have relative positions. You can fix them up like so:
http://jsfiddle.net/isherwood/dzSRR/13/
#container {
position: relative;
}
#container > div {
position: absolute;
}
Because they're now absolutely-positioned, you'll need to give the parent div a height. If you use 100%, you also need to apply that height to html, body.
http://jsfiddle.net/isherwood/dzSRR/14/
+++++i add mention+++++
thanks guys for your answers,
but, i think, i missed something to write more.
when i click the button to show the div(#pop), it works right at the scroll on the top.
but, when i go down the scroll, the div(#pop) goes up in the window(height:0) not in "bottom:10%" like at the scroll on the top.
so, i'm trying your answers now, but, i'm not succeed yet T_T HELP!! :)
=================================================================================
Here are my codes.
I have a floating menu and one button of them works for showing a div id = pop, which is floating too.
I want to hide the div #pop when window starts, and when the button's clicked, it shows.
So I added codes display:none to hide, but when i click the button to show the div #pop, the div #pop is anywhere, not in bottom: 10% in CSS.
HTML
<div class="menu">
<img src="btnUp.png"><br/>
<img src="btnMe.png" id="pop_bt"><br/>
<a href="#scrollbottom">
<img src="btnDown.png">
</a>
</div>
<div id="pop">
<div>
POP UP
</div>
</div>
CSS
#pop{
display: none;
width: 300px;
height: 400px;
background: #3d3d3d;
color: #fff;
position: absolute;
bottom :10%;
left: 30%;
z-index: 3;
}
Javascript
$(document).ready(function(){
var boxtop = $('.menu').offset().top;
$(window).scroll(function(){
$('.menu').stop();
$('.menu').animate({"top": document.documentElement.scrollTop + boxtop}, 800);
});
});
$(document).ready(function() {
$('#pop_bt').click(function() {
$('#pop').show();
});
$('#pop').click(function() {
$('#pop').hide();
});
});
$(document).ready(function(){
var boxtop = $('#pop').offset().top;
alert(boxtop);
$(window).scroll(function(){
$('#pop').stop();
$('#pop').animate({"top": document.documentElement.scrollTop + boxtop}, 800);
});
});
Actually, I'm not a programmer, just a designer, so I'm very fool of HTML/CSS/Javascript.
Can anyone help me?
Display none is removing your button from the layout.
Same on .hide().
Use opacity 0 to hide the dig but keep it in your browser.
In the absence of a fiddle, I can do some guess work only. Looks like the line below is the problem:
$('#pop').animate({"top": document.documentElement.scrollTop + boxtop}, 800);
It sets a top value and moves the layer to some other place. It should work fine if you remove that.
use this...
$(document).ready(function()
{
$("#pop").hide();
$("#button_id").click(function()
{
$("#pop").show();
});
});
is this you actually need?
I am trying to place an element, "inner", flush against the upper right hand corner of another div, "outer", using absolute positioning. The "inner" element is not a child of "outer". I therefore need to look up the positioning of "outer" using js and use that.
However, it's not coming out quite right:
EDIT: it's not possible for me to reset the margin/padding/relative of the body div. There are other elements inside body.
http://jsfiddle.net/BZBSF/1/
#wrapper{background:red;
width:100px;
height:100px;}
#inner{
position:absolute;
background:green;
width:50px;
height:100px;
margin:0;padding:0;
}
#body{position:relative;}
<div id = "body">
<div id = "wrapper"></div>
<div id = "inner"></div>
</div>
var rect = document.getElementById("wrapper").getBoundingClientRect();
$("#inner").css({ 'top': String($(window).scrollTop()+rect.top)+"px" });
width_inner = $("#inner").width();
$("#inner").css({ 'left': String($(window).scrollLeft()+rect.right-width_inner)+"px" });
Set margin and padding on the body element.
body{
margin: 0;
padding: 0;
}
FIDDLE
Or if there is no specific reason for body: relative; remove that.
FIDDLE
The second one is recommended.
Is this what you want?
var rect = $('#wrapper');
$("#inner").css({ 'top': rect.position().top+"px" });
$("#inner").css({ 'left': (rect.position().left + rect.width() - $('#inner').width())+"px" });
http://jsfiddle.net/araSp/2/
And if you need to worry about padding/borders, you can use:
.innerWidth()
.outerWidth()
Just do a quick reset on the top:
* {
margin:0;
padding:0;
}
Fiddle
Note: This is a quick reset. You might want to use other reset stylesheets out there.
You should remove the position relative at the body tag.
$(document).ready(function() {
$('#inner').css({
'position': 'absolute',
'top': $('#wrapper').offset().top,
'left': $('#wrapper').offset().left + $('#wrapper').width() - $('#inner').width()
});
});
DEMO:
http://jsfiddle.net/4uSeV/
I have a script that has a div with a width larger than its' parent, with the parent being set to overflow: hidden;. I have javascript that is setting the left positioning of the big div to create "pages". You can click a link to move between pages.
All of that works great, but the problem is if you tab from one "page" element to another, it completely messes up all the left positioning to move between the pages.
You can recreate this bug in the fiddle I set up by setting your focus to one of the input boxes on page ONE and tabbing until it takes you to page two.
I've set up a demo here.
The code that is important is as follows:
HTML:
<div class="form">
<div class="pagesContainer">
<div class="page" class="active">
<h2>Page One</h2>
[... Page 1 Content here...]
</div>
<div class="page">
<h2>Page Two</h2>
[... Page Content here...]
</div>
</div>
CSS:
.form {
width: 400px;
position: relative;
overflow: hidden;
border: 1px solid #000;
float: left;
}
.pagesContainer {
position: relative; /*Width set to 10,000 px in js
}
.form .page {
width: 400px;
float: left;
}
JS:
slidePage: function(page, direction, currentPage) {
if (direction == 'next') {
var animationDirection = '-=';
if (page.index() >= this.numPages) {
return false;
}
}
else if (direction == 'previous') {
var animationDirection = '+=';
if (page.index() < 0) {
return false;
}
}
//Get page height
var height = page.height();
this.heightElement.animate({
height: height
}, 600);
//Clear active page
this.page.removeClass('active');
this.page.eq(page.index()).addClass('active');
//Locate the exact page to skip to
var slideWidth = page.outerWidth(true) * this.difference(this.currentPage.index(), page.index());
this.container.animate({
left: animationDirection + slideWidth
}, 600);
this.currentPage = page;
}
The primary problem is that whatever happens when you tab from say, an input box on page one to something on page 2, it takes you there, but css still considers you to be at left: 0px;. I've been looking all over for a solution but so far all google has revealed to me is how to stop scrollbar scrolling.
Any help or suggestions would be appreciated, thanks!
P.S. The html was set up like this so that if javascript is disabled it will still show up all on one page and still function properly.
I updated your fiddle with a fix for the first tab with the form: http://jsfiddle.net/E7u9X/1/
. Basically, what you can do is to focus on the first "tabbable" element in a tab after the last one gets blurred, like so:
$('.form input').last().blur(function(){
$('.form input').first().focus();
});
(This is just an example, the first active element could be any other element)
Elements with overflow: hidden still have scrolling, just no scroll bars. This can be useful at times and annoying at others. This is why your position left is at zero, but your view of the element has changed. Set scrollLeft to zero when you change "pages", should do the trick.
I want to drop the opacity and overlay text on a thumbnail image when I mouse over it. I have several ideas about how to do it, but I'm fairly certain they're inefficient and clumsy.
Make a duplicate image in Photoshop with the text overlay and reduced opacity. Swap the original out for the duplicate on mouseover.
Use CSS to drop the opacity on mouseover. Use Javascript to toggle visibility of a div containing the overlay text.
The problem I see with 1 is it seems like an unnecessary use of space and bandwidth, and will cause slow load times. With 2, it seems like I'd have to hard-code in the location of each div, which would be a pain to maintain and update. I know this is a somewhat general question, but I'm at a loss about how to go about this. How can I do this relatively simple task in a way that will make it easy to add new thumbnails?
Wrap your image in a <div class="thumb">
Add position: relative to .thumb.
Add <div class="text> inside .thumb.
Add display: none; position: absolute; bottom: 0 to .text.
Use .thumb:hover .text { display: block } to make the text visible on hover.
Like this: http://jsfiddle.net/dYxYs/
You could enhance this with some JavaScript/jQuery: http://jsfiddle.net/dYxYs/1/
$('.text').hide().removeClass('text').addClass('text-js');
$('.thumb').hover(function(){
$(this).find('.text-js').fadeToggle();
});
This way, the basic effect still works without JavaScript, and users with JavaScript get the appealing fade effect.
Go with option 2. There are ways to do it to not have to write a jQuery function for each image. As seen in my jsfiddle.
http://jsfiddle.net/daybreaker/dfJHZ/
HTML
<img src="http://placekitten.com/300/300" />
<span class="text" style="display:none">THIS IS A KITTEN</span>
<br><br>
<img src="http://placekitten.com/200/200" />
<span class="text" style="display:none">THIS IS A KITTEN</span>
jQuery
$('img').mouseover(function(){
$(this).css('opacity','.2');
$(this).next('span.text').show();
}).mouseout(function(){
$(this).css('opacity','1');
$(this).next('span.text').hide();
});
You would need to modify the span.text css to overlay it on top of the image, but that shouldnt be too bad.
Wrap it in an element and do something like this:
var t;
$('div.imgwrap img').hover(function(){
t = $('<div />').text($(this).attr('title')).appendTo($(this).parent());
$(this).fadeTo('fast',0.5);
},function(){
$(this).fadeTo('fast',1);
$(t).remove();
});
with a markup similar to:
<div class="imgwrap">
<img src="http://www.gravatar.com/avatar/3d561d41394ff0d5d0715b2695c3dcf0?s=128&d=identicon&r=PG" title="text" />
</div>
example: http://jsfiddle.net/niklasvh/Wtr9W/
Here's an example. You can position the text however you want, but the basic principle below.
http://jsfiddle.net/Xrvha/
#container { position: relative; }
#container img, #container div {
position: absolute;
width: 128px;
height: 128px;
}
#container img { z-index -1; }
#container div {
z-index 1;
line-height: 128px;
opacity: 0;
text-align: center;
}
#container:hover img {
opacity: 0.35;
}
#container:hover div {
opacity: 1;
}
If you don't want to change your HTML wraping things etc, I suggest you this way. Here is the jQuery:
$(function() {
$(".thumb").mouseenter(function() {
var $t = $(this);
var $d = $("<div>");
$d.addClass("desc").text($t.attr("alt")).css({
width: $t.width(),
height: $t.height() - 20,
top: $t.position().top
});
$t.after($d).fadeTo("fast", 0.3);
$d.mouseleave(function() {
$(this).fadeOut("fast", 0, function() {
$(this).remove();
}).siblings("img.thumb").fadeTo("fast", 1.0);
});
});
});
2 is a good solution, have done about the same as this and it isn't as hard as you would've tought;
Drop de opacity with css indeed, than position a div relative to the img, and over it. It can be done with plain css. The z-index is the trick. That div can just be shown with $('#div').slideUp() ie.