Presently, I am using a script to show/hide comments on a number of WordPress-based sites. The script works as expected on essentially every site. However, I've run into an issue with a site using the Hero theme. On the index pages, the theme pulls the content from X number of posts. Unfortunately, this has the effect of calling the script multiple times and resulting in the first post getting X number of show/hide buttons and the other posts being unaffected.
I'm uncertain as to how to modify the script in order to target each of the comment sections individually. Naturally, the task would be easier if the theme author had not assigned all comment sections on index pages the same id (#commentBox). I've looked at limiting the scope of the script (i.e., to have each instance of the script affect only the post content within which it's contained) and changing the actual functionality of the script to account for the multiple comment sections. Unfortunately, I've not yet been able to get it working as intended.
Here is a link an index page displaying the issue: http://www.sitestyling.ca/abbyphotography/blog/. The first link (i.e., the one to the script) leads to a page which has the script implemented and functioning as expected.
Any help or suggestions would be greatly appreciated.
So to state the obvious here, having multiple elements with the same ID is very bad mojo. To whatever extent that you can control how these WP sites are loaded I would encourage you to work to modify the repeated injection of your script into the page since even after making a change, your script would be run repeatedly since you have multiple blocks defining document.ready functions. You could ameliorate that with a global to tell if your script had already fired but that's getting a bit hackish...
What I would suggest in principle is that you add logic to your script to do the following:
Find the offending duplicate ID items and rename them to something unique
Add a class that you can reference rather than an ID
Refactor your code to loop through the collection of items returned from the class selector
If really, really necessary you could also then have kept track of your renamed IDs, go retrieve them individually and reset them to the offending original duplicate ID name thus incriminating yourself for future page user
The first couple of points here could be done pretty simply with something like this:
var uniqueAppend = 1;
var tempName = 'commentBox';
while(jQuery("#commentBox").length > 0 ){
jQuery("#commentBox").attr('id',tempName + uniqueAppend++).addClass('commentContainer')
}
Now you can find all your comment DIVs at once with jQuery(".commentContainer") and then iterate through that collection to take whatever actions you need.
Related
The title is a bit vague as I couldn't think of a way to summarise this.
I have 3 django models. Let's call them root, branch leaf to make it easy. A root can have multiple branches and each branch can have multiple leaves.
In my template I am displaying buttons that are populated from the root objects. When a user clicks one of these buttons I would like to update the content of another element on the same page with all the branches that are children of that root. When a branch is clicked, i'd like to update another element with all the leaves. I'm assuming the process would be the same for the two updates.
I am pretty new to Django but not to programming and I can't seem to find a good explanation of how to detect which 'root' has been clicked and pass that back to django in order to populate the branch elements.
Can anyone offer some guidance? I probably don't need code, just more of an idea of what the workflow is. E.G use onclick to send the name of the clicked item to a javascript function, call out to a python function that gets all the branches, do some magic.......
Thanks
Mick
This is more of a JS thing than Django. There are two options, as far as I know, for the kind of dynamic content you want:
You can load the whole "tree" (all roots, branches and leaves) with the display style as none and then make change the appropiate ones to another value (block or inline) via javascript when a button is pressed. The onClick function would look something like this for a branch.
function displayBranch(branchId){
for(let branch of document.getElementsByClass("branch-class"){
branch.style.display = "none"
if(branch.id == branchId) branch.style.display = "block"
}
}
Or you can load none, but add endpoints to your Django API to send branches and leaves, then use AJAX calls to retrieve them on a button press. This one requires more code, so I won't include code, but assume that you know basic AJAX and how to create new endpoints in your app.
this is more a curiosity of mine, I don't know if it's something possible.
If I am inside a HTML page, is there a way to quickly determine if a CSS class is active inside that page?
I explain better, let's say I am inside a website with a list of different users and near their avatar I may have a green badge for online users, while others has grey badge.
If this list is really long, is there a way to programmatically (or at least quicker than scrolling and looking by myself) detect which users are online?
I thought they have a different active CSS class but I don't know how to look for it.
Thanks
NOTE: I know how to detect an element, but if there's a list of elements I need to know which of them has a particular class active
you can use (inspect) in chrome ctrl+shift+i in inspect element you can see which css is active or not right side
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
Placing the code below within your developer console should display the length of the existing classNames if they exist.
const classes = document.querySelectorAll(".className");
console.log(className.length);
You should then be able to navigate the classes for the relevant information by navigating the object trees returned for each object found by the querySelectorAll method.
But there may be times where this may not be the true count to the data set.
For example, if the data is dynamically loaded during page scrolling. You can then add an iterator loop to detect when you have reached the bottom of the page and push to the classes array.
I'm working on a project which involves creating a dynamic search bar which searches through a list of students and dynamically paginates the results (10 students per page):
https://github.com/KyleVassella/Dynamic-Paginated-Search/tree/page-button-animation-broken
I've succeeded in dynamically returning matched students and dynamically appending the correct number of page buttons based on the number of results.
My last requirement is include a simple animation when transitioning between pages. I'm stuck on this.
When you first load the page you'll find the search function works correctly - even clicking the pagination buttons animates like it should. But once you press one of the pagination buttons, the search function partially breaks (try searching something after you change pages). It still returns the correctly matched array of students (see the console.log and the appended page numbers), but some of the results seem to be invisible.
I believe the problem lies in my showArray2() function on line 50 (which contains my animation) or the fact that I called this function inside of a $(document).on(click) function on line 97 - not sure.
Perhaps I need to go about another way such as appending CSS classes - but I still can't figure out how to apply some sort of opacity change fadeout/fadein like I want with that method. Can you solve this using my current jQuery .animate() strategy and if not, what about a different way (CSS classes, etc)?
From a structural standpoint, I believe the issue has to do with you relying on a single allstudents students variable.
Each search needs to be treated as an independent collection, drawn from the true original set of all students.
That being said, I believe you are searching the entire collection when you're searching after paginating, but you need to reset the visibility state of the entire original collection of students upon the start of new search.
Your search is returning the correct results and writing them to the page, but they haven't had their visibility reset so that's why they're not showing up.
...also your git repo as it's currently structured doesn't work ;)
I need to store some dynamic variables in a Json file (i was told this would work) to be able to load them in multiple pages. Per example a customer should be able to select one thing in one page (a highlighted div) and then go to another page, select some items there and be able to go pack to the other page and that div is still selected. (Variables remembered) Now i tried to google and search here but found nothing matching my description. Please help me!
Try using localstorage, store selected values by user in localstorage and check this at page ready or load if it exists in loacalstorage show that value or div with highlight as per your functionality and if localstorage doesn't had a value then consider it as first time user come to this page.
but be careful using localstorage as you have to clear it when you done with it, it may cause memory leakage problem.
I have a chat app where it shows users who are online (username + profile pic). I have an ajax poll that basically checks to see which users are still online, and refreshes the list automatically. Also, the list is ordered based on last activity.
The way I've been doing it is:
Get list of current online users
Clear existing elements
Re-add them (will be ordered correctly since the returned list from step1 is ordered)
This works fine in Chrome, but I notice in Firefox that it is causing a "flickering" effect while the images get re-added.
What is the best way to do this? It seems overly difficult to create an algorithm check which elements exist, if they are in the right order and move them, etc. Thoughts?
How often do you poll to see if users are still online?
I think the best way may be to give the user records unique ids so you can then check the list of users that were online against the new list of users that are now online.
fade away the users that have left and fade in any that have logged on.
It will be a much more elegant solution and it solves the problem you are having.
Firstly, I would try to "cache" the images separately, using the "preload" technique. That's when you create an Image object and set it's src to the URL of the userpic. Then you store all those objects in a global array. This will prevent the browser from getting rid of the images when they are no longer on the screen, so that it will not have to load them again when you reload the list.
If that doesn't help, I would actually reuse the existing list elements. I would just go over the elements, one by one, and replace their content with the appropriate content from the list. If I run out of existing elements in the process, I add new ones. If any elements are left over when the list ends, I remove them. This is a bit more complex, but actually not as complex as it looks at first glance.