I'm trying to activate a link when the mouse button is pressed down but before it is released.
example code http://codepen.io/MHUMPHRI/pen/GqJGre?editors=1010re?editors=1010
In my example code the content in the RHS tabs is displayed when the LHS link is selected and the mouse button is released. I'd like the tab content to be displayed as soon as the mouse button is pressed down. Grateful for any help. Mike
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<div class="container-fluid">
<div class="row">
<div class="nopadding col-xs-4">
<a class="active" data-toggle="pill" href="#content1">
<div class="blue-box col-xs-12">
<h1>box1<h1>
</div>
</a>
<a data-toggle="pill" href="#content2">
<div class="blue-box col-xs-12">
<h1>box2<h1>
</div>
</a>
<a data-toggle="pill" href="#content3">
<div class="blue-box col-xs-12">
<h1>box3<h1>
</div>
</a>
</div>
<div class="nopadding col-xs-8">
<div class="tab-content">
<div id="content1" class="tab-pane fade in active">
<div class="col-xs-12 grey-box">
<h1>output1<h1>
</div>
</div>
<div id="content2" class="tab-pane fade">
<div class="col-xs-12 grey-box">
<h1>output2<h1>
</div>
</div>
<div id="content3" class="tab-pane fade">
<div class="col-xs-12 grey-box">
<h1>output3<h1>
</div>
</div>
</div>
</div>
since you imported jQuery, here's a jQuery solution:
first, start off your jQuery with $(document).ready(function() { ... });
then add code:
var pills = $('a[data-toggle="pill"]');
pills.mousedown(function() {
this.click();
});
this way, whenever you click-and-hold (.mousedown) you will call an entire .click event on the same element.
Related
I have a slider on a page, I need the link in that slider to send it to another page with a specific tab open.
I tried to use # 1 at the end of the link however it does not work.
I think i have to use some js to do this, have to put active class on tab and remove the active from first tab. And they will have several sliders that will send to that same page with another open tab.
SLIDER
<div class="container-fluid">
<div class="row text-center my-3">
<div class="row mx-auto my-auto central_slider_prod">
<div id="recipeCarousel" class="carousel slide w-100 tamanho_carousel" data-ride="carousel">
<div class="carousel-inner w-100" role="listbox">
<div class="carousel-item active">
<img class="img-fluid" src="test1.jpg" /><span>Test 1</span>
</div>
<div class="carousel-item">
<img class="img-fluid" src="test2.jpg" /><span>Test 2</span>
</div>
</div>
</div>
</div>
</div>
</div>
TABS
<div id="exTab2" class="container alinha-tab">
<ul class="nav nav-tabs">
<li class="bt_prod_1">
<a id="bt_prod_2" class="active" href="#1" data-toggle="tab">
Test 1
</a>
</li>
<li class="bt_prod_1">
<a id="bt_prod_3" href="#2" data-toggle="tab">
Test 2
</a>
</li>
</ul>
<div class="tab-content">
<!-- TAB #1 -->
<div class="tab-pane active" id="1">
<div class="container-fluid">
<div class="row">
Test 1
</div>
</div>
</div>
<!-- TAB #2 -->
<div class="tab-pane" id="2">
<div class="container-fluid">
<div class="row">
Test 2
</div>
</div>
</div>
</div>
</div>
</div>
To open a new tab you add target="_blank" to your anchor link
<img class="img-fluid" src="test2.jpg" /><span>Test 2</span>
Try this in your js if you use jquery:
$(window.location.hash).tab('show');
So i have recently picked up a site from a friend and i am in the process of rebuilding it using the original bootstrap v3 that was originally put in place. I have added the .collapse class onto a div to hide it away until clicked but when it is clicked the box doesn't stay open just drops down and then immediately goes back to being closed.
If i watch the steps of what happens using the inspect tool in chrome i can see the class starts as 'collapse' changes to 'collapsing' and applies the css styles relevant and then finishes as 'collapse in'. However the box has closed and the 'collapse' class is back to being applied to the div even though it is displaying as 'collapse in'.
<div class="collapse" id="facebookreviews">
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-2">
<imgsrc="img/testimonial.jpg" alt="Testimonial image" class="img-responsive">
</div>
<div class="col-xs-12 col-sm-8 col-md-2">
<p>After my series of treatments with Inch Go Lipo, I lost 6” off my waist! Thanks Inch Go Lipo!</p>
<p><strong>Stacey, Shropshire</strong></p>
</div>
<div class="col-xs-12 col-sm-4 col-md-2">
<img src="img/testimonial.jpg" alt="Testimonial image" class="img-responsive">
</div>
<div class="col-xs-12 col-sm-8 col-md-2">
<p>After my series of treatments with Inch Go Lipo, I lost 6” off my waist! Thanks Inch Go Lipo!</p>
<p><strong>Stacey, Shropshire</strong></p>
</div>
<div class="col-xs-12 col-sm-4 col-md-2">
<img src="img/testimonial.jpg" alt="Testimonial image" class="img-responsive">
</div>
<div class="col-xs-12 col-sm-8 col-md-2">
<p>After my series of treatments with Inch Go Lipo, I lost 6” off my waist! Thanks Inch Go Lipo!</p>
<p><strong>Stacey, Shropshire</strong></p>
</div>
</div>
</div>
<div class="spacer-25">
</div>
<div class="row">
<div class="col-xs-12 text-center">
<button class="btn btn-black" type="button" data-toggle="collapse" data-target="#facebookreviews" aria-expanded="false" aria-controls="facebookreviews">Click to view more
</button>
</div>
</div>
.collapse {
display: none;
&.in { display: block; }
.collapsing {
position: relative;
height: 0;
overflow: hidden;
#include transition-property(height, visibility);
#include transition-duration(.35s);
#include transition-timing-function(ease);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
!https://i.imgur.com/veYWYoZ.png
I loaded your HTML into a file, put the CSS in a CSS, and linked the CSS...
I also put bootstrap 3 css in at the top and jquery and bootstrap.js files in a script tag at the bottom...
I was able to get them to collapse just fine both with putting your collapse div with a container and without a container class.
is jquery and bootstrap.js loaded at the bottom?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="testing.css">
</head>
<body>
<div class="container collapse" id="facebookreviews">
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-2">
<imgsrc="img/testimonial.jpg" alt="Testimonial image" class="img-responsive">
</div>
<div class="col-xs-12 col-sm-8 col-md-2">
<p>After my series of treatments with Inch Go Lipo, I lost 6” off my waist! Thanks Inch Go Lipo!</p>
<p><strong>Stacey, Shropshire</strong></p>
</div>
<div class="col-xs-12 col-sm-4 col-md-2">
<img src="img/testimonial.jpg" alt="Testimonial image" class="img-responsive">
</div>
<div class="col-xs-12 col-sm-8 col-md-2">
<p>After my series of treatments with Inch Go Lipo, I lost 6” off my waist! Thanks Inch Go Lipo!</p>
<p><strong>Stacey, Shropshire</strong></p>
</div>
<div class="col-xs-12 col-sm-4 col-md-2">
<img src="img/testimonial.jpg" alt="Testimonial image" class="img-responsive">
</div>
<div class="col-xs-12 col-sm-8 col-md-2">
<p>After my series of treatments with Inch Go Lipo, I lost 6” off my waist! Thanks Inch Go Lipo!</p>
<p><strong>Stacey, Shropshire</strong></p>
</div>
</div>
</div>
<div class="spacer-25">
</div>
<div class="row">
<div class="col-xs-12 text-center">
<button class="btn btn-black" type="button" data-toggle="collapse" data-target="#facebookreviews" aria-expanded="false" aria-controls="facebookreviews">Click to view more
</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Collapse Working
Collapse Working Pt 2
I'm using Bootstrap v3.3.5 in my website.
Now I've HTML code of modal dialog box as follows :
<div style="display: block; padding-right: 13px;" id="myModal-event" class="modal fade in" role="dialog">
<div role="document" style="width:600px;position:relative;margin:auto;margin-top:10px;">
<div class="modal-content" style="border:0;">
<div role="document" class="modal-dialog event-planner">
<div class="modal-content">
<div class="modal-header">
<h4 id="myModalLabel" class="modal-title">Event Details</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-6 col-md-6 col-sm-12">
<div class="event-title">
NewDemoEvent5
<input name="hid_event_id" id="hid_event_id" value="501" type="hidden">
</div>
<ul>
<li><img src="http://localhost/CKWEB_28-12-2015/user_ui_files/images/time.png" alt=""> 12:00 pm</li>
<li><img src="http://localhost/CKWEB_28-12-2015/user_ui_files/images/calender.png" alt=""> Thursday, January 7</li>
<li>
<img src="http://localhost/CKWEB_28-12-2015/user_ui_files/images/location.png" alt="">
Home Nightclub, Sydney, New South Wales, Australia
</li>
<li><img src="http://localhost/CKWEB_28-12-2015/user_ui_files/images/group_event.png" alt="">Group: Boxing Day</li>
</ul>
</div>
<div class="col-sm-6 col-md-6 col-sm-12">
<div class="form-group" align="right">
<select name="user_event_responce" id="user_event_responce" class="form-control" style="width:150px;">
<option value="0">I am..</option>
<option value="1" selected="selected">Going</option>
<option value="2">Maybe</option>
<option value="3">Not Going</option>
</select>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="event-menu">
<ul class="nav nav-tabs" id="myTab">
<li class=""><a aria-expanded="false" href="#description" data-toggle="tab">Description</a></li>
<li>Feeds</li>
<li>Going</li>
<li>Maybe</li>
<li class="active"><a aria-expanded="true" href="#notgoing" data-toggle="tab">Not Going</a></li>
</ul>
</div>
</div>
<hr>
<div class="tab-content">
<div class="tab-pane" id="description">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
DemoEvent5 is added successfully.
</div>
</div>
</div>
<div class="tab-pane" id="feeds">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
Work In Progress
</div>
</div>
</div>
<div class="tab-pane" id="going">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="col-md-2 col-sm-2 col-xs-12 no-padding">
<div class="block"> <img src="http://app.campusknot.com/file/pic/user/1585_100_square.jpg" class="img-event" alt="">
<span class="author">Sushil Kadam</span>
<span class="degree"></span>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="maybe">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
</div>
</div>
</div>
<div class="tab-pane active" id="notgoing">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
On this modal dialog I want to show three black colored bold dots and upon clicking on those dots a vertical pop-up menu should open up consisting of menus Edit Event, Invite Members, Delete Event. Each of the menu items should be separated by a horizontal line. When user clicks somewhere else apart from the opened-up menu the menu pop-up should get close.
PFA the psd image for reference of what I need to do.
Three bold black-colored dots are actually got hidden behind the pop-up menu.
I want the exactly same functionality working.
Thanks.
try this HTML which uses bootstrap :
<div class="dropdown">
<p class="dropdown-toggle" data-toggle="dropdown">
<a class="glyphicon glyphicon-option-horizontal"></a></p>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
hi i have a bootstrap tab shown within another bootstrap tab.
i have these content in a html file which is loaded using ajax request. when page is refreshed .if user is in a particular tab say main2 ->sub2 , after the content is loaded i want to show the same main2->sub2 tab not main1->sub1 tab
refresh is triggered using a separate button in main.html
main.html
<a onclick="data_reload_refresh()"><button type="button" class="btn btn-success" id="refresh_button" style="float:right;background-color:#6D6A66;border-color:#312D25;"> Refresh</button> </a>
<#include "./tabs.html">
tabs.html
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6" style="width: 100%; margin-left: -18px;">
<div class="panel with-nav-tabs panel-primary">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li class="active">Main 1</li>
<li> Main 2</li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="tabone">
<div class="row">
<div class="col-md-6" style="width: 100%">
<div class="panel with-nav-tabs panel-info">
<div class="panel-heading">
<ul class="nav nav-tabs" style="color: red;">
<li>sub 1</li>
<li>sub 2</li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="tabsub1">1st Tab Sub 1</div>
<div class="tab-pane fade " id="tabsub2">1st Tab Sub 2</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade " id="tabtwo">
<div class="row">
<div class="col-md-6" style="width: 100%">
<div class="panel with-nav-tabs panel-info">
<div class="panel-heading">
<ul class="nav nav-tabs" style="color: red;">
<li>sub 1</li>
<li>sub 2</li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="tabsub11">2nd Tab Sub 1</div>
<div class="tab-pane fade " id="tabsub22">2nd Tab Sub 2</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
tabs.html will be returned by ajax request .i want to retain the tab in both inner and outer tab ,which is shown prior to refresh,after content is refreshed.
I have an accordion to hide blog posts in a webpage. I have a downwards arrow which I want to rotate to an upwards arrow when a blog post (accordion section) has been opened. These should be independent of other arrows attached to other posts obviously.
I am using bootstrap framework as a base. I tried following the instructions here http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_collapse_togglebtn&stacked=h , along with what I already know/have used to try to add rotation. My problem is that, as I'm not using a button (the whole blog post is clickable to expand and collapse it), I can't work out what I need to put in the javascript where the question marks are.
(adding a data-target attribute to the tag breaks the expandability of the post).
$(" ??? ").on("hide.bs.collapse", function(){
$('.expand-image.text-center.glyphicon.glyphicon-chevron-down').addClass('turn-arrow');
});
$(" ??? ").on("show.bs.collapse", function(){
$('.expand-image.text-center.glyphicon.glyphicon-chevron-down').removeClass('turn-arrow');
});
expand-image.text-center.glyphicon.glyphicon-chevron-down.turn-arrow {
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<a class="blog" data-toggle="collapse" data-parent="#accordion"
href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<div class="panel">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<div class="row">
<div class="container col-md-12 heading-container">
<div class="col-md-1 col-sm-2 text-center">
<h3 class="date-text">Jun 25th</h3>
</div>
<div class="col-md-11 col-sm-10">
<h3>This is where the post title goes</h3>
</div>
</div>
</div>
</h4>
</div>
<div class="panel-teaser panel-body" >
<div class="row">
<div class="col-md-1">
</div>
<div class="container col-md-11">
This is where the description goes
This should be the blog post's first paragraph (which needs to be catchy, no images here though)
</div>
</div>
</div>
<div id="collapseOne" class="panel-collapse collapse in"
role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<div class="row">
<div class="col-md-1">
</div>
<div class="container col-md-11">
This is where the main text body goes.
This should be the rest of the blog post, images and all)
</div>
</div>
</div>
</div>
<span class="expand-image text-center glyphicon glyphicon-chevron-down"></span>
<hr>
</div>
</a>
<a class="blog collapsed" data-toggle="collapse" data-parent="#accordion"
href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<div class="panel">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<div class="row">
<div class="container col-md-12 heading-container">
<div class="col-md-1 col-sm-2 text-center">
<h3 class="date-text">Jun 26th</h3>
</div>
<div class="col-md-11 col-sm-10">
<h3>This is where the post title goes</h3>
</div>
</div>
</div>
</h4>
</div>
<div class="panel-teaser panel-body">
<div class="row">
<div class="col-md-1">
</div>
<div class="container col-md-11">
This is where the description goes. This should be the blog post's first paragraph (which needs to be catchy, no images here though)
</div>
</div>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<div class="row">
<div class="col-md-1">
</div>
<div class="container col-md-11">
This is where the main text body goes.
This should be the rest of the blog post, images and all)
</div>
</div>
</div>
</div>
<span class="expand-image text-center glyphicon glyphicon-chevron-down"></span>
<hr>
</div>
</a>
</div>
You can attach the eventHandler on any Element, that is one of the parent Elements of .collapse. This is because the Event is triggered on the .collapse Element and bubbles all the way uppward. You can read more about event bubbling here.
You could, for example, attach the eventHandler to every Element with class "blog" as I did to solve your problem.
Relevant jsFiddle
$(".blog").each(function () {
$(this).on("hide.bs.collapse", function () {
$(this).find('.expand-image.text-center.glyphicon.glyphicon-chevron-down').removeClass('turn-arrow');
});
$(this).on("show.bs.collapse", function () {
$(this).find('.expand-image.text-center.glyphicon.glyphicon-chevron-down').addClass('turn-arrow');
});
});
Note the .each at the beginning. This attaches a different eventHandler to every Element matching the selector.
Now you can search the icon to be rotated in this Element --> $(this).find(
This will only find the one arrow inside the clicked blog element.
A very detailed explanation can also be found in this post.