When I populate my drop down menu in IE, it doesn't re-center. This is what it should look like (which it does in chrome):
However, this is what it is doing:
There must be an easy way to reset the menu back to center and resize the box?
This is the function that populates the menu:
function PopResources()
{
$('#resources').html("<option>loading..</option>");
$.get("resources.php",
{"param":"getresources"},
function(returned_data)
{
//alert(returned_data);
$('#resources').html(returned_data);
});
}
I don't know your particular case (without html and css), but sometimes these type of display issues can be resolved by turning off and then turning back on the display of the element at the end of the script (this usually works in the case of refresh issues as the browser is "forced" to recalculate the element).
For jquery something like this at the end of the script:
$("#resources").toggle().toggle();
Related
Say I have a left-side chat bar with chat users. Each user has their image (much like Facebook's chat)and is clickable to open a chat box to start chatting away.
Here's my code:
$('.msg_wrap').hide();
$('.msg_box').hide();
$('.chat_user').click(function() {
$('.msg_wrap').show();
$('.msg_box').show();
}
I know this is wrong but what I want to do here is when the page loads for the first time, all the chatboxes to be hidden (hide ()). It is not until I click on a chat user (.chat_user) that a pop up/chat box appears (show()). How do I fix this code? Do I have to create a function?
A quick thought on a solution.
First. Set the elements ('.msg_wrap') and ('.msg_box') to hidden in your html and kill your first two lines of code. I am not sure what those elements specifically are, but, for example, if they were div tags it would look something like:
<div hidden class="msg_wrap">
Second. I am not sure if you are saying that the code currently isn't working on page load. It looks like you are missing a ) at the end and also you can update to the following so that it gets executed on page load.
$(function(){
$('.chat_user').click(function() {
$('.msg_wrap').show();
$('.msg_box').show();
});
});
This is jquery shorthand for $( document ).ready().
Also, if you want the msg_wrap and msg_box elements to toggle between being hidden and shown you can use the toggle() method instead of show().
Here is my issue :
I have a custom button with a code onClick. This code modify the selection's parent node, and I would like that my selection stays the same after my code, but tinyMCE disable my selection and give me a caret instead.
I tried getRng() and setRng from tinyMCE API but without success, the results are pretty odd. Sometimes it works and sometimes it deactivate my selection and give me a caret instead. Plus, sometimes it works only 2 times and then my button does not respond.
Here is my code which does not work:
onclick : function() {
range_selection = tinymce.activeEditor.selection.getRng();
//Here is my own code which modify my parent node
tinymce.activeEditor.selection.setRng(range_selection);
}
Problem here is that this range is probably not applicable anymore because of a changed DOm structure. I would use a bookmark to overcome this issue:
var bookmark = ed.selection.getBookmark();
// do what you like to do here
ed.selection.`moveToBookmark`(bookmark);
I have a custom table which I'd like to use as the DropDown portion as a DropDownList.
Ideally, when users click on a DropDownList, it should show the custom table instead of the usual drop down. I thought it'd be easy to prevent the dropdown from opening without disabling the DropDownList control, however that doesn't appear to be the case.
Is there an easy way to prevent a DropDownList from opening without disabling it?
Edit: This has to work for an embedded IE 7 web browser, and e.preventDefault() does not work in that browser version
You can do something like this:
Basically, I have positioned an invisible div over the dropdown to block it, and you can handle the click with the onclick of the masking div.
EDIT: I have updated this http://jsfiddle.net/EdM7B/1/
<div id='mask' onclick='alert("clicked");' style='width:200px; height:20px; position:absolute; background:white;filter:alpha(opacity=0);'></div>
<select id='selectList' show=1 style='width:200px; height:20px;'>
<option>Test</option>
</select>
I had to use a sort of hack because IE doesn't seem to render divs properly that have no background colour set, so it wasn't working correctly. This works in my IE7.
If you want it to work in all browsers you'll need to add chrome/firefox opacity CSS or have some IE only CSS to apply background colour.
I think due to the way it's positioned above, the opacity is actually not working properly because the element is positioned absolutely, either way it seems to work. I originally had it as opacity 1, but that sounds wrong to me as we want it invisible, so I changed it to 0.
It's possible to stop the dropdownlist from showing by using jQuery's event.preventDefault in the mousedown event (demo: http://jsfiddle.net/RCCKj).
Also see this related question: stop chrome to show dropdown list when click a select
Put it inside a div like this:
<div id="dllDiv" style="width:200px;height:200px;">
< asp:DropDownList ID="DropDownList1" runat="server" style="z-index:-1000px;pointer-events:none;">
< /asp:DropDownList>
</div>
You should set the css property pointer-events to none, then you can show your table hidden in a div or loaded it by using ajax, something like this:
(document).ready(function() {
$("#dllDiv").click(function() {
alert('adasd');
});
});
Have you thought about using a mega menu for this, you can put anything you want in the dropped down portion - for example your table
I have some weird behavior with jQuery paginate plug-in (jPaginate). I need to have top and bottom pagination and I want to sync them - whenever one is clicked, the second one should be properly changed as well.
I have two divs with number_pagination class and they are initialized the same way:
$(".number_pagination").paginate(options);
Now, here where it gets weird. Whenever I click on the top div, everything works as supposed to, but if I click on the bottom one, it changes the bottom one and does the pagination, but the top one stays the same. I cannot figure out why that could be happening.
Here's the onChange function that is supposed to change both pagination divs. Note the jQuery.fn.draw function that is a part of jPaginate. This is where it applies classes and style.
var opts=jQuery.extend({},jQuery.fn.paginate.defaults,options);
var o=jQuery.meta?jQuery.extend({},opts,jQuery(this).data()):opts;
jQuery(".number_pagination").each(function(){
var obj=jQuery(this);
jQuery.fn.draw(o,obj,page);
});
Found another solution that works perfectly.
It may even work for other pagination plug-ins. It checks the class that has the currently selected page number and checks if the content matches the selected NOW page, and if it doesn't, it looks for siblings that have the correctly selected page and triggers the click event.
jQuery(".jPag-current").each(function(){
if(jQuery(this).html() != page){
jQuery(this).parent().siblings().children().each(function(){
if(jQuery(this).html() == page){
jQuery(this).trigger("click");
}
});
}
});
You should probably look at using the onChange event to redraw the other pager that didn't incur the change
I've got the following piece of Jquery:
$("#collapse-menu > li > a").click(function() {
$(this).toggleClass("expanded").toggleClass("collapsed").find("+ ul").slideToggle("medium");
});
What it basically does is expands or collapses a menu of nested "lists" which contain dropdowns (simplified example):
<ul id="collapse-menu">
<li><a class="expanded">Basic Details</a>
<ul>
<li>
<select> .... </select>
</li>
<li>
<select> .... </select>
</li>
The code works absolutely fine EXCEPT when a large value is selected in any of the dropdowns. At that point, when clicked, the menu will still expand/collapse correctly but "flash" quickly while doing so, as if the entire element was being reset somehow. The data itself is fine but it's the flashing that's unwanted.
The strange thing is that if a small value is selected in a dropdown, there's no flashing. When a large value is selected (say, above 30 in an age dropdown of 18-99), the flashing starts happening.
Can anyone tell me why this is happening? Or whether there's something not right about the Jquery that's causing this.
Thanks.
UPDATE:
Adding a bounty to this. Have tried a few similar plugins/solutions out there on the net but they all seem to suffer from this "flashing" problem when large dropdown values are selected by default.
If it helps, here's a typical similar solution: http://www.i-marco.nl/weblog/jquery-accordion-menu/index_collapsed.html# ... but it suffers from the same problem when dropdowns are added inside the accordion.
I hope someone has a clean solution, instead of needing to hack this somehow.
From my observation: The issue seems Operating System dependent. The selects are painted by system, as they're system controls. On my Linux machine I experience no problems with blinking animation in the http://jsbin.com/ixake example. I expect You tested it on Windows (r)
It looks like the select is "scrolled" to the proper value everytime it's repainted. And that happens a lot while animating.
The easiest solution would be to substitute system selects with html-based selects to remove system dependency. There are unobtrusive jquery plugins that will do it for You.
Try this or pick any from here if that first one wasn't too good.
After that Your animation should depend only on JS and styling.
I think the problem is that every time the element is resized the dropdown scrolls to the selected element, which causes the flashing.
The answer would be to save each selection in javascript (on change say), then when the animation starts to deselect the value and then restore it when the animation stops. This will give you the same performance as you get when you have a small value selected, while preserving the user's selection.
You might also want to ensure that the form cannot be submitted while it is in a transitional stage, otherwise you'll get bad values coming back.
I personally think autocomplete may really be the way to go. However, I had the idea that hiding the long select by substituting a fake short one would make the slide smoother. Seems to work better on the one browser I tested (Firefox 3.0.18). The code could probably be cleaned up and there is the bug that sometimes the selects won't match sizes by default due to the internal scrollbars but that shouldn't be too difficult to fake.
$("#collapse-menu > li > a").click(function() {
var was_expanded = $(this).hasClass('expanded');
var uls = $(this).toggleClass("expanded").toggleClass("collapsed").find('+ ul');
if (was_expanded) {
$(this).parent().find('select').each(function() {
var fake = $('<select class="fake"><option>' + $(this).val() + '</option></select>');
$(this).parent().append(fake);
$(this).hide();
})
uls.slideUp('medium', function() { });
} else {
$('.fake').remove();
$('select').show();
uls.slideDown('medium', function() { });
}
});
What you can do is disable the select lists before animating the ul.
$("#collapse-menu > li > a").click(function() {
$(this)
.toggleClass("expanded").toggleClass("collapsed")
.find("+ ul").find("select").attr("disabled","disabled").end()
.slideToggle("medium",function(){
$(this).find("select").each(function(){this.disabled=false;});
});
});
give that a try and report back.
You will probably want to style (CSS) the disabled select lists to look identical to non-disabled ones.
NOTES
The above has a side effect of not submitting the selected values when a form is submitted. If this is a problem for you then I suggest you either remove all options from the select list except for the selected option before animating and then add them all back in once animation is complete. And if that won't work for you naugtur's suggestion to use HTML-styled select lists is probably the best option.
p.s. don't bother trying to use the readonly attribute on the select list...it doesn't exist.