Why does removing the "float:left" from an element make the bounding box suddenly increase in size? Ideally, I would expect that wherever the elements are floated inside the box, the size would remain consistent.
UPDATE: I've included detailed images which show both the problem & the expected behavior. I've also pasted the CSS & HTML involved in the following paste-bin:
http://pastebin.com/bYMQR98p
In real life, you can still see the issue at the link below (which will remain online for a good time to come). Just remove the "float:left" from the element "pag pag-inner":
http://www.axonnsays.com/page/2/
Images with the issue:
Correct (with "float:left" removed)
Broken (with "float:left" present)
you can put float:left in your ul class="pag pag-inner".
Related
UPDATE: I originally thought this was something between MatchHeight and FlowType but it now appears to be an issue with using flexbox css. I commented out the flex css and FlowType works, but I need it to work with flexbox. Any ideas?
ORIGINAL QUESTION:
I have a page where I have 5 blocks with text and images in them. They are organized in a row and I am using matchheight.js to keep them all the same height and FlowType.js so the text will resize within the boxes and keep the proper layout.
Ideally the header text should all be the same size across the boxes as well as the body text.
However when the page first loads some of the boxes have different size text than the others - even though they all have the same base font size and the boxes are the same size.
When I adjust the size of the window everything recalculates and the font sizes become uniform. What is missing when the page loads that causes the text to not size correctly and/or is there a way to trigger the recalculation without resizing the window.
Here is the code I use to call the js.
$(document).ready(function() {
$('.front-page-guide').flowtype({
maxFont: 40,
});
$('.front-page-guide').matchHeight();
});
Here is a codepen: http://codepen.io/dll416/pen/xgeeoz
So you can see the html and css and see it in action.
The viewport has to be 1200px or below to see the issue.
Thx.
I have a setup that displays two elements side-by-side, specifically an image and a Facebook like box.
The image has float:left and the Facebook like box div/span has float:right - the HTML code looks something like so:
<div class="header"><img class="logo" src="logo.jpg"><span class="fb-like-box"><iframe></iframe></span></div>
In certain situations when the browser width shrinks to a certain point, the FB like box will break (or move) to the next line. I have used CSS #media queries to deal with this.
Unfortunately, certain mobile browsers do not 'break' or move the FB like box to the next line at the same CSS points. For example it renders fine on a 320px width iPhone and a 360px width Note 2. However, on say the Samsung stock browser with a phone width of 380px, the Facebook like box is displayed on the next line and actually the box itself is rendered horribly.
How do I use jQuery to detect if a floating element is displayed on (or breaks to) the next line and execute a CSS modification?
Thanks for the help!
Comparing position().top of both elements on resize or load could trigger a function containing a CSS modification.
If the absolute value of the difference between position().top of the left and right elements is greater than a certain amount, and both elements are set to align to the top of their parent element, then it would theoretically mean it's probably a line break.
See jsfiddle example here: https://jsfiddle.net/aprtLumf/2/
jQuery position() documentation: https://api.jquery.com/position/
I have this page where I tried to create a on page pop-up for an image using JS/JQuery, following this example (http://www.jqueryscript.net/lightbox/Simple-jQuery-Plugin-For-Opening-A-Popup-Window-On-Page-load.html).
Although I succeeded on it, when I try to implement it on my customer page, some divs are on front of my pop-up, no matter how high I configure the "z-index" for it. Also, these divs seem to be dinamically generated, as they have the "wrap" id div around that I can't find on my .php file for this page.
So, no matter what I do, these images are on front of my pop-up (except if I remove them using the "Inspect element" tool or change the z-index on them with Inspect Element, changing the inline style for this automatically generated "wrap" div).
This is the page without any changes on "Inspect Element", the white image boxes with the red arrows are the problem here (they belong to the page under the pop-up and I need them to be under the pop-up): http://imgur.com/waB1igo
This is what happens if I change the z-index of the automatically generated div "wrap" that I can find searching the code with "Inspect element" for one of the boxes (the first one): imgur.com/lDk1eRA
So, any of you guys have a tip for me on how to solve this problem?
I've already tried to create new css rules for this div or the img's tags, using the "!important" and these kind of things, without result.
Thanks very much in advance and sorry for english errors,
Matheus Barreto.
You might want to try setting the position property of the overlay to absolute. Images that have their positions set to absolute will get on top of everything that is not set to position absolute or fixed which can be very annoying. You might need to work around a bit with centering it or other issues that come from setting its position to absolute but this should work.
Try to make sure your overlay DIVs are outside wrappers, inside the </body> tag, before closing scripts... If the DIV is inside another that has a lower z-index, it won't "pop out" of it.
Also, you may try really high z-index, such as 8000 or higher. You should be able to use up to 65535 (higher depending on the browser's implementation).
It's worth noting that you should have a plan for z indexes of fixed/absolutely positioned items.
In one of my projects, I am replacing the default cursor in the browser with an SVG one. I am appending this SVG cursor via jQuery. This works fine, but I want to change the cursor when it hovers over links, and right now, nothing I have tried has worked.
I think it is because even though the cursor has a position of fixed and a high z-index value, it cannot tell what it is hovering over because technically it is below the content.
Does anyone have suggestions?
EDIT: Right after I posted this question and after I included a JS Fiddle in the comments, I changed my code to make the cursor appear before the content. The issue remains, however.
Look above in the comments for #mcbex's JS Fiddle! Apparently, one does not simply add a class to an SVG, one must customize it with fill colors.
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.