I have a page content which have text in it.
underneath the content, there is a navigator bar, and I would like that whenever I Hover one of the element in the navigator, a div will open up just above the element I have just hovered on, and show some content.
I don't want the DIV that will pop-up to push any object on the page, I would like it to be, like up on all of the objects on the page.
some code since I have to insert code tags if I want to post fiddle
here's a fiddle to demonstrate:
Click here for fiddle
In the fiddle, I want that whenever I hover First, the first-feedback will be shown just above him.
This is pretty much my code, I have just used jQuery to calculate my desired width, but I just can't get the div to be above the div he should be above. I can't just calculate by my eye and say how many pixels because the website is pretty much dynamic, so I need a formula to calculate that for me every time.
If you have any code suggestion, such as relocating the feedback div, please feel free to edit the fiddle!
Thanks in advance!
Update: Okay, I did it the way you specified: http://jsfiddle.net/2U7jB/3/. There are other ways to do it - it depends on your HTML.
Original Response: This is close to what you want: http://jsfiddle.net/2U7jB/2/
.popup {
display: none;
height: 35px;
width: 100%;
background-color: blue;
}
<div id="first">
<div class="popup"></div>
</div>
<div id="second">
<div class="popup"></div>
</div>
<div id="third">
<div class="popup"></div>
</div>
$('#first, #second, #third').on('mouseover', function() {
$(this).children('.popup').show();
});
$('#first, #second, #third').on('mouseleave', function() {
$(this).children('.popup').hide();
});
To get what you want, just create two divs inside #first, #second, and #third - the first div for the hidden (popup) content, and the second div for the nav menu / background color.
Related
Sorry for my english.
I made a web component, kind of List View, and there is a button at its right. It shows only a item, when you click it, it grows and shows all the items:
The problem is, with display: inline-block when I click in the List View, it grows and pushes down the items below.
I tried to use display: absolute and bigger z-index when I click, but obviously this happens:
The button on the right moves left below the List View. While it is what i want:
Maybe it can be done putting a fixed location with JS, but, there is a easier way to do this with css?
Edit:
The buttons are inside a div, in this example called a-div.
This is the simplified code:
<div class="a-div">
<list-view style="display: inline-block;"class="wButton">
</list-view>
<button class="arrow-button" type="button">
<img src="images/arrow-right.svg" alt="">
</button>
</div>
CSS:
.a-div{
width: 50%;
display: flex;
}
.a-div > *{
margin-right: 1rem;
}
I could use a flex-end on the arrow button, but it will look like this:
a-divand b-div both are inside of another div.
And something important, the with of the List View is dynamic.
Hope you can help me, thanks on advance!
When you apply position: absolute to your list it goes outsite the flow so the button with the arrow is placed right under it. Add a margin-left to the button equal to the width of list (plus a little bit more)
I have 5 divs going vertically down a page.
I want to be able to click any one, and have it move to be the first div in the order, the top of the "list" in a way. In a perfect world, the others would dim/decrease opacity and the clicked one would slide/animate up to the top while the others bumped down. But, that can come later. I've seen div-reordering done with CSS, but that's not continuously dynamic on the page.
I tried putting all 5 divs inside a container wrapper and doing this in css:
#wrapper { display: table; }
with this javascript (example for clicking second div):
$('#secondDiv').css("display","table-header-group");
$('#firstDiv').css("display","table-row-group");
$('#thirdDiv').css("display","table-row-group");
$('#fourthDiv').css("display","table-row-group");
$('#fifthDiv').css("display","table-row-group");
but that messed up my rounded corners on the div, my alignment, and other parts of my existing css.
This seems like it shouldn't be that hard, but I can't figure it out. Thanks for any help!
A very simple solution: move the element to the top using jQuery's prepend() to the parent element.
$("div").click(function() {
$(this).parent().prepend($(this));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Div1</div>
<div>Div2</div>
<div>Div3</div>
<div>Div4</div>
<div>Div5</div>
<div>Div6</div>
<div>Div7</div>
<div>Div8</div>
<div>Div9</div>
<div>Div10</div>
$('.reorderable').click(function(){
$(this).prependTo(this.parentNode);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div class="reorderable">first</div>
<div class="reorderable">second</div>
<div class="reorderable">third</div>
<div class="reorderable">fourth</div>
<div class="reorderable">fifth</div>
</div>
Look at the jQuery UI tools that enable sortable displays.
Your end goal seems to be consistent with this jQuery UI feature.
I've a personal project to learn more about HTML/CSS/JS.
But I got a problem with it.
I have two divs in my <body>, each one with 2 circular concentric div. One is placed on the center of the area, the other one not.
<div id="sphaea_bloc">
<div id="actor" class="actor_locked">
<div class="actor_extern_locked"> </div>
<div class="actor_intern_locked"> </div>
</div>
<div id="lock" class="lock_locked">
<div class="lock_extern_locked"> </div>
<div class="lock_intern_locked"> </div>
</div>
</div>
The base placement is good.
The second step is to add drag'n'drop with JQuery, and it works fine. The aim is to drop the little div into the bigger div.
When it fails, it correctly returns at a base position.
But now, when the drop is good, I want to place with JQuery the little div in to center of the bigger div (making 4 circles concentric).
I searched for a long time but I didn't manage to do it without the problem : I've always a little offset between my 2 divs... And I'm not able to understand why.
Here is the fiddlejs link :
FiddleJS link
Someone can help me to find the problem, and why my little div is always inside the bigger but with an offset ?
Thanks in advance !
AeldredOni
i have did like below, and its working, it will be centered even if you change with and height of divs:
.actor_locked {
position:absolute;
left:-9999px;
right:-9999px;
top:-9999px;
bottom:-9999px;
display: block;
margin: auto;
width: 60px;
height: 60px;
border-radius: 50px;
}
http://jsfiddle.net/xga3dzfm/1/
Okay, before I ask this question. Let me explain my goal: I want to write as little code as possible, and still be able to have tons of functionality at the same time. I have coined this as 'beautiful code' to myself and colleagues.
Here's the problem: I want to click a box, and a panel to fade in with the desired content based on which box I clicked. Except that I cant use two classes and cannot re-use id's.
Here's the code: http://jsfiddle.net/2Yr67/
$('.maingrid').click(function(){
//'maingrid' fade out
//'panel' fade in with proper content
});
I had two ideas that would please me.
A) Have one panel fade in, and content fill into the panel based on which 'maingrid' box that was 'click'ed
B) Have a specific panel with the content fade in, based on which 'maingrid' was selected
I'm not asking for you to do it for me, simply push me towards the syntax needed to do what I want
Thanks in advance!
The first thing to do is to move your panel HTML elements closer to the maingrid elements. This allows you to hide/show the correct elements in order. Having all of the panels in their own separate element causes you to do DOM manipulation should shouldn't need to do. For simplicity, I put each panel right after the maingrid element that it was associated with it.
HTML Structure
<div class=".mainContainer">
<div class='maingrid'></div>
<div class='panel'></div>
<div class='maingrid'></div>
<div class='panel'></div>
<div class='maingrid'></div>
<div class='panel'></div>
<div class='maingrid'></div>
<div class='panel'></div>
</div>
I added the panel class to have the same CSS as maingrid, as well as make it invisible at the start:
.maingrid, .panel {
height: 345px;
width: 345px;
float: left;
/* [disabled]background-color: #000; */
margin-top: 5px;
margin-right: 5px;
cursor: pointer;
overflow: hidden;
}
.panel{
display:none;
color:white;
}
This will fade out the current element clicked and fade in the next panel element.
$('.maingrid').click(function(){
var $that = $(this);
$(this).fadeOut(function(){ //This will wait until the fadeOut is done before attempting to fadeIn.
$that.next().fadeIn();
});
});
$('.panel').click(function(){
var $that = $(this);
$(this).fadeOut(function(){
$that.prev().fadeIn();
});
});
There also seems to be a bug where the hover does not show the text on the first hover event.
JSFiddle: http://jsfiddle.net/mDJfE/
I would like to create a div that expands to two paragraphs when someone mouses over the first paragraph. The first paragraph would be an introduction. The second paragraph would explain a bit more and may contain a link to another page. I would like the second paragraph to be hidden until the person moused over the introductory paragraph. I have a background image which looks like a Post-it note.
My attempts at this are here: http://jsfiddle.net/sAW2c/52/. The second paragraph isn't hidden, even though I constrained the size of the div and the padding on the P isn't working either. Can someone head me in the correct direction?
Adding overflow: hidden; to your #div1 seems to fix the issue: little link.
Note: Please use jsFiddle's CSS tab for styles next time. Inline styles are generically not very preferable.
Adding overflow hidden to the div should help. Check out this jsFiddle example. You should get the basic idea here but you'll need to tweak your background and text padding.
jQuery
$("#div1").hover(function() {
$(this).animate({
height: '300px'
});
}, function() {
$(this).animate({
height: '100px'
});
});
HTML
<div id="div1" style="height:120px; width:206px;overflow:hidden;background: url('http://quiltersbee.com/images/white-postit.png') no-repeat 0 0; ">
<p style="padding-left: 8;padding-right: 8;">This is the paragraph that I would like to be only 190px wide and placed on the background image. It should be left-aligned. </p><br />
<p style="padding-left: 8;padding-right: 8;">This is the paragraph I would like to hide until someone mousesovers the above paragraph. Both paragraphs should be indented so they don't overlap the shading on the background image when this paragraph shows. This paragraph may include a link.</p>
</div>