I have created a fiddle to show a problem I'm having: http://jsfiddle.net/A5HyU/2/
On that fiddle, click on the button on the right, then go to the menu item Segnalibri, you'll notice that the submenu that opens has the second element in which the word Condiviso is somehow wrapped, but I would need the submenu to be sufficiently large to hold the whole word.
Is a problem of my setup or in the library itself?
To solve it I have tried two different solutions, the first is css based:
.jqSubMenu > li > a {
min-width: [XXX]px
}
This works, but requires me to pick a value which must be correct for every possible sub-menu I set up.
The second is js based:
$('.jqSubMenu').each(function() {
var l = 0;
$('> li > a', this).each(function() {
l = Math.max(l, $(this).text().trim().length);
}).css('min-width', (l * 8) + 'px');
});
This seems to work too, but slows down submenu initialization.
I also tried to change my surrounding css modifications, but none seem to affect the submenu layout.
You should try adding
white-space: nowrap;
To mentioned elements and see where does that get you.
Related
Imagine a responsive menu where the the elements are set to float. They're all, say, 150px wide. As the menu is reduced in width, individual elements will, one by one, get bumped down to the next row.
You're trying to determine whether an element has been bumped down. My thought was to design things in such a way where I could find out if the top of the floated element!= 0. If not, it's been bumped down to the next row. I could also evaluate element heights to figure out if an element is in row 2, 3, etc.
Is there a simpler way to determine if a floated element has been wrapped/bumped down due to parent width constraints?
I would try to find offset of element f.e. this way:
$(window).on('resize', function () {
$(".some-menu-item-selector").each(function(e) {
elementOffset = $(this).offset().top,
$(this).html(elementOffset);
});
});
Now when I have offsets I can group elements by "rows". There is only one assumption: elements have same height. If not, thing gets complicated.
Since your elements are a fixed size, 150px, you can simply use some math to figure out where they are at in the container element.
floor(container width / element width) = number of elements per line
element index % element per line = column
floor(element index / elements per line) = row
Simply add an event listener for the containers resize event and do your check there.
This might not be the best way to do it, but it is one possibility using javascript or jQuery.
You can get the position from the top of the first menu item, then check the distance for the next elements. if they are different, you would know that the the element has been displaced.
You would have to do this on load and on window change.
Good Luck!
I know very little JS but you can check height. I'm using a menu for an example to addClass or removeClass.
DEMO: https://jsbin.com/gapaqe/1/
jQuery:
$(window).on("resize", function() {
if ($('nav').height() >= 62) {
$('nav').addClass('test');
} else {
$('nav').removeClass('test');
}
}).resize();
CSS
nav a {
float: left;
padding: 20px;
border: 1px solid red;
}
.test a {
background: blue
}
/* to clear the floats all fast like dude */
nav {
display: table;
}
HTML
<nav>
Link 1
Link 2
Link 3
Link 4
Link 5
Link 6
Link 7
Link 8
Link 9
</nav>
What I'm trying to do is build a team page. Similar to http://www.razorfish.com/people/ourpeople.htm
I want to create a floated or inline row of elements, and show hidden content within each inline element UNDER the selected element. Thus, moving the next row further down.
However, I'm a newbie to JavaScript.
This is what I have now: jsfiddle
// var tag = $(this).parent().find(".hidden-info");
// var prevStyle = tag.attr('style');
$('.profile-header').click(function(){
//$('.hidden-info').show();
$(this).parent().find(".hidden-content").toggle();
//return false;
$(this).parent().find(".hidden-content").append(".people");
$(this).parent().find(".hidden-content").css("position","relative", "z-index","99");
});
Does anyone have any idea on how to go about achieving this?
Rather than traversing the DOM using .parent() and .find(), you can simply specify the selector context:
$('.profile-header').click(function(){
var $this = $(this),
hidden_content = $(".hidden-content", $this);
hidden_content.toggle().toggleClass("people");
});
Your append as written won't do anything. If you are trying to change its class, you should consider using addClass or toggleClass instead and add your CSS to the new class rather than changing your CSS in the javascript.
Place a .people-data div under each row of people. on each people click, find the .people-data that corresponds to that row and populate it with data.
$('.profile-header').parent().find('.people-data') // populate and show
Edit:
If you want it to be responsive, place the .people-data under each person and expand it the same way you would a row. This will work if you have each person item display:inline-block
The key changes are:
Setting display: none; instead of float: left; to the li's
Setting position: absolute; and left: 0px; to the .hidden-content
Setting the selected li's height programatically to pull the next line down
Toggling the previously selected li's to hide old detailing section
See working fiddle sample here.
This is the plugin:
Fancyselect page - http://code.octopuscreative.com/fancyselect/
This is the situation:
I need to control the position where the selector window with the various options is going to open.
I have tried to look into the code, but i did not figured out how to do it.
But i think that, by default, it depends if there is or not some space above.
To be more clear I have recreated two examples:
Here the selector is opening at the top: http://jsbin.com/AqoYucAG/2/edit
Here the selector is opening at the bottom: http://jsbin.com/AqoYucAG/3/edit
But, trust me, the css and the js are exactly the same in the both.
What change is that in the second example it misses the div with its content.
My actual situation is similar to the first example: the fancyselect is under a div with some text, and as in the jsbin, the selector is opening at the top, while i need to open it at the bottom.
This is the question:
How is possible to control the position where the selector is going to open?
And how to make it opening at the bottom?
Thank you!
if ((parent.offset().top + parent.outerHeight() + options.outerHeight() + 20) > $(window).height()) {
options.addClass('overflowing');
} else {
options.removeClass('overflowing');
}
}
he add and remove overflowing class
that css class control the way control is opened
if add > options.addClass('overflowing');
the select will open at the bottom
to test that try to comment //options.addClass('overflowing'); and see the behavior
I'm working on a site which dynamically creates facebook-like buttons via PHP. However, the <div> that the buttons are contained in needs to have the CSS property overflow: hidden; This is the only way I've found that works to make a two-column format which forces both columns to expand to be the length of the longest one. The only problem with this method is that any facebook-like buttons placed near the bottom of the container get clipped when someone clicks on them and they expand.
Here's the way I've tried to solve this issue:
Using jQuery, I loop through all facebook like buttons on the page and calculate their document offset using the offset() method.
I then clone() each button as well as give it absolute positioning and the calculated offset using jQuery's css() method. I hope that each cloned button will be placed in the same position of the button it was cloned from when I append it to the document.
Finally, I change each old facebook-like button's css to visibility: hidden; in order to make it invisible but still take up the space it would have previously on the page. I add the clones of the facebook-like buttons to a div without the overflow: hidden; property using the appendTo() function.
Here's my entire code for this process:
// Replaces functional facebook recommend buttons with identical ones
// in a div where they won't get clipped when they expand.
// Hides the old buttons so space is still left for new ones
$(window).load(function(){
$(".fb-recommend").each(function(){ // cycle through each recommend button
var offset = $(this).offset(); // calculate offset of each button
var newButton = $(this).clone(); // clone the button
newButton.css({'position':'absolute', 'left':offset.left, 'top':offset.top});
$(this).css("visibility","hidden"); // hide the old button
newButton.appendTo("#wrapper"); // put the new button in the wrapper where it won't get clipped
});
});
At the end of all this, I expect to have clones of each button placed where the old button was but in a different <div>. The whole process works, except that the cloned facebook-like buttons are appearing at a slightly different position than the ones they were cloned from (as PitaJ points out they seem to be off by vertical offset multiples of around 39px). You can view the issue here:
LINK TO TEST WEBSITE
As you can see, the first button is placed in the correct location (the empty space filled by its hidden clone) but the other offsets were not calculated correctly.
I'd appreciate any ideas or help offered. Let me know if you'd like me to explain better or post more code!
Edit: I figured I'd post the CSS for the facebook-like buttons here (even though all I'm changing is the margin):
#content .fb-recommend {
margin: 15px 0 5px 0;
}
Edit 2: As per UnLoco's suggestion, I added a min-height property to the fb-reccommend CSS and commented out the line of code that was hiding the old buttons so it's easier to see the problem (which is still there, though slightly lessened. The CSS now looks like this:
#content .fb-recommend {
margin: 15px 0 5px 0;
min-height: 39px;
}
Edit 3: The problem appears to have been solved in all browsers but IE by changing the CSS to this:
.fb-recommend {
min-height: 24px; // I used 24 because the fb-buttons are 24px in height
}
Final Edit? This seems to work on all browsers on my end, including IE:
.fb-recommend {
min-height: 39px;
}
I'm thinking now that the 39 might have come from the 15px margin of the old fb-button + its 24px height. I think I can get around it by simply setting the height to be 39px and not having a margin.
this is because you are retrieving the offset before the fb iframes actually load. just add a css rule like this
div.fb-recommend{min-height:39px}
I believe you're problem is some odd jQuery weirdness.
To fix this, simple change your code to this:
$(window).load(function(){
$(".fb-recommend").each(function(index){ // cycle through each recommend button
var offset = $(this).offset(); // calculate offset of each button
var newButton = $(this).clone(); // clone the button
newButton.css({'position':'absolute', 'left':offset.left, 'top':offset.top + (39*index)});
$(this).css("visibility","hidden"); // hide the old button
newButton.appendTo("#wrapper"); // put the new button in the wrapper where it won't get clipped
});
});
This will account for the weird offset problem.
i have a little problem concerning hover and jQuery:
I have created a table out of a mySQL-Database. There are some specific rows, that geht the Attribute display:none in order to not show them. But if you lay down the mous on the element obove the invisible one, the invisible element should become visible (maybe, there are more than one invisible elements, than all the invisible elements up to the next visible element should became visible. If you get the mouse off these elements, the invisible ones should disappear again. I have made a function, which does exactly what I want, exept one little thing. I would like to refer the hover not only to the visible row, but also to the invisible, which means, if you get the mouse off the visible element, to the former invisible elements, they aren't supposed to disappear, but they do! I have tried to organize the tr's with spans, but it seems at HTML don't like spans in tables, unless they aren't in td's. After that I have tried to solve the problem with the tr an mouse position, and bind the mousemove to all elements. This doesn't work either (In the following example I tried at first the xy-position of the visible Element itself, if i get this work, i will expand it to the former invisible elements.
$("#NH00").hover(
function(){
$('tr[name="hiddenNH00"]').show();},
function(){
$("*").one("mousemove", function(e) {
var offset = $(this).offset();
var xlt = offset.left;
var ylt = offset.top;
var xrb = offset.left + $(this).outerWidth(false);
var yrb = offset.top + $(this).outerHeight(false);
if(e.pageX < xlt || e.pageX > xrb || e.pageY < ylt || e.pageY > yrb){
$('tr[name="hiddenNH00"]').hide();
}
})
}
);
Take a look at the jExpand plugin.
The only possible issue I see is that it seems to expect for there to be one visible row, and one hidden row rather than multiples, as you describe.
If that is a problem, maybe you can re-work your markup so that the visible row is the same as now, but the hidden ones are in a nested table in the secondary row.
Make sure you read through the comments. Apparently there was an IE8 issue that someone fixed, and I'm not sure it made it back into the actual documentation.
Why not attach the same event handler to the "invisible" rows?
$("#NH00, tr[name='hiddenNH00']").hover(
function(){
$('tr[name="hiddenNH00"]').show();
},
function(){
$('tr[name="hiddenNH00"]').hide();
}
);
DEMO