Make header smaller when not-homepage opened? - javascript

I have this website; http://kieronboz.co.uk/inspired/
Im a beginner to web design, so forgive me :P
If you click on the top link in the ugly navigation bar on the left, a new page is loaded, I thought it might be a good idea to now shrink the header image for the non-main pages, so I was thinking a jquery script to make it 'slide' up when the page is loaded, to the top of the light white border around Inspired Marketing, so it would turn into a smaller header!
Anyway, problem is I cant find anything like this in google, I have seen the jquery slideup function but im having trouble implementing it in such a naked fashion as the code reference sheets present it.
If this is a terrible idea and there's better options, ill hear those too! Thanks again

Simply add to the header the margin-top: -540px; (or via jquery: $("#header").css("marginTop","-540px");
You may use jquery.animate to add an animation to it.
As to doing it only on pages that are not the index - Either include the script doing it only to non-index pages, or use document.location.href to figure out whether you're on index or not.

Related

Unable to get skrollr parallax effect on header image

everyone!
So, I'm trying to implement parallax with skrollr.js. This is my first attempt and I am pulling my hair out. I've been all over the web from searching Google, YouTube and StackOverflow. I'm trying to implement a parallax effect on a header image somewhat similar to this example except the image doesn't need to be the full height of the viewport and I only need one image to have a parallax effect. I'm going for something very similar to this on Squarespace's page.
I've been trying to simply use the code from the examples provided in the Skrollr.js repo. But after hours of failure, I turn to the trusty SO community!
Here is the page I have currently been testing the parallax header image on.
The classes .scollable-between and .scrollable-after are being altered on scroll but nothing is happening. Also, I am trying to implement this for mobile but I can't even scroll the page on mobile.
Any help is certainly appreciated! Thank you so much!
A couple issues:
First, position: fixed really doesn't play well with skrollr... whenever it is enabled on an element, the position relative to the scrolling element basically no longer exists, and skrollr events stop firing.
Second, it looks like the element with the background image (.parallax-image) is both being shown by the class '.skrollr-between' and also has a transform-3d property on it. When I disable the tranform3d property with the inspector, I can see the image.
It seems like you are combining two methods of parallax: Skrollr is one way of doing it via JavaScript, and CSS transforms are a way of doing it without Javascript... it would probably be best to chose one and roll with it.
Skrollr/JS method:
https://ihatetomatoes.net/how-to-create-a-parallax-scrolling-website/
CSS only method:
http://keithclark.co.uk/articles/pure-css-parallax-websites/

McMaster-Carr's 'scrolling box' layout

McMaster-Carr, a few years back, completely redesigned their website and they now have these very cool 'scrolling box' sections for each product. I've been trying to duplicate that same effect only using css and html, but have had no luck so far.
Some key things I cannot accomplish using only html + css:
hidden scrollbars with the ability to still scroll
section headers that stop when scrolled to the top of a containing div
I've tried looking through their source code but I really want to start from scratch and recreate the effect, hopefully finding a much simpler way to recreate it.
If anyone has seen anything like this before or knows how to go about creating this type of layout, please help.
Here's a link to a page on the McMaster-Carr website that demonstrates that scrolling box layout:
http://www.mcmaster.com/#nylon-gears/=g1p46z
The technique j08691 linked to is the common way to do it - you'll have to use a bit of JS to find out where how much the site is scrolled. If you look at the source of the persistent header example, there is a line like
scrollTop = $(window).scrollTop()
simply replace this by the top position of your parent div (assuming it is, like in McMaster, fixed on the site)
scrollTop = $("div.MyParentDiv").position().top

Remove white space beneath Facebook comments plugin

Take a look at the this link. Scroll down a bit and you should see a Facebook comments plugin with an embedded Google map right beneath it.
My problem is, there is a ton of white space between the bottom of the comments plugin and the top of the map. Firebug indicates the white space is at the bottom of the comments plugin (as opposed to the top of the map). However, I can't seem to find a way to eliminate it.
I've tried just using relative CSS positioning to move the map up 50 pixels, but then it sits on top of the comments if there happen to be any. Also, if the user has turned FB comments off, it screws the layout as well.
Any ideas on how to get rid of the excessive white space?
UPDATE: While the answers provided here pointed me in the right direction, it ended up being too much trouble. I simply put the Facebook comments beneath the Google map at the bottom of the page which masks the problem somewhat. Apparently this is a bug according to one of the commenters below, so we'll just have to wait for a fix.
EDIT: Been toying with these styles for a while, no luck. I can alter the height of the box initially based on Jason's suggestions, but anything I do screws up the layout (new comments appear BEHIND the map since the comment area stays the same height as its original height, instead of allowing Facebook to dynamically grow the height of its IFRAME element when a comment is added). Any other ideas?
EDIT #2: It seems that the root of the problem is that Facebook automatically assigns a height of 200px to the IFRAME containing the comments box. When comments are added, Facebook dynamically resizes thie IFRAME to the appropriate height. I'd be able to solve my problem if I could find a way to make that default 200px start at 145px. Not sure if this is possible or why Facebook would think that 200 (arbitrary?) was a good height to start at.
EDIT #3: I realize the white space is coming from the IFRAME that Facebook generates and that there's nothing I can do about that, specifically. I started a bounty on this question because:
1) I find it hard to believe that I'm the only person that has an issue with the way this displays.
2) It's possible it's due to the way I configured something?
3) There's some other workaround I'm not thinking of.
Hopefully the bounty will encourage some creative replies!
Don't set the height to auto, set the overflow...
Set height:110px and overflow:auto on the Facebook iframe - then comments will expand the height of the iframe dynamically.
Pop these changes in your $().ready function - this works fine for me.
I had this problem on Mobile browsers. Facebook added this auto detect for mobile devices. It loads a different version of the plug-in that is full of bugs. Just set the mobile flag to false to force it to use the regular version that does not have bugs. This saved me. I hope it helps you.
There are several contributing factors:
.fbFeedbackContent has min-height: 165px
the loaded iframe has height: 200px
there is an empty span tag within the fb:comment tag
Addressing any or all of these should get you started. You may need to use !important to override some of the CSS.
I was suffering from the same problem. The extra white space only shows up when there are no comments yet. So you just simply do the following:
1.) Swap back to the old markup, because step 2) is not supported by HTML5
2.) Make a new div #commentcount, in which you will load the count of comments. You can hide it with display:none;.
3.) Insert the following code to #commentcount: <fb:comments-count href=http://example.com/></fb:comments-count>, where example.com is the exact URL of where you're commenting. In most cases this will be $_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"] (PHP), or the appropriate HTTP header variables in other languages.
4.) Store the comment count in a variable in JavaScript. You can reach the count easily, It's inside the #commentcount div in a span element. If you're not sure about this, check chrome dev tools or firebug, it will show you the rendered structure. (as facebook may change it eventually)
5.) Write a nice javascript code to update the facebook comment container div if(commentcount==0). Add a style of: height:110px; overflow:hidden;.
6.) Load the comment count frequently so if someone comments, you can drop the hidden overflow and fixed height, and they can see the new comment. You can do this using setInterval().
It works!
An easier alternative solution: You can set the style="background-color:#f5f5f5;" for the comments box if you have for example a site with F5F5F5 background color. The comments box colour will blend into your site. It looks nice.
Turn off mobile parameter.
For exemple:
<div class="fb-comments" data-href="http://example.com" data-width="470" data-num-posts="10" mobile="false"></div>
i solved it by setting the height on the . im using the facebook plugin in wordpress. you can find that file under /wp-content/plugins/facebook/social-plugins/comments.php in line 75 or set it to css
#respond{
height: 112px;
}
I am using FbComments plugin for Wordpress and there you can set the customisation options. This solved the problem for me.
Where it asks Comment box style AND Whole comment box style enter the height you want. It should be 72px. So you enter height:72px; in the space provided. Don't forget the ;

Looking for simple slideshow with previous and next navigation

I just need to display the images in the very center of the page. The images will be different widths but should still be centered. I have custom arrow pointers and I want the other images to be hidden while the other fades out and a new one in.
I've found jquery cycle and stuff but I couldn't center the slideshow to the center of the page for some strange reason.
Any advice?
What plugins can I alter (just replace images) to get what I want?
http://www.proglogic.com/learn/javascript/lesson10.php
not sure if you are still looking for this, as its been awhile since your post - but this is a very simple slideshow using javascript and a table. the image is displayed with "previous" and "next" links below, which can of course be changed to whatever you want. the only possible issue is that it uses html tables which are frowned upon (unless completely necessary). it is however, very easily center-able using css. good luck!
Checkout Anything Slider. That seems to be what you are looking for.

Page displaying sections using opacity, following #section and then do Javascript ScrollTo(0,0)

Here is my app - http://www.shalgreetings.com/ I am trying to override the scroll bar going down to a imagesection in CSS, so that whole app is visible with logo, header and other controls all the times when people navigate through different #sections. I am not sure where in the CSS, I am making the mistake as clicking on #sections traverses the page. Here is this app's original inspiration code, which has got this right.
Anyone can point me where the problem seems to be in the above app?
Edit - It was not a problem with CSS. Perhaps I am looking for a Javascript solution that would follow the link, but still ScrollTo(0,0).
There is no mistake in your CSS, the inspiration code "cheated" in a way: he used just a few photos so the viewport would never be too short to display everything. In the example you can make your window height short and it will exhibit the same problem.
You probably already know that you can solve this problem with a bit of javascript (onclick="return false;"). I'm afraid there is no pure CSS way from preventing this from happening.

Categories