Develop Reference

Function to change CSS of nested submenu not working (jQuery)

I'm attempting to create a slide-in menu for a mobile website which has nested submenus that also slide in over the primary parent menu. This is done by editing the right style attribute to move each menu off & on screen.
Everything is working properly except that once I open a submenu, the function that's supposed to close the submenu is changing the CSS. The function that contains this instruction itself is executing (as evidenced by a console.log), but the line that edits the CSS is not working.
Here is the function that is having trouble:
$(document).ready(function(){
$('.close-sub-menu').click(function(){
$(this).parent().css("right", "-425px");
console.log("this line is logging correctly");
});
});
Interestingly enough, if I attempt to edit the CSS of background-color or left, it will work. But right will not work.
I've tried using addClass and removeClass instead, referencing the parent's class name directly instead of using this, and inline function calls, but none of it has seemed to work. I think it is either a scoping issue, or perhaps some interference with the parent menu. Either way, I'm not able to figure it out.
Here is a simple example of my problem in a JSFiddle: https://jsfiddle.net/wk4wwfer/2/
JQuery is very acceptable.

Your $('.slide-menu-sub-parent').click function is still firing when you click the close button.
Update your close function to be:
$('.close-sub-menu').click(function(e){
e.stopPropagation(); //Prevents the click event from bubbling up and triggering the other click events registered
$(this).parent().css("right", -425);
}
Fiddle solution.

Make one element disappear when another element disappears

Context: I am making a small jQuery library for modals (in-window popups): https://github.com/hypesystem/d_modal.js
When creating a new modal, it is possible to also fade the page. This is done by adding a div with a semi-transparent black background.
When the modal is removed I want the "fade" to disappear as well. But not just when the modal is .remove()'d - I want the fade to disappear in the same way as the modal on any action that makes the modal disappear: fadeOut(), hide(), etc.
Here is a jsFiddle to test in (if you have any ideas): http://jsfiddle.net/n5fqS/
What I'm looking for is one solution that handles all the cases.

there are many ways of hidding elements (removing content of div, changing css "display" property, fadeOut(), hide(), etc, etc) and Jquery does not have a universal event listener that would group all these events. I think you will have to manually trigger a "hide" event as a callback function in all the places where your first div is being hidden. For example:
$(".dismiss").click(function() {
$("#div-one").hide(function(){
$(this).trigger('hide');
});
});
Then you only have to have once the event handler:
$("#div-one").on('hide', function(){
//code that hides my second div
)};
Of course, you will have to manually add the trigger every place where relevant. So its not "the one solution".

you can use jquery dialog to achieve this functionality.

The short answer seems to be: jQuery does not emit events on hide.
In order to combat this, I have used the best solution I could find, and started an open project to enable sending of the required events: https://github.com/hypesystem/showandtell.js
This should cover, at the moment, the most common use-cases. Any feedback on this is appreciated.

try like this
$(".dismiss").click(function() {
$("#div-one").hide(function(){
$("#div-two").hide('slow');
});
});

Hover twice for ajax to load

This works, but when I hover the first time, nothing loads. When I mouse off then back on, ajax has loaded. I want ajax to load on the first hover.
index.html
<span title="" id="test" class="tooltip"></span>
tooltip.html
<span id="test">this is ajax</span>
jquery
$('.tooltip').hover(function () {
var id = $(this).attr('id');
$.get('tooltip.html #'+id, function(data) {
$('#'+id).attr('title', data);
});
});

Looks like you are relying on the browser's inbuilt tooltips (showing the title on hover.) That tooltip is likely triggered by the mouseover event, meaning that after you've dynamically added the title, you need another mouseover event to actually trigger the tooltip. Seems it's working as designed.

This is because the first time you hover (which is actually the mouseenter event) the ajax function loads the data and changes the title, but the mouseenter event has already fired and your tooltip is already open so it's too late.
Your best bet is to directly alter the tooltip rather than change the title of the original element.
What you should actually do is change both and alter your hover function to check for a title so that next time the hover occurs you don't need to load the information again, rather refer to the title you've already populated.
Hope that helps :)

As pointed out earier, the problem is that the browser displays the inbuilt title as soon as you hover the element, and ajax use some time to load the content and append it.
I would advice you to use one of the MANY tooltip-plugins out there: https://www.google.com/search?q=tooltip+jquery+plugin
I've had some great experience with qTip. Easy to set up and easy to restyle.

jQuery update HTML on the fly

I have a slideshow that has 5 slides (each has an individual id) and a previous and next button. When hovering the previous or next button you get a tooltip, the tooltip uses jQuery to get the ID attribute from the previous and next div and show this.
Ive gotten it working fine on mouseenter only if you dont leave the div and keep clicking the Tooltip doesnt update, you have to leave the arrows after each click for the value to be aupdated, does this make sense?
my script is...
$("div.arrows div").bind("mouseenter", function () {
$("div.arrows div.next").children("span").html($("div.roundabout-in-focus").next("div").attr("id"));
$("div.arrows div.prev").children("span").html($("div.roundabout-in-focus").prev("div").attr("id"));
});

Since you are not leaving the div the next mouseenter is not fired which will update the tooltip. Try to set the tooltip on slide change event if supported by the plugin you are using or click event of the prev/next buttons.

You will have to bind the updated html to the click event also then. This may work. Hard to tell without your html.
$("div.arrows div").bind("click, mouseenter", function () {
$("div.arrows div.next").children("span").html($("div.roundabout-in-focus").next("div").attr("id"));
$("div.arrows div.prev").children("span").html($("div.roundabout-in-focus").prev("div").attr("id"));
});

What does mouseover do and do you want it to change after a click on the next/prev button? I think you have to remove the inner HTML before appending new HTML. Maybe try to empty the element with .empty() and add a click event to catch that and call the function from there as well. Also try to log or alert some feedback to know when it does fire.

how to remove hyperlink from contentflow.js file?

http://www.jacksasylum.eu/ContentFlow/docu.php
this is the link of jquery plugin which i am using in asp.net page.
when i click on the image of contentflow it shows the image in the next page so my requirement is to remove that link.
so how i can remove that link from the contentflow.js file.

comment this line in contentflow.js
window.location.href=A

You'll need to look in the contentflow.js file for the place where it creates a hyperlink using the image that you've clicked on.
Once you've found that, you can modify the source code so that it doesn't create a link at all, but just displays the image.

there is a canvas element used to show the picture. Using chromes developers tolls, Ive noticed that the canvas element has a click event handler attached. So I`m guessing that if you remove the click event handler, the link will be removed also.
Try this:
jQuery(document).ready(function()
{
jQuery('.content portray').unbind('click');
// removes/detaches any click events from the elements with 'content portray'
//class. Because the canvas has this class.
});

Another approach without having to modify the default ContentFlow behavior is to override the onclickActiveItem event in the ContentFlow options, eg:
var flow = new ContentFlow('MyContentFlowDivID',
{
onclickActiveItem: function(item) {
//empty function overrides default behavior
}
});