I searched here in stackoverflow but didnt find a solution for my case..
i want to do a group div who will appear or will hide if the down button is clicked...have this HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<title>Relatorio</title>
<script src="/Scripts/jquery-1.8.2.js"></script>
</head>
<body style="border-top: solid 10px #ffffff" class="container">
<div>
<div>
<div class="container">
<div class="row">
<div class="col-lg-8">
<input type="text" id="" name="" />
</div>
<div class="col-lg-4">
<div>
<div>
<div style="border:1px solid black;font-size:20px;overflow:auto;">
<div class="container" style="background-color:orangered;padding-top:5px;padding-bottom:5px;">
<div class="row">
<div class="col-sm-12">
Relatorio 01
</div>
</div>
</div>
<div class="container" style="background-color:orangered;padding-top:5px;padding-bottom:5px;color: white">
<div class="row" style="text-align:right;">
<div class="col-sm-8">
field1
</div>
<div class="col-sm-4" style="text-align:right;">
<div id='botabrefecha'>
<i class='fa fa-angle-down'></i>
</div>
</div>
</div>
</div>
<div class="abrefecha" style="border:0px solid black;display:none">
<div class="container" style="padding-top:5px;padding-bottom:5px;">
<div class="row">
<div class="col-sm-4">
field2 Group
</div>
<div class="col-sm-8" style="text-align:right;">
<input type="text" style="width:100%;" />
</div>
</div>
</div>
<div class="container" style="padding-top:5px;padding-bottom:5px;">
<div class="row">
<div class="col-sm-4">
field3 Group
</div>
<div class="col-sm-8" style="text-align:right;">
<input type="text" style="width:100%;" />
</div>
</div>
</div>
</div>
<div class="container" style="padding-top:5px;padding-bottom:5px;">
<div class="row">
<div class="col-sm-4">
txtCampo3
</div>
<div class="col-sm-8" style="text-align:right;">
<input type="text" style="width:100%;" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
and this jquery:
$(document).ready(function () {
$('#botabrefecha').on('click', function () {
var visivel = $(this).closest('div').find(".abrefecha").is(":visible");
if (visivel)
{
$(this).closest('div').find(".abrefecha").hide();
}
else
{
$(this).closest('div').find(".abrefecha").show();
}
});
});
but i dont know why he cant show or hide my div. i have tested and he returns if is visible or not...but when i try to show or hide, nothing happens...
any ideas?
Thanks!
Rafael
in your code there is only one div containing the class abrefecha so you can access that element directly. For show/hide of elements you can use jQuery's toggle function.
toggle
You can access that div directly in your click handler.
$(document).ready(function () {
$('#botabrefecha').on('click', function () {
$('.abrefecha').toggle();
});
});
Related
In VueJS I am using textarea to get input from the user and also use another textarea to show output.
Here, everything is working except I am getting multiple outputs with textarea like this.
I am using v-for in textarea as the code is perfectly working if I use inside ordered/unordered list.
Image: Multiple Textarea box while output
Code
var app = new Vue({
el: '#app',
data: {
address: '',
},
methods: {
},
computed: {
domainlist() {
return this.address.split('\n')
}
}
})
<!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">
<title>.com.np Cover Letter Generator</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.3/css/bulma.min.css">
</head>
<body>
<div id="app">
<section class="section">
<div class="container">
<div class="columns is-centered">
<div class="column is-half">
<div class="box">
<form>
<div class="field ">
<label class="label is-size-5 ">Domain Name</label>
<div class="control">
<textarea class="textarea is-medium " placeholder="Ex: www.abc.com.np " v-model="address " required="required"></textarea>
</div>
</div>
</form>
</div>
</div>
<div class="column is-half">
<div class="box">
<div class="field">
<label class="label is-size-5">Output</label>
<div class="control">
<textarea class="textarea" placeholder="Result" v-for="address in domainlist" readonly>domain:{{address}}
</textarea>
</div>
</div>
<div class="field">
<div class="control buttons is-centered ">
<button class="button is-primary is-medium ">Copy</button>
<button class="button is-danger is-medium ">Download</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2"></script>
</body>
</html>
with the v-for Vue will duplicate the element for any array item.
I suggest to generate the textarea content directly in the computed property.
Here below a working example.
var app = new Vue({
el: '#app',
data: {
address: '',
},
methods: {
},
computed: {
domainlist() {
var addreses = this.address.split('\n');
var ret = "";
for(var addr in addreses) {
ret += addreses[addr] ? 'domain: '+addreses[addr]+"\n":"";
}
return ret;
}
}
})
<!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">
<title>.com.np Cover Letter Generator</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.3/css/bulma.min.css">
</head>
<body>
<div id="app">
<section class="section">
<div class="container">
<div class="columns is-centered">
<div class="column is-half">
<div class="box">
<form>
<div class="field ">
<label class="label is-size-5 ">Domain Name</label>
<div class="control">
<textarea class="textarea is-medium " placeholder="Ex: www.abc.com.np " v-model="address " required="required"></textarea>
</div>
</div>
</form>
</div>
</div>
<div class="column is-half">
<div class="box">
<div class="field">
<label class="label is-size-5">Output</label>
<div class="control">
<textarea class="textarea" placeholder="Result" readonly>{{domainlist}}
</textarea>
</div>
</div>
<div class="field">
<div class="control buttons is-centered ">
<button class="button is-primary is-medium ">Copy</button>
<button class="button is-danger is-medium ">Download</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2"></script>
</body>
</html>
Replace
return this.address.split('\n')
With
return this.address.split('.') // so that a.b.c becomes ['a','b','c']
You can also move the v-for out of the textarea to the <div class="control"></div>
<div class="control" v-for="address in domainlist">
<textarea class="textarea" placeholder="Result" readonly>domain:{{address}}
</textarea>
</div>
var app = new Vue({
el: '#app',
data: {
address: '',
},
methods: {
},
computed: {
domainlist() {
return this.address.split('.')
}
}
})
<!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">
<title>.com.np Cover Letter Generator</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.3/css/bulma.min.css">
</head>
<body>
<div id="app">
<section class="section">
<div class="container">
<div class="columns is-centered">
<div class="column is-half">
<div class="box">
<form>
<div class="field ">
<label class="label is-size-5 ">Domain Name</label>
<div class="control">
<textarea class="textarea is-medium " placeholder="Ex: www.abc.com.np " v-model="address " required="required"></textarea>
</div>
</div>
</form>
</div>
</div>
<div class="column is-half">
<div class="box">
<div class="field">
<label class="label is-size-5">Output</label>
<div class="control" v-for="address in domainlist">
<textarea class="textarea" placeholder="Result" readonly>domain:{{address}}
</textarea>
</div>
</div>
<div class="field">
<div class="control buttons is-centered ">
<button class="button is-primary is-medium ">Copy</button>
<button class="button is-danger is-medium ">Download</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2"></script>
</body>
</html>
I am building a static e-commerce website using bootstrap. I want 2 product in a row while it opens in the phone and 4 product in a row while open in desktop or i-pad.
<div class="container">
<div class="row product">
<div class="col-md-3">
<div class="image">
<img id="10030" src="#">
</div>
</div>
<div class="col-md-3">
<div class="image">
<img id="10030" src="#">
</div>
</div>
<div class="col-md-3">
<div class="image">
<img id="10030" src="#">
</div>
</div>
<div class="col-md-3">
<div class="image">
<img id="10030" src="#">
</div>
</div>
</div>
There is more than 1 row on this page.
please help me to solve this.
the issue that you are having is because of your bootstrap grid.
I made an example below. Pay attention to: class="col-xs-6 col-md-3"
Here are the docs. https://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp
<!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>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-md-3" style="background-color:green;">1</div>
<div class="col-xs-6 col-md-3" style="background-color:blue;">2</div>
<div class="col-xs-6 col-md-3" style="background-color:red;">3</div>
<div class="col-xs-6 col-md-3" style="background-color:yellow;">4</div>
</div>
</div>
</body>
</html>
I want to use color picker in my form and i have tried below code in my project but its not working. Anything wrong with the code?,
In view blade,
#extends('layouts.blank')
#push('stylesheets')
<link href="https://maxcdn.bootstrapcdn.com/bootstrap
/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-
colorpicker/2.5.1/css/bootstrap-colorpicker.min.css" rel="stylesheet">
#endpush
#section('main_container')
<div class="main-content">
<!-- page content -->
<div id="page-wrapper">
<div class="tab-pane active" id="horizontal-form">
<h3 class="blank1">Vehicle Details</h3>
{!! Form::open(array('class' => 'form-horizontal','route' =>
'vehicles.store','method'=>'POST')) !!}
<script type="text/javascript">
$('.colorpicker').colorpicker();
</script>
<div class="row">
<div id="cp2" class="input-group colorpicker colorpicker-component">
<input type="text" value="#00AABB" class="form-control" />
<span class="input-group-addon"><i></i></span>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-6">
<div class="col-xs-12 col-sm-12 col-md-12 text-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
{{ Form::close() }}
</div>
</div>
</div>
</div>
#endsection
#pushonce('custom-scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-
colorpicker/2.5.1/js/bootstrap-colorpicker.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js">
</script>
#endpushonce
I got an empty text box not showing the color.Is there any problem with including css or js files.
How can I solve this ?Can anyone help?
I have used the scripts through #yield scripts then it worked.
You can try this it's worked fine!
<html lang="en">
<head>
<title>Bootstrap Color Picker Plugin Example</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.3.6/css/bootstrap-colorpicker.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.3.6/js/bootstrap-colorpicker.js"></script>
</head>
<body>
<div class="container">
<h1>Bootstrap Color Picker Plugin Example</h1>
<div id="cp2" class="input-group colorpicker-component">
<input type="text" value="#00AABB" class="form-control" />
<span class="input-group-addon"><i></i></span>
</div>
</div>
<script type="text/javascript">
$('#cp2').colorpicker();
</script>
</body>
</html>
Make like this
<div class="main-content">
<!-- page content -->
<div id="page-wrapper">
<div class="tab-pane active" id="horizontal-form">
<h3 class="blank1">Vehicle Details</h3>
{!! Form::open(array('class' => 'form-horizontal','route' =>
'vehicles.store','method'=>'POST')) !!}
<script type="text/javascript">
$('#cp2').colorpicker();
</script>
<div class="row">
<div id="cp2" class="input-group colorpicker-component">
<input type="text" value="#00AABB" class="colorpicker form-control" />
<span class="input-group-addon"><i></i></span>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-6">
<div class="col-xs-12 col-sm-12 col-md-12 text-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
{{ Form::close() }}
</div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-
colorpicker/2.5.1/js/bootstrap-colorpicker.min.js"></script>
I have the following code:
<!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">
<link rel="stylesheet" type="text/css" href="flags.min.css">
<link rel="stylesheet" type="text/css" href="css2.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="build/css/intlTelInput.css">
<script src="google/jquery-1.11.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="padding-right: 6%;padding-left: 6%;margin-right: auto;margin-left: auto;">
<div class="row" style="padding-bottom: 5%;">
<div class="col-lg-offset-1 col-lg-4">
<h3 style="color:#00B0F0;">Choose your phone numbers<h3>
</div>
</div>
<form action="deuxiemeBis.php" method="POST">
<div class="row">
<div class="col-lg-offset-1 col-lg-4">
<div class="form-group phone1">
<input type="tel" class="form-control" name ="phone1" id="phone1">
</div>
<div class="form-group phone2">
<input type="tel" class="form-control" name ="phone2" id="phone2">
</div>
<div class="form-group phone3">
<input type="tel" class="form-control" name ="phone3" id="phone3">
</div>
</div>
</div>
<div class="row">
<br><br>
<div class="col-lg-offset-1 col-lg-3">
<button data-toggle="collapse" data-target="#demo" style="background-color: transparent;border:none;color:#00B0F0;">+More infos</button>
</div>
</div>
<div class="row">
<br>
<div class="form-group col-lg-offset-1 col-lg-6">
<div id="demo" class="collapse">
<textarea rows="3" name="comment" class="form-control" form="usrform"></textarea>
</div>
</div>
</div>
<div class="col-lg-offset-9 col-lg-3"><br>
<div class="form-group">
<button type="submit" class="btn btn-primary" style="width: 50%;background-color: #00B0F0;">Submit</button>
</div>
</div>
</form>
</div>
</body>
</html>
The problem is that when I click on the button "More infos" it submits the form but I just want it to show the collapse div.
So my question is: how do you specify that only the submit button will actually submit the form ?
That's because you didn't specify the type for that button and submit is the default type. Set the type='button' and it will no longer act as a submit.
I have page structure on desktop like this:
<form>
___________________________________________________
| |
| [] checkbox |
| <div>TITLE</div> |
| <div>SUBTITLE</div> |
|_________________________________________________|
</form>
On mobile i want to have like this :
<form>
____________________
| |
| <div></div> |
| <div></div> |
| []checkbox |
|__________________|
</form>
code :
<form>
<div class="row">
<div class="col-sm-12 text-right visible-lg">
<input type="checkbox">
</div>
<div class="col-sm-12 text-center">
TITLE
</div>
<div class="col-sm-12 text-center">
SUBTITLE
</div>
<div class="col-sm-12 text-right hidden-lg">
<input type="checkbox">
</div>
</div>
</form>
tried to play with .visible-lg .hidden-lg and etc. but problem is that checkbox is same (cloned - same name, id, class) and when submitting form they are confusing all the logic. If first I checked but second not, in post I still get that it's checked.
What should i do in this case ?
Checkeboxes are toggles (bootstrapetoggle.com)
Use flexbox. You can set the order of any element inside of it. In this case, the default is order: 1; (and ties are solved by real order), and by setting the checkbox to order: 2; it shifts down under the other two.
#media (max-width: 480px) {
.row {
display: flex;
flex-direction: column;
}
#withcheckbox {
order: 2;
text-align: center;
}
}
JSFiddle
keeping you approach, the easiest way to solve is to enclose the fields in 2 different forms, with the same action. Something like:
<form action="/myaction"> <!-- sm-hidden -->
[] check
<div></div>
<div></div>
<submit />
</form>
<form action="/myaction"> <!-- lg-hidden -->
<div></div>
<div></div>
[] check
<submit />
</form>
the id needs to be different, but all you need on server side is the name attribute, not the id
-- EDIT --
if you don't mind use javascript to compose the page, you can use an html template:
function useTemplate(id) {
var myTemplate = document.getElementById('myTemplate'),
normalContent = document.getElementById(id),
clonedTemplate = myTemplate.content.cloneNode(true);
normalContent.appendChild(clonedTemplate);
}
useTemplate('first-form');useTemplate('second-form');
<!-- Template Content -->
<template id="myTemplate">
<div><input /></div>
<div><input /></div>
<div><input /></div>
<div><input /></div>
</template>
<!-- Normal Content -->
<form>
<fieldset>
<input type='checkbox'/>
<div id="first-form">
</div>
</fieldset>
</form>
<form>
<fieldset>
<div id="second-form">
</div>
<input type='checkbox'/>
</fieldset>
</form>
Do something like this--
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css"></style>
</head>
<body>
<form>
<div class="row">
<div class="col-sm-8 col-md-8 col-lg-8 col-xs-8">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 col-xs-12">
---------
</div>
<div class="col-sm-12 col-md-12 col-lg-12 col-xs-12">
+++++++++
</div>
</div>
</div>
<div class="col-sm-4 col-md-4 col-lg-4 col-xs-12">
checkbox[]
</div>
</div>
</form>
</body>
</html>