SlideIn/Out content by data-attribute? - javascript

I use a simple slideIn/Out script by clicking on a link. My problem, if I click on a link to slideIN the content, all other content-boxes also slide in their content, because there is no attribute with which they can seperate the content boxes. So I think the "data-attribute" will be a good way?
The plan, the script should compare the "data-attribute" from the link with the "data-attribute" from the content:
<div class="button" data-filter="1">Show</div>
<div class="text" data-filter="1">Bla1 bla1 bla1</div>
<div class="button" data-filter="2">Show</div>
<div class="text" data-filter="2">Bla2 bla2 bla2</div>
Is there a simple way?
That is my fiddle


First, get the clicked attribute value with attr(). Then use it in the proceeding selector to find the .text element with that attribute value
var attrVal = $(this).attr('data-filter');
$box = $('.text[data-filter="'+attrVal+'"]');
Alternatively, you can use .prev() like
$box = $(this).prev();
This works because this will get you the immediate preceding element(which happens to be .text).
$(function(){
$(".button").click(function(){
var attrVal = $(this).attr('data-filter');
$box = $(this).prev();
minimumHeight = 100;
// get current height
currentHeight = $box.innerHeight();
// get height with auto applied
autoHeight = $box.css('height', 'auto').innerHeight();
// reset height and revert to original if current and auto are equal
$box.css('height', currentHeight).animate({
height: (currentHeight == autoHeight ? minimumHeight : autoHeight)
})
});
})
.text{
height:100px;
overflow:hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="text" data-filter="1">bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
</div>
<div class="button" data-filter="1">Show</div><br /><br />
<div> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div><br /><br />
<div class="text" data-filter="2">bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
</div>
<div class="button" data-filter="2">Show</div><br /><br />
<div class="text" data-filter="3">bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
</div>
<div class="button" data-filter="3">Show</div>


You can use data-* attributes, but .prev() can also be used.
$box = $(this).prev(".text");
Updated Fiddle
or with data-filter use attribute based selector with .data(),
$box = $(".text[data-filter="+$(this).data('filter')+"]");


You can simply wrap the necessary .text divs and buttons into separate divs and then use siblings to target the correct text div.
http://jsfiddle.net/karanmhatre/dw6936L3/9/
HTML
<div>
<div class="text" data-filter="1">bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
</div>
<div class="button" data-filter="1">Show</div><br /><br />
</div>
<div> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div><br /><br />
<div>
<div class="text" data-filter="2">bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
</div>
<div class="button" data-filter="2">Show</div><br /><br />
</div>
<div>
<div class="text" data-filter="3">bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
<br />
bla bla bla bla
</div>
<div class="button" data-filter="3">Show</div>
</div>
JS
$(function(){
$(".button").click(function(){
$box = $(this).siblings(".text");
minimumHeight = 100;
// get current height
currentHeight = $box.innerHeight();
// get height with auto applied
autoHeight = $box.css('height', 'auto').innerHeight();
// reset height and revert to original if current and auto are equal
$box.css('height', currentHeight).animate({
height: (currentHeight == autoHeight ? minimumHeight : autoHeight)
});
});
})
Feel like this is a far cleaner solution as opposed to trying to detect them using data filters.


You can use .prev() to refer to immediate previous sibling from the current element.
I would also like to suggest you to enclose the related dom elements within a container div as it makes the DOM easy to understand & looks well organised.
JS code:
$(function () {
$(".button").click(function () {
$box = $(this).prev('.text'); //get previous sibling
minimumHeight = 100;
// get current height
currentHeight = $box.innerHeight();
// get height with auto applied
autoHeight = $box.css('height', 'auto').innerHeight();
// reset height and revert to original if current and auto are equal
$box.css('height', currentHeight).animate({
height: (currentHeight == autoHeight ? minimumHeight : autoHeight)
});
});
});
Live demo # JSFiddle :
http://jsfiddle.net/dreamweiver/dw6936L3/8/

Related

How to Populate HTML page from external page divs content using jquery or js

I have a webpage which will display only the 3 first articles for each section (Politics, economy etc.) in the dedicated grid for each section,
Also the content HTML pages are external (politics.html, economy.html etc)
These external pages are updated by an external app and contains hundreds of articles (divs) as latest is the first on top of page.
So in my index.php page i want to put a grid for each category that displays only the 3 latest articles fro each category, here's my code for index.php :
<div class="POLSection">
<div class="Article" id="ArtPOL1>
<span class="ArticleTitle"></span>
</div>
<div class="Article" id="ArtPOL2>
<span class="ArticleTitle"></span>
</div>
<div class="Article" id="ArtPOL3>
<span class="ArticleTitle"></span>
</div>
</div>
<div class="ECOSection">
<div class="Article" id="ArtECO1>
<span class="ArticleTitle"></span>
</div>
<div class="Article" id="ArtECO2>
<span class="ArticleTitle"></span>
</div>
<div class="Article" id="ArtECO3>
<span class="ArticleTitle"></span>
</div>
</div>
And this is my code for the external content pages, for example politics.html :
<div id="artpol10">
<span class="artPolTitle">Joe Biden to bla bla bla ...</span>
</div>
<div id="artpol9">
<span class="artPolTitle">Joe Biden to bla bla bla ...</span>
</div>
<div id="artpol8">
<span class="artPolTitle">Joe Biden to bla bla bla ...</span>
</div>
<div id="artpol7">
<span class="artPolTitle">Joe Biden to bla bla bla ...</span>
</div>
<div id="artpol6">
<span class="artPolTitle">Joe Biden to bla bla bla ...</span>
</div>
<div id="artpol5">
<span class="artPolTitle">Joe Biden to bla bla bla ...</span>
</div>
etc. ..............
in this case i tried to load on index.php grid for politics section lates articles so 10, 9 and 8 to display them when page load ...
I tried with jquery.load but the problem is it needs the exact 3 IDs and in my case the IDs latest changes every time the app update the articles page, so it could be 10,9,8 or 11,10,9 or 23,22,21
What the best way to do this if it's not .load
Is there a way to do this by selecting nth child with jquery or js, so i can choose 1st, 2nd and 3rd child ?
Thanks.

if you can change the code for the external content pages, then add a class like "article" for the div and then you can use the LT selector on the "article" selection

Load file into CKEditor textarea via javascript, PHP and select dropdown

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...

jQuery toggle onclick on parent element

How can I hide the content of .ab-content if I click on .ab-head? Also hide when I click on ab-head and the content is visible. With the code I have right now, it almost works but when I click one of them all the content is toggled.
How can I maintain the function only on the parent div? Any ideas?
$(document).ready(function(){
$(".ab-head").click(function(){
$(".ab-content").toggle();
});
$(".ab-content").click(function(){
$(".ab-content").toggle();
});
});
<div class="ab-container">
<div class="ab-head">
<h1>some name 1</h1>
</div>
<div class="ab-content">
<p>some text bla bla bla 1</p>
</div>
</div>
<div class="ab-container">
<div class="ab-head">
<h1>some name 2</h1>
</div>
<div class="ab-content">
<p>some text bla bla bla 2</p>
</div>
</div>
Example: https://jsfiddle.net/yppn4nex/

Just toggle the next instance of .ab-content:
$(".ab-head").click(function(){
$(this).next(".ab-content").toggle();
});
You can also reference the current <div class="ab-content"> that the user has clicked on using the this keyword:
$(".ab-content").click(function(){
$(this).toggle();
});
Although if you are wanting to hide the content when you click on it, it's probably better to do something along the lines of what itsgoingdown suggests.
Quick demo:
$(".ab-container").on("click", function(){
$(this).find(".ab-content").toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ab-container">
<div class="ab-head">
<h1>some name 1</h1>
</div>
<div class="ab-content">
<p>some text bla bla bla 1</p>
</div>
</div>
<div class="ab-container">
<div class="ab-head">
<h1>some name 2</h1>
</div>
<div class="ab-content">
<p>some text bla bla bla 2</p>
</div>
</div>

You can do it like this with event delegation: Check the below snippet
$('.ab-container').on('click', '.ab-content ,.ab-head', function() {
$(this).closest('.ab-container').find('.ab-content').toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ab-container">
<div class="ab-head">
<h1>some name 1</h1>
</div>
<div class="ab-content">
<p>some text bla bla bla 1</p>
</div>
</div>
<div class="ab-container">
<div class="ab-head">
<h1>some name 2</h1>
</div>
<div class="ab-content">
<p>some text bla bla bla 2</p>
</div>
</div>

jQuery file conflict

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.

JQuery changing class

I would like to adapt the initial page of my mvc 5 web site (bootstrap template) after the user has logged on. After the login a new section will appear on the main page and I would like to change the class of all the other tags in order to fit better the content of the home page.
Here is the code I've added to my page:
#using Microsoft.AspNet.Identity
#{
ViewBag.Title = "Home Page";
}
<div class="jumbotron" style="background-color: lightblue">
<table>
<tr>
<td style="width: auto"><img src="~/Images/aaaa.png" /></td>
<td style="width: 5%"> </td>
<td align="left" valign="bottom"><h1>Title</h1></td>
</tr>
<tr><td colspan="3"> </td></tr>
<tr>
<td colspan="3" align="left"><p class="lead">Description</p></td>
</tr>
</table>
</div>
<div class="row">
<div id="div1" class="col-md-4">
<h2>Menu1</h2>
<p>
BLA BLA BLA
</p>
<p>#Html.ActionLink("Leggi >>>", "Action1", "Controller1", new { }, new { target = "_self" })</p>
</div>
<div id="div2" class="col-md-4">
<h2>Menu2</h2>
<p>BLA BLA BLA</p>
<p>#Html.ActionLink("Leggi >>>", "Action2", "Controller2", new { }, new { target = "_self" })</p>
</div>
<div id="div3" class="col-md-4">
<h2>Menu 3</h2>
<p>BLA BLA BLA</p>
<p>#Html.ActionLink("Leggi >>>", "Action3", "Controller3", new { }, new { target = "_self" })</p>
</div>
#{
if (Request.IsAuthenticated)
{
<div id="div4" class="col-md-3">
<h2>Menu 4</h2>
<p>BLA BLA BLA BLA</p>
<p>Leggi >>></p>
</div>
#Scripts.Render("~/bundles/jquery")
<script>
$(document).ready(function () {
$(".col-mod-4").removeClass("col-mod-4").addClass("col-mod-3");
});
</script>
}
}
</div>
The problem is that this code doesn't work. The class applied to objects is not changed.
What am I doing wrong? Please, someone can help me?
Thanks in advance.

You are looking for class in jQuery that is not present in html code. In html you have col-md-4 for instance <div id="div1" class="col-md-4"> instead of col-mod-4 which you are looking in jquery code. Check what class you have in css and change the html/css accordingly. I assume you have col-md-3 instead of col-mod-3
Change
$(".col-mod-4").removeClass("col-mod-4").addClass("col-mod-3");
To
$(".col-md-4").removeClass("col-md-4").addClass("col-md-3");

You may also try with following:
$(".oldclass").attr('class','').addClass("newclass");

Categories

Resources