Topic: change a value from 768px to 300px

cfrank free asked 6 years ago


<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(window).resize(function(){
var winwidth =$(window).width();
// $("div").text( winwidth);
if(($(window).width() < 300) &&
($("form").hasClass("form-horizontal") == true))
{$("form").removeClass("form-horizontal");
$("label").removeClass("col-sm-2");
$(".group").removeClass("col-sm-10");}

if ( $(window).width() > 300) {
$("form").addClass("form-horizontal");
$("label").addClass("col-sm-2");
$(".group").addClass("col-sm-10");
$(".test").text( winwidth);
}
else {
// if ($("form").hasClass("form-horizontal") == true){
$("form").removeClass("form-horizontal");
$("label").removeClass("col-sm-2");
$(".group").removeClass("col-sm-10");
//$("div").text( winwidth);
}
});
</script>
<style>
.group{
color:red;
};
</style>
</head>
<body>

<div class="container">
<h2>Vertical (basic) form</h2>
<div>
</div>
<form action="/action_page.php">
<div class="form-group">
<div class="test">
</div>
</div>
<div class="form-group">

<label for="email">Email:</label>
<div class="group">
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<div class="group">
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
</div>
<div class="checkbox">
<label><input type="checkbox" name="remember"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>

</body>
</html>

Ineedto change the value of 768px to 300px, pleasehelp me,frank


Piotr Glejzer staff commented 6 years ago

Hi,

you have an error in a console that suggests is "$" is not defined. That's mean you try to initiate jQuery function before load jQuery. You have to move that script tag with code below your last <div> tag. 

Here is example.

https://mdbootstrap.com/snippets/jquery/piotr-glejzer/162919

Best,

Piotr



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Opened

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: pc
  • Browser: chrome
  • OS: windows 7
  • Provided sample code: No
  • Provided link: No