Iterate through "hover" function - javascript

For a client I am working on a website. She wants a section where she can find the prices and rates of her company. I just want to create one class, and when the person will hover over "this" class, the button will appear.
Well here's where things get complicated for me. At this point, when the person hovers over the "prices1" section, both buttons will appear in both sections.
I tried already to give the ".arrow" the property "this", however, logically, the "a" section will move up, instead of the ".arrow" class.
Would appreciate some help!
$(".prices1 a").hover(function () {
$('.arrow').css({
"opacity": "100%",
"transform": "translate(0%, -80%)",
});
$('.button-tarieven p').css({
"transform": "translateY(-50%)",
"opacity": "0%",
});
}, function () {
$('.arrow').css({
"transform": "translate(0%, 0%)",
"opacity": "0%",
});
$('.button-tarieven p').css({
"transform": "translateY(0%)",
"opacity": "100%",
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="prices1">
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 225.992 197.776"></svg>
<h2>Conversation</h2>
<p>Nullam quis risus eget urna mollis ornare vel eu leo.</p>
<p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
<p>Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
</p>
<div class="buttons-price">
<a href="#">
<p>Make appointment!</p>
</a>
</div>
<a href="">
<div class="arrow">
<img src="img/arrow.png" alt="Arrow">
</div>
</a>
</div>
<div class="prices1">
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 225.992 197.776"></svg>
<h2>Intake</h2>
<p>Vestibulum id ligula porta felis euismod semper.</p>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem malesuada magna mollis euismod.</p>
<p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
</p>
<div class="buttons-price">
<a href="#">
<p>Make appointment!</p>
</a>
</div>
<a href="">
<div class="arrow">
<img src="img/arrow.png" alt="Arrow">
</div>
</a>
</div>


You should try using hide() and show() function instead of CSS.
And as #TKoL suggested use the $(this) to refer to the current target
Like this :
$(".prices1 .trigger").hover(function() {
$(this).find('.arrow').show();
}, function() {
$(this).find('.arrow').hide();
});
//This is in order to hide the button at the page load ;)
$('.arrow').hide();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="prices1">
<h2>Conversation</h2>
<div class="trigger">
<a href="#">
<p>Make appointment!</p>
</a>
<a href="" class="arrow">
<div>
<img src="img/arrow.png" alt="Arrow">
</div>
</a>
</div>
</div>
<div class="prices1">
<h2>Intake</h2>
<div class="trigger">
<a href="#">
<p>Make appointment!</p>
</a>
<a href="" class="arrow">
<div>
<img src="img/arrow.png" alt="Arrow">
</div>
</a>
</div>
</div>

Related

Get to display the right product info using json file and Due js

The idea would be selecting a product by clicking on view Details button from PortfolioV3.vue and take you to ProductDetail.vue according to the product selected but I can't seem to find a way to make this link. What would be the most efficient way to configure this value passing information taken from json file from one PortfolioV3.vue to ProductDetail.vue?
portfolio-v3.json
{
"data":[
{
"image_path":"static/products/DELUXE-BATHROBE.jpg",
"title":"Productivity Tools",
"title_color":"bg-info",
"heading":"Deluxe Bathrobe",
"read_more_url":"javascript:void(0);",
"content": "bathrobe posuere proin blandit accumsan senectus netus nullam curae, ornare laoreet adipiscing luctus mauris adipiscing pretium eget fermentum, tristique lobortis est ut metus lobortis tortor."
},
{
"image_path":"static/products/HERRINGBONE-THERMAL-BLANKET.jpg",
"title":"Productivity Tools",
"title_color":"badge-warning",
"heading":"Herringbone Thermal Blanket",
"read_more_url":"javascript:void(0);",
"content": "blanket posuere proin blandit accumsan senectus netus nullam curae, ornare laoreet adipiscing luctus mauris adipiscing pretium eget fermentum, tristique lobortis est ut metus lobortis tortor."
},
{
"image_path":"static/products/MADISON-SPREAD-BLANKETS.jpg",
"title":"Productivity Tools",
"title_color":"bg-yellow",
"heading":"Madison Spread Blankets",
"read_more_url":"javascript:void(0);",
"content": "blanket posuere proin blandit accumsan senectus netus nullam curae, ornare laoreet adipiscing luctus mauris adipiscing pretium eget fermentum, tristique lobortis est ut metus lobortis tortor."
}
]
}
PortfolioV3.vue
<template>
<div>
<PageTitle
headerTitle="Our Latest Work"
headerSubTitle="We build something great in the world."
>
</PageTitle>
<div class="portfolio-wrapper section-gap port-3">
<div class="container">
<div class="blog-alternate" v-for="(portfolio,index) of portfoliov3.data" :key="index">
<div class="row align-items-center">
<div class="col-sm-12 col-md-6">
<div class="overlay-wrap">
<img :src="portfolio.image_path" width="500" height="500" class="img-fluid border-rad w-100" alt="gallery images" />
<a :href="portfolio.image_path" data-fancybox="images" class="card-img-overlay primary-tp-layer pos-center text-center">
<span class="center-holder">
<a class="ih-fade-down square-40 rounded-circle bg-white shadow-md">
<i class="fa fa-plus align-middle"></i>
</a>
</span>
</a>
</div>
</div>
<div class="col-sm-12 col-md-6">
<div class="portfolio-content">
<h5 :class="portfolio.title_color" class="badge p-2 mb-3 btn-pill"> {{portfolio.title}} </h5>
<h3 class="mb-3">{{portfolio.heading}}</h3>
<p class="mb-4">{{portfolio.content}}</p>
<a :href="portfolio.read_more_url" class="btn btn-outline-secondary btn-chk-dark"> READ MORE </a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import portfoliov3 from 'Components/data/portfolio-v3.json'
export default {
data(){
return{
portfoliov3
}
}
}
</script>
ProductDetail.vue
<template>
<div>
<div class="product-wrapper section-gap pb-0">
<div class="container">
<div class="row mb-4">
<div class="col-sm-12 col-md-12 col-lg-6">
<div class="mb-4">
<div class="feature-box-thumb">
<img src="static/img/2.jpg" class="img-fluid card-shadow" alt="product image" />
</div>
<!-- feature box thumb closed -->
</div>
<div class>
<ul class="list-unstyled p-gallary-thumb list-p-detail row">
<li class="col-6 col-sm-3 col-md-3 mb-4">
<a href="javascript:void(0);">
<img src="static/img/2.jpg" class="img-fluid" alt="product image" />
</a>
</li>
<li class="col-6 col-sm-3 col-md-3 mb-4">
<a href="javascript:void(0);">
<img src="static/img/2.jpg" class="img-fluid" alt="product image" />
</a>
</li>
<li class="col-6 col-sm-3 col-md-3 mb-4">
<a href="javascript:void(0);">
<img src="static/img/2.jpg" class="img-fluid" alt="product image" />
</a>
</li>
<li class="col-6 col-sm-3 col-md-3 mb-4">
<a href="javascript:void(0);">
<img src="static/img/2.jpg" class="img-fluid" alt="product image" />
</a>
</li>
</ul>
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-6 product-detail-content mb-4">
<div class="mb-3">
<h2 class="text-capitalize mb-3">Fleece Jacket</h2>
<!--<h4 class="font-26 text-primary">
<del class="text-muted mr-2">$187</del> $125.00
</h4>-->
</div>
<div class="mb-4">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis eros lobortis, vestibulum turpis ac, pulvinar odio. Praesent vulputate a elit ac mollis. In sit amet ipsum turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis eros lobortis, vestibulum turpis ac, pulvinar odio. Praesent vulputate a elit ac mollis. In sit amet ipsum turpis. Pellentesque venenatis, libero vel euismod lobortis, mi metus luctus augue, eget dapibus elit nisi eu massa. Phasellus sollicitudin nisl posuere nibh ultricies.</p>
</div>
<div class="mb-4">
<p class="mb-0">
<span class="font-weight-bold">Category :</span>
Electronics,
Lights,
Solar
</p>
</div>
<div></div>
</div>
</div>
</div>
</div>
<!-- container closed -->
</div>
<!-- product wrapper closed -->
</div>
</template>
<script>
import RelatedProducts from "Components/Sections/RelatedProducts.vue";
import portfoliov2 from "Components/data/portfolio-v2.json";
export default {
components: {
RelatedProducts
},
data() {
return {
portfoliov2
};
}
};
</script>

How can I dont show the divisions between cells in this divs?

I have this simple screen of an application in Vue.js:
Sample screen
I want to hide these divisions between cells, in a manner that the lines of the itens are continous.
I had tried to alter the classes of the columns to "col-md" and "col-sd", but witout sucesss.
Here is the code of the template session of the application:
<template>
<div class="container">
<h1> Animais </h1>
<br>
<div class="row">
<div class="col-md-6">
<h3>
Animais Cadastrados
<span class="badge badge-info">{{animais.length}}</span>
</h3>
<ul>
<div class="row">
<div class="col">
Nome
<li class="list-group-item" v-for="animal in animais" v-bind:key="animal">
{{animal.nome}}
</li>
</div>
<div class="col">
Idade
<li class="list-group-item" v-for="animal in animais" v-bind:key="animal">
{{animal.idade}}
</li>
</div>
<div class="col">
Raça
<li class="list-group-item" v-for="animal in animais" v-bind:key="animal">
{{animal.raca}}
</li>
</div>
<div class="col">
Informações
<li class="list-group-item" v-for="animal in animais" v-bind:key="animal">
<i #click="Show" class="fa fa-info-circle" aria-hidden="true"></i>
</li>
</div>
</div>
</ul>
</div>
<div class="col-md-6">
<h3>
h3. Lorem ipsum dolor sit amet.
</h3>
<p>
Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
</p>
</div>
</div>
</div>
</template>

To make things easier, you can just copy the generated HTML into JsFiddle. I'm trying to guess what you are trying to achieve and I think you can try something like that:
<div class="row" v-for="animal in animais" v-bind:key="animal">
<div class="col-md-3">{{animal.nome}}</div>
<div class="col-md-3">{{animal.idade}}</div>
<div class="col-md-3">{{animal.raca}}</div>
<div class="col-md-3">
<i #click="Show" class="fa fa-info-circle" aria-hidden="true"></i>
</div>
</div>
Again, I'm not sure what you're trying to do but looping 4 times on the same array is probably not the way to go. And yes, you may nest Bootstrap a row inside another.

Using react.js, I receive no errors, but content doesn't load

I'm currently working on a site on freelance, and the client is requesting form verification via react.js. I've never used it before, so I'm trying to learn, and of course, my first goal is to get the content on the page. After some fiddling, and finding my mistakes, I finally received no errors, but the content isn't loading on the page. I'm also using bootstrap. File structure is all correct.
Here's my HTML:
<!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>Site Name</title>
<!-- Bootstrap -->
<link href="css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<header>
<nav class="navbar navbar-defualt dc-navbar navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle dc-navbutton collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">
Toggle navigation
</span>
<span class="toggle-bar icon-bar"></span>
<span class="toggle-bar icon-bar"></span>
<span class="toggle-bar icon-bar"></span>
</button>
<a class="navbar-brand unfloat" href="#">
<img id="logo" src="img/Service2Rev2.png" alt="DockChain">
</a>
</div>
<div id="navbar" class="dc-navbar collapse navbar-collapse">
<ul class="fnt-sec nav-pad nav navbar-nav navbar-left">
<li class="active">
<a href="#">
Home
</a>
</li>
<li>
<a href="#">
Settings
</a>
</li>
<li>
<a href="#">
About
</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
</header>
<section>
<div class="container-fluid">
<div class="main jumbotron">
<center class="fnt-secondary">
<h1>Client's Service</h1>
<p>Lorem Ipsum Dolor</p>
<a href="#">
<button class="btn btn-default">Learn More</button>
</a>
</center>
</div>
</div>
</section>
<section class="sections">
<div class="container">
<div class="center row">
<div class="col-sm-4">
<h2>Safe</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non accumsan nulla. Quisque rutrum rutrum condimentum. Aenean lacinia semper egestas. Pellentesque nec tortor eu erat ullamcorper lobortis vitae ut leo. Aliquam ipsum mi, ultrices et posuere id, ornare non quam. Fusce nec augue bibendum, eleifend ipsum viverra, maximus urna. Nullam tincidunt quam id faucibus suscipit.</p>
</div>
<div class="col-sm-4">
<h2>Secure</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non accumsan nulla. Quisque rutrum rutrum condimentum. Aenean lacinia semper egestas. Pellentesque nec tortor eu erat ullamcorper lobortis vitae ut leo. Aliquam ipsum mi, ultrices et posuere id, ornare non quam. Fusce nec augue bibendum, eleifend ipsum viverra, maximus urna. Nullam tincidunt quam id faucibus suscipit.</p>
</div>
<div class="col-sm-4">
<h2>Verified</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non accumsan nulla. Quisque rutrum rutrum condimentum. Aenean lacinia semper egestas. Pellentesque nec tortor eu erat ullamcorper lobortis vitae ut leo. Aliquam ipsum mi, ultrices et posuere id, ornare non quam. Fusce nec augue bibendum, eleifend ipsum viverra, maximus urna. Nullam tincidunt quam id faucibus suscipit.</p>
</div>
</div>
</div>
</section>
<section class="sections info-section">
<div class="container">
<div class="some-room row">
<div class="col-md-6">
<img class="center" src="img/Service3.png" alt="flow chart">
</div>
<div class="info-text col-md-6">
<h2>This is how we work</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non accumsan nulla. Quisque rutrum rutrum condimentum. Aenean lacinia semper egestas. Pellentesque nec tortor eu erat ullamcorper lobortis vitae ut leo. Aliquam ipsum mi, ultrices et posuere id, ornare non quam. Fusce nec augue bibendum, eleifend ipsum viverra, maximus urna. Nullam tincidunt quam id faucibus suscipit. Aenean in enim at est porttitor vestibulum eu quis ipsum. Morbi ac tortor tempus, pulvinar nisi at, sodales urna. In facilisis ut diam vel aliquam. Mauris tempor, nulla non hendrerit rhoncus, leo diam dictum elit, nec molestie ex arcu ac erat. Vivamus malesuada libero eget erat bibendum rutrum. Nunc tempus posuere ornare. Sed eleifend, nisl non ultricies pretium, elit diam dictum orci, in aliquet nisi neque luctus lacus. </p>
</div>
</div>
</div>
</section>
<div id="formDiv">
</div>
<section>
<div class="container-fluid">
<div class="main jumbotron">
<center>
<h1>Here's another focal point</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non accumsan nulla. Quisque rutrum rutrum condimentum. Aenean lacinia semper egestas. Pellentesque nec tortor eu erat ullamcorper lobortis vitae ut leo. </p>
<a href="#">
<button class="btn btn-default">Call to Action</button>
</a>
</center>
</div>
</div>
</section>
<footer class="footer">
<div class="container">
<div class="fnt-sec pull-left">
<p><i class="fa fa-copyright"></i> 2015 Client</p>
</div>
<div class="fnt-sec pull-right">
<p>You can have some stuff here too.</p>
</div>
</div>
</footer>
<script src="js/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- React.js -->
<script src="https://fb.me/react-0.13.3.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
<!-- Form jsx -->
<script src="comp/Form.jsx" type="text/jsx"></script>
<script type="text/jsx">
var form = React.createElement(Form);
function run() {
React.render(form, document.getElementById('formDiv'));
}
if (window.addEventListener) {
window.addEventListener('DOMContentLoaded', run);
} else {
window.attachEvent('onload', run);
}
</script>
</body>
</html>
And here's Form.jsx:
var Form = React.createClass({
render: function () {
return(
<div className="container form-border">
<h2>Enter your info to subscribe.</h2>
<form>
<div classNameName="form-group has-success has-feedback">
<label className="control-label" for="name">Name</label>
<input type="text" className="form-control" id="nameInput" placeholder="Name" />
<span className="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div className="form-group has-warning has-feedback">
<label className="control-label" for="emailInput">Email address</label>
<input type="email" className="form-control" id="emailInput" placeholder="Enter email" />
<span className="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div className="form-group has-error has-feedback">
<label className="control-label" for="passInput">Password</label>
<input type="password" className="form-control" id="passInput" placeholder="Password" />
<span className="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
<div className="form-group">
<label for="comments">Comments</label>
<textarea className="form-control" id="commentInput" rows="3" placeholder="Enter comments here"></textarea>
</div>
<div className="row">
<div className="col-xs-6">
<div className="form-group">
<div className="checkbox-inline">
<label>
<input type="checkbox" value="" checked /> Option one
</label>
</div>
<div className="checkbox-inline">
<label>
<input type="checkbox" value="" />Option two
</label>
</div>
<div className="checkbox disabled">
<label>
<input type="checkbox" value="" disabled /> Option three (disabled)
</label>
</div>
</div>
<div className="form-group">
<div className="radio-inline">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked />Option one
</label>
</div>
<div className="radio-inline">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" />Option two
</label>
</div>
<div className="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled /> Option three (disabled)
</label>
</div>
</div>
</div>
<div className="col-xs-6">
<div className="form-group">
<label for="jobForm">How would you describe yourself?</label>
<select name="profession" id="profession" className="form-control">
<option value="default">Select an option...</option>
<option value="developer">Developer</option>
<option value="designer">Designer</option>
<option value="director">Director/Manager</option>
<option value="joke">Puppet Maker</option>
</select>
</div>
<div className="form-group">
<label for="useForm">How will you be using this service?</label>
<select name="use" id="use" className="form-control" multiple>
<option value="personal">Personal</option>
<option value="production">Production</option>
<option value="corporate">Corporate</option>
<option value="joke">With gusto</option>
</select>
</div>
</div>
</div>
<button type="submit" className="center btn btn-default">Submit</button>
</form>
</div>
);
}
});
I removed references to the client's service in file names and headers for confidentiality. I can't find why it isn't loading. Can anyone see something I can't?

You shouldn't need the event loader or the call to createElement. Try this instead:
<script type="text/jsx">
React.render(<Form />, document.getElementById('formDiv'));
</script>

How to bind event with dynamic data generated

I'm unable to bind jQuery events with dynamically generated html data. This is my code. Please help me through it.
I've tried on() function but still it doesn't not working. Multiple guidelines guide to resolve this problem with on() method but it's not working. Please guide me through this. Thanks
<span class="btn btn-warning addnew">Add New Question</span>
<div class="clearfix"></div>
<br/>
<script>
var div = '<section class="panel default red_border horizontal_border_1 h2"> <div class="block-web"> <div class="header"> <div class="actions"> <a class="minimize" href="#"><i class="fa fa-chevron-down"></i></a> <a class="refresh" href="#"><i class="fa fa-repeat"></i></a> <a class="close-down" href="#"><i class="fa fa-times"></i></a> </div> <h3>Default Block</h3> </div> <div class="body-content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non lectus molestie, condimentum quam et, iaculis justo. Nunc vel ultricies nunc. Aliquam tempus sodales eros vel tincidunt. Proin ultricies bibendum urna et aliquam. Nunc quis nisl sit amet erat bibendum aliquet.</p> </div> </div> </section>';
$(".addnew").click(function(){
$(".insertafter").after(div);
});
</script>
<div class="insertafter"></div>
<div class="col-lg-4 col-md-4">
<section class="panel default red_border horizontal_border_1 h2">
<div class="block-web">
<div class="header">
<div class="actions"> <a class="minimize" href="#"><i class="fa fa-chevron-down"></i></a> <a class="refresh" href="#"><i class="fa fa-repeat"></i></a> <a class="close-down" href="#"><i class="fa fa-times"></i></a> </div>
<h3>Default Block</h3>
</div>
<div class="body-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non lectus molestie, condimentum quam et, iaculis justo. Nunc vel ultricies nunc. Aliquam tempus sodales eros vel tincidunt. Proin ultricies bibendum urna et aliquam. Nunc quis nisl sit amet erat bibendum aliquet.</p>
</div>
</div>
</section>
</div>
<script>
/*==Porlets Actions==*/
$('.minimize').click(function(e){
var h = $(this).parents(".header");
var c = h.next('.body-content');
var p = h.parent();
c.slideToggle();
p.toggleClass('closed');
e.preventDefault();
});
$('.refresh').click(function(e){
var h = $(this).parents(".header");
var p = h.parent();
var loading = $('<div class="loading"><i class="fa fa-refresh fa-spin"></i></div>');
loading.appendTo(p);
loading.fadeIn();
setTimeout(function() {
loading.fadeOut();
}, 1000);
e.preventDefault();
});
$('.close-down').click(function(e){
var h = $(this).parents(".header");
var p = h.parent();
p.fadeOut(function(){
$(this).remove();
});
e.preventDefault();
});
</script>
jsfiddle: http://jsfiddle.net/nfqz4bqq/

Instead of...
$('.minimize').click(function(e){
//..
});
You can write...
$('body').on('click', 'a.minimize', function() {
var h = $(this).parents(".header");
var c = h.next('.body-content');
var p = h.parent();
console.log(this);
c.slideToggle();
p.toggleClass('closed');
//e.preventDefault();
});
I tried it and it works because there is a related question

scrollspy navigate to different page and back at same position

Hello fellow web enthusiasts, I am hoping you could help me out with a problem.
I am using bootstrap to create a website that uses scrollspy to navigate to parts of the page with the navbar. The only way I could get the URL to not display "#section-2" when scrolling to a part of a page was to call my javascript in my <head>.
Now the problem...
I attempted to add an FAQ section which would be a different page completely, hoping to have it link back to specific part of the original page.
It seems as the FAQ <a> tag is not working unless the browser is resized..
That's two bugs with scrollspy already!! Is it normal for bootstrap to experience this many bugs?
http://dnwebdev.com
code below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
Day & Night | Responsive Web Design
</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js">
</script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js">
</script>
</head>
<body data-spy="scroll" data-target="#myNavbar" data-offset="125">
<nav id="myNavbar" class="navbar navbar-dn navbar-fixed-top" role="navigation">
<!-- 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-collapse">
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
</button>
<a class="navbar-brand" style="color:#2c3e50;">
Day
<img src="../images/dnlogoc.png" height="35px"/>
Night
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav" style="text-align:center;">
<li class="active">
<a href="#section-1">
About Us
</a>
</li>
<li>
<a href="#section-2">
What We Do
</a>
</li>
<li>
<a href="#section-3">
Our Process
</a>
</li>
<li>
<a href="#section-4">
Our Work
</a>
</li>
<li>
<a href="#section-5">
Get in touch
</a>
</li>
<li>
<a href="/faq">
FAQ
</a>
</li>
</ul>
</div>
</nav>
<div class="container day" style="padding-top:75px;">
<hr>
<h2 class="center" id="section-1">
Web Solutions, LLC
</h2>
<hr>
<div class="row">
<div class="col-lg-4">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.
</p>
</div>
<div class="col-lg-4" style="text-align:center;">
<img src="../images/dnlogoc.png" height="200px" class="mainimg">
</div>
<div class="col-lg-4">
<p>
Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.
</p>
</div>
</div>
<p>
Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.
</p>
</div>
<div class="container day">
<hr>
<h3 class="center" id="section-2">
What We Do
</h3>
<hr>
<div class="row">
<!-- Boxes de Acoes -->
<div class="col-xs-12 col-sm-4 col-lg-4 smallpad">
<div class="box">
<div class="icon">
<div class="image">
<i class="fa fa-map-marker">
</i>
</div>
<div class="info">
<h3 class="title">
Local Search Engine Optimization
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper.
</p>
<div class="more">
<a href="#" title="Title Link">
Read More
<i class="fa fa-angle-double-right">
</i>
</a>
</div>
</div>
</div>
<div class="space">
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-lg-4 smallpad">
<div class="box">
<div class="icon">
<div class="image">
<i class="fa fa-laptop">
</i>
</div>
<div class="info">
<h3 class="title">
Mobile Friendly Web Design
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper.
</p>
<div class="more">
<a href="#" class="hover" title="Title Link">
Read More
<i class="fa fa-angle-double-right">
</i>
</a>
</div>
</div>
</div>
<div class="space">
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-lg-4 smallpad">
<div class="box">
<div class="icon">
<div class="image">
<i class="fa fa-mobile">
</i>
</div>
<div class="info">
<h3 class="title">
Responsive - Mobile Friendly Web Design
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper.
</p>
<div class="more">
<a href="#" title="Title Link">
Read More
<i class="fa fa-angle-double-right">
</i>
</a>
</div>
</div>
</div>
<div class="space">
</div>
</div>
</div>
<!-- /Boxes de Acoes -->
</div>
</div>
<div class="container night">
<div class="page-header" style="text-align:center;" id="section-3">
<h2>
Our Process
</h2>
<h3>
</h3>
</div>
<ul class="timeline">
<li class="timeline">
<div class="timeline-badge mybadge">
<i class="glyphicon glyphicon-search">
</i>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">
Planning
</h4>
</div>
<div class="timeline-body">
<p>
Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge mybadge">
<i class="glyphicon glyphicon-th-list">
</i>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">
Content
</h4>
</div>
<div class="timeline-body">
<p>
Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
</p>
<p>
Suco de cevadiss, é um leite divinis, qui tem lupuliz, matis, aguis e fermentis. Interagi no mé, cursus quis, vehicula ac nisi. Aenean vel dui dui. Nullam leo erat, aliquet quis tempus a, posuere ut mi. Ut scelerisque neque et turpis posuere pulvinar pellentesque nibh ullamcorper. Pharetra in mattis molestie, volutpat elementum justo. Aenean ut ante turpis. Pellentesque laoreet mé vel lectus scelerisque interdum cursus velit auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac mauris lectus, non scelerisque augue. Aenean justo massa.
</p>
</div>
</div>
</li>
<li class="timeline">
<div class="timeline-badge mybadge">
<i class="glyphicon glyphicon-pencil">
</i>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">
Design
</h4>
</div>
<div class="timeline-body">
<p>
Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge mybadge">
<i class="glyphicon glyphicon-wrench">
</i>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">
Development
</h4>
</div>
<div class="timeline-body">
<p>
Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
</p>
<hr>
</div>
</div>
</li>
<li class="timeline">
<div class="timeline-badge mybadge">
<i class="glyphicon glyphicon-cloud-upload">
</i>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">
Test & Launch
</h4>
</div>
<div class="timeline-body">
<p>
Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
</p>
</div>
</div>
</li>
</ul>
</div>
<div class="container day">
<hr>
<h3 class="center" id="section-4">
Our Work
</h3>
<hr>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 myimg">
<img src="../images/after-searok.jpg" class="img-responsive">
<blockquote class="blockquote">
<footer>
<cite title="Source Title">
Searok Charters
</cite>
</footer>
</blockquote>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 myimg">
<img src="../images/after-nicor.jpg" class="img-responsive">
<blockquote class="blockquote">
<footer>
<cite title="Source Title">
Nicor
</cite>
</footer>
</blockquote>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 myimg">
<img src="../images/after-cmt.jpg" class="img-responsive">
<blockquote class="blockquote">
<footer>
<cite title="Source Title">
Castle Mountain Team
</cite>
</footer>
</blockquote>
</div>
<hr>
</div>
</div>
<hr>
<div class="container" style="text-align:center;">
<div class="col-xs-3">
<i class="fa fa-5x fa-arrow-right">
</i>
</div>
<div class="col-xs-6">
<h2 class="center">
<button type="button" class="btn btn-primary btn-lg btn-block">
All my our work
</button>
</div>
<div class="col-xs-3">
<i class="fa fa-5x fa-arrow-left">
</i>
</div>
</h2>
</div>
<footer style="text-align:center;">
<div class="container night nopad">
<hr>
<h3 class="center" id="section-5">
Let's talk about your project!
</h3>
<hr>
<div class="col-lg-4 col-xs-12">
<hr>
<h2>
<a href="tel:4073497036">
<i class="fa fa-phone">
</i>
(407) 349-7036
</a>
</h2>
<hr>
</div>
<div class="col-lg-4 col-xs-12 nopad" style="text-align:center;">
<!-- Place this tag where you want the widget to render. -->
<div class="g-page" data-width="200" data-href="//plus.google.com/u/0/106333335696092351517" data-theme="dark" data-rel="publisher">
</div>
<!-- Place this tag after the last widget tag. -->
<script type="text/javascript">
(function () {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
</div>
<div class="col-lg-4 col-xs-12">
<hr>
<h2>
<a href="mailto:rob#dnwebdev.com">
<i class="fa fa-envelope-o">
</i>
rob#dnwebdev.com
</a>
</h2>
<hr>
</div>
<div id="footer" class="day" style="text-align:center;">
<div class="col-lg-12 col-xs-12">
<p>
Day & Night Web Solutions, LLC
</p>
</div>
</div>
</div>
</footer>
<script>
function close_toggle() {
if ($(window).width() <= 768) {
$('.nav a').on('click', function () {
$(".navbar-toggle").click();
});
} else {
$('.nav a').off('click');
}
}
close_toggle();
$(window).resize(close_toggle);
//function that offsets scoll
if ($(window).width() <= 768) {
var offset = 100;
} else {
var offset = 115;
}
$('.navbar li a').click(function (event) {
event.preventDefault();
$($(this).attr('href'))[0].scrollIntoView();
scrollBy(0, -offset);
});
</script>
</body>
</html>

You have a jQuery function that's forcing each of your menu link to scroll to that section. You need to tell the function to do this for all menu-links except FAQ and to redirect if FAQ clicked, so you do:
//trim the spaces and check if the text of the menu link is not equal to 'FAQ'
if ($.trim($(this).html()) != 'FAQ') {
$($(this).attr('href'))[0].scrollIntoView();
scrollBy(0, -offset);
} else {
//if it is, redirect to the page
window.location.href = $(this).attr('href');
}
Full Screen (jsfiddle)
Edit:
From comment:
when trying to link back I am using ""; which is throwing off the
scrollspy by adding #section-2 to the url.
This is quite a tricky to solve because of the limited functions we can use on page redirection. However, you can do this:
First, remove this function $('.navbar li a').click(function(event) { completely, and place this code on top of the other scripts:
$("document").ready(function() {
$(document).on('click','.navbar li a',function(event) {
alert($(this).html());
event.preventDefault();
if($.trim($(this).html())!='FAQ'){
$($(this).attr('href'))[0].scrollIntoView();
scrollBy(0, -offset);
}
else
{
window.location.href = $(this).attr('href');
}
});
//document.referrer returns the url from which this page has been entered,
//we will use this to check if we are redirected from FAQs page
var previous_url = document.referrer;
if(previous_url=='http://dnwebdev.com/dev/faq/'){
//if we were redirected from FAQ page, we would have a #section-value in our url
//hash here fetched that value
var hash = document.URL.substr(document.URL.indexOf('#')+1);
//this is the important part, we are gonna trigger that the
//#section-value passed in url is _clicked_. And so the browser will
//scroll down to that section
$('.navbar li a#a-'+hash).trigger('click');
//once it scrolls down, this deletes the #section-value from url
history.pushState('', document.title, window.location.pathname);
}
});
For the above to work, you also need to add an id attribute to each of your <a> tag such as:
<a href="#section-1" id="a-section-1">
<a href="#section-2" id="a-section-2">
etc.
A little demonstration on how the trigger works: demo

give id to the first div i.e. like dynaDiv and modify FAQ as <a href="/faq" onclick='addFAQ();'> FAQ </a> define function as
function addFAQ(){
$("#dynaDiv").load("./faq.html");
}

Categories