I want to give to the header-body the effect like in this site preview.oklerthemes.com/?theme=Porto
Use a relative position (to show the scroll)...and the use the fixed.. but when I put the fixed position I see that this come to the original position AND THEN come up. --> https://jsfiddle.net/uxhgpz6e/2/
enter
So, i'd like to avoid this "jump effect", but still use the relative+fixed.
Change your scroll value and it should get the behaviour you want : See this fiddle
$(window).scroll(function(){
if($(window).scrollTop() > 100){
$('.header-body').css('position','fixed').css('top','-100px');
} else {
$('.header-body').css('position','relative').css('top','0');
}
});
Related
Below is my code and I'm trying to recreate this effect: (http://hideo-html5-css3-bootstrap-website-template.little-neko.com/files/index.html) [When you scroll down the navigaiton bar changes to half size and with some transparency or something like that.] Any ideas to remake it?
Code: http://pastebin.com/r0pS4AYD
Ps: My code has nothing special and I just want a point/direction to make it.
When the user scolls to an specific position, or in your case when he begins to scroll, you can add an class via jQuery.
Look here for more information:
Leave menu bar fixed on top when scrolled
(Code is taken from the post in the link)
$(window).bind('scroll', function() {
if ($(window).scrollTop() > 50) {
$('.menu').addClass('fixed');
}
else {
$('.menu').removeClass('fixed');
}
});
it is the best when you create an fiddle with your code, so other people can easy modify your code and see whats going on there..
I have this complex HTML Layout:
http://jsfiddle.net/5RgjL/2/
As you can see, messages are anchored at the top of the #messages container.
I want it so they are anchored at bottom, so the first message displayed will be at bottom, and not at the top.
Also when resizing the page the view inside the scrolling box must slide up from bottom.
It is hard to explain, i will make you understand with an example:
Populate messages inside the box, till is full and there is the scroll bar.
Try to resize the entire window from bottom, you can see that the message on bottom will be covered. i do not want this, but instead, slide up from bottom.
I tried many things, like to absolute positioning the #message container, but i run into other problems and i cannot get it to work like i want.
I need some help from someone really experienced in HTML/CSS.
If you are familiar with the Facebook messages page, you will understand what i'm trying to do.
PS: Some CSS styles are applied with javascript, because i generate page content dinamically, and only in this page i need those styles.
If I understand correctly then setting an absolute bottom position for the messages until there are more messages than vertical space will solve the first requirement of new messages appearing at the bottom.
This requires a CSS and JavaScript change:
CSS
#messagesWrapper {
position:absolute;
bottom:0;
}
JavaScript
var $messages = $('#messages');
var $messagesWrapper = $('#messagesWrapper');
var $messagePageContent = $('#messagePageContent');
function populateMessages(){
var newMessage = $('<div id="msg-'+i+'" class="aMessage">Another Message<br>Message ID: '+i+'</div>');
i++;
newMessage.hide().appendTo('#messages').stop().fadeIn(400);
if ($messages.height() >= $messagePageContent.height()){
messagesWrapper .css({position:'static'});
$messagePageContent.stop().animate({ scrollTop: $messages.outerHeight() }, 700);
}
}
The scrolling also needs to occur if then window is resized, so attaching a handle to the resize event is also required.
$(window).resize(function() {
$messagePageContent.stop().animate({ scrollTop: $messages.outerHeight() }, 700);
});
However, this is not good enough because the height calculation is missing which resets the CSS position to its default value. This is required for the enscroll jQuery plugin (and I suspect any sort of scrolling) to work.
But we can simply refactor and move all of the code into a common function, for example:
var $messages = $('#messages');
var $messagesWrapper = $('#messagesWrapper');
var $messagePageContent = $('#messagePageContent');
function populateMessages(){
var newMessage = $('<div id="msg-'+i+'" class="aMessage">Another Message<br>Message ID: '+i+'</div>');
i++;
newMessage.hide().appendTo('#messages').stop().fadeIn(400);
scrollMessages();
}
function scrollMessages() {
if ($messages.height() >= $messagePageContent.height()){
$messagesWrapper.css({position:'static'});
$messagePageContent.stop().animate({ scrollTop: $messages.outerHeight() }, 700);
}
}
$(window).resize(scrollMessages);
This is the code I used in this demo. It's probably not the best solution, I was looking at using -webkit-transform: scaleY(-1) to flip the container and then flip the messages back but it messed up the scrolling (i.e. it was backwards!). There might be a better solution using CSS transforms out there.
You can have them added to the bottom by applying this style to your messages id:
position: absolute;
bottom: 0;
Also, if you want the images to add to the top of the list instead of to the bottom you can use prependTo() instead of appendTo().
I'm not sure what exactly you are asking for on the scrolling, so if you could give a bit more info I will update my answer.
$(function(){
$("#top-img").hover(function(){
$(this).stop().animate({height:"400px"},{queue:false,duration:700});
},
function() {
$(this).stop().animate({height:"300px"},{queue:false,duration:700});
});
});
This is the code I am using, its simple for the most part. When I hover over the div #top-img it takes it from a height (set in CSS) of 300px and animates it to a height of 400px.
I would like a slight delay so that
people have to hover over it for a second before it runs and
you have to move off of it for a second before it goes back to
300px.
Check out the HoverIntent jQuery plugin. I;ve used it in the past and its extremely easy to use and implement
This kind of works, but the problem is when hovering and off hovering a lot of times it does not end and just keep going up and down. So I need to some how add what I need out of both. .
$(document).ready(function(){
$("#top-img").hover(function(){
$(this).delay(400).animate({height:400},1000);
},function(){
$(this).delay(300).animate({height:300},500);
});
});
I have a page with a for layout where one half of the page is dynamic width an the other is fixed. This is achieved by floating the fixed width side to the right. It all displays fine but because the fixed width markup comes before the dynamic width markup the tab ordering gets thrown off.
See here: http://jsfiddle.net/BaMqG/
How can i overcome this without resorting to putting tabindex properties on the inputs?
You can use jQuery to dynamically set the tabindexes with a loop and counter variable. Check it out. http://jsfiddle.net/BaMqG/22/
$(document).ready(function() {
var i = 1;
$('.wrapper').each(function(){
$(this).children('.dynamic').children('input').each(function(){
$(this).attr("tabindex",i);
i++;
});
$(this).children('.fixed').children('input').each(function(){
$(this).attr("tabindex",i);
i++;
});
});
});
The initial value for i can be set to whatever tabindex number you want to start from.
I have managed to get the same looking form with no tab index to work by using tables.
See here: http://jsfiddle.net/ymSGM/
I would still be interested if it can be done any other way.
I know how to toggle an entire div, however I only want to hide all but the top 10% or top 100px, for example. And then when the div is clicked, the entire div opens.
I thought I saw this a while ago, but can't remember where.
Thanks.
$(document).ready(function() {
// hides the slickbox as soon as the DOM is ready
$('#slickbox').hide();
// toggles the slickbox on clicking the noted link
$('#slick-toggle').click(function() {
$('#slickbox').toggle(400);
return false;
});
});
Your code should be something in the lines of:
$(document).ready(function() {
// hides the slickbox as soon as the DOM is ready
$('#slickbox').animate({height: '20px'});
// toggles the slickbox on clicking the noted link
$('#slick-toggle').click(function() {
$('#slickbox').animate({height: '100%'});
return false;
});
});
Take a look the image on my home page, is this kind of what you want to do?
http://www.carsonshold.com/
I have it jet out when you hover over it, but that can easily be changed to a click. It somewhat complicated to do, and still isn't perfect in IE (the page loads and the clip isn't recognized until you hover over it).
It may be slightly different from what you want since I did this on an image rather than a div, so I needed to animate the clipping mask. The function I used is as follows:
var featureDuration = 300; //time in miliseconds
$('#featured-img').hover(function() {
$(this).animate({ left : "-164", clip: "rect(0px,384px,292px,0px)" },{queue:false,duration:featureDuration});
}, function() {
$(this).animate({ left : "17px", clip: "rect(0px,203px,292px,0px)" },{queue:false,duration:featureDuration});
});
If you want to animate the clip, you will need to insert this JS as well because it doesn't behave properly otherwise. http://www.overset.com/2008/08/07/jquery-css-clip-animation-plugin/
Take a look at the CSS in my code if you are unsure how I did the rest of it, or comment on here if you have any questions.
Cheers
Did this rather quickly, note it will only hide the bottom portion.
http://jsfiddle.net/loktar/KEjeP/
Simple toggle that changes the height, hiding the rest of the content within. Easy enough to animate as well, just modify the toggle functions to adjust the heights rather than adding a class.