I am just a beginner so be easy on me
while (true){
//hide the paragraph
$("para").hide()
//show the paragraph slowly
$("para").show("slow")
}
p{
font-size:1500%;
text-align: center;
margin:0;
}
body{
background:yellow;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<p id="para">this is disco</p>
</body>
<script src = "jquery.js"></script>
<script src = "main.js"></script>
</html>
The jquery.js is the file name of the compressed jquery in my computer when i run it the page doesnt show up
while (true) { … }
will keep running forever (infinite loop) and block the UI, since JS is single threaded. It will also hide the paragraph over and over again. If you want to hide a paragraph you should use:
$(document).ready(function(){
//hide the paragraph
$("p#para").hide()
//show the paragraph slowly
$("p#para").show("slow");
})
to do all that stuff after the page has loaded.
If you would like to make the paragraph blink, so that it gets hidden after it showed up »slow«, you can do that using a timer, after the page has loaded:
(function blink () {
$("p#para").hide()
//show the paragraph slowly
$("p#para").show("slow");
setTimeout(blink, 1000);
})();
or a CSS animation.
If you want to make the text blink, you don't need to use JS at all. Have a look here: Imitating a blink tag with CSS3 animations
The »sliding« effect is caused by jQuery's show() method, documented here.
It must be $("#para"). $("para") searches for an element <para> which does not exist.
The element id is "para",so for you to manipulate it the selector should be preceeded by "#" i.e "#para"
$(document).ready(function(){
//hide the paragraph
$("#para").hide()
//show the paragraph slowly
$("#para").show("slow")
})
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 am very new to JavaScript, jQuery and HTML etc. And I am supposed to implement this block of code (below) in a project and I am not quite sure what it is meant to do:
$(document).ready(function(){
$("body").click(function(){
$(this).hide();
});
});
I'm assuming it simply hides any element that is clicked.
You are correct, it hides everything inside of the HTML element. It is also important to note that it is written using jQuery, which is a JavaScript library that has helper functions to make JavaScript more accessible to use.
Here is one line at a time:
Wait for the page to finishing loading in the browser (aka the DOM, or document object model):
$(document).ready(function(){
});
When the user fires the click event on the body element, run the following function:
$("body").click(function(){
});
Hide the body:
$(this).hide();
this (in this context) refers to the body element targeted in the previous line, this is the same as writing: `$('body').hide();
this refers to something different based on the context in which it is used. In this example it is used in an event, so it refers to the element that received that event (body). See W3Schools.
.hide() is a built in jQuery function that sets the element to display: none;
$(document).ready is called when the page is ready for javascript to be executed. $("body") selects the body, the body of the document is where all of the visible HTML elements are shown. The click event is triggered when well, the element is clicked. $(this) selects the current element being operated on, which is the body. the hide function hides the selected element, which in this case is the body. So this code hides the body of the HTML page resulting in all visual elements being hidden.
It's simple, it puts an "on click" event on the body element.
So that means, when you click the body element. It will hide everything in between the opening <body> and the closing </body> tags
<body>
<!--everything in here will be hidden once body element is clicked-->
</body>
That code will make it so that clicking on any element on the page will cause the body element to hide.
That is - unless the element has it's own onclick functionality assigned that stops the event from bubbling up to the body element's onclick by using the event.stopPropagation() function.
Note: You could also have a call to event.stopPropagation() within the event handler rather than just having it as the event handler.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("body").click(function() {
$(this).hide();
});
});
</script>
<html>
<head>
<title>Testing javascript function</title>
</head>
<body>
<p>Here is one paragraph</p>
<p>Here is a second paragraph</p>
<p>Clicking on any element will hide the entire body element.</p>
<input type="button" value="random button" onclick="event.stopPropagation()" />
</body>
</html>
It is pretty straight forward.
Sample HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
...
</body>
</html>
Js:
$(document).ready(function(){ //executes when document model is ready
$("body").click(function(){ //once u click anywhere on the page this function will be executed
$(this).hide(); //hides everything between <body></body>
});
});
I'm trying to make a fadeToggle effect on jQuery,
the toggle effect works fine only in the second click on the <h1> tag.
in the first click it showing up and hide right after.
noticed that if I remove the text("how are you") method and put the inside the paragraph tag, it works perfectrly.
wondering why it doesn't work the first way.
This is my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('h1').click(function(){
$('p').text("how are you").fadeToggle(500);
});
});
</script>
</head>
<body>
<h1>Hello jquery</h1>
<p></p>
</body>
</html>
fadeToggle works the same way as e.g. toggle (applies opposed attribute). And since the default state for the p element at the begininng is display: inline (is visible), then the next default action will be hiding it. That's why you have to define it initially as hidden.
$(document).ready(function() {
$('h1').click(function() {
$('.x').text("how are you").fadeToggle(500);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Hello jquery</h1>
<p class='x' hidden></p>
It works correctly actually - the paragraph element is shown and by clicking on the heading, the function inserts text in it and then toggles fade. As the element is shown, by default (since there are no rules attached to it that would otherwise hide it), the fadeToggle will transition from shown to hidden state.
As stated in the comment above, to make fadeToggle begin by fading an element in, you should first hide the element (either via CSS or via JS, depending on your needs).
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>
So on the page I have a div that's part of the layout.
The div contains JS stuff, so although it's part of the layout, there's no point in showing it if there's no Javascript.
Now I would normally put this in <head>:
<style> div#target{ display:none } <style>
<script> $(document).ready(function(){ $('div#target').show(); }); </script>
But my boss wants that div during page load.
So I have to resort to something ugly in <body>:
<style> div#target{ display:none } <style>
<div id="target">stuff in div</div>
<script> $('div#target').show(); </script>
Which is invalid xHTML, has some IE drawbacks I heard, and most of all it just sucks.
What else can I do?
Leave the <style> element in the head.
There is nothing invalid about having a <script> as a sibling element to a <div>
You could be more efficient with:
div#target{ display: none }
body.js div#target{ display: block }
and
<body>
<script> document.body.className += " js"; </script>
That said, if an element is only relevant if JS is available, then it usually makes sense to add it using JavaScript instead of trying to hide it if JS isn't available.