Positioning a hide/show div relative to trigger - javascript

I'm struggling to find the right Jquery to show/hide a div at a height that is parallel to the trigger button. I attempted to offset the show/hide div to the right, but because the footnotes appear in different left/right positioning, each would be different. Instead, I will need to place the divs inside of another div along the right.
My hope is to add hyperlinked footnotes to some text, so that readers will not have to search for the footnotes, but also won't be overwhelmed with too much text. I would prefer to have more than one footnote open at a time, but if it needs to be one at a time to properly display, so be it.
EDIT:
#rohan-kumar helped with this code
$('.a_footnote').on('click',function(e){
e.preventDefault();
var divId=$(this).data('divid');
console.log(divId);
$('#'+divId).toggle();
});
So here's the way it stands: http://jsfiddle.net/6n28t/21/
However, my primary problem remains -- how can I make the footnote appear at the same height as the trigger? These will be long pieces of text and I want the footnotes to appear at the same height as the corresponding mark. How can I made [2] appear farther down on the page?

So, basically combining the other answers leads to this Fiddle
Html is the same as what you have in your fiddle.
CSS
.wrapp{
border:1px solid red;
height:100%;
}
.clear{
clear:both;
}
.footnotes div {
position: relative;
display: none;
}
JavaScript
$('.a_footnote').on('click',function(e){
e.preventDefault();
var divId=$(this).data('divid');
var height = $(this).position().top;
console.log(divId);
$(".footnotes div").hide();
$('#'+divId).toggle().css("top", height - 10);
});

You don't need the floats, I am assuming that you would want this text to appear inline in your paragraphs. You need to position the notes absolutely and then set the top/left according to the position of your clicked element + width of element + offset.
jsFiddle Demo
HTML:
<div class="content">
<p> Lorem ipsum ([1]).</p>
<p> Lorem ipsum ([2]).</p>
</div>
<div class="footnotes">
<div class="footnote1">1. Foo Bar</div>
<div class="footnote2">2. Foo Bar</div>
</div>
CSS
.footnotes > div { display: none; position: absolute; border: solid 1px red; }
JavaScript
$('.footnote').on('click', function(e) {
e.preventDefault();
var $note = $('.' + this.id);
var $position = $(this).position();
$('.footnotes > div').hide();
$note.css({
top : $position.top,
left: $position.left + $(this).width() + 5
}).show(); })

Try this,
HTML
<div class="wrapp">
<div class="content" style="float:left;">
<div> Lorem ipsum (<a class="a_footnote" href='javascript:;' data-divid="footnote1">[1]</a>).</div>
</div>
<div class="footnotes" style="float:right">
<div id="footnote1">1. Foo Bar</div>
</div>
<div class="clear"></div>
</div>
CSS
.wrapp{
border:1px solid red;
height:50px;
}
.clear{
clear:both;
}
SCRIPT
$('.a_footnote').on('click',function(e){
e.preventDefault();
var divId=$(this).data('divid');
console.log(divId);
$('#'+divId).toggle();
});
If you want the div.footnotes will be hidden initially, then you need to add a css like
div.footnotes {display:none;}
Fiddle http://jsfiddle.net/6n28t/7

Related

How to find the boundary of child Divs

Im trying to right align the Title on top of the last Div. As per the below image , the text should be on top of "Hello 5 / 4 / 3". When we resize the window button will float which is working and the text should be always be on top of the last button.
Unsure why the wrapper div is adding extra space to the right of the button and not aligning to the edge of the right most div. Extra space is coming even if the Title is not there , any insights about Div width calculation would be great.
I tried calculating the number of buttons in the top row using javascript and added offset to the title , but it seems tedious and not aligning at certain resolution.
http://jsbin.com/nonexegiqa/embed?html,css,console,output
HTML
<div class="wrapper">
<div class="title">Title</div>
<div class="clear"/>
<div class="btn">Hello 1</div>
<div class="btn">Hello 2</div>
<div class="btn">Hello 3</div>
<div class="btn">Hello 4</div>
<div class="btn">Hello 5</div>
<div class="btn">Hello 6</div>
<div class="clear"/>
</div>
CSS
.wrapper{
border:solid gray 1px;
}
.btn{
width:96px;
height:46px;
float:left;
border:solid gray 1px;
margin-left : 11px;
margin-bottom : 11px;
text-align:center;
}
.title{
float:right;
}
.clear{
clear:both;
}
You need to find count of .btn in first row when page resizing, Then set position of .title to last .btn in first row.
$(window).on("resize", function(){
var parWidth = $(".wrapper").innerWidth();
var chiWidth = $(".wrapper .btn").first().outerWidth(true);
var childCount = 0;
while(parWidth >= chiWidth){
parWidth -= chiWidth;
childCount ++;
}
var left = $(".btn:eq("+(childCount-1)+")").position().left;
$(".title").css("margin-left", left);
});
To better understanding, i create demo but because you can't change demo page size in here, i create it in JSFiddle.
yes, display:flex may be very helpful. As a work around you could set the width of the .wrapper to 70vw, or something similar. The .wrapper div width is creating the "extra space."

How to find ids which are on screen

I have a content like
<div id="sContainer">
<div class="message0" id="l0">Initial Content 111</div>
<div class="message1" id="l1">Initial Content 222</div>
<div class="message2" id="l2">Initial Content 333</div>
<div class="message3" id="l3">Initial Content 444</div>
<div class="message4" id="l4">Initial Content 555</div>
<div class="message5" id="l5">Initial Content 666</div>
<div class="message6" id="l6">Initial Content 777</div>
</div>
http://jsfiddle.net/LRLR/0sbdttds/
Even inside div, i have some more divs (not shown)
Is there any which to find which all divs are visible on screen ?
Requirement:
1. everytime div is focussed, i want to add css property
2. i need to store a variable
You can use the :visible property selector to fetch shown elements
$(function() {
var divs = $('[id^=l]:visible');
console.log('shown divs', divs);
alert('divs shown: ' + divs.length);
});
/* for testing purpose */
[id^=l] {
/* id starting with `l` */
display: none;
}
[id^=l]:nth-child(3n) {
/* every third element */
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sContainer">
<div class="message0" id="l0">Initial Content 111</div>
<div class="message1" id="l1">Initial Content 222</div>
<div class="message2" id="l2">Initial Content 333</div>
<div class="message3" id="l3">Initial Content 444</div>
<div class="message4" id="l4">Initial Content 555</div>
<div class="message5" id="l5">Initial Content 666</div>
<div class="message6" id="l6">Initial Content 777</div>
</div>
Use Jquery Visible Selector With Starts With Selector
$("div[id^='l']:visible").addClass("Your_Class_Name");
You can use event delegation to find which element is being focused on. Please see this: http://jsfiddle.net/0sbdttds/1/
The key is to add a listener to the parent, like this:
$("#sContainer").click(showMessage);
Then in the handler, use the event to check the target, like this:
var focusedElement = $("#" + e.target.id);
focusedElement then contains a jQuery object that points to the element that was targeted by the action (which in the case of the fiddle is a click.)
The above fiddle works on clicks. If you want focus check out How to focus div?
Also, the CSS in your fiddle can be improved. It isn't DRY: http://csswizardry.com/2013/07/writing-dryer-vanilla-css/
The ids can be filtered out for visible elements using :visible pseudo selector. I have set tabIndex so that the <div>s are fucusable.
Please checkout the working code snippet below:
var dataAbc = '<div class="message7" tabindex="1">Focus Shifted Here</div>';
// I am prepending just 1 <div> as of now. To prepend multiple <div>s, make sure to increment the tabIndex using a for loop.
setTimeout(function(){ $(dataAbc).prependTo("#sContainer");},3000);
$("div:visible").each(function(){
console.log($(this).attr('id'));
});
$(document).on("focusin", "div div", function(){
$(this).css("background", "yellow");
});
$(document).on("focusout", "div div", function(){
$(this).css("background", "white");
});
.message0 {margin: 30px;height: 200px;border: 10px solid green;}
.message1 {margin: 30px;height: 200px;border: 10px solid yellow;}
.message2 {margin: 30px;height: 200px;border: 10px solid pink;}
.message3 {margin: 30px;height: 200px;border: 10px solid blue;}
.message4 {margin: 30px;height: 200px;border: 10px solid black;}
.message5 {margin: 30px;height: 200px;border: 10px solid cyan;}
.message6 {margin: 30px;height: 200px;border: 10px solid orange;}
.message7 {margin: 30px;height: 200px;border: 10px solid red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sContainer">
<div class="message0" id="l0" tabindex="2">Initial Content 111</div>
<div class="message1" id="l1" tabindex="3">Initial Content 222</div>
<div class="message2" id="l2" tabindex="4">Initial Content 333</div>
<div class="message3" id="l3" tabindex="5">Initial Content 444</div>
<div class="message4" id="l4" tabindex="6">Initial Content 555</div>
<div class="message5" id="l5" tabindex="7">Initial Content 666</div>
<div class="message6" id="l6" tabindex="8">Initial Content 777</div>
</div>
Updated jsFiddle
Checkout the documentation links below:
http://api.jquery.com/visible-selector/
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.tabIndex
To find the divs that are in the viewport requires a little more than what jQuery provides out of the box. You might need something like Viewport, which is a class I wrote for this kind of problem.
var viewport = new Viewport(window);
viewport.addEventListener("scroll:complete", function(vp) {
viewport.querySelectorAll("div.message", function(div) {
div.classList.add("foo");
});
});
Each div that you want to detect in the viewport should have one common class to make your code easier to maintain. Please note that Internet Explorer is supported starting at version 9, plus the normal standards compliant browsers.
I think that you looking for
$(document).ready(function(){
var i,classes;
var divs_num = $('#sContainer div').length;
for(i = 0 ; i < divs_num; i++){
Ids= $('#sContainer div:visible').eq(i).attr('id');
if(typeof Ids !== 'undefined'){
alert(Ids);
if(Ids == 'l3' ){
$('#'+Ids).css('background','blue');
}
}
}
$('#sContainer div').on('click',function(){
$('#sContainer div').css('border','5px solid blue');
$(this).css('border','5px solid red');
});
});
DEMO the code get all visible divs and alert all visible div Ids.. then check for example for id l3 if its visible change its background to red .. and in click event When click in any div change its border to red and change all another divs to blue border

Scrolling a DIV to Specific Location

There is a plethora of similar questions around but none of them seem to be looking for what I'm looking for, or else none of the answers are useful for my purposes.
The jsfiddle: http://jsfiddle.net/tumblingpenguin/9yGCf/4/
The user will select an option and the page will reload with their option applied. What I need is for the "option list" DIV to be scrolled down to the selected option such that it is in the center of the option list.
The HTML...
<div id="container">
<a href="#">
<div class="option">
Option 1
</div>
</a>
<!-- other options -->
<a href="#">
<div class="option selected"> <!-- scroll to here -->
Option 4
</div>
<!-- other options -->
<a href="#">
<div class="option">
Option 7
</div>
</a>
</div>
The selected option is marked with the selected class. I need to somehow scroll the DIV down to the selected option.
The CSS...
#container {
background-color: #F00;
height: 100px;
overflow-x: hidden;
overflow-y: scroll;
width: 200px;
}
a {
color: #FFF;
text-decoration: none;
}
.option {
background-color: #c0c0c0;
padding: 5px;
width: 200px;
}
.option:hover {
background-color: #ccc;
}
.selected {
background-color: #3c6;
}
I've seen this done on other websites so I know it's possible—I just haven't a clue where to begin with it.
P.S. jQuery solutions are acceptable.
Something like this http://jsfiddle.net/X2eTL/1/:
// On document ready
$(function(){
// Find selected div
var selected = $('#container .selected');
// Scroll container to offset of the selected div
selected.parent().parent().scrollTop(selected[0].offsetTop);
});
Without the jQuery (put this at the bottom of the < body > tag:
// Find selected div
var selected = document.querySelector('#container .selected');
// Scroll container to offset of the selected div
selected.parentNode.parentNode.scrollTop = selected.offsetTop;
demo: http://jsfiddle.net/66tGt/
Since you said JQuery answers are acceptable, here's an example of what you're looking for:
$('body, html').animate({ scrollTop: div.offset().top-210 }, 1000);
Replace div for whatever element you want to scroll to.
Here is one possible solution that may work for you:
Demo Fiddle
JS:
$('#container').scrollTop( $('.selected').position().top );
Take a look at this fiddle : http://jsfiddle.net/9yGCf/8/
As requested it scrolls to the middle of the div (you can change the offset by however much you want to make little adjustments). I would probably suggest setting either a line height with some padding and whatnot and then do the math to change the offset that I have at -40 so that it does put it in the middle.
But I used jquery and came up with this quick little code... also added some code to change the selected option
$('.option').click(function(){
$('.selected').removeClass('selected');
$(this).addClass('selected');
$(this).parent().parent().scrollTop(selected[0].offsetTop - 40);
});
This magical API will automatically scroll to the right position.
element.scrollIntoView({ block: 'center' })
See more details:
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

How to hide/show div with javascript

I want to achieve hide/show with div's in html but in this way.
Here is my html:
<div id="left"></div>
<div id="middle">
<input type="button" id="button"/>
</div>
<div id="right"></div>
And this is my css:
body
{
height: 100%;
margin: 0;
padding: 0 ;
border: 0 none;
}
#left
{
background-color:#EEEEEE;
height:570px;
width:73.9%;
float:left;
}
#center
{
background-color:#D4EAE4;
color:#535353;
height:570px;
width:15.25%;
float:left;
margin:0;
}
#right
{
background-color:#D4EAE4;
float:left;
width:11%;
height:570px;
margin:0;
}
I want to do that when I click button on div center to hide div right and to expand divleft for the size of the div right and then move div center all the way to the right. I want to hide/show them with horizontal animation, such as from left to right or right to left.
Playing with the words can be tricky so I made a little pictures so you can actually see what am I talking about:
Start phase:
And end phase:
You can see a working demo here... http://jsfiddle.net/miqdad/3WDbz/
or you can see other demo which increment width of first div here .. http://jsfiddle.net/miqdad/3WDbz/1/
I had almost the same question a couple of days ago and maybe it helps you too.
this example uses a checkbox to hide the div. and make the other div 100% width.
javascript, When right div is hidden left div has to be 100% width.
the javascript code from the example:
$(function() {
$("#foo").on("click",function() {
if ($(this).is(':checked')) $('#checked-a').show('fast',function() {
$('#checked-b').css("width","60%");
$('#checked-a').css("width","40%");
}) ;
else $('#checked-a').show('fast',function(){
$('#checked-b').css("width","100%").show();
$('#checked-a').css("width","0%").hide();
});
});
});
and an example:
http://jsfiddle.net/mplungjan/5rdXh/
This is one of the best ways to hide a div element using JavaScript:
<html>
<head>
<script>
function hideDiv() {
document.getElementById("myP2").style.visibility = "hidden";
}
</script>
</head>
<body>
<button onClick="hideDiv()">Hide</button>
<br>
<br>
<p id="myP2">Hello world!</p>
</body>
</html>
Implementing with JQuery is easy. Have a look at this JSFiddle example: http://jsfiddle.net/q39wv/2/
(To all: Normally I wouldn't put only a JSFiddle link here, but this time I think it's worth showing the OP how the whole thing works, with some adjustments to his HTML and CSS).
A Javascript-only solution would be much more difficult to implement.

Is it possible to position one element relative to another dynamically sized element using only styles?

Is it possible to position one element relative to another specific element using only CSS styles if some of the dimensions are dynamic?
I know I can easily do this with jQuery, but I'm trying to push everything into the stylesheet that I possibly can rather than leaning on javascript.
Here is code that does more or less what I'm trying to accomplish, though I'd like to get rid of the javascript and still have the same effect:
http://jsfiddle.net/EaHU7/
Content:
<div id="reference">
Some text - lorem ipsum, or short, shouldn't matter. See CSS
</div>
<div id="relative">
Relative
</div>
CSS:
div#reference {
min-height:200px; /* could be thousands of pixels */
width:500px;
padding:1em;
border-style:solid;
border-width:1px;
}
div#relative {
width:50px;
height:50px;
padding:1em;
background:orangered;
border-style:solid;
border-left-style:none;
border-width:1px;
}
JS:
var reference = $("div#reference");
var refPos = reference.offset();
var refWidth = reference.outerWidth();
var refHeight = reference.outerHeight();
var relative = $("div#relative");
var relHeight = relative.outerHeight();
relative
.css({
"position":"absolute",
"left":(refPos.left + refWidth) + "px",
"top":(refPos.top + refHeight - relHeight) + "px"
})
.show();
Screenshot:
Yes. There are many ways to do this. you can do it with absolute positioning by placing the orange square within your text div and set its right value to "-50px" and its bottom value to "0px"
div#reference {
position: relative;
}
div#relative {
position: absolute;
right: -50px;
bottom: 0px;
}
and your HTML like this:
<div id="reference">
Some text - lorem ipsum, or short, shouldn't matter. See CSS
<div id="relative">
Relative
</div>
</div>
Try something like this. The orange square should stay at the bottom and to right at all times no matter what the size of the reference div is.

Categories

Resources