I have a volusion site. I want to add a scroll-to-top floating. I tried lot of js or css code but it doesn't work. Any suggestion? Thank you in advance.
You can try like this.
<style type="text/css">
.scrollToTop {position:fixed;bottom:100px;right:100px;}
</style>
<a class="scrollToTop" href="javascript:scrollToTop();">Scroll to top</a>
<script type="text/javascript">
function scrollToTop() {
$(window).scrollTop(0); // If you work with jQuery,
document.body.scrollTop = 0; // Or not.
}
</script>
Related
I am fairly new to web development. I am trying to apply jQuery to my website, such that when the page loads up, the heading is animated. But for some reason I am not able to get it working. Here is the javascript code :
$(window).ready(function() {
$("h1").animate({left:'250px'});
});
Here is the relevant HTML code:
<!DOCTYPE html>
<html>
<head>
<title> Welcome! </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="jquery_functions.js"></script>
</head>
<body>
<h1>Hello!</h1>
</body>
</html>
CSS left only works with absolutely positioned elements. If you add position:absolute to your H1 tag, it will work.
$(window).ready(function() {
$("h1").animate({left:'250px'});
});
h1 { position: absolute; }
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<h1>Hello!</h1>
This is because h1 may have a static position. You may need to set a CSS relative or absolute position to that element like
h1 {position: relative}
and this jQuery code will work
$(document).ready(function () {
$("h1").animate({
left: 250
});
});
See JSFIDDLE
I'm new myself but it appears your animate option is missing an argument.
$('img').animate({left: "-=10px"}, 'fast'); is an example. yours tells it how much to move, but you left off the how.
You can try changing
$("h1").animate({left:'250px'});
to
$("h1").animate({marginLeft:'250px'});
maybe $(doucment).ready()
I think it will be work ))
Alright so I only need to learn JQuery for a couple of animations on a site I'm building.
I've been reading the tutorials on the JQuery site and am just trying to implement a simple diagonal move animation.
I'm still extremely new to JQuery (as in, started today) but from everything i understand, the following code should work. What error am i making?
<head>
<script type="text/javascript" src="JQuery.js">
</script>
<script>
$(document).ready(function(){
$("#moveme").click(function(event){
$("#moveme").animate({right: '+=50', bottom: '+=50'}, 1000);
});
});
</script>
</head>
<body>
<div id="moveme">
Move this text
</div>
</body>
Edit:
Added relative property from css and fixed parenthesis issue with document but still not working.
It seems that you forgot some parenthesis to select the elements correctly.
What about that?
$(document).ready(function(){
$("#moveme").click(function(event){
$(this).animate({right: '+=50', bottom: '+=50'}, 1000);
});
});
Edit:
Also, make sure that you are importing the jQuery script library:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
You missed $(document) in the line
$document.ready(function(){
Also
your jquery animate function is changing CSS of your id="moveme"
i'd make sure that in your css you have this.
#id {
position: relative;
}
You can definitely do this:
$(document).ready(function(){
$("#moveme").click(function(event){
$(this).animate({'margin-left': '+=50', 'margin-top': '+=50'}, 1000);
});
});
Working demo here (just click on the div saying 'hello'): http://jsfiddle.net/px2jz/
I got a small script which toggles my nav. But I'm using the nav in more pages. I want jQuery to remember the toggle(show/hide) state so I can use it when navigating.
$(document).ready(function(){
$('ul.second').show();
$('ul.third').hide();
$('ul.first').show();
$('ul.first li.first a').click(function(){
//$('ul.second').slideToggle("");
$('ul.third').slideToggle("");
});
});
You could use either use cookie management or localStorage to store this info across your session. LocalStorage only works with html5 though.
Here's a good article on a plugin that features both, so you don't need to detect yourself if the browser is capable of localStorage or not:
http://upstatement.com/blog/2012/01/jquery-local-storage-done-right-and-easy/
You can also add a hash to the url and detect the hash after page refresh.
More details on hash here
http://benalman.com/projects/jquery-hashchange-plugin/
https://developer.mozilla.org/en/DOM/window.onhashchange
you can do it with slide function of jquery
just design the panel and flip element to your liking with css like this
<style>
.flip {
position:relative;
background-image:url("mybutton");
}
#panel {
background-image:("rabbitimage");
}
</style>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
</head>
<body>
<div class="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>
</body>
</html>
How can I add loading effect on <div>. In this code my members.php is so big file so its take time to load. So I want to show that loading… in my member <div> with effect. my javascript skills are so poor so I don’t know is this a right idea to do this or I have to code in member.php. I am so new and try to learn so please help me. I have tried with some free text javascript effect but I couldn’t find what I looking for. I want some image effect like rounding circle or something like that. Here is my code. I appreciate all answers.
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#member').load('members.php').show();
});
</script>
</head>
<body>
<div id member>Loading…</div>
</body>
jQuery
function showLoading()
{
$('<div class="loading"/>').appendTo('#member');
}
showLoading();
$('#member').load('members.php');
CSS
.loading {
background: url('') no-repeat;
padding: 12px;
}
Replace the url with the path to the loading image you want, and the padding should be half the image area size.
Simple fiddle available here
Thanks in advance for your help.
So I have a fully functioning page, but when I make the following changes, my jQuery accordion stops working on rollover and all of my navigation links (which point to #sections as it's a single-page scrolling site) stop working completely. Here is the deadly code:
<script type="text/javascript">
$(document).ready(function(){
$(document).ready(function () {
$('#fadeDiv').fadeIn(3000);
});
});
</script>
</head>
<body>
<DIV ID="fadeDiv" style="display:none;">
... page here ...
</div>
</body>
All functionality which breaks is WITHIN the fadeDiv. It's worth noting that the links (a href="#section") can be IN a div that fades in and will work fine, but will break if, rather, I fade in the containing div of #section.
Weird.
why are you calling the document ready 2?
Does the jquery file pulled in?
your code should look like this
<script type="text/javascript">
$(document).ready(function() {
$('#fadeDiv').fadeIn(3000);
});
</script>
and add this to your header
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
and i would recomend putting the display none in css