Make 2 divs display side by side - javascript

I am trying to display google & facebook sign buttons side by side in a webpage.I'm using bootstrap social to display Facebook button and Google API to display Google button.By default I'm able to display them one below the other but when I try to display them one beside the error I'm not getting the desired output..
HTML 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">
<meta name="google-signin-scope" content="profile email">
<meta name="google-signin-client_id" content="sample_client_id.apps.googleusercontent.com">
<script src="https://apis.google.com/js/platform.js"></script>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Happy+Monkey' rel='stylesheet' type='text/css'>
<link href="css/bootstrap-social.css" rel="stylesheet">
<link href="css/font-awesome.css" rel="stylesheet">
<title>Login Page</title>
</head>
<body>
<div class ="google">
<div class="g-signin2" data-onsuccess="onSignIn"></div> <!--Google signup button-->
</div>
<!--FB signu p button-->
<div class="facebook" style="float: left;">
<a class="btn btn-block btn-social btn-facebook" onclick="facebookSignIn();" style="width:220px;">
<span class="fa fa-facebook"></span> Connect with Facebook
</a>
</div>
</body>
</html>
Current Output..


<!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">
<meta name="google-signin-scope" content="profile email">
<meta name="google-signin-client_id" content="sample_client_id.apps.googleusercontent.com">
<script src="https://apis.google.com/js/platform.js"></script>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Happy+Monkey' rel='stylesheet' type='text/css'>
<link href="css/bootstrap-social.css" rel="stylesheet">
<link href="css/font-awesome.css" rel="stylesheet">
<title>Login Page</title>
</head>
<body><div class ="google">
<div style="float:left;" class="g-signin2" data-onsuccess="onSignIn">goooogle</div>
</div>
<!--FB signu p button-->
<div class="facebook" style="float: left;">
<a class="btn btn-block btn-social btn-facebook" onclick="facebookSignIn();" style="width:220px;">
<span class="fa fa-facebook"></span> Connect with Facebook
</a>
</div></body>


Remove , to .google and .facebook you can give display: inline-block; or you can give to both float: left;


Use This CSS Style code:
.google{
float:left;
}
.facebook{
float:left;
}


Use css code:
.google, .facebook {
float:left;
}
Or
.google, . facebook{
display:inline-block;
}

Related

Bootstrap 5 basic row test is not working

I barely started learning bootstrap and I'm facing this problem, Bootstrap 5 basic row doesn't seem to work like in the tutorial I'm learning from, Project structure:
index.html:
<!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="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<title>Test Document</title>
</head>
<body>
<div class="row">
<div>test</div>
<div>test2</div>
<div>test3</div>
<div>test4</div>
</div>
<script src="js/main.js"></script>
<script src="js/jquery-3.6.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
the result I'm getting:

Try this.
<!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="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<title>Test Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<span>test</span>
<span>test2</span>
<span>test3</span>
<span>test4</span>
</div>
</div>
</div>
<script src="js/main.js"></script>
<script src="js/jquery-3.6.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>

Body is not set 100% height on android devices

I have View where body must be 100% height.
Here is code of page
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta charset="utf-8" />
<title>Евгений Соя</title>
<link rel="shortcut icon" type="image/x-icon" href="mini.png"/>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
</head>
<body>
<header>
<div class="logo">
<img class="graficlogo" src="logo.png" alt="Logo">
</div>
<nav>
<div class="topnav" id="myTopnav">
Главная
Тур
Книги
<a id="menu" href="#" class="icon">☰</a>
</div>
</nav>
</header>
<script src="script.js"></script>
<div class="main">
<h1> "Времени пленница "-
новая песня Марии Чайковской по мотивам стихов Евгения Сои доступна iTunes.</h1>
<p></p>
</div>
<div class="icons">
<img class="embl1" src="INSTAGRAM_icon.png">
<a href="https://www.stihi.ru/avtor/sunfish"><img class="embl2"
src="111.png"></a>
</div>
</body>
</html>
Full code is here
https://codepen.io/suhomlineugene/pen/MXPGPN
When I open it on ios device all ok and I see this
ios
On android it is like this
Android
I don't understand why, if I had body 100% width and height.
How I can solve it?

HTML loading page spinner doesn't fade way

I was following this and more articles:
How to display a loading html page while site content loads?
and this here: my favourite:
`https://codepen.io/mimoYmima/pen/fisgL`
My problem is that if I copy and paste it 1:1 my loading page doesn't fade away but if the site is already in cache it doesn't show it.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="HandheldFriendly" content="True">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="Dexter" content="">
<title>Code-Unknown</title>
<!-- ============ GOOGLE FONTS ============ -->
<link href='font-awesome/fonts/Raleway.css' rel='stylesheet' type='text/css'>
<link href='font-awesome/fonts/Open+Sans.css' rel='stylesheet' type='text/css'>
<link href='font-awesome/fonts/Iceberg.css' rel='stylesheet' type='text/css'>
<!-- CSS -->
<!-- Animate css -->
<link rel="stylesheet" type="text/css" href="css/animate.css">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" />
<!-- Custom styles CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Bootstrap v3.3.1 -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!-- Favicons -->
<link rel="shortcut icon" href="images/Code-Unknown.ico">
<!-- Css 2.0 -->
<link rel="stylesheet" href="client-login/assets/css/form-elements.css">
<link rel="stylesheet" href="client-login/assets/css/style.css">
<link rel="stylesheet" type="text/css" href="client-login/assets/css/sweetalert.css">
<link href="assets/css/please-wait.css" rel="stylesheet">
<!-- Favicon and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="client-login/assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="client-login/assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="client-login/assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="client-login/assets/ico/apple-touch-icon-57-precomposed.png">
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="preloader"></div>
<!-- HEADER -->
<header id="top">
<canvas id="constellation"></canvas>
<div class="welcome">
<div class="logo"><img src="images/logo.png" width="190" height="190" alt=""> </div>
<h1>WELCOME</h1>
<div class="row">
<div class="col-sm-6 col-sm-offset-3 social-login">
<div class="social-login-buttons">
<a class="btn btn-link-2" href="">
<i class="fa fa-steam"></i> Steam
</a>
<a class="btn btn-link-2" href="">
<i class="fa fa-server"></i>
</a>
<a class="btn btn-link-2" href="">
<i class="fa fa-list-alt"></i>
</a>
<a class="btn btn-link-2" href="">
<i class="fa fa-list-alt"></i>
</a>
</div>
</div>
</div>
<p> </p>
</div>
</header>
<!-- END HEADER -->
<!-- END FOOTER -->
<!-- Javascript files -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Backstretch -->
<script src="js/jquery.backstretch.min.js"></script>
<!-- CountDown -->
<script src="js/jquery.countdown.js"></script>
<!-- Validate form -->
<script src="js/jquery.validate.js"></script>
<!-- Scroll Reveal -->
<script src="js/scrollReveal.js"></script>
<!-- Youtube Player -->
<!-- Smooth-scroll -->
<script src="js/smooth-scroll.js"></script>
<!-- Ajax chimp -->
<script src="js/jquery.ajaxchimp.js"></script>
<!-- TweenLite -->
<script src="js/TweenLite.min.js"></script>
<!-- EasePack -->
<script src="js/EasePack.min.js"></script>
<!-- rAF -->
<script src="js/rAF.js"></script>
<!-- Constellation -->
<script src="js/constellation.js"></script>
<!-- Custom -->
<script src="js/main.js"></script>
<!-- right click off -->
<script src="js/rightclickoff.js"></script>
<!-- loading -->
<script src="js/loading.js"></script>
</body>
</div>
</html>

Try this one
$(function() { // waiting for the page to bo be fully loaded
$('#preloader').fadeOut('slow', function() { // fading out preloader
$(this).remove(); // removing it from the DOM
});
});
#preloader {
width: 100vw; /* viewport width */
height: 100vh; /* viewport height. You can use percents, though. It requires your html and body to be 100% x 100% too */
position: fixed;
background: #333 url(http://files.mimoymima.com/images/loading.gif) center no-repeat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="preloader"></div>
We also need your markup to narrow down your issue.

add days to current date in jquery mobile

I have the following html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Datepicker - jQuery Mobile Demos</title>
<link rel="stylesheet" href="../css/themes/default/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="../_assets/css/jqm-demos.css">
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<link rel="stylesheet" href="http://cdn.rawgit.com/arschmitz/jquery-mobile-datepicker-wrapper/v0.1.1/jquery.mobile.datepicker.css">
<script src="../js/jquery.js"></script>
<script src="../_assets/js/index.js"></script>
<script src="../js/jquery.mobile-1.4.5.min.js"></script>
<script src="http://cdn.rawgit.com/jquery/jquery-ui/1.10.4/ui/jquery.ui.datepicker.js"></script>
<script id="mobile-datepicker" src="http://cdn.rawgit.com/arschmitz/jquery-mobile-datepicker-wrapper/v0.1.1/jquery.mobile.datepicker.js"></script>
<script>
$("#resultDate").datepicker( "setDate" , "7/11/2011" );
</script>
</head>
<body>
<div data-role="page" class="jqm-demos" data-quicklinks="false">
<!-- /header -->
<div role="main" class="ui-content jqm-content">
<h2>Inline Datepicker</h2>
<div data-demo-html="true">
<input type="text" data-role="date" data-inline="true" disabled id="inputDate">
<input type="number" value="40" id="days">
<input type="text" data-role="date" data-inline="true" disabled id="resultDate" >
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
which is a demo from jquery mobile
I need to create a java script function that add a number of days to first textfield and displays the result in the last one.
It would be great if it will update the second picker value also.

how to implement toolbar in ionic?

I am trying to implement toolbar in ionic which should look like same as this given in bootstrap .
http://jsfiddle.net/wmDL8/17/
I need to implement toolbar in ionic same as above in fiddle which is implemented in bootstrap.I tried it but my button are taking whole width I need equal space take from left and right .And user should able to add active class so that it know which button is selected and which is not
can we implement toolbar in ionic
here is my code
http://codepen.io/anon/pen/pJRJLj
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Tabs Example</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body>
<ion-header-bar align-title="center" class="bar bar-header bar-balanced">
<div class="buttons">
<i style="font-size:30px;" class='icon ion-chevron-left'></i>
</div>
<h1 class="title">Title!</h1>
</ion-header-bar>
<ion-content>
<div class="button-bar">
<a class="button">Command1</a>
<a class="button">Command2</a>
<a class="button">Command3</a>
</div></ion-content>
</body>
</html>

You can change your CSS padding-left and padding-right for your button-bar div:
http://codepen.io/anon/pen/vOgOvV
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Tabs Example</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body>
<ion-header-bar align-title="center" class="bar bar-header bar-balanced">
<div class="buttons">
<i style="font-size:30px;" class='icon ion-chevron-left'></i>
</div>
<h1 class="title">Title!</h1>
</ion-header-bar>
<ion-content>
<div class="button-bar">
<a class="button">First</a>
<a class="button">Second</a>
<a class="button">Third</a>
<a class="button">fourth</a>
</div></ion-content>
</body>
</html>
CSS:
.button-bar {
padding-left:10%;
padding-right:10%;
}
Image:
You can change the percentage to whatever you need it to eventually be.

add a padding to your button-bar class with the desired value :
.button-bar {
padding-left:10%;
padding-right:10%;
}

Categories

Resources