Customize scrolling with buttons - javascript

I am trying to achieve the following look for a box that can scroll up and down:
and not the scroll bar on the side. Is this possible that when they click on the up arrow or hover over it, it scrolls up and the same for the down arrow? as well as if they use the scrolling button?

This is just a simple example, I hope it can help you.Fiddle
The only code jQuery you need is:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#prev').click(function(){
$('li:last').detach().prependTo('ul').css({'margin-top':'-=100px'})
$('li:first').stop().animate({'margin-top':'0px'},1000)
})
$('#next').click(function(){
$('li:first').stop().animate({'margin-top':'-=100px'},1000,function(){
$(this).detach().css({'margin-top':'0px'}).appendTo('ul')
})
})
})
</script>
If you want to build pure css arrows visit this site: link
And your result will be fiddle
Sometimes the simplicity is the best thing..by

This question provides an jQuery Solution for Scrolling a <div> element on click.
It seems to be flexible so you can customize the scroll step for each click.
How to make a scrolable div scroll on click and mouseover using jQuery

Related

Vertical expanding pop up window with javascript or jquery

I am trying to find a way to enable my pop up window expand in a similar fashion as the Facebook Birthday popup expands. If you login to your Facebook page and click the "others" link next to where it shows how many of your friends have birthdays today, you will notice the pop up window shows up very small and then grows in a vertical fashion.
How am I able to do this?
I created a fiddle to show what I have so far.
https://jsfiddle.net/05w8fpL5/
I have added..
.fadeIn("slow");
and
.fadeOut("slow");
So far which I like, but I wish I had some say so on how long it took to fadeIn and Out.
Does anyone know how I could accomplish this?
You can achieve this using the .slideUp() and .slideDown events in Jquery. This will provide the vertical expanding animation that you are looking for. So change your .fadeIn and fadeOut functions, an important note that the slide functions do not work with min-height, you will need to remove that CSS from .admin_help_popup for this to work:
$('.admin_popup').on('click',function(){
$(".light_admin,.white_overlay").slideDown("slow");
});
$('.close_admin_popup').on('click',function(){
$(".light_admin,.white_overlay").slideUp("slow");
});
If it's completely necessary you have that min-height property, you can set min-height back to it's default value after .slideDown. You can try and make it smoother by using .animate(). Make sure to set mine-height to 0px on the slide up:
$('.admin_popup').on('click',function(){
$(".light_admin,.white_overlay").slideDown("slow", function(){
$(".admin_help_popup").animate({"min-height": "380px"}, "fast");
});
});
$('.close_admin_popup').on('click',function(){
$(".admin_help_popup").css("min-height", "0px");
$(".light_admin,.white_overlay").slideUp("slow");
});
Basic SlideUp/Down Fiddle Example without min-height
Fiddle example with min-height

how to show div when scroll reach?

divs are showing underneath one bye one of DIV
is there any option to show each .slide on the basis of mouse scrolling ?
go to underneath while scroll up
http://jsfiddle.net/WQ3hE/
You can check out the current scroll top, and then based on that, fire a jQuery code to activate the current tab. That's possible. A few things are unclear about your question. First being, this looks like a homework question. We would like to know what you have done so far. Secondly, you didn't provide what you need to do after the scroll.
$(document).ready(function(){
$(window).scroll(function(){
if (window.scrollY > 100)
$(".slide[data-slide='2']").height(2000);
});
});
Fiddle: http://jsfiddle.net/praveenscience/WQ3hE/1/

jQuery UI menubar, position submenu absolute left

I have created a jQuery UI navigation menu, using the menubar widget. It works how I expected except I would like it to behave slightly differently. As you can see here http://jsfiddle.net/hcharge/DebVr/ the submenu expands out and is positioned relative to the link that was clicked.
I would like it to expand out and stick to the left of the navigation bar, no matter which link was clicked, the submenu will always stay the same width. Like this image...
I've tried setting a position relative to the container and absolutely positioning the submenu, however I think that jQuery UI positioning is overriding this. Any advice would be great, cheers.
Edit: this needs to be done with JS as it has to be clicks and not hover actions that trigger the dropdowns
Why don't you do it all only with CSS?
See http://jsfiddle.net/DebVr/8/
Note: the background is blue in order to see the white borders.
Edit:
If you want some functionality, you can add it later, but I think that the basis should be with CSS.
See my code with some functionality here: http://jsfiddle.net/DebVr/11/
var links=$('#bar1>li>a').each(function(index,obj) {
obj.tabindex=index+1;
});
$('#bar1>li>a').focus(
function(){$(this).siblings('ul').show();}
);
$('#bar1>li>a').blur(
function(){$('#bar1>li>ul').hide();}
);
Edit 2:
If you want to hide again the submenu when clicked, use the following code:
var links=$('#bar1>li>a').each(function(index,obj) {
obj.tabIndex=index+1;
});
$('#bar1>li>a').focus(function(){
$(this).siblings('ul').addClass('show');
});
$('#bar1>li>a').mousedown(function(){
$(this).siblings('ul').toggleClass('show');
});
$('#bar1>li>a').blur(function(){
$(this).siblings('ul').removeClass('show');
});
And CSS:
#bar1>li>ul.show{
display:block;
}
See it here: http://jsfiddle.net/DebVr/16/
Edit 3:
In the code above, I replaced obj.tabindex with obj.tabIndex, and updated the jsfiddle.
The problem is that if you click on the submenu, the anchor loses focus and then the submenu dissapears. On Chrome it can be easily fixed setting the focus event to #bar1>li instead of #bar1>li>a, but then the event doesn't work on firefox... I'm working on a solution, but meanwhile you can use http://jsfiddle.net/DebVr/16/.
Edit 4:
Finally, the fixed code: http://jsfiddle.net/DebVr/18/
It works on Chrome, Firefox and IE.

How to make to the top of the page button in javascript?

I would like to know how to make a jquery button with the function scrooling to the top of the page. This button is usually found on the bottom of the page.
Preferably, is there a module for Drupal 6.0?
Thanks in advance for any help.
$('#scroll-to-top').click(function() {
$('html, body').scrollTop(0);
});
If you want it to scroll up nicely, do this:
$('#scroll-to-top').click(function() {
$('html, body').animate({
scrollTop: 0
}, 300);
return false;
});
Is there a reason you need to use javascript for this? You can do it purely through html by setting an anchor at the top of the page:
<a name="top"></a>
and then wherever you want to provide a link to the top you can use a regular a tag with an href:
Top!
hope this helps.
Easiest way is to add an id to the html/body like..
<html id="top">
..and then add a link to it..
Top
While a lot of people do put it at the bottom, lately I've seen a lot of people put it fixed on the page, and and showing it when you scroll down a little, like this.
Don't use Javascript. Add a <a name="top"></a> to the top of your page, and for the clickable link use Top.
You can achieve the same thing with jQuery and scrollTop, but you shouldn't.
You also probably don't need a "Top" button. Nobody uses them, and they don't add any useful functionality to your site. There is already a "top" button on the keyboard, "Home".

Just like Stackoverflow, Some floating text box at the top of webpage

I am not sure whether Stackoverflow is the right place for this question, but I think it has something to do with Javascript.
Here is what I want to add to my webpage: a floating text box at the top of the webpage, you can close it by clicking the "X".
Just like the YELLOW BOX in the following picture (Welcome to Q&A blah blah....):
I tried to Google but I dont know the right phrase for this.
I have read these two questions: CSS to achieve a similar fixed floating div thast always on top of other divs - like stackoverflow does? and div with fixed position.
But How to add the close it by clicking the "X" button at the right?
Also, I like the color of Stackoverflow's floating text box so much. What the color is it?
Can someone give me the code that Stackoverflow uses?
Thanks a lot!
To add a closing button you could use javascript or jQuery if you use jQuery, you would do something like :
HTML:
<div id="yellowbar">
<div id="xbtn">x</div>
</div>
javascript:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <!-- load jquery-->
<!--jquery code-->
<script>
$(function(){
$("#xbtn").click(function(){
$("#yellowbar").hide();
});
});
</script>
simple example: http://jsfiddle.net/mazlix/dcY2A/2/
Let's say you have a div at the top of your page with an X button like so:
<div class="floatingBox" id="message1">
<span class="message">Your message</span>
<img src="x-button.png" id="closeButton"/>
</div>
You can make the close button hide the message box using jQuery like so:
$(function() {
$('#closeButton').click(function() {
$('#message1').hide();
});
});
This is definitely the right place to ask this question!
The background color of the floating box is: F4A83D
The border color of the floating box is: D6800C
The text color in the floating box is: 735005
Here's a fiddle demo:
http://jsfiddle.net/UnsungHero97/FQ3fz/
Note that I'm using jQuery. If you want a pure JavaScript solution, let me know :)
I hope this helps.
Hristo
You can check out meerkat plugin.
http://www.jarodtaylor.com/meerkat/howto/
Here!
DEMO
$(document).ready(function() {
// add some 'if unknown user' check.
var infoH = $('#infobar').height();
$('#infobar').animate({top:'0px'},1000);
$('#infoclose').click(function(){
$('#infobar').animate({ top:'-'+infoH },1000);
});
// close 'if'
});
The only difference is that in my demo the bar is positioned absolutely, but you can adjust the css as you like.
P.S. are the colors ok? ;)

Categories