Nav Bar - Script explain - javascript

I know this is embarrassing... but can some one explain me what exactly this script do line by line.
$(document).delegate('.ui-navbar ul li > a', 'click', function () {
$(this).closest('.ui-navbar').find('a').removeClass('ui-navbar-btn-active');
$(this).addClass('ui-navbar-btn-active');
$('#' + $(this).attr('data-href')).show().siblings('.content_div').hide();

$(document).delegate('.ui-navbar ul li > a', 'click', function () {
When someone clicks anywhere on the page, check if the target was an anchor tag (<a>) directly below a <li> inside a <ul> inside an element with the class ui-navbar.
$(this).closest('.ui-navbar').find('a').removeClass('ui-navbar-btn-active');
$(this) is now the anchor tag - the script is going to find the closest element with the class ui-navbar in the DOM tree and remove the class ui-navbar-btn-active from all anchor tags beneath it in the DOM tree.
$(this).addClass('ui-navbar-btn-active');
Then it will add the class ui-navbar-btn-active to the anchor tag the user clicked on.
$('#' + $(this).attr('data-href')).show().siblings('.content_div').hide();
This assumes the anchor tag has an attribute called data-href which matches another element's ID. Example, the user just clicked on Google and the script wants to find <div id="google">whatever</div>. If it finds the element, it will show it (jQuery prefers setting the css to display:block for this) , then grab all the sibling elements in the DOM tree which have a class of content_div and hide them (display:none).
Essentially what is going on is the page has some nav links - whichever one you click on gets an active class, and all the other nav links lose theirs. Then it shows some content the user expects to see specific to that nav link, and hides any other content that may be visible from a previous click.

Related

Open and scroll to tab from url hash (JS/Jquery/Bootstrap)

So I have a comment system with one deep nesting. I'm using bootstraps javascript file, but only the collapse and animate css styling. So I don't use nav-tab and such
A button exists on all comments that have a reply. The number 1 refers to the ID of the parent (replies of comment with the id of 1).
<a class="btn" type="button" data-toggle="collapse" href="#replies_1">X replies</a>
Then I have a div, that is the container for all children of the parent comment
<div class="collapse" id="replies_1">
When I click on the anchor, as you would guess, this div gets appended the class in and transitions nicely to open and show the comments children.
I have tried one thing that worked, except for the scrolling part
$(document).ready(function(){
if(window.location.hash != "") {
$('a[href="' + window.location.hash + '"]').click();
}
});
This opens up the correct tab, which is great. However, since the tab has the class collapse which has the css rule display:none; and adds the inline rule display: none;
Now, my script doesn't manage to scroll to the correct location, because the collapsed element has those rules.
Though, I don't really need to scroll to the replies, but the parent.
So what I really need is to scroll to another anchor id that has the same suffix ID, but a different prefix, but still open the replies tab as I do with the code above
Since the children are inside a tab with an id of replies_{id}, I could scroll to the parent which is a ul item with the id of comment_{id}
The ul looks like this: <ul class="comment__item" id="comment_{id}">
Try this way,
$(document).ready(function(){
if(window.location.hash != "") {
var end_id = window.location.hash.split('__')[1];
$("html,body").animate({scrollTop: $("[id$='__"+ end_id +"'").offset().top},"slow");
}
});
I think this will work, If I understood your question correctly.
Actually you can get the hashtag from that url and find the id from your hash #replies__{id} then collect that {id} from it and prefix the required text of another id #comment__{id} so you are ready to perform the same.
for example
//consider this event after hash is collected
hashValue = "replies__1232" //assuming the default value
oldId = hashValue.split("__")[1] // collect id
//now append id to required prefix
$("#comment__" + oldId).click(function(){
//required stuff here
}) ;

Changing :before sign when slidedown Bootstrap

I have navbar from bootstrap in sidebar and I want to change :before sign on click on element in my menu. But I have problem... It's looks like:
But I want to change "+" sign to "-" after click. It should looks like it:
This menu have 2depth. U can see it how it works on port.cruzzapps.com
It's my JS, but this code not working propely:
$(document).ready(function(){
$(".collapse li a").click(function(event){
$('.collapse li a').removeClass();
$(this).addClass('minus');
event.preventDefault();
});
});
Let's change your code to this:
$(document).ready(function(){
$("li a").click(function(event){
$(this).toggleClass('collapse');
$(this).toggleClass('minus');
event.preventDefault();
});
});
I'm using toggleClass so that way when you click it again, the original class is added back and the new class is removed. What this code does is when an anchor tag in a list is clicked, it loses it's collapse class and gains a minus class. When it is clicked again, it loses it's minus class and gains the collapse class. If you've set up your CSS properly this will give you the effect you want.
Note I also changed your selector inside the click handler to not select every .collapse li a as that was changing all of the elements rather than just the one you wanted.

I'm having difficulty appending a class

I originally couldn't think of a way to append an additional class to an li element which had a class that other li elements had. I wanted to only add a class to that specific li element that I clicked a select button on and the solution was "On the click of the button, you can use .closest() to find the ancestor li element". The solution was a jquery solution and it works fine but now I'm having an additional problem. First, here's what I originally posted and the solution I was given along with the fiddle and then I will explain what my new problem is and would appreciate the help. So my original post:
"Ok so my script allows me to input text in a textarea element and add it to a li element within an ordered list with the id "Glist". Not only is text added to each li I add to the ordered list, but the additional things below are added as well and they all just display additional images using CSS. One of the classes, "Selimg" displays a sprite image of a button that says "select". Now each li element I add to my ol has all of the elements below as well as the classes. So each li element will have a div with a "Selimg" class that displays an image of a button that says select for example. When I click this div with the class Selimg, a new class named "Selected" will be added to the div which will change the background color of the li to indicate that it has been selected. The problem is, I want to only add the "Selected" class to the div with the Selimg class that I've clicked, not all li elements with "Selimg" classes. How can I do that with an onclick event handler or any other way using js or jquery? Here's the html:
<ol id="GList">
<li class="MyList">
<p class="bulletp"></p>
<!--This Selimg class displays an image of a button that says select-->
<div class="Selimg"></div>
<!--When a user presses this select button, I want to append a class only to the specific li element the user has pressed the select button on. -->
<div class="edit1"></div>
<div class="Del"></div>
<div class="progress"></div>
<div class="ShowMore"></div>
<div class="CheckedGoal"></div>
<div class="PCompetePercent"></div>
<div class="ShowMoreBlock"></div>
<div class="goalTxt"></div>
</li>
</ol>
The solution I was given:
"On the click of the button, you can use .closest() to find the ancestor li element"
$('.Selimg').click( function() {
$(this).closest('li').addClass('someclasss')
//or $(this).parent().addClass('someclasss') since the li is the parent of the button
})
here's the fiddle demonstrating the solution: http://jsfiddle.net/arunpjohny/fSMDv/2/
And now for the new issue. For some reason, the jquery solution was not working on it's own. Somehow, the jquery code above only worked when I placed it into a js function like this:
<script>
function runSel() {
var $li = $('.Selimg').closest('li').addClass('liselected');
$li.siblings().removeClass('liselected');
}
</script>
I also have a function that's called whenever I want to add another item to the list.
//This is only the part of the code that creates the div that I style to look like and be used as a button that says select. There's more code that also creates the li element itself and a few additional things but all for design. Nothing important.
var Selimg = document.createElement('div');
Selimg.setAttribute("class", "Selimg");
Selimg.setAttribute("onclick", "runSel();");
entry.appendChild(Selimg);
What this does is, create the div with the class "Selimg" which will be an image of a select button added to my list item and then it's given the onclick attribute that calls the runSel() function above as you can see. It works. However it only works once. The fiddle example demonstrates what I'm looking for. So now, when I add an item to the list, and click the select button on it, the function "runSel" is called which adds a class called "liselected" and liselected just changes the background color because the rules for each property in the css, have "!important" so the background color overrides the current one. It works, but like I said it only works once. After I add another item, and press the Select button on that one (which is made from the styles from the Selimg class), the liselected class is removed from the other li element yet the second li element that I just clicked the select button on, only causes the liselected class to be removed from the first but it's not added after that to the second li item, the current one. So, when i add multiple li, they will contain things like text and a div styled to look like a button that says "select" and so when I click "select" on an li, I want then for that specific li to have the liselected class appended and when I select the "select" button on another li, I want the class liselected to be removed from the other li element it was on and added to that one.
The jQuery solution will work fine... the problem is you are dealing with dynamically created elements... so need to use event delegation
$(document).on('click', '.Selimg', function() {
$(this).closest('li').addClass('someclasss')
//or $(this).parent().addClass('someclasss') since the li is the parent of the button
})
Also from what I understand you have not added the script in a dom ready handler
Demo: Fiddle
Not sure why you have written a book for such a small issue. I mean, I got tired of reading what you wrote after the first 30 lines of not getting to the point of the question.
Use: $(this).parent('li').addClass("...") instead.
jsFiddle

select a parent with jQuery

Hello I have some HTML that looks like this,
<div id="music_interests">
<ul class="interests">
<li >
<div class="interest inline">
<img src=""/>
<div class="interest_popup">
1 users have this interest.
Remove interest </div>
</div>
</li>
</ul>
When users clicks the remove button I need to select the parent div (in this case music_interests). How would I go about that?
I have tried doing the following,
$(this).parent().parent().parent().parent() but is there a more elegant way?
To complicate things futher I will not actually no the parents ID when in the app as the remove button occurs in 4 or 5 different areas on the page.
you should use closest()
$(this).closest('div#music_interests');
//find the nearest div with id "music_interests"
//if i omitted the id, it retrieves the div with class "interest_popup"
or parents()
$(this).parents('div:eq(1)');
//get ALL the ancestor divs (until it reaches root tag)
//since music_interests is just 2 levels up, use :eq(1)
If the ID of the DIV you want to remove is static you should only use the ID selector (not something like $("div#music_interests")) as the ID selector is directly mapped to the DOM function document.getElementsById which is pretty fast:
$("#music_interests").remove();
If the ID isn't static you could get the UL just like that:
$(function(){ //execute when page has been loaded
$(".remove").click(function(){ //attach click handler
var removeDiv = $(this).closest("ul").parent().remove(); //get next UL -> DIV is its parent
return false; //stop further processing of "click" event
});
});
if remove button always exist in ul tag (in all your 4 or 5 different areas) then you can use the following code.
$(this).closest("ul").parent()
in this case u don't even need to give id to DIV tags

JQuery: Making a tab active

Given this website: link text
How would one find an element and remove any class=selected and add it to the correct link?
That way when history, models, and the like links will look become selected when clicked upon.
The following code should do the trick in your case..
// when clicking a link inside the sub-navigation list
$('#sub-navigation a').click(function(){
// first remove the selected class from the active one
$('#sub-navigation li.selected').removeClass('selected');
// then find the parent li of the clicked element and add the selected class
$(this).parents('li').addClass('selected');
});
(it is tested on your example page and it works as expected..)
$("a").click(function(e) {
$("a.selected").removeClass("selected");
$(this).addClass("selected");
});

Categories

Resources