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');
Related
Sorry for my elementary question, but I have spent a lot of time and I can't understand the mistake. I have a card and I'd like to show the button on the right inside the card footer. Now the button is displayed on the left.
Thank you in advance!
This is my HTML page where I have the card
<div class="row">
<div class="col-100 tablet-auto desktop-auto">
<div class="card">
<div class="card-content card-content-padding">
<div class="row">
<div class="col-100 tablet-auto desktop-80">
<div class="list">
<ul>
<li>
<!--<a class="item-link smart-select smart-select-init">-->
<a href="#" class="item-link smart-select smart-select-init" data-open-in="popup" data-virtual-list="fruits1" data-page-back-link-text="Indietro">
<select name="fruits1">
<option value="">apple</option>
<option value="">banana</option>
</select>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Fruits 1</div>
</div>
</div>
</a>
</li>
<li>
<a href="#" class="item-link smart-select smart-select-init" data-open-in="popup" data-virtual-list="fruits2" data-page-back-link-text="Indietro">
<select name="fruits2"> </select>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Fruits 2</div>
</div>
</div>
</a>
</li>
</ul>
</div>
<!-- ./ list -->
</div>
<!-- ./ block -->
</div>
<!--col-->
</div>
<!--row-->
</div>
<!--card-content-->
<div class="card-footer">
<div class="row justify-content-right">
<div class="col text-align-right">
<a class="button button-fill" href="#">Search</a>
</div>
</div>
</div>
<!--card-footer-->
</div>
<!--card-->
</div>
<!--col-->
You can resolve issue by distribute a footer to two section, one for left, and second one for right, or by custom style....
You can update your code by adding empty span before your button, then the card footer will display your button in right...
Look at this demo.
<div class="card">
<div class="card-header">Card header</div>
<div class="card-content card-content-padding">Card with header and footer. Card headers are used to display card titles and footers for additional information or just for custom actions.</div>
<div class="card-footer"><span></span><a class="button button-fill" href="#">Search</a>
</div>
I am building my first app with framework7. Now I'm stuck because the tab with id="tab-1" is not loading, when the page is loaded or when refreshing page. I first have to tap on 'Home'-Tab to load tab-1. Tab-1 has "tab-active" an the Tab-link has also "tab-link-active".
Anyone seeing the problem? Thanks in advance.
<div class="statusbar-overlay"></div>
<div class="panel-overlay"></div>
<div class="panel panel-left panel-reveal">
<div class="content-block">
<p>Left panel content goes here</p>
</div>
</div>
<div class="views">
<div class="view view-main">
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<i class="f7-icons ios-only">bars</i>
</div>
<div class="center sliding">App Title</div>
</div>
</div>
<!-- Bottom Toolbar-->
<div class="toolbar tabbar-labels tabbar">
<div class="toolbar-inner">
<a href="#tab-1" class="tab-link tab-link-active">
<i class="f7-icons ios-only">home</i>
<span class="tabbar-label">Home</span>
</a>
<a href="#tab-2" class="tab-link">
<i class="f7-icons ios-only">bell</i>
<span class="tabbar-label">Alerts</span>
</a>
<a href="#tab-3" class="tab-link">
<i class="f7-icons ios-only">today</i>
<span class="tabbar-label">Calendar</span>
</a>
<a href="#tab-4" class="tab-link">
<i class="f7-icons ios-only">paper_plane</i>
<span class="tabbar-label">News</span>
</a>
</div>
</div>
<div class="pages navbar-fixed">
<div data-name="home" class="page">
<div class="tabs">
<div class="page-content tab tab-active" id="tab-1">
<div class="block">
<span><b>Home</b></span>
<p>...</p>
</div>
</div>
<div class="page-content tab" id="tab-2">
<div class="block">
<span><b>Alerts</b></span>
<p>...</p>
</div>
</div>
<div class="page-content tab" id="tab-3">
<div class="block">
<span><b>Calendar</b></span>
<p>...</p>
</div>
</div>
<div class="page-content tab" id="tab-4">
<div class="block">
<span><b>News</b></span>
<p>...</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="lib/framework7/js/framework7.min.js"></script>
<script type="text/javascript" src="js/my-app.js"></script>
Everything seems fine. You are using page-content tab. Add a margin-top for each page-content tab and check once.
Hey guys having a problem with masonry plugin.
I'm trying to load the simple layout using percentPosition: true; and the problem is when everything loads, layout loads without the gutter and adds it later which causes all images to shift and it looks quiet annoying.
cant seem to figure out the solution to load it the way that nothing would shift. Bellow is the code:
and here is the link: dev3.oaknyc.com
<div class="section group">
<div class="col-sizer"></div>
<div class="gutter-sizer"></div>
<div class="col col-span2">
<img src={{media url="img/10-21/1.jpg"}}>
<a href={{store url="blog/introducing-hope-shoes-more/"}}>
<div class="txt-overlay">
<div class="txt-title">
<span>Introducing:</span>
<h3>HOPE for women + men</h3>
</div>
</div>
</a>
</div>
<div class="col">
<img src={{media url="img/10-21/2.jpg"}}>
<a href={{store url="women/new-items.html"}}>
<div class="txt-overlay">
<div class="txt-title">
<span>Just In:</span>
<h3>HENRIK VIBSKOV</h3>
</div>
</div>
</a>
</div>
<div class="col">
<img src={{media url="img/10-21/3.jpg"}}>
<a href={{store url="women/designers/oak.html"}}>
<div class="txt-overlay">
<div class="txt-title">
<span>Shop:</span>
<h3>OAK Collection Women</h3>
</div>
</div>
</a>
</div>
<div class="col">
<img src={{media url="img/10-21/4.jpg"}}>
<a href={{store url="men/designers/oak-collection.html"}}>
<div class="txt-overlay">
<div class="txt-title">
<span>Shop:</span>
<h3> OAK Collection Men</h3>
</div>
</div>
</a>
</div>
<div class="col col-span2">
<img src={{media url="wysiwyg/blanco/img/10-21/5.jpg"}}>
<a href={{store url="women/designers/laura-siegel.html"}}>
<div class="txt-overlay">
<div class="txt-title">
<span>Shop:</span>
<h3>Laura Siegel</h3>
</div>
</div>
</a>
</div>
<div class="col">
<img src={{media url="img/10-21/6.jpg"}}>
<a href={{store url="women/accessories.html"}}>
<div class="txt-overlay">
<div class="txt-title">
<span>Shop:</span>
<h3>Women's Accessories</h3>
</div>
</div>
</a>
</div>
<script src="https://npmcdn.com/imagesloaded#4.1/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function(){
jQuery('.section').imagesLoaded(function(){
jQuery('.section').masonry({
// options
columnWidth: '.col-sizer',
itemSelector: '.col',
gutter: '.gutter-sizer',
percentPosition: true
});
});
});
//]]>
</script>
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>
I can't get this Bootstrap carousel snippet to work. I have added the code below to my Bootstrap HTML layout, but I'm not sure that the script is in the right place.
What am I doing wrong?
<!-- !FOTO AUTO -->
<div id="container-slider-dettaglio-auto">
<!-- Slider -->
<div id="slider-foto-auto" class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
<!-- Top part of the slider -->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" id="carousel-bounding-box">
<div class="carousel slide" id="myCarousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<img class="img-responsive" src="img/foto-auto/audi-s4/audi-s4-avant-3.jpeg" alt="Angolare Fronte Audi S4" title="Audi S4">
</div>
<div class="item" data-slide-number="1">
<img src="img/foto-auto/audi-s4/audi-s4-avant-3-2.jpeg" alt="Frontale Audi S4" title="Audi S4">
</div>
<div class="item" data-slide-number="2">
<img src="img/foto-auto/audi-s4/audi-s4-avant-3-3.jpeg" alt="Angolare Fronte Audi S4" title="Audi S4">
</div>
<div class="item" data-slide-number="3">
<img src="img/foto-auto/audi-s4/audi-s4-avant-3-4.jpeg" alt="Angolare Retro Audi S4" title="Audi S4">
</div>
<div class="item" data-slide-number="4">
<img src="img/foto-auto/audi-s4/audi-s4-avant-3-5.jpeg" alt="Retro Audi S4" title="Audi S4">
</div>
<div class="item" data-slide-number="5">
<img src="img/foto-auto/audi-s4/audi-s4-avant-3-6.jpeg" alt="Cerchione Audi S4" title="Audi S4">
</div>
</div>
<!-- Carousel nav -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"></a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
<div class="hidden-xs col-lg-12" id="slider-thumbs">
<!-- Bottom switcher of slider -->
<ul class="hide-bullets">
<li class="col-sm-4 col-md-4 col-lg-4">
<a class="thumbnail" id="carousel-selector-0">
<img src="img/foto-auto/audi-s4/thumb/audi-s4-avant-3-thumb.jpg" alt="Thumb Frontale Audi S4">
</a>
</li>
<li class="col-sm-4 col-md-4 col-lg-4">
<a class="thumbnail" id="carousel-selector-0">
<img src="img/foto-auto/audi-s4/thumb/audi-s4-avant-3-2-thumb.jpg" alt="Thumb Frontale Audi S4">
</a>
</li>
<li class="col-sm-4 col-md-4 col-lg-4">
<a class="thumbnail" id="carousel-selector-1">
<img src="img/foto-auto/audi-s4/thumb/audi-s4-avant-3-3-thumb.jpg" alt="Thumb Frontale Audi S4">
</a>
</li>
<li class="col-sm-4 col-md-4 col-lg-4">
<a class="thumbnail" id="carousel-selector-2">
<img src="img/foto-auto/audi-s4/thumb/audi-s4-avant-3-4-thumb.jpg" alt="Thumb Frontale Audi S4">
</a>
</li>
<li class="col-sm-4 col-md-4 col-lg-4">
<a class="thumbnail" id="carousel-selector-3">
<img src="img/foto-auto/audi-s4/thumb/audi-s4-avant-3-5-thumb.jpg" alt="Thumb Frontale Audi S4">
</a>
</li>
<li class="col-sm-4 col-md-4 col-lg-4">
<a class="thumbnail" id="carousel-selector-4">
<img src="img/foto-auto/audi-s4/thumb/audi-s4-avant-3-6-thumb.jpg" alt="Thumb Frontale Audi S4">
</a>
</li>
</ul>
</div>
</div>
<!--/slider-dettaglio-auto-->
</div>
<!--/container-slider-dettaglio-auto-->
<!-- /FOTO AUTO -->
</div>
<!-- /content -->
</div>
<!-- END CONTENT ROW -->
I added this script before the end of the <body>:
jQuery(document).ready(function($) {
$('#myCarousel').carousel({
interval: 5000
});
$('#carousel-text').html($('#slide-content-0').html());
//Handles the carousel thumbnails
$('[id^=carousel-selector-]').click(function() {
var id = this.id.substr(this.id.lastIndexOf("-") + 1);
var id = parseInt(id);
$('#myCarousel').carousel(id);
});
// When the carousel slides, auto update the text
$('#myCarousel').on('slid.bs.carousel', function(e) {
var id = $('.item.active').data('slide-number');
$('#carousel-text').html($('#slide-content-' + id).html());
});
});
The solution that Work:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> into the <head> and not at the bottom of <body>.
Is it correct?