JQuery why does .offset() not return value? - javascript

Hi i get a JS error in my browser inspector. But i dont understand whats wrong with my Jquery code. And why he consider this variable as undefined ... Could someone help me ?
The code works well; but i would prefer to remove the error:
Uncaught TypeError: varposlist is undefined
This is my js code:
$(function(){
var pane = $('.scroll-pane');
pane.jScrollPane({
});
var api = pane.data('jsp');
if(typeof localStorage!='undefined') {
//Get var from local storage
var menu = sessionStorage.getItem("menu");
var yposistock_rule = sessionStorage.getItem("yposistock_rule");
//Check menu view mode
if(menu == "arbo") {
// defined top from a#on anchor
var varposchapter = $('a#on_menuchapter').offset();
//add - 285 to put at same level than title
var vartop1 = varposchapter.top -285 -yposistock_rule;
if(scrollauto_rule == "oui") {
sessionStorage.removeItem("yposistock_rule");
};
api.scrollTo(0, vartop1);
return false;
}
else{
// defined top from a#on anchor
var varposlist = $('a#on_menulist').offset();
//add - 285 to put at same level than title
var vartop2 = varposlist.top -285 -yposistock_rule;
if(scrollauto_rule == "oui") {
sessionStorage.removeItem("yposistock_rule");
};
api.scrollTo(0, vartop2);
return false;
}
}
});
Any idea ? Thanks a lot.

The only thing I can think of is this line:
$('a#on_menulist').offset();
The # selects the element with the same ID. Unless you have an element with id=on_menulist, this code cannot find the id which then cannot find the offset.

Related

Search content inside iframe using indexOf

Basicly im trying to find certain text inside iframe, i get no errors in console, i have no clue what im doing wrong in here. Im trying to use indexOf because if Im not searching inside iframe it works good. I tried to addapt using this post here -> How to get the body's content of an iframe in Javascript? but keeps not working. Can someone give me and hand?
setTimeout(function() {
var iframe = document.getElementById('aspxcontent');
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
var iframeContent = iframeDocument.getElementById('DialogMainBody');
[].slice.call(document.querySelectorAll('pre'), 0).forEach(function(aEl) {
if (aEl[iframeContent].indexOf('update') > -1) {
console.log("found");
}else{
console.log("not found");
}
});
}, 5000);
edit 1
var x = document.getElementsByTagName("iframe")[0].contentWindow;
//x = window.frames[0];
x.document.getElementsByTagName("body")[0].style.backgroundColor = "blue";
// this would turn the 1st iframe in document blue.

multiple javascript function in $(document).ready not working

I'm using several functions in the $(document).ready(function(){ part of the page.
The old functions (highlighted below) worked fine until I added the new one (added at the top). Since then they do not work anymore.
After some testing I realized that if I switched position between the old and the new functions, only the one placed at the top will work.
I'm using the new function on a different page than the old ones but both are included in my javascript file and in the footer.
home.js :
$(document).ready(function(){
// NEW FUNCTION (up/down arrows)
var nextListitem;
var noOfListItems = $("#select > option").length-1;
var curListItem = $("#select")[0].selectedIndex;
$("#upArrow").on("click", function(){
// Decrement the selection by one, unless that will be less than zero, then go to the last option
nextListitem = (curListItem-1 < 0) ? noOfListItems : curListItem-1;
curListItem = nextListitem;
$("#select")[0].selectedIndex = nextListitem;
});
// OLD FUNCTIONS (count characters left in textarea)
window.com_domain = window.com_domain || {};
$(':text,#resort_description').click(function(){
current_input_val = $(this).val();
$(this).select();
}).focusout(function(){
if ($(this).val() == '') {
$(this).val(current_input_val);
}
});
// more old functions
});
TypeError: $(...)[0] is undefined
var curListItem = $("#select")[0].selectedIndex;
Is displayed if I load the page using the "old functions".
This is how my footer looks like (Jquery is called before) :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="js/bootstrap-hover-dropdown.min.js'>"></script>
<script src="js/home.js" type="text/javascript"></script>
If there's no element with id="select" on the page, $("#select") will be an empty collection, so $("#select")[0] will be undefined. You can't access undefined.selectedIndex, so you get an error at that line and nothing after it runs. It has nothing to do with having multiple functions in the ready block.
You should check whether the element exists first.
if ($("#select").length > 0) {
var nextListitem;
var noOfListItems = $("#select > option").length-1;
var curListItem = $("#select")[0].selectedIndex;
$("#upArrow").on("click", function(){
// Decrement the selection by one, unless that will be less than zero, then go to the last option
nextListitem = (curListItem-1 < 0) ? noOfListItems : curListItem-1;
curListItem = nextListitem;
$("#select")[0].selectedIndex = nextListitem;
});
}
First of all I think that you have a mistke on your import of the the bootstarp minified js file
script src="js/bootstrap-hover-dropdown.min.js"></script>

Foundation Cannot read property 'bg_class' of undefined

I am experimenting with javascript Modules. I can manage to retrieve modal content and display this in a reveal modal but when I want to close the modal I get a javascript error message and the modal does not close.
Here is the javascript code:
var Order = (function (window, document, $){
var Order = function(_id){
this.id = _id;
};
Order.prototype = {
id:null,
constructor: Order,
test: function(){
alert(this.id);
},
displayOrder: function(){
$.get("/orders/dialog_vieworder/"+this.id, function(data){
var modal = $("#content").append('<div data-reveal />').attr('class', 'reveal-modal').html(data);
modal.foundation('reveal', 'open');
});
}
};
return Order;
})(window, document, jQuery);
$(function(){
o1 = new Order(60000);
o1.displayOrder();
});
Here is the error message:
Uncaught TypeError: Cannot read property 'bg_class' of undefined
Help is very much appreciated
Either upgrade your foundation version, or change this...
If you have foundation.reveal.js
find this line
var settings = $('[data-reveal].open').data('reveal-init'),
bg_clicked = $(e.target)[0] === $('.' + settings.bg_class)[0];
and change the second line to this
bg_clicked = $(e.target)[0] === $('.' + ( settings ? settings.bg_class : null))[0];
If you have a minified version then do a search for bg_class
There should only be two. Find the line that will somewhat resemble this
i=e(t.target)[0]===e("." + r.bg_class)[0];
Then change it to this
i=e(t.target)[0]===e("." + (r?r.bg_class:null))[0];
You should be good to go.
Here is the issue on github
Foundation Github bug

How to record the 301 Redirects URL?

I enter to browser this link
https://google.com.vn;
Google redirect to https://www.google.com.vn;
I want alert full url redirect.
I used this code:
processNewURL: function(aURI) {
var tabIndex = gBrowser.tabContainer.selectedIndex;
var referredFromURI = gBrowser.tabContainer.childNodes[tabIndex].linkedBrowser.webNavigation.referringURI.spec;
alert(referredFromURI);
},
But it always alert https://www.google.com.vn,
and I tested with some short link example bit.ly/R9j52J . It isn't ok.
Please help me.
this works, i also show 2 methods to get to webNavigation. the second method is just longed winded way to teach other stuff, recommended way is method 1.
var processNewURL = function(e) {
console.log('e:', e);
var win = e.originalTarget.defaultView;
//start - method 1 to get to webNav:
var webNav = win.QueryInterface(Ci.nsIInterfaceRequestor)
.getInterface(Ci.nsIWebNavigation);
var referredFromURI = webNav.referringURI;
//end - method 1
//start - method 2 long winded way:
/*
var domWin = win.QueryInterface(Ci.nsIInterfaceRequestor)
.getInterface(Ci.nsIWebNavigation)
.QueryInterface(Ci.nsIDocShellTreeItem)
.rootTreeItem
.QueryInterface(Ci.nsIInterfaceRequestor)
.getInterface(Ci.nsIDOMWindow);
var tab = domWin.gBrowser._getTabForContentWindow(win);
//console.log('tab:', tab);
var referredFromURI = tab.linkedBrowser.webNavigation.referringURI;
*/
//end - method 2
if (referredFromURI != null) {
win.alert('referred from:' + referredFromURI.spec);
} else {
win.alert('not redirected');
}
}
gBrowser.addEventListener('DOMContentLoaded', processNewURL, false);

Jscrollpane and internal anchor links

I am using Jscrollpane and everything works great, except when I try to use it with an internal anchor.
It should work like the example on the official page.
But in my example it really destroys my site. The whole content is floating upwards and I can't figure it out myself.
Here is my page: http://kunden.kunstrasen.at/htmltriest/index.php?site=dieanreise&user_lang=de
and if the inner anchor is clicked: http://kunden.kunstrasen.at/htmltriest/index.php?site=dieanreise&user_lang=de#westautobahn
Anybody a clou whats going on here?
Thanks for your help.
jspane does not work with old style anchors
e.g.
<a name="anchor"></a>
instead you have to write
<a id="anchor"></a>
additionaly you have to enable
hijackInternalLinks: true;
in jScrollPane settings Object.
The hijackInternalLinks also captures links from outside the scrollpane, if you only need internal links you can add this code, like hijackInternalLinks it binds the click funktion on the a elements and calls the scrollToElement with the target:
\$(document).ready(function() {
panes = \$(".scroll");
//hijackInternalLinks: true;
panes.jScrollPane({
});
panes.each(function(i,obj){
var pane = \$(obj);
var api = pane.data('jsp');
var links = pane.find("a");
links.bind('click', function() {
var uriParts = this.href.split('#');
if (uriParts.length == 2) {
var target = '#' + uriParts[1];
try{
api.scrollToElement(target, true);
}catch(e){
alert(e);
}
return false;
}
});
});
});
but note you will always have to use the id attribute on a tags.
If you are using tinymce you can repair the code with this function
function myCustomCleanup(type, value) {
switch (type) {
case "get_from_editor_dom":
var as = value.getElementsByTagName("a");
for(var i=0; i< as.length;i++){
if (as[i].hasAttribute('name')){
var name = as[i].getAttribute('name');
as[i].setAttribute('id',name);
}
}
break;
}
return value;
}

Categories