How to add a scroll-to-top floating button in volusion site? - javascript

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

Animating text, when a page loads up with jQuery

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 ))

Unable to make an element move diagonally with jQuery animate()

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/

Remember Toggle state with jQuery after refresh?

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 image effect on div

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

jQuery (and all #links) Breaks When I Make Container/Parent Div .fadeIn on pageload - Why?

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

Categories