Is there any way to replace <select> tag to a <div> with hidden <div> that drops down when clicked?
Not a full solution, but maybe some js or jQuery library/plugin to do this. I can spend a day developing it, but maybe someone did have already did it?
The reason i need it is the joomla administrative interface — the dropdown list contains very long values, and i had to set fixed width to those <select>s
Thank you for any help!
I tried out quite a few select replacement JQuery plugins, and settled on select-box - be sure to check out the demo page as well. There's a wide variety of plugins for this purpose, so if this one doesn't meet your needs I'm sure you'll find one that does with a little Google-fu.
Related
I'm working on a new version of my business site at http://bigriverwebdesign.com. I'm trying to implement a Photosphere background (http://photo-sphere-viewer.js.org/). I've contacted the plugin author, but he's been unresponsive and I'd like to see if anyone on StackOverflow has an insight.
I almost have things working the way I want them, but are two hangups I can't figure out.
1) The cursor displays as a grabbed hand. I would like to change it to all-scroll. I don't think this has to do with my implementation because it is the same way on the plugin site. I am unable to change the cursor with CSS and I'm not sure that it is being set with CSS in the first place. Does anyone know why the browser displays things this way and how I might go about overriding it?
2) I can't select text to copy and paste from pages like http://www.bigriverwebdesign.com/services. If I remove the photosphere, I'm able to select text just fine. I'm having trouble finding any information on this.
thank you!
I would first like to say that this site has been incredibly useful for me as I have been learning web coding in my spare time. I have decided to register as I have a specific question I would like to ask.
I am working on my new website and a specific test page (www.owenprescott.com/home.html). I have come across a problem that I am hoping someone can help me with. I have a jQuery plugin that creates a hover effect over my thumbnail images and the inline code is causing an issue (jquery.dirinline.js), the function targets my (li) boxes and says this...
$('.da-thumbs > li').hoverdir();
The problem is that I have a couple of white boxes with project information wrapped in (li) tags. I do not want the white boxes to be effected by the above jQuery function. If you visit my site you will see what the issue is when you hover over the white boxes. I would be very greatfull on some input, either I need to alter the jQuery function or remove the (li) tags from the white info boxes however I am unsure how to get them to display correctly either way.
I hope I have not made this question to confusing and thanks in advance for any advice. Also as this will be my template page if you have any suggestions to improve my code feel free to let me know, I know I still need to remove the default Dreamweaver information.
Your JS can be changed to:
$('.da-thumbs > li > a').parent().hoverdir();
And it should work with the HTML as is. The ones you want to exclude would match li>div, but not li>a, so getting the anchors and then selecting their parents will get only the items you need.
So exclude them from the matched set. Use not() to remove them.
$('.da-thumbs > li').not(".someClassInfoThingy").hoverdir();
or check if it those info blocks will never have a link, you can do
$('.da-thumbs > li:has(a)').hoverdir();
Yes, it is one of those questions, and I have seen the other similar questions on SO, but could not solve my issue with all available recommendations. I am new to Javascript.
I have created a small list of fonts I can click on to dynamically change the font on my page. Here is the HTML:
<div id='L3_RIGHT'>
<ul id="ffonts"><li>Font Selection:</li></ul>
</div>
In document-ready, I add <li> entries for each font. When I click on any font name, the page is updated successfully.
I would like to transform that list into a drop down list to take less space on the page. I thought the following would help:
$("#ffonts li").hover(
function(){$(this).find("ul").slideDown(200);},
function(){$(this).find("ul").slideUp(400);});
but it does not. It does not produce the drop-down effect (and yes it is called in document-ready after <li> entries are created). I tried variations of this and ideas suggested here and there on the net, but no success.
How should I proceed? Thanks.
Your hover function uses the 'li' element as 'this' and 'find' only finds elements deeper in the dom. Since 'ul' is higher in the dom, you can do a $(this).parents('ul') (or '.parent()' if you know 'li' is the direct descendant in all cases) and then your slide function should be working on the correct element.
I expanded on your example a little bit here: http://jsfiddle.net/fEdpA/1/
You probably don't want 'Font Selection:' inside of your 'li' element because it will disappear when the ul slides up, that's where your fonts go. In my example I just create a label for you and get the parent, then you can look inside with 'find' and get the 'ul'.
Usually a drop down list is a select with option tags. Glad my comment worked for you!
As a note for others that might see this question/answer it is generally better not to reinvent common inputs. There are a lot of tools out there to help people that have accessibility issues. They already know what the built-in inputs are and how to deal with them. They will rarely be able to figure out what you are trying to do when you make it all custom and snazzy.
I wonder if it's possible to just use CSS and JS to use a custom image of a dropdown in place of the actual <select> element - while it's in its initial, unopened state?
When it's clicked, it would just show the regular <select> dropdown choices, perhaps underneath that above-mentioned image ...
I searched around this forum and the web in general and couldn't find anything closely related. I didn't even find any jQuery solutions for this idea.
Would appreciate some help. Thanks!
You can certainly display an image and substitute a <select> in its place onclick. What you can't do is programmatically open the select box, or ‘recycle’ the click that took place on the image. So you would have to click once to have the image replaced and then again to actually open the select—not much use.
You are probably better off using one of the many scripts and plugins that completely replaces on-page <select> elements with a bunch of more stylable divs.
HTML
<img src='somImage.jpg' id='replace'/>
<select>
...
</select>
JS
$('#replace').click(function(){
$(this).hide();
$(this).next().show();
})
Fiddle: http://jsfiddle.net/maniator/KyFgy/
Have a look at this. I think you will like it
I am coding some sort of booking system - calendar. One of the features is also a (js) pop up window with detailed information about event - user can either view them or edit.
Now my problem - I have put there a HTML select control (dropdown box), quite simple - 5 options. But somehow, and I have no ide why, this select is uneditable - that means that after I click on it nothing happens (I do not get the list of the options).
I know that now I should put a code here, however, whole system is so complex that it would take me ages.
I do not await exact answer or solution of my problem. I would like to ask you for advice - what would you check? I went through CSS up and down - no clue at all. Maybe some javascript? But how? I do use one public js library, so it might be something there, I checked as well, no clue.
Any advice would be much appreciated. I am stuck now... :-(
Thanks a lot!
Peter
::EDIT::
I have found out what is was! The ID if that pop-up window is bbit-cal-buddle and there is this line in the .js:
$("#bbit-cal-buddle").mousedown(function(e) { return false });
which basically explains why I can't select anything in dropdown (funny thing - checkboxes and radio works!). So my question is: how do I exclude my select and option tag from that .js command?
I've found a useful option when the bug is that obscure is to logarithmically comment your code.
That is,
Comment 100% of the code that might be causing a problem.
Test
If it works, uncomment 50% of the code you commented and go to step #2.
If it doesn't work, you know the problem exists in the code you uncommented.
Yes, this is somewhat of a monolothic technique, but I've found it to be very useful in the past.
Regards,
-Doug
Just to be sure, turn off ALL styles. this will render your page without the styles(obviously) and check if you can click the drop down. If you can, it is 98% a CSS error. It happened to me awhile ago - most probably an absolutely positioned div is covering it.
If you still can't click it, bring back the CSS then disable all javascripts. It should still be clickable by then since and html select tag doesnt need JS to be clickable.
If it still doesn't work, try doing a regular html select tag and check if you can select that one. If you can, then there is something wrong with your select tag