I'm creating component based Tab functionality. Please find the code here
deleteTab: function(selectedTab){
this.tabs = this.tabs.filter(function(tab){
return tab._uid != selectedTab._uid
});
}
In there I've added remove button, which needs to remove the tab and tab details block. Anyone know how to remove the tab details?
I will suggest you to follow this video laracasts for a better code.
To delete your tab and content, you will need to do:
deleteTab: function(tab){
tab.isActive=false;
index = this.tabs.indexOf(tab);
if (index > -1) {
this.tabs.splice(index, 1);
}
console.log(tab)
}
check fiddle
Related
There have already been answers to this question but I am still unsure exactly how it works.
I am using the following HTML in my footer.php:
<div id="popup">
<div>
<div id="popup-close">X</div>
<h2>Content Goes Here</h2>
</div>
</div>
and the following Javascript:
$j(document).ready(function() {
$j("#popup").delay(2000).fadeIn();
$j('#popup-close').click(function(e) // You are clicking the close button
{
$j('#popup').fadeOut(); // Now the pop up is hiden.
});
$j('#popup').click(function(e)
{
$j('#popup').fadeOut();
});
});
Everything works great, but I want to only show the pop up once per user (maybe using the cookie thing all the forum posts go on about) but I do not know exactly how to incorporate it into the JS above.
I know that I will have to load the cookie JS in my footer with this:
<script type="text/javascript" src="scripts/jquery.cookies.2.2.0.min.js"></script>
But that is all I understand, can anyone tell me exactly how the JS/jQuery should look with the cookie stuff added?
Thanks
James
*Note : This will show popup once per browser as the data is stored in browser memory.
Try HTML localStorage.
Methods :
localStorage.getItem('key');
localStorage.setItem('key','value');
$j(document).ready(function() {
if(localStorage.getItem('popState') != 'shown'){
$j('#popup').delay(2000).fadeIn();
localStorage.setItem('popState','shown')
}
$j('#popup-close, #popup').click(function() // You are clicking the close button
{
$j('#popup').fadeOut(); // Now the pop up is hidden.
});
});
Working Demo
This example uses jquery-cookie
Check if the cookie exists and has not expired - if either of those fails, then show the popup and set the cookie (Semi pseudo code):
if($.cookie('popup') != 'seen'){
$.cookie('popup', 'seen', { expires: 365, path: '/' }); // Set it to last a year, for example.
$j("#popup").delay(2000).fadeIn();
$j('#popup-close').click(function(e) // You are clicking the close button
{
$j('#popup').fadeOut(); // Now the pop up is hiden.
});
$j('#popup').click(function(e)
{
$j('#popup').fadeOut();
});
};
You could get around this issue using php. You only echo out the code for the popup on first page load.
The other way... Is to set a cookie which is basically a file that sits in your browser and contains some kind of data. On the first page load you would create a cookie. Then every page after that you check if your cookie is set. If it is set do not display the pop up. However if its not set set the cookie and display the popup.
Pseudo code:
if(cookie_is_not_set) {
show_pop_up;
set_cookie;
}
Offering a quick answer for people using Ionic. I need to show a tooltip only once so I used the $localStorage to achieve this. This is for playing a track, so when they push play, it shows the tooltip once.
$scope.storage = $localStorage; //connects an object to $localstorage
$scope.storage.hasSeenPopup = "false"; // they haven't seen it
$scope.showPopup = function() { // popup to tell people to turn sound on
$scope.data = {}
// An elaborate, custom popup
var myPopup = $ionicPopup.show({
template: '<p class="popuptext">Turn Sound On!</p>',
cssClass: 'popup'
});
$timeout(function() {
myPopup.close(); //close the popup after 3 seconds for some reason
}, 2000);
$scope.storage.hasSeenPopup = "true"; // they've now seen it
};
$scope.playStream = function(show) {
PlayerService.play(show);
$scope.audioObject = audioObject; // this allow for styling the play/pause icons
if ($scope.storage.hasSeenPopup === "false"){ //only show if they haven't seen it.
$scope.showPopup();
}
}
You can use removeItem() class of localStorage to destroy that key on browser close with:
window.onbeforeunload = function{
localStorage.removeItem('your key');
};
The code to show only one time the popup (Bootstrap Modal in the case) :
modal.js
$(document).ready(function() {
if (Cookies('pop') == null) {
$('#ModalIdName').modal('show');
Cookies('pop', '365');
}
});
Here is the full code snipet for Rails :
Add the script above to your js repo (in Rails : app/javascript/packs)
In Rails we have a specific packing way for script, so :
Download the js-cookie plugin (needed to work with Javascript Cokkies) https://github.com/js-cookie/js-cookie (the name should be : 'js.cookie.js')
/*!
* JavaScript Cookie v2.2.0
* https://github.com/js-cookie/js-cookie
*
* Copyright 2006, 2015 Klaus Hartl & Fagner Brack
* Released under the MIT license
*/
;(function (factory) {
var registeredInModuleLoader = false;
if (typeof define === 'function' && define.amd) {
define(factory);
registeredInModul
...
Add //= require js.cookie to application.js
It will works perfectly for 365 days!
You might be using an API for fetching user from database, so use any unique data like id or email or name to identify user then use localstorage method suggested by #Shaunak D. Just replace key with user's unique field and value with popup state.
Like:
ID : popup_state
Sorry for the mistakes in the reply. I am not on my pc today 😅😛
I'm making a very basic client (ie, essentially a website) using Router5. I have my code set so that when the user clicks a button, the elements that I don't want are hidden (the class hidden is added). The elements that I want to appear have the hidden class removed. Works great. However, when I am in the non-index state and I refresh, an element from the index state reappears.
I looked in the console for debugging purposes. When I refresh, the hidden class from the index view is indeed removed, and I'm not sure why.
I'm relatively new to coding, so any help that I could get on this would be greatly appreciated.
This is my transition code. As I've said, it works when I'm going from one view to the other, but when I refresh a view that isn't index, one of the index elements reappears:
const transition = function() {
return (toState, fromState, done) => {
if (fromState) {
$(`#${fromState.name}`).addClass('hidden');
}
$(`#${toState.name}`).removeClass('hidden');
done();
};
};
Other relevant code:
const routes = router.rootNode.children.map((route) => {
return route.name;
});
const registerPaths = () => {
routes.forEach((route) => {
$(`a[href="#${route}"]`).on('click', (event) => {
event.preventDefault();
router.navigate(route);
});
});
};
$(document).ready(function () {
require('./router/index').start();
require('./router/events').registerPaths();
});
I think that's everything. Please let me know if you need to see other code in order to help.
Thanks!
The issue was that even the DEFAULT view state needed to have .hidden class in the HTML. I'm still learning more about Router!
In Meteor, I have a navigation bar with a custom handlebar method that determines whether or not the tab is active.
JS:
Handlebars.registerHelper('getClass',function(a){
url = document.URL.split("/"); //e.g. http://test.com/something, so 3rd value will have link thing
url = "/" + url[3];
val = Router.path(a);
return url == val ? "active" : "";
});
HTML Snippet:
<li class="{{getClass 'homepage'}}">Home</li>
<li class="{{getClass 'content'}}">Content</li>
<li class="{{getClass 'items'}}">Items</li>
This sets the appropriate active class on a nav-block if I open an entirely new tab, navigating to something like http://localhost:3000/content. However, it won't update the active class if I merely click a new tab. For instance, from the home page to the content page. However, if I click the items tab and then click another tab, it will update, but just once. So if I go to the items tab, items will have the active class and the next class I click will then get it, removing it from items. This only works once, unfortunately. I think it is because items has content from a DB, but I'm not sure. Anyways, I need a way to rerender handlebar helpers, if this is at all possible.
I've tried using the following JS to no avail:
Content = {};
Content._dep = new Deps.Dependency;
Template.header.events({
'click a': function () {
console.log('abc');
Content._dep.changed();
}
})
Does anybody have a way to rerender the handlebars without having to physically reload the page?
Thanks.
I just fixed it. Basically, I added a session with a random number, and updated that on click. It seemed to have done the trick.
Updated code:
Handlebars.registerHelper('getClass',function(a){
url = document.URL.split("/"); //e.g. http://test.com/something, so 3rd value will have link thing
url = "/" + url[3];
val = Router.path(a);
if(Session.get('r'))
void(0);
return url == val ? "active" : "";
});
Template.header.events({
'click a': function () {
Session.set('r', Math.random() + "");
}
})
I'm working on a blog theme that uses the inview plugin to use J & K scrolling, and also to apply a class to an article that's in view. The only problem is, since I have a mac with a large resolution, there are more than 1 articles in view at a time, so the following script adds the class "inview" to (usually for me, 3 articles) several articles at a time. Is there a way to modify this so it only adds the class "inview" to the FIRST article on the users screen? This may not be the first article on the page, technically, just the first one out of the few in view. Any help is appreciated.
$('article').each(function(){
$(this).bind('inview', function (event, visible) {
if (visible == true) {
$(this).addClass("inview");
}
else {
$(this).removeClass("inview");
}
});
});
If I understood your question correctly, I think you can add an index argument to your .each function. Like this:
$('article').each(function(index){
if( index == 0 )
{
$(this).bind('inview', function (event, visible) {
if (visible == true) {
$(this).addClass("inview");
}
else {
$(this).removeClass("inview");
}
});
}
});
This will add class the class "inview" to the first article.
You can always go to jquery.inview.js line 97 where it says
$element.data('inview', visiblePartsMerged).trigger('inview', [true, visiblePartX, visiblePartY]);
Right before this, add
if ($element.prev(".inview").length < 1)
So that it checks whether there is an element with class 'inview' before the one for which it wants to trigger the event 'inview' with visible = true.
I asked this over at the jQuery Tools official forum last week, but it's definitely not as active as stackoverflow, so thought I would ask over here as well.
On our project detail pages, we're dynamically loading content in that uses a vertical scroller to navigate through. Problem is that the height of the vertical scroller always seems to be one item too tall. I cannot find any way to affect this programmatically.
If I set it circular to true, it seems to have the correct height, but we don't want it to be continuous/circular.
Example here:
http://www.centerline.net/projects/detail/?p=21
Unminified JS is here:
http://www.centerline.net/lib/js/site-unmin.js
Any ideas?
Here's the view of what it should look like when scrolled to the last item (down arrow disappears, and does not allow a blank area below the last thumbnail.
The solution above looked like it would have worked, but also found a solution here:
http://www.jasoncarr.com/technology/jquery-tools-scrollable-stop-scrolling-past-the-end
Actual code for my site was as such:
$(function() {
// Initialize the Scrollable control
$(".scroll").scrollable({vertical:true, mousewheel:true, keyboard:true });
// Get the Scrollable control
var scrollable = jQuery(".scroll").data("scrollable");
// Set to the number of visible items
var size = 2;
// Handle the Scrollable control's onSeek event
scrollable.onSeek(function(event, index) {
// Check to see if we're at the end
if (this.getIndex() >= this.getSize() - size) {
// Disable the Next link
jQuery("a.next").addClass("disabled");
}
});
// Handle the Scrollable control's onBeforeSeek event
scrollable.onBeforeSeek(function(event, index) {
// Check to see if we're at the end
if (this.getIndex() >= this.getSize() - size) {
// Check to see if we're trying to move forward
if (index > this.getIndex()) {
// Cancel navigation
return false;
}
}
});
});
Unfortunately the number of divs in the .items container should be divisible by the number of items you want to show at a time. So you have 3 divs but you are showing 2 items at a time. That is why the scrollable plugin malfunctions.
You can either open the nonminified source and change it a little bit which shoudn't be very difficult.
Or much simpler solution would be to either add a new div and make it 4 to 2.
Or Drop the number of items you show at a time to 1 and increase the height of your divs.
Using another plugin may work too.
Hope it helps
The problem is that jQuery tools srolls all images. And after the last images there just is some empty space.
Try to add this to the scrollable constructor
$('.scroll').scrollable({
onBeforeSeek: function(e, index) {
if (index == $('.items').size()) {
return false;
}
},
onSeek: function(e, index) {
if (index == $('.items').size()-1) {
$('.next').hide(0);
} else {
if ($('.next').is(':hidden')) {
$('.next').show();
}
}
}
});
OR
api = $('.scroll').scrollable({
//your setup code
});
api.onBeforeSeek: function(e, index) {
if (index == this.getSize()) {
return false;
}
}
api.onSeek: function(e, index) {
if (index == this.getSize()-1) {
$('.next').hide(0);
} else {
if ($('.next').is(':hidden')) {
$('.next').show();
}
}
}
Disclaimer: Im no expert. I have not tested this. Your code is minified, can't see it clearly. I hardly use jQuery tools. But I think this would be the way to go.