Flashing image in div when I use background-image css property - javascript

I have two div in my webpage, it is the two possible option the user can choose from. I set each div background with css (background-image). The images are preloaded, when the site loads. There is two possible state, when an option selected xxx_image_enabled.png are set as a background image, when the option is not selected, xxx_image_disabled.png is set as a background image. In some browser (Chrome) it is flashing a little bit. I set the background-image property with jQuery.
The css looks like this:
.option-div{
width: 70px;
height: 70px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
margin: 0 auto;
}
Any idea what causes the flashing? After a refresh it disappears.

Try to refrain from setting original styles in your scripts to keep your code unobtrusive and separated. You can set the background-image in CSS then change the value of it later in jQuery.
Not sure how your HTML is set up but make sure your CSS is loaded before your script in the HTML order. If your script is loaded first, you will have some rendering issues. Put your <link> or <style> before the <script> that uses it.
I'm just guessing these suggestions since I can't see the jQuery code.

It's very likely that the jQuery is causing the event to repeat. To fix this, I suggest using a jQuery .stop within the function.
Consider:
$("#option-div").stop(true,false).animate({ //this is assuming you are using animate, swap this out for the event you are using
//just to make you aware, if you set this to false,false it will skip the event and go straight to the finished outcome, in this case the animation would not trigger.
Also, consider using an if statement to prevent the event from being called, if it is already active.
Consider:
if($("#option-div").not(':animated')){
else { // your code here
It would be easier to understand the problem and help you if you provide your jQuery code, I would have commented but don't have 50 rep yet.

Related

Is display:none automatically means that iframe and it's content not exists?

I have an iframe. Inside of it I only run a javascript which update some value and handle a POST method (for prevent reload the whole page). My question is if I set it to display:none; will the script and the POST method work? Or should I set it to some kind of negative position?
What is the best solution (I know maybe AJAX request but it's a bit complex to develop in my case)
display: none does not remove the element from the DOM, but rather the DOM flow.
Note that this is different to visibility: hidden, which simply hides the element, while leaving it in place in the DOM. If the element occupies space, the space will still remain occupied, leaving a gap.
It is impossible for CSS to actually alter the DOM, and neither rule will prevent embedded <script> tags from executing:
.one {
display: none;
visibility: hidden;
}
<div class="one"><script>alert('hi');</script></div>

Strange CSS precedence behavior after AJAX load

I am trying to figure out how I seem to be losing my CSS precedence on an AJAX loaded page. I am loading my custom CSS last on the main page, so that should allow my CSS to override any bootstrap CSS. After loading new content via AJAX, bootstrap is overwriting my custom CSS. I can see via browser debug that bootstrap has overwritten the property.
Custom CSS Styling:
.mytableclass td {
font-size: small;
text-align: center;
vertical-align: middle;}
As bootstrap isn't setting the font-size or text-align, it applies fine, but my vertical-align is overridden. I am not loading the CSS files again in the AJAX loaded page. There has to be some sort of reason, but after several hours I can't figure it out.
As you didn't post the Bootstrap CSS class definition, I'm going to guess it is a CSS selector priority issue.
Is the Bootstrap CSS selector more specific than yours? Then it gets priority over any CSS loaded later. Either make your selector as specific or more specific, or apply the !important directive, but that is not recommended (also see ITCSS).
Loading a specific bit of CSS after everything else does not give it any precedence. What you'll want to do is make sure it has a more specific selector. (You could also use !important, but that a hack and I don't recommend it unless you can't get anything else to work.
If .mytableclass td is the selector bootstrap uses, consider adding something to the front of it. ie body .mytableclass td. Or you can go into the HTML itself and add an id that you only use as a selector in the AJAX CSS.

How to keep my include from making my page longer

I'm not sure what I'm doing wrong here but I have a limited amount of work with js and php so this might be an easy fix:
I have a resume page and I'm using js to replace a target div on my resume as needed. This is working fine and I've placed the additional divs in a hidden div at the bottom of the page. Instead of coding the included content into the page I was calling it in via a set of php includes. I assumed as they were inside a visibility hidden div they shouldn't impact the page. While they are not visible they do make the page longer by the same height as the 3 includes combined.
Is there an easy fix to this or is it better to hard code the divs into the page itself?
(PLESE NOTE: I am having a problem adding the code clip but I can provide a link to the site if desired)
What you actually is looking for is display: none; property, rather than visibility: hidden;. The difference is, visibility: hidden; still occupy the same space it would with the content displayed, while display: none; removes the div altogether.
Also, note that display is not only used to show or hide an element, it also set the inline/block behaviour of an element among others, but generally: as long as it's a div, you should most likely switch between display: none; and display: block;. If it's an <a>, <b>, <span> or some other inline element, go with display: inline; instead of block. You could take a look here.
Also, the display property is easily configurable with jQuery with the $('div').show() and $('div').hide() functions.
Hope this helps. Let me know if I'm not being helpful!

Is there any way to change the CSS of the Facebook Like Box?

So I'm trying, through whatever way possible, to modify the Facebook Like Box's CSS. I've found the offending value and I want to change it. This is inside of an iframe.
The CSS is this:
.pluginLikeboxStream {
overflow-x: hidden;
overflow-y: auto;
}
This is causing there to always be a scrollbar on the Like Box stream, which I really, really don't want.
I'm not seeing anyway to modify this - not the Javascript SDK (which is my best hope, I think), not through using Javascript or jQuery on it (as it creates an iframe, this is impossible, as far as I can tell - even though Firebug lets me change this).
Obviously the best solution would be to be able to set a style using CSS, but that also seems impossible.
Is there any way to fix this?
I've tried to load the iframe with no scrollbars, but that's just on the outside of the iframe - this is obviously internal.
All I want is for this class to be set to overflow: hidden;
It is not possible to change the CSS of the official Facebook Like Box because it is an external iframe.
Read more in this duplicate.
Since the content you want to change via CSS is in an iframe, you can inject a style into the iframe. But as Vector said, know what you are getting yourself into.
You can create your own "Like" button - without like count (but you can fix this) and then use JS API to "like" URL's
If you set !important then it will over rule any other CSS applied to the element
.pluginLikeboxStream {
overflow: hidden !important;
}
!important should only be used in circumstances like this.
EDITED
To apply it to the iFrame you need to use jQuery
$('iframe').load( function() {
$('iframe').contents().find("head")
.append($("<style type='text/css'> .pluginLikeboxStream {overflow: hidden !important;} /style>"));
});
This is how i've always done it.

Progressive enhancement - not hiding elements with CSS

I often find myself showing/hiding elements with jQuery, for example a simple tabbed content area where the first tab is visible and the others are not until they are displayed with the javascript. I know it's not good practice to hide the initially hidden ones using CSS (display: none) and then showing the correct ones with JS as non-JS users will never see a thing. So by default I show all and then hide the relevant ones with JS.
In doing this though, the hidden elements will load and then only hide when document is ready. How can I stop this happening? Is there a way of doing this in a way that will degrade gracefully but also not have elements appearing whilst loading, and then promptly disappearing as this looks a bit shoddy.
Unfortunately, the way that Javascript works, this doesn't seem to be possible. There will always be a fraction of a second between the first rendered frame and by the time the JavaScript to hide the element gets executed I was wrong about that, jQuery seems to be able to do that. So, CSS is the best means for this. Luckily, you can add an alternate CSS stylesheet within an infamous <noscript> tag:
<style type="text/css">
#jquery-thing {
display: none;
}
</style>
<noscript>
<style type="text/css">
#jquery-thing {
display: block !important;
}
</style>
</noscript>
Here's the JSFiddle link:
http://jsfiddle.net/kylewlacy/dbWuc/
a few thoughts...
If you don't mind jQuery being littered all over the page as opposed to being all in a separate file, you can call $('#divToHide').hide(); immediately after the element appears. Not very good practice though. Although it depends on the use case, if you are largely a designer/themer creating a 5 page brochure site, you should choose what is right for you!
Or if you're a bit more of a techie, you might like to mess around with .live()/.livequery() and catch the element's insertion with JS and hide is straight away. See this post Is there a jquery event that fires when a new node is inserted into the dom?

Categories