I proved script. its works, but outside of .
I am not good on script. maybe its a simple problem.
<head>
<script src="http://code.jquery.com/jquery-1.5.js" type="text/javascript"></script>
<script src="http://0rochymugen.ucoz.com/scriptbestsite.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
basicly, script just show a when a mouse its over to image.
$('#img1').mouseover(function () {
$('#p1').show("slow");
});
$("#p1").hover(function () {
$("#p1").hide("slow");
});
when I put script on head. simply, doesnt work.
In some cases, if you are trying to operate on items that are on the page, if you javascript loads and executes before the rest of the page has finished loading, you will get errors and/or your code will not appear to work.
This is one reason it is recommended to put links to javascript files at the bottom of the page.
Another good practice is to only run your when the document has finished loading, in jQuery is is normally done using the following syntax:
$(document).ready(function(){
// Your javascript
}
I think your code doesn't work because you're not running it when document's ready:
$(document).ready(function(){
$('#img1').mouseover(function () {
$('#p1').show("slow");
});
$("#p1").hover(function () {
$("#p1").hide("slow");
});
$("#img2").mouseover(function () {
$('#p2').show("slow");
});
$("#p2").hover(function () {
$("#p2").hide("slow");
});
$("#img3").mouseover(function () {
$('#p3').show("slow");
});
$("#p3").hover(function () {
$("#p3").hide("slow");
});
$("#img4").mouseover(function () {
$('#p4').show("slow");
});
$("#p4").hover(function () {
$("#p4").hide("slow");
});
$("#img5").mouseover(function () {
$('#p5').show("slow");
});
$("#p5").hover(function () {
$("#p5").hide("slow");
});
});
Also you can pass two functions two your hover handler to handle both mouseover and mouseout events. I think that'll shorten your code a bit. ;)
The problem is that the elements you are referencing, don't exist yet.
To ensure they exist before using them, you have to put it's related code inside $(document).ready. So you have:
$(document).ready(function(){ //This ensures DOM elements are loaded
$('#img1').mouseover(function () {
$('#p1').show("slow");
});
$("#p1").hover(function () {
$("#p1").hide("slow");
});
});
But, if you can't change that js file, to add a document.ready, you could load the script dynamically, as the following:
<head>
...
<script type="text/javascript">
$(document).ready(function(){
$.getScript("http://0rochymugen.ucoz.com/scriptbestsite.js");
});
</script>
...
</head>
It's not mandatory for the js scripts (in general) to be on the head section, but it's a good practice IMHO. However, other people prefer to put it at the bottom of the page for performance reasons.
Hope this helps.
Related
I want to make this JS function go from a button to a page load
I am integrating a jira issue collector into our webpage.
Bug Report
<script type="text/javascript" src=""></script>
<script type="text/javascript">window.ATL_JQ_PAGE_PROPS = {
"triggerFunction": function(showCollectorDialog) {
//Requires that jQuery is available!
jQuery("#myCustomTrigger").click(function(e) {
e.preventDefault();
showCollectorDialog();
});
}};</script>
To load when the page reloads I used the window.onload but that didnt work
Add a document complete jquery handler:
$(document).ready(function(){
showCollectorDialog();
});
This will run as soon as the document is fully loaded.
here you can do it it with jquery just like like this.You can place this at the end of your html file.And also include jquery cdn in script tags in your html file.
$(document).ready ( function(){
alert('hello world');
});
or you can do this like this
function functionName() {
alert('hello world');
}
window.onload = functionName;
Looking for an easy answer, nothing works from existing googles.
No custom triggers needed.
Put this into your html head and it will trigger the form, I just tested it ;-)
<script type="text/javascript">
setTimeout(function() {
$('#atlwdg-trigger').trigger('click');
},100);
</script>
So, I have following jquery function:
jQuery('.button').click(function(e) {
if(!isMobile) {
jQuery('.button').featherlight({
});
}
})
This creates an lightbox at the bottom of <body> like below:
Before lightbox is opened:
<body>
<button> Show lightbox</button>
<script src="https://...jquery.min.js"></script>
<script src="https://...custom_js.js"></script>
</body>
After lightbox is opened:
<body>
<button> Show lightbox</button>
<script src="https://...jquery.min.js"></script>
<script src="https://...custom_js.js"></script>
<div class="lightbox">Lightbox content</div>
</body>
Problem is that none of the jQuery function inside of this lightbox works as it was created after the page was loaded.
How do I "re-render" a js file after the lightbox is created?
Thanks!
Here is an example:
jQuery('#tags').keyup(function(e){
console.log(e);
if(e.which == 188) {
var tag = ...;
var data = '<button>tag</button>';
tags.push(tag);
jQuery('.tags ul').append(data);
jQuery(this).val('');
}
});
Here, a tag input will be "appended" or added to a div class="tags". However inside of the lightbox, this function is not executed at all.
Re-rendering a JS file is not how javascript is supposed to work.
What I recommend you to do is to run the a function in the afterContent callback.
As you can see in the featherlight documentation, there is a plenty of callbacks that can help you with this.
Example:
jQuery('.button').click(function(e) {
if(!isMobile) {
jQuery('.button').featherlight({
afterContent: function () {
// Do your code here
// The lightbox content will be ready
}
});
}
})
The proble here is that the light ox is dynamically added.
If you need any triggers to work inside or on that lightbox element you will need to use:
$(document).on('click', '.lightbox .button', function(){
...
});
Note that you do not want this code inside that lightbox, but inside your regular js file. Simply because we do not like inline js, and second you can trigger every dynamic content on the fly with above code.
I am working with jquery and multiple scripts that require javascript in the HTML document to function correctly (thankyou web 2.0). I am using ajax to post, $(document).ready to run functions and other multiple events etc. I am using googles minify to help the load time of the external javascript files required to run the javascript in the HTML. I am also having trouble structuring/formatting my javascript.
My questions are as follows:
How do I minimise the code in the HTML document?
Is it possible to link the javascript in the HTML document externally
even if it requires $(document).ready, like my example below?
What is a good site or tutorial to assist me in correctly formatting
my jquery/javascript as I am well aware this is incorrect and does this help load time?
Below is an example of a page where I run multiple scripts (feel free to format this correctly) and an example of what I would like to link externally and structure correctly. I am not asking for anyone to do my work for me but to simply just lead me in the right direction.
<script type="text/javascript" src="lib/js/jquery.nivo.slider.js"></script>
<script type="text/javascript" src="lib/js/jquery.fancybox.js"></script>
<script type="text/javascript" src="lib/js/jquery.jcarousel.min.js"></script>
<script type="text/javascript">
//nivo
$(window).load(function() {
$('#slider').nivoSlider({ effect: 'slideInLeft', pauseTime: 5000 });
});
//fancybox
$(document).ready(function() {
$('.fancybox').fancybox();
$.fancybox.open($("#welcome"), { padding : 0 });
});
//subscribe
$("#footer-subscribe-show-hide").click(function () {
$("#footer-subscribe").animate({width:'toggle'},300);
$(this).show("#subscribe");
});
//responsive
$(function() {
$('.menu-mobile-drop').click(function() {
$('.menu-mobile').toggle();
});
});
$(".menu-wrap").click(function() {
$(this).find('img').toggle();
});
//subscriptionAjax
$("#subscriber").submit(function(event) {
event.preventDefault();
$("#footer-subscribe").fadeOut();
var values = $(this).serialize();
$.ajax({
url: "include/subscribe.php",
type: "post",
data: values,
success: function(){
$("#footer-subscribe")
.html(
"<div class='subscription-success'>You're now subscribed!</div>"
)
.fadeIn('slow');
},
error: function(){
alert("failure");
$("#footer-subscribe").html('there is error while submit');
}
});
});
//jcarousel
function mycarousel_initCallback(carousel) {
carousel.clip.hover(function() {
carousel.stopAuto();
},
function() {
carousel.startAuto();
});
};
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
auto: 8,
wrap: 'last',
initCallback: mycarousel_initCallback
});
});
</script>
To minimize JavaScript in HTML, simply keep all of it out of HTML.
If you need something scripted on a page, you should add a <script src=""></script> element. There's no reason to include any raw javascript on the page directly.
If you need to select an element, make good use of [data-*] attributes, selectors, and iteration:
$('[data-foo]').each(function () {
var $this,
data;
$this = $(this);
data = $this.data('foo');
$this.foo(data);
});
How do I minimise the code in the HTML document?
Inline javascript code such as
<script>
$(function () {
alert("Hello World");
});
</script>
can be minified by using a service (e.g. Google Closure Compiler). You can simply copy and paste your code to the UI and get the minified version.
Is it possible to link the javascript in the HTML document externally even if it requires $(document).ready, like my example below?
Yes that is certainly possible. You just need to be aware of the loading order:
<script>
$(function () {
alert("Hello World");
});
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
This will not work because you are calling the document.ready function from jQuery before actually including the library.
What is a good site or tutorial to assist me in correctly formatting my jquery/javascript as I am well aware this is incorrect and does this help load time?
I will recommend using PageSpeed (available as a Chrome / Firefox extension) for analyzing potential performance issues. This extension automatically generates useful suggestions (e.g. Load order of scripts/stylesheets) that will certainly increase your web application's performance.
You don't have to put your JavaScript into your HTML page. Just include it using the <script> tag.
If you really want to go deep in increasing the page load time, you can use something like Minify to compress your JS and CSS code.
jQuery offers two powerful methods to execute code and attach event handlers: $(document).ready and $(window).load. The document ready event executes already when the HTML-Document is loaded and the DOM is ready, even if all the graphics haven’t loaded yet. If you want to hook up your events for certain elements before the window loads, then $(document).ready is the right place.
More more detail refer this post..
jQuery events .load(), .ready(), .unload()
Try this for your answer:
<script type="text/javascript" src="lib/js/jquery.nivo.slider.js"></script>
<script type="text/javascript" src="lib/js/jquery.fancybox.js"></script>
<script type="text/javascript" src="lib/js/jquery.jcarousel.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//nivo
$('#slider').nivoSlider({ effect: 'slideInLeft', pauseTime: 5000 });
//fancybox
$('.fancybox').fancybox();
$.fancybox.open($("#welcome"), { padding : 0 });
//subscribe
$("#footer-subscribe-show-hide").click(function () {
$("#footer-subscribe").animate({width:'toggle'},300);
$(this).show("#subscribe");
});
$('.menu-mobile-drop').click(function() {
$('.menu-mobile').toggle();
});
$(".menu-wrap").click(function() {
$(this).find('img').toggle();
});
//subscriptionAjax
$("#subscriber").submit(function(event) {
event.preventDefault();
$("#footer-subscribe").fadeOut();
var values = $(this).serialize();
$.ajax({
url: "include/subscribe.php",
type: "post",
data: values,
success: function(){
$("#footer-subscribe")
.html(
"<div class='subscription-success'>You're now subscribed!</div>"
)
.fadeIn('slow');
},
error: function(){
alert("failure");
$("#footer-subscribe").html('there is error while submit');
}
});
});
//jcarousel
function mycarousel_initCallback(carousel) {
carousel.clip.hover(function() {
carousel.stopAuto();
},
function() {
carousel.startAuto();
});
};
$('#mycarousel').jcarousel({
auto: 8,
wrap: 'last',
initCallback: mycarousel_initCallback
});
});
</script>
There is a site with one main index.html page (with <html><head>...) and pages like gallery.html, contacts.html, but only with <div> containers and without <html><head>....
So, when i click on index.html link to contacts.html what happens:
$('.contacts').click(function(e) {
e.preventDefault();
$('#content').load('contacts.html', function() {
.....
});
});
Q: How should i structure or organize javascript code for any events like click on contacts.html?
For example:
[1] I can write on contacts.html javascript code like:
<script type='text/javascript'>
$(function() {
$('.anyClassOnContactsHtml').click(function(e) {
.....
});
});
</script>
But as i guess, every time when i load contacts.html it reads the functions again and that is why the speed and performance of the site may be lower, because i have 50+ click events on every page.
[2] I can write on index.html delegates:
<script type='text/javascript'>
$(function() {
$('#content').on('click', '.anyClassOnContactsHtml', function(e) {
.....
});
});
</script>
It works and browsers read click functions 1 time, but with 100+ click functions there are 2-3 SECONDS (!) delay, so it works very slow.
To work it faster i should instead of #content write container that is nearer to my .anyClassOnContactsHtml, but i can't, because on index.html there are only #container.
So, how should i do? Or are there other ways to bind events? Any tips for site performance? Thank you.
1) You can actually call sub-elements that way.
${"#content .anyClassOnContactsHtml").click(function() {
});
2) Take a look at: http://developer.yahoo.com/yslow/. For example, placing <script> tags at the bottom of <body>
</body> will allow the rest of the page to load quicker.
Install the plugin and run the test on your page.
When you load() content, any code within loaded script tags is completely ignored, so it has no impact on javascript performance.
What might be the issue is that the way the content is loaded. Make sure you're not re-binding the click functions each time. Here is some example code:
<script type='text/javascript'>
$(function() {
$('.contacts').click(function(e) {
e.preventDefault();
$('#content').load('contacts.html', function() {
// DO NOT REBIND CLICK EVENTS HERE
});
});
// The following should only be done ONCE
$('#content').on('click', '.anyClassOnContactsHtml', function(e) {
.....
});
});
</script>
Is something like this really that slow?? I would say its should be okay!
<script type='text/javascript'>
$(function() {
$('.contacts').click(function(e) {
e.preventDefault();
$('#content').load('contacts.html', function() {
$('#content_of_loaded').on('click', '.anyClassOnContactsHtml', function(e) {
.....
});
});
});
});
</script>
Maybe you could also try this:
<script type='text/javascript'>
$(function() {
$('a').click(function(e) {
e.preventDefault();
var site = $(this).attr("href");
$('#content').load(site, function() {
$('#sub_content').on('click', '.anyClassOnContactsHtml', function(e) {
.....
});
});
});
});
</script>
and also for your subcontent links you could do this maybe..
function loadContent(site) {
$('#content').load(site, function() {
$('#sub_content').on('click', 'a', function(e) {
e.preventDefault();
loadContent($(this).attr("href"));
});
});
}
$(function() {
$('a').click(function(e) {
e.preventDefault();
loadContent($(this).attr("href"));
});
});
but i didnt test it, so might be wrong :)
I think the only way you are going to have any luck performance optimizing this is if you refactor some of your click functions to combine them and make them more multi-purpose by adding more method parameters, switch statements, etc... The most efficient way then would be to bind them all to #content since they won't have to be reloaded every time there is a URL change. The data attribute can help immensely with this. If you took the time to do it properly, you could even refactor all of your code into one event handler function.
A very contrived example of a function like this would be:
$('#content').on('click', 'a, span, input', function(e) {
var tagName = $(e.target).prop('tagName');
switch (tagName) {
case 'a':
processAnchorEvents();
break;
case 'span':
processSpanEvents();
break;
case 'input':
processInputEvents();
break;
}
});
I have a html file which looks like this.
<head>
<script>
document.onready
{
document.getElementById("demo").innerHTML="Works";
}
</script>
</head>
<body>
<div id="demo">
</div>
</body>
When I put the script tags at the bottom of the page, everything works fine. But when I put the script in <head></head tag, it does not work. I guess it is not able to access elements that are below the script.
On many sites like StackOverflow, JavaScript is in head tag. How is it then able to access HTML elements that are below it?
What should I do now? Should I just move my script to the bottom or is there a way by which JavaScript can access elements below it?
Try using something like this:
window.addEventListener('load', function() { document.getElementById("demo").innerHTML="Works"; }, false);
Where did you get document.onready from? That would never work.
To ensure the page is loaded, you could use window.onload;
window.onload = function () {
document.getElementById("demo").innerHTML="Works";
}
Your syntax is incorrect.
document.ready= function () {
//code to run when page loaded
}
window.onload = function () {
//code to run when page AND images loaded
}