We Keep Coding

When adding D3 script to HTML file DOMException: Failed to execute 'querySelector' on 'Document': '[object Window]' is not a valid selector

I'm using a free HTML template for my site, and when I add the D3 script, the page never loads and I get the above error. I have tried adding the script as well as downloading the code and referencing it locally. Once I remove or comment out D3, the page loads perfectly.
Any help would really be appreciated.
Here is the code from the index file starting at the line referenced by the error.
// Everything is loaded including images.
$(window).on("load", function(){
// Render the page on modern browser only.
if(renderPage) {
// Remove loader
$('body').addClass('loaded');
// Page transition
var allPages = $(".tm-section");
// Handle click of "Continue", which changes to next page
// The link contains data-nav-link attribute, which holds the nav item ID
// Nav item ID is then used to access and trigger click on the corresponding nav item
var linkToAnotherPage = $("a.tm-btn[data-nav-link]");
if(linkToAnotherPage != null) {
linkToAnotherPage.on("click", function(){
var navItemToHighlight = linkToAnotherPage.data("navLink");
$("a" + navItemToHighlight).click();
});
}
// Hide all pages
allPages.hide();
$("#tm-section-1").fadeIn();
// Set up background first page
var bgImg = $("#tmNavLink1").data("bgImg");
$.backstretch("img/" + bgImg, {fade: 500});
// Setup Carousel, Nav, and Nav Toggle
setupCarousel();
setupNav();
setupNavToggle();
setupFooter();
// Resize Carousel upon window resize
$(window).resize(function() {
setupCarousel();
setupFooter();
});
}
});
</script>

jquery div element hover changes txt element in div

The website I'm building using webflow is my first delve into jquery (or j anything). I'm not a dev in any language but typically can get things to work with enough research.... not this time :)
My team collection page has a button made from a div ('.DivTeamBtn') with text ('.TxtTeamBtn')
When the button is clicked the team members description changes between 2 div blocks:
('.Div Flex Center.TeamFun') when display: none - on ('.DivTeamBtn')hover ('.TxtTeamBtn).text(hSudo)
('.Div Flex Center.TeamActual') when display: none - on ('.DivTeamBtn')hover ('.TxtTeamBtn).text(hFact)
What I am trying to accomplish is: mouse hover ('.DivTeamBtn') changes ('.TxtTeamBtn') text based on which div block display property is 'none'.
For now I'm just trying to get on hover to work via jquery. This is what I have... and nothing is working (that I can see).
Webflow read only link This is on the teams collection page
<script>
Webflow.push(function() {
// Hover text change
$( function() {
var nh = 'Click Me!';
var hSudo = 'For sudo facts';
var hFact = 'For facts';
$('.DivTeamBtn').hover(function(){
$('.TxtTeamBtn').text(hfun);
}, function() {
$('.TxtTeamBtn').text(nh);
});
});
</script>

How to load inner html of div from another page?

I'm currently working on a website where the navigation bar links would seamlessly lead to another page with fading transitions without loading.
When the links are clicked, the div#page block, which has the main page content and the footer, would fade out, empty itself, and fade back in with the content of the href of the clicked link. However, my current code, seen below, placing the html of the entire page (including the head contents) on div#page instead of just the inner HTML of div#page.
$("#header .menu a, #header .logo").click(function() {
var href = $(this).attr("href");
var title = $(this).attr("title");
history.pushState(null, title, href);
$("#page").fadeOut("slow", function() {
$("#page").delay(1000).empty();
});
$("#page").load(href + "#page", function() {
$("#page").fadeIn();
});
return false;
});

From the docs
The .load() method, unlike $.get(), allows us to specify a portion of the remote document to be inserted. This is achieved with a special syntax for the url parameter. If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded.
So try adding a white-space like so
$("#page").load(href + " #page", function() { //White space before #page
$("#page").fadeIn();
});
PS: I have not tested this code.

Two options:
The recommended way would be to create an API that would return the
inner HTML only.
Parse the response like so (example):
var $dom = $('<div />');
$dom.html(response);
var $content = $dom.find('#id'); // #id is your inner content id
And now you should be able to insert the inner content using $content.html().

How can i improve my personnal jQuery Dialog plugin

I've been coding my own dialog system for exercising and to be able to customize it as i want. Here is what i've done.
$(function(){
$.fn.window = function(attr){
var $self = this;
if(!attr)
attr = {};
$.extend({
autoOpen:false
}, attr);
/**
* Create the window by updating the current jQuery block
* And adding the required classes
*/
this.create= function(){
// Already created
if($self.hasClass('window-window'))
return;
$self.addClass('window-window');
// Creating the header and appending the title
var $windowHeader = $('<div class="window-header"></div>');
var $title = $self.attr('title');
$windowHeader.html($title);
$windowHeader.append('<div class="loading-item loading-item-footer round-loading25" ' +
'data-loading-item="window" style="display:none"></div>');
// Wrapping content in a window-content class
// So the window has the proper format
$self.children().wrapAll('<div class="window-content"></div>');
$self.prepend($windowHeader);
};
/**
* Open the window in a blackish div
* With the events to close it
*/
this.open = function(){
// Creating the background
var $backgroundDiv = $('<div></div>');
$backgroundDiv.addClass('window-background');
// Making it take the size of the page
$backgroundDiv.height($(window).height());
$backgroundDiv.width($(window).width());
$self.detach().appendTo($backgroundDiv);
// The window is hidden by default, showing it
$self.show();
$('html').prepend($backgroundDiv);
// Handling closing the window
$backgroundDiv.click(function(e){
var $target = $(e.target);
if(!$target.hasClass('window-background'))
return;
$self.hide();
$self.detach().appendTo('html');
$backgroundDiv.remove();
});
};
this.create();
if(attr.autoOpen){
this.open();
}
};
});
For now i have doubt about the fact that i'm putting the window out of his native block, in the end of the html document. I wish to put it back to his position but i have no idea yet how to do it. Any idea ?

First of all, you create a jQuery function, but you do it on document.ready $(...). You should just create it, otherwise the function will not be available for other code until document has loaded.
Then you want to insert the window in the same place as the original element, for that you have insertBefore and insertAfter in jQuery. You use prepend, but that inserts it as the first element of $self.
I would urge you to look at the method chaining of jQuery which may make your code much more readable. Instead of:
// Creating the background
var $backgroundDiv = $('<div></div>');
$backgroundDiv.addClass('window-background');
// Making it take the size of the page
$backgroundDiv.height($(window).height());
$backgroundDiv.width($(window).width());
use
// Creating the background
var $backgroundDiv = $('<div></div>')
.addClass('window-background')
// Making it take the size of the page
.css({
height:$(window).height(),
width:$(window).width()
});
for example.
You also use CSS classes to store information, like if something had been clicked or not. That may be OK, but consider that you may want change the CSS classes and suddenly the functionality of your code is strongly linked to the design. Maybe using .data() instead would be better, even if you add more code to also style your elements.
You use .wrap to take the original content and put it in the window. That may be what you wanted all along, but also take a look at https://api.jquery.com/clone/ which allows you to get the elements without removing them from their original source. Again, only if it works better for you.
As a last advice, use http://jsfiddle.net to share your working code, so other people may not only comment on it, but see it in action as well.

Google related bar - how to keep from showing up on my website

A new "google related" bar shows up at the bottom of my website. It displays links to my competitors and other things like maps, etc. It is tied in with users using the google toolbar. If anyone has any ideas on how I can disable from displaying on my web side I would sure appreciate it.

Taken from http://harrybailey.com/2011/08/hide-google-related-bar-on-your-website-with-css/
Google inserts an iframe into your html with the class .grelated-iframe
So hiding it is as simple as including the following css:
iframe.grelated-iframe {
display: none;
}

Google removed div and frame names and put everything to important so original answer no longer works on my site. We need to wait for the iframe to be created and then hide it by classname. Couldn't get .delay to work, but this does...today anyway.
$(document).ready(function() {
setTimeout(function(){
$(‘.notranslate’).hide();},1000);
});

Following javascript code tries to find the google related iframe as soon as the window finishes loading. If found, it is made hidden, else an interval of one second is initialized, which checks for the specified iframe and makes it hidden as soon as it is found on page.
$(window).load(function (){
var giframe = null;
var giframecnt = 0;
var giframetmr = -1;
giframe = $("body > iframe.notranslate")[0];
if(giframe != null)
$(giframe).css("display", "none");
else
giframetmr = setInterval(function(){
giframe = $("body > iframe.notranslate")[0];
if(giframe != null) {
clearInterval(giframetmr);
$(giframe).css("display", "none");
} else if(giframecnt >= 20)
clearInterval(giframetmr);
else
giframecnt++;
}, 1000);});

Find the parent DIV element that contains the stuff in the bar. If it has an id or name attribute, and you can control the page CSS then simply add a rule for the element, i.e. if you see something like
<div id="footer-bar-div".....
then add a CSS rule
#footer-bar-div {display:none ! important}
This will not work if the bar is inside an iframe element, but even in that case you should be able to hide it using javascript, but you will need to find the name/id of the frame, i.e.:
var badFrame = document.getElementById('badFrameId').contentWindow;
badFrame.getElementById('footer-bar-div').style.display='none';
if the frame has a name, then instead you should access it with:
var badFrame = window.frames['badFrameName']
There is also a chance that the bar is generated on-the-fly using javascript. If it is added to the end of the page you can simply add a <noscript> tag at the end of your content - this will prevent the javascript from executing. This is an old trick so it might not always work.