React component takes css from previous page - css

I have a react component in a project that I'm working on, and this component is on 2 different pages, and I gave it different css proprieties for each of these 2 pages.
Now, the behaviour that I expect is : when I switch the pages, the component will load the css that I gave for it for that specific page.
What actually happens is that if I switch between the pages, the component keeps some classes from the previous page, and messes up my component. If I manualy refresh the page, it loads only the css I expect, but If I just use my app buttons to switch between pages, without refresh, it does the unexpected behaviour.
Does anyone know why this happens ? Or how can I manage it ? I tried many css solutions, but none worked...

Related

ASP.NET MVC change content animation

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

Styling of Buttons is being overwritten

this is my first post.
I searched for the problem but I couldn't find any solution.
I work with JavaFX, Scenebuilder and CSS files, where I have 2 Buttons and Textfields and other stuff, that are given style classes.
However, when displaying the view, the button styles are being overwritten.
Everything else gets displayed properly but not the buttons.
I can't explain that to myself, however, I have added random buttons and they get overwritten aswell. So I know that somewhere is said that all buttons receive this certain style.
This is a group project, so not all of the code is written by me.
Is there a method in JavaFX that sets styles for certain element types i.e. buttons without styling a specific button? I suspect that this is being done somewhere or maybe the view is inheriting said styling from some other view, because in our project we load stages into each other.
Say I can't fix the occasions where style overriding happens. Is there a way to protect these two specific buttons or buttons in general from getting their style classes overwritten?
OT: why is "hello there" in the beginning of the post being cut out.

CSS Styling ignored on page load

In the process of creating my first Rails 4 app but something strange is happening...
Everytime I click on a link to go to another page within the app the css is ignored. Then if I refresh the page the styling appears again! Has anyone experienced this issue before?

CSS gets messed up after Ajax page load

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 ?

DotNetNuke CSS problem on page postback?

We're having a very strange problem with css in DotNetNuke.
It seems that with any of our custom modules, if a user clicks to postback 9 times the skin css is removed and the page becomes rather ugly. Looking at the source the tags with the urls to the css files are gone. After one more click making 10 postbacks, any custom css files we've added are removed as well. It seems that sometimes the css will come back after more postbacks but other times it will not.
what you click on doesn't matter, just the amount of postbacks. However we have another server that on some days will behave fine, and others will have the same behavior.
We can't narrow it down to anything our modules have in common. It happens in modules that do not share any code, but somehow happens in all our modules that we've tried but not in any other modules that come with DNN.
Though experimenting we've also found you can postback say 8 times leave the page and come back, you then can postback 9 more times before the css will be gone.
Something link this has happened to me before but not with dotnetnuke, so it may not apply.
Anyway, my my case what was happening was i was making an ajax request that would update a table body with some new rows. on some requests, the page would lose its css styles. it looked like no styles were used on the page.
the root of the problem was that invalid html was being returned from the ajax call. actually a 500 error page was being returned by the ajax, which contained HTML tags, the whole deal. this seemed to break the styles in IE.
if "postback" == ajax request, then this may help
This was do to not having a doc type set for the DNN skin we were using. The copyright was a side effect.

Resources