I'm making a website at http://harrisonprograms.com.
The design side of it is different to most sites, it also uses php and ajax to dynamically and asynchronously add comments, blog posts etc.
I use javascript to position the footer at the bottom of the page so when the page div extends it moves the footer further down the page by using the setTimeout function. However, this causes graphical glitches when scrolling up and down the page and if I set the time lower the footer lags.
So I want to know if there is any possible way I can monitor when the div has been resized to activate this function without using setTimeout to prevent these graphical glitches.
Yes, you can use jQuery's resize event.
$(window).resize(function() {
// resize your div here
});
Thanks for all the help everyone but I found a a library that does what I need without graphical errors by Ben Alman check it out here if anyone needs help with this http://benalman.com/projects/jquery-resize-plugin/
Related
I am doing an website where I have to keep one image fixed to the screen and on scroll I want different elements to appear one by one and stick to one position. When this is done I continue to the footer of the website.
I have done tried to reach that but whatever I do the page keeps scrolling and does not wait for all the elements to appear on the screen.
Example of what I want to do can be seen here Link on the second page where the mobile phone it is sticked in the screen and on scroll different content appear one by one.
How do I achieve this ? What kind of libraries would you suggest?
Thank you in advance.
stuff like this is usually done with js libriaries, as you already wrote. One that is actively supported and works quite well is Scrollmagic. It should be able to do what you describe, at least it can do the stuff in the example you linked: It can "pin" elements on the page for a defined duration (= "scroll duration") or animate elements controlled by the scroll position.
Scrollmagic can be found on Github or here: http://scrollmagic.io/ , examples to be seen here: http://scrollmagic.io/examples/index.html
Your fixed html content should have css position: fixed;.
Have you tried position: sticky? There may be browser compatibility issues but there are polyfils out there to fix that.
What I am trying to achieve is that when the user scrolls the page using the mouse-wheel (as there is no scrollbar), the page slides down with an animation to the next section of the page and while the animation is being played, mouse-wheel won’t work (to tidy things up, which is a good act).
The behavior I want can be seen in http://google.com/inbox or http://www.luxaqua-design.com/.
The thing I liked in Google’s inbox website is that it has the same effects with touch screen devices and their scrolling mechanisms.
I only need some pointers about the events that happen in this kind of scrolling and how I can manage them (specially, I am looking to achieve the same functionality with touch devices).
That is a parallax website, and actually there are many ways to accomplish that. But I would like to suggest to you the FullPage.JS by Alvaro Trigo, you can also try Skrollr by Prinzhorn
. Those are libraries that you can use to easily finish your goal.
By the way, you can also manually do that by creating a CSS that will make the images fit in every slide, then add JS so whenever you scroll it will go to another slide, but I tell you it is better to use libraries. :D
It is called Parallax scroll effect .. Here is a tutorial on how to make it!
https://www.youtube.com/watch?v=D75WTf_Y738
So, I am developing the first serious web site. I want to implement the following scenario, but I need guidance and advice. There is a button <input type="submit"> on my web page. When the user clicks it, I want it to open some HTML content which will be shown on top of all page content (and positioned centrally, but I don't care about that detail at the moment). It should act very similar to the way the photos are viewed on Facebook. When the user clicks the photo thumbnail, the photo opens on top of and across all page content.
Now, I've implemented this already, but I think that my approach is not recommendable, as it looks a bit clumsy to me, especially when I think about the maintenance of the site:
I added a <div> as the last element to the <body>; it is positioned absolutely and collapsed and serves as a container. When the button is clicked, that <div> is filled with the content and the state is changed from collapsed to visible.
I would very much appreciate if someone would like to share the standard methods used to achieve this effect and opinions . I am guessing that AJAX and jQuery should be used heavily for this (I used pure JavaScript in my design described previously). I am looking for some code samples and resources. Thank you so much.
What you are looking for is a modal dialog and not a pop-up. Pop-ups are new windows, while modals are HTML elements that block the page behind it for emphasis on forward content.
One way is to have a <div> appended to the body, usually to the end of the body and have it positioned absolute. That div will have top, bottom, left and right zero to stretch to fit the viewport. Within that div is another div that is also positioned absolute, relative to the parent, viewport-fitting div. Positioning is up to you, but usually it's centered using a formula:
center = (total length - modal length)/2
Content is up to you. You can have the content already loaded and hidden in the DOM which you can just display later. Or load the content via AJAX if you wish.
jQuery already has a modal plugin in the jQueryUI suite which you can use that packs a lot of methods to add and customize.
There are a lot of approaches out there. You could use jQuery UI (http://jqueryui.com). But I like the approach Twitter's Bootstrap is taking: http://twitter.github.com/bootstrap/javascript.html#modals
This is a very clean setup and you can load the content via AJAX with a little selfwritten function. You don't need to write everything yourself because there are plenty of plugins out there. And the bootstrap modal plugin is standalone so you can just use this one.
I like to use it and generate the content div with an AJAX request.
You can position: absolute; the popup box and set it where on the screen you want it. Then use z-index to put it over the content.
Here is a demo: http://jsfiddle.net/e6BEu/
I believe what you're looking for might be Lightbox-like? It could give you some ideas at the very least.
Edit: Or this one which supports text and such.
I'm looking for a solid cross-browser Jquery custom scroll bar plugin that plays nice with iframes. Does anyone have a nice plugin and a solution?
Depends greatly on the context:
Do you want to create an iframe with styled scrollbars that other people can place on their site?
Or are you trying to style someone else's content which is placed on your site via iframe?
If you have control over the content of the iframe, then it's an easy thing to do.
I've used http://livepipe.net/ with success.
Custom scrollbars typically work by placing content in a , then moving that element relative to a parent div by javascript.
EDIT 1:
This is the detail page. Just start editing the values. http://livepipe.net/control/scrollbar
You'll know you have it right when loading your page not in an iframe, the fancy scrollbars are 100% the height of your browser viewport no matter the height.
It might also be worth adding a function to recalculate the height of the objects & the positioning of the bottom control on window resize. Although, that's easier to do with jQuery than in PrototypeJS.
EDIT 2:
Here's a working example I cooked up:
http://pastebin.com/gvtnLANQ
Try this really cool plugin. It helps eliminate the need for a scroll bar: https://github.com/Ashwell/jquery-scrollThis
I'm designing a dynamic web page that loads contents by AJAX, like the wall of facebook, first to the top last to the bottom. However, i don't want to change the scrolled content. For example, when new contents are loaded page is driven down, but i want a script to fix scrolled content on screen. How can I do this? Help me please.
Update
Okey, I've found the key function it is scrollBy(x,y); function of the window object. however now i want to use it with jquery animation how can i animate this function?
I don't really know if this is what you want, but i think u can record the event's clientY attribute or pageY as in jquery, & then using jquery or simple JS scroll down to the value that you had stored.
var w = $('#selector').width();
$('#selector').append(data).scrollTop(w);
i have not tested it but it has the basics on that :)