I have a bootstrap panel(chat-area), and I'm showing chat messages in there. So, once a user clicks on the Send button, the message should be shown in the chat-area.
This is my html code for the chat-area.
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="">Tinychat</a>
</div>
<form class="navbar-form navbar-right" action="" method="post">
<div class="form-group">
<span>Hi, </span>
<input class="form-control" type="text" name="username" value="" placeholder="Enter any username">
</div>
<button type="submit" name="submit" class="btn btn-primary">Use</button>
</form>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-9">
<div class="panel panel-primary">
<header class="panel-heading">
<p class="panel-title">Chat messages</p>
</header>
<div class="panel-body fixed-panel" id="chat-area">
<div class="row">
<div class="chat-message chat-left">
<p class="message-heading">harry</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
</div>
</div>
<div class="row">
<div class="chat-message chat-right pull-right">
<p class="message-heading">tom</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
</div>
</div>
<div class="row">
<div class="chat-message chat-left">
<p class="message-heading">harry</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
</div>
</div>
<div class="row">
<div class="chat-message chat-left">
<p class="message-heading">harry</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
</div>
</div>
<div class="row">
<div class="chat-message chat-right pull-right">
<p class="message-heading">tom</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="panel panel-success">
<header class="panel-heading">
<p class="panel-title">User list</p>
</header>
<div class="panel-body fixed-panel">
<ul class="list-unstyled user-list">
<li>tom</li>
<li>harry</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-9">
<form class="" action="" method="post">
<div class="form-group">
<textarea class="form-control" id="message" rows="2" style="resize:none"></textarea>
</div>
<button type="submit" id="send" class="btn btn-primary pull-right">Send</button>
</form>
</div>
<div class="col-md-3">
</div>
</div>
</div>
<!-- jquery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="apps.js"></script>
</body>
this is my jquery code.
var main = function() {
$("#send").click(function() {
var message = $("#message").val();
var addMessage = "<div class='row'><div class='chat-message chat-right pull-right'><p class='message-heading'>tom</p><p>" + message + "</p></div></div>";
$("#chat-area").append(addMessage);
});
$("#message").keyup(function() {
var messageLength = $("#message").val().length;
if(messageLength <= 0)
$("#send").addClass("disabled");
else {
$("#send").removeClass("disabled");
}
});
$("#send").addClass("disabled");
}
$(document).ready(main);
send is the button, and message is the textarea.
The problem is, I'm not able to append this addMessage to the chat-area. Also, when I debug in chrome, I see that the section is appended, but as soon as the function returns back, that section disappears.
Please help.
Thanks!!
just add this
$('#send').on('click', function(event){
event.preventDefault();
//rest of the code
});
or
$("#send").click(function(event) {
event.preventDefault();
//rest of the code
});
to prevent the form to submit or a hyperlink to navigate.
This gives you also finer control when you want to ajax stuff back to your server back end
It's working for me in here : JSFiddle
This is the html code :
<div class="panel-body fixed-panel" id="chat-area">
<div class="row">
<div class="chat-message chat-left">
<p class="message-heading">harry</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
</div>
</div>
<div class="row">
<div class="chat-message chat-right pull-right">
<p class="message-heading">tom</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
</div>
</div>
<div class="row">
<div class="chat-message chat-left">
<p class="message-heading">harry</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
</div>
</div>
<div class="row">
<div class="chat-message chat-left">
<p class="message-heading">harry</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
</div>
</div>
<div class="row">
<div class="chat-message chat-right pull-right">
<p class="message-heading">tom</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
</div>
</div>
</div>
<input type="text" id="message"><button id="send">Send</button>
And this is the jquery one:
$("#send").click(function() {
var message = $("#message").val();
var addMessage = "<div class='row'><div class='chat-message chat-right pull-right'><p class='message-heading'>tom</p><p>" + message + "</p></div></div>";
$("#chat-area").append(addMessage);
});
But that'll be only for the client-side , so as soon as you refresh your page, they'll be gone. So you should look for a server side solution to build your chatting application.
Related
Example single service 1st tag redirects to #xx and 2nd one redirects to #yy both on another subpage of my website.
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="single-service lk1">
<p>Lorem ipsum dolor sit amet consectetur adipisicing eli</p>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="single-service lk2">
<p>Lorem ipsum dolor sit amet consectetur adipisicing eli</p>
</div>
</div>
</div>
const $offert = ["xx", "yy"];
const $clicken = $('.single-service');
$($clicken).click(function(){
window.location='oferta/index.html';
})});
These things are meant to work without script engine assistance
Please use the conventional HTML Anchors, such as <A ID="sectionID" and utilize fractal URL's on a link such as <A HREF="oferta/index.html#sectionID".. to make a Hyper-Jump.
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="single-service lk1" data-anchor="xx">
<p>Lorem ipsum dolor sit amet consectetur adipisicing eli</p>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="single-service lk2" data-anchor="yy">
<p>Lorem ipsum dolor sit amet consectetur adipisicing eli</p>
</div>
</div>
</div>
const $clicken = $('.single-service');
$($clicken).click(function(){
window.location='oferta/index.html#'+$(this).data('anchor');
})});
just add # and id of a div you want to go to ie.
window.location='oferta/index.html#id';
I am getting the alert of firmness,latex and thickness values in separate function.But I have to concatenation of three alert variable and pass to another div class function.concatenation value are post to the other function variables of div class
My Html:
<form id="samplecode" name="samplecode" method="POST" action="">
<div id='div1'>
<div class="col-md-12">
<div class='row'>
<div class="col-md-7 step-function">
<div class="form-group ">
<label class="one-step" >Step One:Choose a Support Layer</label>
</div>
<div class="col-md-12">
<label class=" fireness-name" >Firmness</label>
</div>
<div class="col-md-12 form-group">
<div class="col-md-4 col-lg-4 drop-menu">
<select class="form-control" id="mySelect" name="mySelect" >
<option value="" >select Firmness</option>
<option value="Soft">SOFT</option>
<option value="Hard">HARD</option>
<option value="Thickness">THICKNESS</option>
</select>
</div>
<!-- <div class="col-md-1"> <img src='img/hard.jpg' id="image" class='img-hard' alt=''> </div> -->
<div id="Soft" class='col-md-8 value'>
<p> You select Soft.</p>
</div>
<div id="Hard" class='col-md-8 value'>
<p> You select Hard.</p>
</div>
<div id="Thickness" class='col-md-8 value'>
<p> You select thickness.</p>
</div>
</div>
<div class="col-md-12">
<label class=" fireness-name" name="dropdown" >Material</label>
</div>
<div class="col-md-12 form-group">
<div class="col-md-4 col-lg-4 drop-menu">
<label for="imageselect">
<img src="img/latex.jpg" id="image" class="selectimage" alt='' />
<input id="imageselect" name="imageselect" type="radio" style="display:none;" value="latex" />
</label>
</div>
<div class='col-md-8'>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="col-md-12">
<label class=" fireness-name" name="dropdown" >Thickness</label>
</div>
<div class="col-md-12 form-group">
<div class="col-md-4 col-lg-4 drop-menu">
<select class="form-control" id="Select" name="Select" >
<option value="" >select Thickness</option>
<option value="Thick1">1</option>
<option value="Thick2">2</option>
<option value="Thick3">3</option>
</select>
</div>
<div id="Thick1" class='col-md-8 value'>
<p> You select Thickness1.</p>
</div>
<div id="Thick2" class='col-md-8 value'>
<p> You select Thickness2.</p>
</div>
<div id="Thick3" class='col-md-8 value'>
<p> You select Thickness3.</p>
</div>
</div>
</div>
<div class='row'>
<div class="col-md-5">
<img class="cust-image-size" src='img/cust.jpg'>
</div>
</div>
</div>
</div>
<div class='col-md-7 anchor'>
<div class='pull-right'>
<a href='#' id="summer" class='next-color'>Next ❯❯</a>
</div>
<div class=' pull-left ' >
<a href='#Pre' id="summerpre" class='next-color'><span>❮❮</span>Previous </a>
</div>
</div>
</div>
</form>
<!--closing first one div class -->
<!-- Second Comfort Layer container -->
<div class='container' id='div2' style="display:none;">
<div class="col-md-12" >
<div class='row'>
<div class="col-md-7 step-function">
<div class="form-group ">
<label class="one-step" >Step Two:Choose a Comfort Layer</label>
</div>
<div class="col-md-12">
<label class=" fireness-name" >Softness</label>
</div>
<div class="col-md-12 form-group">
<div class="col-md-4 col-lg-4 drop-menu">
<select class="form-control" id="sel1">
<option style="display:hidden;">select Softness</option>
<option value="Soft">MEDIUM SOFT</option>
<option value="Hard">MEDIUM HARD</option>
<option value="Thickness">MEDIUM THICKNESS</option>
</select>
</div>
<div class='col-md-8'>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="col-md-12">
<label class=" fireness-name" name="dropdown" >Material</label>
</div>
<div class="col-md-12 form-group">
<div class="col-md-4 col-lg-4 drop-menu">
<img src='img/latex.jpg' alt=''>
</div>
<div class='col-md-8'>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="col-md-12">
<label class=" fireness-name" name="dropdown" >Thickness</label>
</div>
<div class="col-md-12 form-group">
<div class="col-md-4 col-lg-4 drop-menu">
<select class="form-control" id="sel1">
<option style="display:hidden;">select Thickness</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<div class='col-md-8'>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
<div class='row'>
<div class="col-md-5">
<img class="cust-image-size" src='img/cust.jpg'>
</div>
</div>
</div>
</div>
<div class='col-md-7'>
<div class='pull-right anchor'>
<a href='#' id='summer2' class='next-color'>Next ❯❯</a>
</div>
<div class=' pull-left anchor' >
<a href='#Pre' id="summer1" class='next-color'><span>❮❮</span>Previous </a>
</div>
</div>
</div>
Jquery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$("#summerpre").click(function(){
$('div[id ^=div]').hide();
$("#div1").show();
});
//div 1 previous
$("#summer1").click(function(){
$('div[id ^=div]').hide();
$("#div1").show();
});
$(document).ready(function()
{
$('#samplecode').validate({
rules: {
mySelect: {
required: true
},
Select: {
required: true
},
imageselect:{
required: true
}
},
messages: {
mySelect: {
required: 'Please select a Firmness'
},
Select: {
required: 'Please select a Thickness'
},
imageselect:{
required: 'Please select the Image'
}
},
submitHandler: function(){
$('div[id ^=div]').hide();
$("#div2").show();
return false;
}
});
$("#summer").click(function() {
$("#samplecode").submit();
});
$(function(){
$('.value').hide();
$('#mySelect').change(function(){
$(this).find("option").each(function()
{
$('#' + this.value).hide();
});
//declare the variable to pass
var firmness = $(this).val();
$('#' + this.value).show();
alert(firmness);
//I am getting alert here and pass the variable to another function
});
});
var radio = $(this).val();
$('.selectimage').click(function() {
var img = $(this).css({border: '4px solid red'});
$('input').on('change', function() {
//declare the variable to pass
var radio=$('input[name="imageselect"]:checked').val();
var radio =$(this).val();
alert(radio);
//I am getting alert here and pass the variable to another function
//alert the vale fireness
});
});
$('.value').hide();
$('#Select').change(function()
{
$(this).find("option").each(function()
{
$('#' + this.value).hide();
});
$('#' + this.value).show();
//declare the variable to pass
var Thickness=$(this).val();
//alert the vale fireness
alert(Thickness);
//I am getting alert here and pass the variable to another function
//I have two concatenation of thee alert in jquery
});
});
I have a problem with Jonas von Andrian's jQuery Sortable plugin. When I try to move items, they first fly out of the .row and only after that I can move it normally.
What am I doing wrong?
$(".items-container").sortable({
containerSelector: ".items-container",
itemSelector: ".item",
containerPath: "> .row"
});
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-sortable/0.9.13/jquery-sortable-min.js"></script>
<div class="container">
<div class="items-container">
<div class="row">
<div class="col-xs-4 panel panel-danger item">
<div class="panel-heading">First panel</div>
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, voluptates!</div>
</div>
<div class="col-xs-4 panel panel-warning item">
<div class="panel-heading">Second panel</div>
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, voluptates!</div>
</div>
<div class="col-xs-4 panel panel-success item">
<div class="panel-heading">Third panel</div>
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, voluptates!</div>
</div>
</div>
</div>
</div>
View on JS Bin
I suggest using itemPath rather than containerPath, based on the "Sort Tables" example.
The documentation is a bit murky to me. It says that itemPath is "The exact css path between the item and its subcontainers." But it seems to me to be the CSS path between the container and its items, which is what containerPath is supposed to define.
I have also added the placeholder option in order to apply Bootstrap styles to the placeholder element.
$(".items-container").sortable({
containerSelector: ".items-container",
itemPath: "> .row",
itemSelector: ".item",
placeholder: '<div class="col-xs-4 panel placeholder"/>'
});
.row .dragged {
position: absolute;
opacity: 0.5;
z-index: 2000;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sortable/0.9.13/jquery-sortable-min.js"></script>
<div class="container">
<div class="items-container">
<div class="row">
<div class="col-xs-4 panel panel-danger item">
<div class="panel-heading">First panel</div>
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, voluptates!</div>
</div>
<div class="col-xs-4 panel panel-warning item">
<div class="panel-heading">Second panel</div>
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, voluptates!</div>
</div>
<div class="col-xs-4 panel panel-success item">
<div class="panel-heading">Third panel</div>
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, voluptates!</div>
</div>
</div>
</div>
</div>
I keep getting a Adjacent JSX elements must be wrapped in an enclosing tag error.
How do you debug JSX and where are the errors?
var React = require('react');
var Home = React.createClass({
render: function () {
return (
<div>
<header>
<div className="container">
<div className="row">
<div className="col-md-12">
<h1>Hello World</h1>
<p className="lead">This is an Awesome App Landing Page</p>
<div className="carousel-iphone">
<div id="carousel-example-generic" className="carousel slide">
<ol className="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" className="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div className="carousel-inner">
<div className="item active">
<img src="img/screenshots/app-1.png" alt="App Screen 1"></img>
</div>
<div className="item">
<img src="img/screenshots/app-2.png" alt="App Screen 2" ></img>
</div>
<div className="item">
<img src="img/screenshots/app-3.png" alt="App Screen 3" ></img>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
</div>
<div>
<section className="purchase">
<div className="container">
<div className="row">
<div className="col-md-offset-2 col-md-8">
<h1>Everything's easily customizable.</h1>
<p className="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<button type="button" className="app-store"></button>
</div>
</div>
</div>
</section>
</div>
<div>
<section className="payoff">
<div className="container">
<div className="row">
<div className="col-md-12">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</h1>
</div>
</div>
</div>
</section>
</div>
<div>
<section className="detail">
<div className="container">
<div className="row">
<div className="col-md-12">
<div id="carousel-example-generic-2" className="carousel slide">
<div className="carousel-inner">
<div className="item active">
<div className="row">
<div className="col-sm-12 col-md-offset-1 col-md-6">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
<div className="col-sm-12 col-md-5">
<div className="app-screenshot">
<img src="img/screenshots/app-1.png" className="img-responsive" alt="App Screen 1">
</div>
</div>
</div>
</div>
<div className="item">
<div className="row">
<div className="col-sm-12 col-md-offset-1 col-md-6">
<h1>Sed do eiusmod tempor incididunt ut labore et dolore magna.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
<div className="col-sm-12 col-md-5">
<div className="app-screenshot">
<img src="img/screenshots/app-2.png" className="img-responsive" alt="App Screen 2">
</div>
</div>
</div>
</div>
<div className="item">
<div className="row">
<div className="col-sm-12 col-md-offset-1 col-md-6">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
<div className="col-sm-12 col-md-5">
<div className="app-screenshot">
<img src="img/screenshots/app-3.png" className="img-responsive" alt="App Screen 3">
</div>
</div>
</div>
</div>
</div>
<ol className="carousel-indicators">
<li data-target="#carousel-example-generic-2" data-slide-to="0" className="active"></li>
<li data-target="#carousel-example-generic-2" data-slide-to="1"></li>
<li data-target="#carousel-example-generic-2" data-slide-to="2"></li>
</ol>
</div>
</div>
</div>
</div>
</section>
</div>
<div>
<section className="features">
<div className="container">
<div className="row">
<div className="col-md-4">
<div className="circle"><i className="icon-bookmark"></i></div>
<h2>Quick & Easy Setup</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
<div className="col-md-4">
<div className="circle"><i className="icon-keypad"></i></div>
<h2>Parallax Scrolling</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
<div className="col-md-4">
<div className="circle"><i className="icon-like"></i></div>
<h2>Responsive Design</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
</div>
</div>
</section>
</div>
<div>
<section className="social">
<div className="container">
<div className="row">
<div className="col-md-12">
<h2>Connect with us</h2>
<a className="icon-facebook"></a>
<a className="icon-twitter"></a>
<a className="icon-google"></a>
<a className="icon-instagram"></a>
<a className="icon-pinterest"></a>
</div>
</div>
</div>
</section>
</div>
<div>
<section className="get-it">
<div className="container">
<div className="row">
<div className="col-md-12">
<h1>Avaialable now on the App Store</h1>
<p className="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<button type="button" className="app-store"></button>
</div>
<div className="col-md-12">
<hr />
<ul>
<li>Contact</li>
<li>Twitter</li>
<li>Press</li>
<li>Support</li>
<li>Developers</li>
<li>Privacy</li>
</ul>
</div>
</div>
</div>
</section>
</div>
);
}
});
module.exports = Home;
The reason for that error is that you have several div's that are siblings to one another. The way to fix this is to enclose all the div's you have in your code by another enclosing tag (in your case it seems like another div tag should do the trick.
I added <div id="closingDiv">. I would give this code a try:
var React = require('react');
var Home = React.createClass({
render: function () {
return (
<div id="closingDiv">
<div>
<header>
<div className="container">
<div className="row">
<div className="col-md-12">
<h1>Hello World</h1>
<p className="lead">This is an Awesome App Landing Page</p>
<div className="carousel-iphone">
<div id="carousel-example-generic" className="carousel slide">
<ol className="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" className="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div className="carousel-inner">
<div className="item active">
<img src="img/screenshots/app-1.png" alt="App Screen 1"></img>
</div>
<div className="item">
<img src="img/screenshots/app-2.png" alt="App Screen 2" ></img>
</div>
<div className="item">
<img src="img/screenshots/app-3.png" alt="App Screen 3" ></img>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
</div>
<div>
<section className="purchase">
<div className="container">
<div className="row">
<div className="col-md-offset-2 col-md-8">
<h1>Everything\'s easily customizable.</h1>
<p className="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<button type="button" className="app-store"></button>
</div>
</div>
</div>
</section>
</div>
<div>
<section className="payoff">
<div className="container">
<div className="row">
<div className="col-md-12">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</h1>
</div>
</div>
</div>
</section>
</div>
<div>
<section className="detail">
<div className="container">
<div className="row">
<div className="col-md-12">
<div id="carousel-example-generic-2" className="carousel slide">
<div className="carousel-inner">
<div className="item active">
<div className="row">
<div className="col-sm-12 col-md-offset-1 col-md-6">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
<div className="col-sm-12 col-md-5">
<div className="app-screenshot">
<img src="img/screenshots/app-1.png" className="img-responsive" alt="App Screen 1">
</div>
</div>
</div>
</div>
<div className="item">
<div className="row">
<div className="col-sm-12 col-md-offset-1 col-md-6">
<h1>Sed do eiusmod tempor incididunt ut labore et dolore magna.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
<div className="col-sm-12 col-md-5">
<div className="app-screenshot">
<img src="img/screenshots/app-2.png" className="img-responsive" alt="App Screen 2">
</div>
</div>
</div>
</div>
<div className="item">
<div className="row">
<div className="col-sm-12 col-md-offset-1 col-md-6">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
<div className="col-sm-12 col-md-5">
<div className="app-screenshot">
<img src="img/screenshots/app-3.png" className="img-responsive" alt="App Screen 3">
</div>
</div>
</div>
</div>
</div>
<ol className="carousel-indicators">
<li data-target="#carousel-example-generic-2" data-slide-to="0" className="active"></li>
<li data-target="#carousel-example-generic-2" data-slide-to="1"></li>
<li data-target="#carousel-example-generic-2" data-slide-to="2"></li>
</ol>
</div>
</div>
</div>
</div>
</section>
</div>
<div>
<section className="features">
<div className="container">
<div className="row">
<div className="col-md-4">
<div className="circle"><i className="icon-bookmark"></i></div>
<h2>Quick & Easy Setup</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
<div className="col-md-4">
<div className="circle"><i className="icon-keypad"></i></div>
<h2>Parallax Scrolling</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
<div className="col-md-4">
<div className="circle"><i className="icon-like"></i></div>
<h2>Responsive Design</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
</div>
</div>
</section>
</div>
<div>
<section className="social">
<div className="container">
<div className="row">
<div className="col-md-12">
<h2>Connect with us</h2>
<a className="icon-facebook"></a>
<a className="icon-twitter"></a>
<a className="icon-google"></a>
<a className="icon-instagram"></a>
<a className="icon-pinterest"></a>
</div>
</div>
</div>
</section>
</div>
<div>
<section className="get-it">
<div className="container">
<div className="row">
<div className="col-md-12">
<h1>Avaialable now on the App Store</h1>
<p className="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<button type="button" className="app-store"></button>
</div>
<div className="col-md-12">
<hr />
<ul>
<li>Contact</li>
<li>Twitter</li>
<li>Press</li>
<li>Support</li>
<li>Developers</li>
<li>Privacy</li>
</ul>
</div>
</div>
</div>
</section>
</div>
</div>
);
}
});
module.exports = Home;
I have this slider on my website, I would like to learn how to change the pictures and to edit the content on my own?, I had seeing some videos but everyone work in a different way, so I would like to work for this specific example. This one is part of my own template,
<div class="slider-container">
<div class="container">
<div class="row">
<div class="span12">
<div class="slider_block">
<script type="text/javascript" src="{{skin url=''}}js/camera.js"></script>
<script type="text/javascript">
/* index slider */
jQuery(function(){
jQuery('#camera_wrap').camera({
alignmen: 'topCenter',
height: '57.179%',
minHeight: '134px',
loader : false,
pagination: false,
fx: 'simpleFade',
navigationHover:false,
thumbnails: false,
playPause: false
});
});
</script>
<div class="fluid_container">
<div class="camera_wrap camera_orange_skin" id="camera_wrap">
<div data-src="{{skin url=''}}images/slider_pic1.jpg" data-link="carpet-bags.html">
<div class="camera_caption fadeFromLeft">
<div class="right_slider_side slide1">
<div class="sl_row1">Summer</div>
<div class="sl_row2">sale</div>
<div class="sl_row3">Get up to</div>
<div class="sl_row4">35<span><i>%</i>off</span><strong>*</strong></div>
<div class="sl_row5"><span>*</span> Lorem ipsum dolor sit amet conse ctetur adipisicing elit</div>
</div>
</div>
</div>
<div data-src="{{skin url=''}}images/slider_pic2.jpg" data-link="handbags.html">
<div class="camera_caption fadeFromLeft">
<div class="right_slider_side slide2">
<div class="sl_row1">Free</div>
<div class="sl_row2">Shipping</div>
<div class="sl_row3">on orders over</div>
<div class="sl_row4"><i>$</i>65<strong>*</strong></div>
<div class="sl_row5"><span>*</span> Lorem ipsum dolor sit amet conse ctetur adipisicing elit</div>
</div>
</div>
</div>
<div data-src="{{skin url=''}}images/slider_pic3.jpg" data-link="laptop-bags.html">
<div class="camera_caption fadeFromLeft">
<div class="right_slider_side slide3">
<div class="sl_row1">Clearance</div>
<div class="sl_row2">sale</div>
<div class="sl_row3">Get up to</div>
<div class="sl_row4">75<span><i>%</i>off</span><strong>*</strong></div>
<div class="sl_row5"><span>*</span> Lorem ipsum dolor sit amet conse ctetur adipisicing elit</div>
</div>
</div>
</div>
</div>
</div>
<div class="banners_col">
<div class="tbanner banner1">
<a href="{{store direct_url="brands/piel-leather.html"}}">
<div class="b_holder">
<h2>Top Brands</h2>
<p>Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor.</p>
<span class="ban_shop_now">Shop now!</span>
</div>
<img src="{{skin url=''}}images/banner1.jpg" alt="" />
</a>
</div>
<div class="tbanner banner2">
<a href="{{store direct_url="brands/vitalio-vera.html"}}">
<div class="b_holder">
<h2>New Arrivals</h2>
<p>Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor.</p>
<span class="ban_shop_now">Shop now!</span>
</div>
<img src="{{skin url=''}}images/banner2.jpg" alt="" />
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>