I have a page with a ton of documents for a client who would like users to be able to click on each article/project listed on the page, and for a small details pane to open beneath it reveling the content.
I know this is fairly easy to do, particularly with JQuery, but I am not well-versed in the language and trying to take a stab at this kind of dynamic functionality. There are well over 50 documents, hence the reason for using "this" and trying to keep things dynamic rather than explicitly calling EACH of the 50 elements (and also bogging down load times).
Here is my HTML (I've only included ONE of the elements in the list)...
<ul class="paging" id="paging">
<li><a href="">Economics of Ethanol and Bio-butanol as Gasoline Blendstocks<br />
<strong>Categories:</strong> Oxygenated Fuels Issues, Bio-fuel Economics, Blendstock Valuation, Refining Economics, Refinery Modeling</a>
<ul style="background:#f8f8f8; width:500px; height:200px;"><li>Here is the text that should appear beneath woot</li></ul>
</li>
And here is my JQuery bit...
<script type="text/javascript">
$(document).ready(function() {
$('ul.paging > li > ul').hide();
$('ul.paging > li').click(function() {
$(this > ul).slideToggle();
});
});
</script>
My elements is being hidden correctly, so I'm assuming my selectors are ok? Anyhow, there's no working functionality with the roll-out. Any thoughts?
Thank you, all help is very appreciated! Like I said, very new to this. :) Thanks again!
The value of this is a DOM element. You need to use it as the base for jQuery's DOM traversal methods, like .children().
$(this).children("ul").slideToggle();
$(this > ul) should look like $('ul', this)
Or
$(this).find('ul').slideToggle();
The selector here is likely your problem:
$(this > ul).slideToggle();
You might best use this:
$(this).find('ul').slideToggle();
I would also suggest making CSS style for the ul's hidden by default, that way they wouldn't potentially flash on the screen before the document ready event.
Related
Sorry if the title is confusing, I'm very new to Javascript & Jquery so it's hard to find the right way to ask a question sometimes.
Here's the situation:
I've got a lot of divs all with a class of thumbnail:
<div class="thumbnail">
Additionally, some of those classes may be expanded at any given time, like so:
<div class="thumnail expanded">
This all works great and they expand as needed.
I'd like to add some logic that fires on click, when a user clicks any of these thumbnails to expand it:
$( ".thumbnail a" ).click(function() {
});
This check works fine, and I can fire a popup on click that registers the thumbnail anchor clicks like a charm.
What I don't know is how to check for any instances of thumbnail which also have a class of expanded, and remove that class. I tried something like:
$( ".thumbnail .expanded").removeClass("expanded");
Within the thumbnail click check, but to no avail. Not quite sure what I'm missing here, so help would be greatly appreciated. Thanks!
Just take out the space between the two classes, like so:
$( ".thumbnail.expanded").removeClass("expanded");
MHardwicks' answer is great & works. I've upvoted it.
So you know, The reason this works:
$( ".thumbnail.expanded").removeClass("expanded");
and
$( ".thumbnail .expanded").removeClass("expanded");
does not work, is that the space means "Class within the other class." So if you had
<div class="thumbnail">
<div class="expanded">Yay, I'm expanded</div>
</div>
Then your code with the space would remove the expanded, which is inside of thumbnail. However, since the classes are on the same element, you must put them together, e.g. .thumbnail.expanded, so you can target it.
If you want to know more about CSS Selectors, you can do this great little interactive tutorial CSS Diner
I hope someone could explain to me how to script a button element on my web page.
I am new to javascript and html. So I hope what I'm asking makes sense.
The idea is that the contents of an element changes to content obtained from a php file on the server.
I am using php to serve html5. I have tried the following:
<a onclick="document.getElementByID("myID").innerHTML(src="_document_with_new_content.php")") class="myClass"></a>.
my results are that the styles on my elements are lost and the desired elements do not load into the container element.
I also get no success from the ajax:
<a onclick="document.getElementByID("myID").load(src="_document_with_new_content.php")></a>
I am obviously doing it wrong, but can anyone help with this?
You can do this using Ajax but the code in your example was slightly wrong.
How about something like this?
<script>
$(function(){
$("a#some-identifier").on("click", function(e){
$( "#myID" ).load( "document_with_new_content.php" );
e.preventDefault();
});
});
</script>
jQuery example and explanation below:
https://api.jquery.com/load/
I have a few things to mention:
Use single quotes for you javascript: onclick="document.getElementById('myID')..." instead of onclick="document.getElementById("myID")...".
Javascript is case sensitive: So document.getElementByID('myID') won't work, but document.getElementById('myID') will.
innerHTML is not a function. This will work:
<a onclick="document.getElementById('myID').innerHTML = 'this will load'" class="myClass">click here</a>
<div id="myID"></div>
Loading an external document isn't that easy. If you simply want to learn some javascript, then I recommend to take a step back and start with the basics. But if you just want to build something quick, then have a look at a library like JQuery which is easy to learn and makes a lot of things a lot easier.
Hope this was useful.
I've looked everywhere for a technique, but I failed to find much that suited my needs.
Basically, I would like to utilize JavaScript or jQuery (probably using Ajax) to grab a div that contains a word from a page on my site.
I'm not asking anyone to code this for me, I would just like to be pointed in the right direction.
For example, let's say I have this HTML page:
<div class='findfromthis'>hello guys</div>
<div class='findfromthis'>goodbye guys</div>
<div class='findfromthis'>goodbye people</div>
I would like to display all the divs that contain the word "guys" in them.
Thank you so much in advance!!
JQuery has a contains selector that will find all elements containing specific text. Something along the lines of $("div:contains('guys')") should do the trick. Then you can use .each or .show etc to work with the selected elements.
See http://api.jquery.com/contains-selector/ for more detail.
EDIT :
The following code was deemed useful by the OP. It'll select all divs with class "findfromthis" which don't contain the phrase "guys", and remove them from the DOM:
$("div.findfromthis:not(:contains('guys'))").remove();
Give your div a class, say '.myDiv' and then via jQuery:
$('.myDiv').doSomething...
I'm not entirely sure how AJAX would play into this, but to point you in the right direction:
http://api.jquery.com/jQuery.ajax/
Your edit is an entirely different question. But you'd do the same to get the divs. In this case, you'd use 'each':
$('.findfromthis').each(function(){
// for each div you can now grab the text it contains:
DivText = $(this).text();
// now you could use a variety of different JS seach techniques to find
// your content. But one example to search for a word or word fragment would be:
if (DivText.indexOf("guys") !== -1)){
// then this div has the word 'guys' in its text somewhere
}
})
If the search term is more complex (like not wanting to find fragments) then you may want to use REGEX for the search part instead.
Again, though, not sure where AJAX would fit into this. This all can happen client-side.
I have two ul's that when the top li is clicked it shows the others below and hides another opened in other ul's.
My problem is I had to add a View All link beside the main li which I want to direct the users to a view all page while still allowing them to click main li to display the list.
I have put another a tag beside the main li's but now I cant get the show feature too work. Not sure what might be wrong.
I am not a great at traversing the dom and I know I have the siblings worng.
http://jsfiddle.net/ukkpower/En7KV/8/
EDIT: Sorry, I missed the hide all others requirement. Thanks for the comment. Please look at the link now and that issue should be resolved.
Note that I've wrapped the lists in a div called _sidenav. I much prefer this approach to looking for siblings as it's a bit easier to read and interpret at a glance and has less room for confusion in the future.
I think I understand what you want. Take a look at this fiddle:
http://jsfiddle.net/CU9zg/3/
I'm assuming the View All link is suppose to take you to another page, while the main li for a list acts like an accordian, hiding or showing the other items when clicked.
$('ul li.cat-item', $('#_sidenav')).hide();
$('.cat-item', $(this).closest('ul')).toggle();
Try this - http://jsfiddle.net/En7KV/10/
$('a.show_list').on('click', function(e){
e.preventDefault();
$(this).parent().siblings().toggle();
$(this).closest('ul').siblings().find('li a.show_list').parent().siblings(':visible').hide();
});
I don't know anything about programming, so I'm trying to find out where to start learning + how difficult my problem is. Since I don't have any programming knowledge, I'll try to describe my problem in natural language, hope that is OK.
I have the html file of the penal code (a type of law). It contains many different rules, that are in numbered paragraphs (§ 1, § 4, etc).
Now I want to look at the source code and manually “tag” the paragraphs according to specific criteria. For example all the paragraphs that concern the use of a weapon get the “weapon” tag, or that have a minimum sentencing of 1 year and higher get a “crime” tag, etc.
At the end I want to view an interactive html file in Firefox/Chrome, where I could for example click on a “crime” button, and all §§§ that were tagged with “crime” would appear in bold red, keeping the rest of the document intact. Ideally I would also be able to click on “weapon” and would only see the §§§ tagged with “weapon”, making the rest of the document disappear.
The function it's just for me, so it would only need to work on a Xubuntu 11.04 desktop with Firefox or Chrome. The original source file would be http://bundesrecht.juris.de/stgb/BJNR001270871.html. The code looks strange to me, is there a way to convert it into something more easily manually editable?
Any help would be greatly appreciated. Primarily I don't know where to start learning. Do I need to know HTML, jQuery, or a programming language like Python? Do I need to set up an Apache server on my PC? Perhaps because of my ignorance of programming, this seems like a not too complex function. Am I mistaken in the belief that an amateur could build something like thins maybe one month?
I think this is not very difficult to make, although the tagging process can be quite labour-intensive.
You don't need much programming skills, especially when you want to tag stuff manually. You probably only need basic HTML and CSS and some Javascript to pull this off.
What I would do is the following
Create a local copy of the HTML file (use Save As in your browser)
Manually tag each § by giving it the appropriate tag as a classname
Create a list of all available tags and let javascript filter out the § you'd like to see
Now Step 1 is pretty easy I guess, so I'll go right to Step 2. The paragraphs in the HTML file are formatted according to a certain pattern, e.g.:
<div class="jnnorm" id="BJNR001270871BJNE009802307" title="Einzelnorm">
<div class="jnheader">
<a name="BJNR001270871BJNE009802307"/>Nichtamtliches Inhaltsverzeichnis
<h3><span class="jnenbez">§ 31</span> <span class="jnentitel">Rücktritt vom Versuch der Beteiligung</span></h3>
</div>
<div class="jnhtml">
<div>
<div class="jurAbsatz">
(1) Nach § 30 wird nicht bestraft, wer freiwillig etc.
</div>
</div>
</div>
</div>
What you want to do now is add your tag to the <div> element with the class jnnorm. So the above example would become (if the tag weapon would be appropriate):
<div class="jnnorm weapon" id="BJNR001270871BJNE009802307" title="Einzelnorm">
You do that for each paragraph in the HTML. This will be pretty boring, but okay.
Now Step 3. First create a list of links of all the tags you've just created. How you create lists in html is explained here. Put this at the top of the HTML document. What you want to do with javascript is when you click on one of the links in your list that only the paragraphs with the given class are shown. This is most easily done with jQuery's click event and the show and hide methods.
Updated with jQuery example
Make a menu like this
<ul id="menu">
<li id="weapon">Weapons</li>
<li id="crime">Crime</li>
</ul>
And then use the following jQuery
<script>
$(document).ready(function(){
// When a <li> element inside an <ul> with the id "menu" is clicked, do the following
$('ul#menu li').click(function(){
// Get the id of the <li> element and append a '.' so we get the right name for the tag (class) we want to show
var tag = '.' + $(this).attr('id');
// Hide all elements of class 'jnnorm'
$('.jnnorm').hide();
// Show all elements with the class name of tag we want
$(tag).show();
});
});
</script>
Note: HTML classes are denoted as .classname in jQuery whereas HTML id's are denoted as #idname.
Good luck!
This could be done using purely HTML/CSS and Javascript, so not server would be needed. JQuery would make the javascript side easier.
Basic idea of how to do it:
Use CSS style classes for your "tags"
Have a button for each tag with an onclick handler that uses JQuery to highlight everything with that tag (or make everything else invisible)
The HTML source code actually looks nicely structured, though it could use a few more linebreaks for sub-paragraphs. Any good HTML/XML editor has an autoformat feature that handles this, though you could get any specific format you want using a programming language with convenient text-manipulation facilities, such as Perl, awk or Python.