I have a "a" element that I want to scroll left on hover. To do this I remove the first character and append it to the end of the string.
How can I continuously fire up the scroll function?
Mouse enters element -> scroll() is fired until mouse leaves the element or user clicks on it.
html:
this text scrolls on hover
jQuery:
$(".scrollthis").hover(function(){
scroll($(this));
});
function scroll(ele){
var s = $(ele).text().substr(1)+$(ele).text().substr(0,1);
$(ele).text(s);
}
Use setInterval() to call it repeatedly from mouseenter, then clearInterval() to stop it on mouseleave:
var intervalID;
$(".scrollthis").hover(function(){
var $this = $(this);
intervalID = setInterval(function() {
scroll($this);
}, 100);
}, function() {
clearInterval(intervalID);
});
Note that you don't need to use $(ele) in your scroll() function because ele is already a jQuery object:
function scroll(ele){
var s = ele.text().substr(1)+ele.text().substr(0,1);
ele.text(s);
}
Demo: http://jsfiddle.net/hTBZn/
You can make your scroll() function a bit neater if you use the callback syntax of the .text() method (or even move that one line directly into the .hover code):
function scroll(ele){
ele.text(function(i,val) { return val.substr(1) + val.substr(0,1); });
}
Demo: http://jsfiddle.net/hTBZn/1/
Here's the full code, you can try it out as a jsfiddle
function scroll(ele){
var s = $(ele).text().substr(1)+$(ele).text().substr(0,1);
$(ele).text(s);
}
scrollInterval = null;
function startScrolling(e) {
if (!scrollInterval) {
scrollInterval = setInterval(function(){
scroll(e)
},100);
}
}
function stopScrolling(e) {
clearInterval(scrollInterval);
scrollInterval = null;
}
$(".scrollthis").hover(function(){
startScrolling($(this));
});
$(".scrollthis").mouseout(function(){
stopScrolling($(this));
});
$(".scrollthis").mousedown(function(){
stopScrolling($(this));
});
css
div.container{
width: 130px;
}
div.title-holder {
width: 130px;
height:20px;
text-align:center;
background: silver;
overflow:hidden;
position: relative;
}
div.title-holder a {
position: relative;
white-space:nowrap;
left: 0px;
}
div.image{
background: brown;
width: 100%;
height: 100px;
}
html
<div class="container">
<div class="title-holder">
long text that needs to scroll, long text that needs to scroll, long text that needs to scroll
</div>
</div>
js
$(function(){
var scroll_text;
$('div.container').hover(
function () {
var $elmt = $(this);
scroll_text = setInterval(function(){scrollText($elmt);}, 5);
},
function () {
clearInterval(scroll_text);
$(this).find('div.title-holder a').css({
left: 0
});
}
);
var scrollText = function($elmt){
var left = $elmt.find('div.title-holder a').position().left - 1;
left = -left > $elmt.find('div.title-holder a').width() ? $elmt.find('div.title-holder').width() : left;
$elmt.find('div.title-holder a').css({
left: left
});
};
});
Related
this the CSS I use.
.setting-box
{
position: fixed;
left:-200px;
top:0;
width: 200px;
z-index: 1000;
min-height: 100vh;
}
.toggle-setting
{
position: absolute;
right: -34px;
top: 6em;
background: #fff;
border-radius: 0px 5px 5px 0;
text-align: center;
cursor: pointer;
}
I tried a lot of things but it doesn't work!
that code works very well but.
except when I click on the page the setting box doesn't close
$('.setting-box .toggle-setting').on('click',function () {
$(this).parent('.setting-box').toggleClass('open');
if ($(this).parent('.setting-box').hasClass('open')) {
$(this).parent('.setting-box').animate({
left:0,
},1000);
} else {
$(this, 'body').parent('.setting-box').animate({
left:'-200'
},1000);
}
});
You can try this.
EDIT
var clicked = false;
$('.setting-box .toggle-setting').on('click',function () {
if (clicked == false) {
$(this).parent('.setting-box').animate({
'left' : '0',
},1000);
clicked = true;
} else {
$(this).parent('.setting-box').animate({
'left' : '-200px',
},1000);
clicked = false;
}
console.log(clicked);
});
$(document).click( function () {
var target = $(event.target);
if (!target.is(".toggle-setting") && !target.is('.setting-box') && clicked == true) {
$('.setting-box').animate({
'left' :'-200px',
},1000);
clicked = false;
console.log(clicked);
}
});
the first function do toggle setting box;
$('#gear-button').click(function() {
$(".setting-box").toggleClass("display-block");
});
second function hide setting box on document click (body click)
// hide setting box on body click
$(document).on('click', function() {
$(".setting-box").removeClass("display-block");
});
the third function stop the click event when the user clicks on a button or setting box to prevent document click
$("#gear-button, .setting-box").click(function(e) {
e.stopPropagation();
})
In general, you can use this template to add your own animation and classes.
the full example :
JSFiddle
You can place the settings block in another block, place the settings in the align:center;,
add from this from the z-index:; and make when you click on the gear, or anywhere, so that this block takes the style of display:none;. This may help you.
I am trying to create an expandable rollover but to interact with elements inside. So what I have here is an expandable div and when is expanded another div is shown "x". What I want is when I click on #wrap to go on google and when I click on #button to go on yahoo. How you can see, now if I am over "x" I am going out of #wrap area and going as mouseout. Any idea how to fix this?
https://jsfiddle.net/Ln6q9q9b/
<script>
$(document).ready(function() {
$("#wrap").hover(
//on mouseover
function() {
$(this).animate({height: '+=250'}, 'slow');
$('#button').css('display', 'block');
expanded = true;
console.log("expanded is " + expanded);
},
//on mouseout
function() {
$(this).animate({height: '-=250px'}, 'slow');
$("#button").hide();
expanded = false;
console.log("expanded is " + expanded);
}
);
$('#wrap').on('click', function(){
window.open('http://google.com', 'click', 'window settings');
return false;
console.log('click');
});
if(expanded = true){
$("#button").on('click', function(){
window.open('http://yahoo.com', 'click', 'window settings');
return false;
});
};
});
</script>
<style type="text/css">
#wrap{
width: 900px;
height:50px;
overflow:hidden;
background: black;
}
#button{
position: absolute;
color: white;
left: 10;
top: 10;
width: 10px;
height: 10px;
cursor: pointer;
}
</style>
<body>
<div id="wrap">
</div>
<div id="button">X</div>
</body>
Add the button inside wrap.
And give position: relative; to wrap.
https://jsfiddle.net/afelixj/Ln6q9q9b/1/
Not 100% sure what you're trying to achieve, but take a look at relatedTarget.
For mouseout, indicates the element being entered; for mouseover,
indicates the element being exited.
To your mouseout listener you could add
function (evt) {
if(evt.relatedTarget.id === "button") return;
$(this).animate({height: '-=250px'}, 'slow');
//etc;
}
The following seems to work
$(document).ready(function() {
var expanded = false;
$("#wrap").hover(
//on mouseover
function() {
if (expanded) { return; }
$(this).animate({height: '+=250'}, 'slow');
$('#button').css('display', 'block');
expanded = true;
console.log("expanded is " + expanded);
},
//on mouseout
function(evt) {
if (evt.relatedTarget.id === "button") { return; }
$(this).animate({height: '-=250px'}, 'slow');
$("#button").hide();
expanded = false;
console.log("expanded is " + expanded);
}
);
$('#wrap').on('click', function(){
window.open('http://google.com', 'click', 'window settings');
return false;
console.log('click');
});
$("#button").on('click', function(evt){
window.open('http://yahoo.com', 'click', 'window settings');
return false;
});
});
I've added if (expanded) { return; } to the mouseover listener too, and removed the if (expanded = true) check entirely.
If I understand you right, all you need to do is put the #button inside the #wrap div.
<div id="wrap"><div id="button">X</div></div>
Leave the rest the same and it seems to work as you want.
I have some code that shows a div with a message in it when button is clicked. I want the div to disappear after a few seconds.
I have tried to achieve this adding $(this).delay().hide(500); in the .notify function but it doesn't work.
$.fn.notify = function(settings_overwrite) {
settings = {
placement: "top",
default_class: ".message",
delay: 0
};
$.extend(settings, settings_overwrite);
$(settings.default_class).each(function() { $(this).hide(); });
$(this).show().css(settings.placement, -$(this).outerHeight());
obj = $(this);
if (settings.placement == "bottom") {
setTimeout(function() { obj.animate({ bottom: "0" }, 500) }, settings.delay);
}
else {
setTimeout(function() { obj.animate({ top: "0" }, 500) }, settings.delay);
}
}
/** begin notification alerts
-------------------------------------**/
$(document).ready(function($) {
$('.message').on('click', (function() {
$(this).fadeTo('slow', 0, function() {
$(this).slideUp("slow", function() {
$(this).remove();
});
});
}));
});
$(document).ready(function() {
if (document.location.href.indexOf('#notify_success') > -1) {
$("#notify_autopop").notify({
delay: 500
});
}
});
You can use setTimeout function
You have to store the divobj in a variable and then use it inside the setTimeout function
$('div').click(function(){
//show the message
var divObj = $(this);
setTimeout(function(){
divObj.hide();
},3000);
});
check the fiddle link
https://jsfiddle.net/uujf8hmq/
You can write your code to hide the div in the 2nd argument of show() methos which is a complete callback. You need to hide() the element in this callback. You can put necessary timeout before hide().
You can use CSS3 animation/transition instead of jquery's animation. and you can use setTimeout to fade message after sometime.
See the below code
JS
$.fn.notify = function(message, settings_overwrite){
var settings = {
placement:"top-left",
delay: 2000
};
$.extend(settings, settings_overwrite);
var $this = $(this);
$this.removeClass('bottom-left top-left');
$this.text(message);
$this.addClass(settings.placement + ' display');
$this.on('click', function(){
$this.removeClass('display');
});
setTimeout(function(){
$this.removeClass('display');
}, settings.delay);
}
$(document).ready(function ($) {
$('body').on('click', '.create-message', function(){
$('.message').notify($('#msg').val(), {
placement: $('#pos').val()
});
});
});
HTML
Position :
<select id="pos">
<option value="top-left" selected>Top Left</option>
<option value="bottom-left">Bottom Left</option>
</select>
<br/>
<textarea id="msg"></textarea>
<br/>
<button class="create-message">show message</button>
<div class="message"></div>
CSS
.message{
position: fixed;
width: 100px;
height: 50px;
background: green;
color: white;
padding: 3px;
border-radius: 3px;
opacity: 0;
-webkit-transition: opacity 1s;
transition: opacity 1s;
}
.message.display {
opacity: 1;
}
.message.top-left {
top: 10px;
right: 10px;
}
.message.bottom-left {
bottom: 10px;
right: 10px;
}
jsfiddle link - http://jsfiddle.net/jigardafda/ac5wyfo9/3/
Usually we do not use $(document).ready(function() {....}(); twice on a single page.
Try writing code to hide the div inside the same $(document).ready(function() {.....}() after the .show() function.
You can use either .hide() or setTimeout() functions to hide the div.
So I'm building a website for a friend and I want it to scroll on href clicks, that is easy, I managed to do it with smooth animation. But the problem is, when I load the page and click on the FIRST link, scrolling is not precise, and after I click on anything after Test1 is pressed, its not precise again.
Since it's hard for me to explain, ill post jsfiddle link so you can test it.
$(document).ready(function() {
$('.click').click(function(e){
// prevent default action
e.preventDefault();
scrollToElement( $(this).attr('href'), 1000 );
});
var scrollToElement = function(el, ms){
var speed = (ms) ? ms : 600;
$('html,body').animate({
scrollTop: $(el).offset().top-102
}, speed);
}
});
Full code here: http://jsfiddle.net/pxmfs78k/
How to test my problem:
Press any link first time, and then you will see that the div is not positioned where I wanted it to be, and if you press the same link again, it will position itself correctly, and after that there are no problems in clicking until you reload or press test1 link, the first one.
So any idea what might cause the problem?
And I read this https://stackoverflow.com/questions/19750702/jquery-scrolling-issues-with-scrolltop thread and I couldn't fix my problem with the explanation given there.
It's because you're setting the nav to sticky, thus, removing it from the flow, and the whole content jumps up by 102px, to fix this, give the sticky class to the body instead of the nav and use padding to fight against it. http://jsfiddle.net/pxmfs78k/1/
CSS
body.sticky {
padding-top: 102px;
}
body.sticky .nav {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
}
JS
$(document).ready(function () {
var stickyNavTop = $('.nav').offset().top;
var stickyNav = function () {
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('body').addClass('sticky');
} else {
$('body').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function () {
stickyNav();
});
});
$(document).ready(function () {
$('.click').click(function (e) {
// prevent default action
e.preventDefault();
scrollToElement($(this).attr('href'), 1000);
});
var scrollToElement = function (el, ms) {
var speed = (ms) ? ms : 600;
$('html,body').animate({
scrollTop: $(el).offset().top - 102
}, speed);
}
});
I am having trouble with jQuery functionality on my website. What it does, is that it uses the window.scroll() function to recognize when the windows changes its scroll position and at the change calls a few functions to load data from the server.
The problem is the .scroll() function is called as soon as there is even a little change in the scroll position and loads data at the bottom; however, what I wish to achieve is to load new data when the scroll/page position reaches at the bottom, like it happens for Facebook feed.
But I am not sure how to detect scroll position using jQuery?
function getData() {
$.getJSON('Get/GetData?no=1', function (responseText) {
//Load some data from the server
})
};
$(window).scroll(function () {
getData();
});
You can extract the scroll position using jQuery's .scrollTop() method
$(window).scroll(function (event) {
var scroll = $(window).scrollTop();
// Do something
});
You are looking for the window.scrollTop() function.
$(window).scroll(function() {
var height = $(window).scrollTop();
if(height > some_number) {
// do something
}
});
Check here DEMO http://jsfiddle.net/yeyene/Uhm2J/
function getData() {
$.getJSON('Get/GetData?no=1', function (responseText) {
//Load some data from the server
})
};
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
alert("bottom!");
// getData();
}
});
$(window).scroll( function() {
var scrolled_val = $(document).scrollTop().valueOf();
alert(scrolled_val+ ' = scroll value');
});
This is another way of getting the value of scroll.
Now that works for me...
$(document).ready(function(){
$(window).resize(function(e){
console.log(e);
});
$(window).scroll(function (event) {
var sc = $(window).scrollTop();
console.log(sc);
});
})
it works well... and then you can use JQuery/TweenMax to track elements and control them.
Store the value of the scroll as changes in HiddenField when around the PostBack retrieves the value and adds the scroll.
//jQuery
jQuery(document).ready(function () {
$(window).scrollTop($("#<%=hidScroll.ClientID %>").val());
$(window).scroll(function (event) {
$("#<%=hidScroll.ClientID %>").val($(window).scrollTop());
});
});
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
$(window).scrollTop($("#<%=hidScroll.ClientID %>").val());
$(window).scroll(function (event) {
$("#<%=hidScroll.ClientID %>").val($(window).scrollTop());
});
});
//Page Asp.Net
<asp:HiddenField ID="hidScroll" runat="server" Value="0" />
You can add all pages with this code:
JS code:
/* Top btn */
$(window).scroll(function() {
if ($(this).scrollTop()) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
}
});
var top_btn_html="<topbtn id='toTop' onclick='gotoTop()'>↑</topbtn>";
$('document').ready(function(){
$("body").append(top_btn_html);
});
function gotoTop(){
$("html, body").animate({scrollTop: 0}, 500);
}
/* Top btn */
CSS CODE
/*Scrool top btn*/
#toTop{
position: fixed;
z-index: 10000;
opacity: 0.5;
right: 5px;
bottom: 10px;
background-color: #ccc;
border: 1px solid black;
width: 40px;
height: 40px;
border-radius: 20px;
color: black;
font-size: 22px;
font-weight: bolder;
text-align: center;
vertical-align: middle;
}
$('.div').scroll(function (event) {
event.preventDefault()
var scroll = $(this).scrollTop();
if(scroll == 0){
alert(123)
}
});
This code for chat_boxes for loading previous messages
GET Scroll Position:
var scrolled_val = window.scrollY;
DETECT Scroll Position:
$(window).scroll
(
function (event)
{
var scrolled_val = window.scrollY;
alert(scrolled_val);
}
);