see this Fiddle
What i have is few button and div of same class.
When i click a button of a class the div of same class gets scrollIntoView and the .log appears beside the div on its right side.
PROBLEMS
OnClick button the scroll does not happen
The .log does not appear beside div
The small triangle pointer does not appear beside .log
Additions(The thing i want but dont know how do i do it!)
Whenever the .log appears i want it to shake little upand down
which continues to do untill mouseover
After mouseout i want the .log to fadeOut(2000)
FOR downvoters
<button class="a1">Div1</button>
<button class="a2">Div2</button>
<button class="a3">Div3</button>
<button class="a4">Div4</button>
<button class="a5">Div5</button>
<button class="a6">Div6</button>
<div id="container">
<div class="a1">This is div1</div>
<div class="a2">This is div2</div>
<div class="a3">This is div3</div>
<div class="a4">This is div4</div>
<div class="a5">This is div5</div>
</div>
<div class="log">Your have a fatal error.</div>
#container div {
height:250px;
width:250px;
border:2px solid #000;
margin:15px;
}
#container {
margin:20px;
}
.log {
z-index: 1;
display: none;
color: #fff;
background-color: #c04848;
text-align: left;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
max-width:270px;
font-size:15px;
padding:10px;
position: absolute;
}
.log:after {
top: 0;
left: -9px;
border-top: 9px solid #c04848;
border-left: 9px solid transparent;
}
$('button').click(function(){
var c = $(this).attr('class');
var div = $('#container div.'+c);
$(document).scrollTo(div, 1000);
log.css({
top : div.position().top + div.height()/2,
left : div.position().left + 20
}).show();
});
Fixed it
$('button').click(function(){
var c = $(this).attr('class');
var div = $('#container div.'+c);
$(document).scrollTop(div.offset().top);
$('.log').css({
top : div.position().top + div.height()/2,
left : div.position().left + 20
}).show();
});
What I did is changed the scrollTo to scrollTop. I have added a selector to log class because most likely you forgot it.
Shaky effect
var inter;
function bounceOn(){
var pos = $('.log').position().left;
$('.log').animate({left: pos+50},500, function(){$('.log').animate({left: pos},500)})
setTimeout(bounceOn, 1000);
}
Try and make something out it maybe?
http://jsfiddle.net/h76jg/6/
All parts of my answer are shown in this JFiddle
In terms of scrollTo, you were probably looking for scrollTop. Try something like this:
scrollTop: div.offset().top
instead of:
$(document).scrollTo(div, 1000);
Although, Just going by what your writing there, I am going to assume you wanted some sort of smooth transition to the div, correct? Try this instead:
$('html, body').animate({
scrollTop: div.offset().top
}, 1000);
This will create a smooth scroll to the div instead of just moving to it.
For the log section, you forgot to reference the log class. Instead, you tried to reference it like a variable, so the interpreter got confused. Try putting the log css call in a reference, like this:
$('.log').css({...
Hope these help!
Edit: Were you intending something like This for the bounce? (up and down?). Either Case, #Dharman has the right idea with his code. You would just want to add another animation (similar to the scrolling), but put a timeout on the end (so the method will continually repeat)
Since i cannot accept anyone's answer coz i dont like em but thanks for an idea of bounce animation that did worked...
now i have created my own Fiddle And it worked perfetly!
$('button').click(function () {
var c = $(this).attr('class');
var div = $('div.' + c);
$('html, body').animate({
scrollTop: div.offset().top
}, 1000); //thanks to Dylan Corriveau
console.log(div.position().left);
$('.log').css({
top: div.position().top + div.height() / 2,
left: div.position().left + div.width() + 50
}).show();
clearTimeout(inter);
setTimeout(bounceOn, 500);
});
$('.log').mouseover(function () {
clearTimeout(inter);
}).mouseout(function () {
$(this).fadeOut(3500);
});
var inter;
//here is the magic!
function bounceOn() {
var pos = $('.log').position().left;
$('.log').animate({
left: pos + 15
}, 50, function () {
$('.log').animate({
left: pos
}, 50)
})
inter = setTimeout(bounceOn, 215);
}
Related
I'm trying to create a roll up div while mouse is over another div. It opens but I'd like it not to close when leaving through the bottom border. Is it possible using JS or JQuery? Here is my current code:
$("#sell1").mouseenter(function(){
$("#rollup1").css("display","inline");
});
$("#rollup1").mouseleave(function(){
$("#rollup1").css("display","none");
});
$("#sell1").mouseleave(function(){
$("#rollup1").css("display","none");
});
When processing the mouseleave, you can get the dimensions of the element and see whether the event's pageY is below the element:
$("#rollup1").mouseenter(function() {
$("#status").text("Over the element...");
});
$("#rollup1").mouseleave(function(e) {
var $this = $(this);
var bottom = $this.offset().top + $this.height();
if (bottom < e.pageY) {
$("#status").text("Left via bottom edge");
} else {
$("#status").text("Left NOT via bottom edge");
}
});
#rollup1 {
width: 50px;
height: 50px;
border: 1px solid black;
}
<div id="status"> </div>
<div id="rollup1"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
I would like to have a scroll to top arrow fixed in my page using angular bootstrap.
Currently I have
<div class="col-md-1">
<div class="affix">
<div>
<a th:href="#{/}" href="#" target="_self"><img id="image" src="source" alt="yoli" width="50px" /></a>
</div>
Scroll to top
</div>
</div>
<div class="col-md-6">
<div id="search-bar" ng-include="blabla"></div>
<li ng-repeat="something"></li>
</div>
However when the "Scroll to top" is click it only works first time since the url changes to ...#search-bar and when you click it again nothing happens. So how do I scroll to top without changing the url?
And also question how do I make the "Scroll to top" only show when the search-bar is not showing?
I was thinking about using $anchorScroll and using id'ed numbers on li and if it's higher then "element-3" then show the button, however not sure if that would work.
UPDATE:
I am thinking of following this example, that is using navigation bars that is #search and #results and make the #search href visible on #results active and #results one hidden.
You can do this without jQuery as well:
function filterPath(string) {
return string
.replace(/^\//, '')
.replace(/(index|default).[a-zA-Z]{3,4}$/, '')
.replace(/\/$/, '');
}
const locationPath = filterPath(location.pathname);
document.querySelectorAll('a[href*="#"]').forEach(link => {
let thisPath = filterPath(link.pathname) || locationPath;
if ((location.hostname == link.hostname || !link.hostname)
&& (locationPath == thisPath)
) {
let hashName = link.hash.replace(/#/, '');
if (hashName) {
let targetEl = document.getElementById(hashName);
if (targetEl) {
link.addEventListener('click', () => {
event.preventDefault();
targetEl.scrollIntoView({
top: 50,
left: 0,
behavior: "smooth"
});
});
}
}
}
});
Here is how you can do it. Create a button:
Scroll To Top
CSS:
.scrollToTop{
width:100px;
height:130px;
padding:10px;
text-align:center;
background: whiteSmoke;
font-weight: bold;
color: #444;
text-decoration: none;
position:fixed;
top:75px;
right:40px;
display:none;
background: url('arrow_up.png') no-repeat 0px 20px;
}
.scrollToTop:hover{
text-decoration:none;
}
JavaScript:
$(document).ready(function(){
//Check to see if the window is top if not then display button
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollToTop').fadeIn();
} else {
$('.scrollToTop').fadeOut();
}
});
//Click event to scroll to top
$('.scrollToTop').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
});
You can find a demo here. The source presented is taken from here.
I have a very long article page that I want to help mobile users scroll on. For very long lists in mobile apps there's usually a alphabetical index that can help users jump to various places in the list. How do I implement something like that for a webapp?
If it helps my stack is angularjs / jquery / phonegap.
Just use angular's built-in $anchorScroll service.
See the live example in angular's official docs. Here are the important pieces of code:
In your view template:
<div id="scrollArea" ng-controller="ScrollCtrl">
<a ng-click="gotoBottom()">Go to bottom</a>
<a id="bottom"></a> You're at the bottom!
</div>
In your controller:
function ScrollCtrl($scope, $location, $anchorScroll) {
$scope.gotoBottom = function (){
// set the location.hash to the id of
// the element you wish to scroll to.
$location.hash('bottom');
// call $anchorScroll()
$anchorScroll();
};
}
iOS7 Style List Navigator
If you want something nice on the phone, I just wrote this iOS7 style list navigator. I think the way Apple solved the problem is very straightforward. So we steal it.
It's written considering that you won't probably scroll the body, because in the many designs I've seen for smartphones, scrolling a container allows you to have fixed headers and footers for Android < 4 without getting mad.
A word of warning: this code is really fresh and untested.
SEE DEMO AND CODE
CSS (extract)
#scrolling {
padding-top: 44px;
overflow: scroll;
-webkit-overflow-scroll: touch;
height: 100%;
}
.menu {
position: fixed;
right: 0;
font-size: 12px;
text-align: center;
display: inline-block;
z-index: 2;
top: 58px;
}
.list .divider {
position: -webkit-sticky; /* will stop the label when it reaches the header */
top: 44px;
}
HTML (extract)
<div id="scrolling">
<ul class="menu">
<li>A</li>
<li>B</li>
<li>C</li>
<!-- etc -->
</ul>
<ul class="list">
<li class="divider" id="a">A</li>
<li>Amelia Webster</li>
<li>Andrew WifKinson</li>
<!-- etc -->
Javascript (zepto/jquery)
$(function() {
$(window).on("touchstart touchmove mouseover click", ".menu a", function(e) {
e.preventDefault();
clearInterval(t);
var steps = 25;
var padding = 68;
var target = $( $(this).attr("href") ).next("li");
if ( target.length > 0 ) {
var scroller = $("#scrolling")[0];
var step = parseInt((target[0].offsetTop - padding - scroller.scrollTop)/steps);
var stepno = 0;
setInterval( function() {
if ( stepno++ <= steps ) {
scroller.scrollTop += step;
} else {
clearInterval(t)
}
}, 20);
};
});
});
It performs a basic check of link validity before attempting the scroll. You can change padding to your needs.
Also, you will notice that we are targeting the first element after the required target. This is because Safari seems to go nuts because of the sticky positioning.
This code uses jQuery/Zepto selectors for the sake of brevity and readability. But these libraries are not really needed to achieve the result. With just a little extra digitation you could easily go dependency-free.
http://codepen.io/frapporti/pen/GtaLD
You can use a toggleable sidebar like this one. Resize your browser to the width of the screen of a mobile phone to understand what I mean.
Then create a directive in angularjs to wrap jQuery's animate function to scroll to a specific part in the article. Like this:
angular.module('yourModule', [])
.directive('scrollTo', function() {
return {
restrict : 'EA',
link: function(scope , element, attr){
$('html, body').animate({
scrollTop: $( attr['href'] ).offset().top
}, 300);
}
};
});
where href will be an id of a specific section in the article. Then all you need to do is apply the directive to the links in the sidebar.
...
<li><a href="#section-1" scroll-to>Jump to section 1</a></li>
...
Hope this helps.
This might be what you're looking for http://www.designkode.com/alphascroll-jquery-mobile/
Haven't used it myself, but seems pretty simple to get going with.
I think something like this could work for you: http://codepen.io/aecend/pen/AsnIE. This is just a basic prototype I put together to answer but I could expand on the concept if needed. Basically, it creates a translucent bar on the right side of the screen, finds each of the headings for articles (which would need to be adapted to suit your needs) and places clickable/tappable anchors to jump to individual articles. When you click one, the page scrolls to that article. I have a few ideas to make this actually usable, but here's the proof of concept.
CSS
#scrollhelper {
position: fixed;
top: 0;
right: 0;
height: 100%;
width: 5%;
background-color: rgba(0,0,0,0.2);
overflow: hidden;
}
#scrollhelper .point {
position: absolute;
display: block;
width: 100%;
height: 10px;
margin: 0 auto;
background-color: rgba(0,0,255,0.5);
}
JavaScript
var articles;
function buildScrollHelp() {
var bodyHeight = $("body").height();
var viewHeight = window.innerHeight;
$("#scrollhelper").html("");
articles.each(function() {
var top = $(this).offset().top;
var element = document.createElement("a");
element.className = "point";
element.href = "#" + $(this).attr("id");
element.style.top = ((top / bodyHeight) * viewHeight) + "px";
$(element).on("click", function(e){
e.preventDefault();
$('html, body').animate({
scrollTop: $($(this).attr("href")).offset().top
}, 500);
});
$("#scrollhelper")[0].appendChild(element);
});
}
$(document).ready(function() {
articles = $("body").children("[id]");
$("body").append("<div id=\"scrollhelper\"></div>");
$(window).resize(function(){
buildScrollHelp();
});
buildScrollHelp();
});
So I almost have my code working how I want, but can't get my animation synched together just right. I am trying to animate a cursor highlighting text, and then clicking on a button. The problem is that the cursor is either too slow or too fast. I am trying to make this dynamic so that no matter how long the text is I can still have the animation synch. I know that it is probably just a math issue, but can't quite get my head around it. Something about trying to match pixels with milliseconds is making my head spin. Please help before I pull out all my hair. Thanks.
Here is the html
<p><span id="container">I need to be highlighted one character at a time</span>
<input id="click" type="button" value="click me"/></p>
<img src="http://dl.dropbox.com/u/59918876/cursor.png" width="16"/>
Here is the CSS
#container{
font-size: 16px;
margin-right: 10px;
}
.highlight{
background: yellow;
}
img{
position: relative;
top: -10px;
}
And the javascript
function highlight(){
var text = $('#container').text(); //get text of container
$('#click').css('border','none'); //remove the border
$('img').css('left', '0px'); //reset the cursor left
$('img').animate({left: $('#container').width() + 40}, text.length*70); //animation of cursor
$('#container').html('<span class="highlight">'+text.substring(0,1)+'</span><span>'+text.substring(1)+'</span>'); //set the first html
(function myLoop (i) {//animation loop
setTimeout(function () {
var highlight = $('.highlight').text();
var highlightAdd = $('.highlight').next().text().substring(0,1);;
var plain = $('.highlight').next().text().substring(1);
$('#container').html('<span class="highlight">'+highlight+highlightAdd+'</span><span>'+plain+'</span>');
if (--i) myLoop(i);// decrement i and call myLoop again if i > 0
}, 70)
})(text.length);
setTimeout(function () {
$('#click').css('border','1px solid black');
}, text.length*85);
}
highlight();
var intervalID = setInterval(highlight, $('#container').text().length*110);
//clearInterval(intervalID);
Here is a link to the fiddle I have been playing around in.
This will probably get me down voted but maybe you will get some better idea...
Fiddle Here
$(document).ready(function() {
$('p').click(function(){
$('span').animate({'width':'100'},1000);
$('.cursor').animate({marginLeft: 100},1000);
});
});
Thanks to Dejo, I was able to modify my code to make this work exactly as I wanted. It was much easier to increase the width of one span rather than trying to expand one span while shrinking another. This also allowed me to have both the cursor moving and the span width increasing animations run in sync.
The HTML
<p><span id="highlight"></span><span id="container">I need to be highlighted one character at a time</span><input id="click" type="button" value="click me"/></p>
<img id="cursor" src="http://dl.dropbox.com/u/59918876/cursor.png" width="16"/>
The CSS
p{
position: relative;
font-size: 16px;
}
#highlight{
position: absolute;
background-color:yellow;
height:20px;
z-index:-50;
}
#cursor{
position: relative;
top: -10px;
}
#click{
margin-left; 10px;
}
And the javascript
function highlight(){
var textLength = $('#container').text().length;
$('#click').css('border','none'); //remove the border
$('#cursor').css('left', '0px'); //reset the cursor left
$('#highlight').width(0);
$('#highlight').animate({width: $('#container').width()}, textLength * 70);
$('#cursor').animate({left: '+='+$('#container').width()} , textLength * 70, function(){
$('#cursor').animate({left: '+=30'} , textLength * 20);
});
setTimeout(function () {
$('#click').css('border','1px solid black');
}, textLength*100);
}
highlight();
var intervalID = setInterval(highlight, $('#container').text().length*120);
//clearInterval(intervalID);
I realize it's quite a bit late, but here's a bit of help (for future reference).
The JQuery animate function is, by default, set an easing of swing, which means that the speed of the animation will vary throughout (see here).
To (kind of) fix the problem, I added the linear option to the animate method for the cursor, and increased its speed slightly.
You can see this new version at JSFiddle.
However, since the setTimeout loop can be slowed for some reasons, the animation may not be in sync.
I've asked this guestion before. But now I'll try to be a bit more specific.
I've trying to make a background fade in when you mouse over a box. I've tried 2 different options.
Option 1:
Box1 is the box it mousesover, and hover1 is the new background that comes in. This actually works pretty well. However, it loads the acript, meaning, that if i just go crazy with my mouse over the box, the fadeing will continue endless, even when my mouse is standing still. Is there a way you can stop it?
Content is a text that changes in a contentbox when I mouseover. This worksfine.
$("#box1").mouseover(function(){
$("#background").switchClass("nohover", "hover1", 500);
$("#content").html(box1);
});
$("#box1").mouseout(function(){
$("#background").switchClass("hover1", "nohover", 150);
$("#content").html(content);
});
Option 2:
Here i add the class hover2 and asks it to fadeín and fadeout. But this doesn't work at all. Somtimes it even removes everything on the side when i take the mouseout of the box.
$("#box2").mouseover(function(){
$("#background").addClass("hover2").fadeIn("slow")
$("#content").html(box3);
});
$("#box2").mouseout(function(){
$("#background").removeClass("hover2").fadeOut("slow")
$("#content").html(content);
});
I Use jquery ui.
I really hope someone can help me!
You can also try to make small changes in the markup/CSS.
HTML:
<div id="box">
<div id="background"></div>
<div id="content"></div>
</div>
CSS:
#box {
position: relative;
/* ... */
}
#background {
position: absolute;
display: none;
top: 0;
left: 0;
width: inherit;
height: inherit;
background-image: url(...);
z-index: -1;
}
JavaScript:
$("#box").hover(function() {
$("#background").fadeIn();
}, function() {
$("#background").stop().fadeOut();
});
DEMO: http://jsfiddle.net/bRfMy/
Try add a variable to control the execution of the effect only when that variable has a certain value. And modify its value when the effect was executwed.
Something like this:
var goeft = 0;
$("#box1").mouseover(function(){
if(goeft == 0) {
$("#background").switchClass("nohover", "hover1", 500);
$("#content").html(box1);
goeft = 1;
}
});
$("#box1").mouseout(function(){
$("#background").switchClass("hover1", "nohover", 150);
$("#content").html(content);
// sets its value back to 0 if you want the next mouseover execute the effect again
goeft = 0;
});