I have code working on all desktop brosers, but in mobile it has a bug.
The lines are hr elements and the square in the middle is a div. The div has position: relative and fixed width and height. I don't use z order.
On mobile all I can do for now is display the background of the div element with certain color, and I can see its indeed occupying the space. I also see in this case, where I use background color, that the hr appears behind it.
Additional information which could be useful: The div in the middle is part of an horizontal ul element, which contains list images with items and also text. Also called content slider ;)
When I initialize the slider with some image slides in it, on mobile, the layout is always displayed correctly. Also when I'm viewing only content slides. But when I put only content slides from the beginning, this error appears.
I don't know what it is... tried getting this behaviour with desktop browser, to find the cause, but didn't success. I don't know why the hr goes there. There's no relation with the content in the slide. The position where the hr appears is somewhere in the middle, between the text...
Thanks in advance.
Without seeing any of your code, a "best guess" based on past experience is:
It looks like you might have floated content inside of your slider, and the slider itself is not "cleared".
If you have any floated content inside of the slider, make sure the outer slider div is cleared.
Related
I am building a Google Chrome extension and one of the features it does is generate a full page length screenshot by snapping a screenshot image of the viewport then scrolling down the page and repeating the process until it has an image of the whole page length and stitches them together as 1 image using HTML5 Canvas.
Page elements that are position: fixed get changed to position: absolute so that it doesn't show the fixed element in each viewport image in the final image repeated over and over!
Now I have a page for example that gives a new challenge.
https://docs.hhvm.com/hhvm/installation/linux#ubuntu-15.10-wily-werewolf
Based on the image below...
1) the top header bar is fixed so it changes to position: absolute
2) the main page right scrollbar scrolls the main right content panel down the page.
3) the left sidebar has a separate scrollbar for it's DIV.
When my extension makes a screenshot on this page, it ends up repeating the left sidebar contents over and over all the way down the page since the right scrollbar goes much furthor down the page.
I think the solution is to somehow detect and make the left sidebar in these cases be positioned so that it does not have a scrollbar and instead will show all the left sidebar content as the right content DIV is scrolled down.
I am just not sure about how to do that left sidebar part at the moment, any suggestions? I would need to detect this situation on other pages automatically as well!
CSS overflow is what you are looking for, I guess.
Try setting overflow: visible to that sidebar. Now the "auto" value is likely to stand there.
What about detecting... You can check the scrollHeight of the element and get its height, for instance sidebar.scrollHeight > sidebar.offsetHeight. If it's true, it means it is scrollable.
I have created a header image of about half a page. When user scroll down the images goes down with scrolling as well. I want the image to go up and hide and does not effect the content beneath it. I have checked many single page websites websites where images are on some place and when scrolling they goes up and down with scrolling and does not effect the other things.
I tried to use position:fixed but it didn't work, position:relative is also effecting the content beneath it.
Example of what i want : http://www.piedpiper.com/
Kindly tell me how to do this.
Set position:fixed for parent element of image.
I am trying to use the following gallery/carousel http://coolcarousels.frebsite.nl/c/2/ to implement onto a site.
What I am trying to do is add a text area identifying who created the image next to it, i.e. having the image in a div floated to the left and the content floated to the right.
I create the div and set it all out in css and looks all ok but for some reason the carousel does not work, its like there is a problem with adding HTML tags.
Has anyone used this carousel and had a div rotating with an image and text in it if so please help me.
Cheers Andy.
I'm new to the wold of javascript/jquery, but had this fantastic idea for an effect for my webpage. Let me explain the layout abit.
My website is contained within a wrapper div, which assures that my content remains at 1000px and centered on the screen regardless of the width of monitor (assuming the monitor is bigger than 1000px). This content contains a header image that is presently used to display a colourful image (1000x400px) displaying the title of the website/company/etc. So this image is the width of the content container.
I thought it would be cool to instead of having the name of the company set on the image, have it scroll left to right, right to left on the image. This can be done with jquery and the animate() function (or a function close to it). The problem is that once the website title has scrolled to one extreme of the webpage, it will overflow out of the 1000x400px image and outside of the content container - thus into the wrapper region, which is simply a grey background.
My problem is that I can't conceptualize a way to hide the scrolling text (which would be represented by a very high z-index) behind the background wrapper (which is a simple background, so the lowest index possible). I only want the section of the scrolling text that is over the 1000px-wide content container to be visible. Anyone would know how to hide what is over the wrapper background? I thought of maybe recreating the wrapper background with some divs delimited by the presence of the content container; this div would have the highest z-index possible so it would hide anything that it superimposes. Is there a better/easier way to implement this?
Let me know if I'm not making sense :)
Pat
Maybe I'm missing something here, but;
If the scrolling text is a child of the wrapper div, then all that needs to be done is to apply the style overflow:hidden; to the wrapper div.
Basically what I have is a page with a background image and when I have content which is quite long and overflows. I want the text to be inside that image and it appears to fade out when scrolling at the end of the image and the top of the image. I do not want internal scrollbars. The background image itself is fixed and centered and I want the text to always remain inside there.
Is this possible? if this is not clear then I will try and explain myself further.
I have looked at options in Jquery and CSS fading but cannot find exactly what i want.
Any help is appreciated!
Thanks
H
I would suggest you plant an image overlay (white to transparent) at the top and bottom of the div, but that might not work because of your background...could we perhaps see the background you are using?
The two images Nexxeus says should be placed in a fixed position at the top and bottom of the browser. You shouldn't touch what the overflow does, since it will be hidden below the two images.