Sorry but I just can't for the world understand why it isn't working. Been testing different things the whole day. I suspected my different jQuery sources but testing in jSFiddle gives me the same result. This should be an easy fix. I just want an animation when clicking on one of the circles to bring up a submenu from the right side of the screen.
The Fiddle http://jsfiddle.net/YWTt2/14/
The html part is mainly SVG stuff so there's noting to see, below is the JavaScript part and it's all in the jsfiddle.
//Function for opening submenus and animation
$(document).on("click", "a[name='menu1']", function (e) {
e.preventDefault();
$("#menu1").css({visibility:"visible"});
$("#menu1").animate({left:'550px'});
//$("#menu1").slideDown(5110);
});
$(document).on("click", "a[name='menu2']", function (e) {
e.preventDefault();
$("#menu2").css({visibility:"visible"});
});
$(document).on("click", "a[name='menu3']", function (e) {
e.preventDefault();
$("#menu3").css({visibility:"visible"});
});
$(document).on("click", "a[name='menu4']", function (e) {
e.preventDefault();
$("#menu4").css({visibility:"visible"});
});
$(document).on("click", "a[name='menu5']", function (e) {
e.preventDefault();
$("#menu5").css({visibility:"visible"});
});
//Closes the open submenus
$("#controlnav").on("click", function (e) {
$("#menu1,#menu2,#menu3,#menu4,#menu5").css({visibility:"hidden"});
});
Your code is fine, You just need to update the jQuery file to the latest one (jQuery 2.x).
check this fiddle : http://jsfiddle.net/pragneshok/YWTt2/15/
The problem is the tag. Is not supported.
Check out this answer: jQuery animate <object> tag
Related
I would like to remove the tag redirection hyperlink. Currently clicking it opens a modal but I do not want to redirect the browser. I tried preventDefault and it does not work for me.
I'm working with C# MVC. It might be that I overload elsewhere? Or are there other solutions to avoid redirecting? As a last resort I would not like to change the element to a span, div or button.
algo.cshtml:
<a id="modalAboutButton">Ir a about </a>
<div id="aboutModal" class="reveal-modal" data-reveal></div>
app.js
$(document).ready(function () {
$(document).on('click', '#modalAboutButton', function (e) {
e.preventDefault();
var $modal = $('#aboutModal');
$.get('/About/Index2', function (resp) {
$modal.html(resp).foundation('reveal', 'open');
});
});
});
Simple example
Google
Js
$('a').click( function(e) {
e.preventDefault();
alert("preventDefault");
});
Fiddle example
I hope it will help you.
I am trying to fit a new jQuery toggle function within an already working code. Basically, the toggle function should show/hide the below lying div form_fields_con with an onclick event.
The problem is that the form_fields_con div contains AJAX functionality triggered as well with an onclick event.
Toggle works when nothing in the form_fields_con div is changing but once clicked, the toggle function stops working.
This is the toggle function:
$(document).ready(function() {
$(".slidingDiv").hide();
$(".show_hide_search").show();
$('.show_hide_toggle').on('click', function(e) {
e.preventDefault();
var self = this,
sliding = $(this).closest('div').next('.slidingDiv').slideToggle(function() {
$($(self).children()[0]).text(function(_, txt) {
return txt == "–" ? "+" : "–";
});
});
});
});
And this is the AJAX one contained in form_fields_con div:
function selectcombobox(fuelcombobox, fuelid, fuelContainer, field_name) {
var popupvar = jQuery.noConflict();
popupvar('#'+fuelcombobox).css('display', 'none');
popupvar('#'+fuelid).css('display', 'block');
popupvar('#'+fuelContainer).css('display', 'none');
}
HTML and CSS posted in a JSFiddle here, to avoid too long post:
http://jsfiddle.net/Bradg/v8hzLt7f/1/
NOTE: For some reason I cannot simulate the error in JSFiddle, apologies for that.
How to prevent the two onclick functions' collision?
You change/recreate the DOM elements holding the onClick listener, a simple approach to get around your problem is event-delegation: http://api.jquery.com/on/ (see se second argument)
$('.slidingDiv').on('click', '.select_con_car', function() {
alert('clicked');
});
http://jsfiddle.net/5m2mwd9h/
I am using jquery click event to open fancybox and it is working perfect. I have added one textbox inside this inline1 div but when I input something I can't writer anything.
My Code:
$(document).ready(function() {
$(".fancybox").on("click", function() {
$("#inline1").fancybox().trigger('click');
})
});
jsFiddle: my code
Any Idea?
Thanks
There was a problem with the triggering of 'click', I managed to fix this by simply using the Fancybox API to open the Fancybox without requiring a trigger.
$(".fancybox").on("click", function () {
$.fancybox.open( '#inline1' )
});
http://jsfiddle.net/xW5gs/1171/
$(".fancybox").on("click", function() {
$.fancybox($('#inline1').html())
})
check here
I am trying to make a drop down menu work to where when you hover over the menu, it drops down and then on exiting the menu it scrolls back up.
the site I am working on is www.adventuresdev.info/give and the menu is the options titled people, places, projects.
Right now they are set to .click
Here is the .js info
$(document).ready(function ()
{
$('img.menu_class').click(function ()
{
$('ul.the_menu').slideToggle('medium');
});
$('img.menu_class2').click(function ()
{
$('ul.the_menu2').slideToggle('medium');
});
$('img.menu_class3').click(function ()
{
$('ul.the_menu3').slideToggle('medium');
});
$('img.menu_class4').click(function ()
{
$('ul.the_menu4').slideToggle('medium');
});
});
Use jQuery's hover() function.
Syntax: .hover( handlerIn(eventObject), handlerOut(eventObject) )
handlerIn(eventObject)A function to execute when the mouse pointer enters the element.
handlerOut(eventObject)A function to execute when the mouse pointer leaves the element.
Change your code for this:
$(document).ready(function ()
{
$('img.menu_class').hover(function(){$('ul.the_menu').slideToggle('medium');},function(){$('ul.the_menu').slideToggle('medium');});
$('img.menu_class2').hover(function(){$('ul.the_menu2').slideToggle('medium');},function(){$('ul.the_menu2').slideToggle('medium');});
$('img.menu_class3').hover(function(){$('ul.the_menu3').slideToggle('medium');},function(){$('ul.the_menu3').slideToggle('medium');});
$('img.menu_class4').hover(function(){$('ul.the_menu4').slideToggle('medium');},function(){$('ul.the_menu4').slideToggle('medium');});
});
Regards
Use the jquery hover() event. See this link for example and how to use it. http://api.jquery.com/hover/
I have a case where a click handler is defined/assigned in one jQuery code block (file) and I want to trigger it from another click event defined/assigned in a different jQuery code block. How can I accomplish this?
The following code is a greatly simplified version of what I am trying to accomplish. The behavior I want to see is a JavaScript alert "Element One" when I click #Element2.
Example HTML:
<p id="Element1">Element One</p>
<p id="Element2">Element Two</p>
First jQuery code block:
$(document).ready(function() {
$('#Element1').click(function() {
alert('Element One');
});
});
Second jQuery code block:
$(document).ready(function() {
$('#Element2').click(function() {
$('#Element1').click();
});
});
UPDATE: My original example actually works. I was building upon my field hint jQuery UI Dialog solution, and didn't account for about the 'clickoutside' handler that I was using. Adding a check to for the second element in my 'clickoutside' handler allows the dialog to display.
You need to trigger a click when you click on the first element. You can use the trigger method for this.
function element1Hanlder () {
alert('Element One');
}
$(document).ready(function() {
$('#Element1').click(function() {
alert('Element One');
});
});
$(document).ready(function() {
$('#Element2').click(function() {
$('#Element1').trigger('click');
});
});
EDIT: This is based on JohnP's "trigger" suggestion (so you should choose him as the right answer)...
If I load this block from an external js file...
$(document).ready(function() {
$('#Element1').click(function () {
alert( $(this).text() );
});
});
Then load this in a script tag within the HTML itself...
$(document).ready(function() {
$('#Element2').click(function () {
$('#Element1').trigger('click');
});
});
Seems to be working as intended.