When using Facebox I notice that it loads to the left of the screen and then jumps to the centre. Is there a fix so that it loads in the centre from the start without the jump?
I had the same problem with Facebox version 1.2.
it disappeared when I went back to using version 1.1.
This is due to line 126 in facebox.js:
left: 385.5
This occurs within the loading function.
As you see the position of facebox has been hard coded.
I fixed this in my case by changing this line to:
left: $(window).width() / 2 - (490 / 2)
(NOTE: change 490 from my example to the width of your #facebox table)
Related
Will start from the beginning, I need to make this page:
http://prntscr.com/m4ddwi
It seems kind of easy, but I receive some problems with it.
I thought to use grid, but moved forward with Flexbox.
Well, main problem, when I resize the window - input and textareas changes, and width start to be different, and idk why to be honest.
Now it looks ok, http://prntscr.com/m4df1k
but when I start to resize the window, some mess begin: http://prntscr.com/m4df9u
CSS for input and textarea the same - http://prntscr.com/m4dfhb
Here my html for this: http://prntscr.com/m4dg7j
and my scss as well: http://prntscr.com/m4dfwh
The problem with blocks, their resizing, and not remain the same, I only added flex-grow: 1, not shrink, so everything changes because of content, but why? How I can to prevent it?
I uploaded everything to github.io, link:
https://github.com/hordynsky/hordynsky.github.io/tree/master/moderne - code
https://hordynsky.github.io/moderne/pages/order.html - page
Will be glad to receive any help here.
Hope without negative feedbacks, all of you were there, were trying to learn things...
UPD:
About the code, better for you to see it on github, I think.
The main files is:
https://github.com/hordynsky/hordynsky.github.io/blob/master/moderne/sass/pages/_order.scss - (the scss for this page)
https://github.com/hordynsky/hordynsky.github.io/blob/master/moderne/sass/components/_form.scss - (the scss for the form and input/textarea itself)
https://github.com/hordynsky/hordynsky.github.io/blob/master/moderne/pages/order.html - ( my order page )
UPD1: The main problem in this example: http://prntscr.com/m4dmet - I added the same block, with the same text, width of the block with form now 588px.
But, I need to add another text, added and the form width now... 721px - http://prntscr.com/m4dmz7
I just want it always to be the same.
That my form block and text block always be the same 1:1 ratio.
Media Element 2.12.0
This happens only in FF and Chrome (and not in IE or Opera). After navigating to site content which has media element player, even to Media Element front page http://mediaelementjs.com/ there is a player.
When the browser zoom is set to Normal (usually by pressing Ctrl+0) it looks OK.
When the zoom is increased (by pressing Ctrl++ or Ctrl+ scrolling mouse wheel) then the volume control is placed below the whole element.
The above screenshot was made at zoom one level larger from normal.
Is there a method to make it look good in all browser zooms?
It seems that the children of div.mejs-controls overflowed when scaling the page, but it isn't a CSS case. The size of div.mejs-time-rail is generated by Javascript dynamically. (https://github.com/johndyer/mediaelement/blob/master/src/js/mep-player.js#L845)
I found a trick that can simply solve the problem, which is to decrease the width of div.mejs-time-rail by 1px.
So here I got a quick fix. In mep-player.js, line 845(https://github.com/johndyer/mediaelement/blob/master/src/js/mep-player.js#L845), modify following
total.width(railWidth - (total.outerWidth(true) - total.width()));
to
total.width(railWidth - (total.outerWidth(true) - total.width()) - 1);
I fixed it in the file mediaelement-and-player.js by altering the following lines
line 2705 insert **- 40**
// fit the rail into the remaining space
railWidth = t.controls.width() - usedWidth - 40 - (rail.outerWidth(true) - rail.width());
line 2713 change to
total.width(railWidth - (total.outerWidth(true) - total.width()) - 5);
Hope this helps.
you have to change in your css and set the width like
<div id="mep_0" class="mejs-container svg mejs-audio" style="width: 440px; height: 30px;">
<div class="mejs-inner" style="width:100%;">
<div class="mejs-mediaelement">
and check. hope this will help you.
I've faced the same issue. It seems that ChiChou's answer was finally used. If you update mediaElement at least to the version of the 31/08/2014 (2.15.1). You should be fine!
https://github.com/johndyer/mediaelement/issues/483
So this is what I got:
http://mysite.com
Now when you press on the big fat blue button at the right with "Make An Appointment" a lightbox appears. Although this lightbox goes under the slideshow and the same with the menu, like the z-index is bigger than the lightbox. Although i have set the z-index to 999999 for the lightbox, and still it appears under them.
What should I do here?
The root of your problem is the placement of your modal-bg and modal-box.
They're both inside an element with the class "page-content-shadow" -- this class has both a position of relative and a z-index of 5. This means that even though you're setting the modal to have a z-index of 99999, that's only with the context of its parent element's z-index (which is 5 in this case).
To fix this all you have to do is change the z-index for the page-content-shadow class to 100. That will put it on top of both your nav and your slideshow (in Chrome at least).
I'm about to face a similar problem, but I've been ignoring it as best I can.
My plan, although it may not be perfect, is to run a script that will find the highest z-indexes on the page and decrement them by 1 so that my object can actually be on top.
Since you're using jQuery you could use a plugin like TopZIndex or you could simply inspect that plugin and borrow the code that makes $.topZIndex() work.
Once you have the objects with the highest z index you can mod their CSS to lower the value.
Using that plugin, the code would look like this:
var bastardObjects = $.topZIndex();
bastardObjects.css("z-index",999998);
EDIT: I'm sorry if I misunderstood, I thought you were saying that you had multiple objects with the maximum z-index and therefore they weren't playing together nicely.
I created a custom layout for a list, to be used on a mobile (android).
I used this as example : http://corlan.org/2011/07/11/creating-flex-mobile-lists-part-ii-using-virtualization, using virtualization.
Now the problem I have is with scrolling : when scrolling to the bottom of the list, there seems to be always a "bounce back", as if the list would have reached and as if the bounce/pull effect is taking place.
But in fact the list has not reached the end at all, in fact I can not even scroll to the last element in the list.
When going back from bottom to top, there's no problem at all.
I trace the top and bottom of the Scrolling Rectangle (Rectangle.getScrollRect) and there I can see that when scrolling down, the top and bottom parameters increase, but when releasing the touchscreen, all of a sudden the parameters decrease again with a certain amount, and so never reaching the end of the list.
All my code is available on google project hosting : http://code.google.com/p/helpdiabetes-air/source/browse/trunk/src/myComponents/TrackingViewLayout.as
solved. Double checked with the example given by Mihai Corlan
and actually I had left out one statement at the end of function measure :
layoutTarget.setContentSize(dataGroupTarget.width, totalHeight);
works fine now.
Here is the pic from Elastic...
First time load the page:
Focus, and blur:
after typing ...
I don't want the space occur, how can I remove them?? Thank you.
Example from Elastic:
http://www.unwrongest.com/projects/elastic/
Delete linheight out of line 113 so that it becomes var goalheight = $twin.height();
Depending on how you want it to function, you might also want to remove lineheight from line 111 so that it becomes if(Math.abs($twin.height() - $textarea.height()) > 3){
well when I changed the style to height: 40px; it shows without the empty line.. when I started to write, the line poped up and then when I clicked outside text area, the line disappeared.
I couldn't come out with better solution.