I'm having struggle accomplishing this :
I want jQuery to grab class name of each icon and write it in each p element
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">
</head>
<body>
<div class="container-fluid">
<div class="text-center">
<div class="row">
<div class="col-md-4">
<div class="icon"><i class="icon-class-1"></i></div>
<p></p>
</div>
<div class="col-md-4">
<div class="icon"><i class="icon-class-2"></i></div>
<p></p>
</div>
<div class="col-md-4">
<div class="icon"><i class="icon-class-3"></i></div>
<p></p>
</div>
</div>
</div>
</div>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
jQuery
function idk() {
var icon_class = $(".icon i").attr("class"),
icon_container = $(".col-md-4"),
icon_p = $('.col-md-4 p');
icon_p.each(function(){
icon_p.text(icon_class);
})
};
$(document).ready(function () {
idk();
});
JsFiddle
https://jsfiddle.net/277gpp7r/2/
This code only duplicates the first icon class name and writes it in all "p" elements instead grabbing the each class name, but this is not what I'm trying to accomplish.
I would appreciate any help, thanks in advance everyone!
I would loop through the i's, store the class in a var, then find the .col-md-4 ancestor and target the p in it and then add the class text to the p
function idk() {
$('.icon i').each(function() {
var icon_class = $(this).attr("class"),
$icon_p = $(this).closest('.col-md-4').find('p');
$icon_p.text(icon_class);
});
}
$(document).ready(function() {
idk();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container-fluid">
<div class="text-center">
<div class="row">
<div class="col-md-4">
<div class="icon"><i class="icon-class-1"></i></div>
<p></p>
</div>
<div class="col-md-4">
<div class="icon"><i class="icon-class-2"></i></div>
<p></p>
</div>
<div class="col-md-4">
<div class="icon"><i class="icon-class-3"></i></div>
<p></p>
</div>
</div>
</div>
</div>
</body>
function idk() {
var icon_class = $(".icon i").map(function(){
return $(this).attr("class")
}).get().join( " " )
icon_container = $(".col-md-4"),
icon_p = $('.col-md-4 p');
icon_p.each(function() {
icon_p.text(icon_class);
})
};
$(document).ready(function() {
idk();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="text-center">
<div class="row">
<div class="col-md-4">
<div class="icon"><i class="icon-class-1"></i></div>
<p>1</p>
</div>
<div class="col-md-4">
<div class="icon"><i class="icon-class-2"></i></div>
<p>2</p>
</div>
<div class="col-md-4">
<div class="icon"><i class="icon-class-3"></i></div>
<p>3</p>
</div>
</div>
</div>
</div>
Map all the class into one array.
Then use that array as the text of each p
Try some thing like this.
function idk() {
$('.col-md-4').each(function(){
var icon_class = $(this).find(".icon i").attr("class");
console.log(icon_class);
icon_container = $(".col-md-4");
icon_p = $(this).find('p');
icon_p.text(icon_class);
});
};
$(document).ready(function () {
idk();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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">
</head>
<body>
<div class="container-fluid">
<div class="text-center">
<div class="row">
<div class="col-md-4">
<div class="icon"><i class="icon-class-1"></i></div>
<p></p>
</div>
<div class="col-md-4">
<div class="icon"><i class="icon-class-2"></i></div>
<p></p>
</div>
<div class="col-md-4">
<div class="icon"><i class="icon-class-3"></i></div>
<p></p>
</div>
</div>
</div>
</div>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
You can do like this
function idk() {
var icon_p = $('.col-md-4 p');
icon_p.each(function(i, v) {
find the i & its class in previous div and add it t the element
var findClass = $(this).prev('div.icon').find('i').attr('class');
$(this).attr('class', findClass);
})
};
DEMO
text(function) is shortest way to do this:
$('.col-md-4 p').text(function(){
return $(this).prev().find('i').attr('class')
})
p{border:1px solid #ccc; margin-top:10px}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="text-center">
<div class="row">
<div class="col-md-4">
<div class="icon"><i class="icon-class-1"></i></div>
<p></p>
</div>
<div class="col-md-4">
<div class="icon"><i class="icon-class-2"></i></div>
<p></p>
</div>
<div class="col-md-4">
<div class="icon"><i class="icon-class-3"></i></div>
<p></p>
</div>
</div>
</div>
</div>
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 want to assign different hrefs to different tds within a table that autogenerates said tds from data pulled from firestore.
This is my oferta.js, I can retrieve the data from firestore without a problem but I don't really have any idea on how to assign a different href to the td "titulo", I tried using anchors but this results in establishing the same URL in each consecutive td, what can I do to circumvent this problem?, thanks in advance!
const ofertaList = document.querySelector('#ofertaLista');
const setupOferta = (data) => {
let html = '';
data.forEach(doc => {
const oferta = doc.data();
const td =`
<tr>
<td>${oferta.titulo}</td>
<td>${oferta.tipo}</td>
<td>${oferta.fecha}</td>
<td>${oferta.areaConocimiento}</td>
<td>${oferta.cupoLimitado}</td>
</tr>
`;
html += td
});
ofertaList.innerHTML = html;
}
db.collection('oferta').get().then((snapshot) =>{
setupOferta(snapshot.docs)
});
EDIT
This is my oferta.html
<!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>Oferta</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Questrial&display=swap" rel="stylesheet">
<!-- Bulma Version 0.8.x-->
<link rel="stylesheet" href="https://unpkg.com/bulma#0.8.0/css/bulma.min.css" />
<link rel="stylesheet" type="text/css" href="css/login.css">
</head>
<body>
<section class="hero is-info is-bold is-fullhd">
<div class="hero-body">
<nav class="navbar is-info">
<a class="navbar-item" href="https://balsamiq.cloud/sb17nzh/p8yk3ts/r2278">
<img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
</a>
<div class="container">
<div class="navbar-brand">
<h1 class="title">
CAEDI
</h1>
</div>
</div>
</nav>
</div>
</section>
<div id="main">
<section class="hero is-light">
<div class="hero-body">
<div class="container">
<h1 class="title">
Oferta
</h1>
</div>
</div>
</section>
<div class="container">
<input class="input" type="text" name="" id="textBoxSearch" placeholder="Buscar" />
<br /><br />
</div>
<section class="section">
<div class="container">
<div class="columns">
<div class="column is-12">
<div>
<table id="fullfeatures" class="table is-striped is-bordered" cellspacing="0" width="100%">
<thead>
<tr id="tr" >
<th>Título</th>
<th>Tipo</th>
<th>Fecha</th>
<th>Área de conocimiento</th>
<th>Cupo limitado</th>
</tr>
</thead>
<tbody id="ofertaLista"></tbody>
</table>
</div>
</div>
</div>
</div>
</section>
<footer class="footer has-background-info is-mobile is-fullhd">
<div class="container">
<div class="columns is-mobil">
<div class="column is-half-fullhd">
<h1 class="title has-text-left">
Contacto
</h1>
<h2 class="subtitle has-text-left">
Direccion, correo electronico, telefono
</h2>
</div>
<div class="column is-half-fullhd">
<h2 class="subtitle has-text-right">
Powered by (c) CAEDI
</h2>
</div>
</div>
</footer>
<script src="https://www.gstatic.com/firebasejs/7.8.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.8.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.8.1/firebase-firestore.js"></script>
<script>
var firebaseConfig = {
apiKey: "AIzaSyA0Rl0WAmrpfxPZsWwc_P-AiHg44K8e05c",
authDomain: "caedi-fd241.firebaseapp.com",
databaseURL: "https://caedi-fd241.firebaseio.com",
projectId: "caedi-fd241",
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
const aut = firebase.auth();
const db = firebase.firestore();
</script>
<script async type="text/javascript" src="js/bulma.js"></script>
<script src="https://unpkg.com/bulma-modal-fx/dist/js/modal-fx.min.js"></script>
<script async type="text/javascript" src="js/oferta.js"></script>
</body>
</html>
This is the final result, I want to assign different hrefs to each "Titulo" but by doing this
<td>${oferta.titulo}</td>
This happens
I want to put a href="historia.html" in "Historia del arte" and a href="matematicas.html" in "Matematicas 1", Is it possible?, sorry if I'm not expressing my self with clarity
<td>${oferta.titulo}</td>
you can do this
<td>${oferta.titulo}</td>
or
<td>${oferta.titulo}</td>
Just set the href of the element to be the variable for the URL:
<td>${oferta.titulo}</td>
Can't get ng-click="speakOut()" to work, it is not calling speakOut function, however ng-click="getCalories()" works perfectly. Any ideas what am I doing wrong?
angular.module('watson', ['ngSanitize'])
.controller('textcntr', function($scope, $http) {
$scope.speakOut = function() {
$scope.text = document.getElementById("speak").value;
$http.get('https://stream.watsonplatform.net/text-to-speech/api/v1/synthesize?username=xxx&password=xxx=Your search term').success(function(data) {
console.log(data);
})
.error(function(data, status) {
console.error('Repos error', status, data);
})
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ICP 3</title>
<link href="https://fonts.googleapis.com/css?family=Oxygen:300,400" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js" type="application/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-sanitize.js"></script>
<!-- Animate.css -->
<link rel="stylesheet" href="css/animate.css">
<!-- Icomoon Icon Fonts-->
<link rel="stylesheet" href="css/icomoon.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.css">
<!-- Magnific Popup -->
<link rel="stylesheet" href="css/magnific-popup.css">
<!-- Flexslider -->
<link rel="stylesheet" href="css/flexslider.css">
<!-- Theme style -->
<link rel="stylesheet" href="css/style.css">
<!-- Modernizr JS -->
<script src="js/modernizr-2.6.2.min.js"></script>
<script src="js/respond.min.js"></script>
</head>
<body>
<div class="fh5co-loader"></div>
<div id="page">
<nav class="fh5co-nav" role="navigation">
<div class="container-wrap">
<div class="top-menu">
<div class="row">
<div class="col-xs-2">
<div id="fh5co-logo">ICP 3</div>
</div>
</div>
</div>
</div>
</nav>
<div class="container-wrap">
<aside id="fh5co-hero">
<div class="flexslider">
<ul class="slides">
<li style="background-image: url(images/1.jpg);">
<div class="overlay-gradient"></div>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3 col-md-pull-3 slider-text">
<div class="slider-text-inner">
<h1>Find out calories and serving weight in grams</h1>
<div ng-app="food" ng-controller="foodctrl">
<p><button class="btn btn-primary btn-demo" href="#" ng-click="getCalories()"></i> Search</button></p>
<form style="font-size: large;font-family: Chalkduster">
<input style="font-size: large" type="text" name="food" id="calories" placeholder="Search">
</form>
<p class="currentConditions" ng-bind-html="outputCalories.html" style="font-size: 20px; color: black; font-family: Chalkduster"> </p>
</div>
</div>
</div>
</div>
</div>
</li>
<li style="background-image: url(images/2.jpg);">
<div class="overlay-gradient"></div>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3 col-md-push-3 slider-text">
<div class="slider-text-inner">
<h1>App can speak out the searched keyword</h1>
<!--<h2>Free html5 templates Made by freehtml5.co</h2>-->
<div ng-app="watson" ng-controller="textcntr">
<p><button class="btn btn-primary btn-demo" href="#" ng-click="speakOut()"></i> Speak Out</button></p>
<form style="font-size: large;font-family: Chalkduster">
<input style="font-size: large" type="text" name="textToSpeach" id="speak" placeholder="Speack out">
</form>
<p class="currentConditions" ng-bind-html="currentweather.html"></p>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</aside>
<div class="gototop js-top">
<i class="icon-arrow-up2"></i>
</div>
<script src="js/watson.js"></script>
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<!-- jQuery Easing -->
<script src="js/jquery.easing.1.3.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- Waypoints -->
<script src="js/jquery.waypoints.min.js"></script>
<!-- Flexslider -->
<script src="js/jquery.flexslider-min.js"></script>
<!-- Magnific Popup -->
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/magnific-popup-options.js"></script>
<!-- Counters -->
<script src="js/jquery.countTo.js"></script>
<!-- Main -->
<script src="js/main.js"></script>
</div>
</div>
</body>
</html>
angular.module('food', ['ngSanitize'])
.controller('foodctrl', function($scope, $http) {
$scope.getCalories = function() {
$scope.foodName = document.getElementById("calories").value;
//$scope.stateCode = document.getElementById("CodeId").value;
// abbrState(stateCode, 'name');
$http.get('https://api.nutritionix.com/v1_1/search/' + $scope.foodName + '?results=0:1&fields=*&appId=xxx&appKey=xxx').success(function(data) {
console.log(data);
calories = data.hits[0].fields.nf_calories;
weight = data.hits[0].fields.nf_serving_weight_grams;
$scope.outputCalories = {
html: "Result: " + $scope.foodName + ' contains: ' + calories + ' calories and serving weight in grams is: ' + weight + '.'
}
})
.error(function(data, status) {
console.error('Repos error', status, data);
})
}
});
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 this code :
//--Async load page
$("body").on("click", "a:not([data-noajax])", function(){
href = $(this).attr("href");
pageLoad(href + " .page-wrapper", ".page-wrapper", href);
//$('#header').load(href+' #header');
//$('#footer').load(href+' #footer');
return false;
});
function pageLoad(from, where, href)
{
href = typeof href === 'undefined' ? "" : href;
loading();
//$(where).empty();
$(where).load(from, function(data){
loading(false);
$("html, body").animate({ scrollTop: $(".page-header h1").offset().top }, "slow");
title = $(".page-header h1").text();
parent.location.hash = href;
window.history.pushState($(document).html(), title, href);
document.title = title;
$(document).ready(function() {
$('.page-header h1').text(title);
})
});
}
//--
working, but....scripts which will load another page don't work ((
example : go on the http://amour05.ru , click on some post title, and after try reload page;
first we don't see comments widget, and after reload we see it.
p.s. sorry for my english ((
RIGHT SOURCE CODE :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="MobileOptimized" content="320"/>
<meta name="HandheldFriendly" content="true"/>
<meta name="viewport" content="width=device_width, initial_scale=1.0" />
<title>кто знает расписание пересдач ...</title>
<style>
body { padding-top: 60px;}
</style>
<link rel="stylesheet" type="text/css" href="/theme/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/theme/bootstrap/css/bootstrap-theme.min.css" />
<link rel="stylesheet" type="text/css" href="/theme/style/style.css" />
<link rel="stylesheet" type="text/css" href="/theme/style/jquery/jquery-ui.css" />
<script type="text/javascript" src="/theme/scripts/jquery/jquery.js"></script>
<script type="text/javascript" src="/theme/scripts/jquery/jquery-ui.js"></script>
<script type="text/javascript" src="/theme/scripts/custom.js"></script>
<script type="text/javascript" src="//yandex.st/share/share.js"></script>
<script type="text/javascript" src="//vk.com/js/api/openapi.js?105"></script>
</head>
<body>
<div class="page-wrapper">
<div class="header">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<form id="search" action="/search.php" class="navbar-search pull-right" method="POST">
<input type="search" name="search_text" value="" class="search-query" placeholder="Поиск">
</form>
<a class="brand" href="/">amour05.ru</a>
</div>
</div>
</div>
</div>
<div class="container main">
<div class="row">
<div class="span3">
<div class="well well-sm">
<ul class="nav nav-list">
<li class="nav-header">Меню</li>
<li>Главная</li>
<li class="divider"></li>
<li class="active"><a id="add_post" href="/add.php">Добавить признание</a></li>
<li>Поиск по сайту</li>
<li><a id="feedback" href="/feedback.php">Написать админу</a></li>
</ul>
</div>
</div>
<div class="span6">
<div class="page-header well">
<h1>кто знает расписание пересдач ...</h1>
</div>
<div class="well">
<div class="post">
<div class="post_title"><h3 class="title">Анонимно</h3></div>
<div class="post_text">
кто знает расписание пересдач 3-его курса ЮФ пожалуйста скиньте.спасибо огромное)) <br><br>
</div>
<div class="post_data">
<div style="text-align: center" class="yashare-auto-init" data-yashareL10n="ru"
data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir,gplus" data-yashareTheme="counter"
data-yashareTitle="кто знает расписание пересдач ..." data-yashareDescription ="кто знает расписание пересдач 3-его курса ЮФ пожалуйста скиньте.спасибо огромное)) <br><br>" ></div>
</div>
</div>
<script type="text/javascript">
VK.init({apiId: 4092141, onlyWidgets: true});
</script>
<!-- Put this div tag to the place, where the Comments block will be -->
<div id="vk_comments"></div>
<script type="text/javascript">
VK.Widgets.Comments("vk_comments", {limit: 10, width: "100%", attach: "*", mini: "auto"}, 1560 );
VK.Observer.subscribe("widgets.comments.new_comment", commentAdd);
VK.Observer.subscribe("widgets.comments.delete_comment", commentDel);
function commentAdd(num, last, date, sign)
{
$.post('/ajax.php',{
type: 'vk_comment_add',
num: num,
last_comment: last,
date: date,
sign: sign,
id: "1560"
});
}
function commentDel(num, last, date, sign)
{
$.post('/ajax.php',{
type: 'vk_comment_del',
num: num,
last_comment: last,
date: date,
sign: sign,
id: "1560"
});
}
</script>
</div>
</div>
<div class="span3">
<div class="well well-sm">
<div class="panel panel-info">
<div class="panel-heading">Статистика</div>
<div class="panel-body">
<ul class="nav nav-list">
<li class="list-group-item">31.01.2014 18:58</li>
<li class="list-group-item">комментариев : <span class="badge badge-info pull-right">0</span></li>
<li class="list-group-item">просмотров : <span class="badge badge-info pull-right">34</span></li>
<li class="list-group-item">уникальных : <span class="badge badge-info pull-right clearfix">10</span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="navbar navbar-fixed-bottom">
<div class="navbar-inner">
<div class="container">
<div class="row">
<div class="span6">
<ul class="nav hidden-phone">
<li class="active">Главная</li>
<li class="divider-vertical"></li> <!-- Вертикальный разделитель -->
<li>О проекте</li>
</ul>
</div>
<div class="span6">
<!-- Yandex.Metrika counter -->
<script type="text/javascript">
(function (d, w, c) {
(w[c] = w[c] || []).push(function() {
try {
w.yaCounter23555398 = new Ya.Metrika({id:23555398,
webvisor:true,
clickmap:true,
trackLinks:true,
accurateTrackBounce:true});
} catch(e) { }
});
var n = d.getElementsByTagName("script")[0],
s = d.createElement("script"),
f = function () { n.parentNode.insertBefore(s, n); };
s.type = "text/javascript";
s.async = true;
s.src = (d.location.protocol == "https:" ? "https:" : "http:") + "//mc.yandex.ru/metrika/watch.js";
if (w.opera == "[object Opera]") {
d.addEventListener("DOMContentLoaded", f, false);
} else { f(); }
})(document, window, "yandex_metrika_callbacks");
</script>
<noscript><div><img src="//mc.yandex.ru/watch/23555398" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->
</div>
</div>
</div>
</div>
</div>
</div>
<!--<script type="text/javascript" src="/theme/bootstrap/js/bootstrap.min.js" ></script>-->
</div>
</body>
</html>
GENERATED SOURCE :
<html data-savefrom-tab-data="{"module":"lm","tooltip":"Найдено ссылок: 0"}" lang="ru"><head>
<meta charset="utf-8">
<meta name="MobileOptimized" content="320">
<meta name="HandheldFriendly" content="true">
<meta name="viewport" content="width=device_width, initial_scale=1.0">
<title>кто знает расписание пересдач ...</title>
<style>
body { padding-top: 60px;}
</style>
<link rel="stylesheet" type="text/css" href="/theme/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/theme/bootstrap/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="/theme/style/style.css">
<link rel="stylesheet" type="text/css" href="/theme/style/jquery/jquery-ui.css">
<script src="http://mc.yandex.ru/metrika/watch.js" async="" type="text/javascript"></script><script type="text/javascript" src="/theme/scripts/jquery/jquery.js"></script>
<script type="text/javascript" src="/theme/scripts/jquery/jquery-ui.js"></script>
<script type="text/javascript" src="/theme/scripts/custom.js"></script>
<script type="text/javascript" src="//yandex.st/share/share.js"></script>
<script type="text/javascript" src="//vk.com/js/api/openapi.js?105"></script>
</head>
<body data-savefrom-link-count="20" style="background-image: url("/theme/style/loveimgs/4.jpg");">
<div title="Загрузка" style="max-width: 500px;" id="loading" class="i hide"><img src="/theme/style/imgs/busy.gif" alt="загрузка"> идет загрузка</div><div class="page-wrapper"><div class="page-wrapper">
<div class="header">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<form id="search" action="/search.php" class="navbar-search pull-right" method="POST">
<input name="search_text" value="" class="search-query" placeholder="Поиск" type="search">
</form>
<a class="brand" href="/">amour05.ru</a>
</div>
</div>
</div>
</div>
<div class="container main">
<div class="row">
<div class="span3">
<div class="well well-sm">
<ul class="nav nav-list">
<li class="nav-header">Меню</li>
<li>Главная</li>
<li class="divider"></li>
<li class="active"><a id="add_post" href="/add.php">Добавить признание</a></li>
<li>Поиск по сайту</li>
<li><a id="feedback" href="/feedback.php">Написать админу</a></li>
</ul>
</div>
</div>
<div class="span6">
<div class="page-header well">
<h1>кто знает расписание пересдач ...</h1>
</div>
<div class="well">
<div class="post">
<div class="post_title"><h3 class="title">Анонимно</h3></div>
<div class="post_text">
кто знает расписание пересдач 3-его курса ЮФ пожалуйста скиньте.спасибо огромное)) <br><br>
</div>
<div class="post_data">
<div style="text-align: center" class="yashare-auto-init" data-yasharel10n="ru" data-yasharequickservices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir,gplus" data-yasharetheme="counter" data-yasharetitle="кто знает расписание пересдач ..." data-yasharedescription="кто знает расписание пересдач 3-его курса ЮФ пожалуйста скиньте.спасибо огромное)) <br><br>"></div>
</div>
</div>
<!-- Put this div tag to the place, where the Comments block will be -->
<div id="vk_comments"></div>
</div>
</div>
<div class="span3">
<div class="well well-sm">
<div class="panel panel-info">
<div class="panel-heading">Статистика</div>
<div class="panel-body">
<ul class="nav nav-list">
<li class="list-group-item">31.01.2014 18:58</li>
<li class="list-group-item">комментариев : <span class="badge badge-info pull-right">0</span></li>
<li class="list-group-item">просмотров : <span class="badge badge-info pull-right">26</span></li>
<li class="list-group-item">уникальных : <span class="badge badge-info pull-right clearfix">8</span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="navbar navbar-fixed-bottom">
<div class="navbar-inner">
<div class="container">
<div class="row">
<div class="span6">
<ul class="nav hidden-phone">
<li class="active">Главная</li>
<li class="divider-vertical"></li> <!-- Вертикальный разделитель -->
<li>О проекте</li>
</ul>
</div>
<div class="span6">
<!-- Yandex.Metrika counter -->
<noscript><div><img src="//mc.yandex.ru/watch/23555398" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->
</div>
</div>
</div>
</div>
</div>
</div>
<!--<script type="text/javascript" src="/theme/bootstrap/js/bootstrap.min.js" ></script>-->
</div></div>
</body></html>