Hello ive followed the instructions from this webspage Add a Blogger-like collapsible archive block to your Drupal 7 site and suprised myself that everything seems to be 'sort of' working. As you can see from my 'collapsible block' on the right of THIS PAGE that the block doesnt seem to want to stay open when viewing other months. I dont think this was the intended behaviour.
jQuery(document).ready(function($) {
// init: collapse all groups except for the first one
$(".view-collapsible-archive ul").each(function(i) {
if (i==0) {
$(this).siblings("h3").children(".collapse-icon").text("▼");
} else {
$(this).hide();
}
});
// click event: toggle visibility of group clicked (and update icon)
$(".view-collapsible-archive h3").click(function() {
var icon = $(this).children(".collapse-icon");
$(this).siblings("ul").slideToggle(function() {
(icon.text()=="▼") ? icon.text("►") : icon.text("▼");
});
});
});
Could anyone suggest anything to me to make the menu block open on a month when clicked and to close the other 'months'?
thanks
The problem is that the code you have is already added inside the file http://netmagpie.com/sites/all/themes/feverultra/js/feverultra.js and by adding your file after that, you're binding twice to the event and the function toggles twice, so the elements open and close
If you want to only have one month open then you need to close any open months before opening the one that was clicked, something like:
jQuery(document).ready(function($) {
// init: collapse all groups except for the first one
$(".view-collapsible-archive ul").each(function(i) {
if (i==0) {
$(this).siblings("h3").find(".collapse-icon").text("▼");
} else {
$(this).hide();
}
});
// click event: toggle visibility of group clicked (and update icon)
$(".view-collapsible-archive h3").click(function() {
$('.view-collapsible-archive ul:visible').not($(this).next('ul')).slideUp();
var icon = $(this).find(".collapse-icon");
$(this).siblings("ul").slideToggle(function() {
(icon.text()=="▼") ? icon.text("►") : icon.text("▼");
});
});
});
It's because of this line:
$(this).siblings("ul").slideToggle
It says: "toggle the state of all the ul elements using a slide animation"
You will want to change this to slideDown when it's hidden in order to show it and slideUp when it's visible in order to hide it.
I would provide a code sample but I'm typing with one thumb on an iPhone at the moment.
Related
I followed the sidr documentation at: http://www.berriart.com/sidr/
And I already have my sidr side left menu working fine.
But on my mobile,only on android default browser, when I click in my link "Open Menu" I also click on my menu item "Menu 1", and so it opens my submenu items with my toggle effect. And I dont want this.
I just want to open my submenu items when I click in my Menu items, and not in my link to open the menu.
I found a solution, that is, if I put my sidr menu with some margin top, to not align with my link to open the menu, the problem is solved, like in my second image.
But I dont want to give that margin-top, so Im trying look for other solution.
Somebody there have exprience with this plugin and can give me a help??
(This only happens in mobile and on android browser that cames when you buy the smartphone, but I want to use this on mobile, and many users must use internet explorer which I think is the default browser for android.)
Like this image below, I have the problem, because the "Open Menu is aligned with "Menu 1" and so Im clicking on both!
Like this image below, I dont have the problem, because the "Open Menu is not aligned with "Menu 1" and so I only click on "Open Menu"!
This is my jQuery to start sidr plugin:
$(document).ready(function() {
$('#simple-menu').sidr({
name: 'sidr',
speed: 200,
side: 'left',
source: null,
renaming: true,
body: 'body'
});
});
$(document).ready(function() {
$('.sub-menu-sidr').hide();
$("#sidr li:has(ul)").click(function(){
$("ul",this).toggle('fast');
});
});
And here is my fiddle:
http://jsfiddle.net/y4CX4/1/
Easiest way to do that, IMHO is to prevent the first click on that link from happening, that is:
Define a variable to check if link was clicked, at click event check the value and prevent the event from propagating and then set the variable to something else, in order to allow all future clicks to happen naturally, for example:
var click = false;
$('#sidr > ul > li').first().find('a').first().click( function(e) { if ( click == false ) {
e.stopPropagation();
click = true;
} });
The next step would be to add a function that resets this variable when the menu gets closed by adding:
onClose : function() {
click = false;
}
An working example can be found here: http://jsfiddle.net/y4CX4/3/
Also make sure you use the same function in order to use the variable click properly ( in the fiddle you posted you used $(document).ready() two times for some reason ).
My solution to that problem is based on the top answer which helped me find the right way.
So I find all the links and prevent their default behavior until the menu is opened and then disable them again when the menu is closed.
var menuButton = $('.js-side-menu-toggle');
var sideMenuLinks = $('#sidr').find('a');
var canClick = false;
sideMenuLinks.on('click', function(e) {
if (!canClick) {
e.preventDefault();
}
});
menuButton.sidr({
onOpen: function() {
canClick = true;
},
onClose: function() {
canClick = false;
}
});
The tricky part here is that we need to change the plugin itself so that this code can work.
The problem is that the functions onOpen() and onClose() are called after the animation is done but not in it's callback function. That makes the functions to be called with the animation which is async and here is our issue.
Wrong:
// Close menu
if($body.is('body')){
scrollTop = $html.scrollTop();
$html.removeAttr('style').scrollTop(scrollTop);
}
$body.addClass('sidr-animating').animate(bodyAnimation, speed).removeClass(bodyClass);
$menu.animate(menuAnimation, speed, function() {
$menu.removeAttr('style').hide();
$body.removeAttr('style');
$('html').removeAttr('style');
sidrMoving = false;
sidrOpened = false;
// Callback
if(typeof callback === 'function') {
callback(name);
}
$body.removeClass('sidr-animating');
});
// onClose callback
onClose();
We just need to insert the onClose function inside the animation callback function in order to lock the links when the menu is closed and we should do the same with the on open code fragment.
Right:
// Close menu
if($body.is('body')){
scrollTop = $html.scrollTop();
$html.removeAttr('style').scrollTop(scrollTop);
}
$body.addClass('sidr-animating').animate(bodyAnimation, speed).removeClass(bodyClass);
$menu.animate(menuAnimation, speed, function() {
$menu.removeAttr('style').hide();
$body.removeAttr('style');
$('html').removeAttr('style');
sidrMoving = false;
sidrOpened = false;
// Callback
if(typeof callback === 'function') {
callback(name);
}
$body.removeClass('sidr-animating');
// onClose callback
onClose();
});
My problem:
Each individual header section opens a content section. One button expands and collapses all those sections. However, the button is not functioned the way I would like it. Instead, it opens all the closed sections and if any section was left open - it closes it.
Code:
$(".panelStyle").hide();
$("#ExpandAndCollapseButton").click(function () {
$(".panelStyle").slideToggle("medium");
});
$(".sectionLabels").click(function () {
$(this).next(".panelStyle").slideToggle("medium");
});
You don't want to use slidetoggle as a "force all open" animation. You want to use slideDown()
slideToggle will just toggle the current state. slideDown will force any that aren't open to open, but leave the ones that are open alone.
Please see my change below.
$(".panelStyle").hide();
$("#ExpandButton").click(function () {
$(".panelStyle").slideDown("medium");
});
$(".sectionLabels").click(function () {
$(this).next(".panelStyle").slideToggle("medium");
});
I added some logic to toggle all open/close. If none are open, then all are opened. If one or more is already open, the all are closed.
Here is the fiddle
http://jsfiddle.net/QwbNj/1/
Here is the code.
$("#clickme").click(function () {
if($(".openme:visible").length == 0){
$(".openme").slideDown();
} else {
$(".openme").slideUp();
}
});
$(".menuwrapper").click(function () {
$(this).find(".openme").slideToggle();
});
I am programming a section of a website using jquery, where when you mouse over a button it hides a specific div and shows another one, then when the mouse leaves it hides that one and shows the original, and it works great, but when you go over the buttons to fast it gets flickery and starts showing all the divs(doesnt hide some)
My code:
function changeAddPanelText(element, element2) {
$(element).hover(function(){
$("#add-content-desc1").toggle();
$(element2).fadeIn(700);
},
function(){
$(element2).toggle();
$("#add-content-desc1").fadeIn(700);
});
}
any ideas ? thanks
Edit: I updated the code to the current version.
Try this
function changeAddPanelText(element, element2) {
$(element).hover(function(){
$("#add-content-desc1, element2").stop().toggle();
}, function(){
$("#add-content-desc1, element2").stop().toggle();
});
}
Hi everybody,
I have some issue with one of my project. I'm currently developing a toolbar for Google Chrome. The concept is that my extension insert by using a content script an iframe in every page i visit. Materialized in Red on my Printscreen.
After that i've created another iframe who appear when i click on the "Menu" Button. This iframe appear like a dropMenu. Materialized in orange in the printscreen.
Well now let me explain my problem :
When i click on the "dropMenuButton" i execute this code :
$( "#dM1").click( function() {
dropMenu('dropMenu1', $(this).position().left);
});
To be clear the function "dropMenu" will call my background page (by messaging exchange) to show or hide the dropMenu, in function if it's allready activated or not.
Here is the executed code by the "dropMenu function"
if(document.getElementById("dropMenu"))
{
$("#dropMenu").slideUp(800, function() {
$(this).remove();
});
}
else
{
var body = $('body'),
MenuURL = chrome.extension.getURL(dropMenuPage + ".html"),
iframe = $('<iframe id="dropMenu" scrolling="no" src="'+MenuURL+'">');
body.append(iframe);
$("#dropMenu").hide().slideDown(800);
// Shift the menu (Left)
$("#dropMenu").css({left: marginLeft+'px'});
}
So the event on dropMenuButton work perfectly but i want to provide some ameliorations like a .ClickOut event. What i want is that when somebody click outside the dropMenu (in orange) the menu will be hide.
I've tried a lot of things but nothing work...
Hope somebody will provide me some help !
Thanks in advance.
Edit (Injection) :
I've tried to inject the javascript like this :
var injectJs = $('<script type=text/javascript>' +
'$(document).click(function() {' +
'dropMenu("dropMenu1", 0);' +
'});');
body.append(injectJs);
injectJs = $('$("#dropMenu").click( function(e) {' +
'e.stopPropagation();' +
'});' +
'</script>');
body.append(injectJs);
But it didn't seems to inject on the page. It should have a problem somewhere...
Can't you just add a click event on the document? Then on the actual drop down menu (or any other events where you don't want to hide the drop down) prevent any clicks from bubbling up:
$(document).click(function(){
// hide drop down clicking anywhere on page:
$("#dropMenu").slideUp(800, function() {
$(this).remove();
});
});
$("#dropMenu").click( function(e) {
e.stopPropagation(); // prevent click on drop menu from removing the drop down.
});
It works great but like this :
$(document).click(function(){
// hide drop down clicking anywhere on page:
dropMenu('slideUp', 0);
});
$("#dM1").click( function(e) {
e.stopPropagation(); // prevent click on drop menu from removing the drop down.
dropMenu('dropMenu1', $(this).position().left);
});
Now i have to insert the similar code on the global page, someone have an idea how i can insert dynamically a js code ?
I'm having trouble getting jQuery to allow only one content-DIV to be visible at a time. So that clicking between the menu buttons (about, newsletter, contact) this will allow only one content-DIV to be visible.
--- Then the content-DIV needs to hide when the associated menu button is clicked (like it does currently).
--- Upon clicking the header 'alliteration', any content-DIVs that are open need to hide.
$('#collapse_about').hide();
$('#collapse_newsletter').hide();
$('#collapse_contact').hide();
$('#menu1').click(function() {
$('#collapse_about').slideToggle(400);
return false;
});
$('#menu2').click(function() {
$('#collapse_newsletter').slideToggle(400);
return false;
});
$('#menu3').click(function() {
$('#collapse_contact').slideToggle(400);
return false;
});
I understand that this is a pretty simple bit of code... but the form of it evades me. Any help is much appreciated.
Off the top of my head I would assign all of the menus the same class such as class1. Then make the div slideUp which has a callback function. When the slideUp is finished it will slide down the correct panel.
$('#menu1').click(function() {
$(".class1").slideUp(function() {
$('#collapse_about').slideDown(400);
});
});
$('#menu2').click(function() {
$(".class1").slideUp(function() {
$('#collapse_newsletter').slideDown(400);
});
});
$('#menu3').click(function() {
$(".class1").slideUp(function() {
$('#collapse_contact').slideDown(400);
});
});
Edit: This is a start but doesn't entirely do as you are asking:(
Here is the demo on jsfiddle: here