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.
Related
I'm looking for a way to fill the viewport with elements based on the viewport size.
Is there a way to use methods like createElement() and load() to do this?
Specifically, I'm trying to fill the viewport with small circle divs. The way I have it set up now, is to just manually code them all into the html and set overflow to hidden, so that the divs beyond the screen size aren't visible.
If this isn't possible, is there a way to tell the JS I'm running to animate only those divs which are visible?
I have a codepen with the divs set up here as a reference for what I'm talking about. At full screen size, you can see that there are divs missing from the bottom of the page.
How do I create a div which will act like a relatively positioned div (as in it cannot allow elements behind it) and still will also act like an absolutely positioned div (as in it can freely be positioned)? I am willing to use javascript and jQuery if needed.
Example: or a similar effect
I don't think you can do what you're asking for in the way you're asking for it. You should be able to fake it adequately though.
Say you wanted to "insert" a sidebar that pushes all the main content on a page over by 200 pixels (the width of the sidebar). You could increase the left margin of the page/container by 200px (animate it if you wanna be flashy) and then absolutely position your div where you want it (you could animate it sliding in from off screen if you want it to appear as if it is "pushing" the other content over). If I understood the question correctly, then this should accomplish the visual effect you're going for.
I think you mean Draggable elements, you can use jQuery User Interface:
http://jqueryui.com/demos/draggable/
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.
I am trying to do something similar to expose from jQuery toolkit.
http://flowplayer.org/tools/demos/toolbox/expose/index.html
Except I am trying to use an image as a background and have the overlay over it and reveal only a portion of the image as 100% visible (kind of like a reverse highlight).
My current solution is:
I make an overlay on a image background div and make the z-index of the visible section div higher than that of the overlay. But since the background of the visible section div is transparent the div just shows the overlay. The way the plugins I have seen get around this is by setting the background of the visible section div to a color allowing that whole div to set above the overlay since I am using a pretty big image, I don't have the option to use a colored background on the div. I also don't want to show a cloned copy of the original image because these background images are huge.
I couldn't find any documentation of how to do this online. I'd appreciate any feedback I could get.
My suggestion would be to absolutize the element, set it to a relatively high z-index, then sit your faded layer below that, but still higher than any other content. It would give the appearance of the effect you want.
Im trying to use this plugin:
http://www.jacksasylum.eu/ContentFlow/
2 points:
I want to know how can I get it into my div and stay inside the volume of the div? As it is right now, my div is 185px, but when I put the coverflow inside of the div, it breaks out of it and plays outside the div.
If I take the height off the div, it will stay inside the div, but... the div MUST remain at height of 185px. I dont really see any padding or margin elements inside the CoverFlow css, so im not sure what im supposed to edit.
I also have plans to put the coverflow into an even smaller div on another page, so I want to know how to scale it and fit into my set-height div properly without problems.
When I load the page into another div thats in another page, the coverflow will not load. So basically, the coverflow only loads in its own page. Ive put the links to the .js and css into the main file that loads the coverflow page, but its still not working.
Can anyone help me figure out these 2 important points?
What is happening there is that ContentFlow completely ignores the container's height; it seems to be using some kind of fixed aspect, with only width being taken into consideration, and the height being calculated from that.
Therefore, the simplest solution, in your case, given that you have a fixed height, is to reduce the width of the container, therefore making ContentFlow calculate an smaller height.