I wrote js code in MyScript.js and how I can make my script run when page load?
and how I can make script file run in my mvc?
I hope I can get a precise answer and understand that good.
When I did on regular html and not in mvc it works very well
the two js file i would like to use are
1. jquery.zaccordion.js
2. MyScript.js
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery-1.8.2.js")
#Scripts.Render("~/bundles/jquery.zaccordion.js")
#Scripts.Render("~/bundles/MyScript.js")
#RenderSection("scripts", required: false)
#RenderSection("MyScript", required: false)
</head>
<body>
<header>
<div class="site-logo">
<img class="img-logo-size" src="Images/logo.png" alt="" />
</div>
<div class="manu">
<div class="nav-tabs">
<div class="hoverBtn">#Html.ActionLink("Home", "Index", "Home")</div>
<div class="hoverBtn">#Html.ActionLink("About", "About", "Home")</div>
<div class="hoverBtn">#Html.ActionLink("Contact","Contact","Home")</div>
</div>
</div>
<div class="slider-border">
<ul id="splash">
<li>
<img class="img-size" src="../Images/TM-front-image-World-network.jpg" alt="" />
<div>
<strong>Old School Diner</strong>
<p class="splash-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porttitor lacus sollicitudin ligula sagittis a ultricies nulla ultricies. Ut odio nisi, posuere sed blandit at, bibendum non dolor.</p>
</div>
</li>
<li>
<img class="img-size" src="../Images/banner-your-it-11.jpg" alt="" />
<div>
<strong>A Day at the Pool</strong>
<p class="splash-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in condimentum sem. Aenean faucibus dignissim auctor. In ut libero vitae augue laoreet iaculis at a tellus.</p>
</div>
</li>
<li>
<img class="img-size" src="../Images/network1.png" alt="" />
<div>
<strong>Fill it Up!</strong>
<p class="splash-text">Duis viverra velit orci. Sed vestibulum mi nec est imperdiet sed ullamcorper augue molestie. Donec ultrices facilisis erat at porttitor.</p>
</div>
</li>
<li>
<img class="img-size" src="../Images/1338453958network_header.jpg" alt="" />
<div>
<strong>Going for a Drive</strong>
<p class="splash-text">Phasellus sed lectus nisl, eget cursus eros. Suspendisse posuere orci eu lorem luctus et porta nunc posuere. Cras sed lectus vitae leo accumsan adipiscing.</p>
</div>
</li>
</ul>
</div>
</header>
<div class="page-wrap">
#RenderBody()
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
#RenderSection("MyScript", required: false)
</div>
<footer>
<div class="site-footer">
<div class="float-left">
<p>©#DateTime.Now.Year-Erez Gershon</p>
</div>
</div>
</footer>
Thanks for all
For this line to work #Scripts.Render("~/bundles/MyScript.js") you have to register MyScript.js to bundle in BundleConfig.cs file.
bundles.Add(new ScriptBundle("~/bundles/MyScript.js").Include(
"~/Scripts/MyScript.js")); // make sure that this is your path to MyScript.js
If you want to use #RenderSection("MyScript", required: false), it's a section that will be rendered in a view, like below. But if you want to add MyScript.js you have to include that line of code inside the section.
#section MyScript {
#Scripts.Render("~/bundles/MyScript.js")
}
Note: Every new script you add in your project that you want to use it with #Scripts.Render you have to include in BundleConfig.
Related
I want to swap 2 divs using jquery but when I tried to swap it using insertAfter() in gets inserted twice. Just want to specify that each parent element needs to only swap the divs once.
So in each parent element wcmsd-step-container I need to insert the wcmsd-checkbox-item-description class below the wcmsd-step-title class. But it gets duplicated twice when swapping it.
Can anyone point what's the right function to use on my jQuery code?
jQuery(document).ready(function() {
jQuery('.wcmsd-step-container').each(function() {
jQuery('.wcmsd-checkbox-item-description').insertAfter(jQuery('.wcmsd-step-title'));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--Step 1-->
<div class="wcmsd-step-container">
<h2 class="wcmsd-step-title">What type of photo do you want?</h2>
<div class="wcmsd-step-content">
<label class="wcmsd-checkbox-item-title">choose your photo</label>
<p class="wcmsd-checkbox-item-description">Select up to 122. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan faucibus proin nisi, risus vehicula. Fames metus, metus consectetur.</p>
</div>
</div>
<!--Step 2-->
<div class="wcmsd-step-container">
<h2 class="wcmsd-step-title">What type of video do you want?</h2>
<div class="wcmsd-step-content">
<label class="wcmsd-checkbox-item-title">choose your video</label>
<p class="wcmsd-checkbox-item-description">Select up to 322. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan faucibus proin nisi, risus vehicula. Fames metus, metus consectetur.</p>
</div>
</div>
Your code inside the loop has no relation to the loop, so it's just for (i=0;i<2;++i) with the inner code saying "take all descriptions and put them all after every title" - you get two because there's two, if you had 3, you'd get 3 after each title.
You need to use this inside the loop to ensure the correct elements are moving to the correct place.
$('.wcmsd-step-container').each(function() {
$(this).find('.wcmsd-checkbox-item-description').insertAfter($(this).find('.wcmsd-step-title'));
});
Updated snippet with a button to see before/after
$("#btn").click(() => {
$('.wcmsd-step-container').each(function() {
$(this).find('.wcmsd-checkbox-item-description').insertAfter($(this).find('.wcmsd-step-title'));
});
});
.wcmsd-step-content { background-color: yellow; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn">click me</button>
<!--Step 1-->
<div class="wcmsd-step-container">
<h2 class="wcmsd-step-title">What type of photo do you want?</h2>
<div class="wcmsd-step-content">
<label class="wcmsd-checkbox-item-title">choose your photo</label>
<p class="wcmsd-checkbox-item-description">Select up to 122. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan faucibus proin nisi, risus vehicula. Fames metus, metus consectetur.</p>
</div>
</div>
<!--Step 2-->
<div class="wcmsd-step-container">
<h2 class="wcmsd-step-title">What type of video do you want?</h2>
<div class="wcmsd-step-content">
<label class="wcmsd-checkbox-item-title">choose your video</label>
<p class="wcmsd-checkbox-item-description">Select up to 322. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan faucibus proin nisi, risus vehicula. Fames metus, metus consectetur.</p>
</div>
</div>
I am using below function to search in articles.html - My search bar is in the home page (index.html).
<div id="tfheader">
<form id="tfnewsearch" method="get" action="articles.html">
<input type="text" class="tftextinput" id="tftextinput" name="q" size="21" maxlength="120">
<input type="submit" value="search" class="tfbutton">
</form>
<div class="tfclear"></div>
</div>
<script>
var a = document.getElementById('tfnewsearch');
a.addEventListener('submit',function(e) {
e.preventDefault();
var b = document.getElementById('tftextinput').value;
window.location.href = 'articles.html'+b;
});
</script>
My requirement is when i type some character in search bar and hit enter. It will redirect me to article.html and search through whole content of article.html
Thanks for the help
<!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">
<title>Gomac Knowledgebase</title>
<!-- LOADING STYLESHEETS -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid featured-area-white-border">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="login-box border-right-1">
<i class="fa fa-key"></i> Login
</div>
<div class="login-box border-left-1 border-right-1">
<i class="fa fa-pencil"></i> Sign Up
</div>
</div>
</div>
</div>
</div>
<!-- LOGO -->
<div class="container">
<div class="row">
<div class="header">
<div class="logo">
<img src="images/logo.png" alt="logo">
</div>
</div>
</div>
</div>
<!-- END LOGO-->
<!-- TOP NAVIGATION -->
<div class="container-fluid">
<div class="navigation">
<div class="row">
<ul class="topnav">
<li></li>
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-book"></i> Knowledge Base</li>
<li><i class="fa fa-file-text-o"></i> Articles</li>
<li><i class="fa fa-lightbulb-o"></i> FAQ</li>
<li class="icon">
☰
</li>
</ul>
</div>
</div>
</div>
<!-- END TOP NAVIGATION -->
<!-- SEARCH FIELD AREA -->
<div class="searchfield bg-hed-six">
<div class="container" style="padding-top: 20px; padding-bottom: 20px;">
<div class="row text-center margin-bottom-20">
<h1 class="white"> Knowledge Base</h1>
<span class="nested"> Learn to use gomac </span>
</div>
<br>
<div class="row search-row">
<input type="text" class="search" placeholder="What do you need help with?">
<button class="buttonsearch btn btn-info btn-lg">Search</button>
</div>
</div>
</div>
<!-- END SEARCH FIELD AREA -->
<!-- MAIN SECTION -->
<div class="container featured-area-default padding-30">
<div class="row">
<!-- ARTICLE OVERVIEW SECTION -->
<div class="col-md-8 padding-20">
<div class="row">
<!-- BREADCRUMBS -->
<div class="breadcrumb-container">
<ol class="breadcrumb">
<li><i class="fa fa-home"></i></li>
<li class="active">All Articles</li>
</ol>
</div>
<!-- END BREADCRUMBS -->
<!-- ARTICLES -->
<div class="fb-heading">
All Articles
</div>
<hr class="style-three">
<div class="panel panel-default">
<div class="article-heading-abb">
<i class="fa fa-pencil-square-o"></i> How to change account password?
</div>
<div class="article-info">
<div class="art-date"><i class="fa fa-calendar-o"></i> 20 May, 2016 </div>
<div class="art-category"><i class="fa fa-folder"></i> Account Settings </div>
<div class="art-comments"><i class="fa fa-comments-o"></i> 4 Comments </div>
</div>
<div class="article-content">
<p class="block-with-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet finibus dui. Fusce ac nulla nec ex ornare vehicula non nec mi. Cras eget nisi sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec viverra
faucibus magna sed interdum. Phasellus ultrices sagittis molestie. Sed sit amet nisl id risus egestas semper. In porta, arcu eu dignissim vestibulum, sapien justo imperdiet enim, sed facilisis quam justo in neque. Aliquam
fermentum arcu eget hendrerit efficitur.
</p>
</div>
<div class="article-read-more">
Read more...
</div>
</div>
<div class="panel panel-default">
<div class="article-heading-abb">
<i class="fa fa-pencil-square-o"></i> How to change currency in gomac?
</div>
<div class="article-info">
<div class="art-date"><i class="fa fa-calendar-o"></i> 20 May, 2016 </div>
<div class="art-category"><i class="fa fa-folder"></i> Admin Panel </div>
<div class="art-comments"><i class="fa fa-comments-o"></i> 10 Comments </div>
</div>
<div class="article-content">
<p class="block-with-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet finibus dui. Fusce ac nulla nec ex ornare vehicula non nec mi. Cras eget nisi sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec viverra
faucibus magna sed interdum. Phasellus ultrices sagittis molestie. Sed sit amet nisl id risus egestas semper. In porta, arcu eu dignissim vestibulum, sapien justo imperdiet enim, sed facilisis quam justo in neque. Aliquam
fermentum arcu eget hendrerit efficitur.
</p>
</div>
<div class="article-read-more">
Read more...
</div>
</div>
<div class="panel panel-default">
<div class="article-heading-abb">
<i class="fa fa-pencil-square-o"></i> How to edit order details?
</div>
<div class="article-info">
<div class="art-date"><i class="fa fa-calendar-o"></i> 20 May, 2016 </div>
<div class="art-category"><i class="fa fa-folder"></i> Orders </div>
<div class="art-comments"><i class="fa fa-comments-o"></i> 0 Comments </div>
</div>
<div class="article-content">
<p class="block-with-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet finibus dui. Fusce ac nulla nec ex ornare vehicula non nec mi. Cras eget nisi sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec viverra
faucibus magna sed interdum. Phasellus ultrices sagittis molestie. Sed sit amet nisl id risus egestas semper. In porta, arcu eu dignissim vestibulum, sapien justo imperdiet enim, sed facilisis quam justo in neque. Aliquam
fermentum arcu eget hendrerit efficitur.
</p>
</div>
<div class="article-read-more">
Read more...
</div>
</div>
<div class="panel panel-default">
<div class="article-heading-abb">
<i class="fa fa-pencil-square-o"></i> How to print stock barcode?
</div>
<div class="article-info">
<div class="art-date"><i class="fa fa-calendar-o"></i> 20 May, 2016 </div>
<div class="art-category"><i class="fa fa-folder"></i> Stocks </div>
<div class="art-comments"><i class="fa fa-comments-o"></i> 12 Comments </div>
</div>
<div class="article-content">
<p class="block-with-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet finibus dui. Fusce ac nulla nec ex ornare vehicula non nec mi. Cras eget nisi sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec viverra
faucibus magna sed interdum. Phasellus ultrices sagittis molestie. Sed sit amet nisl id risus egestas semper. In porta, arcu eu dignissim vestibulum, sapien justo imperdiet enim, sed facilisis quam justo in neque. Aliquam
fermentum arcu eget hendrerit efficitur.
</p>
</div>
<div class="article-read-more">
Read more...
</div>
</div>
<div class="panel panel-default">
<div class="article-heading-abb">
<i class="fa fa-pencil-square-o"></i> How to generate barcode?
</div>
<div class="article-info">
<div class="art-date"><i class="fa fa-calendar-o"></i> 20 May, 2016 </div>
<div class="art-category"><i class="fa fa-folder"></i> Stocks </div>
<div class="art-comments"><i class="fa fa-comments-o"></i> 7 Comments </div>
</div>
<div class="article-content">
<p class="block-with-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet finibus dui. Fusce ac nulla nec ex ornare vehicula non nec mi. Cras eget nisi sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec viverra
faucibus magna sed interdum. Phasellus ultrices sagittis molestie. Sed sit amet nisl id risus egestas semper. In porta, arcu eu dignissim vestibulum, sapien justo imperdiet enim, sed facilisis quam justo in neque. Aliquam
fermentum arcu eget hendrerit efficitur.
</p>
</div>
<div class="article-read-more">
Read more...
</div>
</div>
<!-- END ARTICLES -->
<!-- PAGINATION -->
<nav class="text-center">
<ul class="pagination">
<li class="disabled">
<span aria-hidden="true"><i class="fa fa-arrow-circle-left"></i> Previous</span>
</li>
<li class="active">1 <span class="sr-only">(current)</span></li>
<li class="enabled">2 <span class="sr-only">(current)</span></li>
<li class="enabled">3 <span class="sr-only">(current)</span></li>
<li class="enabled">
<span aria-hidden="true">Next <i class="fa fa-arrow-circle-right"></i></span>
</li>
</ul>
</nav>
<!-- END PAGINATION -->
</div>
</div>
<!-- END ARTICLES OVERVIEW SECTION-->
<!-- SIDEBAR STUFF -->
<div class="col-md-4 padding-20">
<div class="row margin-bottom-30">
<div class="col-md-12 ">
<div class="support-container">
<h2 class="support-heading">Need more Support?</h2> If you cannot find an answer in the knowledgebase, you can contact us for further help.
</div>
</div>
</div>
<div class="row margin-top-20">
<div class="col-md-12">
<div class="fb-heading-small">
Popular Articles
</div>
<hr class="style-three">
<div class="fat-content-small padding-left-10">
<ul>
<li> <i class="fa fa-file-text-o"></i> How to change account password? </li>
<li> <i class="fa fa-file-text-o"></i> How to edit order details? </li>
<li> <i class="fa fa-file-text-o"></i> Add new user </li>
<li> <i class="fa fa-file-text-o"></i> Change customer details </li>
<li> <i class="fa fa-file-text-o"></i> Lookup existing customer in order form </li>
</ul>
</div>
</div>
</div>
<div class="row margin-top-20">
<div class="col-md-12">
<div class="fb-heading-small">
Latest Articles
</div>
<hr class="style-three">
<div class="fat-content-small padding-left-10">
<ul>
<li> <i class="fa fa-file-text-o"></i> How to change username? </li>
<li> <i class="fa fa-file-text-o"></i> How to change currency in gomac? </li>
<li> <i class="fa fa-file-text-o"></i> How to edit order details? </li>
<li> <i class="fa fa-file-text-o"></i> How to print stock barcode? </li>
<li> <i class="fa fa-file-text-o"></i> How to generate barcode? </li>
</ul>
</div>
</div>
</div>
<!-- POPULAR TAGS (SHOW MAX 20 TAGS) -->
<div class="row margin-top-20">
<div class="col-md-12">
<div class="fb-heading-small">
Popular Tags
</div>
<hr class="style-three">
<div class="fat-content-tags padding-left-10">
password
settings
sign up
currency
payment
user
database
storage
export
email
import
campaign
edit
orders
help
billing
user
configure
customer
</div>
</div>
</div>
<!-- END POPULAR TAGS (SHOW MAX 20 TAGS) -->
</div>
<!-- END SIDEBAR STUFF -->
</div>
</div>
<!-- END MAIN SECTION -->
<!-- FOOTER -->
<div class="container-fluid footer marg30">
<div class="container">
<!-- FOOTER COLUMN ONE -->
<div class="col-xs-12 col-sm-4 col-md-4 margin-top-20">
<div class="panel-transparent">
<div class="footer-heading">How it works</div>
<div class="footer-body">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
</div>
</div>
</div>
<!-- END FOOTER COLUMN ONE -->
<!-- FOOTER COLUMN TWO -->
<div class="col-xs-12 col-sm-4 col-md-4 margin-top-20">
<div class="panel-transparent">
<div class="footer-heading">Categories</div>
<div class="footer-body">
<ul>
<li> General </li>
<li> Getting Started </li>
<li> Account Support </li>
<li> Guides </li>
<li> Payment & Billing </li>
<li> Misc </li>
</ul>
</div>
</div>
</div>
<!-- END FOOTER COLUMN TWO -->
<!-- FOOTER COLUMN THREE -->
<div class="col-xs-12 col-sm-4 col-md-4 margin-top-20">
<div class="panel-transparent">
<div class="footer-heading">Popular Articles</div>
<div class="footer-body">
<ul>
<li> How to change account password </li>
<li> How to edit order details </li>
<li> Add new user </li>
<li> Change customer details </li>
<li> Lookup existing customer in order form </li>
<li> How do I reset my password </li>
</ul>
</div>
</div>
</div>
<!-- END FOOTER COLUMN THREE -->
</div>
</div>
<!-- END FOOTER -->
<!-- COPYRIGHT INFO -->
<div class="container-fluid footer-copyright marg30">
<div class="container">
<div class="pull-left">
Copyright © 2016 Sunny Gohil</a>
</div>
<div class="pull-right">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-linkedin"></i>
</div>
</div>
</div>
<!-- END COPYRIGHT INFO -->
<!-- LOADING MAIN JAVASCRIPT -->
<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/main.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src='https://cdn.rawgit.com/VPenkov/okayNav/master/app/js/jquery.okayNav.js'></script>
</body>
</html>
Above is the html for articles.html
First - Parse the string from url an then search it in the document.
var a = document.getElementById('tfnewsearch');
if(a){
a.addEventListener('submit',function(e) {
e.preventDefault();
var b = document.getElementById('tftextinput').value;
window.location.href = 'articles.html?'+b;
});
}
// var queryString = url.substring( url.indexOf('?') + 1 );
var queryString = window.location.search;
queryString = queryString.substring(1);
function myFunction() {
// Declare variables
var para, filter, ul, li, anchor;
para = document.getElementById('block-with-text');
filter = queryString.toUpperCase();
anchor = document.getElementById("anchor");
ul = document.getElementById("myUL");
li = ul.getElementsByTagName('li');
// Loop through all list items, and hide those who don't match the search query
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
p = li[i].getElementsByTagName("p")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else if (p.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
myFunction();
Also there should not be any visible seperator like (:) to split the textarea. Currently I have done it with (:) seperator. I need to separate it with a span tag may be which will be unvisible. Here is the code given below:
HTML Code:
<div class="container">
<h3 class="text-center text-primary">TextArea Concatenate and Revert</h3>
<form method="post" accept-charset="utf-8" action="">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<textarea id="text_area_1" rows="14" cols="100"></textarea>
</div>
</div>
<div class="row">
<div class="col-md-2 col-md-offset-5 border">
<img src="images/signature.png" alt="signature">
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-1">
<textarea id="text_area_2" rows="6" cols="50"></textarea>
</div>
<div class="col-md-4 col-md-offset-1">
<textarea id="text_area_3" rows="6" cols="50"></textarea>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p>স্মারক নম্বর: ০৫.৪৫.৩৯০০.০১১.৬১.০০১.১৭.৫৬/১</p>
</div>
<div class="col-md-2 col-md-offset-2 border">
<img src="images/signature.png" alt="signature">
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-1">
<textarea id="text_area_4" rows="6" cols="50"></textarea>
</div>
<div class="col-md-4 col-md-offset-1">
<textarea id="text_area_5" rows="6" cols="50"></textarea>
</div>
</div>
<button type="button" class="btn btn-success" onclick="concatenate()">Concatenate</button>
</form>
<hr>
<div class="row">
<div class="col-md-12">
<textarea id="text_area_6" rows="40" cols="180"></textarea>
</div>
</div>
<button type="button" class="btn btn-warning" onclick="revert()">Revert</button>
</div>
Style:
.border{
border: 1px solid;}
Javascript:
<script>
var one = document.getElementById("text_area_1");
var two = document.getElementById("text_area_2");
var three = document.getElementById("text_area_3");
var four = document.getElementById("text_area_4");
var five = document.getElementById("text_area_5");
var six = document.getElementById("text_area_6");
function concatenate(){
six.value = one.value + ":" + two.value+ ":" + three.value+ ":" + four.value+ ":" + five.value;
one.value = "";
two.value = "";
three.value = "";
four.value = "";
five.value = "";
}
function revert(){
var val = six.value.split(":");
one.value = val[0];
two.value = val[1];
three.value = val[2];
four.value = val[3];
five.value = val[4];
six.value = "";
}
</script>
By using a global variable ( or variables ) you can assign the values when the concatenate button is clicked and they will be available later when the revert button is clicked.
<!doctype html>
<html>
<head>
<title>Concatenate() & revert()</title>
<script>
var texts={
'text_area_1':'',
'text_area_2':'',
'text_area_3':'',
'text_area_4':'',
'text_area_5':''
};
var target='text_area_6';
function $(id){
return document.getElementById(id);
}
function combine(o,b){
if( typeof( o )=='object' ){
var t=[];
var a=arguments;
var e=( a.length==3 ) ? a[2]:false;
var s=( a.length==4 ) ? a[3]:'=';
for( var n in o ){
if( b && typeof( o[ n ] )=='object' ) t.push( combine( o[ n ], b, e, s ) );
else t.push( o[ n ] );
}
return t;
}
return o;
}
function concatenate(){
var keys=Object.keys(texts);
for( k in keys ){
texts[ keys[ k ] ]=$( keys[ k ] ).value;
$( keys[ k ] ).value='';
}
$(target).value=combine( Object.values(texts).join(' '),0 );
}
function revert(){
var keys=Object.keys( texts );
for( k in keys ){
$( keys[ k ] ).value=texts[ keys[ k ] ];
}
$(target).value='';
}
</script>
</head>
<body>
<div class="container">
<h3 class="text-center text-primary">TextArea Concatenate and Revert</h3>
<form method="post" accept-charset="utf-8" action="">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<textarea id="text_area_1" rows="14" cols="100">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id imperdiet mi. Donec velit orci, consectetur sit amet mi id, eleifend pretium lorem. Integer orci ex, suscipit sit amet dui id, mollis condimentum elit. Fusce blandit quis magna eu malesuada. In hac habitasse platea dictumst. Nam tristique nunc at mauris porta elementum. Pellentesque ut lacinia metus, lacinia mollis odio. Praesent sed viverra metus. Phasellus non tristique nisl, ut congue erat. Aliquam neque leo, blandit eu varius id, mattis vel tellus.</textarea>
</div>
</div>
<div class="row">
<div class="col-md-2 col-md-offset-5 border">
<img src="images/signature.png" alt="signature">
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-1">
<textarea id="text_area_2" rows="6" cols="50">Etiam ullamcorper pulvinar tincidunt. Suspendisse scelerisque commodo nisl eget volutpat. Cras tristique quis eros lobortis blandit. Duis sed pellentesque est. Aenean sem ex, ultrices nec enim pharetra, placerat gravida turpis. Proin ultricies ultrices tellus ac condimentum. Aliquam nisl dolor, vulputate vitae risus vel, porta pulvinar ligula. Fusce dapibus rutrum pulvinar.</textarea>
</div>
<div class="col-md-4 col-md-offset-1">
<textarea id="text_area_3" rows="6" cols="50">Sed eget rhoncus sapien, in dapibus metus. Mauris porta, massa nec sodales dignissim, dui est accumsan lorem, vel vulputate velit mi eget velit. In a suscipit eros, eget hendrerit dui. In in imperdiet tellus.</textarea>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p>?????? ?????: ??.??.????.???.??.???.??.??/?</p>
</div>
<div class="col-md-2 col-md-offset-2 border">
<img src="images/signature.png" alt="signature">
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-1">
<textarea id="text_area_4" rows="6" cols="50">Ut pellentesque nunc neque, nec mattis nisl commodo at. Aenean dictum tellus diam, vel scelerisque eros euismod quis. Nunc tellus mauris, suscipit at metus sed, pretium auctor arcu. Curabitur pretium pellentesque dictum. Pellentesque lacinia condimentum dictum. Praesent quis euismod lorem.</textarea>
</div>
<div class="col-md-4 col-md-offset-1">
<textarea id="text_area_5" rows="6" cols="50">Sed justo diam, commodo consectetur porta vitae, ultricies non ipsum. Donec eget magna odio. Fusce in orci vel erat fringilla accumsan in sit amet lacus. Fusce diam sapien, ullamcorper quis auctor ac, tempor ut quam. Duis iaculis convallis nunc, sed faucibus erat pharetra quis.</textarea>
</div>
</div>
<button type="button" class="btn btn-success" onclick="concatenate()">Concatenate</button>
</form>
<hr>
<div class="row">
<div class="col-md-12">
<textarea id="text_area_6" rows="40" cols="180"></textarea>
</div>
</div>
<button type="button" class="btn btn-warning" onclick="revert()">Revert</button>
</div>
</body>
</html>
I am writing a large website and I got stuck referencing a small navigation bar. I am using Twitter Bootstrap.
I'm sure I'm missing something novice. This is the JsFiddle: http://jsfiddle.net/ugdh2jmL/2/. I'm going to be referencing a series of dynamically loaded list objects. I can add them easily but I'm having issues declaring an onclick event; nothing happens, no message, nothing.
Here are the snippets:
$('.list-group').on('click', '.list-group-item', function(e) {
alert('success');
}):
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="col-sm-4">
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
</div>
</div>
<!-- /.col-sm-4 -->
</div>
</div>
</div>
<!-- /.col-sm-4 -->
For code to trigger you need to include jquery library as well.
I have also updated fiddle.
$(document).ready(function(){
$(document).on('click', '.list-group', function(e){
alert('success');
});
});
http://jsfiddle.net/ugdh2jmL/3/
Missing jQuery and : should be ;
$('.list-group').on('click', '.list-group-item', function(e) {
alert('success');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="col-sm-4">
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
</div>
</div>
<!-- /.col-sm-4 -->
</div>
</div>
</div>
<!-- /.col-sm-4 -->
I'm having an issue right now when trying to use the Twitter Bootstrap Togglable tabs and having it display different div nodes. Everything lays out properly (so I know CSS is hooked up right) and I have the JavaScript referenced and made sure that the functions I need are there, but for some reason when I click the tabs it doesn't display the other div's (based on the link clicked in the navigation field).
Here's the markup I'm trying to use
<script>
$(function () {
$('.tabs a:last').tab('show')
})
</script>
<ul class="nav nav-tabs">
<li class="active">home</li>
<li>about tom</li>
<li>services</li>
<li>new patients</li>
</ul>
<div class="tab-content" id="tab-content">
<div class="tab-pane fade in active" id="home">
<div class="container">
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="i/6.jpg" alt="" />
<img src="i/1.jpg" alt="" />
<img src="i/2.jpg" alt="" />
<img src="i/3.jpg" alt="" />
<img src="i/4.jpg" alt="" />
<img src="i/5.jpg" alt="" />
</div>
</div>
<div class="row">
<div class="span4">
<h2>Heading</h2>
<p>Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
<p><a class="btn" href="#">View details »</a></p>
</div>
<div class="span4">
<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 risks. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div>
<div class="span4">
<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" href="#">View details »</a></p>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="about">
about
</div>
<div class="tab-pane fade" id="services">
services
</div>
<div class="tab-pane fade" id="contact">
contact
</div>
<div class="tab-pane fade" id="new_patient">
new patient form
</div>
</div>
I had to add the transition script file and include "fade in" classes to make it work. See the fiddle here: http://jsfiddle.net/johnpapa/qSqpD/
Looks like you have to wrap the .nav-tabs in another div with class .tabbable
Here is the relevant html you need for bootstrap togglable tabs:
...
<link href="/static/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="/static/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
...
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">tab1</li>
<li>tab2</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane active">tab1 content</div>
<div id="tab2" class="tab-pane">tab2 content</div>
</div>
</div>
...
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.7");</script>
<script src="/static/bootstrap/js/bootstrap-tab.js"></script>
...
And here is an example implementation on jfiddle