I would like to ask about, I have made some animation in my website named bubbles. Basically what it does is just to rotate and float some boxes within a given space in the defined content. But i have a problem which is the animated content overlaps with the main content i wanted to display. For example I have <form> inputs but whenever the animation floats to the input boxes, the boxes is unclickable. I would like to send those animation to the background so that it wont obstruct my main UI. How should i do that?
Here is the JSFiddle site to the sample code. You can try clicking on the input forms when the squares float on it.
Thank you
Try adding the css-class:
pointer-events:none;
To all of your animated items, that should do the trick.
Set z-index of .bg-bubbles to -1. Cheers
Related
RighteousAlliance.com - two buttons on the right with mouseover effects. (i'll fix their actual position later)
If you adjust the browser width by dragging it you notice how they stay in the same position relative to the background? That's what I want.
But there's something invisible outside the images that are overlapping and ruining the mouseover effect. If you hover vertically over "shop" you notice how it only lights up ABOVE the top part of "Learn" to the right?
What is blocking that?? There's something invisible outside the div. I've tried for 3 days to figure this out.
I can fix that problem by adding "display: inline-block" and something else. BUT THEN IT BREAKS THE ALIGNMENT WITH THE BACKGROUND when you adjust the browser size horizontally. How do I get BOTH to work? Please help. I did it a long time ago but can't figure it out.
Here's a screenshot of the code: https://righteousalliance.com/Images/code.png
I'm having trouble with my code with my CSS stylesheet and HTML index coding. I only have one problem and that is my CSS stylesheet isn't letting me place a div class into it. I'm using the free Brackets software which includes syntax highlighting and it's coming up red which is an error. Here is a picture of it:
http://i58.tinypic.com/ju97cl.png
As you can see in that picture, I've boxed around the place where it's disallowing me to place the div class into the stylsheet in white. I've given a working example with the blue box so I'm confused to why it's doing this.
My main question for you today is how do I create buttons directly in the center on the side of my page with CSS or however possible and how to edit these buttons like adding hover animations, visual looks etc? (I'm new to this by the way) Also, I want to lock the scrolling of my page in a certain area like in the picture described:
http://i62.tinypic.com/wmbyw.png
Lastly, I wish to ask how to make my content on the white area transition by sliding to the side for when I click a button to go onto the next page. However possible I would really appreciate if somebody gives me the time for this. Sadly I can't give another image because I don't have 10 reputation. so I hope you can make out what I'm trying to say.
I will be so grateful to anyone who helps me with this.
First off you need to close your .right-menu class with a }.
For effects and animations check out w3schools:
http://www.w3schools.com/css/css3_transitions.asp - transistion property
http://www.w3schools.com/css/css3_animations.asp - animations
Centering in CSS can be done with text-align: center or margin-left:auto; margin-right: auto.
To prevent scrolling of the body do body {overflow:hidden}
For sliding page content refer to my links above or checkout jQuery
http://www.w3schools.com/jquery/jquery_slide.asp
I'm working on a website and was looking for a function that lets me hover a div to scroll right inside another div, like this example:
See: http://jsfiddle.net/s17L50pv/1/
Imagine that the arrow > to the right is the div you hover and the content in #slider moves right, showing more books!
You need to use setInterval() and some events (mouseover and mouseout) to get this effect
See if that's what You are talking about - http://jsfiddle.net/s17L50pv/5/
I suggest you use a javascript carousel slider for this, there are tons of free scripts around, e.g:
http://kenwheeler.github.io/slick/
I found a neat CSS Slider by AMKohn:
http://codepen.io/AMKohn/pen/EKJHf
The slider works by using radio buttons and labels to move between 'slides'.
Slides are hidden by default and are displayed when their respective radio buttons are checked.
I've modified the slider so that each photo is accompanied by a caption below it that extends the width of the browser.
http://codepen.io/anon/pen/AlsJx/
As a result, my mark-up and CSS are a little different from the original, but the principals are still the same (still uses labels and radio buttons to move between slides).
I think this is affecting the labels (which act as nav buttons). These do not display on hover when using
position:absolute;
However, when the position is set to relative the buttons work fine except they are not in the right place (on either side of the photos).
Can someone explain how to fix this?
Solved the issue.
Essentially, the problem was due to using position:absolute on the parent element .slides.
I made it display:hidden by default and display:block when input:checked.
This prevented the divs from "stacking", which I concluded (in a very non-technical way) was the reason why the nav buttons didn't work.
The working slider is here:
http://codepen.io/anon/pen/hAnre/
I am currently creating a one page website, however I am having an issue, I need the scroll text underneath the fixed element however you can see the text that should be dissapearing under the fixed position element, as the element as a back-ground, which is a transparent png, is there any way I can hide text as it scrolls underneath the fixed position element.
Here is a fiddle of what I have, so far
JS FIDDLE
Ideally I am wanting it so that when text moves behind the box with red borders it is not visisble, without the need for a background color.
I have visited your website and stolen some images to better understand what you are trying to accomplish.. Assuming i'm correct in the assumption you do not want a solid background on the header because it would mess with your pages background....
you can use multiple backgrounds...
see your demo
You will need something in #banner that will hide the text. From the css it looks like there is supposed to be a background image in that block, but it is not showing up.
The header is transparent as set in your css reset, so a color or image will be necessary if you want the text to be hidden. Otherwise, it's like moving the text behind a piece of glass...you will still see the text unless you have something to actually cover it.
I suspect if there was a working background image on the header, it would block the text where it wasn't transparent. When I add a background-color it achieves that effect.