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/
Related
I've actually got the tooltip showing where I want it to show, that part is working. The text it's displaying is contained in a <span> that's hidden until they hover over a div that has the tooltip class on it, similar to the example on w3schools.com.
I have a column of div's and only certain ones get the tooltip class. The problem I'm having is that the span is successfully hidden in the div's that don't have the tooltip class, but it's still reserving the space for it and I'm having trouble figuring out how to get it to not do that.
I'm hiding the <span> with CSS's visibilty:hidden which hides the text but the space for it is still reserved. If I change it to display:none instead of visibility:hidden it hides the text and does not reserve the space for it, which makes sense and that is almost what I want except I can't make it visible again without posting back.
So now I'm debating putting the whole thing inside of an ajax call so I don't have to refresh the whole page, but I'm not sure that would work either.
Is this even possible, or does anyone have any suggestions?
I appreciate any help anyone can offer.
Thanks
You can try span{position:absolute}
Use js instead of css.
If you use css then it'll also create problems on responsive.
You can use bootstrap tooltip or simple jQuery
https://jqueryui.com/tooltip/
what you can do is, give that div an id, and through css hover, set the tooltip's display to block,
or you can use, javascript for this, regidter those divs with a on hover, function , check the target of the hovered element, if it matches with that one, set tooltip's div display property to block,,simple
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
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 have a chat box that is resizable. It has
resize:both;overflow:auto
in the CSS. So at the bottom right of the div, there is a little arrow thing that you can click on and resize the div.
Is there another way to style this? I'd much rather be able to put the mouse on any corner of the div and resize it, or at least have that arrow be on the top right or top left of the div. I'd also like to be able to change what the arrow looks like, to make it more obvious what it does.
Also, is it possible to have the cursor change when the mouse is over the arrow?
Short answer: this is not possible.
However using javascript and CSS a custom solution can be made. You can place a little div in a corner using absolute positioning. Then have javascript resize the textbox on dragging the little div.
I am using this:
http://www.useful-dates.com/search/
What script do I need to use so that the scrolled underneath scrolled div stays hidden and then appears when you click it and disappears when you click outside of the appears div?
Like this, but i have had no luck duplicating:
http://rob-bell.net/static/ddlist.html
Iv searched and tried all kinds of things on the net and no luck, please help.
Something has to be there in the background to catch the click. Looks like they used display: block with a fixed height/width in the working example, so that a click outside the drop-down would hit the "body" element, to which the event is attached.