Develop Reference

Script not working (but works fine on other site)

Ok this is probably a dumb question but, I'll ask. I'm trying to make a div stick when you pass a point on the page while scrolling. I have this script:
<script type="text/javascript">
$(document).ready(function() {
var s = $("#sticker");
var pos = s.position();
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
if (windowpos >= pos.top + 335) {
s.addClass("stick");
} else {
s.removeClass("stick");
}
});
});
</script>
Which works fine on one of my site. But now I'm trying it on a new site. And every time I get an error in my console log saying: TypeError: $ is not a function And when I look at the error in my code it highlights the $(document).ready(function() { part.
If I remove the $(document).ready part and the }); it tells me the var s = $("#sticker"); part is $ is not a function.
I have tried
<script type="text/javascript">
jQuery(document).ready(function() {
var s = $("#sticker");
var pos = s.position();
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
if (windowpos >= pos.top + 335) {
s.addClass("stick");
} else {
s.removeClass("stick");
}
});
});
</script>
Then it skips the (document).ready part, but it again tells me my var part is not a function.
If I remove the script I don't have any console log messages. What could be the problem? I tried putting the code in the header and footer and even just before the <div id="sticker">...</div>. Nothing seems to work. The script works perfectly on an other site...

You are running jQuery in noConfilct mode. Which mean, jQuery is only available by jQuery, not over $. You can wrap your code with an ready state or an IIFE to get access to jQuery by $.
Ready State:
jQuery(document).ready(function($) {
// access jQuery by '$' inside
});
// this is a shorthand for the above '.ready' creation
jQuery(function($) {
// access jQuery by '$' inside
});
IIFE:
(function($) {
// access jQuery by '$' inside
})(jQuery);

jQuery css height not applying

For some reason the height is not being set in this piece of code
jQuery(document).ready(function() {
jQuery('#main-content').css({'height': ((jQuery(window).height()))+'px'})
jQuery('#nav-icons a').click(function(){
jQuery('#nav-icons a').removeClass("active-icon");
jQuery(this).addClass( "active-icon" );
var toLoad = jQuery(this).attr('href')+' #main-content';
var toLoadSlider = jQuery(this).attr('href')+' #homepage-slider';
jQuery('#main-content , #homepage-slider').fadeOut(1000, loadContent);
function loadContent() {
jQuery('#homepage-slider').empty().load(toLoadSlider)
jQuery('#main-content').empty().load(toLoad,'',showNewContent())
}
function showNewContent() {
jQuery('#main-content , #homepage-slider').css({'height': ((jQuery(window).height()))+'px'}).hide().fadeIn(2000).removeAttr('id class');
}
return false;
interestingly, the exact same line of code in the showNewContent() does set the height.

The only logical reason for this is that jQuery('#main-content') in your first line is not the actual jQuery object representation of the DOM element of your choice.
You will have to figure that out yourself as to why things turn out this way.

Assuming that you have
<div id="main-content">
... content
</div><!--main-content-->
This should do the trick :
var windowHeight = jQuery(window).height();
jQuery(document).ready(function ($) {
$('#main-content').css({
height: windowHeight
});
// other scripts
}); // ready
JSFIDDLE

how to fix a div using jquery [duplicate]

This question already has answers here:
Code working in jsFiddle but not in browser
(2 answers)
Closed 8 years ago.
HTML
<div id='countdown'></div>
Jquery
<script>
var elementPosition = $('#countdown').offset();
$(window).scroll(function(){
if($(window).scrollTop() > elementPosition.top){
$('#countdown').css({'position':'fixed','top':'0'});
} else {
$('#countdown').css('position','static');
}
});
</script>
This code is working on JSFiddle, but when I tried it, it didn't work for me.
I tried looking on the console (developer's view) and it's pointing on elementPosition.top . However, top is unknown property. Can someone help me with this?

The only reason I could see is the code is not in a dom ready handler
jQuery(function () {
var elementPosition = $('#countdown').offset();
$(window).scroll(function () {
if ($(window).scrollTop() > elementPosition.top) {
$('#countdown').css({
'position': 'fixed',
'top': '0'
});
} else {
$('#countdown').css('position', 'static');
}
});
})

Put your code inside DOM ready handler $(function() { .... }); to make sure all of your elements inside the DOM have been loaded properly before executing your javascript code
$(function() {
var elementPosition = $('#countdown').offset();
$(window).scroll(function(){
if($(window).scrollTop() > elementPosition.top){
$('#countdown').css({'position':'fixed','top':'0'});
} else {
$('#countdown').css('position','static');
}
});
});
Your code works in jsFiddle because jsFiddle has already done that part for you.

JavaScript .scroll function not working

I have been trying for hours now but couldn't find a reason why the following code is not working on my site (http://robo.im) -
<script>
$(window).scroll(function () {
if ($(window).scrollTop() > 400) {
$('.home #masthead').css("opacity", 0.98);
}
else{
$('.home #masthead').css("opacity", 0);
}
});
</script>
I'm calling it in the footer with 'script' tags and have included all the necessary files. Kindly help and take a look into the page source if required.

You need to make sure you put your script code within the $(document).ready. This functions makes sure the complete page content has been loaded. Otherwise you could apply functions to elements which do not exist.
So in your example you are binding the scroll function while the document has not been completed loaded yet.
Also make sure you have loaded jQuery correctly. #adeneo pointed correctly that Wordpress uses jQuery instead of $ as the reference to jQuery.
See http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers
<script>
jQuery(document).ready(function($) {
$(window).scroll(function () {
if ($(window).scrollTop() > 400) {
$('.home #masthead').css("opacity", 0.98);
}
else{
$('.home #masthead').css("opacity", 0);
}
});
});
</script>

I have looked at your page, and it appears that jQuery is not bound to the $ variable. Either you have some script that is calling jQuery.noConflict() (this may be in a library that you have added or in your own code) or there is something overwriting $.
I would suggest either fixing that issue, or changing all $ in your code to jQuery instead:
jQuery(window).scroll(function () {
if (jQuery(window).scrollTop() > 400) {
jQuery('.home #masthead').css("opacity", 0.98);
}
else{
jQuery('.home #masthead').css("opacity", 0);
}
});
Alternatively, if you are sure this will not cause problems, you can do this just before your existing code:
$ = jQuery;
Finally, as advised in another answer, it would be best to wrap your entire code block in a $(document).ready or similar. A working snippet would be:
$ = jQuery;
$(function() {
$(window).scroll(function () {
if ($(window).scrollTop() > 400) {
$('.home #masthead').css("opacity", 0.98);
} else{
$('.home #masthead').css("opacity", 0);
}
});
});
However, I tried this on your site, and whatever is .home #masthead has no content, so you won't actually see it doing anything.

Why doesn't my <div> slide with these jquery code?

I want to reduce my <div> size when I click on a <a> . But it doesn t work.
Javascript code
(divheight is a global variable)
function jamsho(id) {
var idd=id.substr(1);
alert(document.getElementById(idd).style.height);
if(document.getElementById(idd).style.height != 30) {
$(id).stop().animate({height:30}, 700);
divheight=document.getElementById(idd).style.height;
} else if (document.getElementById(idd).style.height == "30px") {
$(id).animate({height:divheight}, 700);
}
}
And call the function :
<div class="linkbox" id="linksbox">
<a id="Titr" onClick="jamsho('#linksbox')"> پیوند ها</a>
سایت روان آنلاین
</div>

ditch the onclick, ditch the vanilla js. It's as simple as follows:
jsFiddle Example
HTML
<div class="linkbox" id="linksbox">
<a id="Titr"> پیوند ها</a>
سایت روان آنلاین
</div>
jQuery
$('#Titr').click(function(e) {
e.preventDefault();
var par = $(this).parent();
par.animate({height:par.height()==30?'':30},700);
});
And if you want something more "dynamic":
$('.linkbox').on('click', 'a:first', function(e) {
e.preventDefault();
var par = $(this).parent();
par.animate({height:par.height()==30?'':30},700);
});
Keep in mind, last solution only works for jQuery versions 1.7 and above, for older version, replace .on with .delegate

You're sure that this condition document.getElementById(idd).style.height!=30 is satisfied?
I believe that the property height comes as string with the "px" sufix. See this.
So, to work it may be if (document.getElementById(idd).style.height!="30px").
BTW, is a best pratice to use only jQuery or pure Javascript, not mix them.

You could use jQuery for all of the function, instead of part of it:
function jamsho(id)
{
var $this = $(id);
alert($this.height());
if ($this.height() != 30)
{
$this.stop().animate({height:30},700);
divheight = $this.height();
}
else if ($this.height() == 30)
{
$this.animate({height:divheight},700);
}
}

I don't think you can apply jQuery animations to non-jQuery Objects
function jamsho(id) {
alert($(id).css("height");
if($(id).css("height")!=30)
{
$(id).stop().animate({height:30},700);
divheight=$(id).css("height");
}
else if ($(id).css("height")==30)
{
$(id).animate({height:divheight},700);
}
}

Try something like this:
var $div = $('#linksbox'),
divHeight = $div.height();
$('#Titr').click(function() {
if (!$div.hasClass('expanded')) {
$div.animate({height: 40}, 700, function() {
$(this).addClass('expanded');
});
}
else {
$div.animate({height: divHeight}, 700, function() {
$(this).removeClass('expanded');
});
}
});
http://jsfiddle.net/ZqEZ5/
A few notes:
no need to use document.getElementById with jQuery
don't use inline event handlers onClick.
Hope it helps.