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
Related
On a website, I see some charts with animation. I am sure they have used a plugin to design those charts but which one, I DONT KNOW...
Is there any way to find which plugin or .js file is used ?
I right-clicked on the chart and clicked "Inspect Element" too but no success. Can't seem to find the correct chart or the code that invoked the animations (hover, mouseOver etc)
The theme I am looking at is here
If you look at the chart underneath VISITORS, and hover over any line, it shows some values. I want to know what is triggering the show of these values.
EDIT
Muhammad answered helped me a lot. Here is what I did for someone looking for the answer.
I right-click on the plugin that I wanted to know more about, and looked at the ID and the class of the same.
By the look of it, i could see that some plugin called 'HighCharts' is used. Then I pressed
ctrl+Shift+F
After that the search option was shown to me, which I couldn't notice since it was right in the bottom of the screen.
I entered "High" in the search bar and it showed me the script and the javascript file that was used to call it.
Hope this helps
For checking which plugin they are using for this. Right click and go to inspect Element and then check the parent div class which contain the particular chart of something and after that go to sources next to the network and for the main.js OR custom.js OR app.js You can quickly search by press ctrl+shift+f or simple look into js folder and search for the class that you got from the inspect Element and you will find which function they are using for this class and u will have idea from the function name and you can search for that partical file.
Ex:
This is a simple example I hope you have got the better idea.
Step 1
Step 2
Step 3
Cheers, everybody!
I'm generating an HTML table dynamically using JS, and placing it into a 'div' element in another page. It's sort of OK, a few amendments, but I get the table output, better than i would expect.
Nevertheless, the problem is that my destination page where the 'div' element is placed, doesn't get updated, it stays blank like there was nothing there when in fact there should be, since i'm setting it, and otherwise where does the table come from in the page, right? Seems awkward to me. I see a table, but there's no correspondent html code for it in the page.
Specially because i need to take a look in detail to fix the issues in my table layout.
Now, I'm pretty sure this is a very naive question, beginner's, and if I only knew it enough, I would understand what's going on, but at the moment, it's totally impossible for me to stop to take a deeper look at this, lots of stuff.
I really could use some contribution, like a fast and elucidative answer, sort of what do i do to view the table html, where is it 'hiding'? Preferentially.
But as much important as it, a few 'read this' or 'read that', if you don't mind, because at this stage, You know, bump into an obstacle every two steps.
Anyway,thanks in advance! I would appreciate any help!
Page source only displays static content received from the server. To see the dynamic content added by your JS code you need to use the developer tools of the browser.
Easiest way to do this is to right click on the table and select 'Inspect Element' to see the generated HTML for your table.
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 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