I'm trying the tab example from semantic ui but I can't make it work. the tabs don't change. did I forget to include something?
$(function() {
$('.menu .item').tab();
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.js"></script>
<div class="ui top attached tabular menu">
<a class="item active" data-tab="first">First</a>
<a class="item" data-tab="second">Second</a>
<a class="item" data-tab="third">Third</a>
</div>
<div class="ui bottom attached tab segment active" data-tab="first">
First
</div>
<div class="ui bottom attached tab segment" data-tab="second">
Second
</div>
<div class="ui bottom attached tab segment" data-tab="third">
Third
</div>
I beleive you need to call this
$(function () {
$('.menu .item').tab();
});
to make your tabs works.
And semantic-ui have great documentation you should look there.
Related
I'm new to jQuery and I have some issues to stop the scrolling effect. For context, I use this code for hide and show some section on button click.
This is my code:
jQuery(function($) {
$('.rv_button1').click(function(e) {
e.preventDefault();
$("#reveal1").slideToggle();
$('.rv_button1').toggleClass('opened closed');
});
});
I use wordpress with divi theme, the html is not really clear but this part is where my jQuery function is made for (sorry for my English though)
<div class="et_pb_button_module_wrapper et_pb_button_0_wrapper et_pb_button_alignment_center et_pb_module ">
<a class="et_pb_button et_pb_button_0 rv_button et_pb_bg_layout_light opened" href="http://valerieb30.sg-host.com/notre-equipe/#reveal">Québec</a>
</div>
<div id="reveal" class="et_pb_row et_pb_row_1 et_pb_equal_columns et_pb_gutters2" style="display: block;">
<div class="et_pb_column et_pb_column_4_4 et_pb_column_1 et_pb_css_mix_blend_mode_passthrough et-last-child">
<div class="et_pb_module et_pb_text et_pb_text_0 et_pb_text_align_left et_pb_bg_layout_light">
<div class="et_pb_text_inner"><h2>Cuisinistes</h2></div>
</div>
<div class="et_pb_module et_pb_de_mach_archive_loop et_pb_de_mach_archive_loop_0 main-loop loadmore-align- grid-layout-grid main-archive-loop
I want to select a tab on clicking a link. I tried using different online available solutions (including $('ul.tabs').tabs('select_tab', 'tab_id');) but none seems to be work with current materialize version. The official documentation for materialize states to do the initialization using var instance = M.Tabs.init(el, options); instance.select('tab_id'); but none of the methods seem to work correctly with current version or has been clearly specified w.r.t Materialize Tabs.
Any help is greatly appreciated. Below is the code snippet along with jsfiddle link,
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<!--
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
-->
<script>
$(document).ready(function() {
$('ul.tabs').tabs();
$("#btnContinue").click(function() {
$('ul.tabs').tabs('select_tab', 'test2');
});
});
/* var instance = new M.Tabs.init(el, options);
function check_active(){
var instance = M.Tabs.getInstance(elem);
instance.select('test2');
} */
</script>
</head>
<body>
<div class="col s12">
<ul class="tabs">
<li class="tab col s4">tab1
</li>
<li class="tab col s4">tab2
</li>
<li class="tab col s4">tab3
</li>
</ul>
</div>
<div id='test1' class="col s12">
<!--<a id="btnContinue" href='#test2' onclick="check_active();">continue</a>-->
<a id="btnContinue" href='#test2'>continue</a>
</div>
<div id='test2' class="col s12"></div>
</body>
</html>
JSFiddle Link for the same: https://jsfiddle.net/chirag_cyber/6evpqcfb/6/
You should change
$('ul.tabs').tabs('select_tab', 'test2');
to :
$('ul.tabs').tabs('select', 'test2');
select shows tab content that corresponds to the tab with the id. JSFiddle
I'm trying to use Fullpage.js. Here is my script:
<div id="fullpage" style="margin-top: 55px">
<div class="section" id="first" style="background-color: red">Some section - Home</div>
<div class="section" id="services" style="background-color: blue">Some section - Services</div>
<div class="section" id="why" style="background-color: green">Some section - Why</div>
<div class="section" id="portofolio" style="background-color: red">Some section - Portofolio</div>
<div class="section" id="price" style="background-color: blue">Some section - Price</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
menu: '#navbarNav',
css3: true,
scrollingSpeed: 1000
});
});
</script>
The problem is, there is no slide effect in my HTML page. Any solutions? I don't see any errors in my browser console.
UPDATE
There is a second problem, When I scroll to random section then I click the menu, the anchor is not working, I mean it keeps at the section which I scroll.
You need to define your anchors in your script, like this:
$(document).ready(function() {
$('#fullpage').fullpage({
menu: '#navbarNav',
css3: true,
scrollingSpeed: 1000,
anchors:['first, 'secondPage', 'why', 'portofolio', 'price']
});
};
Source: https://github.com/alvarotrigo/fullPage.js#fullpagejs
please, could you insert your javascript code inside the $(document).ready() to be sure that it is ready to execute. In your case, it should be something like:
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
menu: '#navbarNav',
css3: true,
scrollingSpeed: 1000
});
};
</script>
Hope this can resolve your problem.
Thank you
You need to write the ID on href anchor attribute like this
<ul id=#menu>
<li data-menuanchor="first" class="active">
First
</li>
<li data-menuanchor="services" class="active">
Services
</li>
</ul>
i have a problem, that i want to make my component could add new sidebar menu item each item user clickin an add button. so basically my component should appear when user defining their own sidebar menu item.
here's the vue js code i've write:
Vue.component('sb-menu-item', {
props: ['attrib'],
template: '<a class="item"><i class="{{attrib.icon}} icon"></i>{{attrib.name}}</a>'
});
new Vue({
el: '#sb-list',
data: {
itemsProp: [{icon: 'calendar icon', name: 'history'}],
newItems: [{icon: '', name: ''}]
},
methods: {
addItem: function (){
this.itemsProp.push({icon: this.newItems.icon, name: this.newItems.name});
// this.itemsProp.name.push(this.attrib.name);
this.newItems = [];
},
delItem: function (){
this.itemsProp.pop();
}
}
});
<div class="ui top attached menu">
<a class="item">
<i class="sidebar icon"></i>
<i class="right chevron icon"></i>
Menu
</a>
</div>
<div class="ui bottom attached segment pushable" id="sb-list">
<div class="ui visible left vertical sidebar menu" >
<a class="item">
<i class="home icon"></i>
Dashboard
</a>
<a class="item">
<i class="user icon"></i>
Account
</a>
<sb-menu-item v-for="item in itemsProp" v-bind:attrib="item" v-model="itemsProp"></sb-menu-item>
</div>
<div class="pusher">
<div class="ui basic teal segment">
<h3 class="ui header">Insert New Sidebar Items</h3>
<hr />
<form class="ui tiny teal form compact raised padded segment">
<div class="field">
<input type="text" placeholder="Item Name" v-model="newItems.name">
</div>
<div class="field">
<input type="text" placeholder="icon name" v-model="newItems.icon">
</div>
<button class="ui medium teal float button" v-on:click="addItem"><i class="cubes icon"></i> Make It!</button>
<button class="ui medium red float button" v-on:click="delItem"><i class="trash icon"></i>Pop Last Menu! Now!</button>
</form>
<p></p>
<div class="ui medium teal raised padded segment">{{$data | json}}</div>
</div>
</div>
</div>
this codes work, but each time i click the add button it has been added their own sidebar menu item that i've defined from the forms, and in a seconds those item disappear. (i am using semanticUI though)
sorry for my bad english and explanation. i hope u can understand this, thanks!
I see 2 potential issues. I will try to add a jsFiddle later maybe.
First of all I would make the newItem and object instead of an array.
Second issue is the v-model in the sb-menu-item component. Since you already send the item via attrib prop, you don't need the v-model there.
Here is a fiddle with a simple example of adding/removing stuff based on inputs.
https://jsfiddle.net/z11fe07p/437/
Also note that in case you refresh the page, all the data will be lost because vue is not meant for persiting data.
I have a tabbed toggle statistic page, which has 10 separate tabs that include charts. By clicking each tab, preloaded corresponding chart is being showed up. However, it does not scale into its container. More weird thing is, when I resize the window, visible chart is shown properly (I suppose it does some recalculation thingy). How should I modify my code so that it does that recalculation thingy after a click, or any suggestions on the problem?
Here is my jsfiddle:
http://jsfiddle.net/g66ut7c6/
<!--BEGIN TABS-->
<div class="tabbable tabbable-custom">
<ul class="nav nav-tabs">
<li>
<a href="#tab_1_1" data-toggle="tab">
1
</a>
</li>
<li>
<a href="#tab_1_2" data-toggle="tab">
2
</a>
</li>
<li>
<a href="#tab_1_3" data-toggle="tab">
3
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="tab_1_1">
<div class="scroller">
<div class="col-md-6 col-md-offset-3">
<div class="portlet light">
<p> Piechart by ülkeler </p>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab_1_2">
<div class="scroller">
<div class="col-md-6 col-md-offset-3">
<div class="portlet light">
<p> Piechart by step dağılımı </p>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab_1_3">
<div class="scroller">
<div class="col-md-6 col-md-offset-3">
<div class="portlet light">
<p> Piechart by hasta sayısı ay </p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--END TABS-->
Before resize
After a resize, the size is okay
I could not include charts in my jsfiddle because they contain some ruby code.
PS: Using Chartkick and Google Charts to draw charts, and MetronicJS for tabs.
Edit: The first chart that is visible by default is being display properly initially, however others are not. After a resize of a window when another chart is visible, the previous one gets broken again.
You can programmatically fire the 'resize' event:
window.dispatchEvent(new Event('resize'));
Just attach it to the 'click' event that shows the tab.
In your case:
$('div.tabbable > ul > li > a').click( function() {
window.dispatchEvent(new Event('resize'));
});
If your component doesn't resize as respond to the event, you could actually resize the window with:
window.resizeTo(width, height);
UPDATE:
If it is not posible to resize the window (see comments) you could try to redraw the chart when the tab becomes visible. Maybe in that way the chart is able to calculate properly the dimensions it needs to fit in. Something like:
$( 'div.tabbable > ul > li > a' ).click( function() {
myChart.draw( myData );
});
Hope it helps!