Thanks to #AlejandroIván (Load file into CKEditor textarea using Javascript) got CKEditor to display uploaded files. Working great...
BUT, causing issues with younger users. They do not always upload the correct file.
What we are attempting to do in classroom is load premade layouts into CKEditor via PHP & select menu. Since JSFiddle does not process PHP, cannot give working example.
The JSFiddle with working upload function is here.
Here is the sample with select menu and PHP we have been testing:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pick a Layout</title>
<link rel="canonical" href="" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href='https://fonts.googleapis.com/css?family=Poppins:400,300,500,600,700&subset=latin,devanagari,latin-ext' rel='stylesheet' type='text/css'>
<link rel='stylesheet' id='fontawesome-css' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' type='text/css' media='all' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdn.ckeditor.com/4.5.11/standard/ckeditor.js"></script>
</head>
<body>
<div class="topdiv">
Pick Your Layout
</div>
<textarea name="editor1" id="editor1" rows="10" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea>
<br />
<input name="file" type="file" id="files" class="form-control" value="">
<br />
<div>
<table>
<tr>
<td>
<strong>Pick Your Flavor</strong>
</td>
</tr>
<tr>
<td class="indtd">
<p>
<select name="file" id="files" onChange="window.location='pickckeditor.php?template='+this.value">
<option>Choose Layout</option>
<option value="features">Features</option>
<option value="3colx2">Three Col X2</option>
<option value="3colx1">Three Col X1</option>
</select>
</p>
<?php
$Template = $_REQUEST["template"];
if ($Template == "features"){
echo "<section id='features'>
<div class='title'>
<h2 class='flex fadeInUp animated'>The best features</h2>
<p class='description flex fadeInUp animated'>With features engineered from best practices used by leading property management companies worldwide.</p>
</div>
<!--end title-->
<div class='para flex fadeInRight animated animated'>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an...</p>
</div>
<br />
<!--end para-->
<div class='row text-center'>
<div class='col-md-4 caption flex fadeInUp animated animated' data-wow-delay='0.5s'><i class='fa fa-cogs'></i>
<h3>Designed with Pride</h3>
<p>Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra eu libero sit amet quam egestas sempe</p>
</div>
<!--end col-md-4-->
<div class='col-md-4 caption flex fadeInUp animated animated' data-wow-delay='0.3s'><i class='fa fa-object-group'></i>
<h3>Support & coffee</h3>
<p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat erat volutpat.</p>
</div>
<!--end col-md-4-->
<div class='col-md-4 caption flex fadeInUp animated animated' data-wow-delay='0.1s'><i class='fa fa-keyboard-o'></i>
<h3>Clean Code</h3>
<p>Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.</p>
</div><!--end col-md-4-->
</div><!--end row-->
<div class='row text-center'>
<div class='col-md-4 caption flex fadeInUp animated animated' data-wow-delay='0.1s'><i class='fa fa-cogs'></i>
<h3>Designed with Pride</h3>
<p>Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra eu libero sit amet quam egestas sempe</p>
</div>
<!--end col-md-4-->
<div class='col-md-4 caption flex fadeInUp animated animated' data-wow-delay='0.3s'><i class='fa fa-object-group'></i>
<h3>Support & coffee</h3>
<p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat erat volutpat.</p>
</div>
<!--end col-md-4-->
<div class='col-md-4 caption flex fadeInUp animated animated' data-wow-delay='0.5s'><i class='fa fa-keyboard-o'></i>
<h3>Clean Code</h3>
<p>Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.</p>
</div><!--end col-md-4-->
</div><!--end row-->
<div class='para flex fadeInLeft animated animated'>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an...</p>
</div>
</section><!--end section-->";
}
elseif ($Template == "3colx2"){
echo "<div class='row text-center'>
<div class='col-md-4 facenter caption flex fadeInUp animated animated' data-wow-delay='0.1s'><i class='fa fa-cogs feature' style='color: rgb(153, 0, 0);'></i>
<h3>Quality Designed</h3>
<p>The quick brown fox jumped over the lazy dogs back. 0123456789. The lazy dog jumped over the quick brown foxs back.</p>
</div>
<!--end col-md-4-->
<div class='col-md-4 caption flex fadeInUp animated animated' data-wow-delay='0.3s'><i class='fa fa-object-group' style='color: rgb(0, 0, 51);'></i>
<h3>Easy to Use</h3>
<p>The quick brown fox jumped over the lazy dogs back. 0123456789. The lazy dog jumped over the quick brown foxs back.</p>
</div>
<!--end col-md-4-->
<div class='col-md-4 caption flex fadeInUp animated animated' data-wow-delay='0.5s'><i class='fa fa-keyboard-o' style='color: rgb(153, 0, 0);'></i>
<h3>Clean Code</h3>
<p>The quick brown fox jumped over the lazy dogs back. 0123456789. The lazy dog jumped over the quick brown foxs back.</p>
</div>
<!--end col-md-4--></div>
<!--end 3-col row-->
<div class='row text-center'>
<div class='col-md-4 facenter caption flex fadeInUp animated animated' data-wow-delay='0.1s'><i class='fa fa-cogs' style='color: rgb(153, 0, 0);'></i>
<h3>Designed Clean</h3>
<p>The quick brown fox jumped over the lazy dogs back. 0123456789. The lazy dog jumped over the quick brown foxs back.</p>
</div>
<!--end col-md-4-->
<div class='col-md-4 caption flex fadeInUp animated animated' data-wow-delay='0.3s'><i class='fa fa-object-group' style='color: rgb(0, 0, 51);'></i>
<h3>Easy to Use</h3>
<p>The quick brown fox jumped over the lazy dogs back. 0123456789. The lazy dog jumped over the quick brown foxs back.</p>
</div>
<!--end col-md-4-->
<div class='col-md-4 caption flex fadeInUp animated animated' data-wow-delay='0.5s'><i class='fa fa-keyboard-o' style='color: rgb(153, 0, 0);'></i>
<h3>Clean Code</h3>
<p>The quick brown fox jumped over the lazy dogs back. 0123456789. The lazy dog jumped over the quick brown foxs back.</p>
</div>
<!--end col-md-4--></div>";
}
elseif ($Template == "3colx1"){
echo "<div class='row text-center'>
<div class='col-md-4 facenter caption flex fadeInUp animated animated' data-wow-delay='0.1s'><i class='fa fa-cogs feature' style='color: rgb(153, 0, 0);'></i>
<h3>Quality Designed</h3>
<p>The quick brown fox jumped over the lazy dogs back. 0123456789. The lazy dog jumped over the quick brown foxs back.</p>
</div>
<!--end col-md-4-->
<div class='col-md-4 caption flex fadeInUp animated animated' data-wow-delay='0.3s'><i class='fa fa-object-group' style='color: rgb(0, 0, 51);'></i>
<h3>Easy to Use</h3>
<p>The quick brown fox jumped over the lazy dogs back. 0123456789. The lazy dog jumped over the quick brown foxs back.</p>
</div>
<!--end col-md-4-->
<div class='col-md-4 caption flex fadeInUp animated animated' data-wow-delay='0.5s'><i class='fa fa-keyboard-o' style='color: rgb(153, 0, 0);'></i>
<h3>Clean Code</h3>
<p>The quick brown fox jumped over the lazy dogs back. 0123456789. The lazy dog jumped over the quick brown foxs back.</p>
</div>
<!--end col-md-4--></div>
<!--end 3-col row-->";
}
else{
echo ("Select a layout from dropdown");
}
?>
</td>
</tr>
</table>
</div>
<script>
CKEDITOR.replace( 'editor1' );
$(document).ready(function() {
function readTextFile(file, callback, encoding) {
var reader = new FileReader();
reader.addEventListener('load', function (e) {
callback(this.result);
});
if (encoding) reader.readAsText(file, encoding);
else reader.readAsText(file);
}
function fileChosen(input, output) {
if ( input.files && input.files[0] ) {
readTextFile(
input.files[0],
function (str) {
output.setData(str);
output.updateElement();
}
);
}
}
$('#files').on('change', function () {
var result = $("#files").text();
fileChosen(this, CKEDITOR.instances.editor1);
});
});
</script>
</body>
</html>
We have tried many different onChange events without any success and know this is not correct, but out of ideas:
<select name="file" id="files" onChange="window.location='pickckeditor.php?template='+this.value">
Do not need the file input (upload) function and select option together, so file input can go away if need be.
Recap: Need to have template snippet from the echos loaded into CKEditor after user selects from drop down menu.
Had found this info and seemed headed in right way, but still no dice.
Is this possible or have we been spinning our wheels?
A student came up with a "down and dirty" solution for us. It may not be best for live production but ours is used in closed local server environment.
PHP File:
<?php
header("X-XSS-Protection: 0");
require_once 'config.php';
?><!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pick a Layout</title>
<link rel="stylesheet" href="sample.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href='https://fonts.googleapis.com/css?family=Poppins:400,300,500,600,700&subset=latin,devanagari,latin-ext' rel='stylesheet' type='text/css'>
<link rel='stylesheet' id='fontawesome-css' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' type='text/css' media='all' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdn.ckeditor.com/4.5.11/standard/ckeditor.js"></script>
<script>
// The instanceReady event is fired, when an instance of CKEditor has finished
// its initialization.
CKEDITOR.on( 'instanceReady', function( ev ) {
// Show this sample buttons.
document.getElementById( 'eButtons' ).style.display = 'block';
});
function InsertHTML() {
// Get the editor instance that we want to interact with.
var editor = CKEDITOR.instances.editor1;
var value = document.getElementById( 'htmlArea2' ).value;
// Check the active editing mode.
if ( editor.mode == 'wysiwyg' )
{
// Insert HTML code.
// http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-insertHtml
editor.insertHtml( value );
}
else
alert( 'You must be in WYSIWYG mode!' );
}
</script>
</head>
<body>
<div class="description">
<p>
Down and dirty way to insert content into CKEditor via dropdown select menu.
</p>
</div>
<!-- This <div> holds alert messages to be display in the sample page. -->
<div id="alerts">
<noscript>
<p>
<strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
support, like yours, you should still see the contents (HTML data) and you should
be able to edit it normally, without a rich editor interface.
</p>
</noscript>
</div>
<p id="eMessage">
</p>
<div id="eButtons" style="display: none">
<select name="select" id="htmlArea2" onchange="InsertHTML();">
<option>Choose Layout</option>
<option value="<?php echo $features;?>">Features</option>
<option value="<?php echo $threecolx1;?>">Three Col X1</option>
<option value="<?php echo $threecolx2;?>">Three Col X2</option>
</select>
</div>
<br />
<textarea style="width:100%;" id="editor1" name="editor1" rows="10">Down and dirty</textarea>
<script>
// Replace the <textarea id="editor1"> with an CKEditor instance.
CKEDITOR.replace( 'editor1', {
contentsCss: [ 'https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css', 'https://fonts.googleapis.com/css?family=Poppins:400,300,500,600,700&subset=latin,devanagari,latin-ext'],
});
CKEDITOR.config.allowedContent = true;
CKEDITOR.dtd.$removeEmpty['span'] = false;
CKEDITOR.dtd.$removeEmpty['i'] = false;
CKEDITOR.dtd.$removeEmpty['fa'] = false;
</script>
<div id="footer">
<hr>
</div>
</body>
</html>
Config File:
<?php
$features = "<section id='features'>
<div class='title'>
<h2 class='flex fadeInUp animated'>The best features</h2>
<p class='description flex fadeInUp animated'>With features engineered from best practices used by leading property management companies worldwide.</p>
</div>
<!--end title-->
<div class='para flex fadeInRight animated animated'>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an...</p>
</div>
<br />
<!--end para-->
<div class='row text-center'>
<div class='col-md-4 caption flex fadeInUp animated animated' data-wow-delay='0.5s'><i class='fa fa-cogs'></i>
<h3>Designed with Pride</h3>
<p>Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra eu libero sit amet quam egestas sempe</p>
</div>
<!--end col-md-4-->
<div class='col-md-4 caption flex fadeInUp animated animated' data-wow-delay='0.3s'><i class='fa fa-object-group'></i>
<h3>Support & coffee</h3>
<p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat erat volutpat.</p>
</div>
<!--end col-md-4-->
<div class='col-md-4 caption flex fadeInUp animated animated' data-wow-delay='0.1s'><i class='fa fa-keyboard-o'></i>
<h3>Clean Code</h3>
<p>Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.</p>
</div><!--end col-md-4-->
</div><!--end row-->
<div class='row text-center'>
<div class='col-md-4 caption flex fadeInUp animated animated' data-wow-delay='0.1s'><i class='fa fa-cogs'></i>
<h3>Designed with Pride</h3>
<p>Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra eu libero sit amet quam egestas sempe</p>
</div>
<!--end col-md-4-->
<div class='col-md-4 caption flex fadeInUp animated animated' data-wow-delay='0.3s'><i class='fa fa-object-group'></i>
<h3>Support & coffee</h3>
<p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat erat volutpat.</p>
</div>
<!--end col-md-4-->
<div class='col-md-4 caption flex fadeInUp animated animated' data-wow-delay='0.5s'><i class='fa fa-keyboard-o'></i>
<h3>Clean Code</h3>
<p>Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.</p>
</div><!--end col-md-4-->
</div><!--end row-->
<div class='para flex fadeInLeft animated animated'>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an...</p>
</div>
</section><!--end section-->";
$threecolx1 = "<div class='row text-center'>
<div class='col-md-4 facenter caption flex fadeInUp animated animated' data-wow-delay='0.1s'><i class='fa fa-cogs feature' style='color: rgb(153, 0, 0);'></i>
<h3>Quality Designed</h3>
<p>The quick brown fox jumped over the lazy dogs back. 0123456789. The lazy dog jumped over the quick brown foxs back.</p>
</div>
<!--end col-md-4-->
<div class='col-md-4 caption flex fadeInUp animated animated' data-wow-delay='0.3s'><i class='fa fa-object-group' style='color: rgb(0, 0, 51);'></i>
<h3>Easy to Use</h3>
<p>The quick brown fox jumped over the lazy dogs back. 0123456789. The lazy dog jumped over the quick brown foxs back.</p>
</div>
<!--end col-md-4-->
<div class='col-md-4 caption flex fadeInUp animated animated' data-wow-delay='0.5s'><i class='fa fa-keyboard-o' style='color: rgb(153, 0, 0);'></i>
<h3>Clean Code</h3>
<p>The quick brown fox jumped over the lazy dogs back. 0123456789. The lazy dog jumped over the quick brown foxs back.</p>
</div>
<!--end col-md-4--></div>
<!--end 3-col row-->";
$threecolx2 = "<div class='row text-center'>
<div class='col-md-4 facenter caption flex fadeInUp animated animated' data-wow-delay='0.1s'><i class='fa fa-cogs feature' style='color: rgb(153, 0, 0);'></i>
<h3>Quality Designed</h3>
<p>The quick brown fox jumped over the lazy dogs back. 0123456789. The lazy dog jumped over the quick brown foxs back.</p>
</div>
<!--end col-md-4-->
<div class='col-md-4 caption flex fadeInUp animated animated' data-wow-delay='0.3s'><i class='fa fa-object-group' style='color: rgb(0, 0, 51);'></i>
<h3>Easy to Use</h3>
<p>The quick brown fox jumped over the lazy dogs back. 0123456789. The lazy dog jumped over the quick brown foxs back.</p>
</div>
<!--end col-md-4-->
<div class='col-md-4 caption flex fadeInUp animated animated' data-wow-delay='0.5s'><i class='fa fa-keyboard-o' style='color: rgb(153, 0, 0);'></i>
<h3>Clean Code</h3>
<p>The quick brown fox jumped over the lazy dogs back. 0123456789. The lazy dog jumped over the quick brown foxs back.</p>
</div>
<!--end col-md-4--></div>
<!--end 3-col row-->
<div class='row text-center'>
<div class='col-md-4 facenter caption flex fadeInUp animated animated' data-wow-delay='0.1s'><i class='fa fa-cogs' style='color: rgb(153, 0, 0);'></i>
<h3>Designed Clean</h3>
<p>The quick brown fox jumped over the lazy dogs back. 0123456789. The lazy dog jumped over the quick brown foxs back.</p>
</div>
<!--end col-md-4-->
<div class='col-md-4 caption flex fadeInUp animated animated' data-wow-delay='0.3s'><i class='fa fa-object-group' style='color: rgb(0, 0, 51);'></i>
<h3>Easy to Use</h3>
<p>The quick brown fox jumped over the lazy dogs back. 0123456789. The lazy dog jumped over the quick brown foxs back.</p>
</div>
<!--end col-md-4-->
<div class='col-md-4 caption flex fadeInUp animated animated' data-wow-delay='0.5s'><i class='fa fa-keyboard-o' style='color: rgb(153, 0, 0);'></i>
<h3>Clean Code</h3>
<p>The quick brown fox jumped over the lazy dogs back. 0123456789. The lazy dog jumped over the quick brown foxs back.</p>
</div>
<!--end col-md-4--></div>";
?>
Again, we are in closed server environment and I caution anyone using "CKEDITOR.config.allowedContent = true;" to fully understand before using on live production server.
Hope this will be of use to others...
Related
I bought a bootstrap template a while back from a guy who's site is now gone. On one of the pages,
there are 9 tiles (masonry), each of which I am using for different sub parts. As a sanity guard, I
numbered all the tiles so I could tell them apart both in the code and on the screen. This works
fine until I get to the 9th and last tile, where the number 9 looks like a lower case letter g.
At first that's what I thought it was, but then I did a comparison test. Sure enough, there is a
small but subtle difference between the lowercase letter g and the number 9, specifically, a little
serif poking above the back of the letter g.
But now that that's solved, it also means the 9's sit lower than the 8 and 0 sits between them in
height. Here's a screenshot:
What can I do at this late date to get sensible looking numbers?
I was also surprised to see that once named and ordered, the tiles do not stay in that order.
If I can target them correctly with my variables, maybe I can live with that, but just in case I'd
like to know how to stop that, too. Thanks.
<div class="main col-md-12">
<!-- page-title start -->
<!-- ================ -->
<h1 class="page-title">Blog Masonry No Sidebar</h1>
<div class="separator-2"></div>
<!-- page-title end -->
<!-- masonry grid start -->
<!-- ================ -->
<div class="masonry-grid row">
<!-- masonry grid item start -->
<div class="masonry-grid-item col-sm-6 col-md-4">
<!-- blogpost start -->
<article class="blogpost shadow light-gray-bg bordered">
<div id="carousel-blog-post" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators bottom margin-clear">
<li data-target="#carousel-blog-post" data-slide-to="0" class="active"></li>
<li data-target="#carousel-blog-post" data-slide-to="1"></li>
<li data-target="#carousel-blog-post" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="overlay-container">
<img src="images/blog-1.jpg" alt="">
<a class="overlay-link" href="blog-post.html"><i class="fa fa-link"></i></a>
</div>
</div>
<div class="item">
<div class="overlay-container">
<img src="images/blog-3.jpg" alt="">
<a class="overlay-link" href="blog-post.html"><i class="fa fa-link"></i></a>
</div>
</div>
<div class="item">
<div class="overlay-container">
<img src="images/blog-4.jpg" alt="">
<a class="overlay-link" href="blog-post.html"><i class="fa fa-link"></i></a>
</div>
</div>
</div>
</div>
<header>
<h2>Blogpost with slider</h2>
<div class="post-info">
<span class="post-date">
<i class="icon-calendar"></i>
<span class="day">12</span>
<span class="month">May 2015</span>
</span>
<span class="submitted"><i class="icon-user-1"></i> by John Doe</span>
<span class="comments"><i class="icon-chat"></i> 22 comments</span>
</div>
</header>
<div class="blogpost-content">
<p>Mauris dolor sapien, malesuada at interdum ut, hendrerit eget lorem. Nunc interdum mi neque, et sollicitudin purus fermentum ut. Suspendisse faucibus nibh odio, a vehicula eros pharetra in. Maecenas ullamcorper commodo rutrum.</p>
</div>
<footer class="clearfix">
<div class="tags pull-left"><i class="icon-tags"></i> tag 1, tag 2, long tag 3</div>
<div class="link pull-right"><i class="icon-link"></i>Read More</div>
</footer>
</article>
<!-- blogpost end -->
</div>
<!-- masonry grid item end -->
<!-- masonry grid item start -->
<div class="masonry-grid-item col-sm-6 col-md-4">
<!-- blogpost start -->
<article class="blogpost shadow light-gray-bg bordered">
<div class="overlay-container">
<img src="images/blog-2.jpg" alt="">
<a class="overlay-link" href="blog-post.html"><i class="fa fa-link"></i></a>
</div>
<header>
<h2>Cute Robot</h2>
<div class="post-info">
<span class="post-date">
<i class="icon-calendar"></i>
<span class="day">10</span>
<span class="month">May 2015</span>
</span>
<span class="submitted"><i class="icon-user-1"></i> by John Doe</span>
<span class="comments"><i class="icon-chat"></i> 22 comments</span>
</div>
</header>
<div class="blogpost-content">
<p>Mauris dolor sapien, malesuada at interdum ut, hendrerit eget lorem. Nunc interdum mi neque, et sollicitudin purus fermentum ut. Suspendisse faucibus nibh odio, a vehicula eros pharetra in. Maecenas ullamcorper commodo rutrum. In iaculis lectus vel augue eleifend dignissim. Aenean viverra semper sollicitudin.</p>
</div>
<footer class="clearfix">
<div class="tags pull-left"><i class="icon-tags"></i> tag 1, tag 2, long tag 3</div>
<div class="link pull-right"><i class="icon-link"></i>Read More</div>
</footer>
</article>
<!-- blogpost end -->
</div>
<!-- masonry grid item end -->
<!-- masonry grid item start -->
<div class="masonry-grid-item col-sm-6 col-md-4">
<!-- blogpost start -->
<article class="blogpost shadow light-gray-bg bordered object-non-visible" data-animation-effect="fadeInUpSmall" data-effect-delay="100">
<header>
<h2>Text Post</h2>
<div class="post-info">
<span class="post-date">
<i class="icon-calendar"></i>
<span class="day">09</span>
<span class="month">May 2015</span>
</span>
<span class="submitted"><i class="icon-user-1"></i> by John Doe</span>
<span class="comments"><i class="icon-chat"></i> 22 comments</span>
</div>
</header>
<div class="blogpost-content">
<p>Mauris dolor sapien, malesuada at interdum ut, hendrerit eget lorem. Nunc interdum mi neque, et sollicitudin purus fermentum ut. Suspendisse faucibus nibh odio, a vehicula eros pharetra in. Maecenas ullamcorper commodo rutrum. In iaculis lectus vel augue eleifend dignissim. Aenean viverra semper sollicitudin.</p>
</div>
<footer class="clearfix">
<div class="tags pull-left"><i class="icon-tags"></i> tag 1, tag 2, long tag 3</div>
<div class="link pull-right"><i class="icon-link"></i>Read More</div>
</footer>
</article>
<!-- blogpost end -->
</div>
<!-- masonry grid item end -->
<!-- masonry grid item start -->
<div class="masonry-grid-item col-sm-6 col-md-4">
<!-- blogpost start -->
<article class="blogpost shadow light-gray-bg bordered object-non-visible" data-animation-effect="fadeInUpSmall" data-effect-delay="100">
<div class="audio-wrapper">
<iframe height="166" class="margin-clear" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/106329682&color=ff5500&auto_play=false&hide_related=false&show_artwork=true&show_comments=true&show_user=true&show_reposts=false"></iframe>
</div>
<header>
<h2>Audio post</h2>
<div class="post-info">
<span class="post-date">
<i class="icon-calendar"></i>
<span class="day">08</span>
<span class="month">May 2015</span>
</span>
<span class="submitted"><i class="icon-user-1"></i> by John Doe</span>
<span class="comments"><i class="icon-chat"></i> 22 comments</span>
</div>
</header>
<div class="blogpost-content">
<p>Mauris dolor sapien, malesuada at interdum ut, hendrerit eget lorem. Nunc interdum mi neque, et sollicitudin purus fermentum ut. Suspendisse faucibus nibh odio, a vehicula eros pharetra in. Maecenas ullamcorper commodo rutrum. In iaculis lectus vel augue eleifend dignissim. Aenean viverra semper sollicitudin.</p>
</div>
<footer class="clearfix">
<div class="tags pull-left"><i class="icon-tags"></i> tag 1, tag 2, long tag 3</div>
<div class="link pull-right"><i class="icon-link"></i>Read More</div>
</footer>
</article>
<!-- blogpost end -->
</div>
<!-- masonry grid item end -->
<!-- masonry grid item start -->
<div class="masonry-grid-item col-sm-6 col-md-4">
<!-- blogpost start -->
<article class="blogpost shadow light-gray-bg bordered object-non-visible" data-animation-effect="fadeInUpSmall" data-effect-delay="100">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/v1uyQZNg2vE"></iframe>
</div>
<header>
<h2>Blogpost with embedded youtube video</h2>
<div class="post-info">
<span class="post-date">
<i class="icon-calendar"></i>
<span class="day">07</span>
<span class="month">May 2015</span>
</span>
<span class="submitted"><i class="icon-user-1"></i> by John Doe</span>
<span class="comments"><i class="icon-chat"></i> 22 comments</span>
</div>
</header>
<div class="blogpost-content">
<p>Mauris dolor sapien, malesuada at interdum ut, hendrerit eget lorem. Nunc interdum mi neque, et sollicitudin purus fermentum ut. Suspendisse faucibus nibh odio, a vehicula eros pharetra in. Maecenas ullamcorper commodo rutrum. In iaculis lectus vel augue eleifend dignissim.</p>
</div>
<footer class="clearfix">
<div class="tags pull-left"><i class="icon-tags"></i> tag 1, tag 2, long tag 3</div>
<div class="link pull-right"><i class="icon-link"></i>Read More</div>
</footer>
</article>
<!-- blogpost end -->
</div>
<!-- masonry grid item end -->
<!-- masonry grid item start -->
<div class="masonry-grid-item col-sm-6 col-md-4">
<!-- blogpost start -->
<article class="blogpost shadow light-gray-bg bordered object-non-visible" data-animation-effect="fadeInUpSmall" data-effect-delay="100">
<div class="overlay-container">
<img src="images/blog-3.jpg" alt="">
<a class="overlay-link" href="blog-post.html"><i class="fa fa-link"></i></a>
</div>
<header>
<h2>Nunc interdum mi neque</h2>
<div class="post-info">
<span class="post-date">
<i class="icon-calendar"></i>
<span class="day">07</span>
<span class="month">May 2015</span>
</span>
<span class="submitted"><i class="icon-user-1"></i> by John Doe</span>
<span class="comments"><i class="icon-chat"></i> 22 comments</span>
</div>
</header>
<div class="blogpost-content">
<p>Mauris dolor sapien, malesuada at interdum ut, hendrerit eget lorem. Nunc interdum mi neque, et sollicitudin purus fermentum ut. Suspendisse faucibus nibh odio, a vehicula eros pharetra in. Maecenas ullamcorper commodo rutrum. In iaculis lectus vel augue eleifend dignissim. Aenean viverra semper sollicitudin.</p>
</div>
<footer class="clearfix">
<div class="tags pull-left"><i class="icon-tags"></i> tag 1, tag 2, long tag 3</div>
<div class="link pull-right"><i class="icon-link"></i>Read More</div>
</footer>
</article>
<!-- blogpost end -->
</div>
<!-- masonry grid item end -->
<!-- masonry grid item start -->
<div class="masonry-grid-item col-sm-6 col-md-4">
<!-- blogpost start -->
<article class="blogpost shadow light-gray-bg bordered object-non-visible" data-animation-effect="fadeInUpSmall" data-effect-delay="100">
<div class="overlay-container">
<img src="images/blog-4.jpg" alt="">
<a class="overlay-link" href="blog-post.html"><i class="fa fa-link"></i></a>
</div>
<header>
<h2>Distinctio magni aut illum</h2>
<div class="post-info">
<span class="post-date">
<i class="icon-calendar"></i>
<span class="day">06</span>
<span class="month">May 2015</span>
</span>
<span class="submitted"><i class="icon-user-1"></i> by John Doe</span>
<span class="comments"><i class="icon-chat"></i> 22 comments</span>
</div>
</header>
<div class="blogpost-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio magni aut illum animi laboriosam esse quidem sit illo fugit est culpa facilis amet, ab doloremque magnam, sapiente architecto natus. Voluptatem esse optio explicabo dolore impedit debitis deleniti porro doloribus provident perferendis nostrum quasi nobis magni atque mollitia, quas, quos corporis!</p>
</div>
<footer class="clearfix">
<div class="tags pull-left"><i class="icon-tags"></i> tag 1, tag 2, long tag 3</div>
<div class="link pull-right"><i class="icon-link"></i>Read More</div>
</footer>
</article>
<!-- blogpost end -->
</div>
<!-- masonry grid item end -->
<!-- masonry grid item start -->
<div class="masonry-grid-item col-sm-6 col-md-4">
<!-- blogpost start -->
<article class="blogpost shadow light-gray-bg bordered object-non-visible" data-animation-effect="fadeInUpSmall" data-effect-delay="100">
<header>
<h2>Voluptatem esse optio explicabo dolore impedit</h2>
<div class="post-info">
<span class="post-date">
<i class="icon-calendar"></i>
<span class="day">06</span>
<span class="month">May 2015</span>
</span>
<span class="submitted"><i class="icon-user-1"></i> by John Doe</span>
<span class="comments"><i class="icon-chat"></i> 22 comments</span>
</div>
</header>
<div class="blogpost-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio magni aut illum animi laboriosam esse quidem sit illo fugit est culpa facilis amet, ab doloremque magnam, sapiente architecto natus. Voluptatem esse optio explicabo dolore impedit debitis deleniti porro doloribus provident perferendis nostrum quasi nobis magni atque mollitia, quas, quos corporis!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto veniam, perspiciatis libero quasi, iusto delectus sed accusantium fugit inventore iure molestiae amet voluptatem, ut dolorem ex dolorum ea impedit quae!</p>
</div>
<footer class="clearfix">
<div class="tags pull-left"><i class="icon-tags"></i> tag 1, tag 2, long tag 3</div>
<div class="link pull-right"><i class="icon-link"></i>Read More</div>
</footer>
</article>
<!-- blogpost end -->
</div>
<!-- masonry grid item end -->
<!-- masonry grid item start -->
<div class="masonry-grid-item col-sm-6 col-md-4">
<!-- blogpost start -->
<article class="blogpost shadow light-gray-bg bordered object-non-visible" data-animation-effect="fadeInUpSmall" data-effect-delay="100">
<div class="overlay-container">
<img src="images/blog-1.jpg" alt="">
<a class="overlay-link" href="blog-post.html"><i class="fa fa-link"></i></a>
</div>
<header>
<h2>Successful business ideas</h2>
<div class="post-info">
<span class="post-date">
<i class="icon-calendar"></i>
<span class="day">06</span>
<span class="month">May 2015</span>
</span>
<span class="submitted"><i class="icon-user-1"></i> by John Doe</span>
<span class="comments"><i class="icon-chat"></i> 22 comments</span>
</div>
</header>
<div class="blogpost-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto veniam, perspiciatis libero quasi, iusto delectus sed accusantium fugit inventore iure molestiae amet voluptatem, ut dolorem ex dolorum ea impedit quae!</p>
</div>
<footer class="clearfix">
<div class="tags pull-left"><i class="icon-tags"></i> tag 1, tag 2, long tag 3</div>
<div class="link pull-right"><i class="icon-link"></i>Read More</div>
</footer>
</article>
<!-- blogpost end -->
</div>
<!-- masonry grid item end -->
</div>
<!-- masonry grid end -->
</div>
<!----- home banner ---->
<div class="home-slider">
<ngx-slick class="carousel" [config]="slideConfig">
<div ngxSlickItem *ngFor="let slide of slides" class="slide">
<div class="banner">
<img class="img-responsive" src="{{ slide.img }}" alt="" width="100%">
</div>
</div>
</ngx-slick>
</div>
<!----==== 3 content ----==================--->
<div class="dis_content">
<div class="container">
<div class="col-md-4 text-center">
<i class="fa fa-google-wallet " aria-hidden="true"></i>
<h4>Discount System</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id feugiat tellus. </p>
</div>
<div class="col-md-4 text-center">
<i class="fa fa-codepen " aria-hidden="true"></i>
<h4>Free Delivery</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id feugiat tellus. </p>
</div>
<div class="col-md-4 text-center">
<i class="fa fa-circle-o-notch " aria-hidden="true"></i>
<h4>Support 24/7</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id feugiat tellus.</p>
</div>
</div>
</div>
<!---====== 4 images =============------------>
<div class="ldy-page">
<div class="container-fluid">
<div class="col-md-3">
<div class="ldy1">
</div>
</div>
<div class="col-md-3">
<div class="ldy1">
</div>
</div>
<div class="col-md-3">
<div class="ldy1">
</div>
</div>
<div class="col-md-3">
<div class="ldy1">
</div>
</div>
</div>
</div>
<owl-carousel [options]="{items: 3, dots: false, navigation: false}" <!-- If images array is dynamically changing pass this array to [items] input -->
[items]="images"
<!-- classes to be attached along with owl-carousel class -->
[carouselClasses]="['owl-theme', 'row', 'sliding']">
<div class="item" *ngFor="let sliding of slidings;let i = index">
<div class="thumbnail-image" [ngStyle]="{'background': 'url('abc.jpg')no-repeat scroll center center / 80px 80px'}"></div>
</div>
</owl-carousel>
How to set the image and background image path in my page? I set the image on home.components.ts file. How to set the background image and image path in Angular 6?
[{'background': 'url('abc.jpg')no-repeat scroll center center / 80px 80px'}] in ng:///AppModule/HomeComponent.html#73:38 (" class="item" *ngFor="let sliding of slidings;let i = index">
use it to wantet selector
[style.backgroundImage]="'url('+ imagSource +')'"
in css:
.item{
background-position: center;
background-repeat: no-repeat;
.
.
.
}
Below answer worked for angular 6.
In app.component.css
.image{
height:40em;
background-size:cover;
width:auto;
background-image:url('copied image address');
background-position:50% 50%;
}
Also in app.component.html simply add as below
<div class="image">
Your content
</div>
This way I was able to set background image in Angular 6.
I am trying to implement a solution that required to toggle between 2 independent panels, Sign In and Sign Up.
Each panel should have the following characteristics:
1- They are only displayed when a link in the navbar is clicked;
2- Only 1 of them should be displayed at any given moment, allowing to toggle between the links that activate them;
3- They should have a "X" link at the top right corner that allow to close the panel;
4- Either panel will retract if User click in the page content.
Here's the HTML:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-default">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a id="home"><!--HOME ANCHOR--></a>
<img src="http://placehold.it/190x40" style="padding-top: 5px;" />
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-default">
<ul class="nav navbar-nav navbar-right">
<li><a id="toggleSignInPanel" class="no-border noto-sans" href="#SignInPanel"><i class="fa fa-tablet padding-right-five-px"></i>Sign In</a></li>
<li><a id="toggleSignUpPanel" class="no-border noto-sans" href="#SignUpPanel"><i class="fa fa-tablet padding-right-five-px"></i>Sign Up</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<br />
<br />
<div id="upper">
<div id="SignInPanel">
<div class="clearfix"></div>
<div class="col-lg-12">
<div class="col-md-6 col-sm-6"><h2>Sign In Left Panel</h2><img class="responsive-img" src="http://placehold.it/400x250" alt="Test Image 1" /></div>
<div class="col-md-6 col-sm-6"><h2>Sign In Right Panel</h2><img class="responsive-img" src="http://placehold.it/400x250" alt="Test Image 2" /></div>
</div>
<div class="clearfix"></div>
</div>
<div id="SignUpPanel">
<div class="clearfix"></div>
<div class="col-lg-12">
<div class="col-md-6 col-sm-6"><h2>Sign Up Left Panel</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a mauris et nulla facilisis eleifend. Sed metus orci, vulputate sit amet malesuada id, luctus vestibulum lacus. Sed faucibus, nibh vel faucibus porta, lectus lacus suscipit metus, ut posuere nulla dolor porttitor erat.</p></div>
<div class="col-md-6 col-sm-6"><h2>Sign Up Right Panel</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a mauris et nulla facilisis eleifend. Sed metus orci, vulputate sit amet malesuada id, luctus vestibulum lacus. Sed faucibus, nibh vel faucibus porta, lectus lacus suscipit metus, ut posuere nulla dolor porttitor erat.</p></div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div id="lower">
<p>This is the remaining page content that should be pushed down to allow for either Sign In or Sign Up panel contents to be displayed accordingly. This is the remaining page content that should be pushed down to allow for either Sign In or Sign Up panel contents to be displayed accordingly.</p>
</div>
Here's the Javascript:
//Toggle Sign In Panel
$(document).ready(function(){
$("#toggleSignInPanel").click(function(){
$("#SignInPanel").slideToggle("slow");
});
});
//Toggle Sign Up Panel
$(document).ready(function(){
$("#toggleSignUpPanel").click(function(){
$("#SignUpPanel").slideToggle("slow");
});
});
This is the JSFiddle that I have have so far: http://jsfiddle.net/UXEngineer/qawccvbs/1/
Would anyone be able to help me out with this issue? Thank you!
The simplest solution would be to just call the api function to close all the other panels every time you toggle a new one open. (Also, you don't need to wrap every function in a new document ready call.)
//Toggle Panel
$(document).ready(function () {
$("#toggleSignInPanel").click(function () {
$("#SignInPanel").slideToggle("slow");
$("#SignUpPanel").slideUp("slow");
});
$("#toggleSignUpPanel").click(function () {
$("#SignInPanel").slideUp("slow");
$("#SignUpPanel").slideToggle("slow");
});
});
here's a new fiddle that closes the other panel when opening a new one:
http://jsfiddle.net/za1L1m77/
[edit:]
closing button is simple, you could just do the same thing as above:
$("#closingButton").click(function () {
$("#SignInPanel").slideUp("slow");
$("#SignUpPanel").slideUp("slow");
});
now, functionality for "click outside" of element is a little trickier because you have to listen to a click event on every element other than the toggles you have. One simple way to do this is to put a "toggle closed" event listener on window as a whole, and stop propogation on your toggle elements. Just keep in mind that you won't be able to put event listeners on parents of elements with stop propogation applied in the future and expect them to work:
$('html').click(function() {
$("#SignInPanel").slideUp("slow");
$("#SignUpPanel").slideUp("slow");
});
plus add this to all the toggles:
$("#toggleSignUpPanel").click(function (e) {
e.stopPropagation();
$("#SignInPanel").slideUp("slow");
$("#SignUpPanel").slideToggle("slow");
});
I was here this morning asking on how to get started on bootstrap 3, some good fellows guided and supported me.
Attached is a picture of the progress I have made to far, I know there's still long way to go and I'm still learning.
But right now, I'm stuck on this jumbotron part. I am trying to make the text and the picture to be horizontally align but I have been battling with it for hours. Can some one please help me out on how to go about it. Also, I will like to change the background color from what it is now to a different color.
Sorry I just realized that I'm not yet eligible to post and image.
Here is the script:
<!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="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Jumbotron Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="jumbotron.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Techy Support</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<form class="navbar-form navbar-right" role="form">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div><!--/.navbar-collapse -->
</div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div id="home-page">
<section class="jumbotron">
<div class="container">
<h1 class="mission-statement">
Making IT at home <br />
Easy and Affordable
<div class="text-right">
<img class="img-rounded" style="width: 200px;" src="bac.jpg" class="img-responsive center-block" />
</div>
</h1>
</div>
</section>
</div>
<!-- <div class="jumbotron">
<div class="container">
<h1>Making IT at home <br> Easy and Affordable!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>
<img class="jumbotron-image hidden-sm hidden-xs hidden-md" src="bac.jpg" />
</div>
</div> -->
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
</div>
<hr>
<footer>
<p>© Company 2014</p>
</footer>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
I'm sure some would understand the challenge I'm facing.
Thanks
You can use the col-**-* classes provided by bootstrap for your layout. For background color, apply a background-color style to your jumbotron element.
<div id="home-page">
<section class="jumbotron" style="background-color:#336699">
<div class="container">
<div class="col-xs-6">
<h1 class="mission-statement">
Making IT at home <br />
Easy and Affordable
</h1>
</div>
<div class="col-xs-6">
<img class="img-rounded" style="width: 200px;" src="mac.jpg" class="img-responsive center-block" />
</div>
</div>
</section>
</div>
http://jsfiddle.net/d5x2ho7r/1/
I am making a test website for a future project and I am having jQuery issues. It is a static HTML5 website with a social widget, when I remove one of the jQuery lines, the site loses its styling and the widget looks pretty. When I add that jQuery I removed, the site will look good, but the widget will look really bad. How can I fix this conflict issue? I will add the code to the main website on here:
<!DOCTYPE HTML>
<html><head>
<title>test site</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.dropotron.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-layers.min.js"></script>
<script src="js/init.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel.css" />
<link rel="stylesheet" href="css/style.css" />
</noscript>
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
<!-- Social Widget Goodies Start -->
<link rel="stylesheet" type="text/css" href="css/dcsmt.css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="inc/js/jquery.plugins.js"></script>
<script type="text/javascript" src="inc/js/jquery.site.js"></script>
<script type="text/javascript" src="js/jquery.social.media.tabs.1.7.1.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('#social-tabs').dcSocialTabs({
widgets: 'twitter,facebook',
twitterId: '20782546',
facebookId: '69431101263',
fblikeId: '69431101263',
fbrecId: 'https://www.facebook.com/ArkansasState',
tweetId: '20782546',
autoClose: true,
facebook: {
text: 'content'
}
});
});
</script>
<!-- Social Widget Goodies End... -->
</head>
<body class="homepage">
<!-- Header -->
<div id="header-wrapper">
<div id="header" class="container">
<!-- Logo -->
<h1 id="logo"><img style="margin-top:10px;" src="images/logo_tiny.png" width="147" height="50" alt="logo"></h1>
<!-- Nav -->
<nav id="nav">
<ul>
<li>
Main Menu
<ul>
<li>Lorem ipsum dolor</li>
<li>Magna phasellus</li>
<li>Etiam dolore nisl</li>
<li>
Phasellus consequat
<ul>
<li>Lorem ipsum dolor</li>
<li>Phasellus consequat</li>
<li>Magna phasellus</li>
<li>Etiam dolore nisl</li>
</ul>
</li>
<li>Veroeros feugiat</li>
</ul>
</li>
<li>Link#01</li>
<li class="break">Link#02</li>
<li>Link#03</li>
</ul>
</nav>
</div>
<!-- Hero -->
<section id="hero" class="container">
<header>
<h2>ASTATE EMERGENCY PORTAL
<br/>
our main website is currently down</h2>
</header>
<p>Please scroll down and use the links provided in this portal
to access external applications like<br> e-mail, blackboard, etc. etc.</p>
<ul class="actions">
<li>www.astate.edu</li>
</ul>
</section>
</div>
<!-- Features 1 -->
<div class="wrapper">
<div class="container">
<div class="row">
<section class="6u feature">
<div class="image-wrapper first">
<img src="images/pic01.jpg" alt="" />
</div>
<header>
<h2>For Students<br />
Access your E-mail Account Here</h2>
</header>
<p>Lorem ipsum dolor sit amet consectetur et sed adipiscing elit. Curabitur vel
sem sit dolor neque semper magna. Lorem ipsum dolor sit amet consectetur et sed
adipiscing elit. Curabitur vel sem sit.</p>
<ul class="actions">
<li>Enter</li>
</ul>
</section>
<section class="6u feature">
<div class="image-wrapper">
<img src="images/pic02.jpg" alt="" />
</div>
<header>
<h2>For Faculty & Staff<br />
Access your E-mail Account here</h2>
</header>
<p>Lorem ipsum dolor sit amet consectetur et sed adipiscing elit. Curabitur vel
sem sit dolor neque semper magna. Lorem ipsum dolor sit amet consectetur et sed
adipiscing elit. Curabitur vel sem sit.</p>
<ul class="actions">
<li>Enter</li>
</ul>
</section>
</div>
</div>
</div>
<!-- Promo -->
<div id="promo-wrapper">
<section id="promo">
<h2>Live social updates</h2>
Do not press
</section>
</div>
<!-- Features 2 -->
<div class="wrapper">
<section class="container">
<header class="major">
<h2>Sed magna consequat lorem curabitur tempus</h2>
<p>Elit aliquam vulputate egestas euismod nunc semper vehicula lorem blandit</p>
</header>
<div class="row features">
<section class="4u feature">
<div class="image-wrapper first">
<img src="images/pic03.jpg" alt="" />
</div>
<p>Lorem ipsum dolor sit amet consectetur et sed adipiscing elit. Curabitur
vel sem sit dolor neque semper magna lorem ipsum.</p>
</section>
<section class="4u feature">
<div class="image-wrapper">
<img src="images/pic04.jpg" alt="" />
</div>
<p>Lorem ipsum dolor sit amet consectetur et sed adipiscing elit. Curabitur
vel sem sit dolor neque semper magna lorem ipsum.</p>
</section>
<section class="4u feature">
<div class="image-wrapper">
<img src="images/pic05.jpg" alt="" />
</div>
<p>Lorem ipsum dolor sit amet consectetur et sed adipiscing elit. Curabitur
vel sem sit dolor neque semper magna lorem ipsum.</p>
</section>
</div>
<ul class="actions major">
<li>Elevate my awareness</li>
</ul>
</section>
</div>
<!-- Footer -->
<div id="footer-wrapper">
<div id="footer" class="container">
<header class="major">
<h2>Keep in touch with us</h2>
<p>Lorem ipsum dolor sit amet consectetur et sed adipiscing elit. Curabitur vel sem sit<br />
dolor neque semper magna lorem ipsum feugiat veroeros lorem ipsum dolore.</p>
</header>
<div class="row">
<section class="6u">
<form method="post" action="#">
<div class="row collapse-at-2 half">
<div class="6u">
<input name="name" placeholder="Name" type="text" />
</div>
<div class="6u">
<input name="email" placeholder="Email" type="text" />
</div>
</div>
<div class="row half">
<div class="12u">
<textarea name="message" placeholder="Message"></textarea>
</div>
</div>
<div class="row half">
<div class="12u">
<ul class="actions">
<li><input type="submit" value="Send Message" /></li>
<li><input type="reset" value="Clear form" /></li>
</ul>
</div>
</div>
</form>
</section>
<section class="6u">
<div class="row collapse-at-2 flush">
<ul class="divided icons 6u">
<li class="icon fa-twitter"><span class="extra">twitter.com/</span>untitled</li>
<li class="icon fa-facebook"><span class="extra">facebook.com/</span>untitled</li>
<li class="icon fa-dribbble"><span class="extra">dribbble.com/</span>untitled</li>
</ul>
<ul class="divided icons 6u">
<li class="icon fa-instagram"><span class="extra">instagram.com/</span>untitled</li>
<li class="icon fa-youtube"><span class="extra">youtube.com/</span>untitled</li>
<li class="icon fa-pinterest"><span class="extra">pinterest.com/</span>untitled</li>
</ul>
</div>
</section>
</div>
</div>
<div id="copyright" class="container">
<ul class="menu">
<li>©2014 - ASTATE Emergency Portal. All rights reserved.</li>
</ul>
</div>
</div>
</body>
<div id="social-tabs"></div>
</html>
This is caused by the ordering of your scripts. Rather than just removing js/jquery.min.js, you should move your other jQuery script to this position:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script src="js/jquery.dropotron.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-layers.min.js"></script>
...
...otherwise the JavaScript files located above this jQuery include's current position may not wait for jQuery to load before attempting to execute then not-yet-present jQuery calls.