I'm fairly new to JavaScript/jQuery/AJAX, so I suspect the issue is some typo I'm not seeing. It was working fine, but at some point during editing the hide() + show() methods stopped working (tested it in Firefox + Chrome). I've pored over it many times and can't see what's wrong.
script.js
$(document).ready(function(){
$('p').click(function() {
$(this).hide();
})
$('#nav li a').click(function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').hide('fast',loadContent);
function loadContent() {
$('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content').show('normal');
}
return false;
});
});
In my index.html page the following script includes are in the <head> section:
<script src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
You need to include jQuery before your script.js.
JavaScript code is executed synchronously. In your example, $ is (or at least should be) undefined, and of course undefined has no jQuery like methods.
Also, one of your callbacks is defined as showNewContent(). The parenthesis at the end will call that function and pass its results back as the callback, which is not what you want in this circumstance.
Instead, drop the () to pass just the reference to the function.
Change your index.html stuff to
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="script.js"></script>
and your code in script.js to:
$(document).ready(function(){
$('p').click(function() {
$(this).hide();
})
$('#nav li a').click(function(){
var toLoad, loadContent, showNewContent; //keep the variable scope local
toLoad = $(this).attr('href')+' #content';
$('#content').hide('fast',loadContent);
loadContent = function() {
$('#content').load(toLoad,'',showNewContent)
}
showNewContent = function() {
$('#content').show('normal');
}
return false;
});
});
Related
I have 2 jquery scripts, but they aren't cooperating, and i dont know why.
My first script "scrolltop.js:
$(function() {
$("a").click(function(){
alert("test");
var target = $(this).attr('href');
var strip = target.slice(1);
if(this.hash && strip=="wall_menu"){
$("html, body").animate({
scrollTop: $("#wall_menu").offset().top
}, 1200);
return false;
}
}); });
It works fine... but stops while i add this script "changecolor.js":
$(document).ready(function() {
var $changeBtn1 = $("#content_0 div.button1");
var strNewString = $('body').html().replace(/\is/g,'<spon>is</spon>');
$('body').html(strNewString);
$(".button1").click(function(){
$('spon').css("color", "red");
setTimeout(function(){
$('spon').css("color", "");
},3000);
}); });
When i add both scripts, works only "changecolor.js", even alert "test" from first script doesnt work :(
This is my head from .html file:
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type='text/javascript' src="scripts/scrolltop.js"></script>
<script type='text/javascript' src="scripts/changecolor.js"></script>
My web browser console, does not say where the problem is.
This is probably because you're replacing the whole body ($('body').html(strNewString);) in changecolor.js, and therefore the events registered (click()) will no longer be bound to a DOM element.
I use codes with blink;
Jquery;
<script type="text/javascript">
var blink = function(){
$('#blinker').toggle();
};
$(document).ready(function() {
setInterval(blink, 100);
});
</script>
Page;
[full_column align="center"][su_button url="#basvuru" class="fancybox" background="#b21f30" size="6"] <div id="blinker">ÜCRETSİZ PROGRAMA BAŞVUR</div>[/su_button][/full_column]
Website: www.varsiteam.com
Try with :
<script type="text/javascript">
$(document).ready(function() {
var blink = function(){
$('#blinker').toggle();
};
setInterval(blink, 100);
});
</script>
If you look at console you will see this error:
Uncaught TypeError: undefined is not a function
To fix that you have to put your function inside of $(document).ready event. When you call $('#blinker').toggle(); it tries to use jQuery object which is undefined if you not put it in $(document).ready event. That is how jQuery works.
When you're working in WordPress, jQuery is loaded in a no-conflict mode.
So, you'll need to use jQuery and not $.
Your code should be:
var blink = function(){
jQuery('#blinker').toggle();
};
Or if you want to wrap everything in your document ready event:
jQuery(document).ready(function($) {
var blink = function(){
$('#blinker').toggle();
};
setInterval(blink, 100);
});
I always use jquery script directly to joomla's modules.
Lately, I switched from using Joomla2 to Joomla3. Somehow, scripts are not working anymore in modules. Anybody knows why?
(some script still works though)
Example:
This is what I am working on.
Intro About Info
<h1 id="intro">Intro</h1>
<p>abcd</p>
<h1 id="about">About</h1>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var jump=function(e)
{
//prevent the "normal" behaviour which would be a "hard" jump
e.preventDefault();
//Get the target
var target = $(this).attr("href");
//perform animated scrolling
$('html,body').animate(
{
//get top-position of target-element and set it as scroll target
scrollTop: $(target).offset().top
//scrolldelay: 2 seconds
},600,function()
{
//attach the hash (#jumptarget) to the pageurl
location.hash = target;
});
}
$(document).ready(function()
{
$('a[href*=#]').bind("click", jump);
return false;
});
</script>
The code gives a smooth scroll on targeted menu id.
If I use above code in Joomla2 module, it works great but doesn't work in Joomla 3.
Any idea?
Mootools is loaded by default in Joomla! 2.5.x. It's an another JS library like jQuery they also use $ symbol. so we need to fix this issue using the jQuery.noConflict() method.
Try to use jQuery this way and recheck.
var $jQ = jQuery.noConflict();
// $jQ is now an alias to the jQuery function
// creating the new alias is optional.
$jQ(document).ready(function() {
$jQ( "div" ).hide();
});
I have rewritten your code here:
<script type="text/javascript">
var jump=function(e)
{
//prevent the "normal" behaviour which would be a "hard" jump
e.preventDefault();
//Get the target
var target = $jQ(this).attr("href");
//perform animated scrolling
$jQ('html,body').animate(
{
//get top-position of target-element and set it as scroll target
scrollTop: $jQ(target).offset().top
//scrolldelay: 2 seconds
},600,function()
{
//attach the hash (#jumptarget) to the pageurl
location.hash = target;
});
}
var $jQ = jQuery.noConflict();
$jQ(document).ready(function()
{
$jQ('a[href*=#]').bind("click", jump);
return false;
});
</script>
This is a simple loading script from nettuts and I tried to modify it to suit my needs.
But I can't get function "res," which resizes loaded elements, to happen BEFORE function shownewcontent runs. Now it resizes after it is visible, which is very bad looking.
But if I place call the function sooner, nothing happens, because the content is not yet loaded.
$(document).ready(function() {
var hash = window.location.hash.substr(1);
var href = $('#menu a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-4)){
var toLoad = hash+'.php #content';
$('#content').load(toLoad);
}
});
$('#menu a').click(function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').hide('slow',loadContent);
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-4);
function loadContent() {
$('#content').load(toLoad,'',showNewContent());
}
function showNewContent() {
$('#content').show("0", res)
}
return false;
});
});
You have res() defined as the callback to show(), meaning it will get called after the show() function completes.
I would change your callback structure so that it contains all of the work you want to do:
$('#menu a').click(function(e) {
var toLoad = $(this).attr('href') + ' #content';
$('#content').hide('slow', function() {
var self = this;
$(self).load(toLoad, '', function() {
res();
$(self).show("0");
});
});
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-4);
e.preventDefault();
}
Then you don't need the function definitions inside your click handler.
FYI, instead of return false;, it would be better to use e.preventDefault(); at the end of your click handler, though. You will have to define e as a parameter to the click callback function. See this for the return false; vs. e.preventDefault() debate.
Additionally, if the resizing is taking a noticeable amount of time, you might want to have the res() function take a call back in the same fashion that show() does. Then you can show the content only once it's loaded and resized.
I have this working jQuery + inline javascript which causes a conflict with existing jQuery.
<script>
var jq=jQuery.noConflict();
function goto(id, t){
jq(".contentbox-wrapper").animate({"left": -(jq(id).position().left)}, 600);
jq('#slide a').removeClass('active');
jq(t).addClass('active');
}
</script>
<a class="active" href="#" onClick="goto('#kr', this); return false">
<a class="active" href="#" onClick="goto('#en', this); return false">
(I've tried to resolve the conflict as you can see but I believe the conflict arises from the inline javascript.)
How can I convert this inline javascript? Thanks.
You can bind it like:
<script>
//var jq=jQuery.noConflict();
function goto1(id, t){
...
return false; // return false to prevent the link's default action
}
// means once your DOM is ready, and a.active is available to be bound
$(document).ready(function() {
// bind all clicks on a.active to the function 'goto1'
$('a.active').click(goto1);
});
</script>
Variable names like goto can be potential causes of confusion later on. Changed it above to goto1.
Inline JS (embed into HTML) is hardly maintainable, I'd suggest:
HTML:
<div id="parent"> <!-- or any other parent el. -->
Anchor
</div>
jQuery:
(function($){ // remap $ to jQuery
$(function(){ // DOM ready
$('#parent').on('click', 'a', function( ev ){
ev.preventDefault();
var krPos = $('#kr').position().left;
$(".contentbox-wrapper").animate({"left": -krPos }, 600);
$('#slide a').removeClass('active');
$(this).addClass('active');
});
});
})(jQuery);
$('.active').on('click', function() {
var $this = $(this);
var id = $this.attr('href');
$(".contentbox-wrapper").animate({"left": -($(id).position().left)}, 600);
$('#slide a').removeClass('active');
$this.addClass('active');
return false;
});
huangism answered it for me.
https://stackoverflow.com/users/1058134/huangism