I am trying to make a page which which have only two section 1st section which is at top have please see the image . Now I m able to go to div 1 to div 2 easily using pagePiling.js. can anyone tell me how to achieve the horizontal effect in div 1 . and after the end of the content on div 1 it must pagePile to div 2 . and when coming back to div 1 it user also see the effect of horizontal scroll.
In case you want to have a section with large content and therefore create an scroll bar for that section, you can do it by adding the class pp-scrollable to that section:
Related
My goal is to have two sidebars on the left that are fixed and collapsible, and having the main content on the right to "follow" the sidebars when they collapse/expand.
Illustration of the possible positions for sidebars and content:
But let's proceed step by step.
I want a fixed sidebar on the left that is collapsible, and the main content (on the right of the sidebar) to be expanded when the sidebar is collapsed.
The thing here is that the sidebar has a fixed position, so the content on its right has to be pushed right (with a left margin) to avoid overlap.
I know the width of the sidebar so it's not a problem to play with CSS/JavaScript, and I have a working example here: https://jsfiddle.net/Pawamoy/yamm7eLh/2/
Basically, when you click on the sidebar (bottom part), active class is toggled on the sidebar and expand class is toggled on the content. These classes will change the width of the sidebar and the left margin of the content.
$(document).ready(function() {
$('#sidebar').on('click', function(e) {
if ($(e.target).is("#sidebar")) {
$('#sidebar').toggleClass('active');
$('#content').toggleClass('expand');
}
});
});
I want to add a second fixed and collapsible sidebar, at the right of the first one.
But playing with toggled CSS classes will not be enough since I need to calculate which sidebar is active or not, to be able to set the left margin of the content. The left margin would be 160px when both sidebars are collapsed, 320px when only one is collapsed, and 500px when none are collapsed. Not only that but the second sidebar itself needs to be pushed back and forth on the right depending on the first sidebar width.
Solution as I imagine it: the content could just "follow" the element on its left (the second sidebar), without changing its left margin value. Is there a way to do that, knowing that both sidebars are fixed (they stay at the same position on the screen when the user scroll the main contents)? In other words, how can I position the second sidebar relative to the first one, and the content relative to the second sidebar, and at the same time have both sidebars "fixed"?
I solved this by thinking with boxes. Instead of trying to accomplish complex resizing between three side-to-side elements, I used one more layer of div. See the idea on the image below: on the left is what I was trying to do. On the right is how I solved it. I even managed to add a fixed navigation bar. I just took what I already had and used it a second time in a sub-div.
The key here is to NOT specify the left CSS positioning value for your fixed elements. Here is the updated fiddle: https://jsfiddle.net/Pawamoy/yamm7eLh/3/
I am building a wordpress page using uncode theme and set the pages to scroll to section. However, when I get to the last section which is more than the height of the window, it stops scrolling using my mouse wheel.
How can I force this specific div which is only the last section to scroll as I wanted?
URL: https://powerfulpoints.com.au/SITE_2017/#6
Any help is much appreciated.
Thanks!
The only reason what I can think of is that you can't scroll down is because:
You have the following code:
$(this).attr('data-section', index);
If you look at the #6 html code it looks like this:
<div data-parent="true" class="enabled-scroll row-container onepage-
section boomapps_vcrow" data-label="6" data-name="6" data-section="6">
You see that is has data-section = 6
But the footer doesn't have any data-section
So there is no way it will scroll down with that function because number 6 is the end.
There are 2 thing you can do:
First thing is you can place the footer in to data-section 6
Second thing you can do is create a data-section 7
If you have any other questions just ask.
I am trying to implement a vertical ticker feed of 20 news say. Here I want to have this with below points :
1.) The ticker should display first 5 news at a time. When a user scroll down in the ticket box, he/she can view the others news down to 20th one.
2.) when a user hovers on any news div section, it should display a box in the left side of the news text. Just like as in the case of Facebook ticker. Here what's important is, The box should be displayed well relative to the position of the news div section. If the current position of the news div section is at the bottom of the page then the hover box should be appear at the bottom only. Similarly if the news div position is at the middle of the page, then it should display the hover box at the middle. In a nutshell the hover box should be dynamically adjust its position based on the position of the new div section.
I am facing challenges while developing this so decided to take help from you guys. The main challenge is, while trying to make the ticker box scrollable of fixed height to contain only 5 elements, it is hiding the hover box as well.
The easiest way to achieve the moving context div would be to render it for every item and show it when the user hovers over the ticker item.
Each item would look like <div class="a">NEWS 1 <div class="a1">TO THE LEFT (news)</div></div>
Then you simply set .a1 to display:none on load and add
.a:hover .a1 {
display:block;
}
in your css.
To solve your overflow problem when setting overflow-y to scroll, you can set a margin-left to your list which will expand the overflow-x bounds (and allow your hover over content to display)
Example here
to get what you're really wanting, you're gonna have to use javascript. You'll need to listen to the onmouseover event for all your ticker items and set the Y position of the content div to match. example here: codepen you'll need to sort updating the content of the div and correct left/right position based on where you want it to show
Here is my problem, follow the steps below as not sure how to explain this without seeing it happen:
https://www.facebook.com/TheBackyrdCricketr/app_203351739677351
1) Click on the "About Us" button" - A section should slide down
2) Click on the "Rules" button (the top left image of the group of 9) - another section should slide down
3) Click on the red "Twenty20" button (the left of the 3 emblem options) - another section should slide down.
4) Minimise all the sections by clicking all the buttons in the reverse order from above i.e.(Twenty20 then, rules then about us)
5) Scroll to the bottom of the page where you will find a large blank section below my footer which hasn't slid back up to the bottom of my footer.
How do I fix this so that this empty space/height of my webpage is always the height of the bottom of my footer even when different divs are sliding down/up?
No one will open the FB through your link, so you need to understand that it's a matter of security.
According to heading of your post I think you need this:
http://www.c-sharpcorner.com/UploadFile/cd7c2e/create-a-floating-div-which-will-come-up-and-down-automatica/
I have created the following page http://kylehouston.com/testing/localscroll/ where I have a number of main links and then sublinks for these. At the moment when a main link is clicked the content scrolls vertically and when a sublink is clicked eg Blue Inner Link 1 the content slides horizontally.
My question is how can I update the script so that when I click a main link the content scrolls horizontally and when I click a sublink the content scrolls vertically?
Thanks
Kyle
Based on the documentation I think you need to setup selectors that target the parents and children separately. Then set the axis property.
$('parent selector').localScroll({
axis:'yx'
});
$('child selector').localScroll({
axis:'xy'
});
Right now your code uses the same selector and default axis for everything
$.localScroll.defaults.axis = 'xy';