Especially on smaller screens like iPad and iPhone it happens that a click on a element does not only trigger the "onclick function of the actual script but also the "onclick" function of the javascript of the underlaying div.
On my homepage http://www.somersetsights.co.za/en/index.html for example on a iPad a click on the like button activates the FB Like dialog and a click on the OK button of this Like dialog triggers the start of a movie from the slideshow function underneeth the Like dialog.
I tried to find a solution by googling this problem but struggled to find something. I am not a beginner but I am also not a experianced javascript programmer. Help would be very much appreciated.
Peter
Maybe that could help you : http://www.quirksmode.org/js/events_order.html
Tell us if you use jQuery or another JS library.
Related
Hope everyone is having fun on this fun (or frustrating š like me) coding day. So, I came across a problem and was hoping someone could help guide me to the right solution. I want to set it so that when I click on the āread moreā button, it adds the āactiveā class and would expand the paragraphs.
I was able to do a loop function for multiple buttons on the page, but when I click on one, it affects all the buttons. I know this is a looping problem but I have not figured out a way to solve it.
What Iām trying to do is basically only have the button I click on add the class, without it working on all the buttons on the webpage. I intend to add more buttons to the page, so if anyone has a better solution or knows of a looping method (cause Iām pretty sure the looping Iām using is the wrong way), please help.
Please see the video for what I mean when I click on one button, both buttons get affected by it.
I'm up to upgrade my "wysiwyg" editor by adding new buttons to the toolbar. One of these buttons is called "add a slideshow" which works this way :
when I click the button, it shows up a popup window which tells me to add pictures that are gonna be in the slideshow.
then when I choose the pictures, a simple slideshow will be created and shown in the editor.
I made some research in the net and I found an enormous number of slideshow codes that each time when you wanna change the slide, you have to go to html code and change the attribute's value ... So instead of that, I just wanna make it easier to the user by doing this "popup window + automatic add of the pic to the slideshow"
If anyone of you guys have an idea about this, please help me to achieve this work.
PS: Sorry for my poor English :p
The unfortunate thing about wysiwyg text editors is, while some have options, usually what you see is what you get.
I am trying to make a bookmarklet to allow me to select all my friends in the dialog to create an event on Facebook. Examining the source with Firebug shows the following:
The div container for each person gets a new class label of
selectedCheckable
when it it is clicked, So I have written this like of JS to try and select all the div's and give them this class:
$(".checkableListItem").addClass("selectedCheckable");
This works in selecting them, however when it comes time to press the "Save and close" button, the changes do not seem to have any effect in selecting all the friends to add to the event. It seems that FB has a different way of marking the friends that have been selected to add to the event. Would anyone be able to point me in the right direction so I can accomplish this? Thanks in advance, RayQuang :)
May I advise instead of making your own couldn't you just use one of these Greasmonkey scripts?
http://userscripts.org/scripts/search?q=facebook+invite&submit=
That's what I was doing and it was working for my events. Let me know if it works for you.
I'm trying to find something similar to the 'Table of Contents' drop down at the top located at http://codeigniter.com/user_guide/ but for jQuery. It looks like that site uses the moo tools fx library. Does anyone know of an already existing plugin for jQuery that does the same thing or easy javascript code to accomplish the same sliding effect for that menu?
It's right there in the core; http://api.jquery.com/slideDown/ . Just call that function in a link's onclick event and you should be good to go.
$('a.expand').click(function() {
$('#toc').slideToggle(); // slide up if down, down if up.
});
To achieve that exact effect you'll just have to use the slideToggle() function built into jQuery.
$('#toggleButton').click(function(){
$('#tableOfContents').slideToggle();
});
You'll need to wrap the table of contents in and have a link/button/whatever width id="toggleButton" to activate it. Make sure the button is outside the table of contents though!
You can check out this links -
http://www.webresourcesdepot.com/sliding-top-menu-with-jquery/
http://net.tutsplus.com/tutorials/javascript-ajax/build-a-top-panel-with-jquery/
You can even google out for more. There are many of them available.
You can use the jQuery .slideDown() and .slideUp methods.
http://api.jquery.com/slideDown/
However something as big as that menu you probably want to call in on the fly with ajax with the callback function on slideDown.
Edit : The reason I recommend calling in the menu with AJAX is because of the usability/accessibility issue cause by having around 100 links off screen that a keyboard user can still tab through. It would take ages for a keyboard user to tab through all the off screen links to finally come to the "Table of Contents" link that activates the menu and then to shift tab back to the one he/she wants...terrible. The menu already does not work with JS off. (There is a link to the Table of Contents page below instead). Therefore calling the menu in with AJAX and giving the first link of the menu focus() is a much better solution.
Yep, it's mootools Fx.Slide. In jQuery you should use slideDown (http://api.jquery.com/slideDown/)
net APPLIATION dashboard, i need to provide help icon on the screen. For that i have few option as follows
I can use AJAX modal popup and register usercontrol having help content and show it on modal popup control on click of help button
I can use javascript buble tooltip for help on mouse over/enter of help icon.
Can you suggest me right approach
There is never a "right" or "wrong" approach, certainly not in a clear-cut fashion. What I personally would do is use jQuery to provide a client-side modal (or modeless) dialog and populate the dialog via AJAX. In this regard I could have a dynamic help page loading help from a database and I wouldn't have to reinvent the wheel on each page so to speak. jQuery.UI has a decent modal dialog that would work well in this situation so long as you coded up the rest to pull the content.
I would also go with a jQuery/JavaScript type popup, I think a correct approach might be to only load the content when its required, ie on icon rollover or on click to reduce overhead.