I am trying to build a script with javascript and jquery that has one element react when the mouse is hovered over another element. I've had some great help getting to this point but I think I'm messing something up here. I have it working in one direction but not the other. In the direction it is working, there is text inside an anchor element. In the direction it's not working there is an image inside the anchor. That may be messing me up, not sure. I've posted a simplified version of it all here: http://jsfiddle.net/vZAYY/14/
It seems like the javascript isn't finding the li element (it returns -1)
One other thing that is odd is that on the full site (which I'm running locally) neither works, though to build the js fiddle I just copied the code directly. It's on a site with drupal and there the script is returning -1 from hovers on both elements.
Any suggestions?
Your code is a bit of a mess but if something returns -1 it has to be the index() function. Can't say for sure but your problem could be here:
var x = $(this).parent().parent().parent("li").index();
$(".mainNavigation ul li:eq(" + x + ")").addClass("active");
I'm not sure parent().parent().parent('li').index() is the best idea. I mean, index() takes a context that you can specify. It's a good idea to cache your selectors beforehand.
In the second line instead of :eq I would use eq() which will be faster and more predictable.
Related
Code:
const elements = $(".container .element").first().nextAll().addBack();
Here's my HTML:
The code is supposed to grab the first element and all the content after it. Depending on the HTML, this could return at a lot of different things, including nothing if I have a typo in my jQuery code. If the code that follows doesn't function correctly, how do I see what's inside elements for troubleshooting purposes?
I tried logging elements.html(), but that only printed the contents of the first element.
I tried using the Firefox debugger on elements, but the object is very complex, contains a lot of irrelevant troubleshooting information, and I couldn't figure out how to find what the jQuery object actually represents.
The only way I could figure out my code was correct was by logging elements.text(). That printed the text inside every element, and by doing that, I knew I had grabbed each one. It didn't tell me I grabbed the BR tags, but the documentation for nextAll said it would, so the gave me another faith it was doing what I wanted (I don't like relying on faith). The other problem with this solution is that it's highly contextual and won't work in all situations. There won't always be text in the HTML.
I'm out of ideas. How do I see what's inside a jQuery object for troubleshooting purposes?
Use
console.log(elements.get())
The jQuery get() method with no arguments returns the contained DOM elements as an array.
I have a feeling what ever gave me problems that I tried to find a solution in this question - Can't trigger a jquery function with scroll on a particular div - might be responsible for scroll related issues here.
Short version: Can't get this, or anything similar, to work
$("#Container3").scrollTop(0);
Nothing happens really, no error in the console, no wierd behaviour, just seems to ignore the scrollTop(0) request.
Long version: I'm sorry but posting a code snippet isn't feasible as it's a complex app-like interface but I'll try to explain the issue to the best of my abilities:
Mobile responsive website that loads different interfaces depending on screen real-estate.
Smallest interface composed of 3 parts - navigation at the top, search at the bottom and content in the middle.
Content is mostly loaded during use and not at page load.
At the push of a button that re-loads the contents of a particular div I also need to scroll that div to the top for usability purposes.
While it doesn't seem to influence my problem (removing it doesn't solve the issue) I should disclose that I'm using hammer.js to simulate touch events as it might influence the solution.
The load is done outside the viewport so animations aren't needed but I'll take them as long as they get this to work.
This is what my jquery request looks like
$(document).on("click",".NavRowButton",function(event){
$("#Container3").scrollTop(0);
var $targetButtonId=$(event.target).attr("id");
$("#Content").load("/load/login/"+$targetButtonId+".php");
$("#DisplayContentName").html("<span class='NavColSpan'>"+$targetButtonId+"</span>");
$("#Container3").find(".WindowBorder").css("top","0");
});
#Container3 has the scroll bar and is the immediate parent of #Content.
This is a function I'm still building and is the solution for the problem I had before and also what I'm using now to help debugging this one:
document.addEventListener('scroll',function(event){
if(event.target.className==='Container'){
var $currentScroll=$(event.target).scrollTop();
console.log($currentScroll);
var $targetId=$(event.target).attr("id");
console.log($targetId);
}
},true);
Thanks in advance.
Edit: I just noticed that if I put a $(event.target).scrollTop(0); at the end of the scroll distance debugging function it actually resets the scroll so it seems that as long as the div is the event.target it works while from the outside as during the click function I might not selecting it appropriately.
Edit2: I just learned I can cache event.targets into variables and with a .get() inside the click function I'm sure I'm selecting the right element so it just leaves how the scrollTop(0) method works.
They now look like this(also had to add a condition to limit load events):
global variable:
$DivTestVar="";
click:
$(document).on("click",".NavRowButton",function(event){
var $targetButtonId=event.target.id;
if($targetButtonId != $("#DisplayContentName").html()){
$($DivTestVar).scrollTop(0);
console.log($($DivTestVar).get());
$("#Content").load("/load/login/"+$targetButtonId+".php");
$("#DisplayContentName").html($targetButtonId);
$("#Container3").find(".WindowBorder").css("top","0");
};
});
scroll debugging:
document.addEventListener('scroll',function(event){
if(event.target.className==='Container'){
$DivTestVar=event.target;
var $currentScroll=$($DivTestVar).scrollTop();
console.log($currentScroll);
var $targetId=event.target.id;
console.log($targetId);
}
},true);
If I click before scrolling the console.log($($DivTestVar).get()); returns empty but if at the first scroll it starts returning the correct DOM element. The scrollTop(0) is ignored anyway.
Edit3: I just want to leave a small update. I have since given up on the method I was trying to use here for something with a similar effect but not as user friendly as what I was trying to achieve. As such I no longer care about this personally but if you're reading this and have a similar problem I have come across this issue a couple more times to a smaller effect and I now think it's related to position:fixed; elements and how scrollTop() deals with that but I don't have the time to delve into it more so good luck and godspeed.
Did you try the pure JS version ?
document.getElementById('Container').scrollTop = 0
You have two possibilities, as far as I know.
1-Scroll the whole page until it reached the top of your #Content div position with jQuery.
2-Your #Content is inside a div with scroll, which scrollTop(0) will work for that (example: http://jsfiddle.net/zkp07abu/).
I am new to javascript and have problems placing this element.
I can open terminals and write to them no problem. However everytime I create one it is just appended to my body at the very end.
according to this example:
https://gist.github.com/steinwaywhw/9920493
I could set a parent during the open method but I use this and it just still appends to the end of the body.
This is the method I use:
term.open($("#myterm").find("div")[0])
I might be overlooking really simple but I cannot seem to find it :/
There is a bug with term.js and jquery selectors, please test with getElementById like :
<div id="term"></div>
term.open(document.getElementById("term"));
it work for me.
Pascal
function myfunction(id){
//code
$("#mydiv").hide();
};
But 'mydiv' is dynamically added , and the function is not working .
Since the part of the code you shared seems to be fine, I suspect that there is something else wrong with your code.
Try to debug it. It is not that hard and let's you figure out errors on your own much faster than looking at your code really hard.
First if would be good to know if you reach that line of code in question. You can open the developer console and add a breakpoint to the line in question, or you can add alert("this line is reached and executed") in your code, and then you will know if that line is reached and executed.
If you reached the line in question, it would be good to know things about what is happening there:
For example it would be good to know if $("#mydiv") matches anything. If you are afraid of the developer console, you can always try: alert($("#mydiv").length). If it's 0, there is nothing matched, if it's 1, you have matched an element that will be hidden if you call $("#mydiv").hide(). If it's 0, you haven't been able to match an element. That means that there is currently no elements in your DOM with the id of mydiv. It does not matter if it should have been added dinamically or should be there from the start, it's not there. You might have made a spelling mistake in the id.
Since you are matching something added dynamically by it's id, it is possible that you already have an element with the ID mydiv. If there is more elements with the same ID, only the first one will be matched! More than one elements with the same ID is not just bad practice, it's invalid, and will possibly lead to more bugs and headaches later.
If you are sure that you match the correct element and it's not hidden when you call $("#mydiv").hide(), than there is always ways to look for the problem: for example if you open the javascript developer console, the javascript errors will be listed there. Be sure to check them if they are related to this problem.
Happy bug hunting!
Make sure that you're calling $("#mydiv").hide(); after you've added #mydiv. The code itself will work absolutely fine, provided you've already added #mydiv.
I am struggling to get links to become clickable when using JavaScript innerhtml, or even jQuery html or append.
I have tried following this jquery .html() VS innerHTML() and asking a number of questions, but it seems all suggestions have no worked.
How can I put a link using this?
innerHTML("<a href='http://www.google.com'>google.com</a>");
and onclick
innerHTML("<a href='#' onclick='loadlink('http://www.google.com');'>google.com</a>");
I have tried to do it both ways, and it just is not working.
.html() is a utility function provided by jQuery, so if you are using a jQuery wrapper to set the value then you need to use it
var el = jQuery('#myelementid');
el.html("<a href='http://www.google.com'>google.com</a>");
.innerHTML is a property of the dom object, so if you have a dom element reference then you need to use it. Note: It is not a function it is a property
var el = document.getElementById('myelementid');
el.innerHTML = "<a href='http://www.google.com'>google.com</a>";
The issue was z-index it seems that you can't have a z-index:-1 as it will not allow you to click anything in that div, removing it fixed my issue, so the issue was not JavaScript at all but rather CSS. It is interesting and a good note, not to sometimes second-guess yourself when you know that your code is not wrong, but to strip it back and look at the CSS and other parts of your site.
It took three days for me to stop thinking about the JavaScript. How I came about this, was because iOS could not debug the issue; I went to Chrome and coded the part in question, and it worked fine, once I added the same styling and CSS it stopped working, removed a few divs and it worked again, so the only thing to look at was the css, i could not see anything wrong, but then I thought, wait a second what does z-index do? it moved the div in front of another div, -1 could mean that it is behind the body, and there for it can be seen, but not click.
It was the only thinking I could come up with and it fixed the issue.