so here is the script:
<script>
var div = $("#gridline1");
$(document.body).mousemove(function(e){
if(e.pageX<630){div.animate({right:'+=1'},1);}
else {div.animate({left:'+=2'},1);}
});
</script>
Its working, but when it gets after the "else" its stop doing the "if" statement.
Please help.
http://jsfiddle.net/nxaFG/
I'm not sure what HTML or CSS you are using, and the effect may depend on those as well. However, I think you can just replace right:'+=1' with left:'-=1'. Here is a working example: http://jsfiddle.net/katylava/kagnr/
Related
JS noob here looking for some help. I've written something extremely basic in able to change a class which would hide a page element. The hide class just has a display none.
I've got it working fine in JS fiddle but when replicating it on my site, nothing happens? What am I doing wrong?
JS Fiddle - https://jsfiddle.net/MattPremier/x8rmn4cb/2/
<script type="text/javascript">
window.onload = function () {
var bookShow = "No";
if (bookShow == "No") {
// execute this code
document.getElementById('booking-show').classList.add('hide-widget');
}
else {
// execute this code
document.getElementById('booking-show').classList.add('show-widget');
}
};
</script>
<div id="booking-show" class="show-widget"><p>WORKING?</p></div>
I would recommend checking your CSS to make sure that the display isn’t otherwise set unless you need it to be set then inside the hide-widget CSS class put:
“display: none !important;”
And also remove show-widget from the object at the bottom as it might be conflicting with CSS.
Note Sorry for the bad formatting of this message as I’m on my cell phone.
I downloaded the jQuery plugin letter-fx (http://tuxsudo.com/code/project/letterfx) and really like what it can do.
However, on my landing page I'm trying to make the different paragraphs appear in sequence. I thought the best way to do that is to delay each paragraph with setTimeout()
I'm a JS/jQuery novice and hoping someone can help me out. Here's the code I have thus far:
$(function(fx1){
$(".fx1").letterfx({"fx":"fade","backwards":false,"timing":50,"fx_duration":"1000ms","letter_end":"restore","element_end":"stay"});
});
$(function(){
setTimeout(fx1,3000);
});
Can anyone show me what I'm doing wrong? Thanks!
Try below code. To use setTimeout you need to pass a function as first param.
$(function(){
var applyAnimation = function(){
$(".fx1").letterfx({"fx":"fade","backwards":false,"timing":50,"fx_duration":"1000ms","letter_end":"restore","element_end":"stay"});
};
setTimeout(applyAnimation,3000);
});
If you look at my website link to website, you will find an ID for the content (#content) and one for the sidebar (#sidebar).
(It's located in "#wrapper > #main > .avada-row > #content/#sidebar")
I have tried to switch order/place so #sidebar comes before #content. I tried with this code:
<script type="text/javascript">//<![CDATA[
$(function(){
$('#sidebar').each(function () {
$(this).insertBefore($(this).prev('#content'));
});
});//]]>
</script>
Here is a JSFiddle example (it works in JSFiddle but not on my website):
JSFiddle
I really hope someone can help me!
NOTE!:
This line of javascript works too in JSFiddle but not on my website:
$('#sidebar').insertBefore($('#content'));
I guess there is no need to use each function?
And sorry - I forgot to say that I know nothing about javascript programming. I just try my best with no luck I guess :/
Best Regards
I can't comment my own question, so I will do it here:
Karl-André - Yeah, I am aware of the error "Uncaught TypeError: undefined is not a function" but i don't know how to fix it.
Arjun - I tried that too but $ is being overriding and therefore is does not work :/
Zessx - Can you help me find out what is overriding $ ?
The code:
jQuery('#sidebar').each(function () {
jQuery(this).insertBefore(jQuery(this).prev('#content'));
});
Did not work when I insert it in head.
Thank you so much! I really appreciate it !!!!!!!!!!!!
Something is overriding the jQuery $ :
> $
undefined
> jQuery
function (a,b){return new n.fn.init(a,b)}
If you change your script by this one, you'll see it works :
jQuery('#sidebar').each(function () {
jQuery(this).insertBefore(jQuery(this).prev('#content'));
});
Now, we need to define what is overriding $.
As a workaround, you still can use this code in your <head>, as mentioned in jQuery doc (search for "Aliasing the jQuery namespace") :
jQuery(function($) {
$('#sidebar').each(function () {
$(this).insertBefore($(this).prev('#content'));
});
});
if you just want to add the content above the selected div just use
$('#sidebar').insertBefore('#content');
-Thanks.
I am trying to implement http://jsfiddle.net/NKgG9/6/ into my website.
It's supposed to fade out a div when the user starts scrolling down. Instead the div just sits there, comlpetely visible and unchanging. I'm a massive newbie to java so figure it's something really basic and fundamental I'm missing.
Here's what I'm doing:
Inside the head tag:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
var targets = $(".scroll_note, .social");
if($(window).scrollTop() > 10){
targets.hide();
}
$(window).scroll(function(){
var pos = $(window).scrollTop();
if(pos > 10){
targets.stop(true, true).fadeOut("fast" );
} else {
targets.stop(true, true).fadeIn("fast");
}
});
});?
</script>
And then inside the body tag:
<div class="scroll_note">Scroll down to see our amazing specials!</div>
Please help me!
Thanks, Alex :)
The other script you include, fadeslideshow.js, calls jQuery.noConflict which removes the global assignment of jQuery to the $ variable. You have a few ways around this:
Remove the call to jQuery.noConflict in fadeslideshow.js. This may break that slideshow script, however.
Use jQuery instead of $ in your JavaScript code above.
Wrap your code in a self-invoking function that remaps the global jQuery to $:
(function($) { /* your code here */ })(jQuery);
You have a ? at the end of your code that is going to throw an error and kill the script. Remove it and you should be all set.
Edit:
I see you posted your site. Your script tag pointing to the google API is malformed. It doesn't start with http:, just starts with //. Fix that, then see where you are
Edit2: Wyatt pointed out this is not true. See his answer.
I am trying to hide Division B on this page. Due to the nature of the Wordpress template, it's kind of difficult to do. I am trying to use javascript in the footer:
$('div#division-2 div.teampage').prev('h2').css("display","none");
This works perfectly on JSFiddle, so I'm not sure what I'm doing wrong. I also created a javascript file with the code. Can someone please give me some guidance?
In the header, you have this code:
var $jquery = jQuery.noConflict();
This disables the $ shortcut. Replace $ with jQuery or $jquery in your code. For example:
jQuery(document).ready(function() {
jQuery('div#division-2 div.teampage').prev('h2').css("display", "none");
});
The reason the code in hide-division.js isn't working is that while it is using $jquery (for $jquery(document).ready, at least; it still needs to use that in the body of the handler), hide-division.js is running before the code calling noConflict.
In your hide-division.js file, code is like:
$jquery(document).ready(function()
{
$('div#division-2 div.teampage').prev('h2').css("display","none")
});
Here $jquery is not defined so the next code is not executing. Please remove jquery and use the following code:
$(document).ready(function()
{
$('div#division-2 div.teampage').prev('h2').css("display","none")
});
Hope this helps you.
just try giving $('div#division-2 h2').css("display","none");
$jquery must not given... its invalid... either $ or jQuery must be given...
This tutorial may help u...