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
}) ;
Related
I am using a database to create divs and then naming them from a field in a database.
Within this div is a "delete" link that I'd like to be able to create a div below the original div with a message such as "are you sure you want to delete this?"
But my issue comes to when the database has to generate more than one of these original divs, meaning that the "delete" link will be used more than once in different places or the different divs.
I am unsure on how to create a Javascript/jQuery script where it would:
1. check what the ID of the parent div is (div#parent -> ul -> li -> a).
2. generate a new div below the parent div (not inside).
3. once an option is selected, remove the generated div.
Heres an example of the layout that I'd like to work with:
link to image
As you can see, the generated jQuery div would be outside of the parent div it also has the id of the parent div with "_delete" added onto the end. The functions are there as an example for naming the functions...
Would this be possible?
EDIT - I have gotten it somewhat working, now the issue is when it creates the extra div it doesn't stop you from making more than one... How can I limit this?
What I have done so far
function action() {
var visable = false;
if(visable==false) {
$("#foo").append('
<div id="action_foo" class="action-warn center">
Are you sure you want to delete "<span>foo</span>"?
Yes / No
</div>
')
visable = true;
} else if(visable==true) {}
}
Yes it is possible.
$('#foo_delete').sibling('#parent') will allow you to select "parent".
http://api.jquery.com/siblings/
Try using insertAfter.
http://api.jquery.com/insertafter/
You can remove generated div also with sibling.
Try calling $('#parent').sibling('#foo_delete').remove() on parent's delete anchor.
Try this:
$(document).ready(function(){
$('#foo ul li.right').click(function(){
var _parent = $(this).parent(), // gets immediate parent which is ul
_gparent = _parent.parent(); // gets grandparent which is #foo
$('<div id="foo_delete" class="action-warn center">-Delete Warning Text-</div>').insertAfter(_gparent); // insertAfter(); puts the content right after _gparent.
});
$('#foo_delete a').click(function(){
$('#foo_delete').remove();
});
});
I am in the lookout for a script that can show one DIV at a time and Hide the rest (2 in the example I took)additionally I want the user to navigate back and forth
i.e
Once the user clicks next DIV 1 is displayed so on till DIV3
He should also be able to traverse from DIV2 - DIV1 and so on
I did find this development interesting
http://jsfiddle.net/meetrk85/Y7mfF/
Thanks a billion in advance.....
Given the following HTML:
<div class="sample">div1</div>
<div class="sample">div2</div>
<div class="sample">div3</div>
next
prev
The following jQuery seems to achieve your requirements:
// selects all the divs of class='sample',hides them, finds the first, and shows it
$('div.sample').hide().first().show();
// binds a click event-handler to a elements whose class='display'
$('a.display').on('click', function(e) {
// prevents the default action of the link
e.preventDefault();
// assigns the currently visible div.sample element to a variable
var that = $('div.sample:visible'),
// assigns the text of the clicked-link to a variable for comparison purposes
t = $(this).text();
// checks if it was the 'next' link, and ensures there's a div to show after the currently-shown one
if (t == 'next' && that.next('div.sample').length > 0) {
// hides all the div.sample elements
$('div.sample').hide();
// shows the 'next'
that.next('div.sample').show()
}
// exactly the same as above, but checking that it's the 'prev' link
// and that there's a div 'before' the currently-shown element.
else if (t == 'prev' && that.prev('div.sample').length > 0) {
$('div.sample').hide();
that.hide().prev('div.sample').show()
}
});
JS Fiddle demo.
References:
first().
hide().
next().
on().
prev().
show().
text().
:visible selector.
Addenda:
A quick explanation of why I changed the html in the linked demo:
<div name="sample">div1</div>
<div name="sample">div2</div>
<div name="sample">div3</div>
<a href="#" id="display" value="display">next</div>
<a href="#" id="display1" value="display">prev</div>
The name attribute, in a div serves no purpose. Certainly not if all the elements are sharing the same name (they're not input elements, they're linked-to by an a, so use a class name).
The value attribute has no association with an a element, and serves, so far as I can tell, no purpose. For this, in the script above, I chose, again, to use a class name, since the same 'value' of the attribute was shared, though a data-* attribute could have been used, and would have been valid.
The closing </div> tags weren't closing anything, so they were changed to </a>.
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
My navigation menu on header looks like this:
<ul id="nav">
<li id="home">
<a class="mainmenu" href="#">Link1</a>
</li>
<li>
<a class="mainmenu" href="#">Link2</a>
</li>
</ul>
and the same markup is used for the footer section and it's not working.
I have also a file called jscript.js which contains all the javascript for the website,
and I found this variable:
var navTarget = "ul#nav li a" //menu link to target
Also, if I remove for example the markup in the header sections the footer will work.
I've tried also to use .nav instead of #nav and I have the same problem.
The navigation menu is controlled by javascript, I don't post the code here because it's huge, for better understanding of how the navigation menu works look here
I've found this in the javascript:
//SET MENU ITEM IDs
$(navTarget).each(function(i){
i++
this.id = this.id +"_" +i ;
});
//MENU CLICK FUNCTION
$(navTarget).click(function() {
//ensure link isnt clickable when active
if ($(this).hasClass('active')) return false;
//get id of clicked item
activeNavItem = $(this).attr('id');
//call the page switch function
switchContent();
});
//CONTENT SWTICH FUNCTION
var switchContent = function (){
//set previous and next link & page ids
var PrevLink = $(navTarget+'.active')
$(PrevLink).removeClass('active');
var PrevId = $(PrevLink).attr('id');
//alert(PrevId)
var NextLink = $('#'+activeNavItem).addClass('active');
var NextId = activeNavItem
//alert(NextId);
From the looks of it, the JS code is using some CSS selector (like jquery's $ or dojo's dojo.query) that pulls in the DOM element target based on the value of navTarget, and then does something with it: turns it into a menu.
But its only doing it once.
You need to look at the JS and see where navTarget is used. Then it should be fairly easy to make it do the menu creation on all the results of $(navTarget) instead of just the first hit.
Also, you should only have on instance of an ID in your dom.
You can change this to a class instead:
var navTarget = "ul.nav li a"
And in the markup:
<div class='nav'>
But you will still have to look at the JS and make sure it functions against a set of targets returned by the CSS selector. That code is probably expecting just a single result and using just it: results[0].
You can only have one element of a given id on the page. So based on your description, it sounds like you have 2.
I don't know exactly how this script works, but you can try using classes instead.
<ul class="nav">
var navTarget = "ul.nav li a";
You would have to change your HTML and the JS navTarget selector string.
But there is also a good chance that your script may not support creating multiple menus at all. And if thats the case, you may need to fix that script or find a better one.
If the code for the footer really is identical to the header, that's the problem. An id should only be used for a single element in a page, and jQuery's selectors will only return the first. Meaning code like "ul#nav li a" only works on the header.
Easiest solution is to change the id's to classes, e.g.:
<ul class="nav">
... and change your jQuery to match that, e.g.:
var navTarget = "ul.nav li a";
Update: And (ignoring that this may end up turning into three duplicate posts), that fix is probably not enough at all, since other parts of the script may only work with a single menu.
I have a script which hides (display:none) certain divs in the list on page load. Div contents represents description of a book, and the whole list is some sort of bibliography. Every div has an id, for example, "div1", "div2" etc.
<ul>
<li><div class="hidden" id="div1"></li>
<li><div class="hidden" id="div1"></li>
...
</ul>
And there's another page with a menu, which consists of anchored links to every such a div:
<ul>
<li><a href="bibl.html#div1"></li>
<li><a href="bibl.html#div2"></li>
...
</ul>
I want the hidden div to autoexpand when the link on another page is clicked. I tried some window.location.href stuff, but to no avail - my JS is weak yet. As I understand the logic it should take the current url and check it for "#", then search for an element with the part to the right in the id attribute. Thanks a lot kind people.)
You can do something like this on the target page:
window.onload = function() {
var hash = window.location.hash; // would be "#div1" or something
if(hash != "") {
var id = hash.substr(1); // get rid of #
document.getElementById(id).style.display = 'block';
}
};
Essentially, you check on the page load whether the window's href has a hash attached to it. If it does, you find the <div> and change the style display to block.
Thank you! I figured out you can add this
location.href = '#' + id;
and also have the page scrolled to the position of the referred div.
You can use the window.location.hash to see the hash value.
From there you can getElementById(hashValue) and show it.