I have a gridview with a link in each datarow. When user clicks the link, there is a popup div. The popup div is at a certain location on the page, but if there are a lot of rows in the gridview, user clicks on a link after scrolling down to the bottom of the page, the div pops up at the top of the page, moving the page back up to the top.
I would like the div to position on the page relative to where the link they click is. So, if they scroll down and click on gridview link, the div pops up down there. If a link at top of gridview, then popup there at top.
Here is my code:
<script type="text/javascript">
function CopyRecords() {
document.all.CopyItemsDiv.style.display = 'block';
document.getElementById("outerdiv2").style.display = 'block';
}
function closeFrame2() {
document.getElementById("outerdiv2").style.display = 'none';
location.replace('default.aspx');
}
</script>
<div id="outerdiv2" style="position: absolute; top: 30px; left: 550px; filter: alpha(opacity=85); z-index: 1001; display: none; background-color: white; border: .125em solid #736F6E;">
<div style="text-align: right; padding: .25em .5em; font-size: 1.25em; border: outset 2px gray; margin-bottom: 4px; background-color: #cccccc;">
<span style="float: left; font-size: medium;">Import Budget</span>
<b>x</b></div>
<div id="CopyItemsDiv" style="height: 150px; width: 300px; border: none; margin-left: 15px;" >
Div Contents...
</div>
</div>
I'm afraid your example is incomplete: http://jsfiddle.net/6H7Ss/5/embedded/result/ There is nothing shown on the screen.
Please update the code for a more complete example: http://jsfiddle.net/6H7Ss/
Then I'll try to answer.
Related
I need to show a fixed div when i scroll onto and ID and then hide it when it gets to another ID or when a i scroll back to top and pass by the ID that had triggered it.
At the moment my code is showing the div in the ID i want and it's hidding when i scroll back to top at the same ID position but im not beeing able to also hide it when the next ID appears.
This is a small example of my code
https://jsfiddle.net/wo45r3yv/2/
I want to show the .cscroll div on scroll down at id="show" and then on scroll top hide it again on id="show" (that's working), when it reaches id="last-div" i want it to disappear again but also to appear on scroll top when reaches the bottom of id=middle-div, basicly the main idea is to have the fixed bar appearing on id="middle-div" but trigered by div ID and not screen position
Hope someone can help me
Many thanks
var offsetTop = $("#show").offset().top;
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
if(scrollTop > offsetTop){
$(".sticky-section").slideDown('200');
$(".cscroll").fadeIn('200');
}
else {
$(".sticky-section").slideUp('200');
$(".cscroll").fadeOut('200');
}
});
#first-div {
height: 600px;
background-color: red;
}
#middle-div {
height: 1600px;
background-color: blue;
}
#last-div {
height: 2600px;
background-color: green;
}
.cscroll {
width : 100%;
}
.sticky-section {
position: fixed;
top: 0px;
z-index: 8;
background-color: white;
color: black;
padding-top: 10px;
padding-bottom: 5px;
display: none;
text-align: center;
box-shadow: 0px 12px 21px -8px rgba(0,0,0,0.32);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="first-div">
MASTER
</div>
<div id="show"></div>
<div class="cscroll sticky-section">
<h4>
sticky content headline
</h4>
<h5>
more texts
</h5>
</div>
<div id="middle-div">
NEW DIV
</div>
<div id="last-div">
LAST DIV
</div>
I'm trying to create a slider whose handle jumps to where one clicks on the track, in addition to being able to be dragged.
Right now, I can drag it; but it doesn't respond when I click somewhere on the track.
PS: Just found the reason. I have another div placed on top of the slider track acting as a progress bar, so that when I click on the slider track, I'm actually clicking the progress bar div. My solution was to set the slider div's background to "transparent" and "z-index: 2" in the css file. Apparently this allows the display of the progressbar div underneath it while preserving the function of clicking on the track.
#audio_slider{
position: absolute;
margin-top: 5px;
height: 12px;
width: 95%;
float: left;
border: 2px solid white;
z-index: 2;
background: transparent;
}
#audio_progress {
position: absolute;
margin-top: 6px;
border: none;
float: left;
width: 95%;
height: 11px;
display:inline-block;
}
I created a Modal. Everything went well. When there are lot of contents, a vertical scrollbar will show up.
The problem is if the body page and the modal have both a lot of contents there will be two vertical scrollbars.
Here an example:
function showModal() {
// Hide Body Scrollbar
// document.body.style.overflow = "hidden";
document.getElementById("myModal").style.display="block";
// When the user clicks anywhere outside of the modal, close it
var modal = document.getElementById("myModal");
window.onclick = function(event) {
if (event.target == modal) {
//modal.style.display = "none";
closeModal();
}
}
}
function closeModal() {
// Show Body Scrollbar
// document.body.style.overflow = "visible";
document.getElementById("myModal").style.display="none";
}
.modal {
display: none;
position: fixed;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modalContent {
border-radius: 10px;
background-color: #fefefe;
margin: 10% auto; /* 15% from the top and centered */
padding: 0;
border: 1px solid #888;
width: 50%; /* Could be more or less, depending on screen size */
overflow: hidden;
}
.modal .modalHeader {
font-family: 'Ubuntu', Arial;
font-weight: bold;
padding: 10px;
margin: 0;
}
.modal .modalHeader span {
color: #7788C9;
letter-spacing: 4px;
}
.modal .modalHeader .close {
color: #000;
float: right;
padding: 0 10px;
}
.clear-close{clear:right;display: block;}
.modal .modalBody {
background-color: #FFF;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
color: #000;
position: static;
padding: 10px;
margin: 0;
}
.modal .modalFooter {
padding: 10px;
margin: 0;
text-align: right;
}
<center>
<h1>Modal</h1>
<button onClick="showModal()">
Show Modal
</button>
<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
</center>
<div id="myModal" class="modal">
<div id="abc" class="modalContent">
<div class="modalHeader">
<span>Modal</span>
X
</div>
<div class="modalBody clear-close">
This is the modal content.
<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
</div>
<div class="modalFooter">
Close
</div>
</div>
</div>
I've my solutions, but they have up and down:
1) Trying to keep the modal as short as possible. Problem is not everyone has the same screen size. So some people might see 2 scrollbars.
2) In my Javascript code, document.body.style.overflow are currently set as a commentary. I uncomment them. When I click Show Modal, it shows 1 scrollbar like I want. But the down is when I click on it, the content behind the modal moves slightly to the right. (When websites is centered)
So, is there a way to show the modal scrollbar only without the body scrollbar and without making the content behind moving slightly to the right and to the left?
We should see 1 scrollbar only when the modal show up.
We should not see the content behind the modal moving slightly to the
right and left when opening and closing.
Note: I'm not allowed to use jQuery
I've got an element with overflow: hidden, which I'd like to expand when clicked.
This is what I have so far.
http://jsfiddle.net/up6bW/2/
It does expand the element, but not as it's supposed to. It should not push the element below it, but overlap and hide it. I can make this work partially by using position: absolute, but this makes the next element collapse to the top.
Can this be done by only using CSS on the clicked element? Other elements should not be adjusted.
Or if they are, this should be calculated automatically using JavaScript.
Another solution could also involve wrapping the div in a container like so:
HTML:
<div class="container">
<div class="a" onclick="z(this)">
click here click here click here click here click here
</div>
</div>
<div>1234567890</div>
<div>1234567890</div>
<div>1234567890</div>
<div>1234567890</div>
<div>1234567890</div>
CSS:
body { margin: 10px; }
div { font-family: sans-serif; font-size: 16px; line-height: 20px; margin-bottom: 10px; width: 150px; word-break: break-all; }
div.a { color: tomato; cursor: pointer; height: 20px; overflow: hidden; }
.container { height: 20px; overflow: visible; }
JS:
function z (a) {
a.style.cssText = a.style.border ? "" : "\
background: #fff;\
border: 1px solid #ccc;\
height: auto;\
margin-left: -5px;\
margin-top: -5px;\
padding: 4px;\
position: absolute;\
";
};
DEMO HERE
Obviously adding HTML elements for presentational reasons is less than ideal, but I think it's better than a JavaScript alternative.
Tested in IE7+, Chrome, and Firefox
Here's an example of what you might need:
http://jsfiddle.net/up6bW/39/
All I did was make the position:absolute on your dropdown Div and then gave the first of the other divs a padding on top to compensate for the loss of space from the absolute positioning:
First you can change your second div a bit to add a class:
<div class="a" onclick="z(this)">click here click here click here click here click here</div>
<div class="second">1234567890</div>
<div>1234567890</div>
<div>1234567890</div>
<div>1234567890</div>
<div>1234567890</div>
Then change the CSS to something like this:
body {
margin: 10px;
}
div {
width: 150px;
font-family: sans-serif;
font-size: 16px;
line-height: 20px;
margin-bottom: 10px;
word-break: break-all;
}
div.a {
cursor: pointer;
color: tomato;
height: 20px;
overflow: hidden;
position:absolute;
}
.second{
padding:25px 0px 0px 0px;
}
The div you want to expand will have absolute positioning then the second div will have enough padding to make up for that first div.
Placing elements on top of each other requires absolute positioning. You can put some padding-top on the first element to compensate for the positioning of the overlap.
I'm using this solution, which automatically adds padding to the next element.
http://jsfiddle.net/up6bW/47/
HTML
<div class="a" onclick="z(this)">click here click here click here</div>
<div>1234567890</div>
<div>1234567890</div>
<div>1234567890</div>
<div class="a" onclick="z(this)">click here click here click here</div>
<div>1234567890</div>
<div>1234567890</div>
<div>1234567890</div>
<div class="a" onclick="z(this)">click here click here click here</div>
CSS
div {
font-family: sans-serif;
font-size: 16px;
line-height: 20px;
width: 150px;
word-break: break-all;
}
div.a {
color: tomato;
cursor: pointer;
height: 20px;
overflow: hidden;
}
JavaScript
function z (a) {
// nextElementSibling equivalent
var b = a.nextSibling;
while (b && b.nodeType != 1)
b = b.nextSibling;
if (b)
b.style.cssText = b.style.paddingTop ? "" : "padding-top: " + a.clientHeight + "px";
a.style.cssText = a.style.border ? "" : "\
background: #fff;\
border: 1px solid #ccc;\
height: auto;\
margin-left: -5px;\
margin-top: -5px;\
padding: 4px;\
position: absolute;\
";
};
I am using the following sliding div script:
http://www.webdesignerwall.com/demo/jquery/simple-slide-panel.html
Currently, the slidetoggle function is activated when the .btn-slide button is clicked. This slides up the "panel" div.
Upon clicking the .btn-slide button a second time, the panel div is closed.
I am a complete newb at js, so any assistance would be appreciated. Here's what I am trying to do:
1) When the mouse moves over (as opposed to clicking) the .btn-slide class, i would like the panel to slide out.
2) Then, when the mouse moves out of either the .btn-slide or #panel, i would like the panel to close. (but if the mouse is over either one, the panel should stay open).
I was able to get it working to where the slidetoggle function would close either one, or the other, but not both.
Thank you in advance for the help.
Sincerely,
Mac
Here is the JS:
<script type="text/javascript">
jQuery(function($){
$(document).ready(function(){
$('.btn-slide').click(function() {
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
});
</script>
here is the HTML currently being used:
<div id="prod_nav_tab">
<div id="panel">
This is where stuff goes!
</div>
<p class="slide"><a class="btn-slide">Table of Contents</a></p>
</div>
I have played with the CSS to fit my particular web site and is as follows (the original js, html, css can be obtained from the link above).
div#prod_nav_tab {
width: 200px;
height: 31px;
overflow: hidden;
background-color:#F00;
float: left;
margin: 0px 0px 0px 75px;
}
a:focus {
outline: none;
}
#panel {
background-color:#F00;
width: 200px;
height: 200px;
display: none;
position: absolute;
bottom: 0px;
}
.slide {
margin: 0;
padding: 0;
/* border-top: solid 4px #422410; **Adds a line at top of slide button to distibuish it */
background: url(images/btn-slide.gif) no-repeat center top;
}
.btn-slide {
background: #d8d8d8;
text-align: center;
width: 200px;
height: 31px;
padding: 0px 0px 0 0;
margin: 0 0 0 0;
display: block;
font: bold 12pt Arial, Helvetica, sans-serif;
color: #666;
text-decoration: none;
position: relative;
cursor: pointer;
/* background: url(images/white-arrow.gif) no-repeat right -50px; ** Controls Arrow up/down */
}
.active {
background-position: right 12px;
}
When you move away from the .btn-slide to the #panel it hides it now because it triggers the mouseleave event of the .btn-slide.
To prevent this you should do something like:
HTML:
<div id="trigger">
Slide down
<div id="panel">
Content of your panel
</div>
</div>
JQuery:
jQuery(function($) {
$(document).ready(function() {
$("#trigger").mouseenter(function() {
$("#panel").slideDown("slow");
$(this).addClass("active");
}).mouseleave(function() {
$("#panel").slideUp("slow");
$(this).removeClass("active");
});
});
});
Make sure in your CSS you then set the panel to be hidden from start...
div#panel {
display: none;
}