I have embeded a youtube subscribe button on my wordpress but it is coming with padding-top:150%; as inline css from youtube.
How I can remove that padding to put subscribe button at the exact place.
<script src="https://apis.google.com/js/platform.js"></script>
<div class="g-ytsubscribe" data-channelid="UCShv7275jgHM0uvHxZUkG2g" data-layout="" data-count="default"></div>
output on this page sidebar.
http://www.jonathanfritzler.org/i-am/
If you have jQuery try adding this to the bottom of your html page:
<script>
$(document).ready(function() {
var videoList = document.getElementsByClassName("fluid-width-video-wrapper"); [0].
videoList.forEach(function(embededVideo) {
embededVideo.setAttribute("style", "padding-top: 0px;");
});
});
</script>
If you don't have jQuery, add this to the top of your html page:
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
It's not possible to override the CSS inside an external iframe. So when you embed a subscribe button or video from YouTube on your website, you won't be able to edit the content inside of that iframe in any way.
However, it is possible to get rid of that 150% padding-top, because it's not within the iframe.
At the time of writing, YouTube's code for an embedded subscription button is similar to this:
<script src="https://apis.google.com/js/platform.js"></script>
<div class="g-ytsubscribe" data-channel="MyChannel" data-layout="full" data-count="default"></div>
This produces the following HTML on the webpage where you place the code (I've left out some of the code for brevity):
<div id="___ytsubscribe_0" style="[...]">
<div class="fluid-width-video-wrapper" style="padding-top: 150%;">
<iframe [...]></iframe>
</div>
</div>
That top-padding sits outside of the iframe, so you can target it with CSS. The CSS code below would remove the top padding:
/* remove 150% padding top added by youtube subscribe button */
#___ytsubscribe_0 .fluid-width-video-wrapper {
padding-top: 0 !important;
}
You can try to overwrite the padding-top attribute from class g-ytsubscribe in your own style.css.
Related
I need to load an html page inside a div in the following pseudo page:
<html>
<head></head>
<style>
body {
background-color: yellow;
}
</style>
<body>
<div style="display:none">
<html>
<head></head>
<style>
body {
background-color: blue;
}
</style>
<body>
<div style="display:none">
...
</div>
</body>
</html>
</div>
</body>
</html>
What naturally happens in this code is that the background will turn blue, as it is being changed in the middle of the page. Is there a way to isolate this div? So it would act similarly to an iframe. The content inside the div is stored in a variable, so I think I cannot use a frame, as the html code is not stored in a file to use it as a source.
Thank you!
This is just wrong.
An HTML document can only have one html tag and one body tag, otherwise it will be an invalid document, browsers won't allow it.
If you load an iframe, instead, it will have his own #document and it's fine.
You can not load a Site into a Site without an Iframe due to security risks.
The only thing you can do, is to load the external Site with a serverside script like php, cut of the head with regexp and send the rest to your site into your div.
I am trying build the same table as the example on https://datatables.net/
Below is the code I have already can someone help me figure out what I'm missing?
This is built on a wordpress site so wordpress is already calling the jquery. Here is a link to the site: http://dev.americasfinestlighting.com/products/annandale-column-mount-2/
http://pastebin.com/D0w89Grx
I would like have the parent child relationship for mobile. If you resize the example link above you will see the green and red expand/contract buttons.
Thanks,
William
you need to change the <style> tag for <script>, the difference is that tag is to change base styles code for example:
<style type="text/css"> //this change the H1 elements properties
H1 {border-width: 1;
border: solid;
text-align: center}
</style>
and the <script> tag contains the script code like this:
<script type="text/javascript">
document.write("Hello Javascript!")
</script>
You are trying to call the DataTable() function within a stylesheet. Change <style> tag to <script>.
<script type="text/javascript">
$(document).ready(function(){
$('#myTable').DataTable();
});
</script>
DataTable requires jQuery, but you only included DataTable. You also need to include the Responsive extension to DataTable (see here: https://datatables.net/download/release). Copied to Codepen with jQuery included and all dependencies satisfied: http://codepen.io/anon/pen/PNJqqz
Not quite sure how to define this issue. I just started working with jQuery and Javascript and pretty much everything is fine, except for when the page initially loads. I have the page fade in, but it looks like all the CSS isn't being applied until the jQuery loads.
I tried this script in my Head tag, but it doesn't work. Help?
<script type="text/javascript">
$(function(){
$('#box-container').hide();
});
$(window).load(function() {
$("#box-container").show();
});
</script>
Whoops: site: http://www.elijahish.com
You should use a Javascript console like Chrome Console or Firefox Firebug to debug your code.
First, you are placing your script block which requires jQuery before jQuery is defined:
<head>
<script type="text/javascript">
$(function(){
$('#box-container').hide();
});
$(window).load(function() {
$("#box-container").show();
});
</script>
...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
...
So you would see the following (in Chrome Console):
ReferenceError: $ is not defined
$(function(){
Second, you seem to be trying to run a script which is accessing (in the first block) an element (#box-container) before it has been seen in the DOM itself. You could use jQuery.ready on that first block, but that could be messy. I would instead suggest you place this right after <div id="box-container"> is defined:
<body ...>
<div id="box-container" ...>
...
</div>
<script type="text/javascript">
(function($){
$('#box-container').hide();
$(window).load(function() {
$("#box-container").show();
});
})(jQuery);
</script>
Demo: http://jsfiddle.net/5JpVB/4 (I use a setTimeout for dramatic effect.)
Or put it directly after the <div ...> is opened:
<div id="box-container">
<script type="text/javascript">
(function($){
$('#box-container').hide();
$(window).load(function() {
setTimeout(function(){
$("#box-container").show();
}, 2000);
});
})(jQuery);
</script>
Box Container shown on window.onload.
</div>
http://jsfiddle.net/5JpVB/5/
And the coup de grâce (document.write nothwithstanding):
<head>
...
<script>
document.write('<style>#box-container{display: none;}</style>');
</script>
...
</head>
http://jsfiddle.net/5JpVB/2/
Yes, that is a script that "puts" the style display: none into the header, which "neatly" bypasses some of the conjecture that's been thrown around (there's downsides for each method, more or less). There's an elegance to this method (except, of course, using document.write, which is icky).
And yet another way, using the CSS display: none method:
<head>
...
<style>
#box-container {
display: none;
}
</style>
...
<div id="box-container">
<noscript><style>#box-container{display: block;}</style></noscript>
Box Container shown on window.onload.
</div>
http://jsfiddle.net/5JpVB/3/ (Just the Result page, disable Javascript to see it work.)
You are getting a case of FOUC : http://www.bluerobot.com/web/css/fouc.asp/
And, years later we are still plauged! http://paulirish.com/2009/avoiding-the-fouc-v3/
A variety of solutions are included on this link.
You could also set the style of your content to be hidden before running the javascript that shows the content. Jared shows you a nice way to do this.
Might I make a suggestion that you use combination of CSS and JavaScript, rather than one or the other. 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 contact unavailable to those without JavaScript.
So here is what I did:
CSS:
.flash #wrapper {
display: none;
}
What this does is set the <div id="wrapper"> to hidden only if it is a decendent of the class flash. So to keep it from being hidden from those with out javascript I add the class flash to the <html> element. So it can only be physically hidden if the end user has JavaScript enabled, otherwise they'll at least have access via the unstylized content.
JavaScript:
$('html').addClass('flash');
$(doctument).ready(function() {
/* Do all your stuff */
/* When done show the wrapper with the content stylized */
$(#wrapper).show();
});
Depending on your pages time to load you might get a little flash, but it wont be a flash of unstylized 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 hight, but it would flash the different heights first. This fixed it while still giving accessability to none Script enabled browsers.
It is possible not to show html page in user browser until some JavaScript(built-in or in separate file) will be loaded and executed(for page DOM manipulation)?
The easiest thing to do is to set the css variable
display: none;
to the whole page.
then when everything is loaded you can set the display to
display: block; // or something else that suits.
If you make sure that piece of CSS is loaded at the very start of your document it will be active before any html is shown.
if you use a javascript library like jQuery you'll have access to the $(document).ready() function, and can implement a switch over like this:
<html>
<head>
<title>test</title>
<style type="text/css">
body > div {
display: none;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('body > div').css('display', 'block');
});
</head>
<body>
<div>
This will initially be hidden.
</div>
</body>
</html>
Not in the classical way you'd distribute a page. Browsers will (usually) start to display chunks of the base HTML file as it arrives.
Of course, you could simulate this by generating all the HTML on the fly from some included Javascript file. But that doesn't sound like a good plan as it will degrade horribly for people without JS enabled, or if you have a minor bug in your script. A better option might be to style the body tag to display: none and restyle it from the script to make certain parts visible again.
What is it you're actually trying to achieve? It sounds like there's likely to be a better way to do this...
Place the content of HTML page in a DIV, make its diplay none and on load of body diplay it.
<script type="text/javascript">
function showContent() {
var divBody=document.getElementById('divBody');
divBody.style.display= 'block';
}
</script>
<body onload="showContent()">
<div id="divBody" style="display: none;">
<--HTML of the page-->
</div>
</body>
Examples of what you might want to do:
Facebook's "BigPipe": http://www.facebook.com/notes/facebook-engineering/bigpipe-pipelining-web-pages-for-high-performance/389414033919
This method allows you to load JS first then ASYNC+inject all DOM content.
GMail
Zimbra (open-source web app similar to MS Outlook/Exchange)
My understanding is that you want to run some javascript code before you load the page. In the js file you write your init function and add the eventlistener to the window on "load" event. This will ensure that the init code gets executed first and then you can start displaying the HTML content.
var Yourdomain = {};
YourDomain.initPage = function(){
/* Your init code goes here*/
}
window.addEventListener("load", YourDomain.initPage, false);
All You really need to do is give your element an ID or CLASS and use the dislay: none; property. When your ready to show it just delete it.
CSS:
#div_1 {
display: none;
}
HTML:
<div id="div_1">
<p>This will be the hidden DIV element until you choose to display it.</p>
<p id="js_1"></p>
<script>
var x = "Some Test ";
var y = "Javascript";
document.getElementById("js_1").innerHTML = x + y;
</script>
</div>
Is there a tag in HTML that will only display its content if JavaScript is enabled? I know <noscript> works the opposite way around, displaying its HTML content when JavaScript is turned off. But I would like to only display a form on a site if JavaScript is available, telling them why they can't use the form if they don't have it.
The only way I know how to do this is with the document.write(); method in a script tag, and it seems a bit messy for large amounts of HTML.
Easiest way I can think of:
<html>
<head>
<noscript><style> .jsonly { display: none } </style></noscript>
</head>
<body>
<p class="jsonly">You are a JavaScript User!</p>
</body>
</html>
No document.write, no scripts, pure CSS.
You could have an invisible div that gets shown via JavaScript when the page loads.
I don't really agree with all the answers here about embedding the HTML beforehand and hiding it with CSS until it is again shown with JS. Even w/o JavaScript enabled, that node still exists in the DOM. True, most browsers (even accessibility browsers) will ignore it, but it still exists and there may be odd times when that comes back to bite you.
My preferred method would be to use jQuery to generate the content. If it will be a lot of content, then you can save it as an HTML fragment (just the HTML you will want to show and none of the html, body, head, etc. tags) then use jQuery's ajax functions to load it into the full page.
test.html
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$.get('_test.html', function(html) {
$('p:first').after(html);
});
});
</script>
</head>
<body>
<p>This is content at the top of the page.</p>
<p>This is content at the bottom of the page.</p>
</body>
</html>
_test.html
<p>This is from an HTML fragment document</p>
result
<p>This is content at the top of the page.</p>
<p>This is from an HTML fragment document</p>
<p>This is content at the bottom of the page.</p>
First of all, always separate content, markup and behaviour!
Now, if you're using the jQuery library (you really should, it makes JavaScript a lot easier), the following code should do:
$(document).ready(function() {
$("body").addClass("js");
});
This will give you an additional class on the body when JS is enabled.
Now, in CSS, you can hide the area when the JS class is not available, and show the area when JS is available.
Alternatively, you can add no-js as the the default class to your body tag, and use this code:
$(document).ready(function() {
$("body").removeClass("no-js");
$("body").addClass("js");
});
Remember that it is still displayed if CSS is disabled.
I have a simple and flexible solution, somewhat similar to Will's (but with the added benefit of being valid html):
Give the body element a class of "jsOff". Remove (or replace) this with JavaScript. Have CSS to hide any elements with a class of "jsOnly" with a parent element with a class of "jsOff".
This means that if JavaScript is enabled, the "jsOff" class will be removed from the body. This will mean that elements with a class of "jsOnly" will not have a parent with a class of "jsOff" and so will not match the CSS selector that hides them, thus they will be shown.
If JavaScript is disabled, the "jsOff" class will not be removed from the body. Elements with "jsOnly" will have a parent with "jsOff" and so will match the CSS selector that hides them, thus they will be hidden.
Here's the code:
<html>
<head>
<!-- put this in a separate stylesheet -->
<style type="text/css">
.jsOff .jsOnly{
display:none;
}
</style>
</head>
<body class="jsOff">
<script type="text/javascript">
document.body.className = document.body.className.replace('jsOff','jsOn');
</script>
<noscript><p>Please enable JavaScript and then refresh the page.</p></noscript>
<p class="jsOnly">I am only shown if JS is enabled</p>
</body>
</html>
It's valid html. It is simple. It's flexible.
Just add the "jsOnly" class to any element that you want to only display when JS is enabled.
Please note that the JavaScript that removes the "jsOff" class should be executed as early as possible inside the body tag. It cannot be executed earlier, as the body tag will not be there yet. It should not be executed later as it will mean that elements with the "jsOnly" class may not be visible right away (as they will match the CSS selector that hides them until the "jsOff" class is removed from the body element).
This could also provide a mechanism for js-only styling (e.g. .jsOn .someClass{}) and no-js-only styling (e.g. .jsOff .someOtherClass{}). You could use it to provide an alternative to <noscript>:
.jsOn .noJsOnly{
display:none;
}
In the decade since this question was asked, the HIDDEN attribute was added to HTML. It allows one to directly hide elements without using CSS. As with CSS-based solutions, the element must be un-hidden by script:
<form hidden id=f>
Javascript is on, form is visible.<br>
<button>Click Me</button>
</form>
<script>
document.getElementById('f').hidden=false;
</script>
<noscript>
Javascript is off, but form is hidden, even when CSS is disabled.
</noscript>
You could also use Javascript to load content from another source file and output that. That may be a bit more black box-is than you're looking for though.
Here's an example for the hidden div way:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*[data-when-js-is-on] {
display: none;
}
</style>
<script>
document.getElementsByTagName("style")[0].textContent = "";
</script>
</head>
<body>
<div data-when-js-is-on>
JS is on.
</div>
</body>
</html>
(You'd probably have to tweak it for poor IE, but you get the idea.)
My solution
.css:
.js {
display: none;
}
.js:
$(document).ready(function() {
$(".js").css('display', 'inline');
$(".no-js").css('display', 'none');
});
.html:
<span class="js">Javascript is enabled</span>
<span class="no-js">Javascript is disabled</span>
Alex's article springs to mind here, however it's only applicable if you're using ASP.NET - it could be emulated in JavaScript however but again you'd have to use document.write();
You could set the visibility of a paragraph|div to 'hidden'.
Then in the 'onload' function, you could set the visibility to 'visible'.
Something like:
<body onload="javascript:document.getElementById(rec).style.visibility=visible">
<p style="visibility: visible" id="rec">This text to be hidden unless javascript available.</p>
There isn't a tag for that. You would need to use javascript to show the text.
Some people already suggested using JS to dynamically set CSS visible. You could also dynamically generate the text with document.getElementById(id).innerHTML = "My Content" or dynamically creating the nodes, but the CSS hack is probably the most straightforward to read.