I'm creating Views for an ASP.NET MVC application. I'm using _Layout and some other Views like Shop, Contact, etc., which have only one element: "content".
How can I set content change animation? I don't like white flashing while changing.
What you're seeing is unrelated to MVC and is the result of simple HTML page transitions. Since you're actually changing the entire page, the white flashing is the result of loading the new page.
You can manage this through CSS and jQuery. Here is one article that describes one way to manage page transitions. Just search for HTML Page Transitions and you'll see plenty of jQuery libraries made for this with extensive documentation.
Here is one jQuery library I found: Animsition
Some additional information on the white flickering you're seeing from this article.
Amongst the various problems with web page loading, white flicker is
considered to be one of the common issues which occurs during page
access, loading, reloading, and traversing Internet browsers. The
white flicker occurs for various reasons including the browser trying
to render the page before the style sheet has finished loading,
JavaScript issues and other rendering faults. Browsers will always
wait until everything (beyond images) has finished downloading before
rendering.
It depends of your css template, if It has spinners you should look in the documentation, if your template doesn´t have, look for one, there are a lot of template of spinners with documentation.
Here is an example of documentation (of course, this apply if you are using inspinia, but all of them have similar applications):
http://webapplayers.com/inspinia_admin-v2.8/spinners.html
Related
I would like to confirm what effect this CSS code has on the homepage of a wordpress website.
.lazy { display: none !important; }
Many thanks for explanations.
I have noticed images in the homepage are being blocked from being displayed which is why im asking this question.
The CSS code itself, prevent any element which has it from being displayed on the screen.
Due to its name, it may be used to enable something called lazyload (you can read about it here).
lazyload is usually used for several reasons:
Remove the pressure of loading many images at first; sometimes images are placed at the end of the page so the client won't see it at the top of the page, with lazy loading trick it. You can prevent those images from being loaded, and force them to load only the moment your client reach them by scrolling or other events so it cause page loading improvements (because the page is now lighter)
For making some visual effects; almost everywhere you need the image to be hidden and after some juggling or some specific events it is shown (like wp-admin and sub-menus, which will be shown if you hold your mouse on or click them)
etc
Recording to the reasons; I guess your kind of codes (which will be handled in client-side and client browser) does not fit the first reason and may be used for the second one because for the first reason it is better (and I guess it must) implemented on server-side. Why? Because in your code, the image is loaded and be will there and just not shown because of the CSS code
This was all I know but if you want a more specific answer you have to say where you saw it in WordPress, in a plugin, wp-admin, template, etc...
Hope the answer becomes handy for you
Currently, I'm investigating several tips/recommendations for improving the performance of web sites. So, I've started with Steve Souders' excellent books (High performance web sites and even faster web sites), but I've got a couple of questions regarding some of the rules that are presented. FOr instance, chapter 5 of High performance web sites say that CSS stylesheets should be put at the top of the page because putting them at the bottom stops the progressive rendering that is performed by the browsers. According to Steve, some browsers (most notably IE) do get stuck with it and show a blank page instead of showing the items progressively. Here's the url for that test page:
http://stevesouders.com/hpws/css-bottom.php
Now, I do understand that we're talking about a book with a couple of years and that browsers (including IE) have been updated and improved. The reason I'm asking this is because I can't reproduce the behavior he mentions with any current version of FF, Chrome or IE.
Well, the thing is that Yahoo (http://developer.yahoo.com/performance/rules.html#css_top) and google (https://developers.google.com/speed/docs/best-practices/rendering#PutCSSInHead) still say that.
So, what I'd like to know is if browsers have evolved in this area and this is only problematic for, say IE 8? If that is the case, why haven't yahoo and google updated their recommendations? (btw, I've tried simulating IE7 from within IE11 and still don't see the expected result that is described in the book...)
*UDPATE*One more final note: I've decided to reproduce Steve's cgi script in asp.net and I've created a simple generic handler that does the same thing as the sleep.cgi script. what I'm seeing here is that putting a stylesheet reference (which takes some time to load - I've went with 10 seconds) inside the head ends up producing the blank page problem that is reported in the book. If you put at the end, the browser ends up rendering everything and making a second pass for applying the styles after they have been loaded. In my opinion, this makes sense because when you put the style in the header element, the browser is holding up until it gets the styles before rendering (notice that the other referenced components are still being downloaded on the background, but they're not being shown in the screen). On the other hand, when they're at the bottom, the browser will simply apply the current styles until it gets stuck in the stylesheet. WHen that happens, it will only show the html it has loaded until the stylesheet (if there are any images below it, the browser will still download them but it will only render them after the styles have been loaded).
So, after these tests, I'm starting to think that 1.) I'm missing something here or 2.) yahoo and google recommendations are no longer valid today.
Thoughts?
Thanks guys!
Simply inserting a <link> tag in the footer is not the way to defer stylesheets. The currently accepted method is to attach it using javascript:
<script>
function loadStyleSheet(e){if(document.createStyleSheet)try{document.createStyleSheet(e)}catch(t){}else{var l;l=document.createElement("link"),l.rel="stylesheet",l.type="text/css",l.media="all",l.href=e,document.getElementsByTagName("head")[0].appendChild(l)}}loadStyleSheet("/your/stylesheet.css");
</script>
Optimizing your page for speed involves determining what CSS is above the fold, inlining that part in the header, and loading the main stylesheet later using the above method.
I recommend doing some searches for "above the fold css" and check out Google Pagespeed Insights.
https://developers.google.com/speed/pagespeed/insights/
I have a website in wordpress. I recently download a plugin called Advanced Ajax Page Loader. It refreshes you content when clicked on other page without refreshing the whole site(header, footer). I tried to get my answer from plugins developer and wordpress support forum, but none responded.
I read that if ajax jquery call is used then all scripts should be reloaded again, for that the plugin have a place where I should put those codes. Until that everything works correctly, except one thin. When I go from a category to category, everything works fine, but when I open a single Post it completely screws up all my css for that page, when I refresh it, everything looks fine but then again, if I open one of the big categories with many posts, then that pages css is messed up.
I though that I could somehow refresh whole css by putting some code in the "Reload code" box, but I have no idea how to do that using scripts. English isn't my native language, therefore I'm having difficulty finding my answer on google, I tried, but my vocabulary is limited. How can I do it?
are you adding CSS classes to your elements via Javascript? If so, then the styles you add will only affect those elements which are part of the DOM at that point in time, so you might be experiencing a race condition, that actually happens to work in Chrome and Safari, but not Firefox.
second try to validate your markup and CSS and see if you have any error in your css syntax ?
For some reason whenever I go to the page of my website that has the crystal report on it my main navigation bar disappears. Here is what the header for the site (with the navigation menu) is suppose to look like:
and here is what it looks like when there is a report on the page:
Could someone tell me what is causing this and how I can fix it?
I'm using master page for the header by the way.
Greener, the Crystal Report viewer is a dynamic HTML representation of the report. It combines JavaScript, HTML and CSS (duh, what doesn't) to represent your report on the webpage. The toolbars are powered by JavaScript calls to .JS that is linked in when the CrystalReportViewer control is rendered to your page.
My point is, all of this introduces a LOT of stuff that can conflict with your existing page. In particular JavaScript errors can occur (which can cause certain things to stop rendering) OR CSS the report uses happens to apply styles you never intended to have applied to objects in your page.
I highly recommend installing the Web Developer toolbar and/or FireBug to FireFox, IE, or whatever browser they are offered on these days. FireFox's implementation of those is quite good in my experience.
When the page loads you can use the 'CSS' menu of the Web Developer toolbar to actually disable some or ALL the styles applied to the page. If disabling Crystal related styles (or all) makes your missing toolbar appear, then it's probably a conflict in your CSS. A front end developer would know to adjust the styles (i.e. add the !important directive to a style, change class/id names, etc.) to address this.
Alternatively, FireBug may be reporting JavaScript errors (heck, even FireFox can show these in the console) which could indicate a problem that prevents the completion of rendering your toolbar.
An outside possibility is that the report itself contains mark-up. For example, if you had certain fields in the report contain HTML that happened to be rendered by the browser, this could create an open div tag, css styles and even JavaScript that would do all the stuff I explained above.
I hope this narrows it down for you. Happy troubleshooting!
I was having the same issue and after hours of searching I finally resolved it... check this out... http://scn.sap.com/thread/1926659
In the crystalreportviewer css file, I adjusted the div class = clear and changed the height attribute and disabled overflow:hidden. Hopefully, that works for you. Good luck!
I found the solution after searching on the web and is a quite simple.
On the Site Master, change the Name for all the places you have the style "clear" for example "clear1" and change it too en the site.css with that name.
The problem is for the conflic with the namespaces with Crystal Report css.
Hope this help.
Hey I just began working on a new project that requires, tab navigation, and within each page, more tab navigation, and then within those pages dynamic ASP.NET content. The problem is I do not want all of my code on one page, that would just be a very large and bloated page. I was wondering what available methods of approach there are for this issue. I checked jQuery tabs, and I see I can link html files using AJAX but I need aspx files not just HTML.
Thanks ahead of time.
I've had to deal with this on many projects. After trying quite a few libraries my approach to tabs is to always do these myself using plain CSS.
But note having multiple layers of tabs is a but usability no-no. Remember Windows 3.x and 95 did this quite a bit. It's less an issue these days. You can try an accordion control along with the tabs to filter your screens
One one particular project, we used DevExpress ASPxTabPages for a while. These worked well, but were a bit heavy for such a simple task. We then moved the project to JQuery, but ran into situations where JQuery UI Tabs started to be an issue as well. Particularly when generating tabs using master pages and render actions in ASP.Net MVC. We finally settled on regular CSS and HTML. Javascript really isn't even needed. Though I'm sure JQuery can be used to spruce things up.
An example of CSS tabs can be found at http://www.htmldog.com/articles/tabs/. There are live examples on that page as well.
what you could do is:
make a tab a span
when clicked on that tab/span, fire jquery and do a GET to a page on the server which represents the tab content
pro: no initial loading of the content of the tabs
Con: slight delay when you click a tab (first time only if you can cache the content of the tab)
this is done when you think that only a few of all of your tabs are clicked: you don't have to load all the data users ain't gonna see.
If you think the user is going to look at all the tabs, then you can load everything in one page. You can use a user control for each tab so no super large page and wrap the output of the usercontrol in a DIV
Then also make a tab a span, and when clicked on the tab/span, make the right DIV visible and hide the others.
I just made a user control that contained the Ajax Tab Control for my sub menu. Each tab actually takes you to a different page.
I blogged about how I did this HERE.