Fade in web elements on page load using jQuery

Fade in web elements on page load using jQuery - javascript

Trying to get a main logo and then an enter button to fade in when this web page loads. Tried the below code in addition to taking the divs out after the code, but no luck.
Any ideas? Thank you in advance.
<!doctype html>
<html>
<head>
<title>The Webspace of Reality</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function() {
$("#mainImage").hide().fadeIn("slow", function() {
$("#enterButton").hide().fadeIn("slow")
});
});
</script>
<div id="mainImage">
</div>
<div id="enterButton"></div>
</body>
</html>
#mainImage img {
width: 550px;
display: block;
position: static;
margin-right: auto;
margin-left: auto;
}
#enterButton button {
background-color: black;
font-family: Futura, Helvetica, sans-serif;
font-size: 28px;
border-radius: 10px;
height: 50px;
width: 200px;
color: white;
margin-right: auto;
margin-left: auto;
display: block;
position: static;
margin-top: 20px;
border-style: none;
}

Your problem is in css. The commas are added after name selectors:
#mainImage, img {
width: 550px;
display: block;
position: static;
margin-right: auto;
margin-left: auto;
}
#enterButton, button {
background-color: black;
font-family: Futura, Helvetica, sans-serif;
font-size: 28px;
border-radius: 10px;
height: 50px;
width: 200px;
color: white;
margin-right: auto;
margin-left: auto;
display: block;
position: static;
margin-top: 20px;
border-style: none;
}
Hope this help.

Try this in your script tags:
$("#mainImage, #enterButton").hide();
$("#mainImage").fadeIn("slow", function() {
$("#enterButton").fadeIn("slow");
});
Here's the jsfiddle.

Related

Create a menu from a modal

Main page
This is my primary page on my website, I wanna my website no be easy and don´t have so many pages, so when I press "us" I want that open a modal with options to navigate to other pages, like this photo above:
Desired result
My code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/src/styles/pages/menu2.css">
<title>menu</title>
</head>
<body>
<div class="container">
<div class="left"><a class="clickable" href="http://perspetiva-m.pt/projects">projects</a></div>
<div class="right">us</div>
</div>
</body>
</html>
Css:
html, body, .container {
height: 100%;
}
body {
margin: 0;
}
.container {
display: flex;
}
.left,
.right {
font-family: 'Times New Roman', Times, serif;
font-size: 50px;
width: 50%;
height: 100%;
}
.left {
background-image: url("https://images.unsplash.com/photo-1631031651060-424d82e511de?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80");
background-size: cover;
}
.left, .right {
display: flex;
align-items: center;
justify-content: center;
}
.left {
color: white;
}
.clickable {
cursor: pointer;
text-decoration: none;
color: white;
}
Can someone help me?
Thank you,

you can use this code I added
html, body, .container {
height: 100%;
}
body {
margin: 0;
}
.container {
display: flex;
}
.left,
.right {
font-family: 'Times New Roman', Times, serif;
font-size: 50px;
width: 50%;
height: 100%;
}
.right a{
text-decoration: none;
color: black;
}
.left {
background-image: url("https://images.unsplash.com/photo-1631031651060-424d82e511de?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80");
background-size: cover;
}
.left, .right {
display: flex;
align-items: center;
justify-content: center;
}
.left {
color: white;
}
.clickable {
cursor: pointer;
text-decoration: none;
color: white;
}
#model{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: #fff;
opacity: 0.8;
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
}
.option{
margin-top: 10px;
margin-bottom: 10px;
font-weight: bold;
cursor: pointer;
}
.option a {
text-decoration: none;
color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/src/styles/pages/menu2.css">
<title>menu</title>
</head>
<body>
<div class="container">
<div class="left"><a class="clickable" href="http://perspetiva-m.pt/projects">projects</a></div>
<div class="right" id='us'>us</div>
</div>
<div id="model">
<div class="option">About</div>
<div class="option">News</div>
<div class="option">Contact</div>
</div>
</body>
<script>
const $us = document.getElementById('us');
const $model = document.getElementById('model');
$us.onclick = function(){
$model.style.display = 'flex';
}
$model.onclick = function(){
this.style.display = 'none';
}
</script>
</html>

H1 tag overflow the image?

When window is in full screen it shows like this:
When I tried to make it mobile friendly or window shrink the h1 tag is overflow the image:
I also tried with overflow property but it didn't work. Also I want that my h1 and img must that particular position which one I did but also want it must be mobile friendly. If there any CSS or JavaScript I need to use, please suggest it.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test video</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Butcherman&subset=latin-ext" rel="stylesheet">
<style type="text/css">
html,body{
margin: 0;
padding: 0;
font-size: 100%;
}
#stripe img{
position: absolute;
top: 0;
left: 40%;
margin-left: 5px;
margin-top: 0;
margin-bottom: 0;
margin-right: 5px;
overflow: inherit;
}
h1{
position: fixed;
left: 45%;
top: 20px;
color: white;
font-size: 2em;
font-family: 'Butcherman', cursive;
font-weight: normal;
text-align: center;
margin-left: 5px;
margin-top: 0;
margin-bottom: 0;
margin-right: 0;
text-transform: uppercase;
overflow: inherit;
}
#stripe{
position : relative;
background: #404040;
height: 70px;
text-align: center;
overflow: hidden;
right: 0;
}
</style>
</head>
<body>
<div id="stripe">
<img src="logo/mask.png">
<h1>My Website</h1>
</div>
</body>
</html>

Try this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test video</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Butcherman&subset=latin-ext" rel="stylesheet">
<style type="text/css">
html,body{
margin: 0;
padding: 0;
font-size: 100%;
}
#stripe img{
display: inline-block;
}
h1{
color: white;
font-size: 2em;
font-family: 'Butcherman', cursive;
font-weight: normal;
text-align: center;
margin-left: 5px;
margin-top: 0;
margin-bottom: 0;
text-transform: uppercase;
display: inline-block;
}
#stripe{
background: #404040;
height: 70px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div id="stripe">
<img src="http://via.placeholder.com/50x50">
<h1>My Website</h1>
</div>
</body>
</html>

I think You should add the following CSS to your div and img styles.
#stripe{
position: relative;
}
#stripe img{
position: absolute;
}
and you not need to give h1 tag position: fixed style. remove it.

I suggest you to consider using flexboxes:
#stripe {
display: flex;
justify-content: center;
align-items: center;
background: #404040;
color: white;
height: 70px;
overflow: hidden;
}
img {
width: 50px;
height: 50px;
margin-right: 10px;
}
<div id="stripe">
<img src="https://cdn.pixabay.com/photo/2012/04/15/21/38/skull-35404_960_720.png" />
<h1>Someone's Website</h1>
</div>

Finally, I've solved my problem with this CSS:
html,body{
margin: 0;
padding: 0;
font-size: 100%;
}
#stripe img{
margin-left: 0;
margin-top: 0;
margin-bottom: 15px;
margin-right: 0;
}
h1{
color: white;
font-size: 2em;
font-family: 'Butcherman', cursive;
font-weight: normal;
text-align: center;
text-transform: uppercase;
}
img + h1{
display: inline-block;
}
#stripe{
position: relative;
background: #404040;
height: 70px;
text-align: center;
right: 0;
}

Create Responsive website with Side Navigation

I Making a admin panel with HTML , CSS , JQuery .
Now I Have Problem in Side Navigation .
I Need When Admin Panel Opened , Change Header And Main-Container Width .
Width : 1279 px When Opened Width:1119 px
My Code :
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Admin_Panel_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/bootstrap.css" rel="stylesheet" />
<link href="../css/bootstrap-theme.css" rel="stylesheet" />
<script src="../js/bootstrap.js"></script>
<link href="Style%20Sheet/StyleSheet.css" rel="stylesheet" />
<script src="../Scripts/jquery-3.0.0.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<header class="top-header">
<section class="navigation-icon">
<span class="top-bar"></span>
<span class="middle-bar"></span>
<span class="bottom-bar"></span>
</section>
</header>
<nav class="navigation">
<span class="title-logo">Kia<span class="kala">Kala</span ></span>
<section class="logo">
<img src="../Image/1467494806_Picasa.png" />
</section>
<ul class="navigation-ul">
<li>Space</li>
<li>Galaxy</li>
<li>Alien</li>
<li>Planet</li>
<li>Life</li>
</ul>
<section class="navigation-social">
<ul class="navigation-social-ul">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</section>
</nav>
<div class="right-col" role="main">
</div>
</div>
</form>
<script src="../Script/JQuery.js"></script>
<script src="../Scripts/jquery-3.0.0.min.js"></script>
</body>
</html>
CSS Code :
body {
padding: 0;
margin: 0;
background-color: #ffffff;
}
*, *:after, *:before {
box-sizing: inherit;
padding: 0;
margin: 0;
}
.top-header {
width: 1279px;
height: 57px;
background-color: #EDEDED;
float: right;
position: relative;
}
.right-col {
float: right;
background-color: #F7F7F7;
width: 1119px;
height: 1721px;
}
.navigation {
width: 70px;
height: 1721px;
background-color: #2A3F54;
float: left;
display: block;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
.logo {
width: 65px;
height: 65px;
background-color: white;
display: block;
border-radius: 50%;
margin-top: 5px;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
.logo img {
width: 65px;
height: 65px;
display: block;
float: left;
}
.title-logo {
float: right;
margin-top: 20px;
margin-right: 30px;
font-family: 'Tahoma Bold';
font-size: 35px;
color: black;
transition: all 800ms cubic-bezier(.9,0,.33,1);
visibility: hidden;
}
.title-logo .kala {
color: red;
}
.navigation-icon {
width: 70px;
margin-left: 10px;
height: 57px;
display: block;
cursor: pointer;
}
.navigation-icon .top-bar {
width: 70px;
height: 4px;
display: block;
background-color: #000000;
position: absolute;
top: 10%;
}
.navigation-icon .middle-bar {
width: 70px;
height: 4px;
display: block;
background-color: #000000;
position: absolute;
top: 30%;
}
.navigation-icon .bottom-bar {
width: 70px;
height: 4px;
display: block;
background-color: #000000;
position: absolute;
top: 50%;
}
.bottom-bar, .middle-bar, .top-bar {
margin-top: 8px;
}
.navigation-ul {
float: right;
margin-top: 200px;
visibility: hidden;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
.navigation-ul li {
list-style: none;
text-align: right;
}
.navigation-ul a {
text-decoration: none;
display: block;
font-weight: 800;
text-transform: uppercase;
color: white;
margin-bottom: 15px;
}
.navigation .navigation-social {
width: 100%;
height: 30px;
float: left;
margin-top: 30px;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
.navigation .navigation-social-ul {
float: right;
list-style: none;
visibility: hidden;
}
.navigation .navigation-social-ul li {
display: inline-block;
}
.navigation .social-icon {
width: 30px;
height: 30px;
display: inline-block;
background-color: white;
}
/*_____----------__________-------- Jquery Effect -------_________--------________*/
.navigation-open {
width: 230px;
height: 100%;
display: block;
position: absolute;
left: 0;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
.navigation-open .title-logo {
float: right;
margin-top: 20px;
margin-right: 30px;
font-family: 'Tahoma Bold';
font-size: 35px;
color: black;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
.navigation-open .title-logo .kala {
color: red;
}
JQuery Code :
$(document).ready(function () {
$(".navigation-icon").click(function () {
$(".navigation").toggleClass('navigation-open');
});
});

Simplest would be toggle a class on <body> and add corresponding css rules
$(document).ready(function () {
$(".navigation-icon").click(function () {
$(".navigation").toggleClass('navigation-open');
$('body').toggleClass('nav-open');
});
});
CSS example
body.nav-open .top-header {
width: 1119px;
}

HTML,CSS ,JQuery Webpage body too much stretch vertically

So I am pretty much done with my project I was going to create a full webpage slider as a background theme for my website and it is working flawlessly!
The issue is that its too stretched vertically, you are able to scroll to the right (You should not be able to do that) & I have no idea on why it is acting like that right now.
I've been trying to fix it with JavaScript but it didnt do anything so I am here to look for some answers.
What I am trying to accomplish is to have a fixed sized webpage both horizontally(Its alreay fixed) and vertically (Which I cant seem to get to work).
It seems to work fine on fiddle (Im new to fiddle)
Here is my fiddle & source code.
https://jsfiddle.net/z8vqp7fe/1/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Full Width Responsive Image Slider</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
<style type="text/css">
html,body,img {padding: 0; margin: 0;height:100%;width:100%}
body {font-family: Sans-Serif;}
.container{
height:100%;
width:100%;
overflow: hidden;
}
.cycle-slideshow {
height: 100%;
width: 100%;
display: block;
position: relative;
margin: 0 auto;
}
.cycle-prev, .cycle-next {
font-size: 200;
color: #FFF;
display: block;
position: absolute;
top: 50%;
margin-top: -16px;
z-index: 9999;
cursor: pointer;
}
.cycle-prev {left: 10%;}
.cycle-next{right: 10%;}
.cycle-pager{
width: 100%;
text-align: center;
display: block;
position: absolute;
position: top;
bottom: 20px;
z-index: 9999;
}
.cycle-pager span {
text-indent: 100%;
white-space: nowrap;;
width: 12px;
height: 12px;
display: inline-block;
border: 1px solid #FFF;
border-radius: 50%;
margin: 0 10px;
cursor: pointer;
}
.cycle-pager .cycle-pager-active {background: #FFF;}
</style>
</head>
<body>
<!-- Full Width Responsive Slider -->
<div class="cycle-slideshow">
<span class="cycle-prev">〈</span>
<span class="cycle-next">〉</span>
<span class="cycle-pager"></span>
<img src="images/Untitled.png">
<img src="images/wp.png">
<img src="images/wp2.png">
</div>
<!-- Full Width Responsive Slider -->
</body>
</html>

Try this
Btw.. there is no such thing as position: top;
and font-size: 200 should be either 200%, 200em, or 200px, etc..
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Full Width Responsive Image Slider</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
<style type="text/css">
html,
body,
img {
padding: 0;
margin: 0;
height: 100%;
width: 100%
}
body {
font-family: Sans-Serif;
}
.container {
height: 100%;
width: 100%;
overflow: hidden;
}
.cycle-slideshow {
width: 100%;
display: block;
position: relative;
margin: 0 auto;
}
.cycle-prev,
.cycle-next {
font-size: 200%;
color: #FFF;
display: block;
position: absolute;
top: 50%;
margin-top: -16px;
z-index: 9999;
cursor: pointer;
}
.cycle-prev {
left: 10%;
}
.cycle-next {
right: 10%;
}
.cycle-pager {
width: 100%;
text-align: center;
display: block;
position: absolute;
bottom: 20px;
z-index: 9999;
}
.cycle-pager span {
text-indent: 100%;
white-space: nowrap;
;
width: 12px;
height: 12px;
display: inline-block;
border: 1px solid #FFF;
border-radius: 50%;
margin: 0 10px;
cursor: pointer;
}
.cycle-pager .cycle-pager-active {
background: #FFF;
}
</style>
</head>
<body>
<div class="container">
<!-- Full Width Responsive Slider -->
<div class="cycle-slideshow">
<span class="cycle-prev">〈</span>
<span class="cycle-next">〉</span>
<span class="cycle-pager"></span>
<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg">
<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
<img src="http://3.bp.blogspot.com/-rZmCIp0C-hQ/Tx6aCFeweoI/AAAAAAAAAnQ/WqIEVBTIzRk/s1600/Cool-Tiger-Wallpaper-1920x1080-HD.jpg">
</div>
<!-- Full Width Responsive Slider -->
</body>
</html>

Resize iframe to loaded content

I want to load content in the iframe and make it resize its height according to the content. All the pages are in the same domain. I tried some scripts I found, but nothing worked. Most of the times, it just opens the loaded content in a new tab.
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="nav">Home The Band
News Gallery
Contact</div> <div id="content"></div>
<iframe id="frame"></iframe>
<div id="footer"></div>
</div>
</body>
</html>
CSS:
div#container {
height: 100%;
width: 100%;
}
div#header {
top: 0px;
width: 100%;
height: 80px;
position: fixed;
background-color: transparent;
text-align: center;
}
div#nav {
font-family: MgSouvenirLight;
font-size: 18pt;
color: #FF0;
top: 120px;
width: 100%;
height: 40px;
position: fixed;
text-decoration: none;
font-weight: bolder;
font-variant: normal;
}
div#footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
bottom: 0px;
position: fixed;
height: 30px;
width: 100%;
text-align: center;
color: #fff;
}
#frame {
position: absolute;
top: 200px;
bottom: 40px;
width: 800px;
border: none;
left: 120px;
height: auto;
}
a:link {
font-family: MgSouvenirLight;
font-size: 18pt;
color: #FF0;
}
a:visited {
font-family: MgSouvenirLight;
font-size: 18pt;
color: #FF0;
}
a:hover {
font-family: MgSouvenirLight;
font-size: 18pt;
font-style: italic;
color: #FC0;
}

you could try to get the height after iframe is loaded , and change it with jquery
$('iframe').load(function() {
setTimeout(iResize, 50);
// Safari and Opera need a kick-start.
var iSource = document.getElementById('your-iframe-id').src;
document.getElementById('your-iframe-id').src = '';
document.getElementById('your-iframe-id').src = iSource;
});
function iResize() {
document.getElementById('your-iframe-id').style.height =
document.getElementById('your-iframe-id').contentWindow.document.body.offsetHeight + 'px';
}

Develop Reference

JavaScript is the programming language of the Web.

Fade in web elements on page load using jQuery - javascript

Try this in your script tags: $("#mainImage, #enterButton").hide(); $("#mainImage").fadeIn("slow", function() { $("#enterButton").fadeIn("slow"); }); Here's the jsfiddle.

Related

Create a menu from a modal

H1 tag overflow the image?

Create Responsive website with Side Navigation

HTML,CSS ,JQuery Webpage body too much stretch vertically

Resize iframe to loaded content

Categories

Resources