Div not reappearing using jQuery .show() after hiding with CSS - javascript

I am trying to make a div hide and then show itself when the page has fully loaded.
The div tag doesn't appear but then it also never loads and I can't figure out why.
Here is my code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('#home-pro-slider').show();
});
</script>
<div class="container nopadding">
<div class="row">
<div id="home-pro-slider" class="slider-pro bsnojs" style="display:none;">
</div>
</div>
</div>
My console shows:
Uncaught ReferenceError: $ is not defined
at (index):479
I believe this is caused by me not loading in jQuery before I run this snippet, but I have the reference in my header before this code runs as far as I am aware.
EDIT: Apologies, I made an error copying and pasting my code, the missing ')' is indeed there, I still have the issue.

Add a ) as error message clearly shows.
$(document).ready( function() {
$('#home-pro-slider').show();
})

You have a typo, missing a the ) of the ready function
$(document).ready( function() {
$('#home-pro-slider').show();
});

EDIT: I just read your edit and the problem you face is that jQuery is not initialized properly. You have to define your jQuery-Script-Tag first and then follow it up with other scripts like so:
<head>
.
css and meta info
.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="myScript.js"></script>
</head>
I also want to add that you should always separate your code. CSS belongs into a separate CSS-file and not inline. The javascript belongs into a separate file as well and the text/javascript or application/javascript-tags are deprecated and should be left out.
As you can see below: It does work but because the div was empty you could not see anything. If you somehow load your javascript before you initialize the div it might not be able to find it but with $(document).ready() this can't be the case.
$(document).ready( function() {
$('#home-pro-slider').show();
});
#home-pro-slider {
display: none;
background-color: red;
width: 30px;
height: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container nopadding">
<div class="row">
<div id="home-pro-slider" class="slider-pro bsnojs">
</div>
</div>
</div>

Missing close tag
$(document).ready( function() {
$('#home-pro-slider').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('#home-pro-slider').show();
});
</script>
<div class="container nopadding">
<div class="row">
<div id="home-pro-slider" class="slider-pro bsnojs" style="display:none;">
</div>
</div>
</div>

Related

error in printing the specific div

i'm trying to print a specified div or table and its works fine in a test file. but when i write the exact code snippet in my original page its saying that document.getElementById('printable') is returning null..
i know what that means..that its not finding the id of my element.
So then i searched and i write $(document).ready(); and that error stopped. But due to this the whole page is printed(not the specified one). i also tried to write the script after my 'printable' div but then it gives the same null error..
Can anyone help me please. it will be appreciated.
and please try to give an answer like the below syntax, i mean dont change the whole code just tell me what im i missing. Thanks
I just wanna know why its saying null even when i write the script after the printable div and if i add ready function why it prints the whole page?
<head>
<script>
function print(){
var org=document.body.innerHTML;
var spc=document.getElementById("printable").innerHTML;
document.body.innerHTML= spc;
window.print();
document.body.innerHTML= org;
}
</script>
</head>
<body>
<table id="printable">
<tr>Only this should be printed</tr>
</table>
<div id="print-btn">
<button onclick="print()">Print</button>
</div>
</body>
A better approach might be to use a css media selector to remove stuff you don't want printed. For example:
<head>
<style>
#media print {
#print-btn {
visibility: hidden;
}
}
</style>
</head>
<body>
<table id="printable">
<tr><td>Only this should be printed</td></tr>
</table>
<div id="print-btn">
<button onclick="javascript:window.print()">Print</button>
</div>
</body>
Then you can just print the page.
Also, from your example, it looks like you're redefining the window.print function with your own.
To clarify,
function print() {
...
is equivalent to
window.print = function() {
...
Use the media query #media print, add a class .printable to anything that should be printed and call javascript:window.print() with the button.
<head>
<style>
#media print {
.*{
display: none;
}
.printable {
display: block;
}
}
</style>
</head>
<body>
<table class="printable">
<tr><td>This should be printed</td></tr>
</table>
<p class="printable">So should this</p>
<p>But not this</p>
<div class="printable">
<p>And all</p>
<p>of this</p>
</div>
<div id="print-btn">
<button onclick="javascript:window.print()">Print</button>
</div>
<script>/* by the way, this is where javascript belongs */</script>
</body>
The page is rendered top to bottom by the browser. When your script runs the div doesn't exist yet. Either move your script to the bottom of the body tag or use an event listener to run your script once the page loads.
js:
function runScripts() {
// do your stuff
}
html:
<body onload="runScripts()">

Javascript isn't executing when including html-template

Since I started using a html-templatefile for my navbar elements I haven't got one of my scripts to execute(I can execute it via the console). I have experimented with on-load-functions but even that didn't seem to work. My problem is that I understand to little of the execution order and if I'm somehow blocking my script. I don't get any error messages either and when the html-template isn't used (ie - the navbar structure is included with everything else in the same html-file) the page loads as it should. So something there is messing it up. And I can call it from the console as well.
(I have tried a variety of ways but nothing have really worked, other than including the template in the document and that I would like to avoid. This setup is one of many). I hope someone can see the errors I do on the spot. I have cut out som css aswell, for readability.
Edit: Threw js out the window, since ASP was found available. Solved it in about half an hour using asp.
Just place your DOM elements inside body tag. Always render script at the end of the body, and append async javascript files at document ready (or at least this is my view of things).
<html>
<head>
<link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body id="bodyCanvas">
<div class="masthead">
<div class="container">
</div>
</div>
<div class="container Override" id ="pageContainerId" >
</div>
<script>
<script src="http://code.jquery.com/jquery.js"></script> // create a local copy of jquery and other async javascript files you can load at $(document).ready(function(){ //here append async scripts like google maps });
<script type="text/javascript" src="d3.min.js"></script>
<script src="Bootstrap/js/bootstrap.min.js"></script>
<script type='text/javascript'>
$(function(){
$("#pageContainerId").load("navbarTemplate.html");
});
</script>
Here goes code....
</script>
</body>
</html>
The code you are trying to reference in the $("#pageContainerId").load("navbarTemplate.html"); is outside the body tag and most browsers will cut this out.
Try the following:
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="d3.min.js"></script>
<script src="Bootstrap/js/bootstrap.min.js"></script>
<script type='text/javascript'>
$(function(){
$("#pageContainerId").load("navbarTemplate.html");
});
</script>
</head>
<body id="bodyCanvas">
<div class="masthead">
<div class="container">
</div>
</div>
<div class="container Override" id ="pageContainerId" >
</div>
<script>
Here goes code....
</script>
</body>
</html>
Also as the script is at the top the DOM may not be loaded at the time try the following:
$(document).ready(function(){
$("#pageContainerId").load("navbarTemplate.html");
});
DOM ELEMENT SHOULD INSIDE BODY TAG
<body id="bodyCanvas">
<div class="masthead">
<div class="container">
</div>
</div>
<div class="container Override" id ="pageContainerId" >
</div>
</body>
Ok, I couldn't get it to work the way I wanted but it turned out we had asp enabled on our server so when I switched to that I got it to work beautiful in about half an hour.
And it's a better way I suspect, in terms of best practice.
Thanks for the responses.

Add a class name to element immediately this element is loaded

I have an element which has to be hidden when JavaScript is enabled. The current code seems like this:
<body>
...
<div id="js-hidden"></div>
...
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
$('#js-hidden').hide();
})
</script>
There is the problem, the js-hidden div is visible since the rest of page (and JavaScripts) are loaded.
Can I hide that earlier? This solution is so bad for me, JS user canĀ“t see this element.
PS: I've written the example with using jQuery, it can be in plain JS too, of course :-)
$(document).ready makes it happen after full page loaded you can use
<body>
...
<div id="js-hidden"></div>
...
<script src="jquery.js"></script>
<div id="js-hidden"></div>
<script>
$('#js-hidden').hide();
</script>
Simplest thing:
<style>
.js-hidden {
display: none;
}
</style>
<noscript>
<style>
.js-hidden {
display: block;
}
</style>
</noscript>
Since you cannot use onload event on div I guess the best solution is put your js right after that div...

jquery on() isn't working with click event?

This is my jquery:
$(document).ready(function(){
$("div#overlay div#getFBid div#overlayClose").on("click", function(){
console.log("test")
});
});
And this is my html, which is called with ajax:
<div id="overlay">
<div id="getFBid">
<div id="overlayClose"> </div>
<h1>Wat is mijn Facebook page ID?</h1>
<div id="fbPageURLholder">
<input type="text" id="fbPageURL">
</div>
</div>
</div>
I can't figure out what I'm doing wrong, I'm obviously missing something that should be really simple I think.
Any thoughts?
PS. I should add to this that I saw on jquery.com that the live function is deprecated and I should use delegate or on.
This:
$("div#overlay div#getFBid div#overlayClose")
can be reduced to
$('#overlayClose')
since you'll only ever have one element of that ID in your document.
As for the problem; if you've loaded the content with AJAX, it won't be available in DOMReady, when you're binding your listener.
To bind to elements that have not yet been added, you need to use a live delegate:
$(document).on('click', '#overlayClose', function() {
console.log('test');
});
Where $(document) should be something as close to the element as possible, that is available at DOMReady, and that is not destroyed.
Did you import jQuery?
That works for me, clicking Close will log a test message in the console:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div id="overlay">
<div id="getFBid">
<div id="overlayClose">Close</div>
<h1>Wat is mijn Facebook page ID?</h1>
<div id="fbPageURLholder">
<input type="text" id="fbPageURL">
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
$("#overlayClose").on("click", function(){
console.log("test")
});
});
</script>
Hope that helps.

jQuery stops working after loading content into a div

For example I have the following HTML named index.html:
<html>
<head>
<style>
#content { float:left; }
#sub { float:right; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="action.js"></script>
</head>
<body>
<h2>Test de</h2>
<div id="content">
Content
<button class="loadSub">Load</button>
</div>
<div id="sub">
Sub content
</div>
</body>
</html>
And a simple JS file named action.js:
$(document).ready(function(){
$('button.loadSub').click(function(){
$('#sub').load('test.html');
});
$('button.hide').click(function(){
$('#sub').fadeOut('slow');
});
});
As you can see, when I click the button .loadSub the div #sub will be loaded with the new content from test.html:
<h2>This is the sub content</h2>
<button class="hide">Hide</button>
I got two problems here:
Firstly, the .loadSub button did successfully load the the div of id subcontent, but the .hide button did not work.
Secondly, after I had tried inserting
script type="text/javascript" src="action.js"
inside test.html, the hide button worked and faded out its content. But then in turn, I found out that the button loadSub no longer functioned. I couldn't load the subcontent again.
Is there any other way around to just once declare source of js file and make my button.loadSub work whenever I click it? Could anybody please explain the problem and give me a hint to fix it.
You're loading dynamic HTML into your page. This means that at the time you called $('button.hide').click(), the button.hide element did not exist in your page yet, so the click handler could not be attached.
You might want to try doing a delegate attachment instead.
$('#sub').on('click', 'button.hide', function () {
$('#sub').fadeOut('slow');
});
On the first page, put this. You can insert my JQQuery code into your action.js file. On the second page, the one you are loading into your div, put the second Jquery code I added.
On First page:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<style>
#content{float:left;}
#sub{float:right;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(function(){
$('.loadSub').click(function(){
$('#sub').show();
$('#sub').load('test.html');
});
});
});
</script>
</head>
<body>
<h2>Test de</h2>
<div id="content">
Content
<button class="loadSub">Load</button>
</div>
<div id="sub">Sub content</div>
</body>
</html>
On the second page (the page that's loaded into the div, add this:
<script type="text/javascript">
$(document).ready(function(){
$(function(){
$('.hide').unbind("click").click(function(){
$('#sub').fadeOut('slow');
});
});
});
</script>
<h2>This is the sub content</h2>
<button class="hide">Hide</button>
The hide button isn't on the page when you try to bind the event so it is never registered.
Change it to use on like this (assuming version 1.7+)
$(document).on('click', 'button.hide', function(){
$('#sub').fadeOut('slow');
});
or delegate if an older version:
$(document).delegate('button.hide', 'click', function(){
$('#sub').fadeOut('slow');
});
This attaches the event handler at the document level so will work for any new content added to the page.

Categories