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.
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 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();
The following zip contains the website html and required files: http://dl.getdropbox.com/u/4281191/login.zip
When you hover the html (html:hover) you see a animation that transforms the container into a loginbox, I want that to happen when I click on "Login" at the "Hello, Guest" menu instead.
Anyway to get this done? I'm new to js...
Additional info:
the css is inside the html,
and the css3 animation gets triggered by:
html:hover id/class {
property: value;
}
Thanks for any help!
And I can't vote at comments since I don't have enough reputation...but I could do some free design work for the person who helps me ^^
I still don't know much about animations, but for what matters here, you could use something like the .classname:active or .classname:focus selectors. But as soon as you click something inside it (e.g. a text box), the style will disappear.
So, for this, it really depends. Do you just want a menu that has links that take the user to another page (for this case, you'll be fine) or do you want a login form (for this case, forget it, use jquery)?
For today and future reference, save this link because it'll be your best friend:
http://www.w3.org/TR/selectors/#selectors
Update
Yes, I hovered but I didn't look at the code. I looked now and, unfortunately, the answer is no. You can't affect some upper level object like that using CSS.
For that use jQuery. The simpler way would be use jQuery to add a class to the element you want to change (like $("#the-object-id").addClass('class-name')). To keep the effect add the duration argument. Read this page about Adding a class using jQuery.
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
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.