I'm learning how to code and I wanted to link a loading page to my HTML but it doesn't seem to be working. I got my code from here but it seems like it's not working at all. If you guys could identify the problem, that'd be great.
This is the code as of now:
<html>
<head>
<meta charset="UTF-8">
<title>Loading</title>
<link href="demo.css" rel="stylesheet" type="text/css">
<link href="normalize.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>
I did not find your code.
So Here is a sample approach.
While the page is loading, image will be displayed at the middle of the page and the entire page is in transparent background. So Whenever your page gets loaded, then add hidden class to that image div.
Create 2 Classes one is to make div hidden.
.hidden{
display:none;
}
Second one to show image.
.show_image{
position:fixed;top:0;right:0;bottom:0;left:0;
background: rgba(0,0,0,0.5) url(/img/spinner.gif) no-repeat 50% 50%;
z-index:100;
background-size: 5ex;
}
And your HTML code would be
<div class="show_image"></div>
<div class="hidden box"> Your actual content </div>
Initially your content will be hidden state and loading image will be displayed.
After completion of page loading just toggle the hidden class.
$('.box').removeClass("hidden");
$('.show_image').addClass("hidden");
You can use load function to know that page is fully rendered.
$(window).load(function() {
//everything is loaded
});
So that your content will become visible and loading image will be hidden.
Let me know if you need to any help regarding Page Load.
you can try this one:
function onReady(callback) {
var intervalID = window.setInterval(checkReady, 1000);
function checkReady() {
if (document.getElementsByTagName('body')[0] !== undefined) {
window.clearInterval(intervalID);
callback.call(this);
}
}
}
function show(id, value) {
document.getElementById(id).style.display = value ? 'block' : 'none';
}
onReady(function () {
show('page', true);
show('loading', false);
});
DEMO HERE
Related
My problem is larger than this example but I've composed an example test which exhibits the same behaviour.
The problem, how to attach/reattach the resizable event after dynamically adding an element to the page. I realise that this can be done with click events using something like $('.table1').on('click', 'tr', function() {alert("clicked!");}); which will show the alert when a new tr is added to the table and it is clicked, this uses event delegation. However the examples for using jQuery Resizable do not appear to cater for this, so how can it be done?
Heres my test case (for simplicity this is in a single test file):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Event Delegation Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<style>
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
</style>
<script src="//code.jquery.com/jquery-3.6.0.js"></script>
<script src="//code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<script>
jQuery(document).ready( function($) {
$( function() {
$( ".resizable" ).resizable();// <--- How to add a delegated event on this?
} );
$( "button" ).click( function () {
$( "#size-region" ).append('<div id="2" style="width:150px; height: 100px;" class="ui-widget-content resizable"><h3 class="ui-widget-header">Not Resizable</h3></div>');
} );
} );
</script>
</head>
<body>
<div id="size-region" class="height: 90%; width: 100%;">
<div id="1" style="width:150px; height: 100px;" class="ui-widget-content resizable">
<h3 class="ui-widget-header">Resizable</h3>
</div>
</div>
<button>Click me</button>
</body>
</html>
Docs for jQuery Resizable are at https://jqueryui.com/resizable/
Info on event delegation is found at https://learn.jquery.com/events/event-delegation/
I mention the problem being larger, I believe i could just add the element with javascript for it but what if i have 10 other events to add? I'm specifically looking for a method where I can add a single js file and use this whatever is added to the size-region (if this is in fact possible)
Consider the following.
jQuery(function($) {
function makeResize(target) {
return $(target).resizable();
}
makeResize(".resizable");
$("button").click(function() {
var c = ($(".resizable").length + 1)
var newBox = $("<div>", {
id: "resize-" + c,
class: "ui-widget-content resizable"
}).css({
width: "150px",
height: "100px"
}).appendTo("#size-region");
$("<h3>", {
class: "ui-widget-header"
}).html("Resize " + c).appendTo(newBox);
makeResize(newBox);
});
});
#resizable {
width: 150px;
height: 150px;
padding: 0.5em;
}
#resizable h3 {
text-align: center;
margin: 0;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-3.6.0.js"></script>
<script src="//code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<div id="size-region" class="height: 90%; width: 100%;">
<div id="resize-1" style="width:150px; height: 100px;" class="ui-widget-content resizable">
<h3 class="ui-widget-header">Resize 1</h3>
</div>
</div>
<button>Click me</button>
The initialization of a jQuery UI Widget cannot be delegated in the same way an Event can be. If you want to make a large number of elements be initialized with the same parameters, you can do this with a Function.
Looking at the makeResize() function, I pass in a variable, target that I then wrap so it is a jQuery Object and then initialize Resizable. This technique is very versatile as I can pass in a String, a element, or an object and it will work.
Examples:
$("button").click(function(){
makeResize(this);
});
Makes the button that was clicked upon resizable.
$(document).on("click", "button", function(){
makeResize(this);
});
Delegate the click event to any button that might be created and make it resizable.
I used more pure jQuery and this was my choice and it does not mean that your code, appending an HTML string, is wrong in any way. Two different approaches. I prefer my method as it is easier to read down the line, easier to manipulate or make small changes/fixes, and is easier to make more dynamic.
Your original code could work in a similar way:
$("button").click(function() {
$("#size-region").append('<div id="2" style="width:150px; height: 100px;" class="ui-widget-content resizable"><h3 class="ui-widget-header">Not Resizable</h3></div>');
makeResize("#2");
});
As the new HTML String has been added to the DOM, and is Rendered, we can call it by a selector, "#2".
The pitfall here is that if you click the button a 2nd or 3rd time, you now have multiple elements with the same ID when they need to be unique.
Last note, you do not need to wrap the jQuery in more than one Ready or Anonymous function. You do want to let all the HTML Load and be Ready before you execute your jQuery. This is what $(document).ready(function(){}); and $(function(){}); do for you.
Im trying to design this webpage with multiple pages. For example, when you scroll to the about page, its a different background color than the contact page. However, so far I only got the title of each page color. My webpage is where you scroll down it lands onto another page. I tried
#name{background-color:#ffffff;}
#Portfolio{background-color:#d5f4e6;}
#about{background-color:#fefbd8;}
#ContactMe{background-color:#ffffff;}
in the css style page based on its id. Any clue on how to get the different background color on different pages
html code:
<body id="Portfolio"></body>
<body id="about"></body>
<body id="Contact Me"></body>
When you say "multiple pages" it means "separate pages in separate files!" like "aboutpage.html" or "contact.html". In this case you can work with "body" tag:
<body id="about">
but then you said "when you scroll to the about page" that means "a page with different section that you can use like this:
<p id="about"></p>
<p id="contact"></p>
or
<div id="about"></div >
<div id="contact"></div>
You should specify that the elements containing your targets are 100vh height. With your (original posted) code you can do it like that:
body > div {min-height:100vh;}
This css will catch the container-* div that you use in the code you provide. I recomand continue learning the basics. Start here https://developer.mozilla.org/he/docs/Web/HTML
Enjoy code!
If it's a same page scroller, you should add
#Portfolio,#about,#ContactMe {min-height:100vh;}
To your css.
If you can provide the exact code its much easier to help you.
simple code
$(document).ready(function(){
startFromtop=$(".start").position().top
aboutFromtop=$(".about").position().top
contactFromtop=$(".contact").position().top
endFromtop=$(".end").position().top-100
$(window).scroll(function(){
windowformtop=$(this).scrollTop();
if(windowformtop>=startFromtop && windowformtop<aboutFromtop){
$(document.body).css("background-color","white")
}
else if(windowformtop>=aboutFromtop && windowformtop<contactFromtop){
$(document.body).css("background-color","red")
}else if(windowformtop>=contactFromtop && windowformtop<endFromtop){
$(document.body).css("background-color","green")
}else if(windowformtop>=endFromtop){
$(document.body).css("background-color","blue")
}
})
})
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title></title>
<style type="text/css">
div{height:700px;border:2px solid red;}
</style>
</head>
<body>
<div class="start">Start</div>
<div class="about">ABOUT</div>
<div class="contact">CONTACT</div>
<div class="end">END PAGE</div>
</body>
</html>
Replace <body> with the <div> tag and add the appropriate css. The pages should have the same class but unique ids. You change the background color with CSS property background-color.
HTML:
<html>
<head></head>
<body>
<div class=“page”id=“portfolio”>
</div>
<div class=“page” id=“about”>
</div>
<div class=“page” id=“contactme”>
</div>
</body>
</html>
CSS:
.page{
position:relative;
width:100%;
height: auto;
margin:auto;
}
#portfolio{
background-color:white;
}
#about{
background-color:red;
}
#contactme{
background-color:blue;
}
Hope this works for you.
I am building an Ionic app and I want to click on the image and change it with a different image. It is a toggle functionality.
I have the following class:
img{
&.default {
background-image: url("img/726-star.png");
&.activated{
background-image: url("img/726-star-selected.png");
}
}
And I apply the class as shown below:
<img class="default" style="width:38px;height:38px;margin-top:30px;"/>
But when I see in the Chrome Debugger tools I don't see the default class being applied. What am I doing wrong?
UPDATE: So, I am using DIV now instead of an image but I don't see the image displayed in the div:
#favImage {
&.default {
background-image: url("img/726-star.png");
}
&.activated {
background-image: url("img/726-star-selected.png");
}
}
<div id="favImage" class="default" style="width:38px;height:38px;margin-top:30px;"></div>
first of all i recommened you to sparate your style in the html to a css file.
second if you are using img tag don't forget to insert src attribute to the img tag other wise the img won't show.
to change the image by clicking on it i use JavaScript function that activated by write an attribute on the img tag "onclick" and call the JavaScript function.
the function take image id into a variable and with the use of a match method check if the image src contains string "726-star-not" if its not the image src changes to "726-star-selected" and vice versa.
to learn more about the match method
function myFunction() {
var image = document.getElementById('favImage');
if (image.src.match("726-star-not")) {
image.src = "img/726-star-selected.png";
} else {
image.src = "img/726-star-not.png";
}
}
#favImage{
width:38px;
height:38px;
margin-top:30px;
}
<html>
<head>
<link rel="stylesheet" href="css/style.css"/>
<script src="js/javascript.js"></script>
</head>
<body>
<img id="favImage" src="img/726-star-not.png" onclick="myFunction()">
</body>
</html>
I want an image to automatically popup when someone goes to our main page. One that they can click to close after they have seen it. Can someone please show me how to do this that doesn't require a ton of coding. Thanks you!
I would do this with jQuery (and I bet you're using jQuery for your template too :) )
Be sure you're calling the jQuery library in your page, I would recommend to place it just before the </body> tag and BELOW all the scripts.
for example
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- let's call the following div as the POPUP FRAME -->
<div id="popup">
<!-- and here comes the image -->
<img src="http://i.imgur.com/cVJrCHU.jpg" alt="popup">
<!-- Now this is the button which closes the popup-->
<button id="close">Close button</button>
<!-- and finally we close the POPUP FRAME-->
<!-- everything on it will show up within the popup so you can add more things not just an image -->
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
//your jquery script here
</script>
</body>
</html>
This will show up a piece of code, if you want to simply show an image, put the id="popup" directly on your <img> tag.
Now, let's move to the example... the code is pretty easy to understand:
//with this first line we're saying: "when the page loads (document is ready) run the following script"
$(document).ready(function () {
//select the POPUP FRAME and show it
$("#popup").hide().fadeIn(1000);
//close the POPUP if the button with id="close" is clicked
$("#close").on("click", function (e) {
e.preventDefault();
$("#popup").fadeOut(1000);
});
});
The script behaves like this: When the page is loaded, the content inside <div id="popup"> show up, and if the button with id="close" is clicked, then the pop up is hidden. Add whatever you want inside this <div id="popup"> and it will show inside the popup.
The CSS: SUPER IMPORTANT!
/*we need to style the popup with CSS so it is placed as a common popup does*/
#popup {
display:none;
position:absolute;
margin:0 auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
}
You can see it working along with the HTML on this live example:
http://jsfiddle.net/Lp9edyg5/1/
I'm following this tutorial (Removed link as YouTube videos are not allowed on SO).
I can't understand why the banner wont flick through as it should, I have 4 images I intend it to flick through.
Also if anyone does solve this how can I make the images link to another page, e.g is it as simple as adding <a href=.......> in the HTML code?
HTML:
<script type="text/javascript" src:"jquery.js"></script>
<div id="banner">
<img src="images/banner1.jpg" class="active" />
<img src="images/banner4.jpg" />
<img src="images/banner2.jpg" />
<img src="images/banner3.jpg" />
</div>
javascript/jQuery
$(document).ready(function () {
setInterval(function () {
//Get current active image
var active = $('#banner .active');
// If there is another image(object) left then make that image next
// If not, go back to the first image of the banner div
if (active.next().length > 0) var next = active.next();
else var next = $('#banner img:first');
//Get the next image ready by modifying the z-index
next.css('z-index', '2');
//Fade out the active image, then
active.fadeOut(1000, function () {
});
//Move the active image to the back of the pile, show it and remove the active class
active.css('z-index', '1').show().removeClass('active');
//Make the next image the active one
next.css('z-index', '3').addClass('active');
});
}, 3000);
});
CSS
#banner {
position: relative;
margin-left: auto;
margin-right: auto;
height: 350px;
width: 950px;
margin-top: 10px;
}
#banner img {
position:absolute;
z-index:1;
}
#banner img.active {
z-index:3;
}
Right so to start with you don't have your script linked up.
You have:
<script type="text/javascript" src:"jquery.js"></script>
It should be:
<script type="text/javascript" src="jquery.js"></script>
As you have just put jquery.js that means if you homepage (whatever page is using it) is in C:\Users\Me\Documents\Website then jquery.js also needs to be in that same folder.
Then we move to the jQuery, its all ok untill the end of it. You close it with }, 3000);
but then try to close it again using });. The indentation also gives it away.
So when we fix that we get this DEMO HERE