I have a page with error message hidden using display: none;
When page loads, the error message was shown briefly and then went away. It seems ccs applies slowly to the page.
How can I improve the user experience and not allow the error message to display when loading?
The page also loads a table using Ajax call. Could this affect how css applies to the page?
Thanks.
Simply add style="display:none;" to the actual html elements or div's on the page that you don't want to show initially. You can't rely on the CSS file right away. For example:
<div class="error" style="display:none;">
<span class="myerror">Hello World!</span>
</div>
Other than this exception for the hidden areas, it's typically best to keep all your css decoupled from the page and in an external file.
If you call your CSS file with <link> then you should try to put your CSS in <style> instead. Should be faster. As the external file needs longer to load then <style> which you have in the same file.
Related
I'm trying desperately to make the link on a linked image work but whenever I click on the link, my browsers (Chrome & Firefox) just tell me they are connecting to the page and I get a continuous spinning image as if the browser were doing something. The link works perfectly if I open in another tab.
The div in question is coded and styled in a Wordpress page. I am making changes to another developer's work for a customer.
Here's the div:
<div style="position: absolute; top: 645px; left: 80px; width: 150px;">
<a href="http://themoneycouple.com/?p=4681" target="_top" style="display:inline-block">
<img src="http://themoneycouple.com/wp-content/uploads/2013/10/kit-history.png" alt="Toolkit History Link" width="150" height="170" style="position:relative; display:block; z-index:999999999999;" />
</a>
</div>
And here's the page it's on: http://themoneycouple.com/resources/love-and-money-kit/
I've tried changing the z-index on every element in multiple ways, tried changing the link target in every way possible, changed display settings, etc.
One last note, there are lots of iframes on this page and I'm not sure if those are messing things up somehow. Massive thanks for any help.
It looks like the URL for that HREF is trying to load a page as a modal using the fancybox protocol. Is this what is expected?
Does that page ID exist? It looks URL looks different from the other page URLs on the site.
There is a jQuery function that targets every IMG tag w/ an A tag and applies a class of "fancybox". Modify the specificity of this function to exclude the last item in the gallery. Better yet, create a new class and add it to the elements that should have the fancybox functionality. The same issue happens on other pages where the HREF goes to a page instead of opening an image.
Current jQuery function:
var thumbnails = jQuery("a:has(img)").not(".nolightbox").filter( function() { return /\.(jpe?g|png|gif|bmp)$/i.test(jQuery(this).attr('href')) });
thumbnails.addClass("fancybox").attr("rel","fancybox").getTitle();
I think I found the link you mean and it has a fancybox class on it, so I presume it is trying to open a fancybox javascript plugin popout for your link.. which is a redirect and failing to do so, since I can right click the link and go to open in new tab and it works.
My footer isn't aligned at the center on pages without a sidebar. On pages with a sidebar, the alignment is perfectly fine. Why is this happening? Can anyone help please?
Here's a link to the site I'm working on: http://www.thesuperwomanlifestyle.com/
The home page has no sidebar so the footer isn't aligned at the center. If you check other pages that have a sidebar, the alignment is alright.
Please help!
Fix your code errors, like the missing closing </p> and </div> tags. Those errors will throw the footer out of alignment. See [Invalid] Markup Validation of thesuperwomanlifestyle.com - W3C Markup Validator. Scroll down in the validation report to see line numbers and source code. Find the source in index.php and footer.php, but that depends on your theme. Start fixing the code errors and revalidate.
And fix the BOM file type of your header.php and index.php files, as per the warning in the validation report. Change them to unicode no BOM.
I have checked your code by using view source page for both home page and inner pages. I found that in home page the is inside and in inner pages the is outside .
So check your PHP template file for inner pages and close the div of "insidewrap" after footer's div.
Hope it solves your problem.
There are several reasons, in your footer you have diferent code in the diferent sections, and there are a image than not loads. Due to you use IDs for the DIVs, should be a good solution make the DIVs floating in the CSS code.
<div id='footer_left'>
<img src='http://www.christiflynn.com/wp-content/uploads/2014/03/Take-the-Lead3.jpg' />
</div>
<div id='footer_optin'>
<script type="text/javascript" src="//www1.moon-ray.com/v2.4/include/formEditor/genbootstrap.php?method=iframe&uid=p2c9303f30&version=1"></script>
</div>
#footer_left, footer_optin {
float:left;
width: 10em;
}
You might need to create another footer-page.php template. Then, rearrange another footer. Call the footer template by using get_footer('page');
Of course, when creating this, you will need to create a new template for footer so you can move it to the left.
If it's possible, we'd like to see your code for footer and the page code, please, so we can solve the problem.
I am using ng-view to render dynamic data on my page. When the page loads, if I use static html I get this (top):
When Angular loads the page the data is there but it's like the element is still empty (bottom).
If I make even the slightest adjustment in Chrome dev tools, the items snap into place but I cannot get them to prefill without using CSS to make them static sizes, which doesn't work because text is different sizes. The elements in question have CSS of inline-block.
As you can see in this screenshot, I have tried two ways of populating the data, both with the same result:
<div class="cd-rating" ng-class="caseData.scoreClass">
<span class="score" ng-bind="caseData.adjustedScore | number:0" ng-cloak>N/A</span>
<span class="verdict">{{caseData.recommendation}}</span>
</div>
Here is the what the HTML looks like in the browser:
<div class="cd-rating medium" ng-class="caseData.scoreClass">
<span class="score ng-binding" ng-bind="caseData.adjustedScore | number:0">349</span>
<span class="verdict ng-binding">review</span>
</div>
If I hard-code that HTML identically, then it renders perfectly. It's only when Angularjs renders it that the elements are collapsed, appearing if there is not content.
I would also like to add that I am using RequireJS and manually bootstrapping the app instead of using the ng-app directive, in case that matters.
Any ideas on how to make the view fill the elements?
EDIT: Here is a video that demonstrates the behavior: http://youtu.be/zTwv-o6mWRM
I am not able to figure out what exactly you mean by the "..data is still there but the element is empty.." - the only issue that I find with the rendering by AngularJS is that the "Review" (button?) is overwritten with the number.
Looking at your code (which, as #Wingman4l7 suggests needs to be posted in the question rather than as a image), I see that you are using bindings to define a class dynamically. Instead, can you use the ng-class directive and see if it resolves the issue?
That is, replace:
<div class="cd-rating {{caseData.scoreClass}}">
with
<div class="cd-rating" ng-class="caseData.scoreClass">
instead and check if the issue gets resolved?
I have an unusual problem that's driving me crazy! I haven't found a question posted yet that pertains to this exact issue.
I have a page on my site where certain elements render incorrectly on random page loads. Using chrome for example, the page will render normally but after a number of refreshes a basic ul in the header will shift down into the body. Sometimes a carousel won't appear, or a navigation block will slide to the next row. I have duplicated this behavior on Firefox as well.
I can't really give a snippet of code for anyone to look at because I have no idea where the issue is originating from. The page with the issue is the index of www.Calibrus.com.
What's really amazing is that by using Chrome Dev Tools I can set display:none to the incorrect ul, then set display back to normal, and the ul renders where it should again. This suggests to me that the exact same html and css is somehow rendering differently (regardless of any scripts being used).
Also, this isn't an issue with the server. I have the same problem when running the code locally.
Does anyone have any idea whats going on here?
I believe the issue is tied to floats and the slideshow javascript.
Whenever I triggered the layout bug on the live site, it was accompanied by the first slide not rendering correctly. This would cause <div id="r1"> to have a height of 0 which in turn seems to aggravate the afore mentioned float bug. There seems to be some tension between the <ul> which is floated and the <a> which is not.
This is the solution that worked for me:
In index.html add a class (or ID if you prefer) to allow yourself to target the link within the CSS. In this example I have simply given it a class of logo:
<a class="logo" href="index.html">
<img src="images/Calibrus_logo.png" alt="logo" border="0">
</a>
Then, in your CSS:
// target the link using your chosen selector
.logo {
display: block;
float: left;
}
Once I added those rules, I could no longer replicate the rendering bug.
Side note:
I would recommend declaring your character encoding just after the opening <head> tag with <meta charset="utf-8">.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Calibrus</title>
Also, the border attribute for images has become obsolete. So rather than:
<img src="images/Calibrus_logo.png" alt="logo" border="0">
Simply target the <img> with CSS and declare:
.logo img {
border: none;
}
I have just added a 'Like' button from Facebook. The site is in Arabic, and I have added the necessary Arabic language locals to the FB code. Now the problem is the Icons are displaying slightly different, and I can see that can be controlled by CSS. The FB Code loads an iframe and within that there is a SPAN that has a class that controls the position of the Facebook (blue 'f' icon) which is overlapping over the text. When I try using FireBug and re-position it it words fine. My question is how can I write a CSS code that I can change the value on that iframe loaded CSS from my local CSS file ? The code is as follows:
=== Code on the iFrame that is loading ===
<div class="connect_button_slider">
<div class="connect_button_container">
<a class="connect_widget_like_button clearfix like_button_no_like">
<div class="tombstone_cross"></div>
<span class="liketext">أعجبني</span>
</a>
</div>
===
The CSS that is loaded by FireBug
.button_count .like_button_dark .like_button_no_like .liketext, .button_count .connect_widget_like_button .liketext {
background-position: -1px -47px;
}
====
I need to change the "class"="liketext".
I want to change the value of "background-position: -1px -47px;" from that to the following:
background-position: 38px -47px;
====
Now I have my local CSS file, how will I be able to access that element "liketext" and change the value from "-1" to "38" ...
The page, if you want to check, is on the following link ...
URL: http://www.majalla.com/arb/2011/09/article55227042
On top of the article you will find the facebook icon/like overlapping just next to the print icon.
I really don't like telling you that your work here was pretty much wasted. You can't influence an external iframe with css - that's why Facebook does it that way, to have full control over their icons. Anyway it's a shame that the like button doesn't get displayed properly, but all you can (and should) do is submitting a bug report to facebook!
By the way, try taking care of your spelling: It's that, not tath and THAT spelling makes it really hard to read your question ;)