What's the best way to scroll a div with overflow:auto by a certain pixels or certain percentage when clicking an anchor? The HTML is very simple:
<style>
#container{
height:250px;
overflow:auto;
</style>
<div id="container">
<p>Lots of Content</p>
</div>
Scroll Down
When I click the anchor above, I want to scroll that div above a certain amount of pixes, say 30px. I'm hoping jQuery has something built in that makes this simple.
$('#scrolldiv').click(function(e){
var current = $('#container').scrollTop();
$('#container').scrollTop(current + 30);
e.preventDefault();
});
jsFiddle
For that purpose I would use jQuery's animate:
$('#scrolldiv').click(function(){
$('#container').animate({scrollTop: '+=30'});
});
I belive it's got the shortest syntax for this and it looks nice.
jsFiddle example
Related
I want the div 'expand' to expand to a set height when hovered over and then revert back to the original height of the div on mouse out.
My problem is that the images inside 'expand' needs to remain proportional and thus its height is going to vary depending on the browser width.
So I need some code (html, css, javascript, jQuery, PHP, etc.) that will set the div 'expand' to expand to a preset height on hover and then revert to the height of the image (plus a 5 pixel padding on all sides).
The markup:
<html>
<head>
<style>
.expand{
background-color: red;
height: auto;
padding: 5px;
width: 18%;
}
</style>
</head>
<body>
<div class="expand">
<img src="http://yabooks.ml/Images/The Dmon King.jpg" style="width: 100%;">
<h3>The Demon King</h3>
<h5>Cinda Williams Chima</h5>
<p>jfah;jfhe;jfhwehccneufhea'hfehechceiphf'jfah;jfhe;jfhwehccneufhea'hfehechceiphf'jfah;jfhe;jfhwehccneufhea'hfehechceiphf'jfah;jfhe;jfhwehccneufhea'hfehechceiphf'jfah;jfhe;jfhwehccneufhea'hfehechceiphf'</p>
</div>
</body>
</html>
You have to get first the original height of the div you want to expand, like this:
var height = $(".expand").css('height');
and animate that div using .animate into a desired height, lets say 500px:
$(".expand").on("mouseenter",function(){
$(this).animate({"height":"500px"},"slow");
})
and animate back to the original height:
var height = $(".expand").css('height');
$(".expand").on("mouseleave",function(){
$(this).animate({"height":height},"slow");
})
Note: Be sure to close all your tags. I noticed your <img> without a closing that's why your <p> tag won't wrap inside the div. I'd fixed that in this FIDDLE
You want to use jQuery's mouseover and mouseout functions coupled with the animation function. You will need to select your div and bind a function to its onmouseover event. Consider the following rendition of your HTML body:
<div id="expand">
<img src="http://yabooks.ml/Images/The Dmon King.jpg" style="width: 100%;">
<h3>The Demon King</h3>
<h5>Cinda Williams Chima</h5>
<p>Text</p>
</div>
Here, we've given your div an id "expand", so we can easily select it using jQuery and bind functionality to it's onmouseover event using the mouseover function:
var expanded = "2000px";
var time = 2000;
$("#expand").mouseover(function(){
$( "#expand" ).animate({
height: expanded
}, time);
});
To have the div contract, you'd want to use jQuery's mouseout function to bind to the element's onmouseout event:
$("#expand").mouseout(function(){
$( "#expand" ).animate({
height: contracted
}, time);
});
This mouseout functionality in this case is hard to demonstrate in jsfiddle, but hopefully the following jsfiddle helps you obtain the behavior you desire: http://jsfiddle.net/9dmzytm7/
I'm a bit lost. I try to check if my mouse is over a Div which is covered by another Div. I search a vanilla js solution if possible.
I tried to use the elementFromPoint method, but it only seems to give me the top Div.
I also tried to mess around with the "onmouseover" Event, but I didn't found a solution either. Maybe I just overlooked something.
Any ideas how to solve this? I want a method to check if my mouse is over the smaller Div2 or not. I made a jsFiddle to show the situation. I made the covering Div
translucent for easier understanding from the setup.
http://jsfiddle.net/y2L5C/
<div id="div1"></div>
<div id="div2"></div>
#div1 {
width:300px;
height:300px;
background:red;
position:absolute;
top:0px;
z-index:1;
opacity: 0.5;
}
#div2 {
width:200px;
height:200px;
background:blue;
position:absolute;
top:0px;
}
if you want to check if your mouse is over a <div> that is covered by another <div>, you can achieve this by declaring this code: pointer-events: none; to the css of the covering <div>.
For example:
<div id="under"></div>
<div id="over"></div>
Add this to your css file:
#over{ pointer-events: none; }
In that case, all pointer events for the div having the id=over will be ignored. You can now then add this code to test if its working.
Add this JavaSCript code:
$('#under').mouseover(function() {
alert("Mouse is over the div having the id='under'");
});
Give it a try! Good luck!
Here's a quick and dirty solution. I'll leave it up to you to optimize it. Here's the fiddle: http://jsfiddle.net/y2L5C/1/
var div2 = $("#div2"),
width = div2.outerWidth(true),
height = div2.outerHeight(true),
offset = div2.offset(),
top = offset.top,
left = offset.left;
$(document).mousemove(function(evt) {
if(evt.pageX <= (left + width) && evt.pageX >= left &&
evt.pageY <= (top + height) && evt.pageY >= top) {
$("#indicator").text("Over the div #2");
} else {
$("#indicator").text("NOT over the div #2");
}
});
Interesting concept. I do want to bring up that for plain CSS events there are plain CSS solutions such as here. However, if what you are looking to do is initiate Javascript events then the trouble is that onMouseOver is not going to trigger for #div1 if #div2 is on top of it.
One potential, very simple solution, is to create a script to copy the position of your #div2 element and change the style to be a higher z-index. While JQuery might be "easier" to create this, you could certainly create a vanilla JS solution. This script may give you a little guidance as to how you can find positioning. You can use element.style values in order to assign CSS values. If your element positions are declared by CSS then you can do something like this:
var div1 = getElementById('div1');
var div2 = getElementById('div2');
var newElem = document.createElement('div');
newElem.id = 'div2makefacade';
Now you can either utilize newElem.style.top etc. and assign div2.style.top's value, or you can even assign a custom class which has the correct position values. When you initiate onMouseOver, you can do so on #div2makefacade rather than #div2, and perform actions on #div2
well i made a function that perhaps it help you in some way, first in your view you have to load jquery librarie like this
<script type="text/javascript" src="Scripts/jquery-1.6.2.js"></script>
and your css you have this
.visiblepanel{
display: none;
}
.visiblepanela{
display: none;
}
your script this, you have to add the hover function
$('#quickstart').hover(function() {
$('#visiblepanel').toggle();
});
$('#quickstarta').hover(function() {
$('#visiblepanela').toggle();
});
and your html body
<div id="quickstart">Div 1</div>
<div id="quickstarta">Div 2</div>
<div id="visiblepanel" class="visiblepanel">mouse encima div 1</div>
<div id="visiblepanela" class="visiblepanel">mouse encima div 2</div>
so it consist that when the mouse is over the DIV 1 it will show an advice that your mouse is there, and so on with DIV 2...i hope i could helped you...
I am trying to achieve the effect of an div scrolling until it reaches the top and just stays there.
I have achieved this with:
HTML
<div id="nav">this is nav</div>
<div id="mooey">
<div id="theFixed" style="position:fixed; background-color:red">SOMETHING</div>
</div>
CSS
#mooey {
background: green;
min-height:250px;
margin-top:300px;
}
#nav {
background:#000000;
position:fixed;
top:0;
width:100%;
height:100px;
}
JavaScript
$(window).scroll(function(){
$("#theFixed").css("top", Math.max(100, 300 - $(this).scrollTop()));
});
What I want to do, Instead of stating that the div theFixed is fixed in the style in the HTML. I was wondering if there was a way of applying this using the code.
Reason being is that if the script isn't enables or fails for whatever reason - I want the theFixed div to scroll along with the mooey div rather than be stuck in the middle of the page.
You can see what I have done here:
http://jsfiddle.net/susannalarsen/4J5aj/7/
Any ideas for this?
Use $('#theFixed').css('position','fixed'); to pin it down.
<script>
$(document).ready(function(){
$("#FixedElement").css("position","fixed");
});
</script>
I am applying style qualities to a div containing external javascript, and they seem to be ignored by the browser. The first div works correctly.
http://jsfiddle.net/TxWN3/2/
<div style="text-align:center;">Working center text</div>
<div id="btc-quote" style="text-align:center;"></div>
<script type="text/javascript" src="//cdn-gh.firebase.com/btcquote/embed.js"></script>
The content of the div class="btc-quote" might have some css code not wanting it to center. (I have not read all that code from BTC) To workaround this, you can make the div itself centering, not the content.
A simple trick to do this is add the following css to the div:
width:212px;
margin:auto;
This is a nice workaround found here
If you want to center it, first give it a width and then margin:0 auto:
<div id="btc-quote" style="width:212px;margin:0 auto"></div>
To center your included div, add this CSS:
.btc-box {
margin:0 auto;
}
jsFiddle example
The text-align:center; CSS property is not used in the way you are assuming.
If you check this fiddle, you will see that the default width of a div is the width of the container, and so when you center the text it appears the div is centered. However this is not the case.
To center a Div you can use the Position CSS property :
Add the following CSS attributes :
position:absolute;
left:50%;
margin-left:-106px; /* Half of the width of the div */
And see the following fiddle for the Second Div being center aligned
http://jsfiddle.net/Nunners/TxWN3/7/
I am trying to see if the following is possible:
I want to be able to cycle a single div within an element continuously [so the start of the div is by the end of the same div as it cycles.]
This doesn't have to be an existing plugin. I would prefer to not clone the div if possible. The div's width will be set via javascript prior to cycle but might be adjusted in small amounts.
I would appreciate any ideas!
jsBin demo
jQuery:
$('.scroller').each(function(){
$(this).find('img').clone().appendTo($(this));
});
(function move(){
$('.scroller').scrollLeft(0).stop().animate({scrollLeft:310},800,'linear',move);
})();
HTML:
<div class="scroller">
<img src="" alt="" />
</div>
CSS:
.scroller{
width:310px;
height:80px;
white-space:nowrap;
word-spacing:-1em;
overflow:hidden;
margin:30px;
}
.scroller img{
display:inline;
}
It will make clones only once. Than my jQuery script will create a loop that will just play with the scrollLeft() element property.
N.B: this is just a plain example, you could make 310px be dynamically calculated, but that's another story, let's keep it simple.
What about the marquee plugin?
Demo
Docs
Note that first example in the Demo, that scrolls left, if you set the width of the container to the same size or smaller than your content to scroll it will appear to cycle fluidly.