I have used this code:
form .this-class input[type="radio"]
{
position: fixed;
opacity: 0;
pointer-events: none;
}
And the radio button is hidden when I load the page without caching. But when I turn on Litespeed Cache the radio button is shown for a split second before the CSS kicks in. I tried to turn off cache on that specific page where the CSS is supposed to be active, but it ain’t working.
The form which is affected is implemented through a shortcode (Contact Form 7).
Suggestions?
Related
With PrimeFaces 12, an Ajax loading status indicator icon is introduced to p:commandButton. See https://github.com/primefaces/primefaces/pull/8302
I don't want to use that have loading status indicator icon to appear in my project, but I can't find an option to disable it. So, how can I disable the Ajax loading status indicator icon?
As you can read in the linked pull request, we've chosen to add a class (ui-state-loading) to the button which triggered the Ajax request. With this class you can fully customize how your button should look while an Ajax request is running. You can easily suppress the indicator to the normal state by applying:
html .ui-state-loading.ui-button-text-only .ui-icon-loading + .ui-button-text {
opacity: inherit;
}
html .ui-state-loading .ui-icon-loading {
display: none;
}
html .ui-state-loading .ui-icon:not(.ui-icon-loading) {
display: inherit;
}
See also:
How do I override default PrimeFaces CSS with custom styles?
If you don't want the button to be disabled during the Ajax request, use the disableOnAjax="false" attribute.
I am trying to remove the slider from certain pages and it removes just fine except for one page that is running Easy Digital Downloads in the background. It is page id 102 in the below code. I can not get that page to remove the slider. This is the page https://psycheseminars.com/downloads/spirit-salt-lake-city/
body.page-id-12 .flexslider,
body.page-id-98 .flexslider,
body.page-id-99 .flexslider,
body.page-id-100 .flexslider,
body.page-id-102 .flexslider {
display: none;
}
Any help would be greatly appreciated!
Thank you!
The reason it is not working as you expect is because that page is actually a post. To change the element on that post you need to use .postid-###
The following CSS should remove the slider on that post.
.postid-102 .flexslider {
display: none;
}
I can't manage to understand what's wrong with my website, if it's something with CSS or something else. When I go to the home page http://www.nomadtravellers.com/
the layout is correct. But when clicking on any other menu, as in example "About Us" some of the modules (Photo moasaic, breadcrumbs, etc.) are moving slightly down, while some other are staying in the correct position. Any suggestion on how to fix it?
It is build with joomla 2.5.11 if that matters.
I've already tried to deactivate Css optimization, and it's still the same behaviour
you have different styles for main and inner pages. on main page css there's a reset rule for form (the search field form in your header):
form {
margin: 0;
padding: 0;
}
on inner pages:
form {
margin-bottom: 18px;
}
I setup a static html landing page; displays perfectly in Chorme, Safari, and Firefox. However, I cannot get the embeded MailChimp contact form name and email fields to display when I use the zoom property; as soon as I remove it, the inputs show up too large and out of place which is why I used the zoom property in the first place.
Why would this cause an error? Is there anyway to rememdy this odd problem?
url: http://comingsoon.veteranbrewingcompany.com/
TIA
You really need to address why the form is so large. Various styles are causing it to be so, such as
#mc_embed_signup .mc-field-group input {
font-size: 40px;
}
#mc_embed_signup .button {
background: url("http://themicroscopeguy.com/wp-content/uploads/2013/05/submit2.png");
width: 207px;
height: 92px;
}
So, you have big font sizes set, and the submit button is quite a large image. You can address all that via CSS. You don't need an image for the subbmit button, as you can easily style a normal button with CSS.
I have a Home.html that has a login form that POSTS to login.aspx
the login.aspx takes a hell lot of time to load...
so i want to have a javascript based function where the instant i click Login Button,
a loader must be shown ...while in the background the POST happens and then aspx page must get loaded and then the modal must redirect to the aspx page.
similar to gmail.com login loader..... but only using javascript. (i am also using a minified jquery js ) (NO aspx pages in between)
Please note that i cannot use any asp based loader!
I have tried using :
http://blogs.msdn.com/naitik/archive/2008/07/31/show-loading-message-while-web-page-is-processing.aspx
(it does not work fast. it first redirects to the POSTed page )
Thanks in advance..
If you just want to show a "Please wait...", attach yourself to the forms "onsubmit" event. Then show the "please wait" message (make a DIV visible). When you are done, the form will be submitted and wait for login.aspx.
If you want to have a progress bar, you have two ways of doing it:
* Either post to a hidden iframe which will load login.aspx.
* Or use an XmlHttpRequest to load login.aspx.
In both cases, login.aspx has to spit out messages (pieces of JScript or DIVs you interpret on the client) which update your progress bar.
You will find plenty of examples in Google. Try "jscript progress bar aspx" for instance.
René
Check out the following link, as it is the needed code, styling and layout for a "Loader".
I have used the code and it works 100%
You need a Div on your page:
<div class="modal"></div>
a bit of CSS styling for the div:
/* Start by setting display:none to make this hidden.
Then we position it in relation to the viewport window
with position:fixed. Width, height, top and left speak
speak for themselves. Background we set to 80% white with
our animation centered, and no-repeating */
.modal {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8 )
url('http://sampsonresume.com/labs/pIkfp.gif')
50% 50%
no-repeat;
}
/* When the body has the loading class, we turn
the scrollbar off with overflow:hidden */
body.loading {
overflow: hidden;
}
/* Anytime the body has the loading class, our
modal element will be visible */
body.loading .modal {
display: block;
}
And then lastly a bit of javascript to start and stop(hide and display) the loader:
START:
$(this).addClass("loading");
STOP:
$(this).removeClass("loading");
Source: http://jsfiddle.net/jonathansampson/VpDUG/170/