I have a super fish menu, the delay is set to 800, but when I move from one drop-down to another it still shows the previous drop-down and the new drop-down at the same time. until the 800ms delay is over then the previous drop-down goes away. I do not want to change the delay, but if a new drop-down is opened, I want the previously opened drop-down to close right away without delay. I hope this makes sense.
Is there a way to do that?
Thanks!!
Click to view
On its website, delay is set to 800 and I guess it works fine, it doesn't display old popup. Did you make any other changes in its code?
http://users.tpg.com.au/j_birch/plugins/superfish/#examples
Edit:
Ok here is a solution if you don't want to modify your multiple UL menu structure to a single UL. Just give unique ids to each UL, then modify over = function() in superfish.js like this
over = function(){
var $$ = $(this), menu = getMenu($$);
$('.sf-menu').each(function(){
if ($(this).attr('id') != $(menu).attr('id')) {
$(this).hideSuperfishUl();
}
});
clearTimeout(menu.sfTimer);
$$.showSuperfishUl().siblings().hideSuperfishUl();
},
this may cause some other side effects but I don't see any for now.
Related
I want to have a 'plus' icon when the accordion is collapsed, and a 'minus' icon when the accordion is 'expanded'.
I have checked other answers on the internet, but what am I asking is can't I do something simple like this? (For learning purposes)
Say I place both the plus and minus icons on the accordion
<i class="fa-plus"> <i class="fa-minus">
As I see, when the accordion is collapsed, it has a collapsed class, so I'd like to hide and show both the icons as the collapsed class gets toggled on click. Why doesn't it work as the DOM gets updated when the accordion is clicked?
if(document.getElementById('candidateName').classList.contains('collapsed')) {
document.querySelector('.fa-minus').style.display = 'none';
document.querySelector('.fa-plus').style.display = 'block';
}
else {
document.querySelector('.fa-plus').style.display = 'none';
document.querySelector('.fa-minus').style.display = 'block';
}
Please note that this is just for learning purposes. I want to understand this, please don't get offended. Thankyou
Glad you are learning. Apologies if my response comes across in a different plane than your current level.
When you run JS, you're executing the code in the current state of the content. It appears that you are hoping for the icon to change from a + to a - and vice verse when the accordion is expanded/collapsed.
What you need to do, is watch the page for changes to the accordion - these are called event listeners. Bootstrap has some really convenient ones that you can use for this. Since the Accordion uses collapse events API. From there, you can watch the page for changes, and execute the change you want whenever that change happens.
const myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', event => {
// do something...
})
my goal is to hide the content of my homepage when someone visits. onClick to begin button the content should be shown. Content should stay open when user goes to other page and comes back to homepage. But it will be hidden when user closes the window and opens up the homepage again. To achieve this goal I have put the following code but it keeps the content open even when user closes and opens the window. So please help me out.
if (! localStorage.noFirstVisit) {
// hide the element
$("#content").hide();
// check this flag for escaping this if block next time
localStorage.noFirstVisit = "1";
}
Another issue is when the content shows the design gets little messed up(by widening the divs, bringing horizontal scroll)
$(".roll-button").click(function(){
$("#content").show();
});
I would highly appreciate if you check website, suggest me fix or show me proper way to achieve this goal. url:iamicongroup.com
You can totally use sessionStorage to detect whether it is new tab(window) or not.
When you first visit this page, set sessionStorage.noFirstVisit = "1";.
After you go to another page and back, sessionStorage.noFirstVisit is still "1".
But when you close the tab or browser and open the page newly again, sessionStorage.noFirstVisit will be undefined.
Documentation is here
The documentation also provide the difference between sessionStorage and localStorage.
I would suggest reading this: Detect Close windows event by Jquery
It goes over window unloading (beforeunload), which I believe is what you're after. You can set/unset your localstorage values there based on certain criteria being met; for example:
$(window).on("beforeunload", function() {
if(localStorage.noFirstVisit = "1" {
// do something
localStorage.noFirstVisit = "[someValue]"
}
else {
// do something
localStorage.noFirstVisit = "1"
}
})
Another issue is when the content shows the design gets little messed up(by widening the divs, bringing horizontal scroll)
how about adding something like 'ng-cloak' in angular, to avoid the undesirable flicker effect caused by show/hide.
when clicking the roll-button, it prevents the divs from showing unfinished..
I am kind of simulating that I have multiple pages by defining 2 divs that each act as a page. Only one page at the time is shown. Those divs are:
divProjectList
divProjectListItem
When the user opens the website, the div 'divProjectList' is shown. This div contains an un-ordered list with projects. This is a long list, so it is sortable.
As soon the user clicks an item from the list, I do a $('#divProjectList').hide() followed by a $('#divProjectListItem').show(). The list is now invisible for the user and instead is presented with project details for the item he selected from the list.
As soon as the user clicks the close button it works the other way around. The project details page is being hidden and the project list page is being shown again.
If the user scrolled down a bit (or a couple of pages) then the project list is scrolled back to the first item and the item that he clicked is now out of view.
I have a JSFiddle that has a hide- and show-button and a list which simulates the behavior that I described above.
I would like to know if it is expected behavior what I see here and how I could circumvent this. For now I solved it by doing a $.ScrollTo:
$('#' + currentProjectId).ScrollTo({duration: 0, offsetTop: 151})
This jquery code reminds you where you scrolled to, and puts you back there when you press the show button:
http://jsfiddle.net/py7zemLo/1/
jquery:
var scroll;
$("#btnHide").on("click", function (e) {
scroll = $(document).scrollTop();
// $("#divOptions").hide();
$("#divOptions").css('display', 'none');
})
$("#btnShow").on("click", function (e) {
// $("#divOptions").show();
$("#divOptions").css('display', 'block');
if ( scroll !== null ) {
$(document).scrollTop(scroll);
}
})
I hope this helps you!
I have a page with an HTML FORM to add/edit/delete Project Task rows. They are saved to a Database.
As this page can be very long/tall, right now there is a SAVE button at the top and bottom of page that uses AJAX to save all changes.
To make things easier, for the user to make a SAVE I am wanting to show a FIXED DIV across the top of the screen with a SAVE button.
This FIXED DIV should only show up when there are Un-Saved changes. So when the page load you do not see this right away until you make a change on the page. At that point it comes into view.
Clicking the AJAX Save button saves the Task records to Database and then the Fixed DIV/SAVE Button will go hidden again until another Change is detected.
Right now I have this like 90% working.
I have JavaScript which has EVENTS which call my showTaskUnSavedChangesHeaderBar() Function which is shown below when:
Text Input is changed
Textarea changed
Selection dropdown changed
Button Clicked to Add a New Task Row
Button Clicked to Delete Task Row/record
So as you see I have the code in place to Detect a CHANGE on the page. This then Triggers my Function which makes my Fixed DIV with Save button come into view.
Now once you click the Save button I saved the Data using AJAX and then call my hideTaskUnSavedChangesHeaderBar() Function which is also shown below.
This makes the Fixed DIV with Save button go back to being Hidden with it's CSS display: none property set.
Up until this point everything described above works as expected, except in my showTaskUnSavedChangesHeaderBar() Function I added some code to make the Fixed DIV only show when you are scrolled down the screen at least 100px so that it is not shown at the very top of screen right now.
This scroll trigger part also works fine.
The problem is, once you make a save and hideTaskUnSavedChangesHeaderBar() is called, it Hides the Fixed DIV but as soon as you scroll at all again, it keeps showing back up, even though no new CHANGES have been made to the Data on screen.
Just looking at the code below, can someone tell me what I am missing? When my hideTaskUnSavedChangesHeaderBar() Function is called and the DIV is hidden, it should Re-set the process until another Change on page is made but I must be missing something because as soon as it goes hidden a single px scroll up or down triggers it back into view again
UPDATE
It seems like when my hideTaskUnSavedChangesHeaderBar() Function is Called, I need to somehow kill this Event $(window).scroll(function() until the showTaskUnSavedChangesHeaderBar() Function is called again, is that even possible though?
I realize a JSFiddle page might be helpful, I will work on setting one up if there isn't a simple solution posted soon. I held off as my page is really complex and i'll have to dumb it down a lot to get a Fiddle working for the demo
// When there are Un-Saved changes on the Task Edit view, show a Fixed Header DIV with a SAVE Button
function showTaskUnSavedChangesHeaderBar(){
if ($('#task-edit-unsaved-header-bar').length > 0) {
var unSavedChangesHeaderBar = $('#task-edit-unsaved-header-bar');
var fixmeTop = 100;
$(window).scroll(function() {
var currentScroll = $(window).scrollTop();
if (currentScroll >= fixmeTop) {
unSavedChangesHeaderBar.css({
display: 'block',
position: 'fixed',
top: '0',
left: '10'
});
}
});
}
}
// When there are Un-Saved changes on the Task Edit view, show a Fixed Header DIV with a SAVE Button
function hideTaskUnSavedChangesHeaderBar(){
if ($('#task-edit-unsaved-header-bar').length > 0) {
var unSavedChangesHeaderBar = $('#task-edit-unsaved-header-bar');
unSavedChangesHeaderBar.css({
display: 'none'
});
}
}
You bound an event in your function
$(window).scroll(function() {
So after that this code will always fire on scroll. If you call showTaskUnSavedChangesHeaderBar it will even bind the handler multiple times, making it fire multiple times.
Solution
You have to unbind this event handler when not needed anymore. Even better would be to put it somewhere outside and just switch a flag variable in your functions so that your scroll handler knows what to do.
.hide-me { display: none !important; }
For hideTaskUnSavedChangesHeaderBar method call addClass('hide-me') and in showTaskUnSavedChangesHeaderBar call removeClass('hide-me')
Now the scroll event won't override display to 'block'.
I am setting up a small shop using simpleCart.js and Bootstrap 3.
For displaying the cart I was hoping to use an off-canvas panel that I have enabled using the Jasny-bootstrap add-on. Everything works fine but when I eliminate elements from the cart the off-canvas panel closes. This way the user his unable to modify content in the cart without having to reopen the panel after each click. How can I keep the panel open until the user chooses to close it?
Here is an FIDDLE demonstrating the issue
From looking at this snippet from (link straight to code) simpleCart.js - line 337-353, am I right in assuming that once you remove an item it reloads the cart and therefore it causes the panel to close? If this is the case, then how would a version of this code look like to fix my problem?
// empty the cart
empty: function () {
// remove each item individually so we see the remove events
var newItems = {};
simpleCart.each(function (item) {
// send a param of true to make sure it doesn't
// update after every removal
// keep the item if the function returns false,
// because we know it has been prevented
// from being removed
if (item.remove(true) === false) {
newItems[item.id()] = item
}
});
sc_items = newItems;
simpleCart.update();
},
Thank you in advance :)
The option autohide controls if the navbar should be closed when a user clicks outside of it. Setting it to false, means it stays open until the user clicks on the 'CLOSE PANEL HERE' link.
See the fiddle
Note that normally the navmenu doesn't close when clicked on a link inside of it. I'm not sure why this is happening in your case.