I have a menubar(div) which houses bookmarks and when too many bookmarks are inserted this menu bar(div) becomes too wide for the preferred page size(1280, 720) and becomes scrollabe, leaving half of the bookmarks out of view.
I want to ensure that all the bookmarks are in view and the best option seems to be that I have to make the extra bookmarks appear on the next line. can someone guide me in the right direction or better yet provide a working sample. Im just learning to use jquery and am finding this very difficult.
Example code in jsfiddle
You have this in there on the ul element.
white-space: nowrap;
Which means that that element's contents will never wrap to another line, so it extends out past the edge of the window instead. Remove that rule, and you have something closer to what you want. That is, when you content overflow one line, you want it to wrap to the next line.
http://jsfiddle.net/y9a64/9/
http://jsfiddle.net/bH8yA/
Are you looking for a solution like that? If so, it's straight CSS.
You can achieve that by using css overflow-x: auto; please see example http://jsfiddle.net/Xa8yB/6/
Related
I have been wondering for quite a while now how can you achieve this: https://www.apple.com/mac-pro/
As I put it in my own terms, removing the scrollbar or hiding it. I know you can easily put overflow:hidden but that wouldn't really solve the problem, as in Chrome for example it will not let you scroll with the mouse-wheel (pretty annoying).
I've been looking for quite a while now how to achieve something similar to that, which by the way I have no idea how to call it (again I search it as hiding the scrollbar, removing scrollbar) but no success yet.
If anyone can point me to the right direction, that would be really awesome!
I think that the page does not fill more than the window , so that is why there is no scroll bar. When you do scroll up or down , there are most likely event listeners that are just altering the content.
body { overflow:hidden } would work in some browsers , but not all - So , to avoid having a scroll bar, just don't have the content get larger than the window.
It seems like a slightly altered take on Parallax Scrolling.
If you google for it, you can find a million and one different ways of doing it, tutorials, examples, templates, etc.
Change overview.css on line no 10
position: fixed;
Remove following from overview.css on line 415 and 8
overflow: hidden;
Just add the code below to your css file.
::-webkit-scrollbar {
display: none;
}
Caution !
This will disable all the scrollbar so be sure to put it in a specific class or id if you just want one to be hidden.
I have a wordpress theme that i'm building but i've hit a snag with some code and can't seem to get my div to expand correctly. I've tried clearing the floats at different positions, i've tried overflow: hidden, but nothing seems to work.
What i'm trying to do is have the content slide in from either side based on what header you click. The content is based on a wordpress post for each link. So the client can easilly edit it to any size.
Because of this it isn't viable to use pixels in the sizing of it. And i know that absolute positioning means that pixels are very nearly the only option.
I've messed with everything i can think of in firebug and just cannot get it to expand.
You'll find the site here: http://tinyurl.com/okd5wnf
However i couldn't get this to work either. Maybe that'll give you a clue as to what might be wrong.
I know it's a long winded post, and i apologise. If i have time later, i should be able to make a jsfiddle. However time is short at the moment.
Any help would be appreciated. Thank you very much.
Your problems stems from setting the <div class="box"></div>'s position property to absolute. Give the parent element(<div id="body-wrapper"></div>) overflow-x:hidden; to hide children that are not being displayed, and then use negative margins to position child elements within the viewport (the parent element). This is basically how most sliders work.
Remove position absolute from box class. please also mention what desired layout you need for content. we will suggest you classes for that.
Romove position:absolute from div.box
I guess that's all.
We are making this template in our language, Persian, that is right-to-left (RTL). Template address
Now, all parts are RTL, except that the submenu that opens to the right side,
Question: What changes should be made to this css file of the template, so that submenu width will be the same as its menu width? Or: How can the submenu be made to open on the left side?
Be aware that am not talking about the text in the submenu (text is rtl now as you see in picture)
Just a thought off the top of my head ...
I suspect you would adjust this line:
width: 140px; /*width of sub menus*/
to reflect a narrower width for your needs.
If you need to do this dynamically, you may have to do some work with Javascript to check the text being applied, then adjust the class reference to a custom class reference ... OR ... apply the new width to the element directly ... once the drop down entries have been filled.
Ah, ok, I see now. The problem here is that with the particular component you are using, you cannot adjust it with only CSS. The reason why is that the Javascript completely rewrites your CSS for that portion of the menu every time a user hovers their mouse over it. You're going to have to do some adjustment inside the Javascript to solve this.
There are several ways to go about this, I'm only going to get into one of them.
One way to solve this is adjust how the menu is rewriting it's CSS on the fly for the submenu. In this case, you can have the Javascript write a negative value in for the "left:" CSS element attribute to have the submenu position itself to open as you're wanting. Note: With this solution, this may not work in older Internet Explorer browsers - I'm not sure if that's a concern here. However, it will work just fine in the modern browsers (at least the ones I've been poking about with).
Open up your copy of the ddsmoothmenu.js file, that's the little bugger that is causing all the problems here.
The change needs to be done in the
$curobj.hover(function(e){..})
function. Stay with me, I'll explain...
That function is calculating the starting left position of your submenu once the user positions their mouse over the main menu choice. Namely, this line here is the culprit:
var menuleft=header.istopheader && setting.orientation!='v'? 0 : header._dimensions.w
As you can see, it is returning a '0' for you, which means it will anchor the left side of the submenu, forcing it to spill out to the right like it does now.
However, fear not!
Since you need the submenu to anchor on the right side and spill out to the left instead, we simply need to change this from assuming '0' to a formula with a little intelligence behind it.
What we need, is for the Javascript to find the correct position to anchor the submenu on the right. We do this by helping the routing understand what the "right side" of the "header" element is.
To find this, we simply take the width of the header, remove from that the left offset of the a-href tag that actually contains the header text (this is in case of any margins that exist - which this has some set in the CSS) and then remove the actual width of the submenu UL tag itself. Now as a sidenote, I wish I didn't have to use something so imprecise as assuming the header is the first child, but... eh... sometimes you work with what you got.
So comment out the line I mentioned above, and put this line in instead:
var menuleft=((header._dimensions.w-header.childNodes[0].offsetLeft)-header._dimensions.subulw);
And from what I see, it should open out towards the left as you were needing it to do in the first place.
Hope this answer helps more than my previous one.
Take a look at the this link. Scroll down a bit and you should see a Facebook comments plugin with an embedded Google map right beneath it.
My problem is, there is a ton of white space between the bottom of the comments plugin and the top of the map. Firebug indicates the white space is at the bottom of the comments plugin (as opposed to the top of the map). However, I can't seem to find a way to eliminate it.
I've tried just using relative CSS positioning to move the map up 50 pixels, but then it sits on top of the comments if there happen to be any. Also, if the user has turned FB comments off, it screws the layout as well.
Any ideas on how to get rid of the excessive white space?
UPDATE: While the answers provided here pointed me in the right direction, it ended up being too much trouble. I simply put the Facebook comments beneath the Google map at the bottom of the page which masks the problem somewhat. Apparently this is a bug according to one of the commenters below, so we'll just have to wait for a fix.
EDIT: Been toying with these styles for a while, no luck. I can alter the height of the box initially based on Jason's suggestions, but anything I do screws up the layout (new comments appear BEHIND the map since the comment area stays the same height as its original height, instead of allowing Facebook to dynamically grow the height of its IFRAME element when a comment is added). Any other ideas?
EDIT #2: It seems that the root of the problem is that Facebook automatically assigns a height of 200px to the IFRAME containing the comments box. When comments are added, Facebook dynamically resizes thie IFRAME to the appropriate height. I'd be able to solve my problem if I could find a way to make that default 200px start at 145px. Not sure if this is possible or why Facebook would think that 200 (arbitrary?) was a good height to start at.
EDIT #3: I realize the white space is coming from the IFRAME that Facebook generates and that there's nothing I can do about that, specifically. I started a bounty on this question because:
1) I find it hard to believe that I'm the only person that has an issue with the way this displays.
2) It's possible it's due to the way I configured something?
3) There's some other workaround I'm not thinking of.
Hopefully the bounty will encourage some creative replies!
Don't set the height to auto, set the overflow...
Set height:110px and overflow:auto on the Facebook iframe - then comments will expand the height of the iframe dynamically.
Pop these changes in your $().ready function - this works fine for me.
I had this problem on Mobile browsers. Facebook added this auto detect for mobile devices. It loads a different version of the plug-in that is full of bugs. Just set the mobile flag to false to force it to use the regular version that does not have bugs. This saved me. I hope it helps you.
There are several contributing factors:
.fbFeedbackContent has min-height: 165px
the loaded iframe has height: 200px
there is an empty span tag within the fb:comment tag
Addressing any or all of these should get you started. You may need to use !important to override some of the CSS.
I was suffering from the same problem. The extra white space only shows up when there are no comments yet. So you just simply do the following:
1.) Swap back to the old markup, because step 2) is not supported by HTML5
2.) Make a new div #commentcount, in which you will load the count of comments. You can hide it with display:none;.
3.) Insert the following code to #commentcount: <fb:comments-count href=http://example.com/></fb:comments-count>, where example.com is the exact URL of where you're commenting. In most cases this will be $_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"] (PHP), or the appropriate HTTP header variables in other languages.
4.) Store the comment count in a variable in JavaScript. You can reach the count easily, It's inside the #commentcount div in a span element. If you're not sure about this, check chrome dev tools or firebug, it will show you the rendered structure. (as facebook may change it eventually)
5.) Write a nice javascript code to update the facebook comment container div if(commentcount==0). Add a style of: height:110px; overflow:hidden;.
6.) Load the comment count frequently so if someone comments, you can drop the hidden overflow and fixed height, and they can see the new comment. You can do this using setInterval().
It works!
An easier alternative solution: You can set the style="background-color:#f5f5f5;" for the comments box if you have for example a site with F5F5F5 background color. The comments box colour will blend into your site. It looks nice.
Turn off mobile parameter.
For exemple:
<div class="fb-comments" data-href="http://example.com" data-width="470" data-num-posts="10" mobile="false"></div>
i solved it by setting the height on the . im using the facebook plugin in wordpress. you can find that file under /wp-content/plugins/facebook/social-plugins/comments.php in line 75 or set it to css
#respond{
height: 112px;
}
I am using FbComments plugin for Wordpress and there you can set the customisation options. This solved the problem for me.
Where it asks Comment box style AND Whole comment box style enter the height you want. It should be 72px. So you enter height:72px; in the space provided. Don't forget the ;
I'm a GWT refugee, trying to figure out how to do various Ajax-ish things in Wicket.
I have two divs. I'd like to make the first div's max-height dependent on the height of the second div, with a "more/less" link so that the user can expand the first div.
Example:
The content of both divs is variable, and since div2 has wrapped text in a proportional font, I can't really predict its height until rendered in the browser.
In GWT I accomplished this by adding content to the div1 a line at a time, and if it exceeded the height of div2 (which already had its content rendered), I simply removed the line. Since GWT runs on the client, this is fairly straightforward.
What's the best way to do this in Wicket? I'm expecting to need a little Javascript, but if there is a component that already does this (or makes it easier) I'd be very happy to use it.
With help of pure Wicket I do not think, that there's a way to do this. But maybe the Wicket + JQuery approach will help you achieve your idea...
There seems to be a rather simple JavaScript-solution (except that it doesn't solve the showing-half-a-line-problem but I think that can be solved by toying around with this:
document.getElementById("div1").style.height = document.getElementById("div2").offsetHeight;
Can't this be solved almost completely by CSS? Like adding both DIVs to a third DIV with an overflow:hidden attribute, cutting of the second DIVs contents and expanding the height of the wrapping DIV by JavaScript?
Maybe you'll have to change DIV1 to inline processing so it wouldn't 'push' the lower border of the container or something like this...
Just as a pointer, didn't try it, can't try it right now and not sure if it works but I think, it should. Anyway you or me, someone would have to play around with this to find out...
Hope this helps a little bit.
You could render both fully open (to improve accessibility to non-js users), then restrict the height of Div 1 to the height of Div 2.
So (with jQuery)...
CSS
#div1 { overflow: hidden; }
Javascript
$(document).ready(function() {
var div2_height = $('#div2').height();
$('#div1').height(div2_height);
});
To account for chopping on a line, test the line-height and set the height as a multiple.