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!
Related
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>
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.
The essence of the problem is as follows:
There is a page, I need to modify the contents of the browser extensions, you can use jQuery.
Tried $(document).ready(), but then the contents are still displayed for a short period (FOUC). I can not make changes to the page styles on the server.
I'm using the kango framework to build the extension.
Using only ECMAscript, you can't reliably avoid it. You have like no shot if you wait for DOMContentLoaded event, because at that point the DOM is pretty much rendered and displayed (which is what you see for a short period).
Your best shot would be to modify the CSS as soon as possible. If the stylesheet definition gets loaded before the DOM gets rendered and you would have set like
body {
display: none;
}
you would not see anything. You could try like
<body>
<script>
document.body.style.display = 'none';
</script>
<!-- more html -->
</body>
if that is any viable / useable solution for you.
I suggest you to use a combination of CSS and JavaScript. I had the same issue using jQueryUI on a site I'm building and found that a lot of these solutions out there would make the content unavailable to those without JavaScript.
So, here is what I did:
CSS:
.flash #wrapper {
display: none;
}
This sets <div id="wrapper"> to hidden only if it is a decedent of the flash class. So, to keep it from being hidden from those without JavaScript I add the flash class to <html> element. So, it can only be physically hidden if an end-user has JavaScript enabled, otherwise they'll at least have access via the unstyled content.
JavaScript:
$('html').addClass('flash');
$(document).ready(function() {
/* Do all your stuff */
/* When done show the wrapper with the content styled */
$(#wrapper).show();
});
Depending on your pages time to load you might get a little flash, but it won't be a flash of unstyled content, which is rather ugly. In my case I had a jQueryUI menu item that would flash the normal <ul> element first then the menuUI item, and my <div> elements are resized with jQuery so that each <div> column is equal height, but it would flash the different heights first. This fixed it while still giving accessibility to non-JavaScript browsers.
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?
I'm currently developing a Safari extension that uses an injected script to further inject some HTML into the current webpage, as well as injecting some other scripts to make it work. This is all working fine, but the issue is that the HTML that is injected gets affected by CSS stylesheets that the webpage has already imported. For example, the HTML looks perfect on Google.com (which has relatively little CSS styling), but awful on StackOverflow.com (which styles buttons etc).
jQuery is injected into the webpage at the time of this HTML being displayed, so I have that available. I've tried all kinds of things, including walking through all of the elements and calling removeClass() on each of them, to no avail. I've also tried to add "CSS reset" classes, etc, but nothing seems to be working.
What's the best way to go around preventing the CSS from interfering with my HTML?
You can't prevent that from happen. However, you can override the CSS rules. Give your main element a unique id (which really should be unique by obfustation, like "yourapplicationname_mainelement_name" or something), then override all possible styles that might give strange effects on your html.
Your plugin:
<div id="yourapplicationname_mainelement_name">
<p>My paragraph that must not be styled</p>
</div>
Your css:
#yourapplicationname_mainelement_name p {
display: block;
color: black;
background: white;
position: relative;
... and so on ...
}
As your css style rules are the most specific, given your id, they will override any settings present on the page where your html is injected.
Further... It might be hard to see what rules are the most important. You can use firebug or similar to understand which is overriding another. You'll have a hard time without it when developing your application.
that's a tough one. two options as I see it.
You could set a wrapping div around all your content and prefix all your css with that. example:
<body>
<div class='wrappingDiv'>
...
</div>
</body>
stylesheet:
.wrappingDiv * {}
Then when you inject jquery use that to close off the initial wrapping div before your content and to wrap any following content in the another wrapping div.
Issues:
Only possible if you are injecting
other site content onto your own
site.
This could get complicated
depending on where you are injecting
html.
The other option is to load a resetting stylesheet that targets your injected html specifically. In this case only your injected html would be wrapped but you'd need a css file that reset all attributes for all tags to their default before you add your own styles. No real issues here, just not very elegant...
Another way would be to use an element that doesn't inherit stylesheet like an iframe, but that comes with its own issues...
i have seen on different plugins that they put the code inside a iframe and they use JS to interact with the rest of the page, so you can not change the css inside.
Also i have seen that when injecting html code,people sets the style of the plugin content using the "style" attribute inside the tags so the browser will give priority to the css inside the style attribute and not the css file. The idea is to override the css,usually with the "!important" clause. But you might have some problems on different browsers
EDIT i forgot to say that my answer is on the case that you inject the code on someone's else page where you cannot control directly the css