why is this not working?
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
if( jQuery(".page").height() < jQuery(window).height() ) {
jQuery(".backtop").hide();
}
else {
jQuery(".backtop").show();
}
});
</script>
I'm using two frameworks, mootools and jquery. I don't know how to use mootools and it must be there. I know a little of jquery and just want the "back to top" button to appear when the body (.page) is bigger than the window.
Can anybody help me???
EDIT: CAN ANYONE GIVE ME A MOOTOOLS SIMILAR SCRIPT?????
http://jsfiddle.net/yyEPR/
This code works.I copied the code from http://briancray.com/2009/10/06/scroll-to-top-link-jquery-css/
Is .backtop a class or the id of the element? to access the id try $("#backtop").hide();
Good luck and HTH.
-- Joe
Related
I would like for an effect to happen (a certain <div id="posts"> to translate left) when clicking on any link of my page. I was wondering if there was a way to do this with javascript. The only thing I thought about was the function but to add the attribute onclick="myFunction" to all of my links would be so long..
Maybe there is a pre-made js function that works on any link?
I also thought about using CSS a:active but I don't think that would be the best idea.
Thanks for the replies! :)
You can use jQuery to look for clicks on the <a> element, and call a function from there:
$('a').click(function() {
// code to translate div left
});
You can use jQuery to make things work like this:-
$('a').click(myfunction);
function myFunction() {
//do click event stuff here :)
}
If you need a pure JavaScript alternative, I'm not sure if this will work but here's something you can try:
var a = document.getElementsByTagName("p");
for(var i=0; i<p.length; i++){
p[i].onclick = function(){
myFunction();
}
}
function myFunction() {
//do click event stuff here :)
}
For a better understanding, you can refer to http://jsbin.com/onaci/
I'm sorry if I misunderstood you. If so, please correct me.
Thanks
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 create a overlay dialog box using CSS . I wrote the css but I am not able to display the overlay dialog box. Any help would be greatly appreciated.
Check out my attempt here. Also this should work in IE9 and firefox.
http://jsfiddle.net/tGDKT
why not just use jQuery UI's dialog:
http://jsfiddle.net/maniator/tGDKT/15/
$(function() {
$('.clickme').click(function() {
$('iframe').dialog();
});
});
You could also attach the method in the javascript, unobtrusive style. Give the <a> an id or:
$('a').click(calculateEmbeddedWindowSize);
... would call the function for every link on the page.
I keep getting "calculateEmbeddedWindowSize is not defined" in the console. Your javascript does not seem to be there at all on the page.
Edit - Try this: http://jsfiddle.net/tGDKT/7/
Ok, I've looked through all the questions regarding this and I've tried several of the suggestions to no avail, so I'm hoping someone can shed more light on my problem.
OUTLINE OF THE ISSUE:
I'm running two Nivo sliders in a tabbed box. The code I have works in all the normal browsers, but some reason IE7 doesn't like the code I have and won't register the .click(function(e) when the tab is selected.
HERE IS THE CODE:
Part 1 - this loads the slider gallery on page load on the first tab:
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
Part 2 - this is one IE7 has an issue with. This is for the other tabs so the gallery won't load until the tab is clicked. For some reason IE7 doesn't like this:
<script type="text/javascript">
$(document).ready(function(){
$('#gallery3-link').click(function(e){
$('#gallery1').nivoSlider();
return false;
});
});
</script>
THIS IS WHAT I'VE TRIED SO FAR:
I've tried using the $("#ClickMe").live('click', function() which didn't work as well as the $("body").delegate("p", "click", function() which were the two main solutions I saw people using to get this to work in IE7. When I was debugging I also set an alert to make sure IE was registering the click function:
$('#target').click(function() {
alert('Handler for .click() called.');
});
This had no effect. When you clicked on the tab, it didn't alert which confirmed the click function wasn't working. I've spent quite a while digging around for a solution to this and am plum out of resources. I thought it might something with the code, or some other work around - most of the sites I referenced were from circa 2006 or 2007. Not that JS has changed that much, but I was hoping maybe someone found a simplier solution in the last 4 years.
any help would greatly be appreciated.
D
Without seeing what you're actually working with, possibly you could try preventDefault() instead of return false;
<script type="text/javascript">
$(document).ready(function(){
$('#gallery3-link').click(function(e){
e.preventDefault();
$('#gallery1').nivoSlider();
});
});
</script>
I am guessing it is an error before that, that is causing the issue. Are there any errors on the page? Have you tried putting a simple alert('test') where the click function is set? If so, does it work?
EDIT:
From the other things you reference which I see when I did a search is the person was using IETester and it worked fine in regular IE7 and IE8. Are you using a real version of IE7?
The best solution I found was to simply load all the galleries on page load using the:
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
It does add some time to the page load time - just about a 1/2 second more, but it solves the problem in IE7.
Thanks for everybody's help in this.
D
I just ran into this same bug, none of the other answers here were satisfactory. I solved this myself by using
$('body').click(function() { ... });