Syle not getting applied to dropdown - javascript

I've been tinkering with this a little bit as well and can't quite understand why the styles get applied to the search text box but not the dropdown like it does on the template. Any ideas on why this could be happening.
http://jsfiddle.net/NNk7s/2/
Template: http://kansasoutlawwrestling.com/peach/tables.html

I can see what's happening, although I don't know enough about this plugin to tell you why. There are two "dropdown menus" in the working example. One is a real HTML <select> tag with <option> tags, but this form element is hidden with a style="display: none" attribute.
What you're seeing on the page is actually a fancy, styled <div> tag designed to look like a dropdown menu. The <select> tag is likely only there for compatibility with older browsers, or maybe if the user has JavaScript disabled.
You'll need to figure out what you need to do to get the plugin to create that fake dropdown overlay for you. It's probably just a matter of creating a <div> or some other element and applying a CSS class to it.

Related

How to have syntax highlighting in a contenteditable div?

I have a contenteditable div:
<div class="one" contenteditable="true">A</div>
If the user enters HTML, CSS or Javascript tags into that contenteditable div, how would I make it syntax highlighted?
So as the user types in variables, tags, etc, they are colour coded
This is not as easy as it might seem at first.
You can create your own solution using some existing highlighting library like PrismJS or HighlightJS and then implement a custom re-render functionality which saves the current cursor position -> parses the content & updates the look (this would be the task of the syntax highlighting lib), and then sets the cursor to the previous position again.
There is one "tutorial" by bililite which can help you with this task.
You can find it here.
TBH: I'm surprised that there (correct me if I'm wrong) seems to be no open source solution for this. Would there be a need for that?

Styling a drop down option list to look like a button with background image. HTML/CSS

I am creating a mobile website, and I want to style a simple drop down list to look like a button. I want it to have a background image within the button.
Its purpose is to sort a list view, so I want the option menu to have a sort icon with text saying sort
<select>
<option>ASC</option>
<option>DESC</option>
<option>Price</option>
</select>
Is this possible? I have seen it used on jQuery Mobile but we are NOT using this framework, just pure html/css.
There are ways to do this, but all require some JavaScript.
The simplest is to use this technique, which basically sets the select element to be transparent and positions it over your custom "button" element. When you click on the button you're really clicking on the transparent select element, which causes it to open.
Other, most complicated/powerful solutions include:
Select2
zelect
I wrote this for a custom Font project (dropdown) its very easy to use, and it has lots of application that you can use it for. There is no way to do what you are requesting at the option level (say for some color). Here is the link, I hope it is helpful.
http://jsfiddle.net/cornelas/mAz3c/
Common CSS
select option {
background: red;
}
This might be hackish but maybe it's similar to what you're looking for. Just an example that you can do a dropdown without JS, numerous examples of it.
But you can throw whatever you need to in the "li" tags and style them appropriately.
Of course, with the positioning you'll need to be able to know where your stuff needs to go which could be a pain if you're going for something flexible across different viewports.
Styling would obviously need work too.
http://jsfiddle.net/uNhaX/
<ul>
<li id="first"><img src="http://jsfiddle.net/img/logo.png" /><ul id="second">
<li id="asc">Asc</li>
<li id="desc">Desc</li>
</ul>
</li>
</ul>

JQuery list drop down menu issue

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.

Use an image instead of unopened <select>?

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

Javascript: replace <select> with <div>?

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.

Categories