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.
Related
So, the new Exposure site is wonderful and got me wondering how they've achieved something like this. Basically, it's a cover image that's stretched to the browser window (even if you resize), what's lovely about is that only when you scroll do you get to see the content below.
I guess you could use something like backstretch.js for the dynamically-resized image. How are they achieving the rest, though?
I've set up a pen here: http://codepen.io/realph/pen/luwdJ
Which seems to do the job, but the content is being covered when you scroll rather than falling below the cover image.
Any idea what I'm doing wrong, or any tips for achieving something like this?
Thanks in advance!
I think this is what your looking for and css can do the whole thing
http://codepen.io/anon/pen/rajDJ
Just add this rule to your images or image class
img {
width: 100%;
}
What exposure is doing there is creating onclick modal window that contains the image but you can do that with js or jquery or there are many jquery plugins that do that.
Also to get the nice grid structure you can use a grid template. Here is one to get you started http://960.gs/
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.
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've got a really simple page which uses a photo as a full-screen background. I'm using the following to define it:
body {
background-image: url('../Images/Backgrounds/Hillside.jpg') ;
background-size: cover;
margin: 0px;
}
The image, obviously, takes a little while to load after changing page so I've implemented a noddy jQuery $.load() to update the content without the overhead of a full page reload.
Unfortunately, firefox seems to have an issue when the new content causes the length of the page to change. Firefox correctly realises that the scale of the background image has to change and repaints the page behind the content div appropriately - but doesn't repaint the rest of the page - hence it looks like 2 differently scaled images are overlaid.
Resizing the window or causing a repaint fixes it. Unfortunately, I can't take a screenshot as it never shows the problem - presumably it does a repaint behind the scenes.
To demonstrate the problem, visit the site, shrink your browser window so that content forces a scrollbar. Change URL using the menu. Look at the image behind the main content in comparison to the rest of the page (About us and Sample Ads are long pages, contact us/prices are short).
How can I force firefox to do a full repaint? I suppose I'm looking for the equivalent of WinForm's Me.Invalidate(). Is there a better way to do the background image?
NB: I've shrunk/degraded the photo to reduce file size but haven't spent a lot of time on it yet - I know it can be much better.
Edit:
Environment: FF9.0.1 Win7 Ultimate x64.
Steps to reproduce:
Browse here
Resize the window so that the white content area is just above the bottom of the browser window (Also, it's handy to make sure you can see some land in the background to make the effect more obvious)
Click on the "Sample Ads" link
Click back and forth between Sizes & Prices/Sample Ads
As you do so, you'll notice that anything to the right of the menu doesn't scale but the image under the menu/content does.
There are two solutions I got.
The first is simply on loading new content do the following:
document.body.backgroundSize = 'auto';
document.body.backgroundSize = 'cover';
Just tells it to recalculate the cover area.
The second is very hacky and literally just tells FF to reapply all the styles.
for(var ss = 0, len = document.styleSheets.length; ss < len; ss++) {
document.styleSheets[ss].disabled = true;
document.styleSheets[ss].disabled = false;
}
That said, I would also report this as a bug to FF (if you haven't already or if it does not exist in the system).
I see a problem which probably attributes to your issue. Add this to your stylehseet:
html, body {min-height:100%;}
You see, background-size:cover; is only covering the body's physical dimensions. Let's say your body is actually only 400px with its content, but your window has 1000px of height. The browser first applies background-size:cover; which it does so for the 400px tall body, then it sees there's 600px more of space in the window, and kindly applies the background further; in this case, tiling/repeating it. By giving the html/body a min-height of 100%, as above, your body will always fill the available height.
It's not possible to set transparent background for WebBrowser of WP7. To make impression of transparent background I want to do the following workaround. I want:
To find a position and size of WebBrowser on the page.
To get page's background image.
Crop it with values what I found on step 1.
To save result in IsolatedStorage
To parse HTML and place <body background="RESULTBACKGROUND">
MyWebBrowser.NavigateToString(NewHtmlString);
I think this should be a workaround of transparent background and should work.
For now I am trying just to place any .jpg image (let's say test.jpg) on step 5.
But fail. I have "Build Action" property of file set to "Content". It is placed in the root of the project. And <body background="test.jpg"> not working. Back of the WebBrowser is still white.
What I am doing wrong?
UPD:
Step 5 is solved.
2Claus: No! Not only from web. I saved both html file and image file to IsolatedStorage and WebBrowser can show image as a backgroud.
Now the problem is that background cannot be fixed. I tried many differrent things with styles. I also tried to add a fixed div behind my text. Nothing works. The picture is always scrolling with a text. I tried to add onscroll event and pass it scrolled value to move the div in an opposite direction, but div is glued to the page :(
Any ideas?
So assuming you're talking about the WebBrowser control, you're forgetting that the HTML only can refer to urls on the world wide web.
So either you need to host your background images on a website, or you need to inject a CSS style that sets the background to either white or black (the two default background-colours of the platform).
For WebBrowser, You don't actually have to save it to the ISO to make changes on the page. You can load it navigate to it normally, and then use InvokeScript to make the changes via custom JS code. It can be a little tricky though, as you will probably need to heavily rely on the eval and stringization. The problem mentioned by Claus is still there - but you need to do some experiments. With the Mango release and SDK 7.1+, the platform support IsoltatedStorage imagesources in the form of is://path/file - maybe - maybe - maybe squared - the webbrowser's renderer udnerstands them too - then setting your bkg's url to such would work. I doubt though, as it could be seen as some minor security breach, etc
I now bumped into the same background fixed image problem. For someone wandering here I solved it placing content into a fixed-height container (div) therefore the container contents is being scrolled and not the html page, leaving background picture "fixed".
body
{
background-image:url('...');
background-position:-20px -150px;
background-repeat:no-repeat;
background-attachment:fixed;
}
div
{
height:300px;
overflow:scroll;
}
Of course background-position and div height is set specifically for a WebBrowser position in page and it's size.