I am creating a website using a free template Click here to go on the website
When you scroll up after scroll down you will notice a red standing arrow at the bottom right corner this is an image of the red arrow on which if you hit it will scroll the page to top #Home.
Now the problem is on my laptop it looks ok but when I do inspect to see mobile view then I can notice a white space created by this feature.
this is the image :
Click here to see image
I already tried using :
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
and notice that only overflow-x: hidden remove white space but also affect then arrow scroll functionality and also still little bit space persist towards right size with a bottom scrollbar.
I tried to remove the entire scroll code also but still unable to remove this white space which is occurring only in mobile view.
I gave a link to the entire website instead of mentioning here as I don't know which code is causing a problem and can't provide a code of entire website at here.
Please see the link and over there you will find the entire website with this scrolling feature on each page. Thanks
The image used as the background of your #toTop element is 32px wide, so change the width:
#toTop {
width: 32px;
}
If you need to push it away from the right hand side, use a margin-right.
Related
When I shrink the width of my browser window (Firefox v26) so that only 1/2 of my home page is shown, the horizontal scrollbar appears on the bottom of the browser, which is fine.
But if I scroll the page to see its right half -- that right half is blank. In other words, after horizontally scrolling to the right (which moves the page's content leftward, obviously) -- the right side of the page does not redraw. It stays blank. Even if I hit the refresh on the browser URL bar.
I looked around and saw several posts. This one seemed to be exactly the same problem (only difference was, theirs involved the vertical scrollbar).
So I took the suggestion there -- which was to set my outermost content div (called wholePageDiv in the code below) and also my outerDiv to 'min-width: 100%" but this changed nothing.
Here's the very simple code:
<html>
<body>
<div id="wholePageDiv" class="wholePageDivForCentering">
<div id="outerDiv" style="margin: 0; margin-top: 10px; min-width: 100%;
display: inline-block; overflow: hidden">
(not shown: a bunch of divs with text)
</div>
</div>
</body>
<html>
Here is the wholePageDivForCentering CSS class, with the change made per that SO post I read:
.wholePageDivForCentering
{
/* width: 100%; */
min-width: 100%;
/* height: 100%; */
min-height: 100%;
white-space: nowrap;
margin: 0 auto;
}
I have looked at other websites to see if they exhibit the same "right side of scrolled page does not redraw" problem. On other websites I tested, I shrink the browser to 1/2 the width needed to show the whole page, then I scroll to see the right 1/2 of the page -- all other websites I check are successfully redrawing the right-side content as I scroll.
Do I have a CSS style problem above?
EDIT: I hit F12 in my browser and use the 'Inspector' tool and I clearly see that the only visible content is within the wholePageDiv and this div is not expanding at all, to the right, as I scroll to the right -- the Inspector shows that for whatever reason my outermost wholePageDiv is remaining the same fixed size as the viewport, and when I scroll to the right, this viewport outline as shown by the Inspector simply shifts leftward and does not expand on the right side to accommodate moving the scrollbar to the right.
I have added your html and css in a fiddle and it scrolls fine for me. The text of the div is displayed with no issues: http://jsfiddle.net/micahSan/UucLB/3/
same code as the OP
Can you replicate your problem in a fiddle so we can all see it?
I solved this (for now) by either hard-coding the div's width, or by programmatically increasing the div's width as the width of the browser window/document was changed. Hopefully will find a less kludgy solution later.
I'm building a site with the navigation bar stretching across the entire site and it's fixed.
Under the navigation bar there is an image, a background image, which is set as a cover. And under the image is the main content.
When you scroll down, the navigation bar covers the image from top to bottom and the main content is now visible, effectively scrolling in a downwards fashion. I would like to "reverse" it. So the navigation is still fixed with the cover image under it but this time, when you scroll down the main content comes up and covers the image from bottom to top. So when you scroll down, the main content scrolls up.
Let's say my image has a 1 at the top and a 2 at the bottom. So, normally when you scroll down the navigation bar covers the image from top to bottom the 1 will disappear and the 2 will be visible until that is also covered. The effect I'm looking for would make the 2 disappear and the 1 would remain in the same place until it is covered by the main content.
I looked into parallax but I'm not sure if that's the right thing to go with. And I have no idea how to do achieve this effect.
Hopefully you'll understand what I'm trying to do here. If you need any more info then just let me know.
Thanks in advance.
EDIT
The effect can be seen on the abduzeedo frontpage
You need the image to be "attached" to the background ?
If so, cannot you just fix it to the background ?
body {
background-attachment:fixed;
}
Source: http://www.w3schools.com/cssref/pr_background-attachment.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment
Note: Be careful using W3Schools, their information is often incorrect, see here.
Here's an example with an img element.
Demo
code view
The basic HTML layout:
<nav></nav>
<img src="/image.ext" class="scrollup" />
<div class="main"></div>
Your nav will be positioned fixed, as you said. The image also needs fixed positioning. We set its z-index to -1 to make sure it's covered up.
img {
position: fixed;
width: 100%;
z-index: -1;
top: 20px; left: 0;
}
The main element is positioned relatively. Because our nav and image both have fixed positioning, the top value is relative to the top of the viewport. 100% means that .main starts as soon as we start scrolling.
.main {
background: white;
position: relative;
top: 100%;
}
I have been to the end of the internet and back trying to solve this. Here is the page withe the spry menu. You will notice some inline styling to get it to fit the design of 980px wide.
The HTML
Here is the spry CSS.
[CSS][2]
I set this in firebug:
ul.MenuBarHorizontal {
width: 1200px;
}
Which shows the navigation menu is wider than 980, which is why it is wrapping around. You need to strip off five or ten pixels from the padding or margins of your menu items.
ul.MenuBarHorizontal a {
padding: 9px 20px;
}
Seems to work well. And actually, you can take that second padding value up to 26px without it wrapping around.
I'm currently trying to find a workaround to having arrows on Niall Doherty's Coda Slider 2 to highlight the selected tab. Initially I tried doing this with images on the header image, although whilst it looked fine in Safari on my Mac, it wasn't central on other devices (see www.lukekendalldesign.co.uk/pss/productsandservices)
I tried creating this using CSS arrows but that proved rather difficult, so I've found a workaround using a background image, but I've come across yet another problem.
http://cl.ly/HovO (Sorry, I can't upload images - newbie!)
Please refer to the above linked screenshot. The lighter grey triangle that matches the background is part of the header image. The black triangle is positioned using the following CSS code:
.coda-nav ul li a.current {
border-top-right-radius: 10px;
border-top-left-radius: 10px;
color: white;
height: 60px;
z-index: 20000;
background: url(../images/triangle.png) no-repeat 50% 100%;
position: relative;
overflow: visible;
}
What I'm trying to do, is position this black arrow where the grey image arrow is (if that makes sense at all?) How can I do this?
I have tried adding margins and padding, however it extends the grey background and doesn't push the background image black triangle down.
Whilst I have found solutions similar, none seem to apply because the class .current is applied using the following JS:
// If we need a tabbed nav
$('#coda-nav-' + sliderCount + ' a').each(function(z) {
// What happens when a nav link is clicked
$(this).bind("click", function() {
navClicks++;
$(this).addClass('current').parents('ul').find('a').not($(this)).removeClass('current');
offset = - (panelWidth*z);
alterPanelHeight(z);
currentPanel = z + 1;
$('.panel-container', slider).animate({ marginLeft: offset }, settings.slideEaseDuration, settings.slideEaseFunction);
if (!settings.crossLinking) { return false }; // Don't change the URL hash unless cross-linking is specified
});
});
I would very much appreciate any help anyone can offer me on this - as it's a JS issue it's something that's a bit out of my depth! :(
I have tried this in Firefox using fire bug on windows. I think there are 2 problems. The first is that the margin on the ul element should be 167px (the black arrow is not in a nice place in the image (middle is at 232 px did you mean this?).
The the arrow just needs moving down which I did by setting the back ground position to be:
url("../images/triangle.png") no-repeat scroll 50px 60px transparent hope this helps.
I have some content I want to show in iframe with fancybox. When I use it, it pops up with horizontal and vertical scroll bars even though all the content is inside of it. Inspecting it in Firefox shows that when I click on html everything is inside but there is a little left over that is outside of the highlighted box. The next level up is iframe.fancybox-iframe which includes the scroll bars. I looked at the css and that has padding and margins set to zero so I don't know why the scroll bars are there. Right now as far as options I just have autoSize:false. All I have inside the body of the page I want to show is a form.
If anyone wonders which class name to use
.fancybox-inner {
overflow: hidden !important;
}
And if you found a small white background you can reset it using
.fancybox-skin {
background: inherit;
}
Try adding this to the css:
.style{
overflow: hidden;
}
If it didn't help, please post your HTML and CSS.