When i switch between tabs with included players i've got a problem with div.mejs-time-rail
u can see my example here.
My script is :
jQuery(document).ready(function($) {
$('audio').mediaelementplayer({
audioWidth: '100%',
features: ['playpause','progress','duration','tracks','volume'],
});
});
in this case i want a audiowidth at 100% but when i switch to tab2 div.mejs-time-rail _ width = 200px (default value) instead of adaptive value.
causing a display problem.
What can i do in this case, do you have any idea ?
Thanks for help !
Related
Noticing today that on long lines of code or comments, the cursor progressively gets more and more incorrectly positioned until its apparent position can be off by more than 3 characters. (This looks like the editor thinks it is working with a different font.)
I see this in Chrome and IE. However Firefox is working fine. Is anyone else seeing this?
Hope they fix it. Turn off text-rendering: optimizeLegibility; in the body element and you should be good for the meantime.
In Chrome you do it this way:
Open the fiddle you want to edit
Open the chrome-console (f12)
select "elements" tab
select the "body" tag
scroll the "styles" area (on the right side) down to the "normalize.css"
finally uncheck the checkbox next to "text-rendering: optimizeLegibility;"
Now the cursor is fixed until you reload the page.
Thanks to user1803096 for the quick fix. Now because it is boring to each time use the inspector to remove this specific CSS rule, i prefer to copy/paste and execute in console following javascript:
var css = '*, body, button, input, textarea, select {text-rendering: initial;}',
head = document.head || document.getElementsByTagName('head')[0],
style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet){
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
head.appendChild(style);
Hope this will be fixed soon.
like close button i want minimize functionality over light box so when it is minimized it comes to the bottom of the window showing only title and minimize button converted into restore button so when i press it ,that light box will appear and if any another lightbox is open they will get minimized.so i want only one lightbox to be opend.i tried i dn't hav any idea how i will do this if u can add some magic code to this is my fiddle please look at it.
thank you
Edit like this
$('.lightbox').click(function() {
var thisBox = $(this).attr("name");
//console.log(thisBox);
$('.backdrop,.' + thisBox).animate({
'opacity': '.50'
}, 300, 'linear');
$('.box').animate({
'opacity': '1.00'
}, 300, 'linear');
$('.backdrop,.' + thisBox).css('display', 'block');
});
just comment console.log(thisBox)
My Isotope layout is returning 0px height on its container. Refreshing the page always resolves the problem.
Has anyone run into this?
Here is my Isotope:
var $container = $('#Stream');
$container.imagesLoaded(function () {
$container.isotope({
itemSelector: '.stream-items',
transformsEnabled: false
});
It occurs consistently albeit intermittently on Chrome, Safari, and FF. By "intermittently" I mean that sometimes it's on the first load, others on the third, or fourth, but eventually always happens.
I'm running on jQuery Mobile and have tried loading it the various options (window.load, pageinit, etc) but it happens regardless.
So, any ideas are much appreciated including any hacks that will force a refresh which always fixes the problem.
Thanks!
UPDATE: Just noticed that resizing the window resets to 0px height too.
It looks like Isotope doesn't have enough time to calc the images.
So I use window.load instead. Works a treat:
$(window).load(function(){
// Gallery Isotope
$(function(){
var $container = $('#gallery');
$container.isotope({
itemSelector: 'li',
masonry : {
columnWidth : 320
}
});
});
});
This is more of a proof of concept for myself, to fool around and learn what I can and can't do with jQuery, and I have had partial success.
I created an accordion that contains two spans, which serve as name and description, as well as a button that is independently click-able (ie, it does not open or close the accordion.)
Taking that concept, I decided to try and make the name and description editable by turning the name and description spans into text inputs / text areas, which worked fairly well.
The problem however is that when I take the same technique I used on the button and use it on the input and textarea, clicking it does not allow you to move the cursor to different positions. There does not seem to be a way for me to get around this behavior.
I tried event.preventDefault(), which does not work at all.
I tried event.stopPropagation(), which gives the partially working behavior.
and I tried return false, which worked the same way as stopPropagation.
I was wondering if anyone could provide any insight on this issue.
I included the jQuery javascript below, but for a much more concise example I will provide a jsfiddle link here (http://jsfiddle.net/Rakshasas/xFhN3/) which gives you a much more clear example of what I am doing. Note that when you click the accordion to expand it, the spans are hidden and inputs are shown. Clicking the inputs does not close the accordion, but it also does not allow you to position the cursor.
Also, if you do attempt to change the text in the inputs, closing the accordion does indeed update the spans which is the intended result. This is why I am saying my concept partially works.
Thank you.
$(function() {
$(".accordion").accordion({
header: 'h3',
collapsible: true,
active: false,
change: function(event, ui) {
var id = ui.newHeader.find('input:last').val();
$("#status").text(id);
ui.newHeader.find('div.headerContainer input.name').val(ui.newHeader.find('div.headerContainer span.name').text());
ui.newHeader.find('div.headerContainer textarea.desc').val(ui.newHeader.find('div.headerContainer span.desc').text());
ui.oldHeader.find('div.headerContainer span.name').text(ui.oldHeader.find('div.headerContainer input.name').val());
ui.oldHeader.find('div.headerContainer span.desc').text(ui.oldHeader.find('div.headerContainer textarea.desc').val());
ui.newHeader.find('div.headerContainer span').hide();
ui.newHeader.find('div.headerContainer input, div.headerContainer textarea').show();
ui.oldHeader.find('div.headerContainer span').show();
ui.oldHeader.find('div.headerContainer input, div.headerContainer textarea').hide();
}
});
$('input.name, textarea.desc').click(function(event){
event.stopPropagation();
});
$(".delButton").button({
icons: {primary: 'ui-icon-trash'},
text: false
}).click(function(event) {
//Display user friendly text
return false;
});
});
If someone is facing this issue, this is a little trick that worked for me.
PROBLEM: nested jquery accordions with input/textareas elements, cannot gain focus with normal click in Firefox (if you use jquery accordions with NO nested accordions on it, everything works fine). Confirmed by above users.
The sympton relates only to normal click (left click). If you try optional click (right click), the element (input/textarea) WILL gain focus. Weird.
SOLUTION: Just declare this in your document ready function
$(function() {
//some code ...
$("input, textarea").click( function(){
$("input, textarea").blur();
$(this).focus();
});
//more code ...
});
Confirmed (by me) working on IExplorer, Firefox and Chrome.
Seems to work fine in Chrome. This might be browser dependent.
"Clicking the inputs does not close the accordion, but it also does not allow you to position the cursor"
Also fine in Chrome.
I'm using the jquery ui dialog for a modal popup dialog. It's working great in Firefox/Chrome but terrible in ie6.
Problem:
When I show the dialog in ie6, the browser window grows and automatically scrolls down to the bottom. The height increase and automatic scroll-down is equal to the height of the jquery dialog.
I can scroll up and then use the dialog as normal, but the behavior where it grows the window and drops is maddeningly unacceptable.
Here is how I'm launching the window:
<div id="dialogWindow"></div>
...
$(document).ready(function() {
var $dialog = $("#dialogWindow").dialog({
autoOpen: false,
modal: true,
minWidth: 560,
width: 560,
resizable: "true",
position: "top"
});
$('.addButton').click(function(e) {
e.preventDefault();
$('#dialogWindow').load('http://myurl');
$dialog.dialog('open');
});
});
I am already using the bgiframe plugin for jquery which is key for ie6 overlay issues. But this seems unrelated to that. Has anyone seen this before and found a work around?
I've seen this behavior before and it is usually caused by the overlay. When you use the {modal: true} option an overlay is created and rendered with bgiframe support if the plug-in is loaded.
First off, try turning {modal: false} and see if you aren't getting page blow-out then we know it's the overlay.
there are a few things to check if that is the culprit;
check that the styles for the overlay are loading correctly, you'll need to include the jquery-ui dialog.css
try experimenting with position: and float: styles
try moving your dialog markup just above the < / body> tag, allowing the modal overlay to escape correctly.
I had a similar problem at one point.
$('.addButton').click(function(e) {
e.preventDefault();
$('#dialogWindow').load('http://myurl');
var y = window.pageYOffset;
var x = window.pageXOffset
$dialog.dialog('open');
window.scrollTo(x, y); // horizontal and vertical scroll targets
});
What the above should do is grab your current scroll coordinates and saves them. Once the dialog opens you then scroll back to the prior position in memory. Should be near instant and unseen by the user.