I've seen a jquery plugin that was able to "expand" horizontally a <pre> element when you moved your mouse over it.
But I don't remember it's name or where to find it...
Does anyone know?
You can do it without a plugin.
See the following on jsFiddle →
I also like to set overflow-x on the expanded pre so that one can still scroll to see lines that are wider than the expanded size. I don't like scroll bars on the narrower ones, so I set overflow to hidden in the CSS and on mouseleave.
$(function() {
$('pre').mouseenter(function() {
$(this).stop().animate({
width: 400
}, function() {
$(this).css('overflow-x','auto');
});
}).mouseleave(function() {
$(this).stop().animate({
width: 200
}, function() {
$(this).css('overflow','hidden');
});
});
});
Assuming the CSS is as follows:
pre {
width: 200px;
overflow: hidden;
}
Or even better! Use a figure and figcaption element to provide a handy tip for each code listing as seen here.
On top of that, you could use a jQuery plugin like ScrollTo to ensure that the code scrolls back to the left whenever the mouse leaves it.
You don't need a plugin for this. You can do this using the animate() function.
$('div').bind({
mouseover: function() {
$(this).stop().animate({
width: 300
})
},
mouseout: function() {
$(this).stop().animate({
width: 100
})
}
})
Check working example at http://jsfiddle.net/zgTw3/2/
are you looking for this www.sohtanaka.com ?
Related
My site has blog posts played out down the page… In the top right, I have navigation, with an option to jump to the last post in September. I know the id of the div that contains this post is #post2, so I'm trying to use jQuery to scroll the page to that div, like this:
$("html, body").animate(
{ scrollTop: $("#post2").offset().top },
500);
What could I be doing wrong?
You can utilize the window.scrollTo function, by calculating the according coordinates, but if you are using jQuery there are out-of-the-box ready plugins with smooth scrolling support like jquery.scrollTo.
Here a Code-Snippet that demonstrates it:
$(function(){
$('#btn').click(function(){
$.scrollTo('#post2', 800 );
});
});
div {
width: 200px;
}
#large {
height: 1500px;
background-color: grey;
}
#post2 {
height: 100px;
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js?1.4.11"></script>
<button id="btn">scroll</button>
<div id="large"></div>
<div id="post2"></div>
In your case you need to add overflow: hidden; to the UIPostContainer class, since you can not scroll to an element without a height. And because you have a ~50px height fixed header that overlays everything you have to account for that as well, e.g. like that: $.scrollTo("#post2 h4", 800, {offset: {top:-55} });
Your code is 100% right it has no mistake
and as I saw your site is working too
Your code is right but the behavior you want is not there because the height for the divs of postcontainer like $('#post2) is not correct (it is 0px) in terms of styling.
I'm trying to slide in a div into the page while the page is loaded completely, I used CSS before, but it wasn't smooth at all, so i switched to use jQuery.
It's very smooth but i have a small issue which i believe somebody with more experience could solve it very quickly.
If you look at my output, the effect is not very seamless and it seems it stuck at some point.
Because i'm animating the div within change the width, i'm sure there is a better way to do that.
Here is my code :
$(document).ready(function() {
$("#thumbnails").animate({
opacity: 1,
width: "800px",
}, {
duration: 500,
specialEasing: {
width: "linear"
}
});
});
Here is the Output link
http://jsbin.com/cuvaxuji/1
Are you trying to slide the div ... for sliding make "#thumbnails" position absolute and write
$("#thumbnails").animate({
opacity: 1,
left: "20px",
}
This question has been already addressed, but none of the solutions have worked for me.
I referred to this earlier question addressing the same problem:
I noticed that one of the responses gave this jsfiddle link, which implements the exact functionality that I want, and works.
$("#topbar").toggle(function(){
$(this).animate({height:40},200);
},function(){
$(this).animate({height:10},200);
});
But when I changed the framework to anything but jQuery 1.4.4, the div starts instantly disappearing as soon as the page loads. This is the problem I've been having on my own project.
Any ideas on how to get that jsfiddle working on jquery 2.x? What am I missing?
The fix is simple:
$("#topbar").toggle(function () {
$(this).animate({
height: "40px"
}, 200);
}, function () {
$(this).animate({
height: "10px"
}, 200);
});
You just need to add px units to the height value.
See demo at: http://jsfiddle.net/audetwebdesign/3dd3s/
PS
Some of the other posted answers show a better way of coding this type of animation. I simply demonstrated how to fix the bug.
Note that this use of .toggle has been deprecated since jQuery 1.8.
Reference: http://api.jquery.com/toggle-event/
Why The Unit is Needed
Some of the other solutions involve the jQuery .height() function, which returns a unit-less pixel value. In this case, the computed value is coerced/cast to be a pixel value, so the 'px` unit is not required.
In the original example, the .height() function was not used so the units needed to be specified to make things work.
jQuery
$("#topbar").click(function () {
$(this).animate({
height: ($(this).height() == 40) ? 10 : 40
}, 200);
});
CSS
#topbar {
background: orange;
color: white;
display:block;
width:100%;
text-align:center;
height:40px;
}
HTML
<div id='topbar'>toggle me</div>
jsFiddle
Is this what you're going for?
http://jsfiddle.net/mmDCk/
$("#topbar").click(function() {
$(this).animate({
height: ($(this).height() == 10) ? 40 : 10
}, 200);
});
That will toggle the height to either 40 or 10 depending on what it is at the moment.
I am still new to javascript (not to mention a designer, certainly not developer) so bear with me.
I wanted to use some random numbers in my CSS, and the only way I could find that fit the bill was to incorporate some Javascript to generate the random numbers and then modify the CSS. The idea is to get some slides to animate into view, rotate on hover, and animate away when clicking on another category.
I've managed to get it working in my document, both on load and called from buttons on click, but the only way I can get it to work is if I write out the full code for each instance. Each time it is the same, so when I need to change something, say a transition time, I have to do it over and over in multiple locations. It works for now but is certainly not ideal.
I wont put the full code in here (because it's absurdly long), but here's an example. I have this:
$(function() {
$("#printLink").click(function() {
$(".print").each(function() {
$(this).css({
"left":(Math.floor(Math.random()*10)-5),
"bottom":(Math.floor(Math.random()*10)-5),
});
});
$(".web, .motion").each(funtion() {
$(this).css({
"left":(Math.floor(Math.random()*200)-100) + '%',
"bottom":(Math.floor(Math.random()*500)+500),
});
});
});
});
Okay, so there's a button #printLink and separate groups of slides with classes .print, .web, and .motion (in the demo link below there are no slides in the motion section). The idea is that when I click on #printLink that the .print slides will move into view and the .web and .motion slides with move off screen. Like I said, I already have all of this working, but I have to specify all of the CSS again and again.
What I'd like to have is something like:
function moveIn(){
$(this).css({
"left":(Math.floor(Math.random()*10)-5),
"bottom":(Math.floor(Math.random()*10)-5),
});
}
function moveOut(){
$(this).css({
"left":(Math.floor(Math.random()*200)-100) + '%',
"bottom":(Math.floor(Math.random()*500)+500),
});
}
$(function() {
$("#printLink").click(function() {
$(".print").each(function() {
moveIn();
});
$(".web, .motion").each(function() {
moveOut();
});
});
});
This way I can just reference the same string of CSS each time, and minimize the chance for mismatched code.
Here's a reference link to give you a better idea of what I'm talking about.
Also, what's wrong with:
$(function() {
$("#printLink").click(function() {
$(".print").each(moveIn);
$(".web, .motion").each(moveOut);
});
});
the two functions you defined should work perfectly.
If you want to embrace CSS3, and didn't have the need for random numbers, you could handle this with a few classes in your CSS...
.print, .web {
display: absolute;
top: 500px; left: -1000px;
opacity: 0.0;
-webkit-transition: all 0.5s ease-in-out;
}
.printOn, .webOn {
top: 0px; left: 0px;
opacity: 1.0;
}
Then your links can just toggle these classes...
$(function() {
var $print = $('.print'), $web = $('.web');
$("#printLink").click(function(e) {
$print.addClass('printOn');
$web.removeClass('webOn');
e.preventDefault();
});
$("#webLink").click(function(e) {
$web.addClass('webOn');
$print.removeClass('printOn');
e.preventDefault();
});
});
Note: The "transition" property is not very well supported as of this writing. But even in a browser that doesn't support it, the links should be shown and hidden - just without any animation.
it's 3 am right now and I'm not the best at jquery, can someone tell me what stupid mistake I'm making?
I have it in a jsfiddle here: http://jsfiddle.net/JamesKyle/7GWRp/
There's a kink in css transitions that don't allow them to be used on :before or :after elements, so I'm trying to do a workaround using jquery which is already being used on the page. Basically these are the three css state normal, hover, and active.
(I'm trying to animate the little shine at the top)
$(document).ready(function() {
$('.button:before').mouseover(function() {
$(this).animate({
left: '0px',
opacity: 1
}, 100);
});
$('.button:before').click(function() {
$(this).animate({
left: '30px',
opacity: 0
}, 100);
});
$('.button:before').mouseout(function() {
$(this).animate({
left : '-30px',
opacity : '1'
}, 100);
});
});
The verdict here is that, since pseudo elements are not part of the DOM, they cannot be directly targeted with jQuery.
Inserting a physical element like <div class="button gray"><span></span>Button</div> seems to me to be the easiest solution but it does clutter the markup...