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
Related
I am a newbie with html and i need your support. Please look at my code:
https://fiddle.jshell.net/ghLoau6r/1/
Now I want to make a list of FAQs as table. The requirements are:
when we click to any link button (here we have 2 link buttons as 2 rows of the table), the background must be changed (not pink anymore, but another color)
when we click to any link button, the triangle at the beginning of the row also changes to another form (i created already but my code does not run)
when we click "show info 2", the corresponding "content 2" should be shown, instead of "content 1" now.
please help me, thank you guys very much !
So, not to be rude but there is so many things that need to be fixed here, that I don't have time to share them all with you. I'd strongly recommend picking up a book (HeadFirst HTML & CSS isn't bad, there are plenty others) and getting a solid understanding before continuing the work.
That said, the core problems to your specific question are that first, ID's should be unique (you have two elements with the ID of 'content1'). Second, your second link is looking for content1 still, even though you want content2. A quick fix would be to update the ID of the second content area ,and then update the anchor onclick handler to look for the correct ID.
That said, this is pretty far from an ideal or scalable solution, so please read up.
As commented, I think it will be hard to help without completely writing it for you. But I'd like to at least point out that you should move your JavaScript from inline/in the HTML into a separate JS file.
In your JS Fiddle, take this:
onclick="document.getElementById('content1').style.display=(document.getElementById('content1').style.display=='none')?'block':'none'"
And put it in the "JavaScript" section of JS Fiddle, inside of a $(document).ready() function. Use jQuery to register the onclick event to the behavior you want. Can include jQuery in your fiddle by using a jQuery URI such as https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js
Godpseeed
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>
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.
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.
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.