I have a div with a text scrolled up and down with 2 simple buttons & JS.
I wish to totally disable the scroll bars so they will never appear on the screen, even if the crosser is above them.
How do i approach this problem?
Thank Shani
Add overflow: hidden to the css rule for that div.
Related
I am writing a code which when a user clicks on premium plan button translateX(-300px) is set for a DIV which has property "overflow-x: scroll;" and the premium column is showing. but the problem is when user drag over the page to the right and left content should be visible, the remaining 300px view of DIV does not appear and show. I mean on mouse horizontal scroll, translateX(-300px) property limits us from scrolling to the left. should I call a function on mouse scrolling to override this property? excuse me because of bad English and Thank you for your response in advance.
Instead of using translateX, you should look into element.scrollLeft if you want to scroll a div.
MDN: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft
I am trying to implement a vertical ticker feed of 20 news say. Here I want to have this with below points :
1.) The ticker should display first 5 news at a time. When a user scroll down in the ticket box, he/she can view the others news down to 20th one.
2.) when a user hovers on any news div section, it should display a box in the left side of the news text. Just like as in the case of Facebook ticker. Here what's important is, The box should be displayed well relative to the position of the news div section. If the current position of the news div section is at the bottom of the page then the hover box should be appear at the bottom only. Similarly if the news div position is at the middle of the page, then it should display the hover box at the middle. In a nutshell the hover box should be dynamically adjust its position based on the position of the new div section.
I am facing challenges while developing this so decided to take help from you guys. The main challenge is, while trying to make the ticker box scrollable of fixed height to contain only 5 elements, it is hiding the hover box as well.
The easiest way to achieve the moving context div would be to render it for every item and show it when the user hovers over the ticker item.
Each item would look like <div class="a">NEWS 1 <div class="a1">TO THE LEFT (news)</div></div>
Then you simply set .a1 to display:none on load and add
.a:hover .a1 {
display:block;
}
in your css.
To solve your overflow problem when setting overflow-y to scroll, you can set a margin-left to your list which will expand the overflow-x bounds (and allow your hover over content to display)
Example here
to get what you're really wanting, you're gonna have to use javascript. You'll need to listen to the onmouseover event for all your ticker items and set the Y position of the content div to match. example here: codepen you'll need to sort updating the content of the div and correct left/right position based on where you want it to show
I have a JQuery dialog on an page which opens to depending upon the size of the window. Unfortunately, I have been able to achieve in the containing div that is shown by the dialog a horizontal scrollbar when the minWidth of the containing div is reached in order that a user can scroll to the rest of the content. My relevant code snippet is as follows:
$('#containingDiv').dialog({modal:true,
autoOpen:false,
height:heightOfWindow,
width:widthOfWindow,
resizable:true});
$('#containingDiv').dialog('open');
/*css Code for containing Div element*/
#containingDiv{
min-height:900px;
min-width:900px;
overflow-x:auto;
overflow-y:hidden;
}
So, how can I achieve a position where if the dialog goes beyond the min-width of the containing div that the dialog window can then scroll to the content of the div?
Can anyone help me, please?
Solved by creating another inner div with min-width and the outer div with width along with overflow-x. This will provide the scrollbar to the dialog.
I have the following scenario on JSFiddle: http://jsfiddle.net/psax3fge/
D FIDDLE: http://jsfiddle.net/psax3fge/1/
Basically its a div that has some info in it. The info is 3 separate divs that are inline block, they will be next to each other if there is enough room but will stack underneath each other when the Windows is made smaller
I want this div to be hidden until a button is clicked where the div slides down. I know not setting the height property will make the div have a fluid height (height gets bigger as things stack underneath each other). However, when I animate it with jQuery, I have to set a height.
Is there a way to do this without losing the fluidity of the div? An alternative is to not animate the div and just make it visible/hidden on button click, but I'd really like to use the animation
Update 4: http://jsfiddle.net/psax3fge/4/
Leave the .container div height to auto and remove the overflow from it.
Now you can use the slideToggle function of the jQuery to show and hide the .container.
P.S you can set display:none to container in initialization.
I have a jquery code that works like so... When you hover over a block, a new div slides up and a red block div fades out, then when you leave the hover area the div then slides back down and the red block div fades back in. Everything works fine, here is the jsFiddle:
http://jsfiddle.net/Gsghr/119/
The only problem is when the new div slides up that says "the first item needs to toggle up", the div should stay in its place if your mouse hovers over that div. Instead, as soon as your mouse leaves the div area for the "item 1" grey block div, the other div (that says "the first item needs to toggle up") will disappear.
I tried changing the hover area for the divs via CSS like so, but it did not work...
#coltab li:hover + #coltab ul li, #coltab ul li:hover {
display: block;
}
Maybe I was doing that wrong. But again, it should work so when you hover over the div that says "the first item needs to toggle up". that div should stay in its place and not slide back down. Again, here is the jsfiddle, http://jsfiddle.net/Gsghr/119/ and any help would be appreciated. :)
Also if you hover over the divs multiple times in a row there is jumping and the whole function of the hover might even mess up, if anyone could fix that or has an explanation for it that would be awesome.
Change the z-order of the div you want to stay up so that it's higher than the red div. If that's not visually desirable then try using an invisible div with a higher z-order that matches the same size of the div you want to stay up.
The jumping is just coming from how many times the hover is called. I don't know the exact answer to this question but I imagine you can use "undelegate" to keep the events from stacking.
I am also a recent Jquery enthusiast, but I suggest using mouseenter and mouseleave methods.
The mouseleave method will not let the event get down to the child level, and hope that should do the trick.
Check the example demo here: http://api.jquery.com/mouseover/
Tc, Amit