I have this page on which there is div "celpage" with absolute position which contains all the content of the page, basically containing 4 different divs placed side by side.
I have four buttons in a header:
<div id="header">
<ul id="navlist">
<li><div id="centeredLogo"></div></li>
<li><div id="centeredFolio"></div></li>
<li><div id="centeredStor"></div></li>
<li><div id="centeredKont"></div></li>
I want this div "celpage" to move 875 to the left when clicked on Folio, 2x875 when clicked on Storitve and 3x875 when clicked on Kontakt and vice versa, so when clicked on button the page would scroll to corresponding div meant to be shown for that button.
I would practically like to achieve the same effect as this http://gazpo.com/downloads/tutorials/jquery/horizontal_scroll/, only on a whole page (except for header and footer which would remain static).
These 4 divs are made of 20 or so smaller rectangular divs with absolute positions. If I set relative position to "celpage" the sliding works, however the whole layout of the page is no longer centered. I am looking for a sliding solution for div with absolute position.
I created a jsFiddle to illustrate the page: http://jsfiddle.net/rUaYr/1/
Thanks!
The answer you seek is in the tutorial you posted. All you need to change is the container element.
Related
I have a 3 column layout where I want the left and right columns to be collapsible. I want the following:
A smooth slide
Sidebars that have a percentage width
No visible reflow on the sidebar content
No white-space: nowrap;, as this will mess with the display of the sidebar content.
Allow for complex content inside the sidebar, not just simple text in a <p> tag as in the codepen example below.
No hardcoded pixel widths - I know you can add a width on an inner div together with overflow:hidden on the parent, but I don't want to hardcode a large width.
I need the sidebar widths to be relative to the immediate parent (and not the viewport), in case the 3-column layout needs to be within a section of a page (in fact in my scenario that's the case).
Note that the I've tried transitioning on the width property in this codepen, but you can see the visible reflow of content inside the sidebar. Here's a .gif of it:
Ideally I'd like to do this without using JavaScript for the animation, but I'm open to it if there are no other good solutions.
One way to do this I would say is to give a % based width to your pabel-content.
Add these two properties to the class like this
.panel-content {
min-width: 300px;
}
This should remove the wrapping while animation.
I try to align drop-down submenu to the same level as its parent. I spend few hours solve this issue, but I still don't know how to go about that.
The blue buttons are navigation links when I click on one of them, dark-blue sub-menu appears, then when I click on a link inside dark-blue menu a pink sub-menu appears. Problem is that the pink sub-menu would appear at the same height as the li element that I clicked on. I want to have the pink sub-menu always appear at the top, aligned with the dark-blue menu.
I hope you understand. I attach 2 pictures. I would appreciate any help. Thank you.
Here is a link to the website. http://help.miloslacko.sk/ You can see the menu when you click on a link "01 SOCIALNE VECI MPSVR SR".
image1
image2
Change the position property of .wsmenu-submenu li to static.
It is currently set to position: relative, which forces the children that are absolute anywhere beneath it to base their top off of it. Instead, allow the overall container (.wsmenu-submenu video-container) to be the nearest relative parent so that your absolute children base their position off of that.
NOTE: position: absolute will also act as an anchor for absolute children, so you don't need to change anything else.
I am using this slimscroll library to display a better looking scroll bar for some divs on my page. I noticed that if I set the height of my scrollbar class to a fixed value (i.e. '500px', '80vh' etc.) then if the content does not overflow, the scrollbar will not be present and if it does, then it will appear. It works great.
However this solution doesn't work well because I need the div that encompasses the scrollbar to take up 100% of the parent div. However when I do that, the scrollbar will appear even if the content does not overflow the container.
Does anyone know a solution where I can set the height of the scrollbar to be 100% and have it behave so that it only appear when content overflows the parent container?
HTML
<div class="s12 m12 l12 row-90 m-b-0 rail-row">
<div class="card-scroll m-r-10">
<ul class="top-list">
///adds a series of divs based on data from back end
{{#each ins in selectedInstruction}}
<li>{{> Print_job printJobArgs ins true true}}</li>
{{/each}}
</ul>
</div>
</div>
JS
$('.card-scroll').slimScroll({
size: '8px',
height: '100%',
});
$(".slimScrollBar").hide()
When the page gets loaded, slimscroll encompasses the div with the class 'card-scroll' in a div and adds html to make its scrollbar appear.
I am trying to implement a javascript toggle effect for my "small" or mobile sized version of a responsive site. I am using my own custom WordPress theme.
I'm trying to use the script from this article: http://webdesignerwall.com/tutorials/mobile-navigation-design-tutorial/comment-page-1
The tricky part is that I'm trying to include several divs, not just a single nav. If you look at the site now (which is still under construction), at:
http://66.147.244.81/~assureva/
and reduce your browser window to narrower than 540px, you'll see that I've managed to get my top navbar (smallnav), 2 "login" links, and facebook and LinkedIn icons, all to disappear, and re-appear when pressing the "main menu" button that now appears at the top, to the right of the logo. But I can't seem to add in the last part, which is the 4 links that comprise the main "nav". I've wrapped the entire area in a div (mobimenubg), but the main navbar acts like it isn't in that div, but the "smallnav", "logins" and "socialcons" divs all combine as desired in the "mobimenubg" div.
If I go ahead and set the "navbar" div to "display:none" it will disappear but it won't re-appear when I click the "main menu" button.
So I think the answer to ask the javascript to include the "mobimenubg" div AND the "navbar" div (the "navbar div is a container that includes the actual "nav") but I don't know how to write it properly.
Here's the javascript:
<script type="text/javascript">
jQuery(document).ready(function($)
{/* prepend menu icon */
$('#mobimenuwrap').prepend('<div id="menu-icon">Main Menu</div>');
/* toggle nav */
$("#menu-icon").on("click", function(){
$("#mobimenubg").slideToggle();
$(this).toggleClass("active");
});
});
</script>
Can someone tell me how add the navbar div? Do I add another line after:
$("#mobimenubg").slideToggle();
or can I include it in the parens:
$("#mobimenubg" IN HERE?).slideToggle();
I don't know the conventions -
Help greatly appreciated!!
I've wrapped the entire area in a div (mobimenubg), but the main navbar acts like it isn't in that div,
You actually have the right code, but your HTML structure is off. The navbar div is not contained within the mobimenubg div, and that is the problem. Just make sure to nest navbar there, or otherwise I think you can also call the function on the navbar like:
$("#navbar").slideToggle();
I have two DIVs:
first one is narrow and is floated left and displays a kind of vertical tab structure.
second one displays content per selected item in the left DIV
You can see a simplified example here on JSFiddle.
As shown in example, left DIV is usually higher than the right one. That's why the right DIV is vertically shifted down to align it to the bottom of the selected item in the left DIV so the content is always in view when a user selects an item on the left.
Everything works as expected in Firefox and IE but not in Chrome.
Chrome issue
Whenever you select an item in the left DIV that should reposition the right DIV, the whole container of both gets higher even though non of the contained DIVs is as heigh.
What seems to be going on here and what am I doing wrong?
You can hide the extra height that is added by using .container { overflow-y: hidden; }
Set ur right side div container to position: absolute (i.e height of right and left container to be same and set width as your own)