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 ?
Related
I'm using a simple jQuery Event Calendar script. Because I'm no good with jQuery. However when you click on a day with an Event the Event information drops down. I believe I've located the correct piece of code for this function.
function displayEvent() {
$('tbody.event-calendar td').on('click', function(e) {
$('.day-event').slideUp('fast');
var monthEvent = $(this).attr('date-month');
var dayEvent = $(this).text();
$('.day-event[date-month="' + monthEvent + '"][date-day="' + dayEvent + '"]').slideDown('fast');
});
};
/**
* Close day-event
*/
$('.close').on('click', function(e) {
$(this).parent().slideUp('fast');
});
So my question is. How can I make this slide right instead of down? Because of the layout of my Website I'd rather the Event information came out to the right.
Thank you in advance!!
EDIT;
Plugin Link: http://jquery-plugins.net/jquery-simple-event-calendar
Github Link: https://github.com/philipehsing/jQuery.Simple-Event-Calendar
Demo: http://www.jqueryscript.net/demo/Creating-A-Pretty-Event-Calendar-with-jQuery/#
PS: I couldn't get it to show in JsFiddle, not sure why. But you can see with the Demo how it works! I hope this is enough information.
I trying to use this menu Bootstrap Collapsible Side Menu but something doesn't work properly. There is + sign and - for open and close. When I open first menu + become - as must be but when I click on second menu first must close and - must become +. I hope you get what I mean. This doesn't work properly. Also when I click on second menu the icon that is front of the name become - also.
I've tried to recreate this menu in jsfiddle but doesn't work there. Doesn't open the menu but you can see what happen with + and - signs. If you click on both links they are with -.
Here is the jsfiddle. I didn't work with jsfiddle before.
Looks like you just forgot to load jquery, or you are loading it after bootstrap. It works fine if you load it properly.
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
http://jsfiddle.net/acidrat/BP6Wh/2/
Check you browser console for error messages.
EDIT
Ok, now i get it. You will have to work with Bootstrap collapse events that are triggered after collapsing.
$('#menu-bar').on('shown.bs.collapse', function () {
var currentlySelectedElement = $(this).find('.collapse.in');
var targetAnchor = $('[data-target="#' + currentlySelectedElement.attr('id') + '"]');
$('[data-target="#' + currentlySelectedElement.attr('id') + '"]').find("i.fa-plus").removeClass("fa-plus").addClass("fa-minus");
});
$('#menu-bar').on('hidden.bs.collapse', function () {
var currentlyCollapsedElements = $(this).find('.collapsed');
currentlyCollapsedElements.each(function () {
$(this).find('i.fa-minus').removeClass('fa-minus').addClass('fa-plus');
});
});
Here the updated jsFiddle: http://jsfiddle.net/acidrat/BP6Wh/5/
I'm using classed links to change FlowPlayer content. Here is a working version: http://jsfiddle.net/r9fAj/
In my actual page using the same code the first link clicked works fine. The second one does not fire the click function at all. Even if I comment out everything but the console.log()...
$('.playerLink').click( function() {
audioPlayer.unload();
initAudioPlayer();
$('#player').css('display', 'block');
$('#player').animate({"height":"50px"}, 1000);
var newClip = {'url':$(this).attr('ajax-data'),'autoplay':true};
audioPlayer.play(newClip);
console.log('playing ' + $(this).attr('ajax-data'));
});
HTML like so
Listen
Listen
<a id="flowplayer" href="/audio/episodes/09_27_2013_Happy_Hour_88509726.mp3"></a>
And the player initialized like so:
var audioPlayer;
var initAudioPlayer = function () {
$f("flowplayer", "/player/flowplayer-3.2.16.swf", {
plugins: {
controls: {
fullscreen: false,
autoHide: false,
}
},
clip: {
autoPlay: false,
url: "",
}
});
audioPlayer = $f();
};
initAudioPlayer();
Since the jsFiddle works over and over I assume something else in my page is preventing the second click() from working but the console has no errors for me.
So my question is, short of posting the whole site's code how do I pursue debugging this?
So it sounds like your .click() event handler is only being fired for the first link you click and not for additional clicks. For general debugging, you could take your page that is not working and gradually comment out / remove other part of the JS and HTML until you are able to make it work correctly. Or start with the minimal amount that is working (the fiddle) and gradually add in the rest to see when it stops working.
So this is the first site I have done where content is delivered via AJAX and internal links are caught by
$("a:not([href^='http://'])").click( function(e) {
var url = $(this).attr("href");
var title = ($(this).attr("title")) ? ': ' + $(this).attr("title") : '';
e.preventDefault();
if(url!=window.location){
window.history.pushState({path:url},title,url);
$('#contentMain').load(url);
document.title = "It's New Orleans" + title;
}
});
For some reason it does work once to click a link with the class but the second time gets preventDefault()ed.
Listen
The fix was adding [href^='#'] to not() e.g.
$("a:not([href^='http://'],[href^='#'])").click( function(e) {
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.
I have a navigation list. The effect I am looking for is when the user clicks on a link, an accordion style div is built and displayed by jQuery. Then if the user clicks the same screen, the is deleted from the screen.
Here's some cod that will create an DIV if it is not already there, load it with some HTML from the URL contained in a link's HREF attribute, then turn it into an accordion. If the DIV already exists, it removes it.
$('.navLink').click( function() {
var accordion_id = 'accordion_' + this.id;
var accordion = $('#' + accordion_id);
if (accordion.length > 0) {
accodion.remove();
}
else {
$('<div id="' + accordion_id + '"></div>')
.appendTo('#someDiv')
.load( $(this).attr('href') )
.accordion();
}
return false; // cancel default action of link
});
Yes, I'm quite sure that this is possible. It looks like there may be plugins and third-party tools out there that can help you with this task. This one looks promising: http://jqueryui.com/demos/accordion/