I'm loading a file into a div with load() function, but after I load the data - the styles for it doesn't want to work.
For example:
index.html:
$("a ").click(
function(e)
{
e.preventDefault();
$("#Display").load('file.html');
$("#Display").show();
});
file.html:
<h1 id="title">Item number #1</h1>
<p id="content">Lorem ipsum like text...</p>
style.css:
#title {
color: red;
}
#content {
color: green;
}
After I click "a" link, the content is loaded to #Display div, then it's perfectly displayed, but the title header is not red and content paragraph is not green.
I believe that's a default behavior because when site loads at first there are no such elements and I'm loading them dynamically with jQuery. Is there a way to lazy load them and refresh style-sheet in the background somehow? Or any other tricks to help me?
Thanks a lot!
Is the stylesheet referenced in the head element of the file being loaded? If so, it won't be loaded by load because load silently filters everything but the content of the body element. If you include the stylesheet in the document from which the script runs and into which the other document will be loaded, it should work just fine.
<head>
<link rel="stylesheet" type="text/css" href="styles.css" media="screen />
...
<script type="text/javascript" src="...jquery.js"></script>
<script type="text/javascript">
$(function() {
$("a").click( function(e) {
$("#Display").load('file.html');
$("#Display").show();
return false;
});
});
</script>
</head>
<body>
<p>Load Content</p>
<div id="Display"></div>
</body>
Related
I have created an animation in Adobe Animate, which I want to use as a preloader.
The output of this animation is a script & style (which I put in the head) and some elements (divs) which are in the body right after the body tag.
What triggers the script is the onload="init()"; attribute placed inside the body tag. The problem I have with this is that the animation starts just after the whole body (including the content - for which I created the preloader in the first place) is loaded. So I think the script in the head runs just after the body loads.
So my question is how can I trigger the script after the first div with the animation elements is loaded so the animation could run while the rest of the content is loaded? - so basically to act like a preloader.
This is the structure.
<html>
<head>
<link rel='stylesheet' href='...preloader-animation.css' type='text/css' media='all' />
<script type='text/javascript' src='...preloader-animation.js'></script>
</head>
<body onload="init()";>
<div id="animation_container">
...animation elements...
</div>
...rest of the content (images, video, etc. not markup)
</body>
</html>
I've also tried to place the trigger below the animation div like this
<script type="text/javascript">
window.onload = function() {
init();
};
</script>
or
<script type="text/javascript">
document.onload = function() {
init();
};
</script>
but it's still waiting for the whole page to load before playing.
Thanks
I can't figure out a way to prevent a flash of unstyled content when fading in text which is supposed to be styled with a font from Google Fonts.
It looks like fonts.googleapis.com loads when the page loads, but it isn't until the text is supposed to fade in that fonts.gstatic.com will load, which leads to a brief and unsightly flash of text in Times New Roman or whatever the default font is before it is abruptly styled properly.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet">
<!-- Static CSS -->
<link rel='stylesheet' type='text/css' href="main.css"/>
</head>
<body>
<div>
<button id="startButton">Start</button>
</div>
<div id="textDiv">
<p id="textContents"></p>
</div>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<!-- Static JavaScript -->
<script src="main.js"></script>
</body>
CSS
#textDiv {
font-size: 40px;
font-family: 'Quicksand';
}
Javascript
var textDiv = $('#textDiv');
var text = $('#textContents');
var button = $('#startButton');
// handle click and add text
button.bind("click", function() {
textDiv.hide();
text.html("<p>Hello</p>");
textDiv.fadeIn();
})
https://jsfiddle.net/eshapiro42/xmf23uqw/15/
Any help figuring out how to prevent this would be greatly appreciated!
You can preload fonts when you're referencing an actual font. What you're referencing here is a stylesheet that adds #font-face to your document with different variations of Quicksand.
The solution is to go to paste the stylesheet link in your browser and grab the direct link to the font, and then load it as a reference in your html document with this:
<link rel="preload" href="ttps://fonts.gstatic.com/s/quicksand/v15/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkP8o58a-xDwxUD2GFw.woff" as="font" crossorigin>
Use the display=block request parameter when referencing the font from Google. Full URL for your example:
https://fonts.googleapis.com/css?family=Quicksand&display=block
This in turn will cause the Google stylesheet to use the font-display: block rule in its #font-face declaration. This rule will specify that you would rather that the text remain unrendered until the font is loaded, than render the text in a local font and re-render when the webfont is ready.
Source:
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization#customize_the_text_rendering_delay
https://css-tricks.com/google-fonts-and-font-display/
In the CSS, you could add display: none; and the in your JavaScript add
$(function() {
$('#textDiv').css('display', 'block');
});
HTML
<head>
<style type="text/css>
#import url("style.css") //my main css file
</style>
// css file which contains only color properties.
<link href="theme_blue.css" rel="stylesheet">
</head>
<body>
Click Here to switch color
</body>
CSS (theme_blue.css)
body
{
background-color:#66ccff;
}
JS
$(document).ready(function() {
$("#theme-blue").click(function() {
$("link").attr("href", "theme_blue.css");
return false;
});
});
My problem is, when I click the link, the entire structure of the web page is lost and no color changes happen. I am very new to this technology and need some help from experts. Kindly suggest me solutions to overcome this problem.
Your problem is with your jQuery selector. You are applying the attribute href to all link elements including your main css link. I suggest you give your link and id then update your selector:
html
<head>
<style type="text/css>
#import url("style.css") //my main css file
</style>
// css file which contains only color properties.
<link id="css_theme_blue" href="theme_blue.css" rel="stylesheet">
</head>
<body>
Click Here to switch color
</body>
jQuery
$(document).ready(function() {
$("#theme-blue").click(function() {
$("#css_theme_blue").attr("href", "theme_blue.css");
return false;
});
});
Might I offer another solution that I practice.
I have my style sheets but I change the body class to reflect what I want a particular element to look like.
body.blue_theme #element_1 {
background:blue;
}
body.green_theme #element_2 {
background: green;
}
then I swap out the body class when I want themes to change:
$('#blue-theme-button').on('click', function() {
$(body).removeClass('green_theme').addClass('blue_theme');
}
This method is preferable to me because all styles are loaded at the beginning and there won't be a pause on slower machine when a new stylesheet is loaded.
Lets say you have a two css files in /Content folder.
main-theme.css :
body {
background-color:#fff;
}
blue-theme.css :
body {
background-color: blue;
}
you have a page which uses by default main-theme.css and link element has id #siteTheme, also you have clickable element with id #blueTheme
<link id="siteTheme" href="/Content/main-theme.css" rel="stylesheet" type="text/css" />
Activate Blue Theme
all you need is to write function for #blueTheme click, which changes href attribute value of link element with id #siteTheme:
<script>
$(document).ready(function () {
$("#blueTheme").click(function () {
$("#siteTheme").attr("href","/Content/blue-theme.css");
});
})
</script>
i hope this will help ;) and don't forget to load jquery before writing those scripts.
<script src="/Scripts/jquery-1.10.2.min.js"></script>
For example I have the following HTML named index.html:
<html>
<head>
<style>
#content { float:left; }
#sub { float:right; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="action.js"></script>
</head>
<body>
<h2>Test de</h2>
<div id="content">
Content
<button class="loadSub">Load</button>
</div>
<div id="sub">
Sub content
</div>
</body>
</html>
And a simple JS file named action.js:
$(document).ready(function(){
$('button.loadSub').click(function(){
$('#sub').load('test.html');
});
$('button.hide').click(function(){
$('#sub').fadeOut('slow');
});
});
As you can see, when I click the button .loadSub the div #sub will be loaded with the new content from test.html:
<h2>This is the sub content</h2>
<button class="hide">Hide</button>
I got two problems here:
Firstly, the .loadSub button did successfully load the the div of id subcontent, but the .hide button did not work.
Secondly, after I had tried inserting
script type="text/javascript" src="action.js"
inside test.html, the hide button worked and faded out its content. But then in turn, I found out that the button loadSub no longer functioned. I couldn't load the subcontent again.
Is there any other way around to just once declare source of js file and make my button.loadSub work whenever I click it? Could anybody please explain the problem and give me a hint to fix it.
You're loading dynamic HTML into your page. This means that at the time you called $('button.hide').click(), the button.hide element did not exist in your page yet, so the click handler could not be attached.
You might want to try doing a delegate attachment instead.
$('#sub').on('click', 'button.hide', function () {
$('#sub').fadeOut('slow');
});
On the first page, put this. You can insert my JQQuery code into your action.js file. On the second page, the one you are loading into your div, put the second Jquery code I added.
On First page:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<style>
#content{float:left;}
#sub{float:right;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(function(){
$('.loadSub').click(function(){
$('#sub').show();
$('#sub').load('test.html');
});
});
});
</script>
</head>
<body>
<h2>Test de</h2>
<div id="content">
Content
<button class="loadSub">Load</button>
</div>
<div id="sub">Sub content</div>
</body>
</html>
On the second page (the page that's loaded into the div, add this:
<script type="text/javascript">
$(document).ready(function(){
$(function(){
$('.hide').unbind("click").click(function(){
$('#sub').fadeOut('slow');
});
});
});
</script>
<h2>This is the sub content</h2>
<button class="hide">Hide</button>
The hide button isn't on the page when you try to bind the event so it is never registered.
Change it to use on like this (assuming version 1.7+)
$(document).on('click', 'button.hide', function(){
$('#sub').fadeOut('slow');
});
or delegate if an older version:
$(document).delegate('button.hide', 'click', function(){
$('#sub').fadeOut('slow');
});
This attaches the event handler at the document level so will work for any new content added to the page.
A web page is runing at client side and there is div in the page which dynamically changes it's innerHTML via ajax fn() but i get issue with jQuery fn() which is not running.
suppose this is the running web page
<html> <head>
<script type="text/javascript" src="jquery-1.6.2.min.js"> </script>
<script type="text/javascript" src="jquery-ui.min.1.8.11.js"> </script>
</head> <body>
<div id = "dynamic"> </div>
<input type = "button" id="click" />
<script type="text/javascript">
$("#click").click(function(){
// send request to server via ajax (xmlHttprequest )
// get html contents as responseText
$("#dynamic").html(responseText);
});
</script>
</body> </html>
As you can see above in the given example, if client clicks on button, a request sent to server and gets innerHTML as responseText which is put into dynamic div.
*responseText as innerHTML working : * css properties are loaded and working
<div id="myDiv"> </div>
<style type="text/css">
#myDiv { width: 100%; height:100%; background: blue; }
</style>
innerHTML isn't working : css properties isn't working if i use jQuery to load the css file
<div id="myDiv"> </div>
<script type="text/javascript">
$(document).ready(function(){
$("head").append($("<link rel='stylesheet' href='test.css' type='text/css' />"));
});
</script>
and the test.css is at server (the css properties is defined in external files to)
#myDiv { width: 100%; height:100%; background: blue; }
if the function lives in the global space
window["functionName"]();
If you've namespaced, then
myNameSpace["functionName"]();
If you are looking to dynamically add a style-sheet to the DOM then try this:
$.get('test.css', function(responseCSS)
{
$('<style type="text/css"></style>').html(responseCSS).appendTo("head");
});