I am adapting a Wordpress theme for a client.
Within the theme, there is a portfolio feature which loads using javascript. Unfortunately, execution of the javascript is fairly slow, so the result is the footer flashing in the middle of the screen before being pushed to the bottom. This is pretty unsightly - You can see it here: http://bit.ly/1nCH0Br
Is there a way to defer the execution of the footer until the javascript has finished executing (or any better way of solving this unpleasant problem?)
You could make the footer part of the portfolio, so that it doesn't load until the portfolio loads, but that will still leave you with the problem that the page looks blank for the first few seconds of a visit.
A better solution would be to adapt the theme so that it includes a div with a fixed height that displays a loading image and some text like "Loading...". You can adapt the carousel to replace this div. That way you can push the footer down to the bottom of the page, AND give the user some feedback that there's more content loading in the background.
Initialize your footer with css:
position: absolute;
left: -10000px;
opacity: 0;
and set the correct values when the page has loaded. You can do this with having 2 classes, one for preloads and another for after load.
The reason of not just hidding the footer with css is that your js can still work with width and height values
Related
How does this slider reload new content as the page is resized?
http://www.herschelsupply.com/
I stumbled across this whilst shopping and their slider is a good facsimile of what I want to create for my own site. Their slider loads new content at a certain point when the window is resized. I have had troubles doing that using BxSlider because I am new to JS.
More info
The problems I have had are these:
I can use css media query or jQuery to hide certain slides, but they remain in the DOM so the slider still displays them in the pager and sometimes it just stops rotating/breaks.
If I create two different sliders to be loaded at different widths the change does not occur as the page is resized. Also this seems wasteful.
If I remove and replace elements from the DOM on $(window).resize(), I am not sure how to return them to the DOM if the window is resized back and forth continuously.
Overall I am just asking what approach you would take to do this? Im sorry if this is verging more towards discussion than a specific question, but I'm not sure where else to ask.
The website you showed simply has two completely separate slideshows. One is hidden and another is shown when the window resizes.
<div id="slider-one" class="hide-for-mobile">
/*Slider here*/
</div>
<div id="slider-two" class="show-for-mobile">
/*Slider here*/
</div>
Then in your media query for mobile...
.hide-for-mobile {
display: none;
}
.show-for-mobile {
display: block;
}
Now, as for a solution that's more along the lines of what you were trying to do... What you need to do is get away from HTML <img> tags. Instead, your sliding elements should be <div>'s with a CSS background image. In this way, in your media queries you can change the background image of the <div>'s. I am unsure whether or not the slider you are using can support this, some are dependent on sliding an actual HTML <img> tag. Some can slide whatever you want. You should be able to manage what I've described with Flexslider (a quick google search will get you where you need to be).
My goal is to 1) load a new "top bar" element on an arbitrary site using JS bookmarklet; 2) have the top bar pinned to the top; 3) push the original content down.
Is there a reliable way to do it with CSS/JS that would work with all sites?
Edit: This is what I tried: jQuery.wrapInner() and prepend() to first, wrap the existing body content into a new DIV, and second, to insert another new DIV with fixed position to the top. I already ran into issues with jQuery.wrapInner() re-evaluating JavaScripts twice.
One alternative I can think of is to proxy the original page through my website and have the original as iFrame (just like Digg does).
One way to do it is to wrapp the original content in a div using jquery and then set position:absolute;
top: 20px;
if your topbar is 20 px high. I can't really think of a case where this won't work...
This cannot be done reliably because JavaScript gets re-evaluated when injected into the host page. For some host pages it won't matter, for others it creates a complete mess. Now I understand why iFrame approach is used as much as it is.
I know what you're thinking, not this again, right?
Here's my site: http://mydesignfeti.sh/
As you will see the browser loads the body & all of its content then the javascript animation loads. All I want is for the animation to load without having to see the content load beforehand. If you're lacking an imagination just refresh the page or click the logo in the top left to see how I want the page to load.
I've tried toggling the container div's class display using javascript, but apparently I was doing it wrong.
Suggestions? Answers? Laughs?
Thanks in advance.
I am not super familiar with how Adobe Edge works, but the basic idea is you will need to either:
Make your initial html/css match the animation base state.
Hide your animated divs initally, using css display: none, and add a second state to your animation to display all of the elements (eg display: block) before sliding them back on the screen.
In the html set the container div property style="display: none;", this will hide the html elements until the javascript animation gets loaded.
I'm implementing a Wordpress theme where content slides into the page vertically. To do this, I need to measure the size of the div containing the content without visibly rendering it first. I'm attempting to do all of this without Ajax.
Here's what I've discovered so far:
I can easily load the document, read the size, then hide the div with javascript. Unfortunately there's a very obvious (and unacceptable) flicker because javascript doesn't hide the div fast enough. There's also the issue that if images are placed into the content, I have to wait until they're rendered to get the true size... no bueno.
The other option is to hide the content with the CSS, but if the user doesn't have javascript enabled, they'll just be staring at a blank page.
Which brings me to where I am currently.
I have a piece of javascript that runs immediately after the stylesheet is declared that changes the location of the stylesheet link element and then re-renders the page with a javascript specific stylesheet. This solves the problem of having to hide the content before reading the size.
This was accomplished by positioning the div containing the content absolutely and off the page 9999pixels.
#content {
position: absolute;
left: -9999px;
}
At this point, I use jquery to retrieve the height of the content with the following code:
$('#content').height();
The problem is, the number that's coming back is the incorrect size and is much smaller than the actual content. When I change the css to:
#content {
position: absolute;
left: 0px;
}
It renders correctly. What gives?? Is there a bug I don't know about? This happens in both Chrome and Firefox.
You can view it for yourself here http://thethechad.com/wordpress
-- UPDATE --------------------------------------------------------------------------
I figured out my problem. The div I was using had no specified width. When I moved it outside the flow of the document, it expanded to fill that gap, shifting the content and reducing the height of the element. I went back into my CSS and hardcoded the width and everything is working fine. I feel really dumb. I'm sure we all have those moments. Thanks so much for the help guys!
I'm a bit confused by your long explanation, but here's how I measure things without anyone seeing them.
I assign the div a class name I call "measure". Measure has predefined CSS:
.measure {
position: absolute; // doesn't affect layout
visibility: hidden; // not visible, but normal size
left: -1000px; // won't affect scrollbars
top: -1000px; // won't affect scrollbars
}
You are then free to get the divs height. Note: it's width may not be the same as it would be in the layout of the page because divs go full width when position: static.
If you want to make sure that the object is never seen, then you can give it an initial class of "measure" in it's original definition and then remove the class later when you want to use the object in the layout of the page.
I'm not sure what is causing your problem, but you might be able to use something like this:
http://jsfiddle.net/Paulpro/9YBDB/
<div id="thediv">This is the div</div>
<script type="text/javascript">
var $thediv = $('#thediv');
var height = $thediv.height();
$thediv.hide();
$thediv.html('Div\'s height is: '+height);
$thediv.show();
</script>
Were you execute a script to hide the div immediately after the div is rendered, rather than in a script later in your code or on DOMReady etc, so that the flicker doesn't get a chance to occur. However if the user's computer is slow or they are using an older browser the flicker might still appear, I'm not sure. It all depends on if the browsers HTML parser and Javascript engine is fast enough to finish executing $thediv.hide(); before the div is rendered, which I think almost all browsers will be, because rendering is a relatively slow process.
I have an iframe that contains a page that is constantly updating (basically a logger type thing). Is there a way (either via JS/jQuery or otherwise) to force the iframe to stick to the bottom of that inner page even as it expands?
I basically want to mimic the way may log viewers stick to the tail of a log file as it is updated. I found a similar question already here, but the solution doesn't seem to work within an iframe context (similar question).
Update: Just to clarify, I don't want the iframe at the bottom of the page. I want the contents inside the iframe to stay scrolled to the bottom. The iframe has a fixed height, and after the page loads, additional lines are added to that inner page and I want to force the iframe to always show the bottom of that inner page.
Can be achieved using just CSS
iframe{
position: absolute;
left: 0;
bottom: 0;
}
This will position the iframe relative to the body and it will always appear on the bottom.
does the iframe keep refreshing, and adding content.. or does it keep the connection open? if it isn't keeping the connection open... document.scrollTo() is the javascript method you are looking for.. if you are using ajax to append the information.. do a scrollTo where the number is VERY large 0xFFFFFF should work.
Maybe add overflow:hidden in there also
This iframe at bottom of page only works when there is not a scroll bar in HTML but as the Y axis increases this will not be moved at the bottom of page.