Let me first present my code sample:
<div id="StartScroll"></div>
Many divs and content here !
<div id="EndScroll"></div>
My question is that how can i make a scroll bar which starts to scroll from div with id StartScroll and end scroling at div with id EndScroll .
Note that there is content before StartScroll and after EndScroll but i want the scroll bar should not be allow to go outside StartScroll and EndScroll .
How can i make this? Maybe with jQuery ?
Thanks in advance!
overflow-y: scroll could be the solution
http://jsfiddle.net/ds3nqbkz/2/
<div id="StartScroll" style="overflow-y: scroll">
Many divs and content here !<br />
Many divs and content here !<br />
Many divs and content here !<br />
</div>
Wrap the content within the startScroll and endScroll division blocks within a div and assign the following style:
overflow-y: auto;
height: 200px; (or any specific height you wish to)
Try this:
Check here
.makescroll {
height:150px
overflow-y:scroll;
}
<div class="makescroll">
<div id="StartScroll"></div>
<div id="EndScroll"></div>
</div>
You then to wrap your content in single div and give it fixed height and make overflow-y : auto or scroll.
overflow-auto :- Will show scroll only if your content is more than height. Else it will be remove.
overflow-scroll :- Will always show scroll, in case content is less it will show disabled scroll.
You can use any of below approach to apply it. Examples have scroll you can change to auto if needed.
#fixed{
height:150px;
overflow-y:scroll;
}
<div id="StartScroll"></div>
<div id="fixed">
// other content ere
</div>
<div id="EndScroll"></div>
</div>
#
<div id="StartScroll" inlineStyle="height:150px;overflow-y:scroll;"></div>
<div id="fixed">
// other content ere
</div>
<div id="EndScroll"></div>
</div>
##############################################################################################
fixedStyle{
height:150px;
overflow-y:scroll;
}
<div id="StartScroll" class="fixedStyle"></div>
<div id="fixed">
// other content ere
</div>
<div id="EndScroll"></div>
</div>
##################################################################################
documentById("fixed").style = "height:150px;overflow-y:scroll;";
<div id= "StartScroll"></div>
<div id="fixed">
// other content ere
</div>
<div id="EndScroll"></div>
</div>
Related
I am trying to display a gallery of coaches on a webpage by displaying images with a name. I would like to enable a popup window onClick that will display more information for each coach by toggling the CSS class .-enable {} by targeting specific container divs using their associated ID's. I setup the html so a popup window appears with a "close" button by toggling the css class .enable on that specific container.
I thought to use a really simple function with a parameter to select the id, then toggle a class on the id. In my example, everything wrapped within the first tag is visible by default, and the following div is activated by toggling the css class .-enable. My example "Chris" is a coach and by clicking on the default container block, I activate function "coachWindow(coach)" and pass "Chris" as a parameter in the function to select the div with ID "chris" and toggle the CSS class.
function coachWindow ( coach ) {
document.querySelector("#" + coach).classList.toggle("-enable");
}
.-enable {
display:block;
}
<a onclick="coachWindow(chris)"><div>
<div class="enlarge">
<div class="chris-img coach-img-sizing">
<div class="coach-overlay">
<h3 class="coach-name">Chris</h3>
</div>
</div>
</div>
</a>
<div id="chris" class="coach"> <!--(-enable class appears here)-->
<div class="lightwindow"></div>
<div class="coach-box">
<div class="coach-container">
<h3 class="coach-heading">Chris</h3>
<div class="image-container chris-img coach-img-sizing"></div>
<div class="coach-text">
<p>
Text block on this coach.
</p>
</div>
<button onclick="coachWindow(chris)" class="coach-button">Close</button>
</div>
</div>
</div>
I wasn't sure about the querySelector options, but I saw an example with jQuery that looked like $('#' + parameter) capable of targeting parameter ID's
When I run document.querySelector(chris).classList.toggle("-enable"); from the console, the popup box appears, however running the same id through function coachWindow returns undefined and typeError results.
How can I write my function so I can pass through any coach ID and display the popup window for that corresponding coach?
This is much simpler than you think. First, don't focus on ids as this will make for a more complex and brittle solution. If you structure your HTML correctly, it's just a matter of showing or hiding the appropriate div by locating it with the DOM .closest() and .nextElementSibling() methods and then adding and removing a pre-set class with .classList.add and .classList.Remove. With this approach, it doesn't matter what the ids are (you don't even need to use them) and you can add/remove coaches at any time without having to modify the JavaScript. Just keep the correct HTML structure.
Also, don't use <a> elements just as a click event trigger. Only use them when you are navigating, otherwise it's semantically incorrect. Just about any visible element can have a click event set up on it as you'll see below. Along the same lines, you can style anything to look like anything, so even non-link elements can look like links or buttons or whatever.
Speaking of semantics, don't use headings (h1...h6) because of how they make the text look. In fact, never use any HTML element because of the built-in styling that comes with it. Use the right tag to describe your content and use CSS to style the elements later. An h3 should only ever be used to describe content that is at a third sub-level in a hierarchy. That means that they should only ever appear as children of an h2 and that h2 needs to be in an h1.
// Get all the "links" into an array
let links = Array.prototype.slice.call(document.querySelectorAll("h1.coach-name"));
// Loop over the array of links
links.forEach(function(link){
// Set up a click event handler for each link
link.addEventListener("click", function(){
// Locate the outermost div of the clicked element and
// remove the hidden class from the following element
link.closest(".enlarge").nextElementSibling.classList.remove("hidden");
});
});
// Get all the close buttons into an array
let closeButtons = Array.prototype.slice.call(document.querySelectorAll(".coach-button"));
// Loop through all the close buttons
closeButtons.forEach(function(btn){
// Set up a click event handler for each
btn.addEventListener("click", function(){
// Locate the nearest ancestor div that holds the popup
// and add back the hidden class to hide the current popup
btn.closest(".coach").classList.add("hidden");
});
});
.coach {
border:6px double #e0e0e0;
padding:5px; position:absolute;
top:25px; left:25px;
background-color:#55f;
color:#ff0;
padding:10px;
border-radius:3px;
}
.enlarge h1, .coach h1 {
font-size:1em;
margin-top:.5em;
padding:3px;
text-align:center;
}
.enlarge h1 {
border:1px solid #808080;
background-color:#e0e0e0;
display:inline-block;
border-radius:2px;
width:75px;
cursor:pointer;
}
.enlarge h1:hover { box-shadow:0 0 1px #606060; }
/* This will be set on the popups by default
and then removed as needed. */
.hidden { display:none; }
<div class="enlarge">
<div class="chris-img coach-img-sizing">
<div class="coach-overlay">
<h1 class="coach-name">Chris</h1>
</div>
</div>
</div>
<div id="chris" class="coach hidden"> <!-- each popup is hidden by default via CSS -->
<div class="lightwindow"></div>
<div class="coach-box">
<div class="coach-container">
<h1 class="coach-heading">Chris</h1>
<div class="image-container chris-img coach-img-sizing"></div>
<div class="coach-text">
<p>Text block on this coach.</p>
</div>
<button class="coach-button">Close</button>
</div>
</div>
</div>
<!-- ********************************************** -->
<div class="enlarge">
<div class="chris-img coach-img-sizing">
<div class="coach-overlay">
<h1 class="coach-name">Mary</h1>
</div>
</div>
</div>
<div id="chris" class="coach hidden">
<div class="lightwindow"></div>
<div class="coach-box">
<div class="coach-container">
<h1 class="coach-heading">Mary</h1>
<div class="image-container chris-img coach-img-sizing"></div>
<div class="coach-text">
<p>Text block on this coach.</p>
</div>
<button class="coach-button">Close</button>
</div>
</div>
</div>
<!-- ********************************************** -->
<div class="enlarge">
<div class="chris-img coach-img-sizing">
<div class="coach-overlay">
<h1 class="coach-name">Steve</h1>
</div>
</div>
</div>
<div id="chris" class="coach hidden">
<div class="lightwindow"></div>
<div class="coach-box">
<div class="coach-container">
<h1 class="coach-heading">Steve</h1>
<div class="image-container chris-img coach-img-sizing"></div>
<div class="coach-text">
<p>Text block on this coach.</p>
</div>
<button class="coach-button">Close</button>
</div>
</div>
</div>
<!-- ********************************************** -->
<div class="enlarge">
<div class="chris-img coach-img-sizing">
<div class="coach-overlay">
<h1 class="coach-name">Alice</h1>
</div>
</div>
</div>
<div id="chris" class="coach hidden">
<div class="lightwindow"></div>
<div class="coach-box">
<div class="coach-container">
<h1 class="coach-heading">Alice</h1>
<div class="image-container chris-img coach-img-sizing"></div>
<div class="coach-text">
<p>Text block on this coach.</p>
</div>
<button class="coach-button">Close</button>
</div>
</div>
</div>
I think your code is not complete, since i cannot see the css style that makes your div hidden. i assume it is something like this:
.coach {
display:none;
/* more styling... */
}
This happens because of CSS priorities. When the DOM experiences changes and the element is rendered again, it takes both CSS classes and process them. But, since both classes (what you define for coach and -enable) are together and both try to set display to different values, the rule that is at last is processed.
So, in order to fix this, you need to order your CSS rules in the following way:
.coach {
display:none;
}
.-enable {
display:block;
}
That way, if -enable is present, it will be the last style applied after applying .coach.
There are more rules about this, for instance, if you're applying CSS styles based on ID or element name, there are different priority rules. You can read more here
In my project, I use easyui-layout.
Sometimes, I should load other content from other page with ajax. And these new content will be laied in center region of cenDiv.
The ajax code is:
$.ajax({
.....
success:function(data)
{
$("#cenDiv").html(data);
.......
}
});
Now, I encounter a problem. When the content is too much which overflow cenDiv, there is no scroll. So only part of content display in cenDiv.
Here is my html code:
<body style="height:100%" class="easyui-layout" fit="true">
<div id="firDiv" class="easyui-layout" style="width:100%;height:88%;position:absolute;top:95px">
<div style="background:lightgrey;width:10%;height:100%;padding:10px" data-options="region:'west',split:true,title='Function'"></div>
<div id="cenDiv" class="easyui-layout" style="position:static;height:100%;width:100%" data-options="region:'center',title:''">
<div class="easyui-layout" style="position:static;height:3000px" data-options="region:'north',title:'',split:true">
north-John-Stack
</div>
<div class="easyui-layout" style="position:static;height:100px" data-options="region:'south',title:''">
south-Tyrion-Lanniste
</div>
</div>
</div>
</body>
I have set fit="true" in body, firDiv and cenDiv, but it works fail. Because the height of body, firDiv and cenDiv are changed.
And I tried overflow:auto, but it works fail again.
Just only cenDiv display scroll when content data is too much, while the others div postion is not changed.
Who can help me?
You need to use both max-height and overflow-y on cenDiv:
max-height: 100px;
overflow-y: auto;
Without the max-height, the scroll won't appear.
Anyway, you used too much height:100%, both the div inside "firDiv" have it.
You could change them in such way:
<body class="easyui-layout" fit="true">
<div id="firDiv" class="easyui-layout" style="width:100%;position:absolute;top:95px">
<div style="background:lightgrey;width:10%;height:calc(100vh - 293px);padding:10px" data-options="region:'west',split:true,title='Function'"></div>
<div id="cenDiv" class="easyui-layout" style="position:static;width:100%;height:150px;max-height:150px;overflow:auto;" data-options="region:'center',title:''">
<div class="easyui-layout" style="position:static;height:3000px" data-options="region:'north',title:'',split:true">
north-John-Stack
</div>
<div class="easyui-layout" style="position:static;height:100px" data-options="region:'south',title:''">
south-Tyrion-Lanniste
</div>
</div>
</div>
</body>
Delete position:static, and added
overflow-y:auto
works OK, like:
<div id="cenDiv" class="easyui-layout" style="height:100%;width:100%;overflow-y:auto" data-options="region:'center',title:''">
My exact question is related to using skrollr js like plugin.
I have features section with image and its features.Features are in list-items div and image is in another div.These two divisions are col-sm-6 side by side.
What I exactly trying to do is just to fix the position the image division exactly at center after it is scrolled into view-port center.So that if someone scroll-down to view the image, it should remain fixed after its center touches view-port center.While image remains fixed, list items should be scrolled.
Image position will become again static and scrolled with content after last list-items goes out of the view-port. So any suggestion...
Here is the code
<div class='container'>
<div class='row'>
<div class='col-sm-6'>
<ul class='featuresnav'>
<li>Graphically Rich</li>
<li>Fully Adaptable</li>
<li>Colors used</li>
<li>UI/UX Compatible</li>
<li>Awesome coding</li>
</ul>
</div>
<div class='col-sm-6'>
<img src='images/mobile_tablet.png' alt="display image"/>
</div>
</div> <!--row ends-->
</div> <!--container ends-->
$(document).ready(function(){
$(window).scroll(function(){
if(($(window).scrollTop())>($('#content').offset().top+$('#content').innerHeight())) {
$('#divv').css({'position':'fixed','top':$(window).outerHeight()/2});
}
else{
$('#divv').css({'position':'relative'});
}
})
})
#content-initial{
margin-top:1500px;
}
#divv{
width:100px;
height:100px;
background:green;
}
#content{position:relative;}
#somemorecontent{
height:1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content-initial"></div>
<div id="content">
<ul>
<li></li>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
</div>
<div id="divv"></div>
<div id="somemorecontent"></div>
How can I animate multiple div width using animate, when a div has already a width defined in the css of html.
For example. If I have style="width:30%;" in the html, and I want to animate that div from 0 to 30% how can I do it? And do that in multiple divs with the same class?
To animate a div that has no width defined, to a certain value, I know I can do it like this $('div').animate({ width: 'value' }, milisecs); but I don't want to set the width value on the JS and repeating this line multiple times.
I created this Fiddle that may help better understanding.
Thank you in advance.
Try to use data() like,
HTML
<p>Single</p>
<div class="container">
<div class="fill" data-width="80%">
<span><b>Bar One</b></span>
</div>
</div>
<hr>
<p>Multiple</p>
<div class="container">
<div class="fillmult" data-width="90%">
<span><b>Bar 1</b></span>
</div>
</div>
<div class="container">
<div class="fillmult" data-width="50%">
<span><b>Bar 2</b></span>
</div>
</div>
<div class="container">
<div class="fillmult" data-width="70%">
<span><b>Bar 3</b></span>
</div>
</div>
<div class="container">
<div class="fillmult" data-width="20%">
<span><b>Bar 4</b></span>
</div>
</div>
SCRIPT
$('.container > div').each(function(){ // you can use $('.fill, .fillmult').each
var width=$(this).data('width');
$(this).animate({ width: width }, 1500);
});
Live Demo
I have a div with several nested divs. All the child div's are float:left so they are all on the same line. The parent div "newDistractor" has a width of 100% so as it's parent grows it does as well. All of the child nodes have fixed widths of 20px. I want the div "distractorText" to grow at the same rate as it's parent so it occupies all empty space. Any ideas how to do it.
<div class="newDistractor">
<div style="width:20px"> </div>
<div style="width:20px"> </div>
<div class="distractorText">Enter text to add option.</div>
<div style="width:20px"> </div>
<div style="width:20px"> </div>
<div style="clear:left;margin-bottom:-43px;"> </div>
</div>
This could work. It doesn't actually resize the distractorText div, but it might be what you need:
<div class="newDistractor">
<div class="left"> </div>
<div class="left"> </div>
<div class="right"> </div>
<div class="right"> </div>
<div class="distractorText">Enter text to add option.</div>
<div style="clear:left;margin-bottom:-43px;"> </div>
</div>
The CSS for it is basically:
.left { float: left; }
.right { float: right; }
Look at it in action here
edit I cleaned the jsfiddle a little: look now
You could use jQuery's .resize() and then each time count the number of children <div>s, divide it into the current width, and set accordingly.
For this example specifically, you could use margins instead of floating div elements.
<div class="newDistractor">
<div class="distractorText" style="margin:0px 40px;">Enter text to add option.</div>
<div style="clear:left;margin-bottom:-43px;"> </div>
</div>
I haven't tried this right-off, but if you set the width of class "distractorText" to 100%, it should take care of the issue... or to some other "acceptable" percentage (maybe 50).
All religious crusades put aside, the following HTML will do what you need ^L^ :
<table class="newDistractor" style="width:100%">
<td style="width:20px">a</td>
<td style="width:20px">b</td>
<td class="distractorText" style="width:100%">Enter text to add option.</td>
<td style="width:20px">c</td>
<td style="width:20px">d</td>
<td style="clear:left;margin-bottom:-43px;">e</td>
</table>