Div suddenly became unresponsive - javascript

I am working on a project to explain jQuery to my students. I had a div that would slide on click and then added a second to hide. Then nothing worked so I removed all new code but the slide div no longer works.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
// slide function
$("#frog").click(function() {
$("#frog").animate({left: "200px"}, 500);
});
</script>
<style type="text/css">
#frog{
width: 100px;
height: 100px;
background-color: red;
position: relative;
left: 20px;
}
</style>
<title>I hate JS!</title>
</head>
<body>
<ul>
<h2>Programming Languages</h2>
<li>Python</li>
<li>Javascript</li>
<li>C++</li>
<li>C#</li>
<li>ruby</li>
</ul>
<ol>
<h2>Top 3 Best Animations</h2>
<h4><li>Slide</li></h4>
<div id="frog"></div>
</ol>
</body>

Your HTML is invalid. This can break any javascript as elements get rendered wrong. It should look like this:
<ul>
<h2>Programming Languages</h2>
<li>Python</li>
<li>Javascript</li>
<li>C++</li>
<li>C#</li>
<li>ruby</li>
</ul>
<ol>
<li><h2>Top 3 Best Animations</h2></li>
<li>
<h4>Slide</h4>
<div id="frog"></div>
</li>
</ol>
<script>//javascript here</script>
Also, it is strongly recommended to include your JS before your closing body tag. Because when the javascript initiates, the element it has to bind to, has to exist first! If the javascript renders before the element does, it will never be able to find it, therefore not work, so include javascripts at the end of your document, not the start.
You also need to wrap your javascript within a
$(function(){
//Javascript here
});
So that it will trigger on all browsers when the page has finished loading. (Not all browsers automatically trigger javascripts)
See this JS fiddle for a working example:
https://jsfiddle.net/5cxnLe4v/1/
-- also slightly important: make sure you close all your elements, like the </body> and </html>!

Related

Is there a vanilla Javascript alternative for .html()?

I'm wanting to create an opposite affect to <noscript>. I don't want the content to load at all if Javascript isn't enabled, which is why I'm not interested in a display:none alternative, which still loads but just hides.
I came across this previous answer which has the desired affect (see updated answer).
HTML:
<div id="container"></div>
<script type="text/html" id="content">
<div class="test">HTML goes here</div>
</script>
jQuery:
$(document).ready(function() {
$('#container').html($('#content').html());
});
Is there anyway I can do this with Vanilla Javascript? I want the contents of the script to render as functional HTML.
often what is done is to set up your html as:
<html class="no-js">
<head>
<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js');})</script>
<!-- ... -->
</head>
<!-- ... -->
<div class="js-only">I only show up when js is enabled</div>
<!-- ... -->
</html>
and then have some css which hides that element
.no-js .js-only {
display: none;
}
the javascript replaces no-js with js in the <html> element which causes the div to display only when js is enabled

How to show a div only after the page render completely

I have a php rendered menu. This menu is the first item to appear while my page is rendering.
The problem is that menu apperas like a simple text list, like a broken page, so after the page render completly the menu appears as it should appear.
I already try tu use fadein, delay and nothing worked for me.
At my case, how I could show this menu only after the page load completly?
I'm using prototype and jquery. How do it with no conflict?
the structure at html is simple:
<div id="menu">
<nav id="mobile-menu" >
<ul>
<li>item</li>
<li>item</li>
</ul>
</nav>
</div>
Menu before page render:
I assume that you already know about this if you have tried fadein.
#menu {
display: none;
}
I have had some problems with the jQuery implementation in the past and just used pure Javascript. Could you just put this at the bottom of your HTML page?
It is kind of a hack, but it depends on your use case.
<script>
document.getElementById("menu").style.display = "block";
</script>
<html>
<head>
<script type="text/javascript"
src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js'>
</script>
<style>
#menu{
display: none;
}
</style>
</head>
<body>
<div id="menu">
<nav id="mobile-menu" >
<ul>
<li>item</li>
<li>item</li>
</ul>
</nav>
</div>
</body>
<script>
$(document).ready(function(){
$('#menu').css("display", "block");
})
</script>
</html>
If you are using jquery below is where you need to display the menu. $( document ).ready is fired after html is renndered
$( document ).ready(function() {
//change menu style to display
});
Thank you guys!
I used your code with no conflict!
<script type="text/javascript">
var j = jQuery.noConflict();
j( document ).ready(function( $ ) {
j('.hide-menu').css("display", "block");
});
</script>

Browser doesn't recognize inclusion of external javascript/jquery file

In my Dynamic Web Project (Eclipse), developed with the Spring MVC framework, I have the JSP page below, placed in the folder WEB-INF/jsp/ :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>HorarioLivre</title>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="js/index.js"></script>
<link rel="stylesheet" href="css/style-main.css">
<link rel="stylesheet" href="css/style-popup.css">
</head>
<body>
<header>
<div class="container">
<h1>HorarioLivre</h1>
<nav>
<ul>
<li>Eventos</li>
<li>Cadastrar Horarios</li>
<li>Listar Horarios</li>
<li>Usuarios</li>
<li>${usuario.nome}
<ul>
<li>Perfil</li>
<li>Configurações</li>
<li>Logout</li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
<div id="results">
Fechar
<div id="content"></div>
</div>
</body>
</html>
My problem is that apparently the application don't be reading the js/index.js file, placed in folder WebContent/js (the css files, placed in WebContent/css, are read normally). When I put some javascript / jquery code directly in the JSP page (like the code displayed in the question Browser doesn't recognize javascript / jquery code), they are executed without any problems.
Someone can find the problem with this page?
Update 1
$(document).ready(function(){
setupPopup();
});
function setupPopup() {
$('a').click(function() {
$('#content').load($(this).attr('href'));
$('#container').append('<div id="cover">');
$('#results').fadeIn(500);
popupPosition();
});
$('#close').click(function() {
$('#results').fadeOut(100);
$('#cover').remove();
});
$(window).bind('resize', popupPosition);
}
function popupPosition() {
if(!$("#results").is(':visible')){ return; }
$("#results").css({
left: ($(window).width() - $('#results').width()) / 2,
top: ($(window).width() - $('#results').width()) / 7,
position:'absolute'
});
$('#results').draggable();
}
FINAL UPDATE
In the end, I choose don't use jquery, and replace the code from the header by this:
<script>
function handleClick(url){
document.getElementById("results").style.display = 'block';
document.getElementById("content").innerHTML='<object type="text/html" data="'+url+'" ></object>';
}
function cleanDiv() {
document.getElementById("results").style.display = 'none';
document.getElementById("content").innerHTML=' ';
}
</script>
each link has this format:
Eventos
and the html code for my popup window get this form:
<section class="about" id="results" style="left: 183px; top: 111px;" onMouseDown="dragStart(event, 'results');">
<div align="right">X</div>
<div id="content" align="center"></div>
</section>
With the parte style="left: 183px; top: 111px;" onMouseDown="dragStart(event, 'results');" being responsible for move the popup across the screen (See the question how to drag and drop a <div> across the page)
I'm not entirely sure, but I think i've seen this done before:
remove http: and https: from your js sources. So it should look like this:
<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
This might not work, it was just a thought I had.
It's not the best solution, but you can try load script dynamically with jQuery.load or something like
<script>document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>
Try <script src="/js/index.js"></script> instead.
edit: This Absolute path & Relative Path explains the relative and absolute path in more detail.
I would suggest viewing the source code once your run your JSP in browser (right click - view page source or something similar, depending on your browser). You should see what URL for the JS the page is trying to load and should be able to correct it accordingly.
Also, perhaps it's just your context path missing from the URL. In that case, I'd use <c:url> tags when generating the URL.

Jquery isn't recognized in simple html5 web page

I have been searching whole afternoon for a solution, but I didn't found it. I am writing a HTML5 webpage, using jquery and css. I'm trying to implement very simple drop down menu (I found tutorial here) but it does not work for me. I have copy paste this code from this article to a local html file and open it in browser and it works great, just as I want to implement menu, but when I try to implement the same code in my webpage it doesn't work.
I get in my console log displayed two errors:
(SyntaxError: function statement requires a name - jquery.js: row 2072) and then after this error i get
(ReferenceError: $ is not defined - index.html row 15, where the $ sign occurs).
I have been searching a lot, but I didn't found anything usefull which might help me. I have also checked number of times if I might have problem in jquery script declaration but It's ok. I don't have any idea why this simple code don't work in my application but in external code it works just fine. I have also try to insert language and text type on script tag, but I didn't work, neither if I leave script tag empty. I use latest Mozilla Firefox browser.
Here is my application code:
<!DOCTYPE html>
<html>
<head>
<title>Test title</title>
<link rel="stylesheet" type="text/css" href="css/layout.css">
<link rel="stylesheet" type="text/css" href="css/skin/default.css">
<script src="script/jquery.js" type="text/javascript"></script>
<script src="script/video.js" type="text/javascript"></script>
<script src="script/picture.js" type="text/javascript"></script>
<script src="script/ApplicationController.js" type="text/javascript"></script>
<script>
$("body").ready(function() {
$(".dropdown").hover(function() {
$(this).find(".sub_navigation").slideToggle();
});
});
</script>
</head>
<body onload="onApplicationLoad()">
<div id="header">
<img id="logo" src="images/logo.png" alt="Logo" width="200" height="38" />
<div id="verticalHeaderLine"></div>
<div id="headerMenu">
<ul id="navigation">
<li class="dropdown"> <button id="Login" class="button" title="Edit Login">Login</button>
<ul class="sub_navigation">
<li><button id="test" class="button" title="Edit Test">Test</button></li>
<li><button id="test1" class="button" title="Edit Test">Test 1</button></li>
<li><button id="test2" class="button" title="Edit Test">Test 2</button></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
and this is a css related to menu:
ul {
margin:0;
padding:0;
list-style-type:none;
min-width:200px;
}
ul#navigation {
float:left;
}
ul#navigation li {
float:left;
min-width:200px;
}
ul.sub_navigation {
position:absolute;
display:none;
}
ul.sub_navigation li {
clear:both;
}
I would be very happy if someone know what do I do wrong and if he could be so kind and tolk me what do I do wrong.
Regards,
Dahakka
$("body").ready(function() { should be $(document).ready(function() {
It's usually better to let Google host jQuery for you. See http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/ for a full explanation. Replace your reference to jQuery with
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
Also, at the end of your document, you have <body><html> instead of </body></html>
I think jquery is not being found. try adding this to your <head></head>.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
This is the google hosted jquery. If you have internet access it should at least solve your first problem
jQuery(document).ready(function($) {
$(".dropdown").hover(function() {
$(this).find(".sub_navigation").slideToggle();
});
});
Try this to see if there is a conflict or just jQuery isn't loaded at all.

Extra space added after list on jQuery reload of div in IE

I am writing a web page which updates a list using jQuery when something is selected. Below the list is a button. The update works fine in Firefox and Chrome, but in IE, a bit of space is added between the list and the button every time it updates. Following is a stripped-down example that does the same thing:
<html>
<head>
<style type="text/css">
#list {
padding: 10;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="test">
<ul>
<!-- List -->
<li>
<div id="list">
<ul>
<li>before 1</li>
<li>before 2</li>
</ul>
</div>
</li>
<!-- Button -->
<li>
<div>
<button id="button" onClick="reload();">button</button>
</div>
</li>
</ul>
</div>
</body>
<script type="text/javascript">
function reload() {
var html =
"<ul>" +
"<li>after 1</li>" +
"<li>after 2</li>" +
"</ul>";
$("div#list").html(html);
}
</script>
</html>
Click the button. In Firefox and Chrome, it stays put. In IE (9), it shifts down a bit (a bit meaning about 10 or 20 pixels. Easily noticeable to the human eye, that is) every time I click it. Can anyone tell me what is causing this?
Thanks.
Update
Seems like the problem is related to IE padding calculating rather than your code, since the same happens using js .innerHtml() directly.
I would then suggest removing the padding and adding margins to the ul, since it affect the element you are removing maybe also the margins will be removed this time.
#list {
padding: 0;
}
#list ul {
margin:10;
}
http://jsfiddle.net/qEphF/6/
According to jQuery docs
This method uses the browser's
innerHTML property. Some browsers may
not generate a DOM that exactly
replicates the HTML source provided.
Maybe you should try a different approach. For example
$("div#list").empty().append($(html));
<style type="text/css">
#list {
padding: 10;
}
</style>
Each time you call the reload function, IE adds 10 padding which is the cause of your problem.

Categories

Resources