I am using jquery tabbed content and I have noticed when navigating to any tab other than the product tab the page shifts a few pixels to the right and then when clicking the product tab it shifts back. What in the world is causing this?
The link to see it in action, http://clients.zerozendesign.info/techject/
The reason is the presence of the scroll bar on the long page content on the products tab. You should consider displaying the scroll bar even when the content does not require it using the CSS property for overflow, like so:
html { overflow-y:scroll; }
Related
I have a product page with two tabs (description and technical details): description can have long content and tech details is usually small.
Both tabs are fixed/sticy on scrolling, and anchored.
I would like the anchor to the second tab (technical details) to correctly position me to the top of the content but when I scroll the description and click on anchor, the link takes me to wrong vertical position.
How should I fix this in css?
I'm not sure who here is familiar with using custom CSS styling within the Mendix Low-Code Development platform, but I'm running low on ideas so I figured it was worth the shot.
So for the app we’re working on, one of the things we have is a popup that comes up that users can input information on. It has an autocomplete widget, two date pickers, a radio buttons widget, and a template grid, and then below all of these input widgets are two buttons (Continue and Cancel). The template grid has the paging buttons active on it, and has some custom CSS styling active on it to set it to a specific height, enable y-axis scrolling on autoflow, and move the paging buttons to the bottom of the template grid instead of the top.
Clicking to go anywhere but the first or last page works fine, however clicking the “last page” button, or clicking the “next page” button to go to the last page, will result in everything but the template grid, and the continue and cancel buttons disappearing, and the template grid’s height shrinks to an unusable level. In the opposite direction, clicking the “first page” button, or clicking the “previous page” button to go the the first page, will result in essentially the entire popup being wiped out, with all the input widgets and action buttons disappearing, and leaving just a white page.
After looking around, it seems it’s due to some custom CSS that I had taken from a Mendix community forum post that I used to move the paging buttons on the template grid to the bottom of the grid as opposed to the top that’s causing the issue. If it’s because of issues with the paging buttons trying to readjust, is there a way to edit this CSS code so that these issues do not happen? The CSS code I used is shown below, any critiques on it would be super appreciated. Thank you!
.mx-grid.mx-templategrid{
display: flex;
flex-direction:column;
}
.mx-grid-searchbar{
order: 1;
}
.mx-grid-controlbar{
order: 2;
}
.mx-grid-content{
order: 1;
}
i am trying to build a website..i am using a "sticky menu" concept which automatically minimizes its height after certain scroll..now the problem is when there is a jump within a page,the sticky menu covers half the content on jump!
for example..look at this website:
type in---"www.sitnlearnit.com" in your address bar...
in that website,when we navigate through "COURSES OFFERED" item and select any list item,we are supposed to jump to that location! it is happening..but the content is covered by sticky menu..
how to solve this???
Design the site so that the area where the sticky menu will be will never have content in it - wherever the menu moves in that space, there will never be content to cover up.
My site have a main div with width set to ~1200px and centered.
if I put g+1 button inside another div which is float:left and div with content on the right side everything works great. Sadly, I would like to put this button on the right side of my content. In this situation during loading this button ads horizontal scrollbar for one second.
I know about this: google +1 button adds scroll bar to my site
but it not work for me.
I'm googling about it, but every solution is similar to this I linked above.
[EDIT] IE & FF only
Only one solution I found is load g+1 button to hidden div, and show this div with some delay.
Social div contains three social-* divs for facebook, googleplus and twitter.
$('#social-fb').css("opacity", "0.0");
$('#social-gp').hide();
$('#social-tw').hide();
$('#social-fb').html('...');
$('#social-gp').html('...');
$('#social-tw').html('...');
timeoutID = setTimeout(function(){
$('#social').hide()
$('#social-fb').css("opacity", "1.0");
$('#social-gp').show();
$('#social-tw').show();
$('#social').fadeIn(500);
}, 2000);
I have been trying to set up a simple lightbox for my trip reports on my website. I finally got Lightbox JS to work on my site (I had issues getting Lightbox 2 to load up) but I also use AllWebMenus and when you select the first lightboxed image the menus shows up on top of the photo. Any idea how I can set it up that the menu does not show up on top of the image?
Here is a link to my test page.
Thanks
Just add z-index: 9999 to the div #lightbox