I have the beginnings of what I would like working but am afraid I'm not headed down a DRY path with my line of thinking.
Right now if you click any of the below divs it will hide or show a icon checkmark next to all the headers below.
I want only when a specific div is clicked to display the icon checkmark to the relevant header down the page.
What method should I use in my approach? The way I have it seemingly won't make sense down the road. Thanks for your attention and thanks for taking a look.
<div class="row container">
<div class="row offset1">
<div class="span3 frustrate_topside">
<div>
<p>Click here to only show icon-ok element next to relevant anecdotes!</p>
</div>
</div>
<div class="span3 frustrate_topside">
<div>
<p>Click here to only show icon-ok element next to relevant anecdotes!</p>
</div>
</div>
<div class="span3 frustrate_topside">
<div>
<p>Click here to only show icon-ok element next to relevant anecdotes!</p>
</div>
</div>
</div>
</div>
<div class="offset2 span6" id='container'>
<h5 class="faq_header"><i class="icon-ok"></i> Hey, it would be cool if..</h5>
<div class='content'>trouble</div>
<hr>
<h5 class="faq_header"><i class="icon-ok"></i> The kick is up! And..</h5>
<div class='content'> 80% completion rate.</div>
<hr>
<h5 class="faq_header"><i class="icon-ok"></i> Third anecdote</h5>
<div class='content'>joke on me</div>
</div>
<script>
$('div.frustrate_topside').click(function(){
$('i').toggle();
});
</script>
Here's a working JS fiddle for what you're asking for: http://jsfiddle.net/sTve6/1/
I don't have your file set up with the icons/images, so I used placeholder text of 'o' for each icon, and made the assumption that your icons start out hidden.
HTML:
<div class="row container">
<div class="row offset1">
<div class="span3 frustrate_topside" for='q1'>
<div>
<p>Click here to only show icon-ok element next to relevant anecdotes!</p>
</div>
</div>
<div class="span3 frustrate_topside" for='q2'>
<div>
<p>Click here to only show icon-ok element next to relevant anecdotes!</p>
</div>
</div>
<div class="span3 frustrate_topside" for='q3'>
<div>
<p>Click here to only show icon-ok element next to relevant anecdotes!</p>
</div>
</div>
</div>
</div>
<div class="offset2 span6" id='container'>
<h5 class="faq_header"><i class="icon-ok" id="q1">o</i> Hey, it would be cool if..</h5>
<div class='content'>trouble</div>
<hr>
<h5 class="faq_header"><i class="icon-ok" id="q2">o</i> The kick is up! And..</h5>
<div class='content'> 80% completion rate.</div>
<hr>
<h5 class="faq_header"><i class="icon-ok" id="q3">o</i> Third anecdote</h5>
<div class='content'>joke on me</div>
</div>
CSS:
.icon-ok
{
display:none;
}
JS:
$('div.frustrate_topside').click(function(){
var elt = $(this).attr('for');
$("#" + elt).toggle();
});
Related
i have a div that when you click it,it opens a modal. as follows
<div if.bind="Members.length" click.delegate="GetProfiles($event.target)">
<div repeat.for="category of Types(Members)">
<div class="row">
<div class="col s3">
<div class="card blue-grey darken-1">
<div class="rotate-text-90-negative truncate">
${category.name}
</div>
</div>
</div>
</div>
</div>
</div>
so when the page loads and i have 3 category names displayed for example
Stationary
Office Equipment
Cleaning supplies
now when i click on Stationary i want it to open the "GetProfiles($event.target)" modal i have which it does as follows
<div md-modal="
in-duration: 1000;
out-duration: 1000;
dismissible:false;
"
md-modal.ref="GetProfile">
<div class="modal-content">
<div>
<div >
<md-input label="First Name" readonly.bind="false"></md-input>
</div>
</div>
</div>
</div>
i have the following on my type script page
async GetCrewProfiles(Members) {
this.GetProfile.open();
console.log(Members);
}
but now when i log the members out it comes back with all the members array as follows:
0:{Name:"Stationary" Id:"12365" active:true stock:"50"}
1:{Name:"Office Equipment" Id:"1278365" active:true stock:"0"}
2:{Name:"Cleaning supplies" Id:"12395" active:true stock:"5"}
how do i create an event that only returns the Member that i clicked on, so if i clicked on Stationary i only want to get the information for that and not return everything
i tried this
GetProfiles($event.target) and GetProfiles(Members)
but i cant figure out how to add a click event for a selected item
Have you tried moving your click.delegate function inside the repeat.for div?
I suggest you to move your click.delegate inside the repeat.for div. Something like this:
<div if.bind="Members.length">
<div repeat.for="category of Types(Members)">
<div class="row">
<div class="col s3">
<div class="card blue-grey darken-1">
<div click.delegate="GetProfiles($event.target)"
class="rotate-text-90-negative truncate"> ${category.name}
</div>
</div>
</div>
</div>
</div>
</div>
I want to make something like the amazon help page :
https://www.amazon.fr/gp/help/customer/display.html/ref=nav_cs_help?ie=UTF8&nodeId=508510#nav-top
When the mouse is in one category we can see the concern content on the right
My code works almost, however, when my mouse comes out of the link the right div is no longer active
There is my code :
Html :
<div class="activity--js margin-card activity-card card card-body">
<div class="row">
<div class="col-3 help__titles-part">
<% #helps.each do |help|%>
<p class="help__title" data-id='<%=help.id %>'><%=help.title%></p>
<%end%>
</div>
<div class="col-9 help__contents-part" >
<div class="row">
<% #helps.each do |help|%>
<div class="col-12 help__content-<%=help.id %>" style="display:none">
<p><%=help.content%></p>
</div>
<%end%>
</div>
</div>
</div>
</div>
JS:
$('.help__title').hover(
function () {
$(this).toggleClass('help__title-active');
Id = $(this).data("id");
console.log(Id);
$('.help__content-' + Id).toggleClass('help__content-active');
});
You asked it to be like the amazon example, which uses a mouseenter event, not click and definitely not hover.
jQuery(document).ready(function($){
$('.help__title').mouseenter(function(){
$('.help__title-active').removeClass('help__title-active');
$('.help__content-active').removeClass('help__content-active');
$(this).addClass('help__title-active');
Id = $(this).attr("data-id");
$('.help__content-' + Id).addClass('help__content-active');
});
});
.help__title-active{font-weight:bold; color:red}
.help__content-active{display:block !important;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="activity--js margin-card activity-card card card-body">
<div class="row">
<div class="col-3 help__titles-part">
<p class="help__title" data-id='1'>Title 1</p>
<p class="help__title" data-id='2'>Title 2</p>
<p class="help__title" data-id='3'>Title 3</p>
<p class="help__title" data-id='4'>Title 4</p>
</div>
======================================================================
<div class="col-9 help__contents-part" >
<div class="row">
<div class="col-12 help__content-1" style="display:none">
<p>Help 1</p>
</div>
<div class="col-12 help__content-2" style="display:none">
<p>Help 2</p>
</div>
<div class="col-12 help__content-3" style="display:none">
<p>Help 3</p>
</div>
<div class="col-12 help__content-4" style="display:none">
<p>Help 4</p>
</div>
</div>
</div>
</div>
You can use the following jQuery to achieve the above mentioned result:
var list = $("ul");
list.find("li").mouseenter(function(){
if($(this).hasClass("active")){
list.removeClass("active");
}else{
$(this).addClass("active");
$(this).siblings().removeClass("active");
}
});
I have used this dummy HTML:
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
I have used this as the CSS to make the code more understandable:
.active{
background-color:orange!important;
}
li{
background-color:blue;
color:white;
width:20%;
cursor:pointer;
}
li:not(:last-child){
margin-bottom:5px;
}
Here is a jsfiddle supporting this.
But this will easily be reset once the page is refreshed as this changes the layout dynamically, its not fixed.
I hope this was helpful.
I'm looking to get my highlighter (blue bar) to stay on the element that is clicked on. I want to keep the hover animation but also include the option to have it stay on the <div> the user clicks. Any insight is greatly appreciated.
Pen: https://codepen.io/chriskaram/pen/eGXrOp
<div class="demo">
<div class="demo__content">
<h2 class="demo__heading">Assessment</h2>
<div class="demo__elems">
<div class="demo__elem demo__elem-1">Novice Assessment</div>
<div class="demo__elem demo__elem-2">Apprentice Assessment</div>
<div class="demo__elem demo__elem-3">Advanced Assessment</div>
<span class="demo__hover demo__hover-1"></span>
<span class="demo__hover demo__hover-2"></span>
<span class="demo__hover demo__hover-3"></span>
<div class="demo__highlighter">
<div class="demo__elems">
<div class="demo__elem">Novice Assessment</div>
<div class="demo__elem">Apprentice Assessment</div>
<div class="demo__elem">Advanced Assessment</div>
</div>
</div>
<div class="demo__examples">
<div class="demo__examples-nb">
<div class="nb-inner">
<div class="example example-adv">
<div class="example-adv">
<div class="example-adv__top">
<div class="example-adv__top-search"></div>
</div>
<div class="example-adv__mid"></div>
<div class="example-adv__line"></div>
<div class="example-adv__line long"></div>
</div>
</div>
<div class="example example-web">
<div class="example-web__top"></div>
<div class="example-web__left"></div>
<div class="example-web__right">
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
</div>
</div>
<div class="example example-both">
<div class="example-both__half example-both__left">
<div class="example-both__left-top"></div>
<div class="example-both__left-mid"></div>
</div>
<div class="example-both__half example-both__right">
<div class="example-both__right-top"></div>
<div class="example-both__right-mid"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
In this example, I just focused on demo__element-3.
Check this link: https://codepen.io/anon/pen/GMbYdz
These are the modifications to be made:
CSS:
Add .active to all demo__hover-3:hover styles(in css).
(ie, add .demo__hover-3.active to .demo__hover-3:hover)
Element:
Add class
active to demo__hover elements.
(in this case, it become
<span class="demo__hover demo__hover-3 active"></span>)
Jquery:
Add jquery to add active to element if user clicks it.
Just like the bootstrap manu when you click one option it will add a class 'active' to element <li>
how can I create some space between grid spans in Twitter bootstrap? I am using margin or padding, but both of them push the last grid span to a new line and breaks the layout. Here is the jsfiddle:
http://jsfiddle.net/jUQEc/1/
And, some markup:
<div class="container-narrow">
<h4 class="title">Featured Companies</h4>
<div class="row-fluid" id="posts">
<div class="span6 post">
<h4 class="title">Company Details</h4>
<div class="box">
test
</div>
</div>
<div class="span3 post">
<h4 class="title">Company News</h4>
<div class="box">
test<br>test<br>testtest<br>test<br>testtest<br>test<br>testtest<br>test<br>test
</div>
</div>
<div class="span3 post">
<h4 class="title">Company News</h4>
<div class="box">
test<br>test<br>testtest<br>test<br>testtest<br>test<br>testtest<br>test<br>test
</div>
</div>
<div class="span4 post">
<h4 class="title">Company News</h4>
<div class="box">
test<br>test<br>test
</div>
</div>
</div>
</div>
Two things:
You need to add the container-fluid class to the container. This will keep the left/right margins in tact when you bring the screen in.
Add a box-sizing:border-box to the .box class to tell the browser to keep all padding and margins inside the width defined by the span classes.
Lastly, you have a header tag inside the container but not in a row/span. You will probably get more consistent rendering if you wrap it up.
Here is a fiddle: http://jsfiddle.net/8RVx6/
I want my fluid boxes to take all the content. This is what I get now:
And this is what I am looking for:
I am using the Twitter bootstrap.
Here is the jsfiddle, exactly like my layout shows:
http://jsfiddle.net/jUQEc/
Current html markup:
<div class="container-narrow">
<h4 class="title">Featured Companies</h4>
<div class="row-fluid" id="container" class="js-masonry" data-masonry-options='{ "columnWidth": 200, "itemSelector": ".item" }'>
<div class="span6 item">
<h4 class="title">Company Details</h4>
<div class="box">
test
</div>
</div>
<div class="span3 item">
<h4 class="title">Company News</h4>
<div class="box">
test<br>test<br>testtest<br>test<br>testtest<br>test<br>testtest<br>test<br>test
</div>
</div>
<div class="span3 item">
<h4 class="title">Company News</h4>
<div class="box">
test<br>test<br>testtest<br>test<br>testtest<br>test<br>testtest<br>test<br>test
</div>
</div>
<div class="span4 item">
<h4 class="title">Company News</h4>
<div class="box">
test<br>test<br>test
</div>
</div>
</div>
</div>
Thanks.
You should put a width on the 3rd box and then float it right. If it fits, it will sneak up and fill in the space you are looking for. Perhaps you should brush up on how floats work and take a look at how this applies to divs in bootstrap. Hope this helps!