I have noticed that document.ready not prepending <div> tag.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
var shadow = $('<div id="shadowElem"></div>');
var speed = 1000;
$(document).ready(function() {
$('body').prepend(shadow);
}(jQuery));
</script>
- In console, There are no errors.
This is truly frustrating now and any help will be really appreciated.
~ Dipak G.
try this:-
var shadow = jQuery('<div id="shadowElem"></div>');
jQuery(document).ready(function() {
jQuery('body').prepend(shadow);
});
for more information check This link
I suppose that problem is in document.ready().
Try this instead:
$(function() {
$('body').prepend('<div id="shadowElem">Test</div>');
});
I would look into a conflict with prototype.js and jQuery. You may need to try jQuery.noConflict();
I would suggest using one library instead of both. Of course you will need to use a jquery lightbox instead, from what I see on your link.
Related
I need to count the amount of video thumbnails on a given product page for an ecommerce store, and then output this number on the same page in a particular HTML element.
The desired result is that on the 'Videos' tab there will be the number of videos right next to it. i.e. Videos 17
I've tried to use .length() and .append() to achieve this but am having dramas. I have about 1.5 days jQuery experience so I know I'm doing something wrong here.
$document().ready(function(){
var numvids = $('.videos').length;
$('.countvids').append("<p>"+numvids+"</p>");
});
I've set up a JSFiddle
Any help is much appreciated. Thanks!
In Jquery $() is a selector, if you say :
$(document).ready(function(){
});
it means that execute the block inside that function when my document is loaded complete on the browser, but what you write :
$document().ready(function(){
...
});
is wrong syntax and is not valid in jquery.
this should work with length:
$(document).ready(function(){
var numvids = $('.videos').length;
$('.countvids').append("<p>"+numvids+"</p>");
});
or you can use size():
$(document).ready(function(){
var numvids = $('.videos').size();
$('.countvids').append("<p>"+numvids+"</p>");
});
here is Fiddle DEMO
you code was like this:
$document().ready(function(){
var numvids = $('.videos').length;
$('.countvids').append("<p>"+numvids+"</p>");
});
which is wrong
and also you need to include query script file in your page.
you can include it from online like this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>
See updated fiddle.
The only error is that you did not include the Jquery link and/or
$(document).ready(function(){
http://jsfiddle.net/65BrR/4/
$document() is not Correct syntax of jquery , its $(document)
hope so its solve your problem !
$(document).ready(function(){
var numvids = $('.videos').length;
alert(numvids );
$('.countvids').append("<p>"+numvids+"</p>");
});
Your mistake was referencing the a non-existent global function called $document isntead of calling $(document). As it happens, your code would have worked, as-is, if it had been preceded by this:
var $document = $(document).ready;
But this is purely for amusement and is not very practical or readable code :)
Use the document-ready shortcut syntax
You really want to use the shorter jQuery shortcut. Instead of $(document).ready(function() {YOUR CODE HERE}); use $(function(){YOUR CODE HERE});
e.g.
$(function(){
var numvids = $('.videos').length;
alert(numvids );
$('.countvids').append("<p>"+numvids+"</p>");
});
This results in shorter code and is becoming so commonplace you might as well get used to it :)
I am trying to auto click a link using a class name instead of the ID name.
however my approach doesn't do anything!
Here is what I have done:
<script type="text/javascript">
$(document).ready(function(){
document.getElementsByClassName("some-iclass").click();
});
</script>
Could someone point me in the right direction please?
EDIT:
I've used the following code and still doesn't work:
<script type="text/javascript">
$(document).ready(function(){
$(".myLink").click();
});
</script>
<a class="myLink" href="http://yahoo.com"> CLICK HERE NOW </a>
and I have this right at the top of my page header:
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
EIDT:
i've tried this as well and still doesn't work:
<script type="text/javascript">
$(document).ready(function(){
$('.myLink').trigger('click');
});
</script>
here you go:
<script type="text/javascript">
$(function(){
$('.className').trigger('click');
});
</script>
hope that helps.
UPDATE:
try:
<script type="text/javascript">
$(function(){
window.location.href = $('.className').attr('href');
});
</script>
after your edit, i think this is what you need.
getElementsByClassName doesn't return an element but a NodeList which may contain more than one element.
You may do this :
document.getElementsByClassName("some-iclass")[0].click();
or if you want to click all elements :
var list = document.getElementsByClassName("some-iclass");
for (var i=0; i<list.length; i++) list[i].click();
But as you use jQuery, it would be simpler to do
$('.some-iclass').click();
but only when the click event handler was added with jQuery (in other cases, like for example in case of an href attribute, use the standard dom functions).
$(document).ready(function(){
$(".some-iclass").trigger('click');
});
Simple with jquery $(".some-iclass").click();
if you have a lot of elements with this class - point to the wanted element:
i.e. $($(".some-iclass")[0]).click();
for auto-clicking a button or a link
"<"body onload="document.getElementById('some-class')[0].click()" ">"
this works...:)
if you want to autoclick a link and you are using jQuery, you could use
$('.yourClass').click();
if you need this to be one link in a collection of multiple links, you could do this:
$($('.yourClass')[0]).click();
Where 0 is the index of the element in the jQuery object.
document.getElementsByClassName('yourClass'); does not work in older browsers so it's best to use jQuery here for cross-browser compatibility.
For me, I managed to make it work that way. I deployed the automatic click in 5000 milliseconds and then closed the loop after 1000 milliseconds. Then there was only 1 automatic click.
<script>
var myVar = setInterval(function ({document.getElementById("test").click();}, 500);
setInterval(function () {clearInterval(myVar)}, 1000);
</script>
I'm trying to remove a div from the page (preferably prevent it from loading at all)
but for now I'm settling on removing it after the page loads.
When I try the following lines of code in jsFiddle, the #content div gets removed, as expected.
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('#content').remove();
});//]]>
</script>
However, I have also tried implementing it on an actual website, but in that case, the #content div isn't removed.
Any suggestions as to what might be wrong?
If you're sharing jQuery with another library that uses the dollar for its operation you need to guard against it like this, using an anonymous wrapper:
(function($) {
$(window).on('load', function(){
$('#content').remove();
});
}(jQuery));
Note that instead of .load() I'm using .on('load', fn).
Instead of on page load you could also bind your code on DOM ready; jQuery passes itself as the first argument to the inner function:
jQuery(function($) {
$('#content').remove();
});
Your $ variable does not point to jQuery for some reason.
<script type='text/javascript'>
window.$ = jQuery;
$(window).load(function()
{
$('#content').remove();
});
</script>
Try with this
<script type='text/javascript'>
$(document).ready(function(){
$('#content').remove();
});
</script>
or
$(function()
{
$('#content').remove();
});
It's because you have a javascript error when you call $(window).load().
Uncaught TypeError: Object [object global] has no method 'load'
Also, you should better use document.ready instead as the content will be removed faster (doesn't need to wait for all the images to load).
//shorthand for $(document).ready()
$(function(){
$('#content').remove();
});
TypeError: $(...).load is not a function
It is giving error above instead of below one as load is deprecated in new version of Jquery
$(window).load(function(){
});
use this code
$(function(){
// your code here
})
use this:
<script type="text/javascript">
var node = document.getElementById('content');
if(node.parentNode)
{
node.parentNode.removeChild(node);
}
</script>
Hope this help.
Case of jquery conflict. You have mootools framework too on the page.
Also I did a 'view source' of the page and I found out this line
$j = jQuery.noConflict(); //line 132
So try this
$j('#content').remove();
Or
jQuery('#content').remove();
You are using jQuery testing with onload,
so you have to add onload syntax in jquery, on your site the statement was not called onload, that why its not working
I have updated fiddle
http://jsfiddle.net/MarmeeK/FRYsJ/3/
The JS code under <script> tag, without adding in onload in page,
<script type="text/javascript">
$(document).ready(function(){$('#content').remove();});
</script>
this should work :)
I'm trying to apply the javascript below in an html file, this code is part of a plugin so I know that it works for sure, but I'm have trouble defining it with tags, no matter what I try the script won't run.
Once the user scrolls past a div, that div becomes stuck to the top of the page:
$(function() {
var a = function() {
var b = $(window).scrollTop();
var d = $("#scroller-anchor").offset({scroll:false}).top;
var c=$("#scroller");
if (b>d) {
c.css({position:"fixed",top:"0px"})
} else if (b<=d) {
c.css({position:"relative",top:""})
}
};
$(window).scroll(a);a()
});
I tried using the tag below:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
but that didn't work.
Any help would be much appreciated, thanks
Pretty sure you need the type attribute.
<script type="text/javascript">
You could then throw that source in if you'd like, just add that attribute on.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
and that should be the proper way to include whatever is in that code into your page.
if you are manipulating the DOM, you will also need to wrap your code with DOMReady:
$(document).ready(function(){
//Code goes here
});
I need to basically add this to my page:
<body onload="document.getElementById('WeddingBandBuilder').focus()">
However due to my template I cannot change the tag. So is there a way to do the equivalent with a script in the < head > tag or something?
Thanks!
<script>
window.onload = function() {document.getElementById('WeddingBandBuilder').focus()};
</script>
You should always be careful there isn't already a window.onload defined. I've been burned a number of times by assuming I would be the only one attaching things to <body onload="..."> or window.onload.
See this answer and comments for a solution to this issue.
Use a JS library like jQuery or Prototype and create an external script file with something like this:
for jQuery:
$(function() { $('#WeddingBandBuilder').focus(); });
for Prototype:
Event.observe(window, 'load', function() { $('WeddingBandBuilder').focus(); });
I might check if that page has already included jQuery? If so, you can do something like this:
$(document).ready(function() {
$('#WeddingBandBuilder').focus();
});