Right now I'm trying to use JQuery to set text at the end of a products name for a website. But the issue is right now it's set up to run when the document is ready.
So for some reason when switching pages it's not refreshing the page just adding to the url and changing products which is fine, but my code doesn't work for the other pages.
Example:
https://www.example.com/category
to
https://www.example.com/category/?sort=featured&page=2
I know that my code isn't as efficient as it could be, and there's reused code. But right now I'm just trying to get it to work before cleaning it up further. I couldn't really find anything online that really worked other than doing a location.reload() when the page nav was pressed. Unfortunately that ended up creating an infinite loop on the page.
I'm not sure if I'm just not thinking of the correct way to go about this or if my code isn't working as intended. I don't get any errors in the console either.
What I've tried:
Creating a selector for the page navigation so when clicked it will run the same code again.
Tried using a listener to listen for the clicks.
Tried checking if the url has changed.
Tried to refresh the page after clicking on page navigation along with using a timeout to wait for the page to change then refresh.
Code:
script1 - Handles adding text to product titles
$(document).ready(function() {
var multiTitle = $(".card-title");
var prodTitle = $(".productView-title");
var array = [list of titles];
if (multiTitle.length > 0) {
for (var i = 0; i < multiTitle.length; i++) {
for (var j = 0; j < array.length; j++) {
if (multiTitle[i].innerText == array[j]) {
var text = document.createElement('span');
text.innerHTML = "<span>text</span></br>";
multiTitle[i].prepend(text);
}
}
}
}
if (prodTitle.length > 0) {
for (var j = 0; j < array.length; j++) {
if (prodTitle[0].innerText == array[j]) {
var text = document.createElement('span');
text.innerHTML = "<span>text</span></br>";
prodTitle[0].append(text);
}
}
}
});
script2 - should re-add text after titles when pages change
$(".pagination-list").click(function() {
$(window).bind('hashchange', function() {
var multiTitle = $(".card-title");\
var prodTitle = $(".productView-title");
var array = [list of titles];
if (multiTitle.length > 0) {
for (var i = 0; i < multiTitle.length; i++) {
for (var j = 0; j < array.length; j++) {
if (multiTitle[i].innerText == array[j]) {
var text = document.createElement('span');
text.innerHTML = "<span>text</span></br>";
multiTitle[i].prepend(text);
}
}
}
}
if (prodTitle.length > 0) {
for (var j = 0; j < array.length; j++) {
if (prodTitle[0].innerText == array[j]) {
var text = document.createElement('span');
text.innerHTML = "<span>text</span></br>";
prodTitle[0].append(text);
}
}
}
});
});
Related
I'm new to Javascript and I'm having problem with the tab links set on my webpage.
The links cycle trough and display the appropriate content, however, when it comes to adding the styling of the active button, on loading the page the underline shows correctly and clicking elsewhere keeps it in place, but if I click on the other links and then click elsewhere the styling disappear.
The full code is here https://codepen.io/Rei89/pen/VwBrJEr
this is the piece I'm having trouble with:
const tabsContainer = document.getElementById("links");
const tabs = tabsContainer.getElementsByClassName("tablinks");
for (let i = 0; i < tabs.length; i++) {
tabs[i].addEventListener("click", () => {
let current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
};
You can use other methods such as remove and add :D
const tabsContainer = document.getElementById("links");
const tabs = tabsContainer.getElementsByClassName("tablinks");
for (let i = 0; i < tabs.length; i++) {
tabs[i].addEventListener("click", () => {
let current = document.getElementsByClassName("active")[0];
current.classList.remove("active");
tabs[i].classList.add("active");
});
};
You can add and remove classes using javascript like this. Before adding 'active' class, remove that from all 'tablinks'.
const tabsContainer = document.getElementById("links");
const tabs = tabsContainer.getElementsByClassName("tablinks");
// Loop through the buttons and add the active class to the current/clicked button
for (let i = 0; i < tabs.length; i++) {
tabs[i].addEventListener("click", () => {
removeClasses();
tabs[i].classList.add("active");
});
};
var els = document.querySelectorAll('.tablinks')
function removeClasses() {
for (var i = 0; i < els.length; i++) {
els[i].classList.remove('active')
}
}
Here is my code.
var cSharpButtons = document.getElementsByClassName("csharpbutton");
var jSButtons = document.getElementsByClassName("jsbutton");
var cSharp = document.getElementsByClassName("csharp");
var jS = document.getElementsByClassName("js");
function switchToCSharp()
{
for (i = 0; i < cSharpButtons.length; i++) //change button colors
{
cSharpButtons[i].style.backgroundColor = "#00AEEF";
}
for (i = 0; i < jSButtons.length; i++)
{
jSButtons[i].style.backgroundColor = "lightgrey";
}
for (i = 0; i < cSharp.length; i++) //change code
{
cSharp[i].style.display = "inline";
}
for (i = 0; i < jS.length; i++)
{
jS[i].style.display = "none";
}
}
function switchToJS()
{
for (i = 0; i < jSButtons.length; i++) //change button colors
{
jSButtons[i].style.backgroundColor = "#00AEEF";
}
for (i = 0; i < cSharpButtons.length; i++)
{
cSharpButtons[i].style.backgroundColor = "lightgrey";
}
for (i = 0; i < cSharp.length; i++) //change code
{
cSharp[i].style.display = "none";
}
for (i = 0; i < jS.length; i++)
{
jS[i].style.display = "inline";
}
}
GoDaddy said the permission were fine. Works like a charm on my desktop, they said something must be wrong with my code. They said it could be an outdated way of coding it.
nothing happens when you press a button, to try it for yourself visit http://spacehelmetstudios.com/tutorials/unity2d/directionalgravity2d/directionalgravity2d.html and try to change it from C# to JS.
I'm not going to lie, I don't know very much about the server side of things.
Any ideas? Thanks.
I know this isn't an answer, but in developers console I don't see any JS file downloaded and i get a console error saying that your functions are not defined. Maybe you forgot to add your JS files in your <head> tag?
var _target=document.querySelectorAll('.post .content');
var isYT = /youtube|youtu.be/gi;
for (i = 0; i < _target.length; i++) {
var _tar = _target[i].children;
for (var j = 0; j < _tar.length; j++) {
var vidID;
if (_tar[j].tagName == "A") {
if (isYt.test(_tar[j].href) == true) {
_eles.push(_tar[j]);
}
}
if (_tar[j].tagName == "EMBED") {
if (isYt.test(_tar[j].src) == true) {
_eles.push(_tar[j]);
}
}
} //end for loop j
} //end for loop i
console.log(_eles);
The HTML looks sort of like this:
<div>
Video 1
Video 2
<embed src="www.youtube.com/v/239324"></embed>
</div>
<div>
Video 1
Video 2
<embed src="www.youtube.com/v/239324"></embed>
</div>
Though the returning array Object with my console logging is only showing one a element and one embed element. I have to continuously invoke this myself to get all the links and embeds to be placed into the array Object. Any one see any errors I've written, just been working on this issue for about 3 hours now and it is tiring me. Any help is greatly appreciated.
thank you
I have changed your code this way:
var _target = document.querySelectorAll("div");
var _eles = [];
var isYt=new RegExp("\youtube.com");
for (var i = 0; i < _target.length; i++) {
var _tar = _target[i].childNodes;
for (var j = 0; j < _tar.length; j++) {
var vidID;
if(_tar[j].nodeType != 1) continue;
if (_tar[j].tagName.toLowerCase() == "a") {
if (isYt.test(_tar[j].href)) {
_eles.push(_tar[j]);
}
}
if (_tar[j].tagName.toLowerCase() == "embed") {
if (isYt.test(_tar[j].src)) {
_eles.push(_tar[j]);
}
}
} //end for loop j
} //end for loop i
console.log(_eles);
and it works, check this DEMO
but my favorite way to do this is like this:
var _target = document.querySelectorAll("div>a, div>embed");
var _eles = [];
var isYt=new RegExp("\youtube.com");
for (var j = 0; j < _target.length; j++) {
var vidID;
if (_target[j].tagName.toLowerCase() == "a") {
if (isYt.test(_target[j].href)) {
_eles.push(_target[j]);
}
}
if (_target[j].tagName.toLowerCase() == "embed") {
if (isYt.test(_target[j].src)) {
_eles.push(_target[j]);
}
}
} //end for loop j
console.log(_eles);
for this check this one DEMO
and if your isYT regexp is just as simple as I have used in my answer instead of all these lines of code you can simply do:
var _eles = document.querySelectorAll("div>a[href*='youtube.com/'],"+
"div>embed[src*='youtube.com/']");
I have the following list hierarchy:
<ul id="ulid">
<li><a><div class="mydiv">content</div></a></li>
<li><a><div class="mydiv">content</div></a></li>
...
</ul>
I want to add some css rules to the div and this is what i've tried so far:
var myul = document.getElementById("ulid");
var myli = myul.getElementsByTagName("li");
for(var i = 0; i < myli.length; i++) {
//myli[i].parentNode.style.display = "none"; // that works
var links = myli[i].getElementsByTagName("a");
for(var ii = 0; ii < links.length; ii++) {
links[ii].parentNode.style.display = "none"; // doesnt work
}
}
I can hide the li items but cant do the same for a So i cant reach the div. What am i doing wrong here?
EDIT: getElementsByClassName seems not working in greasemonkey scripts as it simply works in Emmanuel N's fiddle.
Your code seems to work. Check out this Fiddle
var myul = document.getElementById("ulid");
var myli = myul.getElementsByTagName("li");
for(var i = 0; i < myli.length; i++)
{
var links = myli[i].getElementsByTagName("a");
for(var ii = 0; ii < links.length; ii++)
{
links[ii].parentNode.style.display = "none";
}
}
Your code actually does work, but I don't think it does what you're intending it to do. The last line: links[ii].parentNode.style.display = "none" will actually hide the parent node of the a tag (i.e. the li) tag, rather than the div. parentNode will go one level UP, not down.
Instead of trying to get myli[i].getElementsByTagName("a") and then working down to the div, why not myli[i].getElementsByTagName("div"), and then simply do:
var myul = document.getElementById("ulid");
var myli = myul.getElementsByTagName("li");
for(var i = 0; i < myli.length; i++) {
//myli[i].parentNode.style.display = "none"; // that works
var links = myli[i].getElementsByTagName("div");
for(var ii = 0; ii < links.length; ii++) {
links[ii].style.display = "none";
}
}
Of course, there are many more efficient ways to do it. You already have classnames on the divs, so
document.getElementsByClassName("mydiv");
would work just as well.
Or, if you use jQuery, you can do the same thing without having to iterate explicitly:
$("div.mydiv").css(etc.); // style this however you want
If you aren't opposed to using jQuery, the following would hide your divs for you.
$(document).ready(function () {
var myDivs = $('div.mydiv');
for(var eachDiv in myDivs) {
$(eachDiv).hide();
}
});
I need some help :). Im trying to build a Javascript that goes through a gridview on my page and for each row checks the hiddenvalue that is stored in a certain cell of that row. It should then check this against a filtervalue and if it doesnt match hide the row in question.
How can I do this?
While not the most elegant, this should get you started in the right direction:
<script type="text/javascript">
function HideEvenValueRows() {
var tGrid = document.getElementById('<%= GridView1.ClientID%>');
for (var i = 0; i < tGrid.rows.length; ++i) {
var inputs = tGrid.rows[i].getElementsByTagName("input");
for (var j = 0; j < inputs.length; ++j) {
if (inputs[j].type == "hidden") {
var k = inputs[j].value * 1;
if (k % 2 == 0) {
tGrid.rows[i].style.visibility = "collapse";
}
}
}
}
}
</script>