I'm trying to figure out how to code a footer exactly like this:
http://elevationchurch.org/
Basically, the footer isn't in view until you reach the bottom of the content. So if you have a tall desktop browser that doesn't have a lot of content and the end of the content container is in view, the footer is still hidden, but you scroll down and the footer is revealed.
If you notice, scale your browser down to a more "mobile" size, and the footer is still "right-there" waiting to be revealed.
I feel like the answer is so easy, but I've scoured the code for javascript and css tricks, and I'm not seeing it.
Any suggestions?
So checking via chrome's developer tools:
style.css has
html, .inspiration, .inspiration #outer, .inspiration #container, .inspiration #content {
height: 100%;
}
and if you enable/disable that css line, the content shrinks/expands as expected, so that's what's doing the magic.
Related
We have been using empty anchor tags with css for years to allow hover states with no issues. Here is a sample of the css and html.
a#phone:link, a#phone:visited { width:34px; height:34px; display:inline-block; background:url(phone.png) center top no-repeat; }
a#phone:active, a#phone:hover { background:url(phone-hover.png) center top no-repeat; }
After a lot of digging I finally got cke to stop deleting my empty anchor tags, here is what I did if interested or helpful. I tried to set the removeEmpty but that didn't work until I added protectedSource:
config.contentsCss = '/css/editor.css';
config.protectedSource.push(/<a[^>]*><\/a>/g);
enterCKEDITOR.dtd.$removeEmpty.a = 0; code here
That finally prevented cke from deleting the tag, however the icons still does not appear in the wysiwyg editor. Its all there in code view...
I have stylesheetparser installed and the other styles in the linked css file are displaying correctly, including floating divs that have a width/max-width defined.
When I view the web page in Dreamweaver or a web browser, all the icons are there and working great, but the links/icons don't appear in cke. I can/have added a no-break space, but that adds margin/line-height, and just messes up the alignment design and layout.
What am I missing? Is this expected behavior? I don't think it should be. Is this a bug?
Any thoughts/ideas/help? Thanks!
I am looking to make a "10 foot" useable site for TV. Ideally it would have a full screen background image a small header where the nav will be placed and under it a container for the content. I would like for the container itself to have a scroll bar, as oppose to the browser having the scroll bar, since this would lose my top header.
Basically top header should be fixed, an image for a background, and a container that scrolls inside itself. I have tried finding templates or a starting point online for this with very poor results. The best i have found so far is http://css-tricks.com/examples/FullPageBackgroundImage/progressive.php
This is almost what I need except the container overflows the screen so the scroll bar is in the browser. Also this article was written in 2010, maybe there is a better way to achieve this now?
You can use CSS to style the div.
div.scroll {
background-color:#00FFFF;
width:100px;
height:100px;
overflow-y:scroll;
}
Then... all you have to do is position that div as you want.
I have a client who wants his wix.com site converted to wordpress. But he wants to keep page sliding effect..
Can anyone tell me how to load pages in wp using ajax with sliding effect(right to left) ?
I've also had this request which i solved with some hacking in the ajax-page-loader code.
In the ajax-page-loader.js file you find the AAPL_loadPageInit() function. Here you might want to check what menu item is clicked, and then push the #content item right or left like so.
$('#content').css('margin-left', '-1500px');
This function triggers the AAPL_loadPage() function. Which around line 160 fades the #content container out with fadeOut(), and then fades in with fadeIn() + loads content.
Before the fadeIn you just add:
$('#content').css('margin-left', '0');
To reset the margin and put the #content container in place.
To make this all appear shiny and cool you'll use CSS transition something like this:
#content { transition: margin 1s; }
And of course dont forget to vendor prefix it. Hopefully this was helpful, please ask if anything is unclear or if you have any questions.
Wordpress noob alert! In my home page's HTML editor, I've added a div that is the footer. Loaded in this is a row of logo images that are supposed to sitting a straight line - however, they display staggered vertically. The top left logo (Ocean Basket) sits correctly, the next one has too much padding / margin, the next even more and then next logo even more and so on. I've set the padding and margin to 0 in the css, floated the images left - I cannot understand why this is happening! Any ideas anybody?
test site at http://inexshopfitting.co.za/
try adding display: block; to the images and get rid of the <br> in between.
(for example by adding #home_logostrip_box br{ display:none; } to your themes css file)
That should do it.
I had 5 images floated next to each other (20% each) and it worked fine in HTML, but not when site was converted to Wordpress; the images where floated but they 'stairstepped/staggered'. Like mentioned before, there are bracketed 'br' elements between each image---inserted by Wordpress. I fixed by adding to my images' container class, .classname br { display: none }. It worked perfectly.
So I want a page that's nothing but a square image which scales up to the height of the window. Fine, great, I do:
img
{
max-height:100%;
height:100%;
width:auto;
}
and stick an in a center-aligned div. Firefox loves it, but insists on the height:100%. Chrome doesn't need that, but adds a little bit of height to the page and so a scrollbar pops up. The whole page itself is still rendering identically down to the last pixel, but Chrome seems to think its window is a little heightier than it actually is. What's going on?
Check the margin and padding on the html and body elements -- often a hidden source of pain!
Yes, I know this was in my comment, but this way the question looks answered :-)